@charset "utf-8";

/* ============================================================
   松坂屋テンプレートページ - ベーススタイル
   参考: https://www.matsuzakaya.co.jp/nagoya/topics/5/foodie/food/gochiparabirthday2/2606/
   Adobe XD ベースデザイン（フランス展ベースデザイン.xd）から抽出した
   カラー・サイズ値を反映しています。

   ヘッダー／フッターは外部ファイル（MTのInclude／common_new配下の共通パーツ）で
   提供されるためこのファイルには含めていません。
   .sp / .pc の表示切替は参考サイト同様にページ側でも定義しています。

   共通ファイルとクラス名が衝突しないよう、ページ固有のスタイルはすべて
   ルート要素 .tpl-page 配下にスコープし、クラス名にも tpl- プレフィックスを付与しています。

   font-size は html{font-size:10px}
   （= 1rem:10px）を基準に rem で指定しています（参考サイト同様の方式）。

   ★普段の運用（商品・セクションの更新）でこのファイルを編集する必要はありません。
     触るのはデザイン変更時のみです。

   ▼ このファイルの構成（下の同名バナーコメントへ検索でジャンプできます）

   このファイルは「第1部: テンプレート基礎 → 第2部: 案件固有の上書き」の2層構造です。
   この案件の見た目を調整するときは、まず第2部に該当ルールがないか確認し、
   無ければ第1部を探してください（第2部が同じ要素を上書きしている場合があります）。

   【第1部】テンプレート基礎スタイル（フランス展ベースデザイン由来の汎用スタイル）
   - ベーススタイル（このバナー。色・最大幅などの共通値は .tpl-page のカスタムプロパティ）
   - グランドメニュー hover/select モード
   - メインビジュアル
   - リード文
   - グランドメニュー（各コンテンツへのナビゲーション）
   - コンテンツセクション共通（見出し・リード文）
   - contごとの識別用カラー（ダミー期間中の暫定色分け）
   - 商品リスト（タイトル画像・2カラム商品カード・ジャンルタグ）
   - 単一カラムのお知らせ型セクション
   - 商品詳細ボタン（詳細はこちら）
   - 松坂屋オンラインストアボタン
   - 大丸・松坂屋アプリ会員ボタン
   - リンクバナー
   - レスポンシブ（スマートフォン：768px以下）

   【第2部】この案件の上書きスタイル（.tpl-page--retro-mingei 配下のみに適用）
   - レトロカワイイ心なごむ郷土玩具と民藝の世界（案件カラー変数・メインビジュアル・TOPリード）
   - グランドメニュー（retro-mingei：配色・grid配置・アイコン落下アニメーション）
   - コンテンツセクション共通・01_かわいき日本
   - レスポンシブ（retro-mingei：768px以下）
   - 02_美しき日本 / 03_ワークショップ
   - 04_出店舗リスト
   - 05_アプリクーポン
   ============================================================ */

html {
  font-size: 10px;
}

body {
  margin: 0;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}

/* ページ領域内だけに効かせるリセット */
.tpl-page {
  --color-text: #333333;
  --color-black: #171717;
  --btn-bg-base: #F8E098;   /* XD: パス27185 */
  --btn-txt-active: #E0B020; /* XD: パス27186 */
  --grandmenu-text: #304050; /* XD: TOP シンボル テキスト/アイコン背景色 */

  /* グランドメニューボタンの配色（既定値は legacy モードと同じ）
     .tpl-page のモードクラス（下記）で上書きして hover/select の見た目を切り替えます */
  --grandmenu-btn-bg: var(--btn-bg-base);
  --grandmenu-btn-txt: var(--grandmenu-text);
  --grandmenu-btn-bg-active: var(--grandmenu-text);
  --grandmenu-btn-txt-active: var(--btn-txt-active);

  --content-max: 1250px;    /* XD: グループ12793 幅1251px と一致 */
  --ttl-max: 720px;         /* XD: cont1_ttl1 / cont1_ttl2 幅720px と一致 */
  --notice-max: 1080px;     /* XD: cont6（05_ダブル会員限定抽選会）グループ12793 幅1080px と一致 */
  --banner-max: 1251px;     /* XD: リンクバナー幅。--content-max(1250px) とは別の値。統一しない */
  --banner-margin: 100px auto 40px; /* リンクバナー（area / テキスト版 / 画像版）共通の上下余白 */
  --grandmenu-btn-w: 494px; /* グランドメニューのボタン幅（grid 列幅と li 幅で共有） */
  --grandmenu-max: 1200px;  /* グランドメニュー列全体の最大幅 */

  box-sizing: border-box;
  color: var(--color-text);
  background: #ffffff;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
.tpl-page *,
.tpl-page *::before,
.tpl-page *::after {
  box-sizing: border-box;
}
.tpl-page :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, figcaption, blockquote) {
  margin: 0;
  padding: 0;
}
.tpl-page :is(ul, ol) {
  list-style: none;
}
.tpl-page img {
  border: 0;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.tpl-page a {
  color: inherit;
  text-decoration: none;
}
.tpl-page :is(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}
.tpl-page button {
  border: 0;
  padding: 0;
  background: transparent;
}
.tpl-page .sp {
  display: none;
}
.tpl-page .pc {
  display: block;
}

/* ============================================================
   グランドメニュー hover/select モード
   .tpl-page に付けるモードクラスで配色を切り替えます。
   - tpl-page--grandmenu-hover-gochipara:
       ごちパラ参考サイト準拠。通常は薄ベージュ地に赤文字、
       hover/select で赤背景・白文字へ 0.3 秒で切り替わります。
       PC幅ではあわせてアイコンが上からスライドインし、
       サブコピーが右へ動きます（グランドメニューのセクション参照）。
       参考: https://www.matsuzakaya.co.jp/nagoya/topics/5/foodie/food/gochiparabirthday/2506/
   - tpl-page--grandmenu-hover-legacy:
       以前の濃色反転（--grandmenu-text 背景 + --btn-txt-active 文字）に
       戻したい場合はこちらへ付け替えるだけで戻ります。
   ============================================================ */
.tpl-page--grandmenu-hover-gochipara {
  --grandmenu-btn-bg: #F8E098;
  --grandmenu-btn-txt: #304050;
  --grandmenu-btn-bg-active: #304050;
  --grandmenu-btn-txt-active: #E0B020;
}
/* ※現在の HTML では未使用（.tpl-page--grandmenu-hover-gochipara を使用中）。
   配色を legacy に戻すための切替先として意図的に残しています。削除しないでください。 */
.tpl-page--grandmenu-hover-legacy {
  --grandmenu-btn-bg: var(--btn-bg-base);
  --grandmenu-btn-txt: var(--grandmenu-text);
  --grandmenu-btn-bg-active: var(--grandmenu-text);
  --grandmenu-btn-txt-active: var(--btn-txt-active);
}

/* ============================================================
   メインビジュアル
   ============================================================ */
#tplMain {
  text-align: center;
}
#tplMain img {
  width: 100%;
}

/* ============================================================
   リード文
   ============================================================ */
#tplLead {
  max-width: 890px;
  margin: 0 auto;
  padding: 60px 30px;
  text-align: center;
}
#tplLead .tpl-ttl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  margin-bottom: 25px;
}
#tplLead .tpl-ttl b {
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: .1em;
}
#tplLead .tpl-kaiki {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 0 25px;
}
#tplLead .tpl-kaiki p {
  margin: 0;
  font-size: 1.6rem;
}
#tplLead .tpl-txt {
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 25px;
}
#tplLead .tpl-sub {
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.8;
}

/* ============================================================
   グランドメニュー（各コンテンツへのナビゲーション）
   ============================================================ */
.tpl-grandmenu {
  background-color: #C8D0D8;
  text-align: center;
  padding: 40px 0 65px;
}
.tpl-grandmenu > h2 {
  padding: 50px 0px;
  font-family: "Hiragino Kaku Gothic StdN", sans-serif;
  font-weight: 600;
  font-size: 3.2rem;
  color: var(--color-text);
}
.tpl-grandmenu ul.tpl-cir {
  display: grid;
  /* コンテナ幅に2列(494px×2+gap)が収まらない場合は自動で1列に折り返す */
  /* 1frではなく固定pxにして、列が伸びてボタン間の余白が広がらないようにする */
  grid-template-columns: repeat(auto-fit, var(--grandmenu-btn-w));
  justify-content: center;
  justify-items: center;
  column-gap: 10px;
  row-gap: 14px;
  max-width: var(--grandmenu-max);
  margin: 24px auto 0;
}
.tpl-grandmenu ul.tpl-cir li {
  position: relative;
  width: var(--grandmenu-btn-w);
  max-width: 100%;
  height: 100px;
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  row-gap: 0;
  column-gap: 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--grandmenu-btn-bg);
  color: var(--grandmenu-btn-txt);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  cursor: pointer;
  transition: .3s;
}
.tpl-grandmenu ul.tpl-cir li u {
  flex: none;
  width: 32px;
  height: 32px;
  position: relative;
  transition: .3s;
}
.tpl-grandmenu ul.tpl-cir li u::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--menu-icon, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.tpl-grandmenu ul.tpl-cir li.select u::before {
  background-image: var(--menu-icon-active, var(--menu-icon, none));
}
.tpl-grandmenu ul.tpl-cir li i {
  font-style: normal;
  font-size: 1.6rem;
  transition: .3s;
}
.tpl-grandmenu ul.tpl-cir li b {
  width: 100%;
  font-weight: 700;
  font-size: 2.4rem;
  margin-top: 0;
  text-align: center;
  transition: .3s;
}
/* select（クリック後の選択状態）はデバイスを問わず適用する */
.tpl-grandmenu ul.tpl-cir li.select {
  background: var(--grandmenu-btn-bg-active);
}
.tpl-grandmenu ul.tpl-cir li.select :is(b, i) {
  color: var(--grandmenu-btn-txt-active);
}
/* hover はマウス等の PC 環境のみ。タッチ端末で hover が残留して
   タップ後の select 表示と競合しないよう分離しています */
@media (hover: hover) and (pointer: fine) {
  .tpl-grandmenu ul.tpl-cir li:hover {
    background: var(--grandmenu-btn-bg-active);
  }
  .tpl-grandmenu ul.tpl-cir li:hover :is(b, i) {
    color: var(--grandmenu-btn-txt-active);
  }
  .tpl-grandmenu ul.tpl-cir li:hover u::before {
    background-image: var(--menu-icon-active, var(--menu-icon, none));
  }
}

/* ------------------------------------------------------------
   gochipara モードのアイコン出現アニメーション（PC幅のみ）
   アイコン枠 <u> の幅は常に32pxのまま確保し、レイアウトは一切
   アニメーションさせません（幅を動かすとレイアウト再計算と
   transform の描画タイミングがずれて、アイコンが斜めに動いて
   見えるため）。動かすのは次の2つの transform / opacity のみ:
   - アイコン本体（u::before）: opacity 0→1 と translateY(-8px→0)
     で、その場でまっすぐ上から下へフェードイン
     ※入場（hover/select が付く時）は opacity と transform を両方
       アニメーションさせて上→下にフェードイン。退場（hover/select
       が外れる時）は rest 側の transition が効くので、opacity だけ
       アニメーションさせ、transform は「.2s 遅延・0s で切替」にして
       フェードが終わって見えなくなってから位置を戻す。これで上へ
       動かず、その場でフェードアウトして消える。
   - サブコピー（i）: 通常時は translateX(-21px) でアイコン枠が
     無いときと同じ中央位置に置き、hover/select で 0 に戻して
     右へスライド（21px = (アイコン32px + gap10px) ÷ 2）
   また、アイコン行は align-items: flex-end で下端揃えにし、
   背の高いアイコンの下端がサブコピーテキストの下端に合うように
   しています（アイコンはサブコピーより上へはみ出す形）。
   スマホ幅（768px以下）の番号バッジと legacy モードには影響しません。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  /* アイコンとサブコピーを下端揃えにする（<b> は width:100% で別行なので影響なし） */
  .tpl-page--grandmenu-hover-gochipara .tpl-grandmenu ul.tpl-cir li {
    align-items: flex-end;
  }
  .tpl-page--grandmenu-hover-gochipara .tpl-grandmenu ul.tpl-cir li u::before {
    /* 表示されるのは背景が赤の hover/select 時だけなので常に active 版を使う */
    background-image: var(--menu-icon-active, var(--menu-icon, none));
    opacity: 0;
    transform: translateY(-16px); /* 上に少しオフセットした状態からフェードイン */
    /* 退場時: opacity だけフェードし、transform は消えてから戻す（その場で消える） */
    transition: opacity .2s, transform 0s .2s;
  }
  .tpl-page--grandmenu-hover-gochipara .tpl-grandmenu ul.tpl-cir li i {
    transform: translateX(-21px); /* アイコン枠ぶん左へ寄せて中央に見せる */
  }
  .tpl-page--grandmenu-hover-gochipara .tpl-grandmenu ul.tpl-cir li.select u::before {
    opacity: 1;
    transform: translateY(0);
    /* 入場時: opacity と transform を両方アニメーションして上→下にフェードイン */
    transition: opacity .2s, transform .2s;
  }
  .tpl-page--grandmenu-hover-gochipara .tpl-grandmenu ul.tpl-cir li.select i {
    transform: translateX(0);
  }
}
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .tpl-page--grandmenu-hover-gochipara .tpl-grandmenu ul.tpl-cir li:hover u::before {
    opacity: 1;
    transform: translateY(0);
    /* 入場時: opacity と transform を両方アニメーションして上→下にフェードイン */
    transition: opacity .2s, transform .2s;
  }
  .tpl-page--grandmenu-hover-gochipara .tpl-grandmenu ul.tpl-cir li:hover i {
    transform: translateX(0);
  }
}
/* ============================================================
   コンテンツセクション共通（見出し・リード文）
   ============================================================ */
