@charset "utf-8";

/* ==========================================================================
   パーラー747三和 LP — ベース
   基準幅 800px / 800px 以下は全要素を等比縮小
   1rem = 10px（800px 時）

   ディレクトリ
     assets/css/style.css   このファイル
     assets/js/script.js
     assets/img/            画像（CSS からは ../img/ で参照）

   カンプ実測は 800×5231px の全体版（all.png）を基準にしている。
   分割版 01–04 は全体版の完全な連続スライスであることを画素比較で確認済み。

   カンプ上で同系要素の幅がバラついていた（スライド575 / サムネイル579 /
   動画枠579 / ポスター573・中心402）。作りのばらつきなので
   入稿サイズの 575px・中央寄せに統一し、--w-media 1本に集約している。
   サムネイルは133pxのまま、間隔だけ15.67 → 14.33pxに詰めて575に収めた。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root {
  /* --- 色（カンプ実測） --- */
  --c-white:        #FFFFFF;
  --c-black:        #000000;
  --c-red:          #FF0000;   /* 最新情報セクションの地 */
  --c-blue:         #0072FF;   /* 店舗情報セクションの地 */
  --c-blue-dark:    #17539E;   /* 暗幕パネル = 青地 + rgba(48,48,48,.47) */
  --c-ink-label:    #574F4C;   /* 情報テーブルのラベル文字 */
  --c-dot:          #F10019;   /* スライダー カレントドット */
  --c-dot-off:      #B5B5B5;   /* スライダー 非カレント */
  --c-gray-ph:      #E1E1E1;   /* 画像が入るまでのプレースホルダ */
  --c-map-bg:       #E8E6E1;   /* 地図の読み込み前 */

  /* --- 幅 --- */
  --w-outer:        80rem;     /* 800px  基準幅 */
  --w-media:        57.5rem;   /* 575px  スライド / サムネイル行 / 動画枠 / ポスター */
  --w-table:        57.2rem;   /* 572px  店舗情報テーブル（点線の幅） */

  /* --- 高さ（背景が固定高なので中身も固定する） --- */
  --h-slide:        65.1rem;   /* 651px */
  --h-thumbs:       15.1rem;   /* 151px */
  --h-poster:       65.1rem;   /* 651px */
  --h-movie:        33.2rem;   /* 332px */

  /* --- 最新情報セクションの斜め --- */
  /* 幅800pxに対して縦27px。カンプ上端は x0 で y1709 / x799 で y1682。 */
  --slant:          2.7rem;

  /* --- 透かしタイル --- */
  /* 支給の bg777.png（800×1499）から、縦の継ぎ目が最も小さい 625px 分を
     切り出したもの。格子は (29,65) と (-46,21) で、下へ625px・右へ1px が
     周期になっている。dx=0 のまま敷くため繰り返しごとに1pxずつ横へずれるが、
     不透明度が最大でも 100/255 の模様なので視認できない。
     赤地・青地は同じ形状を白単色に置き換え、カンプの濃度に合わせてある。 */
  --tile:           80rem 62.5rem;

  /* 透かしの位相ずらし。
     タイルは body の先頭（ページ y0）から敷き始めるので、
     途中から別のタイルを敷く要素は「その要素の上端 mod 625px」だけ
     背景をずらさないと、境界でマークが途中で切れる。
     赤地と青地をまとめた .l-lower は y1682 から始まり、
     1682 = 625×2 + 432 なので −43.2rem。 */
  --wm-shift:       -43.2rem;

  /* --- 影 --- */
  --sh-media:       0 .8rem 1.8rem rgba(0, 0, 0, .20);
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, button {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. 等比縮小の基準
   800px 以上 : 1rem = 10px 固定
   800px 未満 : 1rem = 1.25vw（= 800px 時に 10px）
   -------------------------------------------------------------------------- */
/* セレクタを :root / html body にしているのは、既存テーマのリセット
   （html, body, div, ... { font-size: 100% } のような一括指定）に
   読み込み順に関係なく勝つため。:root は html より、html body は body より
   詳細度が高い。この土台が上書きされると全ての寸法が狂う。

   背景を html にも持たせているのは、body の背景がビューポート全体に
   伝播するのを止めるため。これで透かしが 800px 幅の中だけに収まる。 */
:root {
  font-size: 62.5%;
  scroll-behavior: smooth;
  background: var(--c-white);
}

@media (max-width: 800px) {
  :root { font-size: 1.25vw; }
}

html body {
  width: 100%;
  max-width: var(--w-outer);
  margin-inline: auto;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-black);
  background: var(--c-white) url("../img/bg-watermark.png") repeat left top;
  background-size: var(--tile);
  -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   4. 共通パーツ
   -------------------------------------------------------------------------- */
/* 画像リンクのホバー（タッチ端末では発火させない） */
@media (hover: hover) and (pointer: fine) {
  .c-link { transition: opacity .3s ease; }
  .c-link:hover { opacity: .85; }
}

/* --------------------------------------------------------------------------
   5. 品質フロア
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: .3rem solid var(--c-dot);
  outline-offset: .2rem;
}

/* 「動きを減らす」設定への配慮。
   トランジションを一括で潰すとメニューの開閉など短い UI の動きまで
   消えて不具合に見えるため、大きく動くものだけを対象にする。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   ヘッダー   bg-header.png 800×94
   支給素材にはキャラと右の赤いシェイプまでが入っている。
   ロゴとハンバーガーは入っていないので別に重ねる（差分検証済み）。
   カンプ実測：ヘッダー y0–93 / ロゴ 328×75 を (25,12) / ハンバーガー x719–775
   ========================================================================== */
.l-header {
  position: relative;
  z-index: 999;
  height: 9.4rem;
  background: var(--c-white) url("../img/bg-header.png") no-repeat left top;
  background-size: 100% 100%;
}

.l-header__inner {
  position: relative;
  height: 100%;
}

.l-header__logo {
  position: absolute;
  top: 1.2rem;
  left: 2.5rem;
  width: 32.8rem;
}

/* ハンバーガー -----------------------------------------------------------
   カンプ実測：白線 x719–775（幅57）、3本の中心が y38 / 46.5 / 55（ピッチ8.5）。
   ボタン中心をバーの中心 y46.5 に置き、3本を translateY で振り分ける。
   × に変形するとき回転の中心がずれないので、この方式が確実。 */
.l-header__menu {
  position: absolute;
  top: 2.05rem;
  right: 2.45rem;
  z-index: 1001;
  width: 5.7rem;
  height: 5.2rem;
}
.l-header__menu span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: .5rem;
  margin-top: -.25rem;
  background: var(--c-white);
  border-radius: .25rem;
  transform-origin: center;
  transition: .3s ease;
}
.l-header__menu span:nth-child(1) { transform: translateY(-.85rem); }
.l-header__menu span:nth-child(2) { transform: translateY(0); }
.l-header__menu span:nth-child(3) { transform: translateY(.85rem); }

