/*
 * page-shops.php（店舗検索）・page-all.php（店舗一覧）専用: PC/SP統合作業でSP側に
 * 追加したモバイル用スタイル。表示切り替えはresponsive-nav.cssの
 * @media (max-width: 768px)ブロックに従う（.site-nav--pc/.site-nav--sp）。
 * 固定ヘッダー分の余白は既存の#signage{padding-top:53px}（responsive-nav.css）で
 * 対応済みのため、ここでは追加しない。ただしpage-all.phpは本番同様#signage自体を
 * SPで非表示にするため、#contentへ同じ余白を付け替える（下記参照）。
 * 元は本番の実際のresource/css/shops.css（ユーザーから共有いただいた内容）の該当ルールを、
 * このテーマの実際のマークアップ構造（#signage/#article/.edit-area等、本番の
 * #mainContents/#shops等とは別物）に合わせて移植したもの。
 */

.inner {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
}

/*
 * page-all.phpはtiticaca-sp/page-all.php同様、SPでは#signageのバナーごと
 * 非表示にする（title_shop.pngの件と同じく、本番でも表示されていないことを確認済み）。
 * #signageのpadding-top:53pxが担っていた固定ヘッダー分の余白を#contentへ移す。
 */
@media (max-width: 768px) {
  /*
   * .select__list（隠しselect、zoom:1.5でタップ判定を拡大するハック）が、
   * 直接の親.select__wrap（overflow:hidden）ではクリップしきれず、さらに外側の
   * #signageのscrollWidthにまで滲み出て横スクロールを起こしていた
   * （page-shops.phpの「店舗検索」フォーム、実機で発見）。#signage自体にも
   * overflow:hiddenを付けて確実に断つ。
   * ただし#signageの高さはauto（別件で対応済み）で、position:absoluteの
   * .shop-search-birds-sp（負のbottom値で下にはみ出す装飾）は高さ計算に
   * 含まれないため、overflow:hiddenのままだと#signageの下端で鳥が縦に
   * クリップされてしまっていた（レビュー指摘「鳥の画像が途切れている」に
   * より発覚）。横スクロール対策が本来の目的なのでoverflow-xのみに絞り、
   * 縦方向のはみ出しは許可する。
   */
  .page-shops #signage {
    overflow-x: hidden;
  }
  /*
   * style.cssの#content{margin-bottom:100px}（全ページ共通のPC用ルールで
   * 範囲指定なし）が、page-shops.phpでも本番には無い100px分の余白を
   * フッター直前に作っていた（single-shops.phpで既に対応済みの同じ問題。
   * ユーザー指摘により本ページでも未対応だったことが発覚）。本番は
   * #mainContents/#shopsともmargin:0で、フッターとの間隔はfooter自身の
   * 余白のみで構成されているため、#contentのmargin-bottomを打ち消す。
   */
  .page-shops #content {
    margin-bottom: 0;
  }
  /*
   * style-shop.cssの#signage.shop-searchはPC向けに高さ495px固定+
   * 414x335pxの装飾用「旗」画像を:before/:afterで配置する設計になっており、
   * SPでも漏れて適用されていた（レビュー指摘により発覚。375px幅の画面に
   * 414px幅の装飾が乗り、余白過多・旗画像が過大に見える原因になっていた）。
   * SPではこの装飾を非表示にし、高さもコンテンツに合わせて自動化する。
   */
  .page-shops #signage.shop-search {
    height: auto;
  }
  .page-shops #signage:before,
  .page-shops #signage:after {
    display: none;
  }
  .page-all #content {
    padding-top: 53px;
  }
  .admin-bar.page-all #content {
    padding-top: 99px;
  }
  /*
   * 店舗検索プルダウンから/shops/all/#エリア名へ遷移した際、ブラウザ標準の
   * アンカージャンプだと.shop-area-section（#hokkaido等）の上端がビューポート
   * 最上部にぴったり合ってしまい、53px固定のsp-headerの裏にエリア見出し
   * （.areaTitleArea）が隠れて見えなくなっていた（レビュー指摘により発覚）。
   * scroll-margin-topで固定ヘッダー分の余白を確保する。
   */
  .page-all .shop-area-section {
    scroll-margin-top: 53px;
  }
  /*
   * single-shops.phpは#signageの代わりに.shop-single-titleArea等を#contentの
   * 手前（外）に新規追加したため、ヘッダー分の余白が無いとロゴ等が固定ヘッダーの
   * 裏に隠れてしまう。本番は.shop-single-titleArea相当（#shopsSingle .titleArea）の
   * 外側にある共通ラッパー(.contents{padding-top:53px})でヘッダー分を確保し、
   * .titleArea自身のpadding-topは装飾用の4.8%のみを保持している。このテーマには
   * その共通ラッパーが無いため、当初はpadding-topにcalc(4.8%+53px)を積み増して
   * 対応していたが、これだと箱（背景色・背景画像）自体の高さが本番より53px分
   * 大きくなり（ヘッダーの裏に余分なピンク領域が隠れる形になり）、実機での見え方が
   * 本番と微妙にズレる可能性があった。margin-topなら箱自体はヘッダーの外に
   * 押し出されるだけで、padding-topは本番と同じ4.8%のまま保てるため、
   * こちらに変更する。
   */
  .single-shops .shop-single-titleArea {
    margin-top: 53px;
  }
  .admin-bar.single-shops .shop-single-titleArea {
    margin-top: 99px;
  }
  /*
   * style-shop.cssの.single-shops #content{padding-top:71px;background:url(...)}は
   * PC版の#signage直下に来る前提の余白・装飾で、.site-nav--pc等で範囲指定されて
   * いないため無条件にモバイルにも適用され、店長メッセージ〜取扱いアイテムの間に
   * 本番には無い71px分の余白とPC用の背景画像が挟まっていた。本番は#content相当の
   * ラッパーを持たずshopMessageの直後にshopDetailが来る構成のため、モバイルでは
   * 打ち消す。
   * さらにstyle.cssの#content{margin-bottom:100px}（これも全ページ共通のPC用
   * ルールで範囲指定なし）が「エリアをお選びください」の下に本番には無い
   * 100px分の余白を作っていたため、合わせて打ち消す。
   */
  .single-shops #content {
    padding-top: 0;
    margin-bottom: 0;
    background: none;
  }
  /*
   * style.cssの.edit-area{width:900px;margin:0 auto}がPC固定幅のまま無条件に
   * 効いており、SPでもページ全体が900px幅になって横スクロールが発生していた
   * （#signageと同じ「裸のクラス/IDセレクタがモバイルに漏れる」パターン）。
   * .edit-areaは他の未対応ページでも使われている汎用クラスのため、影響範囲を
   * このページ（page-shops.php/page-all.php/single-shops.php）に限定して上書きする。
   */
  /*
   * style.cssのbody{font-size:14px}はPC版の基準値で、本番titicaca-sp側は
   * body{font-size:16px（100%）;line-height:1.7}が基準（Playwrightで実測して
   * 特定）。この差が.shop-single-photo等、inline-block+vertical-align:middleの
   * 周囲の行送り分の余白に影響し、写真下のスペースが本番よりも狭くなっていた。
   * 他の統合済みページ（page-shops等）は14px前提で実機確認済みのため、
   * 影響範囲をこのテンプレートのbodyクラスに限定して本番の値へ合わせる。
   */
  body.single-shops {
    font-size: 16px;
    line-height: 1.7;
  }

  /*
   * 同じcommon.css未移植の影響で、img{vertical-align:bottom}が無いために
   * インライン画像がデフォルトのvertical-align:baseline（ディセンダー分だけ
   * line-boxが余分に伸びる）で描画されていた。shopLogoだけでなく、店長
   * メッセージ内のLINE友だち追加ボタン画像（36px）でも同じ理由でline-boxが
   * 8px分余分に大きくなり、コンテンツエリア全体の高さが本番とズレていた。
   * 個別に直すのではなく、このテンプレート全体のimgに対して本番と同じ
   * リセットを当てる。
   */
  .single-shops img {
    vertical-align: bottom;
  }

  .page-shops .edit-area,
  .page-all .edit-area,
  .single-shops .edit-area {
    width: 100%;
  }
  /*
   * style-shop.cssの.shops-offspring .link-button{margin-top:50px;
   * margin-bottom:50px}はPC専用の余白でSPにも無条件に効いており、
   * .searchShopListのpadding-bottom:20pxと合わせて「検索ページへ戻る」の
   * 下に本来より大きな空白ができていたため、SPでは詰める。
   */
  .page-all .site-nav--sp .link-button.toshop {
    margin-bottom: 0;
  }
  /*
   * 「新店舗情報」の見出し画像（shop-list-new-title.png、実寸510px）に
   * max-width指定が無く、.edit-areaの幅を無視して横スクロールを起こしていた。
   * このタイトル画像はPC/SP共通で1回だけ出力される（.site-nav--pc/--spで
   * 分岐していない）ため、page-shops全体に対して打ち消す。
   */
  .page-shops .edit-area h2 img {
    max-width: 100%;
    height: auto;
  }
  /*
   * 本番titicaca-spでは見出し<h2>自体に.inner（width:87.5%、中央寄せ）が
   * 付与されており、他のコンテンツ（店舗カード等）と同じ左右余白になって
   * いたが、統合版テーマではこのクラスが漏れており見出しだけ画面いっぱいに
   * 広がっていた（レビュー指摘「左右をいっぱい使いすぎ」により発覚）。
   * PC版はこの<h2>を共有しており.edit-area{width:900px}を前提にしている
   * ため、markup側に.innerクラスを足さず、SP限定でCSSのみ同じ余白を再現する。
   */
  .page-shops .edit-area h2 {
    width: 87.5%;
    /*
     * style.cssの裸の.edit-area h2{padding-top:2.8em}（実測58.8px）が
     * 全ページ共通で効いており、本番titicaca-spの#shops .titleImgには
     * 存在しないpadding-topが上乗せされ二重の余白になっていた
     * （ユーザー指摘により発覚）。打ち消す。
     */
    padding-top: 0;
    margin-top: 12%;
    margin-bottom: 6.25%;
    margin-left: auto;
    margin-right: auto;
  }
  /*
   * 「※アイテムは〜」の注記は、当初PC版の<p class="note-black">を
   * PC/SP共有で使い回していたが、本番titicaca-spは<p>ではなく
   * .inner > .notes > ul.listUl > li という別構造（margin-bottom:15%・
   * 行頭「※」のぶら下げインデント用text-indent:-1em）を使っており、
   * 単純な<p>の使い回しではmargin-bottomが本番と一致しなかった
   * （ユーザー指摘により発覚）。本番と同じタグ構造で移植し直したため、
   * ここは本番CSSの実測値をそのまま使う（.innerクラスは幅87.5%を
   * 既存の共通ルールで担うため、ここでは追加しない）。
   */
  .page-shops .notes .listUl {
    margin: 0 0 15%;
    padding: 0;
    list-style: none;
  }
  .page-shops .notes .listUl li {
    line-height: 140%;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 12px;
    color: #3a1d1d;
  }
}