#tplContents .tpl-cont {
  padding: 100px 0;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  text-align: center;
}
#tplContents .tpl-cont h2 {
  position: relative;
  margin: 0;
  padding: 105px 0 0;
  font-size: 4.9rem;
  font-weight: 500;
  color: #000;
}
#tplContents .tpl-cont h2::before {
  content: "";
  display: block;
  width: 65px;
  height: 65px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("assets/images/cont1/cont1_icon1.png");
  background-size: cover;
  background-repeat: no-repeat;
}
#tplContents .tpl-cont p {
  font-size: 1.4rem;
  font-weight: 400;
}
#tplContents .tpl-cont > p {
  margin-top: 22px;
  font-size: 2.6rem;
  line-height: 1.6;
}

/* ============================================================
   contごとの識別用カラー（ダミーデータで画像・タイトルが同一のため、
   どのcontに切り替わったか一目で分かるように暫定的に色分けしている。
   実データ差し替え後は不要になれば削除して構わない）
   ============================================================ */
#tplContents .tpl-cont[name="cont2"] h2 {
  color: #2D6FE0;
}
#tplContents .tpl-cont[name="cont2"] .tpl-thumb,
#tplContents .tpl-cont[name="cont2"] .tpl-inner-ttl img {
  filter: sepia(1) saturate(4) hue-rotate(170deg);
}
#tplContents .tpl-cont[name="cont3"] h2 {
  color: #1FA37A;
}
#tplContents .tpl-cont[name="cont3"] .tpl-thumb,
#tplContents .tpl-cont[name="cont3"] .tpl-inner-ttl img {
  filter: sepia(1) saturate(4) hue-rotate(70deg);
}
#tplContents .tpl-cont[name="cont4"] h2 {
  color: #B0389E;
}
#tplContents .tpl-cont[name="cont4"] .tpl-thumb,
#tplContents .tpl-cont[name="cont4"] .tpl-inner-ttl img {
  filter: sepia(1) saturate(4) hue-rotate(260deg);
}
#tplContents .tpl-cont[name="cont5"] h2 {
  color: #D14343;
}
#tplContents .tpl-cont[name="cont5"] .tpl-thumb,
#tplContents .tpl-cont[name="cont5"] .tpl-inner-ttl img {
  filter: sepia(1) saturate(4) hue-rotate(330deg);
}

/* ============================================================
   商品リスト（タイトル画像・2カラム商品カード・ジャンルタグ）
   ============================================================ */

/* コンテンツ内タイトル画像（inner_ttl） */
#tplContents .tpl-inner-ttl {
  width: 100%;
  max-width: var(--ttl-max);
  margin: 0 auto 30px;
}
#tplContents .tpl-inner-ttl.mt {
  margin-top: 80px;
}
#tplContents .tpl-inner-ttl img {
  max-width: 100%;
}

/* 商品リスト */
#tplContents .tpl-cont ul {
  display: flex;
  width: 100%;
  max-width: var(--content-max);
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 80px auto 0;
}
#tplContents .tpl-cont ul.tpl-items {
  margin: 80px auto 0;
}
#tplContents .tpl-cont.tpl-layout-2col .tpl-item--2col {
  width: 48%;
  margin: 0 0 40px;
  padding: 0;
  text-align: left;
}
#tplContents .tpl-cont .tpl-item--1col {
  width: 100%;
}
#tplContents .tpl-cont .tpl-item--1col.tpl-notice-item {
  margin-bottom: 0;
}
/* 単一カラムが2カラム商品と同じ tpl-items 内に入る場合の区切り余白 */
#tplContents .tpl-cont .tpl-item--1col.tpl-notice-item--with-list {
  margin-bottom: 80px;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-img {
  position: relative;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-thumb {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  transition: .3s;
}
/* ジャンルタグ（XD: 長方形9527　画像の直下に独立して配置。件数に応じて折り返す） */
#tplContents .tpl-cont .tpl-item--2col .tpl-genre-tags,
#tplContents .tpl-notice .tpl-genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-genre-tag,
#tplContents .tpl-notice .tpl-genre-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 35px;
  background: #CBCBCB;
  color: #fff;
  font-size: 1.4rem;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-text,
#tplContents .tpl-notice .tpl-text {
  margin-top: 16px;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-text p,
#tplContents .tpl-notice .tpl-text p {
  margin: 0 0 4px;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-brand,
#tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-name,
#tplContents .tpl-notice .tpl-text .tpl-brand,
#tplContents .tpl-notice .tpl-text .tpl-name {
  font-weight: bold;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-desc,
#tplContents .tpl-notice .tpl-text .tpl-desc {
  margin-bottom: 8px;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-date,
#tplContents .tpl-notice .tpl-text .tpl-date {
  margin-bottom: 0;
}

/* ============================================================
   単一カラムのお知らせ型セクション（cont6: ダブル会員限定抽選会）
   商品リスト（tpl-layout-2col）とは異なり、画像1点＋自由文章のみで構成される
   ============================================================ */
#tplContents .tpl-notice {
  width: 100%;
  max-width: var(--notice-max);
  margin: 0 auto;
  text-align: left;
}
/* 2カラム商品リスト内でも基本は単一カラム幅（1080px）。必要な場合のみ1250pxに拡張する */
#tplContents .tpl-notice-item--width-1250 .tpl-notice {
  max-width: var(--content-max);
}
#tplContents .tpl-notice-img {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}
#tplContents .tpl-notice-text .tpl-notice-line {
  margin: 0 0 8px;
  font-size: 1.4rem;
  line-height: 1.8;
}
#tplContents .tpl-notice .tpl-btn-wrap + .tpl-btn-wrap {
  margin-top: 24px;
}

/* ============================================================
   商品詳細ボタン（詳細はこちら）
   XD: 長方形9524（通常）/9525（hover）・楕円形27/28・多角形2/3 を再現
   幅600pxはグループ12793（幅1251px）の48%＝tpl-item--2col幅と一致するため
   2カラム商品カード幅いっぱいに配置する
   ============================================================ */
.tpl-btn-wrap {
  width: 100%;
  margin-top: 20px;
}
.tpl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 49px;
  position: relative;
  padding: 0 40px;
  border: 2px solid #000000;
  color: #201000;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  transition: .3s ease-out;
}
.tpl-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #000000;
  transition: .3s ease-out;
}
.tpl-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 21px;
  transform: translateY(-50%) rotate(-90deg);
  border-top: 5px solid #fff;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  transition: .3s ease-out;
}
.tpl-btn:hover {
  background: #000000;
  color: #fff;
}
.tpl-btn:hover::before {
  background: #fff;
}
.tpl-btn:hover::after {
  border-top: 5px solid #000000;
}

/* 半分幅ボタン（詳細はこちら） */
.tpl-btn-wrap--half {
  width: 48%;
  margin-top: 12px;
}

/* 半分幅ボタンを左右2カラムで並べる行ラッパー
   PC・SPとも常に左右2カラム（横並び）を維持する（SP用の横並び指定はレスポンシブ側に記載） */
.tpl-btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.tpl-btn-row .tpl-btn-wrap--half {
  margin-top: 0; /* ボタン間の余白は行の gap で管理 */
}

/* ============================================================
   松坂屋オンラインストアボタン（商品カード内・半分幅ボタンの直下）
   .tpl-btn を流用し、幅455pxで配置
   ============================================================ */
.tpl-btn-wrap--online,
.tpl-btn-wrap--app {
  width: 455px;
  max-width: 100%;
  margin-top: 12px;
}
/* ハーフボタン・オンラインストアボタンの改行位置コントロール（flex-wrap: wrap）:
   ボタン文言を <span> で区切ると、1行に収まる間は横並びのまま、
   収まらない幅になったときだけ span の区切り位置で改行される */
.tpl-btn-wrap--half .tpl-btn,
.tpl-btn-wrap--online .tpl-btn {
  height: auto;
  min-height: 49px;
  padding: 8px 40px;
  font-size: 2.4rem;
  line-height: 1.3;
  flex-wrap: wrap;
}

/* ============================================================
   大丸・松坂屋アプリ会員ボタン（商品カード内・オンラインストアボタンの直下）
   XD: 長方形15（455×68px、白塗り/黒枠2px）+ ロゴ画像 + 既存の黒丸・矢印アイコン
   ============================================================ */
.tpl-btn--app {
  height: auto;      /* タイトルが2行になった場合に高さを伸ばす（1行時は min-height により従来と同じ68px） */
  min-height: 68px;
  padding: 0 40px;
}
.tpl-btn-app-logo {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  flex-shrink: 0;
}
.tpl-btn-app-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}
/* タイトルはオンラインストアボタンと同じ改行位置コントロール:
   文言を <span> で区切ると、1行に収まる間は横並びのまま、
   収まらない幅になったときだけ span の区切り位置で改行される */
.tpl-btn-app-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 600;
}
.tpl-btn-app-sub {
  font-size: 1.8rem;
}

/* ============================================================
   リンクバナー（XD: 画像 1・リンクバナー をCSSで再現）
   ============================================================ */
.tpl-link-banner-area {
  width: calc(100% - 60px);
  max-width: var(--banner-max);
  margin: var(--banner-margin);
}
.tpl-link-banner-area--top {
  margin-top: 60px;
}
.tpl-link-banner-area--section {
  margin: 80px auto 0;
}
.tpl-link-banner-area--inline {
  width: 100%;
  margin: 0 auto;
}
.tpl-link-banner-area > * + * {
  margin-top: 30px;
}
.tpl-link-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc(100% - 60px);
  max-width: var(--banner-max);
  aspect-ratio: 1251 / 162;
  height: auto;
  margin: var(--banner-margin);
  border: 1px solid #707070;
  border-radius: 81px;
  background: #CBCBCB;
  overflow: hidden;
  color: #fff;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transition: .3s ease-out;
}
.tpl-link-banner-area .tpl-link-banner {
  width: 100%;
  margin: 0 auto;
}
.tpl-link-banner span {
  display: block;
  width: auto;
  min-width: 298px;
  max-width: calc(100% - 100px);
  height: auto;
  padding: 0;
  color: #fff;
  font: inherit;
  font-size: clamp(3rem, 4vw, 5rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}
.tpl-link-banner:hover {
  opacity: .85;
}
.tpl-link-banner-img {
  display: block;
  width: calc(100% - 60px);
  max-width: var(--banner-max);
  margin: var(--banner-margin);
  transition: .3s ease-out;
}
.tpl-link-banner-area .tpl-link-banner-img {
  width: 100%;
  margin: 0 auto;
}
.tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner,
.tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner-img,
.tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner,
.tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner-img {
  margin-top: 60px;
}
.tpl-link-banner-img img {
  display: block;
  width: 100%;
}
.tpl-link-banner-img:hover {
  opacity: .85;
}
#tplContents .tpl-cont .tpl-item--1col.tpl-link-banner-item {
  width: 100%;
  margin: 40px 0 80px;
}
#tplContents .tpl-cont .tpl-item--1col.tpl-link-banner-item .tpl-link-banner-area {
  max-width: var(--content-max);
}

/* ------------------------------------------------------------
   PC/タブレット幅（769px以上）の左右余白を最低20pxずつ確保する
   ビューポート端に接する最上位コンテナの幅を
   min(100% - 40px, 最大幅) に固定することで、
   ・画面が広いときは従来どおり最大幅を維持（自動余白は20px超）
   ・最大幅に近い中間幅でも左右の余白が必ず20px以上になる
   従来の「width:100% + max-width + margin:auto」だけでは、
   画面幅が「最大幅 〜 最大幅+40px」のときに自動余白が20px未満へ
   痩せる隙間があった（例: コンテンツ1266〜1289px、
   グランドメニュー1026〜1239px）。
   .tpl-notice は常に .tpl-cont ul の内側にあるため、親側の余白で
   自動的に20px以上が確保される（ここでは触れない）。
   スマホ幅（768px以下）は各要素の専用指定が優先されるため影響なし。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  #tplContents .tpl-cont ul {
    width: min(100% - 40px, var(--content-max));
  }
  .tpl-grandmenu ul.tpl-cir {
    width: min(100% - 40px, var(--grandmenu-max));
  }
}

@media screen and (max-width: 1025px) and (min-width: 769px) {
  .tpl-grandmenu ul.tpl-cir {
    grid-template-columns: minmax(0, var(--grandmenu-btn-w));
  }
  .tpl-grandmenu ul.tpl-cir li {
    width: 100%;
    max-width: var(--grandmenu-btn-w);
  }
}

/* ============================================================
   レスポンシブ（スマートフォン：768px以下）

   [clamp() の読み方]
   clamp(最小, 可変vw, 最大) の可変vw は、基本 「最大px ÷ 768 × 100」。
   → 画面幅768pxのとき最大値に到達し、そこから画面幅に比例して縮み、
     最小値で止まる（例: 5.21vw = 40px ÷ 768 × 100）。
   グランドメニューのボタン内だけは XD の SPアートボード基準で「÷ 750」。
   フォントサイズ系は最大値へ到達する幅が個別（「最大px ÷ vw係数 × 100」で逆算できる）。
   ============================================================ */