/* 三本線 → × */
.l-header__menu.is-active span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.l-header__menu.is-active span:nth-child(2) { opacity: 0; }
.l-header__menu.is-active span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ==========================================================================
   ドロップナビ（ヘッダー直下から降りてくる）
   ========================================================================== */
.l-drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 100%;
  overflow: hidden;
  text-align: center;
  background: rgba(0, 0, 0, .92);
  max-height: 0;
  opacity: 0;
  transition: max-height .5s ease, opacity .3s ease;
}

.l-drop.is-active {
  max-height: 60rem;
  opacity: 1;
}

.l-drop ul { padding: 4rem 0; }
.l-drop li { margin: 2rem 0; }

.l-drop a {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--c-white);
  transition: opacity .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .l-drop a:hover { opacity: .6; }
}

/* ==========================================================================
   ショートカットナビ
   支給素材は 4枚とも 200×113 で、ボタン同士の隙間と上下の白まで
   画像に焼き込まれている。ただし上端1行（白・α243）がヘッダー最終行の
   赤に重なるので、上端1行を落として 200×112 に揃えてある。
   （menu2 と menu4 は 201px 幅だったので左1列も落としてある）
   並べるとカンプの y94–205 をちょうど覆う。

   間隔を CSS で足すと、その隙間から body の透かしが覗いてしまう。
   カンプではこの帯まで白一色で、透かしはナビの下から始まる。

   カンプ実測：4枚を x0 / 200 / 400 / 600、y94 に配置
   ========================================================================== */
