@charset "UTF-8";
/* ==========================================================================
   art.css — 下層01 ART ROUTE 専用。共通は css/common.css（オーナー: 共通側）
   出典: XD 案件 260911-_-_-0819 / snapshot 2026-08-19T04-55-26-630Z
         アートボード SP_下層01_ART ROUTE（750×16950）
         01_mainv 8a3f2ca6… / contents 0496206e… → 記事本体 a8f187c2…
   方針: 750px 固定・メディアクエリなし。寸法は XD の px そのまま。
         font-size だけ rem（16px 基準）で、末尾に元の px をコメント。
   注意: リセットで body { font-size:0; line-height:0 } が効いているため
         テキストを持つセレクタには必ず font-size / line-height を書く。

   目次
   0. このページ共通の型
   1. メインビジュアル（XD: 01_mainv / 750×930）
   2. 記事本体（XD: contents > contents a8f187c2… 656×10460）
     2-1. 時刻 + 場所
     2-2. 写真コラージュ
     2-3. 詳細テキスト
     2-4. リンクボタン（XD: グループ 13393 / 12945）
     2-5. 記事中のクイズラリー告知（XD: quizrally 650×345）
   3. 装飾イラスト（XD: アートボード直下の illust 11 点。記事に重ねて配置）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. このページ共通の型
   -------------------------------------------------------------------------- */

/* 見出し・本文で繰り返し使う型（XD の文字スタイル 4 種）

   ■ 行送りとボックス高さの扱い（XD 実測に合わせるための補正）
   XD のテキストボックスの高さは「1 行目だけフォント本来の行高 + 2 行目以降は行送り」で決まる。
   （実測: Serif 28px = 40 / Serif 24px = 35 / Sans 26px = 37 / Sans 24px = 35）
   CSS は全行に line-height を掛けるため、行送りだけ写すと 1 ブロックごとに数 px ずれ、
   縦に積み上がって記事下部で 100px 以上の差になる（イラストの top が合わなくなる原因）。
   そこで line-height は XD の行送り px をそのまま入れ、はみ出し／不足ぶんを
   padding / 負の margin で削り、ボックス高さを XD と一致させる。行数が変わっても差は一定。 */
.art-body .art-ttl {              /* Noto Serif JP Bold 28 / 行送り36 → 1行 40px */
  font-family: var(--f-jp-serif);
  font-weight: 700;
  font-size: 1.75rem;             /* 28px */
  line-height: 36px;              /* XD 行送り 36px */
  padding-top: 2px;               /* 36 → 40 に補正 */
  padding-bottom: 2px;
  color: var(--c-ink);
}
.art-body .art-meta {             /* Noto Serif JP Medium 28 / 行送り42 → 1行 40px・2行 82px */
  font-family: var(--f-jp-serif);
  font-weight: 500;
  font-size: 1.75rem;             /* 28px */
  line-height: 42px;              /* XD 行送り 42px */
  margin-top: -1px;               /* 42n → 40 + 42(n-1) に補正 */
  margin-bottom: -1px;
  color: var(--c-ink);
}
/* 行頭の四角は ■ (U+25A0) を使う。XD 原稿は ◼ (U+25FC) + 異体字セレクタ (U+FE0E) だが、
   読み込んでいる 4 フォントのいずれにも収録が無く端末のフォントに落ちる
   （実測 20.53px で全角にならない。■ と漢字は 24px）。XD から取り直しても戻さないこと。 */
