@charset "utf-8";
/* =========================================================================
   SHIRO 店舗ドロワー
   -------------------------------------------------------------------------
   方針:
   1. 文字（サイズ・太さ・字間・色）は現行サイトのCSSにそのまま任せる。
      ここで指定するのはレイアウト（並び方・余白・幅）だけ。
   2. 一覧のUIは、ハンバーガーメニューのサブメニューの作法を踏襲する。
      （gnavi__heading / gnavi__list / gnavi__item / gnavi__link）
   3. 幅を広げるのは店舗ドロワーのパネルだけ。
      ハンバーガーメニュー本体（.gnavi-wrapper）の幅は既存のまま変えない。

   現行サイトの実測値（上書きしないよう記録）:
     メニュー内リンク  12px / 400 / 字間1.4px / padding 15px 0
     サブ見出し(h4)    14px / 700 / 字間1.4px / color #949494 / margin-bottom 16px
     サブヘッダ        padding 0 30px / height 18px
     エリア見出し      18px / 600 / 字間1.8px
     店舗名            12px / 400 / 字間1.4px
     タグ              8px  / 400 / 字間1.4px
     詳細 h1/h2        20px / 400 / margin-bottom 24px
     本文              14px / 400 / 字間1.4px
     文字色 #393c41 / 補助 #949494
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 幅
   ハンバーガーメニュー本体は触らず、店舗ドロワーのパネルだけを広げる。
   パネルは position:absolute; right:0 なので、親より広くしても右端で揃う。
   ------------------------------------------------------------------------- */

/* 店舗一覧はハンバーガーメニューと同じ幅のまま（既存CSSに任せる）。
   広げるのは「店舗詳細」を開いたときだけ。 */

/* 【重ね方式】
   店舗詳細は 960px で、店舗一覧の「上に重なる」。

   外枠（.gnavi-wrapper）は 375px のまま一切変えない。
   詳細パネルは position:fixed で外枠から抜け出し、
   画面の右端を基準に配置する。

   こうすると:
   - 外枠の幅が変化しないため、狭い枠でクリップされて
     「375pxまで伸びてから960pxに切り替わる」二段階の動きが
     構造的に起こらない
   - 一覧を左へ退避させる必要がない（下に隠れるだけ）
   - 開閉のたびにレイアウトが動かないので、
     ページ本体の再計算も発生しない                              */
html .gnavi__sub-deep.shop-drawer--detail {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: 960px;
  max-width: 100vw;
  height: 100%;
  transform: translateX(100%);
  transition: transform .3s ease-in-out;
  background: #fff;

  /* スライドを滑らかにするための2点（実測にもとづく）。

     will-change: パネルを独立した層として先に用意させる。
       これがないと、動くたびに960px分を描き直すことになる。
     contain: 中身の変化が外へ波及しないことをブラウザに伝える。
       ページ全体の再計算を避けられる。

     実測（同一条件6回の中央値・最大コマ間隔）:
       対策なし 61.6ms → 対策あり 47.9ms（約22%短縮）
     中身が空のときは17msなので、
     残りは960px分の描画そのもののコスト。 */
  will-change: transform;
  contain: layout paint;
  /* 実測した既存サイトの重なり順:
       オーバーレイ .gnavi__overlay ... 99
       メニュー外枠 .gnavi-wrapper  ... 100
     詳細はこの両方より前面に出す必要がある。
     （99 だとオーバーレイと同数になり、DOM順で負けて左側が覆われる。
       100 でも外枠と同数になり、外枠側の一覧に右側を覆われる） */
  z-index: 101;
}
html .gnavi__sub-deep.shop-drawer--detail.is-active {
  transform: translateX(0);
}

/* 一覧は「左へ逃がさない」。
   既存の is-hidden は translateX で左へ動かすため、
   詳細の裏で一覧が横に動いてしまう。これを打ち消す。

   表示・非表示そのものは is-hidden では行わない。
   詳細は不透明な板として上に重なるので、一覧はそのまま裏にあればよい。
   （不透明度を触ると、戻るときのタイミング次第で
     一覧が消えたままになる事故が起きるため） */