.l-gnav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 上下の白は画像に入っているので、余白は足さない */
  background: var(--c-white);
}
.l-gnav__item a { display: block; }
.l-gnav__item img { width: 100%; }

/* ==========================================================================
   メインビジュアル（スライダー + サムネイル + 紹介動画）
   カンプ実測：セクション y206–1681（次の赤地が y1682 から）
     赤い装飾   412×323 を (0,186) ／ 上端20pxはナビに隠れる
     スライド    575×651 / y273–923（中央寄せ）
     サムネイル  133×151 ×4 / 間隔14.33（統一後）
     ドット      32×10 ×4 / ピッチ55.2 / y886–896（枠内オーバーレイ）
     サムネイル  133×151 ×4 / 間隔約15.7 / y946–1096
     紹介動画見出し 485×125 を (195,1124)（中央ではない）
     動画枠      x110–688 / y1264–1595
     青い装飾    416×323 を (384,1359)
   ========================================================================== */
.p-mv {
  position: relative;
  z-index: 0;
  /* 赤い装飾がナビの下に潜り込む形なので、はみ出しを切る */
  overflow: hidden;
  padding: 6.7rem 0 8.6rem;   /* 206→273 / 1596→1682 */
}

/* 装飾は透過PNG。スライド枠より後ろに敷く。 */
.p-mv__deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.p-mv__deco--red {
  top: -2rem;                 /* カンプ y186。上端はナビに隠れる */
  left: 0;
  width: 41.2rem;
  height: 32.3rem;
  background-image: url("../img/deco-mv-red.png");
}
.p-mv__deco--blue {
  right: 0;
  bottom: 0;                  /* カンプ (384,1359)。右下がセクション右下と一致 */
  width: 41.6rem;
  height: 32.3rem;
  background-image: url("../img/deco-mv-blue.png");
}

/* --- スライダー --------------------------------------------------------- */
.p-mv__slider {
  position: relative;
  width: var(--w-media);
  margin-inline: auto;
}

.p-mv__track {
  display: flex;
  height: var(--h-slide);
  overflow-x: auto;
  overflow-y: hidden;         /* 明示しないと auto に格上げされて縦バーが出る */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* touch-action は指定しない。横方向を除外するとスマホのスワイプが
     ブラウザに処理されず、JS 側もタッチを扱わないため何も起きなくなる。 */
}
.p-mv__track::-webkit-scrollbar { display: none; }
.p-mv__track.is-grabbing { cursor: grabbing; }

/* 高さは実寸で確定させる。flex の align-items: stretch が先に
   クロスサイズを決めてしまうので、aspect-ratio では効かない。 */
.p-mv__slide {
  flex: 0 0 100%;
  height: var(--h-slide);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--c-gray-ph);
}
.p-mv__slide a { display: block; height: 100%; }
.p-mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;      /* ドラッグ中に画像を掴んでしまうのを防ぐ */
  -webkit-user-drag: none;
}

/* --- ページネーション --------------------------------------------------- */
.p-mv__dots {
  position: absolute;
  left: 50%;
  bottom: 2.7rem;
  transform: translateX(-50%);
  display: flex;
  gap: 2.32rem;              /* 32px + 23.2px = ピッチ55.2px */
}
.p-mv__dots button {
  display: block;
  width: 3.2rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--c-dot-off);
  transition: background-color .25s ease;
}
.p-mv__dots button.is-current { background: var(--c-dot); }