@media screen and (max-width: 768px) {
  .tpl-page {
    --sp-edge: clamp(14px, 5.21vw, 40px);        /* 画面端の余白（768px時 40px） */
    --sp-narrow-edge: clamp(14px, 3.91vw, 30px); /* 狭めの画面端余白（768px時 30px） */
    --sp-section-y: clamp(48px, 7.82vw, 60px);   /* セクション上下余白（768px時 60px） */
    --sp-list-gap: clamp(28px, 5.21vw, 40px);    /* 商品リストの間隔（768px時 40px） */
  }
  .tpl-page .sp {
    display: block;
  }
  .tpl-page .pc {
    display: none;
  }
  #tplLead {
    max-width: 100%;
    padding: clamp(14px, 3.65vw, 28px) var(--sp-narrow-edge);
  }
  #tplLead .tpl-ttl,
  #tplLead .tpl-kaiki,
  #tplLead .tpl-txt {
    margin: clamp(8px, 1.3vw, 10px) 0;
  }
  #tplLead .tpl-ttl {
    gap: clamp(4px, 1.04vw, 8px);
  }
  #tplLead .tpl-ttl b {
    font-size: clamp(1.7rem, 4.58vw, 2.2rem);
  }
  #tplLead .tpl-kaiki {
    gap: clamp(8px, 2.6vw, 20px);
    line-height: 1.6;
  }
  #tplLead .tpl-txt,
  #tplLead .tpl-kaiki p {
    font-size: clamp(1.1rem, 3.13vw, 1.4rem);
  }
  #tplLead .tpl-sub {
    margin: clamp(18px, 3.26vw, 25px) 0 clamp(12px, 1.95vw, 15px);
    font-size: clamp(.8rem, 2.35vw, .9rem);
    line-height: 1.7;
  }
  .tpl-grandmenu {
    padding: clamp(32px, 5.21vw, 40px) 0;
  }
  .tpl-grandmenu > h2 {
    padding: clamp(36px, 6.51vw, 50px) var(--sp-edge);
    font-size: clamp(1.9rem, 5.21vw, 2.4rem);
    line-height: 1.35;
  }
  .tpl-grandmenu ul.tpl-cir {
    width: calc(100% - 20px);
    max-width: 710px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(10px, 2.67vw, 20px);
    column-gap: clamp(5px, 1.33vw, 10px);
    counter-reset: tpl-menu-number;
  }
  .tpl-grandmenu ul.tpl-cir li {
    counter-increment: tpl-menu-number;
    width: 100%;
    max-width: 350px;
    min-width: 0;
    height: auto;
    aspect-ratio: 350 / 120;
    min-height: 0;
    padding: clamp(12px, 3.73vw, 28px) clamp(6px, 2.13vw, 16px) clamp(4px, 1.07vw, 8px);
    border-radius: 999px;
    align-content: center;
  }
  .tpl-grandmenu ul.tpl-cir li u {
    position: absolute;
    top: calc(clamp(-10px, -1.33vw, -5px) - 4px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(18px, 5.34vw, 40px);
    height: clamp(18px, 5.34vw, 40px);
    text-decoration: none;
  }
  .tpl-grandmenu ul.tpl-cir li u::before {
    content: counter(tpl-menu-number, decimal-leading-zero);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #777;
    border-radius: 4px;
    background: #d9d9d9;
    color: var(--grandmenu-text);
    font-size: clamp(.7rem, 1.87vw, 1.4rem);
    line-height: 1;
  }
  .tpl-grandmenu ul.tpl-cir li.select u::before {
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--btn-txt-active);
  }
  .tpl-grandmenu ul.tpl-cir li i {
    width: 100%;
    font-size: clamp(.7rem, 2.14vw, 1.6rem);
    line-height: 1.15;
    text-align: center;
  }
  .tpl-grandmenu ul.tpl-cir li b {
    padding: 0 4px;
    font-size: clamp(1rem, 3.2vw, 2.4rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  #tplContents .tpl-cont {
    padding: var(--sp-section-y) 0;
  }
  #tplContents .tpl-cont h2 {
    padding: clamp(70px, 11.72vw, 90px) var(--sp-edge) 0;
    font-size: clamp(2rem, 6.25vw, 2.4rem);
    line-height: 1.25;
  }
  #tplContents .tpl-cont h2::before {
    width: clamp(44px, 7.82vw, 60px);
    height: clamp(44px, 7.82vw, 60px);
  }
  #tplContents .tpl-cont p {
    font-size: clamp(1.3rem, 4.58vw, 1.76rem);
    line-height: 1.55;
  }
  #tplContents .tpl-cont > p {
    margin-top: clamp(16px, 2.87vw, 22px);
    padding: 0 var(--sp-narrow-edge);
  }
  #tplContents .tpl-cont ul {
    width: 100%;
    padding: clamp(14px, 2.6vw, 20px);
  }
  #tplContents .tpl-cont ul.tpl-items {
    margin-top: clamp(48px, 10.42vw, 80px);
  }
  #tplContents .tpl-cont.tpl-layout-2col .tpl-item--2col {
    width: 100%;
    margin-bottom: var(--sp-list-gap);
  }
  #tplContents .tpl-inner-ttl {
    padding: 0 clamp(14px, 2.6vw, 20px);
    margin-bottom: clamp(20px, 3.91vw, 30px);
  }
  #tplContents .tpl-inner-ttl.mt {
    margin-top: clamp(44px, 10.42vw, 80px);
  }
  #tplContents .tpl-cont .tpl-item--1col.tpl-notice-item--with-list {
    margin-bottom: clamp(44px, 10.42vw, 80px);
  }
  #tplContents .tpl-cont .tpl-item--2col .tpl-thumb {
    margin-bottom: clamp(8px, 1.3vw, 10px);
  }
  #tplContents .tpl-cont .tpl-item--2col .tpl-genre-tags,
  #tplContents .tpl-notice .tpl-genre-tags {
    gap: clamp(5px, 1.04vw, 8px);
    margin-bottom: clamp(8px, 1.3vw, 10px);
  }
  #tplContents .tpl-cont .tpl-item--2col .tpl-genre-tag,
  #tplContents .tpl-notice .tpl-genre-tag {
    width: auto;
    min-width: clamp(58px, 10.42vw, 80px);
    height: auto;
    min-height: clamp(26px, 4.56vw, 35px);
    padding: 0 clamp(6px, 1.3vw, 10px);
    font-size: clamp(1.1rem, 3.65vw, 1.4rem);
  }
  #tplContents .tpl-cont .tpl-item--2col .tpl-text,
  #tplContents .tpl-notice .tpl-text {
    margin-top: clamp(10px, 2.08vw, 16px);
    font-size: clamp(1.3rem, 3.65vw, 1.4rem);
    line-height: 1.7;
  }
  #tplContents .tpl-cont .tpl-item--2col .tpl-text p,
  #tplContents .tpl-notice .tpl-text p,
  #tplContents .tpl-notice-text .tpl-notice-line {
    font-size: inherit;
    line-height: inherit;
  }
  #tplContents .tpl-notice-img {
    margin-bottom: clamp(20px, 3.91vw, 30px);
  }
  #tplContents .tpl-notice .tpl-btn-wrap + .tpl-btn-wrap {
    margin-top: clamp(18px, 3.13vw, 24px);
  }
  #tplContents .tpl-cont .tpl-item--1col.tpl-link-banner-item {
    margin: clamp(28px, 5.21vw, 40px) 0 clamp(48px, 10.42vw, 80px);
  }
  .tpl-link-banner-area {
    width: calc(100% - (var(--sp-edge) * 2));
    margin: clamp(40px, 7.82vw, 60px) auto clamp(24px, 3.91vw, 30px);
  }
  .tpl-link-banner-area--inline {
    width: 100%;
    margin: 0 auto;
  }
  .tpl-link-banner-area > * + * {
    margin-top: clamp(20px, 3.13vw, 24px);
  }
  .tpl-link-banner {
    width: calc(100% - (var(--sp-edge) * 2));
    height: auto;
    min-height: clamp(50px, 12.5vw, 96px);
    margin: clamp(40px, 7.82vw, 60px) auto clamp(24px, 3.91vw, 30px);
    padding: clamp(8px, 2.08vw, 16px) clamp(18px, 4.17vw, 32px);
    border-radius: 999px;
    font-size: clamp(1.2rem, 3.65vw, 2.8rem);
  }
  .tpl-link-banner-area .tpl-link-banner {
    width: 100%;
    margin: 0 auto;
  }
  .tpl-link-banner span {
    min-width: clamp(140px, 46.6vw, 179px);
    max-width: calc(100% - clamp(32px, 7.82vw, 60px));
    height: auto;
    padding: 0;
    font-size: clamp(1.2rem, 3.65vw, 2.8rem);
    line-height: 1.2;
  }
  .tpl-link-banner-img {
    width: calc(100% - (var(--sp-edge) * 2));
    margin: clamp(40px, 7.82vw, 60px) auto clamp(24px, 3.91vw, 30px);
  }
  .tpl-link-banner-area .tpl-link-banner-img {
    width: 100%;
    margin: 0 auto;
  }
  .tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner,
  .tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner-img,
  .tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner,
  .tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner-img {
    margin-top: clamp(28px, 5.21vw, 40px);
  }
  .tpl-btn-wrap {
    margin-top: clamp(14px, 3.13vw, 20px);
  }
  /* ハーフボタン（1個設置）はSPでも半分幅のまま（基本の width:48% をそのまま適用） */
  /* 2カラム行はSPでも横並びを維持（フルレスポンシブ）。
     gapを差し引いた残りを2列で均等に折半する */
  .tpl-btn-row {
    flex-wrap: nowrap;                     /* 折り返し無効＝縦積みにしない */
    margin-top: clamp(14px, 3.13vw, 20px); /* 既存の上マージンは維持 */
  }
  .tpl-btn-row .tpl-btn-wrap--half {
    flex: 1 1 0;   /* 2列を均等・流動的に維持（折り返さない） */
    width: auto;   /* 基本の width:48% を無効化し、flexの均等配分に任せる */
    min-width: 0;  /* コンテンツ幅以下にも縮小可能にしてはみ出し防止 */
  }
  .tpl-btn {
    height: auto;
    min-height: clamp(40px, 11.46vw, 44px);
    padding: clamp(8px, 2.6vw, 10px) clamp(32px, 10.42vw, 40px);
    font-size: clamp(1.2rem, 3.39vw, 1.3rem);
    line-height: 1.25;
  }
  .tpl-btn::before {
    width: clamp(16px, 5.21vw, 20px);
    height: clamp(16px, 5.21vw, 20px);
    right: clamp(10px, 3.91vw, 15px);
  }
  .tpl-btn::after {
    right: clamp(15px, 5.47vw, 21px);
    border-top-width: clamp(4px, 1.3vw, 5px);
    border-right-width: clamp(2px, .78vw, 3px);
    border-left-width: clamp(2px, .78vw, 3px);
  }
  .tpl-btn-wrap--online,
  .tpl-btn-wrap--app {
    width: 100%;
  }
  .tpl-btn-wrap--half .tpl-btn,
  .tpl-btn-wrap--online .tpl-btn {
    min-height: clamp(44px, 12.76vw, 49px);
    padding: clamp(8px, 2.6vw, 10px) clamp(32px, 10.42vw, 40px);
    font-size: clamp(1.4rem, 5.33vw, 2.4rem);
    line-height: 1.2;
  }
  .tpl-btn--app {
    height: auto;
    min-height: clamp(54px, 15.63vw, 68px);
    padding: clamp(8px, 2.6vw, 10px) clamp(34px, 10.42vw, 40px);
  }
  .tpl-btn-app-logo {
    width: clamp(34px, 10.42vw, 50px);
    height: clamp(34px, 10.42vw, 50px);
    margin-right: clamp(10px, 1.95vw, 15px);
  }
  .tpl-btn-app-title {
    font-size: clamp(1.6rem, 5.33vw, 2.5rem);
  }
  .tpl-btn-app-sub {
    font-size: clamp(1.2rem, 3.91vw, 1.8rem);
  }
}

/* 768px以下でもマウス操作できる環境（狭い PC ウィンドウ等）向けの番号バッジ hover。
   タッチ端末には効かせず、タップ後の select 表示だけを残します */
@media screen and (max-width: 768px) and (hover: hover) and (pointer: fine) {
  .tpl-grandmenu ul.tpl-cir li:hover u::before {
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--btn-txt-active);
  }
}

/* ============================================================
   レトロカワイイ心なごむ郷土玩具と民藝の世界（案件カラー変数・メインビジュアル・TOPリード）
   ▼▼▼ ここから下が【第2部】この案件固有の上書きスタイル ▼▼▼
   XD: TOP / 01_かわいき日本（1600pxアートボード）
   既存テンプレートの汎用スタイル（第1部）を残し、この案件の .tpl-page だけを上書きする。
   ============================================================ */
.tpl-page--retro-mingei {
  --retro-brown: #41231E;
  --retro-red: #EC4A42;
  --retro-gold: #B68E1E;
  --retro-beige: #D6CFC2;
  --retro-title-bg: #FFF7F2;
  --ttl-max: 1077px;
  --grandmenu-btn-w: 490px;
  --grandmenu-max: 1000px;
  color: var(--retro-brown);
  background: #fff;
}

.tpl-page--retro-mingei #tplMain img {
  display: block;
  width: 100%;
}