/* === page-shops.php: SP版検索ボックス === */
/*
 * 本番titicaca-spの.titleArea相当。#signage自体にはoverflow:hiddenが
 * 付いている（隠しselectのzoom:1.5ハック対策、別件）ため、負のbottom値で
 * 下にはみ出す.birdsがクリップされないよう、独立したposition:relativeの
 * ラッパーとして用意する（overflow:hiddenは持たせない）。
 */
.shop-search-title-area-sp {
  position: relative;
  padding-bottom: 6.25%;
}

/*
 * 本番titicaca-spの.titleArea .birds（鳥のイラスト2羽）をそのまま移植。
 * width/right/bottomの数値は本番CSSの実測値。
 */
.shop-search-birds-sp {
  width: 17.1%;
  position: absolute;
  right: 19.5%;
  bottom: -13%;
}

.shop-search-birds-sp img {
  display: block;
  width: 100%;
  height: auto;
}

.shop-search-form-sp {
  /*
   * 本番titicaca-spの.searchBoxはpadding:9.82%（%指定、box-sizing:border-box）
   * だったが、統合版テーマでは固定20pxを使っており、画面幅が広い端末ほど
   * 本番より余白が狭く見えていた（レビュー指摘「エリアをお選びくださいの
   * サイズが全く違う」により発覚）。本番と同じ%指定に統一する。
   */
  padding: 9.82%;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
}