/* --- サムネイル ---------------------------------------------------------
   高さを実寸で固定する。0〜1枚のときも display:none にせず場所を確保する
   （消すと行の高さと上の余白が丸ごと消えて、背景とのズレが出る）。
   flex-basis を基準サイズ、flex-shrink を 1 にしておくと、枚数が増えて
   枠幅を超える段階から均等に縮んで1行に収まる。 */
.p-mv__thumbs {
  display: flex;
  justify-content: center;
  align-items: stretch;      /* center にすると子の高さが auto になる */
  flex-wrap: nowrap;
  gap: 1.43rem;              /* 133×4 + 14.33×3 = 575 */
  width: var(--w-media);
  height: var(--h-thumbs);
  margin: 2.2rem auto 0;     /* スライド下端924→946 */
}
.p-mv__thumbs li {
  flex: 0 1 13.3rem;
  min-width: 0;              /* これが無いと縮まない */
  height: 100%;
}
.p-mv__thumbs button {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  opacity: .55;
  transition: opacity .25s ease;
}
.p-mv__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-mv__thumbs button.is-current { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .p-mv__thumbs button:hover { opacity: 1; }
}

/* --- 紹介動画 -----------------------------------------------------------
   見出しは帯とキャラで1枚。透明余白が左右非対称（キャラが右に出る）ので
   中央寄せではなく実測位置で置く。カンプ上 x195 / y1124。 */
.p-movie__ttl {
  margin: 2.7rem 0 0 19.5rem;   /* サムネイル下端1097→1124 */
  scroll-margin-top: 1rem;
}
.p-movie__ttl img { width: 48.5rem; }

/* 幅575 × 高さ332 は 16:9 ではないので、YouTube の埋め込みは上下に
   数pxの黒帯が入る（プレイヤーの地色が黒なのでほぼ分からない）。
   カンプの枠も 579×332 = 1.744 で 16:9 ではないため、
   ここはカンプの寸法をそのまま採っている。
   帯を完全に無くすなら 32.4rem（575の16:9）にして、
   減った分を .p-mv の padding-bottom に足す。 */
.p-movie__frame {
  width: var(--w-media);
  height: var(--h-movie);
  margin: 1.5rem auto 0;        /* 見出し下端1249→1264 */
  overflow: hidden;
  background: var(--c-black);
}
.p-movie__frame iframe,
.p-movie__frame > div {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.p-movie__ph { background: var(--c-gray-ph); }

/* ==========================================================================
   下半分のラッパ（最新情報＋店舗情報）

   青地の透かしをここに持たせる。青地セクション自体に敷くと、
   その上端がポスターの枚数で動くため、透かしの位相が枚数によって変わり、
   赤地との境界でマークが切れる。

   このラッパは y1682 から始まり位置が動かないので、
   ラッパ（青）と .p-news::before（赤）に同じ --wm-shift を掛ければ、
   ポスターが何枚でも body → 赤地 → 青地 と位相がつながる。

   斜めの上辺もここで切る。中に入るポスターは上端から43px下なので、
   影を含めても切り取り線には掛からない。
   ========================================================================== */
.l-lower {
  position: relative;
  background-color: var(--c-blue);
  background-image: url("../img/bg-watermark-blue.png");
  background-repeat: repeat;
  background-position: left var(--wm-shift);
  background-size: var(--tile);
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}

/* ==========================================================================
   最新情報（ポスター・枚数可変）
   カンプ実測：セクション y1682–3841
     上辺は斜め（x0 で y1709 / x799 で y1682 → 落差27px）
     ポスター y1725 / 2436 / 3154（各651・間隔は60と63なので6.3remに統一）
   背景は ::before に敷いて clip-path する。セクション自体を clip すると
   ポスターの影まで切れる。 
   ========================================================================== */
.p-news {
  position: relative;
  z-index: 0;
  padding: 4.3rem 0 3.8rem;   /* 1682→1725 / 3803→3841 */
  /* 赤地と青地の間の白2px。inset:0 の ::before はボーダーの内側までなので、
     ここに白いボーダーを置くとラッパの青を隠して白い帯になる。 */
  border-bottom: .2rem solid var(--c-white);
}

/* 斜めの上辺は .l-lower 側で切っているので、ここでは切らない。 */
.p-news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--c-red);
  background-image: url("../img/bg-watermark-red.png");
  background-repeat: repeat;
  background-position: left var(--wm-shift);
  background-size: var(--tile);
}