html .gnavi__sub.shop-drawer.is-hidden {
  transform: none;
}

/* スマホでは、詳細も既存メニューとまったく同じ幅にする。

   分岐点はサイト側に合わせて 768px。
   サイトのCSSは以下のようになっている（実測）:
     .gnavi-wrapper                      width: 375px
     @media (max-width:768px) .gnavi-wrapper  width: 90%
   サブメニュー・深い階層は常に width:100%（＝外枠と同じ幅）。

   つまりサイトは「768px以下なら90%、それより上は375px固定」の2段階。
   ここを 1023px で分けていたため、769〜1023px の範囲で
   「メニュー375px／詳細90vw」とちぐはぐになっていた。

   また 80vw にしていたときは、375px端末で
   「一覧338px → 詳細300px」と奥へ行くほど狭くなり、
   左側に一覧がはみ出して見えていた。

   ---
   スマホでの幅の使い分け:

     メニュー   90%（既存のまま）
     店舗一覧   90%（メニューと揃える）
     店舗詳細   90%（一覧と揃える）

   メニュー → 一覧 → 詳細 と進んでも幅が変わらないようにしている。
   右端の位置が動かないぶん、画面が飛ぶ感じがなく、
   背景が少し見えていることで「重なって開いている」ことが伝わる。

   （全画面 100% も試したが、詳細だけ幅が変わって
     階層の連続性が途切れるため 90% を採用した）

   詳細は body 直下に置いてあり外枠の影響を受けないため、
   ここで width を指定するだけで済む
   （一覧の幅を変えるには外枠ごと広げる必要があるが、その必要がない）。 */
@media (max-width: 768px) {
  html .gnavi__sub-deep.shop-drawer--detail {
    width: 90%;
    max-width: 100vw;
  }
}

/* -------------------------------------------------------------------------
   2. パネルの骨格
   ------------------------------------------------------------------------- */

/* 既存の .gnavi__sub は padding:20px 0、.gnavi__sub-deep は padding:80px 20px 40px。
   一覧と詳細で上の余白が揃うよう、どちらも 20px 起点にする。
   （既存ルールに勝つため html を付けて詳細度を上げる） */
html .gnavi__sub.shop-drawer,
html .gnavi__sub-deep.shop-drawer {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
.shop-drawer {
  display: flex;
  flex-direction: column;
}
.shop-drawer .gnavi__sub-header {
  flex: 0 0 auto;
  padding-bottom: 16px;
}

/* 左右余白は既存サブメニューの 30px に合わせる。

   上の余白は本文側では持たない（0）。
   「戻る」リンクの下の間隔は .gnavi__sub-header の padding-bottom で作る。
   こうすると、スクロールしても見出しと本文の間隔が変わらない
   （本文側に padding を持たせると、スクロール時に余白ごと動く）。 */
.shop-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 30px 48px;

  /* 端までスクロールしたあと、背後のページまで動いてしまうのを止める。
     スマホで指を滑らせ続けたときに起きやすい（スクロールの連鎖）。 */
  overscroll-behavior: contain;
}

.shop-drawer__loading,
.shop-drawer__error {
  padding: 48px 0;
  text-align: center;
  line-height: 2;
}

/* -------------------------------------------------------------------------
   3. 店舗一覧（メニューの作法を踏襲）

   ハンバーガーメニューのサブメニューは
     h4.gnavi__heading（見出し）＋ ul.gnavi__list > li.gnavi__item > a.gnavi__link
   という構造。エリア見出しをこの h4 と同じ扱いにし、
   店舗リストを gnavi__list と同じ余白で並べる。
   ------------------------------------------------------------------------- */