.art-body .art-meta-s {           /* Noto Serif JP Medium 24 / 行送り34 → 1行 35px */
  font-family: var(--f-jp-serif);
  font-weight: 500;
  font-size: 1.5rem;              /* 24px */
  line-height: 34px;              /* XD 行送り 34px */
  padding-top: .5px;              /* 34 → 35 に補正 */
  padding-bottom: .5px;
  color: var(--c-ink);
}
.art-body .art-txt {              /* Noto Sans JP Regular 26 / 行送り48 → 37 + 48(n-1) */
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 1.625rem;            /* 26px */
  line-height: 48px;              /* XD 行送り 48px */
  margin-top: -5.5px;             /* 48n → 37 + 48(n-1) に補正 */
  margin-bottom: -5.5px;
  /* XD のこの本文には文字ツメ（styleRanges の charSpacing）が入っていないため、
     共通の palt を打ち消す。付けたままだと XD より 1 行ぶん短く折り返す（atr_04 で実証）。 */
  font-feature-settings: normal;
  color: var(--c-ink);
}
.art-body .art-txt-s {            /* Noto Sans JP Regular 24 / 行送り38 → 1行 35px */
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 1.5rem;              /* 24px */
  line-height: 38px;              /* XD 行送り 38px */
  margin-top: -1.5px;             /* 38n → 35 + 38(n-1) に補正 */
  margin-bottom: -1.5px;
  font-feature-settings: normal;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   1. メインビジュアル（XD: 01_mainv / 750×930）
   黄色帯・地図・gentleman・散らしの写真・タイトル・リード文はすべて
   1 枚に平坦化した PNG を使う（2 倍 1500×1860 → 表示 750×930）。
   焼き込まれた文字は HTML 側に .u-visually-hidden の実テキストで残している。
   ヘッダー出現の基準になるので HTML 側に .js-header-switch を付けている（script.js）。
   -------------------------------------------------------------------------- */
.art-mv {
  position: relative;
  width: var(--page-w);
  height: 930px;
}
.art-mv__img {
  display: block;
  width: 750px;
  height: 930px;
}

/* --------------------------------------------------------------------------
   2. 記事本体（XD: contents > contents a8f187c2… 656×10460）
   縦スタック gap 60。中身は 650px（一部 656px）幅で中央寄せ。
   メインビジュアルとの間隔 120px は XD の contents スタック spacings に一致。
   -------------------------------------------------------------------------- */
/* メインビジュアルとの間の 120px は common.css の 9-7（main > * + *）が付ける。
   ここで margin-top: 120px を書くと同じものが 2 か所になるので持たない。 */
.art-body {
  position: relative;
  width: var(--page-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;                       /* XD: 記事コンテナの stack spacings = 60 */
}

/* スポット 1 件 */
.art-spot {
  position: relative;
  z-index: 1;
  width: 650px;
  display: flex;
  flex-direction: column;
  gap: 30px;                       /* XD: atr_0x の stack spacings = 30 */
}
.art-spot--05 { width: 656px; }    /* XD: atr_05 だけ 656px */

/* 2-1. 時刻 + 場所 -------------------------------------------------------- */
.art-spot__time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;                       /* XD: グループ 12942 の stack spacings = 15 */
}
/* 時刻（11:00 等）は common.css 9-4 の .time-num。
   白帯 + ピン + 施設名（XD: グループ 13326）と店名の白箱（XD: グループ 13341 / 13441 / 13410）は
   どちらも YuGothic のため白帯ごと 2 倍 PNG で書き出して貼っている（common.css 9-5）。
   帯・白箱の寸法は画像そのものが持つので、ここでは幅を指定しない。 */
.art-spot__shop {                  /* 店名の白箱。白地・上下 20px の余白は画像に含まれる */
  display: block;
}
.art-spot__shop img {
  display: block;
}

/* 2-2. 写真コラージュ ----------------------------------------------------- */
.art-spot__visual {
  position: relative;
}
.art-spot__copy {                  /* こぶりなゴシックのコピーは画像（2倍書き出し） */
  position: absolute;
  display: block;
}
.art-spot__photo {
  position: absolute;
  box-sizing: border-box;
  /* XD には 2px #333 の線があるが、四角い枠線は不要との指示で外している（2026-08-20） */
  object-fit: cover;
}

/* 重なりの前後（z 順）について
   XD の children 配列は「先頭 = 最背面」。XD レンダーと突き合わせると、
   各スポットで後ろの写真の上に手前の写真が乗り、コピーが最前面になる。
   HTML の記述順（視覚順）だけに任せると前後が逆になるため z-index を明示する。 */

/* 上の時刻・白帯の文字メトリクスの差が数 px 積み上がり、写真ブロックが XD より
   わずかに下がる。XD レンダーとの相互相関で求めたぶんだけ戻す（セクション高さは変えない）。
   ※ atr_01 / 04 / 07 は店名の白箱を XD 実寸の画像に置き換えて .art-spot__time の高さが
     XD の draw bounds（257 / 257 / 255px）と厳密に一致したため、補正そのものを外した。
     XD 実測の写真上端は atr_01 = 287 / atr_04 = 287 / atr_07 = 285（positionSource: exact）。
     白箱を持たない atr_02 / 03 / 05 / 06 は白帯 80px のままで条件が変わっていないので補正を残す。 */

/* atr_01: グループ 13385（650×576） */
.art-spot--01 .art-spot__visual { width: 650px; height: 576px; }
.art-spot--01 .art-spot__copy   { left: 0; top: 15px; width: 317px; height: 117px; z-index: 5; }
  /* XD 実測（positionSource: exact）: グループ 13362 の onArtboard(50, 1352) − 親グループ 13385 の
     onArtboard(50, 1337) = 左 0 / 上 15。top: 0 だと 15px 上に浮く */
.art-spot--01 .art-photo--haera { right: 0; top: 0; width: 325px; height: 250px; z-index: 2; }
.art-spot--01 .art-photo--yoneyama { left: 0; bottom: 0; width: 520px; height: 400px; }

/* atr_02: グループ 13384（650×635） */
.art-spot--02 .art-spot__visual { width: 650px; height: 635px;  margin-top: -2px; margin-bottom: 2px; }
.art-spot--02 .art-spot__copy   { left: 385px; top: 60px; width: 264px; height: 117px; z-index: 5; }
  /* XD 実測: グループ 13360 の onArtboard(435, 2719) − 親グループ 13384 の onArtboard(50, 2659)
     = 左 385 / 上 60。XD のコピー幅は 263px なので right: 0 だと 1px 右へ寄る（画像は罫線ぶん 264px） */
.art-spot--02 .art-photo--shop  { left: 0; top: 0; width: 325px; height: 250px; z-index: 2; }
.art-spot--02 .art-photo--dish  { left: 0; bottom: 0; width: 650px; height: 400px; }

/* atr_03: グループ 13356（650×650）
   sidecore（345×460 左下）と グレーの置き板（345×460 右上）が重なり、
   重なった部分が黄色（XD: 交差 11 / #FFE000）。
   ※ XD の交差は Path のカット形状が読めないため矩形で近似している。
      サイズと位置は XD レンダーの塗り範囲実測（36×158 / ページ x357 y4263）に合わせた */
.art-spot--03 .art-spot__visual { width: 650px; height: 650px;  margin-top: -2px; margin-bottom: 2px; }
/* atr_03 は写真コラージュを 1 枚の PNG に平坦化して貼っている（page_art.html 参照） */
.art-spot__flat { display: block; width: 100%; height: 100%; }

/* atr_04: グループ 13383（650×686） */
.art-spot--04 .art-spot__visual { width: 650px; height: 686px; }
.art-spot--04 .art-spot__copy   { right: 0; top: 0; width: 293px; height: 117px; z-index: 5; }
.art-spot--04 .art-photo--gallery { left: 0; top: 0; width: 300px; height: 400px; z-index: 2; }
.art-spot--04 .art-photo--asano   { right: 0; bottom: 0; width: 520px; height: 420px; }

/* atr_05: グループ 13366（575×800） */
.art-spot--05 .art-spot__visual { width: 575px; height: 800px; margin-right: auto;  margin-top: -3px; margin-bottom: 3px; }
.art-spot--05 .art-spot__copy   { left: 0; top: 0; width: 433px; height: 117px; z-index: 5; }
.art-spot--05 .art-photo--genta { left: 78px; bottom: 0; width: 500px; height: 650px; } /* XD レンダー実測: ページ x125 */

/* atr_06: グループ 13421（500×750）＝ 写真 1 点。赤い「変更予定」バッジは制作メモのため実装しない。 */
.art-spot--06 .art-spot__visual { width: 500px; height: 750px; margin: 0 auto;  margin-top: -3px; margin-bottom: 3px; } /* XD上の位置: ページ x125 */
.art-spot--06 .art-photo--black { left: 0; top: 0; width: 500px; height: 750px; }

/* atr_07: グループ 13382（650×500） */
.art-spot--07 .art-spot__visual { width: 650px; height: 500px; }
.art-spot--07 .art-spot__copy    { left: 380px; top: 21px; width: 230px; height: 190px; z-index: 5; }
  /* XD 実測: グループ 13367 の onArtboard(430, 10603) − 親グループ 13382 の onArtboard(50, 10582)
     = 左 380 / 上 21。right: 0 だと 40px 右へ寄る（XD ではブロック右端まで 40px 空く） */
.art-spot--07 .art-photo--imadeya-shop  { right: 0; bottom: 0; width: 400px; height: 260px; }
.art-spot--07 .art-photo--imadeya-nagoya { left: 0; top: 0; width: 350px; height: 450px; z-index: 2; } /* XD レンダー実測: 上揃え */

/* 2-3. 詳細テキスト ------------------------------------------------------ */
.art-spot__detail {
  display: flex;
  flex-direction: column;
  gap: 30px;                       /* XD: グループ 13329 / 13364 / 13336 = 30 */
}
.art-spot__head {                  /* XD: グループ 13328 / 12856 = 10 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 価格 2 列（XD: グループ 13409 / 13387 横スタック gap 10） */
.art-price {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.art-price__row {
  display: flex;
  gap: 10px;
}
.art-price__col {
  /* XD は横スタックで、各列の幅は文字数なり（等分ではない）。
     等分 + 折り返し可にすると 2 行のはずが 3 行になり、1 スポットで 88px 伸びる。 */
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 2-4. リンクボタン（XD: グループ 13393 / 12945） ------------------------- */
.art-link {
  display: flex;
  flex-direction: column;
  gap: 10px;                       /* XD: グループ 13393 = 10 */
  width: 650px;
}
.art-link__btn {                   /* 長方形 9846: 650×110 / #E4E8EC / 線 1px #333 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;                       /* XD: グループ 12945 = 30 */
  width: 650px;
  height: 110px;
  background: var(--c-gray00);
  border: 1px solid var(--c-ink);
}
.art-link__label {
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 1.75rem;              /* 28px */
  line-height: 1.43;               /* XD 実測ボックス 40px */
  letter-spacing: .12em;
  color: var(--c-ink);
}
/* XD にはこの下に「※外部サイトへ遷移します」の注記があるが、削除指示のため実装しない（2026-09-10） */

/* 2-5. 記事中のクイズラリー告知（XD: quizrally 650×345） ----------------- */
.art-quiz {
  position: relative;
  z-index: 1;
  width: 650px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* --------------------------------------------------------------------------
   3. 装飾イラスト（XD: アートボード直下の illust 11 点。記事に重ねて配置）
   XD ではアートボード直接の子だが、ページ先頭からの絶対位置で置くと
   テキストの実レンダリング高さのズレが累積して持ち主のブロックから離れる。
   そのため「重なっているスポットの中」に入れ、そのブロックの左上を原点に
   置き換えてある（left = XD のページ x − ブロック左端 50px / 656px 幅の
   atr_05 だけ 47px、top = XD のページ y − ブロック上端）。

   ■ 装飾イラストの原点は 3 ページで別（意図的に揃えていない）
     ART    = 重なっているスポットの左上（このファイル）
     FAMILY = 本文ブロック .family-body の上端（= アートボード y1050）
     BEAUTY = .beauty-page の上端（= アートボード y0。アートボード座標そのまま）
     ART だけスポット原点なのは、ART の記事がスポットごとに原稿の行数なりの高さで、
     まだ差し替え予定の原稿が残っているため（ページ絶対座標だと原稿が 1 行増えた
     時点でそれ以降のイラストが全部ずれる）。逆に FAMILY / BEAUTY をスポット原点へ
     移すと、イラストがスポットの重なり順の中に入るぶん前後関係が変わる
     （後ろのスポットが前のスポットのはみ出しを覆う）。揃えるときは要スクリーンショット確認。
   -------------------------------------------------------------------------- */
.art-illust {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  object-fit: cover;
}
/* 回転しているノードの置き方（XD 実測で確定）
   XD の x / y は「ローカル原点（＝回転前の左上）を回転させたあとの平行移動先」で、
   回転軸は中心ではなく左上。書き出し PNG は回転後の外接矩形（絵柄は回転済み）。
   したがって外接矩形の左上は (x, y) + (回転後 4 隅の最小 x, 最小 y) で求める。
   rotate() は付けない（付けると二重に回る）。 */
/* atr_01 内（XD ページ座標 375,1066 / 566,1623 ＝回転前の矩形） */
.art-illust--01 { left: 325px;    top: 16px;     width: 126px;   height: 133px; }
.art-illust--02 { left: 450.52px; top: 573px;    width: 227.5px; height: 288px; }   /* 168×253 r15 の外接矩形 */
/* atr_02 内（540,3208） */
.art-illust--03 { left: 490px;    top: 746px;    width: 187px;   height: 244px; }
/* atr_03 内（500,3647 はブロック上端より上にはみ出す / 455,4457） */
.art-illust--04 { left: 450px;    top: -173px;   z-index: -1; width: 334px; height: 560px; }
.art-illust--05 { left: 405px;    top: 637px;    width: 223px;   height: 180px; }
/* atr_04 内（587,6150 / -49,6536） */
.art-illust--06 { left: 537px;    top: 406px;    width: 180px;   height: 130px; }
.art-illust--07 { left: -99px;    top: 792px;    width: 240px;   height: 176px; }
/* atr_05 内（534,7646 / 632,7765）※atr_05 は 656px 幅なので左端 47px 基準 */
.art-illust--08 { left: 487px;    top: 230px;    width: 96.5px;  height: 113.5px; } /* 54×100 r-30 の外接矩形 */
.art-illust--09 { left: 535px;    top: 376px;    width: 99.5px;  height: 115px; }   /* 57×100 r30 の外接矩形 */
/* atr_06 内（125,9043） */
.art-illust--10 { left: -101.02px; top: -84.87px; width: 176.5px; height: 209px; }  /* 134×180 r165 の外接矩形 */
/* atr_07 内（520,10158 はブロック上端より上にはみ出す） */
.art-illust--11 { left: 470px;    top: -141px;   width: 160px;   height: 309px; }