/* 高さも固定する。枚数可変でも1枚あたりの高さが動くと下の要素がずれる。 */
.p-news__frame {
  width: var(--w-media);
  height: var(--h-poster);
  margin-inline: auto;
  overflow: hidden;
  background: var(--c-gray-ph);
  box-shadow: var(--sh-media);
}
.p-news__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-news__frame + .p-news__frame { margin-top: 6.3rem; }

/* ==========================================================================
   店舗情報 + 設備 + マップ（青地）
   カンプ実測：セクション y3843–5164
     暗幕      y3873–4224（全幅・高さ352）
     見出し     427×107 を (177,3892)
     テーブル   x115–686 / 1行目 y4033 / 行ピッチ41
     設備 上段  円108 / x159・344・532 / y4287
          下段  円108 / x253・438      / y4448
     マップ枠   550×385 を (130,4638) ／ キャラ 117×112 を (591,4911)
     ボタン     441×68 を (179,5050)
   ========================================================================== */
/* 地と透かしは .l-lower が持つ。ここでは余白だけ。 */
.p-shop {
  /* padding-top はマージン相殺よけも兼ねる。0 にすると暗幕の
     margin-top がセクションの外に抜けて、青地の上端が下がる。 */
  padding: 3rem 0 4.7rem;    /* 3843→3873 / ボタン下端5118→青地下端5164 */
}

/* --- 暗幕パネル ---------------------------------------------------------
   支給素材には入っていない。カンプの色を回帰で解くと
   青地 #0072FF に rgba(48, 48, 48, .47) を乗せた値と一致する
   （0,114,255 → 23,83,158）。半透明なので下の透かしもそのまま透ける。 */
.p-shop__head {
  height: 35.2rem;
  padding-top: 1.9rem;       /* 3873→3892 */
  background: rgba(48, 48, 48, .47);
}

.p-shop__head .c-ttl {
  margin-left: 17.7rem;      /* カンプ上 x177。中央寄せではない */
}
.p-shop__head .c-ttl img { width: 42.7rem; }

/* --- 店舗情報テーブル ---------------------------------------------------
   カンプ実測：ラベル 68×20 / 値の左端 x209 / 点線はドット3px・ピッチ7px */
.p-shop__info {
  width: var(--w-table);
  margin: 3.4rem auto 0;     /* 見出し下端3999→1行目4033 */
}

.p-shop__row {
  display: flex;
  align-items: center;
  padding-bottom: 1.1rem;
  margin-bottom: 1rem;       /* ラベル20 + 11 + 10 = ピッチ41 */
  /* 点線：ドット3px・ピッチ7px。border: dotted では間隔を制御できない */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .62) 0 .3rem,
    transparent .3rem .7rem
  );
  background-size: 100% .2rem;
  background-position: bottom left;
  background-repeat: no-repeat;
}
/* カンプでは最終行にも点線が入るので、:last-child の打ち消しは入れない。 */

.p-shop__row dt {
  flex: 0 0 6.8rem;
  display: grid;
  place-items: center;
  height: 2rem;
  margin-left: .4rem;        /* 点線 x115 に対してラベル x119 */
  margin-right: 2.2rem;      /* ラベル右端187 → 値の左端209 */
  border-radius: 999px;
  background: linear-gradient(180deg, #FAFAFA, #F1F0F0);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-ink-label);
  white-space: nowrap;
}

.p-shop__row dd {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-white);
}