/* 一覧の先頭の見出し「SHIROの店舗」。

   文字（14px / 700 / #949494 / 字間1.4px）は
   サイトの .gnavi__heading にそのまま任せるので、ここでは指定しない。

   実測メモ:
     サイトの .gnavi__heading は margin:0 で、
     見出しの下の余白は「次に来る要素」が持っている（実測15px）。
     ドロワーの一覧では次に来るのが .shop-area なので、
     同じ間隔になるよう見出し側に下余白を持たせる。 */
html .shop-drawer__heading {
  margin: 0 0 15px;
  padding: 0;
}

/* 本体ページ用の余白（2つ目以降の .shop-area に margin-top:80px 等）を打ち消し、
   枠内に収める。既存ルールに勝つため html を付けて詳細度を上げる。 */
html .shop-drawer .shop-area,
html .shop-drawer .shop-area + .shop-area,
html .shop-drawer .shop-area__title,
html .shop-drawer .lp-heading-secondary {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* スマホでは、本体ページの見出しに灰色の帯が付く。

   実サイト:
     @media (max-width:768px) .shop-area__title {
       background-color:#eee; padding:2.4rem 1.5rem; text-align:center; }

   ドロワーの一覧はメニューの作法（文字だけ・左寄せ）に合わせるため、
   帯と余分な余白を打ち消す。
   これを入れないと、スマホで見出しが100px高の灰色帯になる。 */
html .shop-drawer .shop-area__title {
  padding-top: 0;
  padding-bottom: 0;
  background-color: transparent;
  text-align: left;
}

/* エリア見出し = サブメニューの h4.gnavi__heading と同じ見た目
   （14px / 700 / 字間1.4px / #949494）。
   本体ページの .lp-heading-secondary__main（18px/600）は大きすぎるので上書きする。 */
.shop-drawer .shop-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shop-drawer .shop-acc__btn:hover .shop-acc__label { opacity: .6; }
.shop-drawer .shop-acc__btn:focus-visible {
  outline: 1px solid #393c41;
  outline-offset: 2px;
}
.shop-drawer .shop-acc__btn[disabled] { opacity: .4; cursor: default; }

.shop-drawer .shop-acc__label {
  flex: 1 1 auto;
  min-width: 0;
  transition: opacity .2s;
}
/* サブメニューの見出しに揃える */
.shop-drawer .shop-acc__label,
.shop-drawer .shop-acc__label .lp-heading-secondary__main,
.shop-drawer .shop-acc__label .number {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.6;
  color: #949494;
}

/* 開閉マーク（＋ / −） */
.shop-drawer .shop-acc__mark {
  flex: 0 0 auto;
  position: relative;
  width: 11px;
  height: 11px;
}
.shop-drawer .shop-acc__mark::before,
.shop-drawer .shop-acc__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 1px;
  background: #393c41;
  transition: transform .25s ease;
}
.shop-drawer .shop-acc__mark::after { transform: rotate(90deg); }
.shop-drawer .shop-area.is-open .shop-acc__mark::after { transform: rotate(0deg); }

/* 開いた中身 = メニューの gnavi__list と同じ字下げ（margin-left 20px）

   ▼ 下に開くアニメーション
   高さを 0 → 中身の高さ へ変化させる。
   height:auto は本来アニメーションできないため、別の方法が要る。

   採用した方法: max-height を 0 → 上限値 へ変える。

   grid-template-rows の 0fr→1fr でも書けるが、
   実機（Chrome）で測ったところ 1fr が中身の高さに解決されず
   高さ0のままになった。確実に動く max-height 方式を採る。

   上限値は「一番店舗が多いエリアより十分大きい値」にする。
   実測（本体ページ）: 最大は関東の14件で 974px。
   ドロワーは幅が狭く店舗名が折り返して1件あたりが高くなるため、
   実測値の2倍以上の余裕を見て 2500px とする。
   （上限が中身より小さいと、その分が切れて表示されなくなる。
     店舗が大幅に増えたときは、ここを増やす） */
.shop-drawer .shop-acc__panel {
  max-height: 0;
  overflow: hidden;
  margin: 0 0 0 20px;
  padding: 0;
  transition: max-height .3s ease, margin-bottom .3s ease;
}
.shop-drawer .shop-area.is-open .shop-acc__panel {
  max-height: 2500px;
  margin-bottom: 20px;
}

/* 動きを減らす設定の人にはアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .shop-drawer .shop-acc__panel { transition: none; }
}

/* 店舗リスト = サブメニューの ul.gnavi__list と同じ扱い（テキストのみ・1列） */
.shop-drawer .p-grid-shoplist {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-drawer .p-grid-shoplist__item {
  width: auto;
  margin: 0;
  padding: 0;
}

/* 1件 = gnavi__link--page と同じ見た目（12px / 400 / 字間1.4px）。
   写真だけ非表示にし、タグ（TAX-FREE・容器回収・カテゴリ・NEW）は残す。 */
.shop-drawer .p-grid-shoplist__item .pic {
  display: none;
}

/* 店舗どうしの区切り。

   線は「下側」に1本だけ持たせる。

   スマホではサイト側が
     @media (max-width:768px) .p-grid-shoplist__item { border-bottom: 1px solid #eee }
   を付けるため、上側にも線を引くと**2本重なって見える**（実際に発生した）。
   下側に統一し、最後の1件だけ線を消せば、どの幅でも1本になる。

   余白は上下に12pxずつ置いて、線が文字の中間に来るようにする
   （合計24px = 以前と同じ間隔）。 */
html .shop-drawer .p-grid-shoplist__item {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 0;
  border-bottom: 1px solid #e5e5e5;
}
html .shop-drawer .p-grid-shoplist__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
html .shop-drawer .p-grid-shoplist__item:first-child {
  padding-top: 0;
}
/* 1件あたりの押せる範囲を確保する。

   タグ（TAX-FREE等）が付く店舗は45px、付かない店舗は23pxになり、
   高さが揃わないうえに、指では押しにくい大きさだった。
   min-height で下限をそろえ、上下の中央に寄せる。
   （44px はタップ領域の一般的な下限） */
.shop-drawer .p-grid-shoplist__item .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  height: auto;
  padding: 0;
  border: 0;
  text-decoration: none;
  color: #393c41;
}
/* 本体ページはホバーで浮き上がる演出（translateY + 影）が入るが、
   一覧はメニューの作法に合わせるため、薄くなるだけにする。
   既存ルールより後に読み込まれない場合に備え html を付けて詳細度を上げる。 */
@media (any-hover: hover) {
  html .shop-drawer .p-grid-shoplist__item .inner:hover {
    opacity: .6;
    transition: opacity .3s;
    transform: none;
    box-shadow: none;
  }
}
/* 元CSSの .info の padding(16px 16px 32px) を打ち消す */
.shop-drawer .p-grid-shoplist__item .info,
.shop-drawer .p-grid-shoplist__item .info__top,
.shop-drawer .p-grid-shoplist__item .info__bottom {
  display: block;
  padding: 0;
  margin: 0;
}
/* 店名 = メニューのリンクと同じ文字。
   本体ページは padding-bottom:24px を持つので打ち消す。 */
.shop-drawer .p-grid-shoplist__item .shop-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.4px;
  line-height: 1.6;
  color: #393c41;
}