/* TOP リード */
.tpl-page--retro-mingei #tplLead {
  width: min(100% - 40px, 1000px);
  max-width: 1000px;
  padding: 88px 20px 82px; /* XD実測: 上88px（メインビジュアル下端→リード文タイトル） */
  color: #333; /* XD: タイトル・会期・本文は #333333（注記のみ #231815。下の .tpl-sub 参照） */
}
.tpl-page--retro-mingei #tplLead .tpl-ttl {
  margin-bottom: 22px;
}
.tpl-page--retro-mingei #tplLead .tpl-ttl b {
  font-size: 3.6rem; /* XD: 36px */
  font-weight: 600;
  letter-spacing: .04em;
}
.tpl-page--retro-mingei #tplLead .tpl-kaiki {
  margin-bottom: 28px;
}
.tpl-page--retro-mingei #tplLead .tpl-kaiki p {
  font-size: 1.6rem;
  font-weight: 300; /* XD: Hiragino Sans W3 */
  line-height: 1.56; /* XD: 行送り25 ÷ フォント16px */
}
.tpl-page--retro-mingei #tplLead .tpl-txt {
  margin-bottom: 60px; /* XD: 本文→注記 60px */
  font-size: 1.6rem;
  line-height: 1.56; /* XD: 行送り25 ÷ フォント16px */
}
.tpl-page--retro-mingei #tplLead .tpl-sub {
  color: #231815; /* XD: 注記のみ #231815（#tplLead の #333 を継承させない） */
  font-size: 1rem; /* XD: 10px */
  font-weight: 600; /* XD: Hiragino Sans W6 */
  line-height: 1.8;
}

/* ============================================================
   グランドメニュー（retro-mingei：配色・grid配置・アイコン落下アニメーション）
   XD: TOP / 末尾グランドメニュー
   ============================================================ */