/* --- 設備アイコン -------------------------------------------------------
   flex-wrap ではなく grid にする。flex だと1行に4つ入る余地があると
   4つ並んでしまう。列数を明示すれば必ず3つで折り返す。
   space-between にすると両端の列がコンテナの端に揃い、カンプの
   中心（213 / 398 / 586）と2px以内で合う。 */
.p-shop__facility {
  display: grid;
  grid-template-columns: repeat(3, 10.9rem);
  justify-content: space-between;
  width: 48.1rem;            /* 円の中心が x213 / 399.5 / 586 に来る */
  margin: 6.2rem auto 0;     /* 暗幕下端4225 → 円の上端4287 */
}
.p-shop__facility--2 {
  grid-template-columns: repeat(2, 10.9rem);
  gap: 0 7.6rem;
  justify-content: center;
  width: auto;
  margin-top: 1.1rem;        /* 上段ラベル下端4437 → 下段の円 上端4448 */
}
.p-shop__facility img { width: 100%; }

/* ラベルは HTML 側で組む。1行と2行が混在するので高さを固定して
   上下中央に置き、円との距離を揃える。 */
.p-shop__facility span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  margin-top: 1rem;          /* 円の下端 → ラベル枠の上端 */
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.23;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;       /* 列幅を超えても折り返さない（カンプ同様） */
  color: var(--c-white);
}

/* --- Google Map ---------------------------------------------------------
   支給素材では枠（550×385）とキャラ（117×112）が別ファイルなので重ねる。
   枠は金線の内側を透明に抜いてあり、その下に iframe を敷く。
   カンプ実測：枠 (130,4638) ／ 白地 x146–663・y4654–5006 ／ 金線は内側に2px。
   iframe が入るのは x149–660 / y4657–5003（512×347 = 枠から一律19px内側）。 */
.p-shop__map {
  position: relative;
  width: 55rem;
  height: 38.5rem;
  margin: 4rem 0 0 13rem;    /* 下段ラベル下端4598 → 枠の上端4638 / x130 */
}

.p-shop__map__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  pointer-events: none;      /* 地図の操作を邪魔しない */
}

.p-shop__map__chara {
  position: absolute;
  top: 27.3rem;
  left: 46.1rem;             /* カンプ (591,4911) */
  z-index: 2;
  width: 11.7rem;
  pointer-events: none;
}

.p-shop__map__viewport {
  position: absolute;
  inset: 1.9rem;
  background: var(--c-map-bg);   /* 地図の読み込み前に白飛びさせない */
}
.p-shop__map__viewport iframe,
.p-shop__map__viewport > div {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- マップを開くボタン -------------------------------------------------
   441×68（影込み）。カンプ上は (179,5050) で、中央寄せと一致する。 */
.p-shop__cta {
  margin-top: 2.7rem;        /* 枠の下端5023 → ボタン上端5050 */
}
.p-shop__cta img {
  width: 44.1rem;
  margin-inline: auto;
}

/* ==========================================================================
   404
   ========================================================================== */
.p-notfound {
  padding: 8rem 0 10rem;
  text-align: center;
}
.p-notfound__code {
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--c-dot);
}
.p-notfound__text {
  margin-top: 2rem;
  font-size: 1.6rem;
}
.p-notfound__back {
  margin-top: 3rem;
  font-size: 1.4rem;
}
.p-notfound__back a { text-decoration: underline; }

/* ==========================================================================
   フッター
   カンプ実測：黒地 y5167–5230（高さ64）。上に2pxの白。
   ========================================================================== */
.l-footer {
  margin-top: .2rem;
  padding: .9rem 0 .8rem;
  background: var(--c-black);
  text-align: center;
}
.l-footer p {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--c-white);
}