/* --- タグ（アイコン系） -------------------------------------------------
   残すのは店舗の特徴タグ（TAX-FREE / 容器回収店舗 / 衣類回収店舗）だけ。
   取り扱いカテゴリ（MAKE UP 等）は数が多く行が伸びるため一覧では出さない。
   （詳細を開けば全て表示される） */
.shop-drawer .p-grid-shoplist__item .shop-categorytag {
  display: none;
}

.shop-drawer .p-grid-shoplist__item .shop-infotag {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
/* 本体は8pxだが小さすぎるため12px。ただし余白は詰めて2行にならないようにする。

   スマホではサイト側が
     @media (max-width:768px)
     .p-grid-shoplist__item .inner .shop-infotag__item:not(.tax-free) { display:none }
   で「TAX-FREE以外」を消している。
   （本体ページは写真が主役なので、タグを間引いて省スペース化する意図）

   ドロワーの一覧は写真を出さない代わりにタグが手がかりになるため、
   「容器回収店舗」「衣類回収店舗」も残したい。
   相手は :not() を含む詳細度(0,4,0)なので、
   こちらも :not() を重ねて上回る必要がある。 */
.shop-drawer .p-grid-shoplist__item .shop-infotag__item,
html .shop-drawer .p-grid-shoplist__item .inner .shop-infotag__item:not(.tax-free) {
  display: inline-block;
  margin: 0;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

/* NEWバッジは店名の左に置く（写真が無いので絶対配置をやめる） */
.shop-drawer .p-grid-shoplist__item .info__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 本体ページでは写真の上に絶対配置されているので、通常配置に戻す */
.shop-drawer .p-grid-shoplist__item .shop-statustag {
  flex: 0 0 auto;
  display: block;
  position: static;
  top: auto;
  left: auto;
  margin: 0;
  order: -1;               /* 店名より前に出す */
}
.shop-drawer .p-grid-shoplist__item .shop-statustag__item {
  position: static;
  display: inline-block;
  margin: 0;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.4;
  /* 本体は半透明グレーで目立たないため、はっきり見えるようにする */
  background: #000030;
  color: #fff;
  white-space: nowrap;
}
.shop-drawer .p-grid-shoplist__item .shop-statustag__item .font-tt {
  font-size: inherit;
  color: inherit;
}
.shop-drawer .p-grid-shoplist__item .shop-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* 分岐点はサイトに合わせて 768px で統一する。
   幅の切り替えと余白の切り替えを同じ点にそろえ、
   「幅はスマホ扱いなのに余白はPC扱い」という中途半端な帯をなくす。 */
@media (max-width: 768px) {
  .shop-drawer__body { padding: 0 20px 40px; }
  .shop-drawer .shop-acc__panel { margin-left: 16px; }
}

/* -------------------------------------------------------------------------
   4. 店舗詳細
   ------------------------------------------------------------------------- */

/* 2カラム前提を縦1列に積み直す（SP表示準拠）。

   実サイトの .shop-layout / .shop-access は CSS grid:
     grid-template-columns: minmax(0,5.5fr) minmax(0,4.5fr)
     grid-template-areas: "shop-slide shop-info" ...
   のため、放置すると960px幅でも各列が約370px/約300pxに潰れる。

   さらに、店舗ページ用CSS（shop/assets/css/style.css）は
   ドロワーCSSより「後」に読み込まれる（実測: 本CSS=8番目 / style.css=10番目）。
   同じ詳細度では後勝ちで負けるため、`html` を付けて詳細度を上げる。 */
html .shop-drawer--detail .shop-layout,
html .shop-drawer--detail .shop-access {
  display: block;
  grid-template-columns: none;
  grid-template-areas: none;
  gap: 0;
}
/* grid-area 指定も打ち消す（display:block でも幅計算に影響しうるため） */
html .shop-drawer--detail .shop-slide,
html .shop-drawer--detail .shop-info,
html .shop-drawer--detail .shop-map,
html .shop-drawer--detail .shop-accessinfo {
  grid-area: auto;
  width: auto;
  max-width: 100%;
}
html .shop-drawer--detail .shop-block { margin-bottom: 40px; }
html .shop-drawer--detail .shop-block:last-of-type { margin-bottom: 0; }

/* 960px幅では本文を読みやすい幅に収める */
html .shop-drawer--detail .shop-drawer__body > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* スライダー

   スマホでは実サイトが
     @media (max-width:768px) .shop-slide { margin: 0 -1.5rem }
   と負のマージンを掛けて、写真を画面の端まで広げている（全幅表示）。

   本体ページは左右に 1.5rem の余白があるので、それを打ち消して
   ちょうど画面いっぱいになる作りになっている。

   一方ドロワーの本文は左右 20px。
   1.5rem（15px）とズレるため、写真だけが 15px 左へはみ出し、
   店名・住所と行頭が揃わなくなる。

   ドロワーでは全幅表示にせず、他のブロックと左右を揃える。 */
html .shop-drawer--detail .shop-slide {
  margin-left: 0;
  margin-right: 0;
}
.shop-drawer--detail .shop-slide { margin-bottom: 24px; }
.shop-drawer--detail .swiper { overflow: hidden; }
.shop-drawer--detail .swiper-wrapper { margin: 0; padding: 0; list-style: none; }
.shop-drawer--detail .slide img { width: 100%; height: auto; display: block; }
/* Swiperの初期化前は、1枚目だけを出しておく。

   初期化はスライドが終わってから走らせている（約13msかかるため）。
   その間に「複数枚が横に並んだ状態」を見せると、
   初期化の瞬間に配置が変わってちらつく。
   初期化後と同じ「1枚だけ見える」状態にしておけば、
   切り替わっても見た目が動かない。 */
.shop-drawer--detail .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: block;
}
.shop-drawer--detail .swiper:not(.swiper-initialized) .slide {
  width: 100%;
}
.shop-drawer--detail .swiper:not(.swiper-initialized) .slide:not(:first-child) {
  display: none;
}

/* ラベル */
.shop-drawer--detail .label-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.shop-drawer--detail .c-label { margin: 0; }

/* 基本情報 */
.shop-drawer--detail .shop-basicinfo {
  margin: 24px 0;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
}
.shop-drawer--detail .info-icon { margin: 16px 0; }
.shop-drawer--detail .info-text { margin-top: 24px; }
.shop-drawer--detail .info-text p { margin: 0 0 16px; }
.shop-drawer--detail .info-text p:last-child { margin-bottom: 0; }

/* コンセプト

   ここは実ページのスタイルにそのまま任せる（上書きしない）。

   実ページ（スマホ）の実測値:
     .shop-concept          背景なし / padding 0
     .shop-concept__content 背景#fff / border-top 1px #eee / padding 32px 0 0
   つまり「区切り線の下に本文が続く」だけの、素直な作りになっている。

   以前はここに margin/padding/背景(#f7f7f5) を足していたが、
   その結果 .shop-concept（灰色の箱）の中に
   .shop-concept__content（白い箱）が入れ子になり、
   二重の枠に見えてしまっていた。
   実ページには無い装飾だったので、指定ごと削除している。 */
.shop-drawer--detail .shop-concept { margin-top: 32px; }

/* コンセプトの中身は、上下のブロックと文字の幅をそろえる。

   実ページ（PC・2カラム）では
     .shop-concept__content { padding: 32px 24px }
   と左右に24pxの余白が入る。写真の隣に置かれる縦長の枠だからで、
   そこでは自然な見え方になっている。

   ドロワーは1カラムなので、この24pxがあると
   コンセプトだけ本文が内側に寄り、上下（住所・営業時間・アクセス）と
   行頭がズレてしまう。左右の余白を外して幅をそろえる。

   区切り線は、スマホでは実ページが __content に付けるが、
   PCでは付かない。ドロワーは常に1カラムで
   「前のブロックとの区切り」が必要なので、
   画面幅によらず上に線を引く。 */
html .shop-drawer--detail .shop-concept__content {
  padding: 32px 0 0;
  border-top: 1px solid #eee;
  background: transparent;
}

/* 地図・アクセス */
.shop-drawer--detail .shop-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
}
.shop-drawer--detail .shop-title { margin: 32px 0 0; padding: 0; }
.shop-drawer--detail .shop-accessinfo .info-icon { margin: 16px 0; }

@media (max-width: 768px) {
  .shop-drawer--detail .shop-map iframe { height: 220px; }
}

/* -------------------------------------------------------------------------
   5. はみ出し防止
   ------------------------------------------------------------------------- */
.shop-drawer,
.shop-drawer .shop-drawer__body > * { max-width: 100%; }
.shop-drawer--detail .shop-drawer__body > * { max-width: 720px; }
.shop-drawer img { max-width: 100%; }