/*
 * タイトル画像（旗・マスコットキャラクター入りのmainTitle-sp.png、
 * titicaca-sp本番の.titleArea h1を移植）。#signage(タン地の背景)の上に
 * shop-search-form-sp（白背景の箱）とは別要素としてフルワイドで配置する。
 * font-size:0で、<h1>のブラウザ標準マージン・画像がインライン要素として
 * 持つ行送り分の余分な高さの両方を消す（titicaca-sp/css/shops.cssの
 * .titleArea h1{font-size:0}と同じ対処）。
 */
.shop-search-title-sp {
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.shop-search-title-sp img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.shop-search-form-sp p {
  margin: 10px 0 20px;
  font-size: 12px;
  font-weight: bold;
  color: #3a1d1d;
}

/*
 * front-page.phpのSP版検索ボックス（responsive-front-page.css）と同じデザイン。
 * サイト内で店舗検索プルダウンの見た目を統一するため、同じCSSをここに複製する
 * （responsive-front-page.cssはfront-page.php専用でこのページには読み込まれないため）。
 */
.select__wrap {
  width: 100%;
  height: 34px;
  position: relative;
  overflow: hidden;
  background-color: #e50a84;
  text-align: left;
}

.select__txt {
  color: #fff;
  line-height: 34px;
  font-size: 15px;
  font-weight: bold;
  padding-left: 10px;
}

.select__txt:after {
  content: '';
  width: 28px;
  height: 28px;
  background-image: url(../images/common/parts_select.png);
  background-size: 28px;
  position: absolute;
  top: 3px;
  right: 3px;
}

.select__list {
  width: 100%;
  height: 100%;
  zoom: 1.5;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* === page-shops.php: SP版新店舗情報カード（titicaca-sp/page-shops.phpの.shopListBoxから移植） === */
/* 幅は独自の固定20pxパディングではなく.inner（幅87.5%・中央寄せ）に揃える */
.shop-list-new-sp {
  margin-bottom: 5%;
}

.shop-list-new-sp .shopListBox {
  margin-top: 15px;
  background-color: #fff;
}

.shop-list-new-sp .shopListBox:first-child {
  margin-top: 0;
}

.shop-list-new-sp .shopListBox > a {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #3a1d1d;
  background-image: url(../images/shop/icon/arrow.png);
  background-repeat: no-repeat;
  background-position: 96% center;
  background-size: 3.57% auto;
  font-size: 0;
}

.shop-list-new-sp .shopListBox .photo {
  width: 35.71%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.shop-list-new-sp .shopListBox .photo:before {
  padding-top: 100%;
  display: block;
  content: '';
}

.shop-list-new-sp .shopListBox .photo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.shop-list-new-sp .shopListBox .detail {
  width: calc(100% - 37%);
  padding: 0 8% 0 5%;
  display: inline-block;
  vertical-align: middle;
  font-size: 9px;
  font-weight: bold;
  box-sizing: border-box;
}

.shop-list-new-sp .shopListBox .detail .areaName {
  line-height: 140%;
  margin: 0 0 3%;
  font-size: 9px;
  color: #3a1d1d;
}

.shop-list-new-sp .shopListBox .detail h3 {
  width: 100%;
  line-height: 140%;
  margin: 0 0 6%;
  font-size: 12px;
  color: #3a1d1d;
  word-break: break-all;
}

.shop-list-new-sp .shopListBox .detail .open {
  line-height: 140%;
  margin: 0;
  color: #e60c31;
}

.shop-list-new-sp .shopListBox .detail .open img {
  width: 33px;
  vertical-align: baseline;
}

.shop-list-new-sp .shopListBox .detail img.renewal {
  width: 50px;
  vertical-align: baseline;
}

/*
 * === page-all.php: SP版エリア見出し・アイコン凡例・店舗リスト ===
 * ここから下は本番の実際のresource/css/shops.css（ユーザーから共有いただいた内容）を
 * そのまま移植したもの。ローカルのtiticaca-spテーマの同名ファイルは本番より古く、
 * 細部（h1/h2の違い、アイコン凡例の有無、table-layout、色コード#e60a84等）が
 * 実際の本番とズレていたため、本番の値を正としてこちらを優先する。
 */
.areaTitleArea {
  margin-top: 15%;
  margin-bottom: 6.25%;
  background-color: #e60a84;
  background-image: url(../images/shop/flagsTitle.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.shop-area-section:first-child .areaTitleArea {
  margin-top: 0;
}

.areaTitleArea h1 {
  line-height: 100%;
  padding: 6.25% 0;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.areaTitleArea h1 span {
  display: inline-block;
  vertical-align: middle;
}

.areaTitleArea h1 span.areaIcon {
  padding-right: 0.5em;
  margin: 0;
  text-align: center;
}

.areaTitleArea h1 span.areaIcon img {
  max-width: 35px;
  max-height: 33px;
  vertical-align: middle;
}

/* アイコン凡例（レディース/メンズ/キッズ/ムーチョ）。#shops .iconListと#shopSearchResult .iconList
   （本番css、上書き含む）を合成した最終値。 */
.iconList {
  margin-top: 0;
  margin-bottom: 6.25%;
}

.iconList ul {
  margin-top: 2.5%;
  font-size: 0;
}

.iconList ul:first-child {
  margin-top: 0;
}

.iconList ul li {
  margin-left: 15px;
  display: inline-block;
  font-size: 9px;
}

.iconList ul li:first-child {
  margin-left: 0;
}

.iconList ul li span {
  width: 15px;
  display: inline-block;
  vertical-align: text-bottom;
}

/*
 * item_woman.png等のアイコン画像は原寸30x30pxで、幅指定が無いと親の.span(15px)から
 * はみ出して隣接テキストと重なってしまう（本番CSSにも実は無いが、本番は恐らく
 * アイコン画像自体が15px相当で書き出されているためこの指定が無くても崩れない。
 * こちらのtiticaca-spのアイコン画像は原寸が異なるため明示的に指定する）。
 */
.iconList ul li span img {
  display: block;
  width: 100%;
  height: auto;
}

.iconList ul:first-child li {
  margin-left: 0;
  width: 33%;
}

/*
 * === page-all.php: SP版店舗リスト ===
 * 以下、本番の実際のresource/css/shops.css（#shopSearchResult .searchShopList）を
 * ID部分だけこちらのクラス構成に合わせて、プロパティ値はそのまま移植したもの。
 * display:tableは本番で実際に機能している実装のため、そのまま踏襲する
 * （table-layout:fixedは本番に無いため付けない）。
 */
/*
 * 幅は独自の固定20pxパディングではなく.inner（幅87.5%・中央寄せ）に揃える
 * （マークアップ側もsearchShopList inner）。本番のcontent-shopAll.phpと同じ構成。
 */
.searchShopList {
  padding-bottom: 20px;
}

.searchShopList ul {
  line-height: 100%;
  padding: 0;
  margin: 0;
  margin-bottom: 3.57%;
  list-style: none;
}

.searchShopList ul li {
  line-height: 100%;
  padding: 0;
  margin: 0;
  margin-top: 0.71%;
}

.searchShopList ul li:first-child {
  margin-top: 0;
}

.searchShopList ul li dl {
  width: 100%;
  line-height: 100%;
  padding: 0;
  margin: 0;
  display: table;
  background-color: #fff;
}

.searchShopList ul li dl.head {
  background-color: #e60a84;
}

.searchShopList ul li dl.head dt,
.searchShopList ul li dl.head dd {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.searchShopList ul li dl.head dt.shopName,
.searchShopList ul li dl.head dt.shopArea,
.searchShopList ul li dl.head dt.shopArrow,
.searchShopList ul li dl.head dd.shopName,
.searchShopList ul li dl.head dd.shopArea,
.searchShopList ul li dl.head dd.shopArrow {
  border: none;
}

.searchShopList ul li dl dt,
.searchShopList ul li dl dd {
  font-size: 12px;
  font-weight: bold;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
}

.searchShopList ul li dl dt.shopName {
  width: 70.5%;
  padding: 3.57%;
  border-right: 1px dotted #f284c1;
}

.searchShopList ul li dl dt.shopName .categoryLists {
  line-height: 100%;
  padding: 0;
  margin: 0;
  margin-bottom: 5.35%;
  font-size: 0;
}

.searchShopList ul li dl dt.shopName .categoryLists ul {
  padding-left: 3px;
  margin: 0;
  margin-left: 3px;
  border-left: 1px dotted #f284c1;
  display: inline-block;
}

.searchShopList ul li dl dt.shopName .categoryLists ul:first-child {
  padding-left: 0;
  margin-left: 0;
  border-left: none;
}

.searchShopList ul li dl dt.shopName .categoryLists ul li {
  width: 12px;
  margin-left: 3px;
  display: inline-block;
}

/* item_woman.png等は原寸30x30pxのため、12px枠に収まるよう明示的に縮小する */
.searchShopList ul li dl dt.shopName .categoryLists ul li img {
  display: block;
  width: 100%;
  height: auto;
}

.searchShopList ul li dl dt.shopName .categoryLists ul li:first-child {
  margin-left: 0;
}

.searchShopList ul li dl dt.shopName .name {
  line-height: 120%;
}

.searchShopList ul li dl dd.shopArea {
  width: 20.5%;
  padding: 1.5%;
  text-align: center;
}

/*
 * 本番はdt/dd個別ではなく#mainContents a{padding:0;margin:0;text-decoration:none;
 * color:#3a1d1d}で、データ行の<a>内の文字色・下線をまとめて指定している
 * （見出し行はdlがaで囲まれていないため影響しない）。dt.shopName/dd.shopAreaに
 * 直接color指定すると、同じセレクタが見出し行のdl.head dd.shopAreaにも一致し、
 * 白文字指定(.head dt,dd{color:#fff})と詳細度が同点になって後勝ちで上書きして
 * しまう不具合があったため、リンク単位の指定に揃える。
 * style.cssの裸のa{text-decoration:underline}がここにも当たり、dd.shopArrowの
 * 中身（&nbsp;）にまで下線が引かれ矢印の左下に線が見えてしまっていたため
 * text-decoration:noneも明示する。
 */
.searchShopList a {
  text-decoration: none;
  color: #3a1d1d;
}

.searchShopList ul li dl dd.shopArrow {
  width: 9%;
  border-left: 1px dotted #f284c1;
  background-image: url(../images/shop/icon/arrow.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 35% auto;
}

/*
 * === single-shops.php: SP版店舗詳細ページ ===
 * 本番の実際のresource/css/shops.css（#shopsSingle）をこちらのクラス構成に
 * 合わせて移植したもの。
 */
.shop-single-titleArea {
  width: 100%;
  padding: 4.8% 0 2.8% 0;
  background-image: url(../images/shop/single/shopTitleBg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-color: #e60a84;
  box-sizing: border-box;
}

.shop-single-titleArea h1 {
  line-height: 100%;
  padding: 0;
  margin: 0;
  font-size: 0;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.shop-single-titleArea h1 span {
  width: 100%;
  line-height: 140%;
  display: inline-block;
  font-size: 20px;
}

.shop-single-titleArea .shopLogo {
  width: 16.4%;
  padding-bottom: 1%;
  margin-bottom: 1%;
  border-bottom: 1px dotted #fff;
}

/*
 * 本番はcommon.css（サイト全体の共通リセット、今回は移植対象外）で
 * img{vertical-align:bottom}をグローバルに効かせており、インライン画像が
 * line-boxの下端に揃う。このテーマにはその指定が無く、デフォルトの
 * vertical-align:baseline（ディセンダー分だけ少し上寄りになる）で描画され、
 * ロゴ画像と下の点線の間に余分な隙間ができていた。ここでも同じ指定を入れる。
 */
.shop-single-titleArea .shopLogo img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.shop-single-photo {
  padding: 6.25% 0;
  background-image: url(../images/shop/single/photoBg.png), url(../images/shop/titleBg.jpg);
  background-repeat: no-repeat, repeat;
  background-position: bottom center, top center;
  background-size: 100% auto;
  text-align: center;
}

/*
 * Playwrightで本番の実際のresource/css/shops.cssを取得し直して判明: 本番は
 * :before{padding-top:100%}による正方形固定+position:absoluteでのトリミングを
 * 行っている（以前の実機確認で「トリミングなし」に見えたのは、確認した店舗の
 * 元画像がたまたま1000x1000の正方形だったため、クロップされても見た目が変わら
 * なかっただけ）。非正方形の写真の店舗でも本番と同じ見た目になるよう、本番の
 * 実装をそのまま移植する。marginは明示的にリセットしていない（本番のpのデフォ
 * ルト余白=1em=16pxをそのまま利用しており、以前margin:0で潰していたのが
 * 「写真下のスペースが本番と異なる」バグの原因だった）。
 */
.shop-single-photo p {
  width: 62.5%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  border: 4px solid #fff;
  overflow: hidden;
  position: relative;
}

.shop-single-photo p:before {
  padding-top: 100%;
  display: block;
  content: '';
}

/*
 * 本番はtiticaca-spのcommon.css（サイト全体の共通リセット、今回は移植対象外）で
 * img{max-width:100%;height:auto}をグローバルに効かせており、shops.css側の
 * min-width/min-height:100%と組み合わさって初めて画像が枠にフィットしていた。
 * このテーマにはその共通リセットが無く、the_post_thumbnail()が出力する
 * width/height属性（例:1000×1000）がそのまま使われてしまい、枠からはみ出した
 * 一部だけが拡大表示される不具合になっていた。max-width:100%;height:auto;を
 * ここに明示することで同じ効果を再現する。
 */
.shop-single-photo p img {
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.shop-single-message {
  padding: 6% 0 9.37% 0;
  background-image: url(../images/shop/single/triangleLine.png);
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 100% auto;
}

.shop-single-message h2 {
  line-height: 100%;
  padding: 0;
  margin: 0 0 5%;
  font-size: 15px;
  font-weight: bold;
  color: #e60a84;
}

.shop-single-message .message {
  line-height: 200%;
  font-size: 12px;
}

.shop-single-message .message p {
  margin-top: 2em;
}

.shop-single-message .message p:first-child {
  margin-top: 0;
}

/*
 * 本番の実際のマークアップは<div class="shopDetail inner">で、他ページと同じ
 * .inner（幅87.5%・中央寄せ）を使っている。ここではpadding:0 20pxという
 * 固定値を使っていたため、375px幅で本番より表全体が一回り大きく（左右の
 * 余白が狭く）なっていた。
 */
.shop-single-detail {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 9.37%;
}

.shop-single-detail table {
  width: 100%;
  border-top: 1px solid #e60a84;
  border-bottom: 1px solid #e60a84;
  border-collapse: collapse;
  border-spacing: 0;
}

.shop-single-detail table th {
  width: 50%;
  line-height: 150%;
  padding: 5% 0 5% 12px;
  font-size: 12px;
  font-weight: bold;
  vertical-align: middle;
  text-align: left;
  background-image: url(../images/shop/icon/dia.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 8px auto;
  box-sizing: border-box;
  border-bottom: 1px dotted #e60a84;
}

.shop-single-detail table td {
  line-height: 150%;
  padding: 5% 0;
  font-size: 12px;
  border-bottom: 1px dotted #e60a84;
}

.shop-single-detail table td .itemList {
  width: 130px;
  line-height: 100%;
  padding: 0;
  margin: 0;
  font-size: 0;
  list-style: none;
}

.shop-single-detail table td .itemList li {
  width: 60px;
  line-height: 100%;
  padding: 0;
  margin-top: 5px;
  margin-left: 5px;
  display: inline-block;
  font-size: 9px;
}

.shop-single-detail table td .itemList li:first-child,
.shop-single-detail table td .itemList li:nth-child(2) {
  margin-top: 0;
}

.shop-single-detail table td .itemList li:first-child,
.shop-single-detail table td .itemList li:nth-child(3n) {
  margin-left: 0;
}

.shop-single-detail table td .itemList li img {
  display: block;
  width: 100%;
  height: auto;
}

.shop-single-detail table td .itemNotes {
  line-height: 100%;
  padding: 0;
  margin: 2% 0 0;
  font-size: 9px;
}

/*
 * 本番の実際のマークアップ・CSS（#shopsSingle .notes .listUl li）を移植。
 * PC版が使っている.note-black（独自の別マークアップ）とは異なる。
 */
.shop-single-detail .notes {
  margin-top: 5%;
}

.shop-single-detail .notes .listUl li {
  line-height: 140%;
  margin-top: 2.5%;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 9px;
  color: #3a1d1d;
}

.shop-single-detail .notes .listUl li:first-child {
  margin-top: 0;
}

/*
 * .shop-single-map・.link-button.map（SP）はtiticaca-sp原本には無く、
 * 今回の統合でPC版と同じ「大きい地図で見る」リンクを追加した新規要素のため、
 * 本番CSSに対応するルールが無い。他のSPボタンと統一感のある独自デザインにする。
 */
.shop-single-map {
  padding: 0 20px;
  margin-bottom: 9.37%;
}

.shop-single-map iframe {
  display: block;
  width: 100%;
}

.shop-single-map .link-button.map {
  margin-top: 10px;
  text-align: center;
}

/*
 * style.cssに既存のPC用.link-button.map a（text-indent:-9999pxで文字を隠し、
 * map-link.png（正常時/hover時の2コマ縦スプライト）を背景表示する画像置換
 * ボタン）が範囲指定なしで存在し、同じクラス名の当ボタンにも適用されて
 * いた。widthを135x20pxに固定しない当ボタンではスプライトが1コマ分に
 * クリップされず、2つのアイコンが縦に並んで見えてしまっていたため、
 * text-indent/background-imageを明示的に打ち消す。
 */
.shop-single-map .link-button.map a,
.shop-single-near-search .shop-single-map .link-button.map a {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 10px 30px;
  background-color: #e60a84;
  background-image: none;
  color: #fff;
  font-size: 13px;
  line-height: normal;
  font-weight: bold;
  text-decoration: none;
  text-indent: 0;
  border-radius: 3px;
}

.shopBlog {
  padding: 7% 20px 0;
  background-image: url(../images/shop/line.png);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 100% auto;
  box-sizing: border-box;
}

.shopBlog > h2 {
  line-height: 100%;
  padding: 0;
  margin: 0 0 4.68%;
}

.shopBlog > h2 img {
  width: 100%;
  height: auto;
}

.shopBlog .blogContents {
  padding-bottom: 14%;
  background-color: #fff;
  position: relative;
}

.shopBlog .blogContents h2.blogTitle {
  line-height: 140%;
  padding: 6.25% 0;
  margin: 0;
  background-color: #e60a84;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.shopBlog .blogContents .entries {
  padding: 0 5%;
}

.shopBlog .blogContents .entries .item {
  display: block;
  padding: 5% 0;
  border-bottom: 1px dotted #e60a84;
  color: #3a1d1d;
  text-decoration: none;
}

.shopBlog .blogContents .entries .item:first-child {
  padding-top: 0;
}

.shopBlog .blogContents .entries figure {
  margin: 0 0 3%;
  background-size: cover;
  background-position: center;
  height: 150px;
}

.shopBlog .blogContents .entries figure img {
  visibility: hidden;
  width: 1px;
}

.shopBlog .blogContents .entries time,
.shopBlog .blogContents .entries .timetag,
.shopBlog .blogContents .entries .tag {
  font-size: 9px;
}

.shopBlog .blogContents .entries h2 {
  font-size: 14px;
  margin: 3% 0;
}

.shopBlog .blogContents .entries .lead {
  font-size: 12px;
  line-height: 160%;
}

.shopBlog .blogLinkBtn {
  margin-top: 12.5%;
}

.shopBlog .blogLinkBtn a {
  display: block;
}

.shopBlog .blogLinkBtn a img {
  width: 100%;
  height: auto;
}

/*
 * 「お近くの店舗をさがす」検索ウィジェット。当初front-page.php/page-shops.phpと
 * 同じ.select__wrap（偽ボタン+隠しselect重ね合わせ）デザインを流用したが、
 * 本番の実際のマークアップ・CSS（#shopsSingle直下ではなくサイト共通の
 * .nearShopSearch/.searchBox/.searchSelect、本番shops.css）を確認したところ
 * 別物だった。画像も専用のsearchTitle.png（誤ってtitle.pngを使用していた）、
 * セレクトは.searchBoxの白背景+paddingで囲われた「白い座布団」の上に
 * ネイティブselectを直接配置する構成のため、本番の値をそのまま移植する。
 */
.shop-single-near-search {
  padding: 8.59% 0;
  margin-top: 12.5%;
  background-image: url(../images/shop/line.png);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 100% auto;
}

.shop-single-near-search h2 {
  line-height: 100%;
  padding: 0;
  margin: 0 0 6.25%;
  text-align: center;
}

.shop-single-near-search h2 img {
  max-width: 100%;
  height: auto;
}

.shop-single-near-search .inner {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
}

.shop-single-near-search .searchBox {
  padding: 9.82%;
  box-sizing: border-box;
  background-color: #fff;
}

.shop-single-near-search .searchSelect label {
  width: 100%;
  line-height: 100%;
  padding: 0;
  margin: 0;
  display: block;
  background-color: #e60a84;
  position: relative;
}

.shop-single-near-search .searchSelect label:after {
  width: 28px;
  height: 28px;
  margin-top: -14px;
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  background-image: url(../images/shop/icon/selectArrow.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 28px auto;
  pointer-events: none;
}

.shop-single-near-search .searchSelect label select {
  width: 100%;
  line-height: 100%;
  padding: 10px;
  margin: 0;
  position: relative;
  border: none;
  -webkit-appearance: none;
  background-color: #e60a84;
  box-sizing: border-box;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 0;
}

.shop-single-near-search .searchSelect label select option[disabled] {
  color: #ccc;
}