.tpl-page--retro-mingei .tpl-grandmenu {
  padding: 76px 0 90px;
  background-color: #f7f6f4;
  background-image: url("assets/images/top/menu_bg.png");
  background-position: center;
  background-repeat: repeat;
  background-size: 1600px auto;
  color: var(--retro-brown);
}
.tpl-page--retro-mingei .tpl-grandmenu > h2 {
  padding: 0 20px;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--retro-brown);
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir {
  grid-template-columns: repeat(2, var(--grandmenu-btn-w));
  gap: 20px 19px; /* XD(0715版): 列間は上段16px・下段19pxだが同一グリッドのため19pxで統一・行間20px（スタック定義値） */
  width: min(100% - 40px, var(--grandmenu-max));
  max-width: var(--grandmenu-max);
  margin: 60px auto 0;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li {
  width: 100%;
  height: 96px;
  padding: 12px 30px;
  border: 0; /* XD(0715版): 白枠は廃止。ベーステンプレート側の白枠(2px)を打ち消す */
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li u {
  display: block;
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  text-decoration: none;
  transform: none;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li u::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: var(--menu-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li i {
  color: inherit;
  font-size: 1.5rem;
  line-height: 1.15;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li b {
  color: inherit;
  font-size: 2.4rem;
  font-weight: 600; /* XD: Hiragino Sans W6 */
  line-height: 1.15;
}
/* 各ボタンのアイコン画像（--menu-icon は上の u::before で背景画像として参照される） */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute {
  --menu-icon: url("assets/images/top/menu_icon_cute.svg");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute u::before {
  background-size: 90% auto; /* XD: ロゴ実寸 PC31×30・SP36×35(@2x)。ほぼ正方形のSVGはcontainで拡大されるため実寸比に縮小 */
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful {
  --menu-icon: url("assets/images/top/menu_icon_beautiful.svg");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop {
  --menu-icon: url("assets/images/top/menu_icon_workshop.svg");
  --menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.27' height='30' viewBox='0 0 25.27 30'%3E%3Cdefs%3E%3Cstyle%3E.a{fill:%2341231e;}.b{fill:%23fff;}%3C/style%3E%3C/defs%3E%3Cg transform='translate%280 0%29'%3E%3Cpath class='a' d='M21.92,65.931l-.5-.8,0,0-.006-.009c-.543.852-.891,1.405-.891,1.405-2.6,4.127-5.684,11.373-4.392,12.181l.088.059a.379.379,0,0,0,.534-.078l6.595-10.5-.25-.4Z' transform='translate%28-11.871 -48.846%29'/%3E%3Cpath class='a' d='M64.632.634C62.443-.742,59.369.193,57.778,2.72A5.941,5.941,0,0,0,56.852,5.8a3.924,3.924,0,0,1-.612,2.032c-.289.46-.661,1.043-1.067,1.694.039.064.083.127.122.191l.994,1.582c.289.46.583.921.861,1.371a6.227,6.227,0,0,1,4.294-2.252,5.645,5.645,0,0,0,4.274-2.708c1.586-2.526,1.1-5.7-1.087-7.08M63.8,6.509a2.717,2.717,0,0,1-3.613,1.185,2.721,2.721,0,0,1-.5-3.77A2.718,2.718,0,0,1,63.3,2.739a2.072,2.072,0,0,1,.677.7l0,.007a2.333,2.333,0,0,1,.2.435l.006.019A3.115,3.115,0,0,1,63.8,6.509' transform='translate%28-41.38 0.001%29'/%3E%3Cpath class='b' d='M40.485,61.4l.039.059-.03-.069c0,.005,0,.005-.009.01' transform='translate%28-30.364 -46.04%29'/%3E%3Cpath class='a' d='M14.4,14.186c-.686-1.087-1.439-2.291-2.144-3.412-.72-1.141-1.38-2.193-1.851-2.928A3.871,3.871,0,0,1,9.8,5.814a5.951,5.951,0,0,0-.93-3.085A5.588,5.588,0,0,0,4.265.013c-.132,0-.259,0-.392.015a4.19,4.19,0,0,0-1.85.617C-.17,2.02-.655,5.2.936,7.724A5.635,5.635,0,0,0,5.21,10.431a6.384,6.384,0,0,1,4.866,3.021l.661,1.053,2.144,3.417,7.51,11.936a.332.332,0,0,0,.289.152.082.082,0,0,0,.034,0,.444.444,0,0,0,.206-.069l.093-.059c1.292-.808-1.8-8.054-4.4-12.181,0,0-.984-1.567-2.213-3.51M6.459,7.7a2.117,2.117,0,0,1-.925.308c-.064.005-.132.01-.2.01a3.052,3.052,0,0,1-2.492-1.5,2.721,2.721,0,0,1,.5-3.77,2.109,2.109,0,0,1,.93-.3c.064-.005.127-.01.2-.01a3.044,3.044,0,0,1,2.487,1.5,2.716,2.716,0,0,1-.5,3.77m6.218,7.868a.707.707,0,0,1-.1.005,1.163,1.163,0,0,1-.1-2.321c.034,0,.069,0,.1,0a1.162,1.162,0,0,1,.1,2.321' transform='translate%280 -0.01%29'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops {
  --menu-icon: url("assets/images/top/menu_icon_shops.svg");
  --menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='33.281' height='26' viewBox='0 0 33.281 26'%3E%3Cdefs%3E%3Cstyle%3E.a{fill:%2341231e;}.b{clip-path:url%28%23a%29;}%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='33.281' height='26' transform='translate%280 0%29'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate%280 0%29'%3E%3Cg class='b' transform='translate%280 0%29'%3E%3Cpath class='a' d='M27.56,0H5.721L.131,9.315A.914.914,0,0,0,.915,10.7H2.783V26H30.5V10.7h1.868a.913.913,0,0,0,.783-1.383Zm.764,23.826H4.956V10.7H28.324Z' transform='translate%280 0%29'/%3E%3Crect class='a' width='3.623' height='3.623' transform='translate%2810.255 12.957%29'/%3E%3Crect class='a' width='3.623' height='3.623' transform='translate%2819.494 12.957%29'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app {
  --menu-icon: url("assets/images/top/menu_icon_app.svg");
  --menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='23.487' height='30' viewBox='0 0 23.487 30'%3E%3Cdefs%3E%3Cstyle%3E.a{fill:%2341231e;}.b{clip-path:url%28%23a%29;}%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='23.487' height='30'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Cpath class='a' d='M1.9,23.752V5.367H14.484v5.007l0,2.259,0,0v.01a2.609,2.609,0,0,1,.924-.272,2.2,2.2,0,0,1,.225-.187,2.709,2.709,0,0,1,.755-.4V1.927A1.933,1.933,0,0,0,14.461,0H1.927A1.932,1.932,0,0,0,0,1.927V28.069A1.933,1.933,0,0,0,1.927,30H14.461a1.933,1.933,0,0,0,1.927-1.931V26.156a16.47,16.47,0,0,1-5.489-2.4Zm6.3,1.322a1.61,1.61,0,1,1-1.612,1.612,1.611,1.611,0,0,1,1.612-1.612M6.755,2.17H9.628a.464.464,0,1,1,0,.928H6.755a.464.464,0,0,1,0-.928'/%3E%3Cpath class='a' d='M162.32,210.531a12.685,12.685,0,0,0-2.794-6.085l-.6-.8a.069.069,0,0,0-.019-.019,1.545,1.545,0,0,0-1.149-.633.8.8,0,0,0-.5.155.856.856,0,0,0-.319.59c-.006.037-.015.072-.018.111a1.4,1.4,0,0,0-.826-.316.818.818,0,0,0-.5.159.9.9,0,0,0-.333.726h0a.177.177,0,0,0-.032-.018.665.665,0,0,0-.263-.085,1.219,1.219,0,0,0-.412-.08.794.794,0,0,0-.492.159.876.876,0,0,0-.328.7c0,.042-.01.082-.009.126a1.231,1.231,0,0,0-.4-.157.881.881,0,0,0-.244-.033.82.82,0,0,0-.492.155.934.934,0,0,0-.325.835,1.6,1.6,0,0,0,.017.221c-.085-.119-.935-1.26-2.443-3.279l-.356-.478a.058.058,0,0,0-.019-.014,1.539,1.539,0,0,0-1.149-.633.815.815,0,0,0-.5.155,1.272,1.272,0,0,0,0,1.725s0,.009.009.009l4.767,6.38c.206.272.173.534-.1.534a.512.512,0,0,1-.112-.014,4.37,4.37,0,0,1-1.158-.5,1.91,1.91,0,0,0-1.008-.291c-.984,0-1.688.806.08,2.034a17.638,17.638,0,0,0,3.037,1.711,13.116,13.116,0,0,0,1.9.661,7.807,7.807,0,0,0,1.908.286,2.174,2.174,0,0,0,.4-.028.017.017,0,0,0,.014-.005,6.609,6.609,0,0,0,2.662-1.336,7,7,0,0,0,2-2.091.825.825,0,0,0,.117-.455c0-.028-.009-.052-.014-.08' transform='translate%28-138.85 -190.009%29'/%3E%3C/g%3E%3C/svg%3E");
}
/* 下段3つ（workshop・shops・app）のアイコンは mask 描画：SVGは形状としてだけ使い、
   基本色は currentColor（= 文字色）で塗る。PCでは後段の769px以上向けルールで
   純白に固定し、上段2つと同じ落下フェードを適用する。
   mask 画像は data URI で埋め込む（Chrome は mask 画像を CORS 付きで取得するため、
   preview.html を file:// で直接開くと外部URL指定の mask だけ読み込めず
   アイコンが消える。01・02セクションアイコンの mask も同じ理由で埋め込み）。
   元ファイル: assets/images/top/menu_icon_workshop.svg / menu_icon_shops.svg / menu_icon_app.svg
   （SVGを差し替える際は同ファイルを更新のうえ
     node tools/encode-mask-svg.js <SVGファイル> の出力で --menu-icon-mask を再埋め込み） */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop u::before,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops u::before,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app u::before {
  color: inherit; /* SP用 u::before の color: transparent を打ち消して文字色を受け取る */
  background-color: currentColor;
  background-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--menu-icon-mask);
  mask-image: var(--menu-icon-mask);
}
/* 選択中の下段3つは白＋ベージュ縁取りの専用アイコンに差し替える。
   （workshop・shops はXD支給、app は選択状態のデザインが無いため menu_icon_app.svg から生成）
   多色SVGのため mask 描画（単色塗り）を解除して通常の画像表示にする。
   PCでは後段の769px以上向けルールで純白maskへ戻すため、この画像はSP専用となる */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--workshop u::before,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--shops u::before,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--app u::before {
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--workshop u::before {
  background-image: url("assets/images/top/menu_icon_workshop_select.svg");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--shops u::before {
  background-image: url("assets/images/top/menu_icon_shops_select.svg");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--app u::before {
  background-image: url("assets/images/top/menu_icon_app_select.svg");
}
/* 各ボタンの配色（cute は赤地・白文字、beautiful は金地・白文字、下段3つはベージュ地・茶文字） */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app {
  background-color: var(--retro-beige);
  color: var(--retro-brown);
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute {
  background-color: var(--retro-red); /* XD: #EC4A42 */
  color: #fff;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful {
  background-color: var(--retro-gold);
  color: #fff;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop b,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops b,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app b {
  width: auto;
}
/* ボタン内レイアウト（5つ共通: アイコン+サブコピーが横並び / タイトルは2段目） */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item {
  display: grid;
  grid-template-columns: 34px max-content;
  grid-template-rows: 34px auto;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  row-gap: 6px;
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item b {
  grid-column: 1 / -1;
}
/* 選択中（対応セクション表示中）はホバー時と同じ配色で示す。
   タッチ端末でも適用するため media query の外に置く */
/* 上段2つ（cute・beautiful）: 選択中は背景が茶(#41231E)・白文字 */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--cute,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--beautiful {
  background-color: var(--retro-brown);
  color: #fff;
}
/* 下段3つ（workshop・shops・app）: 選択中も背景は変えず、文字だけ白にする。
   アイコンの選択状態はPCアニメーションとSP専用画像の各ルールで処理する */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--workshop,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--shops,
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--app {
  color: #fff;
}
/* SP幅では茶色の _sp アイコンが茶背景に沈むため、選択中は白アイコンへ
   （769px以上では --menu-icon が元々このURLなので実質no-op）。
   SP選択中は愛でる=赤ロゴ・美しき=金ロゴでさらに上書きする（SPブロック内のルール参照） */
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--cute {
  --menu-icon: url("assets/images/top/menu_icon_cute.svg");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--beautiful {
  --menu-icon: url("assets/images/top/menu_icon_beautiful.svg");
}
.tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.is-disabled {
  cursor: default;
}
/* PC版は769px以上で hover を有効にし、768px以下のマウス環境では従来条件を維持する。 */
@media screen and (min-width: 769px), (hover: hover) and (pointer: fine) {
  /* 上段2つ（cute・beautiful）: hover で背景が茶(#41231E)に変化 */
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute:hover,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful:hover {
    background-color: var(--retro-brown);
    color: #fff;
  }
  /* 下段3つ（workshop・shops・app）: 背景は変えず、文字だけ白にする。
     PCアイコンは後段の769px以上向けルールで純白のままフェードインする */
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop:hover,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops:hover,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app:hover {
    color: #fff;
  }
  /* SP幅×マウス環境では茶色の _sp アイコンが茶背景に沈むため、hover 中は白アイコンへ
     （769px以上では --menu-icon が元々このURLなので実質no-op） */
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute:hover {
    --menu-icon: url("assets/images/top/menu_icon_cute.svg");
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful:hover {
    --menu-icon: url("assets/images/top/menu_icon_beautiful.svg");
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.is-disabled:hover {
    filter: none;
  }
}

/* PC版: 5つすべてのロゴを上から落下フェードさせ、
   サブコピーもアイコンの出現に合わせて中央から右へ移動する。 */
@media screen and (min-width: 769px) {
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful {
    grid-template-columns: 32px max-content;
    grid-template-rows: 32px 24px;
    align-content: start;
    column-gap: 8px;
    row-gap: 8px;
    padding: 7px 20px 0;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute u,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful u {
    width: 32px;
    height: 32px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute i,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful i {
    height: 32px;
    font-size: 1.6rem;
    line-height: 32px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute b,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful b {
    line-height: 24px;
  }
  /* 下段3つは長いタイトルの幅から1段目を独立させ、
     アイコンとサブコピーを8px間隔のひとまとまりとして中央配置する */
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app {
    grid-template-columns: 1fr var(--menu-icon-width) 8px max-content 1fr;
    column-gap: 0;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop u,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops u,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app u {
    grid-column: 2;
    grid-row: 1;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop i,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops i,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app i {
    grid-column: 4;
    grid-row: 1;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop {
    --menu-icon-width: 26px;
    --menu-copy-shift: -17px; /* (アイコン幅26px + gap 8px) ÷ 2 */
    grid-template-rows: 30px 24px;
    align-content: start;
    row-gap: 9px;
    padding: 8px 20px 0;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop u {
    width: 26px;
    height: 30px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop i {
    height: 30px;
    font-size: 1.6rem;
    line-height: 30px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops {
    --menu-icon-width: 34px;
    --menu-copy-shift: -21px; /* (アイコン幅34px + gap 8px) ÷ 2 */
    grid-template-rows: 26px 24px;
    align-content: start;
    row-gap: 8px;
    padding: 13px 20px 0;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops u {
    width: 34px;
    height: 26px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops i {
    height: 26px;
    font-size: 1.6rem;
    line-height: 26px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app {
    --menu-icon-width: 23px;
    --menu-copy-shift: -15.5px; /* (アイコン幅23px + gap 8px) ÷ 2 */
    grid-template-rows: 30px 24px;
    align-content: start;
    row-gap: 9px;
    padding: 8px 20px 0; /* --workshop と同値（アイコン高が同じ30pxのため） */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app u {
    width: 23px; /* XD: アイコン実寸 23×30 */
    height: 30px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app i {
    height: 30px;
    font-size: 1.6rem;
    line-height: 30px;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop b,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops b,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app b {
    line-height: 24px;
  }
  /* 下段3つは選択状態を含め、PCでは純白maskに統一する。
     SPでは下段の選択用SVG差し替えをそのまま使用する */
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--workshop u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--shops u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--app u::before {
    background-color: #fff;
    background-image: none;
    -webkit-mask-image: var(--menu-icon-mask);
    mask-image: var(--menu-icon-mask);
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app u::before {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .2s, transform 0s .2s;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item i {
    transform: translateX(var(--menu-copy-shift, -20px));
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute.select u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful.select u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop.select u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops.select u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app.select u::before {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s, transform .2s;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item.select i {
    transform: translateX(0);
  }
}
@media screen and (min-width: 769px) {
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute:hover u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful:hover u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop:hover u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops:hover u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app:hover u::before {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s, transform .2s;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item:hover i {
    transform: translateX(0);
  }
}
@media screen and (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item i {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   コンテンツセクション共通・01_かわいき日本
   （セクションヘッダー・カテゴリー見出し・商品カード・特集ブロック）
   cont2・cont3 の実データ用の上書きは「02_美しき日本 / 03_ワークショップ」を参照
   ============================================================ */
.tpl-page--retro-mingei #tplContents .tpl-cont {
  padding: 0 0 130px;
  color: var(--retro-brown);
}
.tpl-page--retro-mingei .tpl-cont-header {
  width: min(100% - 40px, 1080px);
  margin: 0 auto;
  padding: 194px 0 0;
  text-align: center;
}
.tpl-page--retro-mingei .tpl-cont-icon {
  display: block;
  margin-bottom: 12px;
  color: var(--retro-red);
  font-size: 5.2rem;
  line-height: 1;
}
/* 01のセクションアイコンは花形ロゴSVG（元ファイル: menu_icon_cute.svg）を
   赤(--retro-red)でマスク表示（02の金色マスクと同方式）。
   data URI 埋め込みの理由はグランドメニュー下段アイコンのコメント参照 */
.tpl-page--retro-mingei #tplContents .tpl-cont--cute .tpl-cont-icon {
  display: block;
  width: 67px; /* XD: 01アイコン実寸 67×65 */
  height: 65px;
  margin: 0 auto 50px; /* XD: アイコン下端→見出し 50px */
  background-color: var(--retro-red); /* XD: #EC4A42 */
  --cont-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30.702' height='30' viewBox='0 0 30.702 30'%3E%3Cdefs%3E%3Cstyle%3E.a{fill:%23fff;}.b{clip-path:url%28%23a%29;}%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='30.702' height='30' transform='translate%280 0%29'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate%280 0%29'%3E%3Cg class='b' transform='translate%280 0%29'%3E%3Cpath class='a' d='M30.3,10.859h0a8.179,8.179,0,0,0-7.311-5.653,8.2,8.2,0,0,0-15.271,0A8.2,8.2,0,0,0,3,19.732,8.2,8.2,0,0,0,15.351,28.7,8.2,8.2,0,0,0,27.7,19.732,8.179,8.179,0,0,0,30.3,10.859m-3.789,8.058-.4.294.154.475a6.823,6.823,0,0,1-10.5,7.628l-.4-.294-.4.294a6.823,6.823,0,0,1-10.5-7.628l.155-.475-.4-.294A6.827,6.827,0,0,1,8.2,6.567h.5l.155-.475a6.826,6.826,0,0,1,12.984,0L22,6.567h.5a6.808,6.808,0,0,1,6.491,4.717h0a6.809,6.809,0,0,1-2.481,7.633' transform='translate%280 0%29'/%3E%3Cpath class='a' d='M43.286,23.688A1.486,1.486,0,1,0,41.8,25.173a1.486,1.486,0,0,0,1.486-1.486' transform='translate%28-26.45 -14.566%29'/%3E%3Cpath class='a' d='M33.836,30.741a1.486,1.486,0,1,0-1.872.954,1.486,1.486,0,0,0,1.872-.954' transform='translate%28-20.297 -18.892%29'/%3E%3Cpath class='a' d='M36.671,40.039A1.486,1.486,0,1,0,37,42.114a1.486,1.486,0,0,0-.329-2.075' transform='translate%28-22.511 -26.082%29'/%3E%3Cpath class='a' d='M46.389,40.215a1.486,1.486,0,1,0,2.075.329,1.486,1.486,0,0,0-2.075-.329' transform='translate%28-30.033 -26.198%29'/%3E%3Cpath class='a' d='M50.512,29.155a1.486,1.486,0,1,0,1.872.954,1.486,1.486,0,0,0-1.872-.954' transform='translate%28-32.466 -19.08%29'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--cont-icon-mask) center / contain no-repeat;
  mask: var(--cont-icon-mask) center / contain no-repeat;
  line-height: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--cute .tpl-cont-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont-header h2 {
  margin: 0;
  padding: 0;
  color: #333; /* XD: 01の見出しは02・03と同一スタイル（#333333） */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; /* XD: Hiragino Sans */
  font-size: 4.9rem; /* XD: 49px */
  font-weight: 600;
  line-height: 1;
}
.tpl-page--retro-mingei #tplContents .tpl-cont-header h2::before {
  display: none;
  content: none;
}
.tpl-page--retro-mingei #tplContents .tpl-cont-header p {
  margin-top: 40px; /* XD: 見出し→リード文 40px */
  padding: 0;
  color: #333; /* XD: 01のリード文は02・03と同一スタイル（#333333） */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; /* XD: Hiragino Sans */
  font-size: 2.6rem; /* XD: 26px */
  font-weight: 300; /* XD: Hiragino Sans W3 */
  line-height: 1.92; /* XD: 行送り50 ÷ フォント26px */
}
.tpl-page--retro-mingei .tpl-category {
  margin-top: 100px;
}
.tpl-page--retro-mingei .tpl-category-title {
  display: block;
  width: min(100% - 40px, var(--ttl-max));
  margin: 0 auto;
}
.tpl-page--retro-mingei .tpl-category-title picture,
.tpl-page--retro-mingei .tpl-category-title img {
  display: block;
  width: 100%;
}
.tpl-page--retro-mingei .tpl-category-title img {
  height: auto;
}
.tpl-page--retro-mingei .tpl-category-intro-img,
.tpl-page--retro-mingei .tpl-category-intro-placeholder {
  display: block;
  width: min(100% - 40px, 1080px);
  margin: 42px auto 0;
}
.tpl-page--retro-mingei .tpl-category-intro-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  background: #d7d7d7;
  color: #777;
  font-size: 1.8rem;
  letter-spacing: .08em;
}
/* XD実測：カテゴリー見出しの下端から、直後のコンテンツまで80px
   （cont1〜cont3 共通。詳細度が高いため各セクションの margin-top 指定より優先される） */
.tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + .tpl-category-intro-img,
.tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + .tpl-category-intro-placeholder,
.tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + ul.tpl-items,
.tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + .tpl-feature-body {
  margin-top: 80px;
}
.tpl-page--retro-mingei #tplContents .tpl-cont ul.tpl-product-grid {
  width: min(100% - 40px, var(--content-max));
  max-width: var(--content-max);
  margin: 50px auto 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont.tpl-layout-2col .tpl-product-card {
  width: 48%;
  margin-bottom: 80px; /* XD: カードの行間80px（スタック定義値） */
}
.tpl-page--retro-mingei .tpl-product-card .tpl-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
}
.tpl-page--retro-mingei .tpl-product-card .tpl-thumb {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.tpl-page--retro-mingei .tpl-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  color: #666;
  font-size: 1.7rem;
  letter-spacing: .08em;
}
.tpl-page--retro-mingei #tplContents .tpl-product-card .tpl-text,
.tpl-page--retro-mingei .tpl-feature-text {
  margin-top: 20px; /* XD: 画像→テキスト 20px（スタック定義値） */
  color: #333; /* XD: #333333 */
  font-size: 1.4rem; /* XD: 14px（02・03と同一） */
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3（商品名含めカード全文 W3） */
  line-height: 1.57; /* XD: 行送り22 ÷ フォント14px */
  text-align: left;
}
.tpl-page--retro-mingei #tplContents .tpl-product-card .tpl-text p,
.tpl-page--retro-mingei .tpl-feature-text p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
/* 基本テンプレートの #tplContents .tpl-cont p（font-weight: 400、ID入り）が
   上の IDなしセレクタに詳細度で勝ち、フォトスポット・カプセルトイの本文が
   W3 にならないため、font-weight だけ ID を足して上書きする
   （font-size 等は基本側の SP用 clamp 指定を生かすので触らない） */
.tpl-page--retro-mingei #tplContents .tpl-feature-text p {
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3 */
}
/* .tpl-text を挟んで基本テンプレート側の .tpl-name 太字（font-weight: bold）より
   詳細度を上げて打ち消す。XD では商品名もカード本文と同じ W3 */
.tpl-page--retro-mingei #tplContents .tpl-product-card .tpl-text .tpl-name,
.tpl-page--retro-mingei .tpl-feature-text .tpl-name {
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3 */
}
.tpl-page--retro-mingei #tplContents .tpl-product-card .tpl-desc,
.tpl-page--retro-mingei .tpl-feature-text .tpl-desc {
  margin-top: 4px;
}
.tpl-page--retro-mingei #tplContents .tpl-product-card .tpl-desc {
  overflow-wrap: anywhere;
}
.tpl-page--retro-mingei #tplContents .tpl-product-card .tpl-note {
  margin-top: 4px;
  font-size: 1.3rem;
}
.tpl-page--retro-mingei .tpl-feature-body {
  width: min(100% - 40px, 1080px);
  margin: 42px auto 0;
}
.tpl-page--retro-mingei .tpl-feature-img {
  display: block;
  width: 100%;
}
.tpl-page--retro-mingei .tpl-feature-text {
  margin-top: 40px; /* XD: 特集ブロックの画像→テキスト 40px */
}

/* 第1部にある同宣言のタブレット幅指定（1列化）の再掲。
   retro側の grid-template-columns 指定（.tpl-page--retro-mingei 付き）が
   第1部のメディアクエリ内指定より詳細度で勝ってしまうため、
   同じ詳細度でもう一度上書きする必要がある（削除すると2列のままになる） */
@media screen and (max-width: 1025px) and (min-width: 769px) {
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir {
    grid-template-columns: minmax(0, var(--grandmenu-btn-w));
  }
}

/* ============================================================
   レスポンシブ（retro-mingei：768px以下）
   TOPリード・グランドメニュー・コンテンツ共通・01_かわいき日本のSP上書き。
   clamp() の読み方は第1部の「レスポンシブ」バナーを参照。
   cont2・cont3 のSPは「02_美しき日本 / 03_ワークショップ」内に別途あり。
   ============================================================ */
@media screen and (max-width: 768px) {
  .tpl-page--retro-mingei #tplLead {
    width: 100%;
    padding: clamp(15px, 4vw, 30px) clamp(10px, 2.67vw, 20px) clamp(30px, 8vw, 60px); /* XD SP: 上30px・左右20px・下60px(@2x) */
  }
  .tpl-page--retro-mingei #tplLead .tpl-ttl {
    margin: 0 0 clamp(25px, 6.67vw, 50px); /* XD SP: タイトル→会期 50px(@2x)。汎用SPの上marginも解除 */
  }
  .tpl-page--retro-mingei #tplLead .tpl-ttl b {
    font-size: clamp(1.8rem, 4.8vw, 3.6rem); /* XD SP: 36px(@2x) */
    line-height: 1.11; /* XD SP: 行送り40px ÷ 36px */
  }
  .tpl-page--retro-mingei #tplLead .tpl-kaiki {
    margin: 0 0 clamp(13px, 3.33vw, 25px); /* XD SP: 会期→本文 25px(@2x) */
  }
  .tpl-page--retro-mingei #tplLead .tpl-kaiki p,
  .tpl-page--retro-mingei #tplLead .tpl-txt {
    font-size: clamp(1.1rem, 2.13vw, 1.6rem); /* XD SP: 16px(@2x)、可読性の下限1.1rem */
  }
  .tpl-page--retro-mingei #tplLead .tpl-txt {
    margin: 0 0 clamp(13px, 3.33vw, 25px); /* XD SP: 本文→注記 25px(@2x) */
    font-weight: 600; /* XD SP: Hiragino Sans W6 */
  }
  .tpl-page--retro-mingei #tplLead .tpl-sub {
    margin: 0; /* XD SP: stack間隔は直前要素のmarginへ一本化 */
    font-size: clamp(.8rem, 1.2vw, .9rem); /* XD SP: 9px(@2x)、可読性の下限.8rem */
    line-height: 1.67; /* XD SP: 行送り15px ÷ 9px */
  }
  .tpl-page--retro-mingei .tpl-grandmenu {
    padding: clamp(40px, 10.67vw, 80px) 0 clamp(30px, 8.13vw, 61px); /* XD SP: 上80px・下61px(@2x) */
    background-size: 800px auto;
  }
  .tpl-page--retro-mingei .tpl-grandmenu > h2 {
    padding: 0 clamp(10px, 2.67vw, 20px); /* XD SP: 左右20px(@2x) */
    font-size: clamp(1.8rem, 4.8vw, 3.6rem); /* XD SP: 36px(@2x) */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(10px, 2.67vw, 20px); /* XD SP: ピル間の行余白20px(@2x)＝スタック間隔10+下段ロゴのはみ出し帯10 */
    column-gap: clamp(5px, 1.33vw, 10px); /* XD SP: 列gap 10px(@2x) */
    width: calc(100% - clamp(20px, 5.33vw, 40px)); /* XD SP: 左右20px(@2x) */
    margin-top: clamp(20px, 5.33vw, 40px); /* XD SP: 見出し→ボタン群 40px(@2x) */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 350 / 120;
    padding: clamp(8px, 2.13vw, 16px) clamp(10px, 2.67vw, 20px); /* XD SP: 上下16px・左右20px(@2x) */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--cute {
    --menu-icon: url("assets/images/top/menu_icon_cute_sp.svg"); /* XD SP: 茶色の花形ロゴ */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--beautiful {
    --menu-icon: url("assets/images/top/menu_icon_beautiful_sp.svg"); /* XD SP: 茶色の星形ロゴ */
  }
  /* SPの選択中は茶背景(#41231E)に対し、愛でる=赤ロゴ(#EC4A42)・美しき=金ロゴ(#B68E1E)。
     全幅共通の「選択中は白アイコン」ルールをSPだけ上書きする */
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--cute {
    --menu-icon: url("assets/images/top/menu_icon_cute_sp_red.svg");
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li.select.tpl-menu-item--beautiful {
    --menu-icon: url("assets/images/top/menu_icon_beautiful_sp_gold.svg");
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li u {
    position: absolute;
    top: clamp(-10px, -1.33vw, -5px); /* XD SP: ピル上端(y10)よりロゴ上端(y0)を10px上へ配置(@2x) */
    left: 50%;
    width: clamp(18px, 5.33vw, 40px);
    height: clamp(18px, 5.33vw, 40px);
    transform: translateX(-50%);
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li u::before {
    display: block;
    content: "";
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: var(--menu-icon);
    background-position: center top; /* XD SP: 5種ともロゴ実体の上端を同じy位置に揃える */
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
  }
  /* 下段3つは mask 描画（色は文字色に追従）のため、mask 側も同じ上端揃えにする */
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--workshop u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--shops u::before,
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item--app u::before {
    -webkit-mask-position: center top;
    mask-position: center top;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item {
    grid-template-columns: 1fr; /* XD SP: アイコン・サブコピー・ラベルを1列で縦積み */
    grid-template-rows: clamp(18px, 5.33vw, 40px) auto auto; /* XD SP: アイコン高40px(@2x) */
    align-content: center;
    justify-items: center;
    row-gap: clamp(2px, .67vw, 5px); /* XD SP: アイコン→サブコピー 5px(@2x) */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item i {
    grid-row: 2; /* 絶対配置したロゴ用の空き行を保持し、下のtransformでXD位置へ補正 */
    transform: translateY(clamp(-9.5px, -1.27vw, -4.75px)); /* XD SP: y35px(@2x)。ロゴと密着するため+8px(@2x)下げて調整 */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir .tpl-menu-item b {
    grid-column: auto; /* PC用の全列指定をSPで解除 */
    grid-row: 3;
    margin-top: clamp(1px, .67vw, 5px); /* XD SP: サブコピー→ラベルはrow-gapと合計10px(@2x) */
    transform: translateY(clamp(-17.5px, -2.33vw, -8.75px)); /* XD SP: y61px(@2x)。サブコピーと同量+8px(@2x)下げて間隔を維持 */
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li i {
    width: auto;
    font-size: clamp(.65rem, 2.13vw, 1.6rem); /* XD SP: 16px(@2x) */
    line-height: 1.38; /* XD SP: 行送り22px ÷ 16px */
    transform: none;
  }
  .tpl-page--retro-mingei .tpl-grandmenu ul.tpl-cir li b {
    padding: 0;
    font-size: clamp(1rem, 3.2vw, 2.4rem); /* XD SP: 24px(@2x) */
    line-height: 1.42; /* XD SP: 行送り34px ÷ 24px */
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont {
    padding-bottom: clamp(70px, 16.93vw, 130px);
  }
  .tpl-page--retro-mingei .tpl-cont-header {
    width: calc(100% - (var(--sp-edge) * 2));
    padding-top: clamp(54px, 11.2vw, 86px);
  }
  .tpl-page--retro-mingei .tpl-cont-icon {
    font-size: clamp(3.4rem, 9.07vw, 5.2rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--cute .tpl-cont-icon {
    width: clamp(40px, 8.72vw, 67px); /* 02・03のSPアイコンと同比率（最大値=PC実寸、min≒最大×0.6） */
    height: clamp(39px, 8.53vw, 65px);
    margin-bottom: clamp(18px, 6.51vw, 50px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont-header h2 {
    font-size: clamp(2.8rem, 6.4vw, 4.9rem); /* 02・03のSP見出しと同一 */
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont-header p {
    margin-top: clamp(16px, 5.21vw, 40px); /* 02・03のSPリード文と同一 */
    font-size: clamp(1.4rem, 3.39vw, 2.6rem);
  }
  .tpl-page--retro-mingei .tpl-category {
    margin-top: clamp(58px, 13.07vw, 100px);
  }
  .tpl-page--retro-mingei .tpl-category-title {
    width: calc(100% - 40px);
  }
  .tpl-page--retro-mingei .tpl-category-intro-img,
  .tpl-page--retro-mingei .tpl-category-intro-placeholder,
  .tpl-page--retro-mingei .tpl-feature-body {
    width: calc(100% - 40px);
    margin-top: clamp(24px, 5.47vw, 42px);
  }
  /* カテゴリー見出し直下の余白80px（PC側参照）のSP版 */
  .tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + .tpl-category-intro-img,
  .tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + .tpl-category-intro-placeholder,
  .tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + ul.tpl-items,
  .tpl-page--retro-mingei #tplContents .tpl-category > .tpl-category-title + .tpl-feature-body {
    margin-top: clamp(40px, 10.42vw, 80px);
  }
  .tpl-page--retro-mingei .tpl-category-intro-placeholder {
    font-size: clamp(1.2rem, 3.47vw, 1.7rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont ul.tpl-product-grid {
    width: calc(100% - 40px);
    margin-top: clamp(28px, 6.51vw, 50px);
    padding: 0;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont.tpl-layout-2col .tpl-product-card {
    width: 100%;
    margin-bottom: clamp(36px, 7.29vw, 56px);
  }
  .tpl-page--retro-mingei .tpl-img--placeholder {
    font-size: clamp(1.2rem, 3.47vw, 1.7rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-product-card .tpl-text,
  .tpl-page--retro-mingei .tpl-feature-text {
    margin-top: clamp(10px, 2.08vw, 16px);
    font-size: clamp(1.2rem, 3.47vw, 1.4rem); /* 02・03のSPカード本文と同一 */
  }
}

/* ============================================================
   02_美しき日本 / 03_ワークショップ
   XD実データ用。cont1へ影響させないため修飾クラス内だけに限定する。
   両セクションで同じ値のルールは :is(.tpl-cont--beautiful, .tpl-cont--workshop)
   でまとめている（:is() の詳細度は引数の最大値＝単一クラスなので、
   2行のセレクタ列挙と完全に同じ詳細度。片方だけ値が違うものは個別に上書き）。
   ============================================================ */

/* セクションヘッダー */
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-header {
  width: min(100% - 40px, 1080px);
  margin: 0 auto;
  text-align: center;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-cont-header {
  padding-top: 194px;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-cont-header {
  padding-top: 211px;
}
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-icon {
  display: block;
  width: 57px;
  height: 65px;
  margin: 0 auto 50px;
  line-height: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-cont-icon {
  width: 55px;
}
/* 02のセクションアイコンは星形ロゴSVG（元ファイル: menu_icon_beautiful.svg）を
   金(--retro-gold)でマスク表示。data URI 埋め込みの理由は
   グランドメニュー下段アイコンのコメント参照 */
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-cont-icon {
  background-color: var(--retro-gold);
  --cont-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='27.831' height='32' viewBox='0 0 27.831 32'%3E%3Cdefs%3E%3Cstyle%3E.a{fill:%23fff;}.b{clip-path:url%28%23a%29;}%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='27.831' height='32'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate%280 0%29'%3E%3Cg class='b' transform='translate%280 0%29'%3E%3Cpath class='a' d='M27.828,23.706a.572.572,0,0,0-.044-.144c0-.009-.005-.02-.011-.029L23.424,16l4.349-7.535c.005-.009.006-.019.011-.029a.572.572,0,0,0,.044-.144.432.432,0,0,0,0-.072.444.444,0,0,0-.007-.079c0-.01,0-.02,0-.03s-.013-.025-.018-.039A.5.5,0,0,0,27.769,8a.464.464,0,0,0-.045-.064c-.009-.011-.015-.025-.025-.035s-.017-.011-.024-.017a.421.421,0,0,0-.064-.046.354.354,0,0,0-.134-.056.436.436,0,0,0-.078-.013c-.01,0-.019,0-.029,0h-8.7L14.319.229C14.314.22,14.305.214,14.3.205a.462.462,0,0,0-.05-.06A.447.447,0,0,0,14.2.1a.452.452,0,0,0-.063-.039.457.457,0,0,0-.07-.032c-.01,0-.018-.01-.028-.013a.433.433,0,0,0-.044,0,.414.414,0,0,0-.153,0,.416.416,0,0,0-.044,0c-.01,0-.018.009-.028.013a.46.46,0,0,0-.07.032.437.437,0,0,0-.062.039.456.456,0,0,0-.054.05.459.459,0,0,0-.049.06c-.006.008-.014.014-.019.023L9.162,7.764H.461c-.01,0-.019,0-.029,0a.512.512,0,0,0-.08.013A.493.493,0,0,0,.285,7.8a.421.421,0,0,0-.066.035.431.431,0,0,0-.063.045c-.008.007-.017.01-.025.017s-.016.024-.025.035A.463.463,0,0,0,.061,8a.5.5,0,0,0-.032.071c0,.014-.014.025-.018.039s0,.02,0,.03A.444.444,0,0,0,0,8.217.468.468,0,0,0,0,8.29a.45.45,0,0,0,.017.072.45.45,0,0,0,.027.072c0,.009.006.02.011.029L4.406,16,.057,23.533c0,.009-.006.019-.011.029a.449.449,0,0,0-.027.072A.45.45,0,0,0,0,23.706a.468.468,0,0,0,0,.072.444.444,0,0,0,.008.079c0,.01,0,.02,0,.03s.013.025.018.039A.5.5,0,0,0,.061,24a.463.463,0,0,0,.045.064c.009.011.015.025.025.035s.015.008.021.014a.45.45,0,0,0,.1.067A.432.432,0,0,0,.3,24.2a.463.463,0,0,0,.165.032h8.7l4.351,7.535c.006.011.015.019.022.029a.425.425,0,0,0,.031.04.459.459,0,0,0,.068.064c.012.009.023.019.036.027a.471.471,0,0,0,.123.056l0,0a.468.468,0,0,0,.241,0l0,0a.476.476,0,0,0,.123-.056c.013-.008.024-.018.036-.027a.475.475,0,0,0,.068-.064.421.421,0,0,0,.03-.04c.007-.01.016-.018.022-.029l4.349-7.535h8.7a.462.462,0,0,0,.164-.032.475.475,0,0,0,.043-.023.45.45,0,0,0,.1-.067c.007-.006.015-.008.021-.014s.016-.024.025-.035A.463.463,0,0,0,27.769,24a.5.5,0,0,0,.032-.071c0-.014.014-.025.018-.039s0-.02,0-.03a.444.444,0,0,0,.007-.079.432.432,0,0,0,0-.072M2.2,23.3,8.53,19.646l4.055-2.341L9.1,23.3ZM1.734,9.5l10.439,6.029H5.214Zm12.647,4.71V2.2L17.86,8.229Zm1.274,2.251h6.962l3.48,6.029Zm6.962-.932H15.655L26.1,9.5Zm-7.468-.785L18.667,8.7H25.63Zm-1.7-.49L9.97,8.23,13.449,2.2ZM9.162,8.7l3.482,6.031L2.2,8.7ZM5.214,16.464h6.964L1.734,22.493Zm7.682,2.16.553-.95v12.12L9.937,23.709Zm1.485-.886,3.48,6.028-3.48,6.028ZM18.668,23.3l-3.48-6.029L25.63,23.3Z' transform='translate%280 0%29'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--cont-icon-mask) center / contain no-repeat;
  mask: var(--cont-icon-mask) center / contain no-repeat;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-cont-icon-img {
  opacity: 0;
}
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-header h2 {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; /* XD: Hiragino Sans */
  font-size: 4.9rem; /* XD: 49px */
  font-weight: 600; /* XD: Hiragino Sans W6 */
  line-height: 1;
}
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-header p {
  margin-top: 40px;
  padding: 0;
  color: #333;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; /* XD: Hiragino Sans */
  font-size: 2.6rem; /* XD: 26px */
  font-weight: 300; /* XD: Hiragino Sans W3 */
  line-height: 1.92; /* XD: 行送り50 ÷ フォント26px */
}

/* 既存のcont2・cont3識別用filterは残し、実データだけ元の色で表示する。 */
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-thumb,
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-inner-ttl img,
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-category-intro-img,
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-img {
  filter: none;
}

/* 02_美しき日本：最大1077pxの見出し画像、1080×540導入画像 */
.tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-category {
  margin-top: 100px;
}
/* 03のみカテゴリーの上余白が広い（XD実測: 約117px。02は100pxのまま） */
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-category {
  margin-top: 117px;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-category-intro-img {
  display: block;
  width: min(100% - 40px, 1080px);
  aspect-ratio: 2 / 1;
  margin: 42px auto 0;
  object-fit: cover;
}

/* 02_美しき日本：1250px内に600px角を2列（列間50px） */
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful ul.tpl-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 50px;
  row-gap: 80px; /* XD: カードの行間80px（スタック定義値） */
  align-items: start;
  width: min(100% - 40px, var(--content-max));
  max-width: var(--content-max);
  margin: 50px auto 0;
  padding: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful.tpl-layout-2col .tpl-product-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-thumb {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-text {
  margin-top: 20px; /* XD: 画像→テキスト 20px（スタック定義値） */
  color: #333; /* XD: #333333 */
  font-size: 1.4rem; /* XD: 14px */
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3 */
  line-height: 1.57; /* XD: 行送り22 ÷ フォント14px */
  text-align: left;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-text p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-desc,
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-history-title {
  margin-top: 4px;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-history-title {
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3 */
}

/* 前期・後期バッジ：XD 82×32px */
.tpl-page--retro-mingei #tplContents .tpl-cont--cute .tpl-period-badge,
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-period-badge {
  display: block;
  width: 82px;
  height: auto;
  margin-top: 20px; /* XD: 画像→バッジ 20px（スタック定義値） */
}
.tpl-page--retro-mingei #tplContents .tpl-cont--cute .tpl-period-badge + .tpl-text,
.tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-period-badge + .tpl-text {
  margin-top: 20px; /* XD: バッジ→テキスト 20px（スタック定義値） */
}

/* 03_ワークショップ：最大1080pxの1列 */
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop ul.tpl-workshop-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 80px;
  width: min(100% - 40px, 1080px);
  max-width: 1080px;
  margin: 50px auto 0;
  padding: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  margin: 0;
  object-fit: cover;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-card .tpl-text {
  margin-top: 40px; /* XD: 画像→テキスト 40px（スタック定義値。03のみ40px） */
  color: #333; /* XD: #333333 */
  font-size: 1.4rem; /* XD: 14px */
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3（タイトル行含め全文 W3） */
  line-height: 1.57; /* XD: 行送り22 ÷ フォント14px */
  text-align: left;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-card .tpl-text p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-card .tpl-name {
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3 */
}
.tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-card .tpl-desc {
  margin-top: 0; /* XD: タイトル→説明の段落間スペースなし（行送り22px一律） */
}

@media screen and (max-width: 768px) {
  .tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-header {
    width: calc(100% - 40px);
    padding-top: clamp(72px, 16vw, 123px);
  }
  .tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-icon {
    width: clamp(34px, 7.47vw, 57px);
    height: clamp(39px, 8.53vw, 65px);
    margin-bottom: clamp(18px, 6.51vw, 50px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-cont-icon {
    width: clamp(33px, 7.2vw, 55px);
  }
  .tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-header h2 {
    font-size: clamp(2.8rem, 6.4vw, 4.9rem);
  }
  .tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-cont-header p {
    margin-top: clamp(16px, 5.21vw, 40px);
    font-size: clamp(1.4rem, 3.39vw, 2.6rem);
  }
  .tpl-page--retro-mingei #tplContents :is(.tpl-cont--beautiful, .tpl-cont--workshop) .tpl-category {
    margin-top: clamp(58px, 13.07vw, 100px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-category-intro-img {
    width: calc(100% - 40px);
    margin-top: clamp(24px, 5.47vw, 42px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--beautiful ul.tpl-product-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 7.29vw, 56px);
    width: calc(100% - 40px);
    margin-top: clamp(28px, 6.51vw, 50px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--beautiful.tpl-layout-2col .tpl-product-card {
    width: 100%;
    margin: 0;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-product-card .tpl-text,
  .tpl-page--retro-mingei #tplContents .tpl-cont--workshop .tpl-workshop-card .tpl-text {
    margin-top: clamp(10px, 2.08vw, 16px);
    font-size: clamp(1.2rem, 3.47vw, 1.4rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--cute .tpl-period-badge,
  .tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-period-badge {
    width: clamp(64px, 10.67vw, 82px);
    height: auto;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--cute .tpl-period-badge + .tpl-text,
  .tpl-page--retro-mingei #tplContents .tpl-cont--beautiful .tpl-period-badge + .tpl-text {
    margin-top: 8px;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--workshop ul.tpl-workshop-list {
    width: calc(100% - 40px);
    margin-top: clamp(28px, 6.51vw, 50px);
    row-gap: clamp(40px, 10.42vw, 80px);
  }
}

/* ============================================================
   04_出店舗リスト
   XD: 04_出店舗リスト（1600pxアートボード。CSSは1:1で対応）
   会期バー（通期/前期/後期）＋2列の店舗名リストだけで構成されるセクション。
   画像は使わず、セクションアイコンはグランドメニューと共用の
   assets/images/top/menu_icon_shops.svg（fill #41231e）をそのまま表示する。
   すべて .tpl-cont--shops / .tpl-shop-* にスコープし、cont1〜cont3 には影響させない。
   ============================================================ */
.tpl-page--retro-mingei #tplContents .tpl-cont--shops {
  --shop-max: 980px;      /* XD: 会期バー・店舗リストの共通幅980px */
  /* 見出し1行目を折り返さない幅。XD実測は1122px（Hiragino Sans）だが、
     Hiragino不在の環境では全角23字がそのまま 23×49px＝1127px になるため、
     どちらでも折り返さないよう1150pxにしている。中身は中央寄せなので
     この値を広げても見た目の位置は動かない */
  --shop-ttl-max: 1150px;
}

/* セクションヘッダー（アイコン＋2行見出し） */
.tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-header {
  width: min(100% - 40px, var(--shop-ttl-max)); /* 汎用の1080pxだと1122pxの見出しが折り返す */
  margin: 0 auto;
  padding-top: 194px; /* cont1・cont2 と同値（XD 04単体では共通ヘッダーから212px） */
  text-align: center;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-icon {
  width: 77px;  /* XD: アイコン実寸 77×60 */
  height: 60px;
  margin: 0 auto 55px; /* XD: アイコン下端→見出し 55px（スタック定義値） */
  line-height: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none; /* 第1部の cont4 ダミー識別filterを明示的に打ち消す */
}
/* 見出し1行目は全角23字あり、49pxだと約1127px必要になる。
   そのため「1行に収まる限界までXD実寸の4.9rem（49px）を保ち、それより狭い幅では
   1行に収まるサイズへ追従させる」形にしている。cont1〜cont3 の見出しは短いため
   4.9rem固定だが、この見出しだけは可変部が必要。
   可変部 4.3vw - 2.4px は、使える幅（100% - 40px ＝ スクロールバー15pxを含めて
   おおよそ vw - 55px）を全角23字ぶんの字幅で割った一次式に約1%の余裕を足した値。
   会期バーのSP指定と同じ「vw − px」形式で、49pxに達するのは約1195px以上。 */
.tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-header h2 {
  color: #333; /* XD: #333333。第1部の cont4 ダミー識別カラーを明示的に打ち消す */
  font-size: min(4.9rem, 4.3vw - 2.4px); /* XD: 49px */
  line-height: 1.43; /* XD: 行送り70 ÷ フォント49px */
}
.tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-subttl {
  display: block;
  font-size: .8163em; /* XD: 40px ÷ 49px（1行目のサイズに追従させる） */
  line-height: 1.75;  /* XD: 行送り70 ÷ フォント40px */
}

/* 会期ブロック（バー＋店舗リストの1セット） */
.tpl-page--retro-mingei #tplContents .tpl-shop-period {
  width: min(100% - 40px, var(--shop-max));
  margin: 96px auto 0; /* XD実測: 見出し下端→通期バー 96px */
}
.tpl-page--retro-mingei #tplContents .tpl-shop-period + .tpl-shop-period {
  margin-top: 80px; /* XD: 会期ブロック間 80px（スタック定義値） */
}

/* 会期バー。
   バー内の3つの寸法（「通 期」50px・日付40px・その間の全角スペース50px）は
   すべてバー自身の font-size を基準にした em で持たせ、1か所で拡縮できるようにしている。
   1600px前提のXD値をそのまま固定すると、いちばん文字数の多い後期バー
   （後 期　8月11日(火・祝)→16日(日) ＝ 約694px）が769px幅で左右10pxまで詰まるため、
   約833px以下では幅に追従させる。833px以上はXDどおり50px。 */
.tpl-page--retro-mingei #tplContents .tpl-shop-period-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em; /* XD: 「通 期」と日付の間は全角スペース1文字＝50px相当 */
  height: 80px; /* XD: 980×80 */
  padding: 0 .6em;
  border-radius: 20px; /* XD には 1px #707070 の枠線指定があるが、不要との指示により省略 */
  color: #fff; /* XD: #FFFFFF */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: min(5rem, 6vw); /* XD: 50px */
  font-weight: 600; /* XD: Hiragino Sans W6 */
  line-height: 1;
}
.tpl-page--retro-mingei #tplContents .tpl-shop-period--full .tpl-shop-period-bar {
  background-color: var(--retro-brown); /* XD: #41231E */
}
.tpl-page--retro-mingei #tplContents .tpl-shop-period--early .tpl-shop-period-bar {
  background-color: var(--retro-red); /* XD: #EC4A42 */
}
.tpl-page--retro-mingei #tplContents .tpl-shop-period--late .tpl-shop-period-bar {
  background-color: var(--retro-gold); /* XD: #B68E1E */
}
.tpl-page--retro-mingei #tplContents .tpl-shop-period-label {
  font-size: 1em; /* XD: 50px（バーの font-size と同値） */
}
/* XD ではバー内が「通 期」50px と日付40pxの混在した1つのテキストなので、
   両方が同じベースライン（バー上端から59px）に乗る。こちらは flex の別アイテムで、
   align-items: center が 50px と 40px をそれぞれの高さで中央に置くため、
   日付だけベースラインが約4px上がってしまう。ずれ量は
   「(フォントのascent - descent) ÷ 2 × サイズ差」でフォントサイズに比例し、
   日付から見ると常に 0.1em なので、em で下げて1本のベースラインに揃える。
   em 指定なので狭い幅でバーが縮んでも比率のまま追従する。 */
.tpl-page--retro-mingei #tplContents .tpl-shop-period-date {
  position: relative;
  top: .1em;
  font-size: .8em; /* XD: 40px ＝ 50px × .8 */
}

/* 店舗リスト（980pxを2等分。50音順は「左→右→次の行」の行方向に流す） */
.tpl-page--retro-mingei #tplContents .tpl-cont--shops ul.tpl-shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* XD: 490px × 2列 */
  grid-auto-flow: row;
  align-items: start;
  width: 100%;
  max-width: none; /* 汎用の ul（max-width: var(--content-max)）を解除 */
  margin: 45px 0 0; /* XD: バー下端→リスト 45px（スタック定義値） */
  padding: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-shop-item {
  padding-left: 1em;
  text-indent: -1em; /* 行頭「●」のぶら下げインデント（折り返し2行目を本文位置に揃える） */
  color: #000; /* XD: #000000（.tpl-page--retro-mingei の茶色を継承させない） */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 2.6rem; /* XD: 26px */
  font-weight: 300; /* XD: Hiragino Sans W3 */
  line-height: 1.69; /* XD: 行送り44 ÷ フォント26px */
  text-align: left; /* 汎用の .tpl-cont（text-align: center）を解除 */
}

/* 04_出店舗リストのSP。SPデザインは未支給のため、PC実寸を既存の
   clamp（最大px ÷ 768 × 100）方式で縮小している。2カラムは維持する。 */
@media screen and (max-width: 768px) {
  .tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-header {
    width: calc(100% - 40px);
    padding-top: clamp(72px, 16vw, 123px); /* 02・03のSPセクションヘッダーと同値 */
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-icon {
    width: clamp(46px, 10.03vw, 77px);
    height: clamp(36px, 7.81vw, 60px);
    margin-bottom: clamp(20px, 7.16vw, 55px);
  }
  /* PC側の .tpl-cont--shops 付きルールの方が詳細度が高く、汎用SPの
     .tpl-cont-header h2 では上書きできないため、ここで再宣言する。
     可変部はPC側と同じ式にして、768/769pxの境界で文字サイズが飛ばないようにする
     （02・03と同じ6.4vwだと768pxで4.9remまで戻ってしまい、769pxの約30.7pxから
     急に49pxへ跳ね、1行目が折り返して見出しが計3行になる）。
     下限の2.8remに達する約700px以下では、字数の都合でどうしても折り返す。 */
  .tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-cont-header h2 {
    font-size: clamp(2.8rem, 4.3vw - 2.4px, 4.9rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-shop-period {
    width: calc(100% - 40px);
    margin-top: clamp(40px, 12.5vw, 96px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-shop-period + .tpl-shop-period {
    margin-top: clamp(36px, 10.42vw, 80px);
  }
  /* バー内の文字は PC 側と同じく font-size 1か所で拡縮する（gap・padding は em 追従）。
     375px幅では後期バーが最長（約694px÷50px＝font-size の約13.9倍）になるため、
     768pxでPC側の min(5rem, 6vw)＝約46px に接続しつつ、375pxで約19pxまで下がる
     一次式にしている（clamp の可変部を「vw − px」で表す形。他所の
     「最大px ÷ 768 × 100」だけでは375pxで文字がバー幅いっぱいになってしまう）。 */
  .tpl-page--retro-mingei #tplContents .tpl-shop-period-bar {
    height: clamp(44px, 10.42vw, 80px);
    border-radius: clamp(10px, 2.6vw, 20px);
    font-size: clamp(1.6rem, 7.2vw - 8.3px, 5rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--shops ul.tpl-shop-list {
    column-gap: 10px; /* 2列維持のため、折り返し時に列同士が接しないよう最小の列間を入れる */
    margin-top: clamp(20px, 5.86vw, 45px);
    padding: 0; /* 汎用SPの ul（padding: clamp(14px, 2.6vw, 20px)）を解除 */
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--shops .tpl-shop-item {
    font-size: clamp(1.4rem, 3.39vw, 2.6rem); /* 26px系の既存SP指定と同係数 */
  }
}

/* ============================================================
   05_アプリクーポン
   XD: 05_アプリクーポン（1600pxアートボード。CSSは1:1で対応）
   アイコン＋見出し → 赤バナー → アプリアイコン画像＋期間＋注記 → 登録ボタン の
   縦1列だけで構成されるセクション。
   セクションアイコンはグランドメニューと共用の
   assets/images/top/menu_icon_app.svg（fill #41231e）をそのまま表示する。
   登録ボタンは第1部の .tpl-btn とは別物（丸＋矢印がXDでは中央寄せのため）。
   .tpl-btn 側は変更していない。
   すべて .tpl-cont--app / .tpl-app-* にスコープし、cont1〜cont4 には影響させない。
   ============================================================ */
.tpl-page--retro-mingei #tplContents .tpl-cont--app {
  --app-max: 980px;       /* XD: 赤バナー幅980px */
  --app-body-max: 1080px; /* XD: 本文ブロック幅1080px */
  --app-btn-max: 490px;   /* XD: 登録ボタン幅490px */
}

/* セクションヘッダー（アイコン＋1行見出し）。
   見出し「アプリ会員登録でおトク！」は12文字×49px＝約588pxで、
   汎用のヘッダー幅 min(100% - 40px, 1080px) に769px幅でも収まるため幅の上書きはしない。 */
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-cont-icon {
  width: 51px; /* XD: アイコン実寸 51×65 */
  height: 65px;
  margin: 0 auto 50px; /* XD: アイコン下端→見出し 50px（スタック定義値） */
  line-height: 0;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-cont-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none; /* 第1部の cont5 ダミー識別filterを明示的に打ち消す */
}
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-cont-header h2 {
  color: #333; /* XD: #333333。第1部の cont5 ダミー識別カラーを明示的に打ち消す */
}

/* 赤バナー。.tpl-cont の直下 <p> なので汎用の margin/font-size/line-height を全部上書きする。
   高さはXDの180px固定ではなく min-height にして、文字が折り返しても切れないようにしている。 */
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100% - 40px, var(--app-max));
  min-height: 180px; /* XD: 980×180 */
  margin: 127px auto 0; /* XD実測: 見出しブロック下端→バナー上端 127px */
  padding: .3em .4em;
  border-radius: 20px; /* XD には 1px #707070 の枠線指定があるが、04の会期バーと同じ判断で省略 */
  background-color: var(--retro-red); /* XD: #EC4A42 */
  color: #fff; /* XD: #FFFFFF */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 5rem; /* XD: 50px。最長行は約600pxで769px時のバー内寸に収まる */
  font-weight: 600; /* XD: Hiragino Sans W6 */
  line-height: 1.36; /* XD: 行送り68 ÷ フォント50px */
  text-align: center;
}

/* 本文ブロック（アプリアイコン画像＋期間＋注記） */
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-body {
  width: min(100% - 40px, var(--app-body-max));
  margin: 100px auto 0; /* XD: バナー下端→本文ブロック上端 100px */
}
/* 角丸と枠線は書き出したPNGに含まれているため、CSSでは付けない */
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-icon {
  display: block;
  width: 400px; /* XD: 400×400（原寸800×800のPNGを1/2表示） */
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-period {
  margin: 40px 0 0; /* XD: 画像下端→期間 40px（スタック定義値） */
  color: #333; /* XD: #333333 */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 2.6rem; /* XD: 26px */
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3 */
  line-height: 1; /* XDの行送り22pxはフォント26pxより小さいため、1行の高さは1で扱う */
  text-align: center;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-note {
  margin: 40px 0 0; /* XD: 期間→注記 40px（スタック定義値） */
  color: #333; /* XD: #333333 */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 1.4rem; /* XD: 14px */
  font-weight: 300; /* XD: Hiragino Kaku Gothic ProN W3 */
  line-height: 1.57; /* XD: 行送り22 ÷ フォント14px */
  text-align: left; /* 汎用の .tpl-cont（text-align: center）を解除 */
}

/* 登録ボタン（XD: コンポーネント12–1）。
   テキストと丸アイコンがひとかたまり（317px）で中央寄せされているため、
   第1部の .tpl-btn（丸を position: absolute で右端固定）ではなく flex で組む。 */
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn-wrap {
  width: min(100% - 40px, var(--app-btn-max));
  margin: 90px auto 0; /* XD: 本文ブロック下端→ボタン上端 90px */
}
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px; /* XD: テキスト右端→丸アイコン左端（317 − 240 − 50） */
  width: 100%;
  min-height: 96px; /* XD: 490×96 */
  padding: 8px 20px;
  border: 2px solid var(--retro-red); /* XD: 外側2px #EC4A42 */
  border-radius: 48px; /* XD: 角丸48px */
  background-color: #fff; /* XD: 塗りは無効（下地の白） */
  color: var(--retro-red); /* XD: #EC4A42 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 2.4rem; /* XD: 24px */
  font-weight: 600; /* XD: Hiragino Sans W6 */
  line-height: 1.42; /* XD: 行送り34 ÷ フォント24px */
  text-align: center;
  transition: .3s ease-out;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 50px; /* XD: 楕円形27 = 50×50 */
  height: 50px;
  border-radius: 50%;
  background-color: var(--retro-red);
  transition: .3s ease-out;
}
.tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn-arrow::before {
  content: "";
  border-top: 10px solid transparent; /* XD: 多角形2 = 24×20 */
  border-bottom: 10px solid transparent;
  border-left: 24px solid #fff;
  transition: .3s ease-out;
}
/* hover はXDに指定が無いため、第1部の .tpl-btn と同じ「反転」の流儀に合わせる。
   適用条件もグランドメニューと同じ「769px以上、またはマウス環境」にそろえる */
@media screen and (min-width: 769px), (hover: hover) and (pointer: fine) {
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn:hover {
    background-color: var(--retro-red);
    color: #fff;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn:hover .tpl-app-btn-arrow {
    background-color: #fff;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn:hover .tpl-app-btn-arrow::before {
    border-left-color: var(--retro-red);
  }
}

/* 05_アプリクーポンのSP。SPデザインは未支給のため、PC実寸を既存の
   clamp（最大px ÷ 768 × 100）方式で縮小している。 */
@media screen and (max-width: 768px) {
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-cont-header {
    width: calc(100% - 40px);
    padding-top: clamp(72px, 16vw, 123px); /* 02〜04のSPセクションヘッダーと同値 */
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-cont-icon {
    width: clamp(30px, 6.64vw, 51px);
    height: clamp(38px, 8.46vw, 65px);
    margin-bottom: clamp(20px, 6.51vw, 50px);
  }
  /* PC側の .tpl-cont--app 付きルールの方が詳細度が高く、汎用SPの
     .tpl-cont-header h2 では上書きできないため、ここで再宣言する。
     下限だけ 02〜04 の 2.8rem ではなく 2.2rem にしている:
     見出しは12文字あり、2.8rem（28px）だと375px幅で「ク！」だけが2行目に落ちる。
     XDでは1行の見出しなので、320px幅まで1行を保てる下限にそろえた。 */
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-cont-header h2 {
    font-size: clamp(2.2rem, 6.4vw, 4.9rem);
  }
  /* 汎用SPの .tpl-cont > p（margin-top・padding: 0 var(--sp-narrow-edge)）を解除する。
     padding が残るとバナーの幅計算がずれる。
     font-size は「最大px ÷ 768 × 100」ではなく一次式にしている:
     1行目「アプリ会員登録でおトク！」は12文字あり、6.51vw のままだと
     320px幅（PCのスクロールバー15pxを引いた実効305px）で2行に折り返す。
     768pxでPC側の5rem（50px）にちょうど接続しつつ、320pxで約19pxまで下がる形。
     04の会期バーと同じ「clamp の可変部を vw − px で表す」書き方。 */
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-banner {
    width: calc(100% - 40px);
    min-height: clamp(80px, 23.44vw, 180px);
    margin-top: clamp(50px, 16.54vw, 127px);
    padding: .3em .4em;
    border-radius: clamp(10px, 2.6vw, 20px);
    font-size: clamp(1.6rem, 6.92vw - 3.1px, 5rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-body {
    width: calc(100% - 40px);
    margin-top: clamp(40px, 13.02vw, 100px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-icon {
    width: clamp(180px, 52.08vw, 400px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-period {
    margin-top: clamp(20px, 5.21vw, 40px);
    font-size: clamp(1.4rem, 3.39vw, 2.6rem); /* 26px系の既存SP指定と同係数 */
    line-height: 1;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-note {
    margin-top: clamp(20px, 5.21vw, 40px);
    font-size: clamp(1.1rem, 1.82vw, 1.4rem);
    line-height: 1.57;
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn-wrap {
    width: calc(100% - 40px);
    max-width: var(--app-btn-max);
    margin-top: clamp(40px, 11.72vw, 90px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn {
    gap: clamp(10px, 3.52vw, 27px);
    min-height: clamp(56px, 12.5vw, 96px);
    border-radius: clamp(28px, 6.25vw, 48px);
    font-size: clamp(1.4rem, 3.13vw, 2.4rem);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn-arrow {
    width: clamp(28px, 6.51vw, 50px);
    height: clamp(28px, 6.51vw, 50px);
  }
  .tpl-page--retro-mingei #tplContents .tpl-cont--app .tpl-app-btn-arrow::before {
    border-top-width: clamp(5.6px, 1.3vw, 10px);
    border-bottom-width: clamp(5.6px, 1.3vw, 10px);
    border-left-width: clamp(13.4px, 3.13vw, 24px);
  }
}