@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 で指定しています（参考サイト同様の方式）。

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

   ▼ このファイルの構成（下の同名バナーコメントへ検索でジャンプできます）
   - ベーススタイル（このバナー。色・最大幅などの共通値は .tpl-page のカスタムプロパティ）
   - メインビジュアル
   - リード文
   - グランドメニュー hover/select モード（配色）
   - グランドメニューの動きモード（hover/select のときの動き）
   - グランドメニュー（各コンテンツへのナビゲーション）
   - コンテンツセクション共通（見出し・リード文）
   - contごとの識別用カラー（ダミー期間中の暫定色分け）
   - 商品リスト（タイトル画像・2カラム商品カード・ジャンルタグ）
   - 単一カラムのお知らせ型セクション
   - 出店舗リスト（会期バー＋2カラムの店舗名リスト）
   - アプリクーポン（バナー＋アプリアイコン＋登録ボタン）
   - 商品詳細ボタン（詳細はこちら）
   - 松坂屋オンラインストアボタン
   - 大丸・松坂屋アプリ会員ボタン
   - リンクバナー
   - レスポンシブ（スマートフォン：768px以下）
   ============================================================ */

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);

  /* グランドメニューの動き。既定値は「動きなし（アイコン常時表示・配色だけ変わる）」で、
     .tpl-page の動きモードクラス（下記）を付けると上書きされます。
     クラスを増やさずに調整できるのは次の3つです */
  --grandmenu-color-duration: .3s;   /* 配色が入れ替わる時間（サブコピーの横スライドもこの時間） */
  --grandmenu-motion-duration: .2s;  /* アイコンがフェードイン／移動する時間 */
  --grandmenu-icon-shift: 16px;      /* アイコンの移動距離（向きは動きモードクラスが決める） */
  /* ここから下は動きモードクラスが設定する内部値。直接いじらず、クラスを付け替えてください */
  --grandmenu-icon-rest-opacity: 1;  /* 通常時のアイコンの不透明度（0 = hover/select のときだけ出る） */
  --grandmenu-icon-x: 0px;           /* 入場前のアイコン位置（横） */
  --grandmenu-icon-y: 0px;           /* 入場前のアイコン位置（縦） */
  --grandmenu-sub-shift: 0px;        /* 通常時のサブコピーの横位置 */
  --grandmenu-row-align: center;     /* アイコンとサブコピーの縦位置揃え */

  --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;
  -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 秒で切り替わります。
       参考: 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);
}

/* ============================================================
   グランドメニューの動きモード（PC幅 769px 以上のみ）
   .tpl-page に付けるモードクラスで「hover/select したときの動き」を切り替えます。
   上の配色モードとは独立した軸なので、配色はそのまま動きだけ差し替えられます。
   実際の動きの指定は「グランドメニュー」セクション側に1本だけ置き、
   ここではその指定が読む値（向き・距離・不透明度）を決めています。
   動きを変える＝HTML の .tpl-page のクラスを1語書き替えるだけです。

   | クラス                                | 動き                                        |
   | tpl-page--grandmenu-motion-fade-down  | アイコンが上→下にフェードイン（現行のHTMLはこれ） |
   | tpl-page--grandmenu-motion-fade-up    | アイコンが下→上にフェードイン                |
   | tpl-page--grandmenu-motion-fade-right | アイコンが左→右にフェードイン                |
   | tpl-page--grandmenu-motion-fade-left  | アイコンが右→左にフェードイン                |
   | tpl-page--grandmenu-motion-fade       | 移動せず、その場でフェードインするだけ        |
   | tpl-page--grandmenu-motion-none       | 動きなし。アイコンは常時表示で配色だけ変わる   |

   クラスを付けない場合は -none と同じです（動きは既定値の「なし」）。
   スマホ幅（768px以下）はアイコンではなく番号バッジ表示なので、どのモードでも影響しません。

   [fade 系で起きること]
   - アイコン（u::before）は通常時 opacity 0 で、hover/select のときだけ現れます。
     見えるのは背景が active 色のときだけなので、画像は常に --menu-icon-active を使います。
   - アイコン枠 <u> の幅は常に 32px 確保したまま、動かすのは opacity と transform だけです
     （幅を動かすとレイアウト再計算と transform の描画タイミングがずれ、斜めに動いて見えるため）。
   - サブコピー（i）は通常時 -21px 左へ寄せて、アイコンが無いときと同じ中央位置に置きます。
     hover/select で 0 に戻るぶんが右へのスライドになります（21px =（アイコン32px + gap10px）÷ 2）。
   - アイコン行は下端揃え（align-items: flex-end）になり、アイコンがサブコピーより上へはみ出します。

   [クラスを増やさずに調整できるもの（.tpl-page で上書き）]
     --grandmenu-icon-shift      移動距離（既定 16px）
     --grandmenu-motion-duration アイコンの動く時間（既定 .2s）
     --grandmenu-color-duration  配色が入れ替わる時間（既定 .3s。サブコピーの横スライドもこの時間）
     --grandmenu-sub-shift       0px にすると、アイコンは動くがサブコピーは動かない
     --grandmenu-row-align       center にすると下端揃えをやめる
   ============================================================ */

/* アイコンを通常時は隠し、hover/select で出す系（fade 系）の共通設定 */
.tpl-page--grandmenu-motion-fade,
.tpl-page--grandmenu-motion-fade-up,
.tpl-page--grandmenu-motion-fade-down,
.tpl-page--grandmenu-motion-fade-left,
.tpl-page--grandmenu-motion-fade-right {
  --grandmenu-icon-rest-opacity: 0;
  --grandmenu-sub-shift: -21px;
  --grandmenu-row-align: flex-end;
}
/* 向きだけを差し替える（距離は --grandmenu-icon-shift 側で決まる） */
.tpl-page--grandmenu-motion-fade-down {
  --grandmenu-icon-y: calc(var(--grandmenu-icon-shift) * -1);
}
.tpl-page--grandmenu-motion-fade-up {
  --grandmenu-icon-y: var(--grandmenu-icon-shift);
}
.tpl-page--grandmenu-motion-fade-right {
  --grandmenu-icon-x: calc(var(--grandmenu-icon-shift) * -1);
}
.tpl-page--grandmenu-motion-fade-left {
  --grandmenu-icon-x: var(--grandmenu-icon-shift);
}
/* -fade（その場でフェードのみ）と -none（動きなし）は移動距離 0 のまま使うので、
   専用の指定は要りません。-none は上の fade 系リストに入れていないので
   アイコンが常時表示のままになります */

/* ============================================================
   メインビジュアル
   ============================================================ */
#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);
  cursor: pointer;
  transition: var(--grandmenu-color-duration);
}
.tpl-grandmenu ul.tpl-cir li u {
  flex: none;
  width: 32px;
  height: 32px;
  position: relative;
  transition: var(--grandmenu-color-duration);
}
.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: var(--grandmenu-color-duration);
}
.tpl-grandmenu ul.tpl-cir li b {
  width: 100%;
  font-weight: 700;
  font-size: 2.4rem;
  margin-top: 0;
  text-align: center;
  transition: var(--grandmenu-color-duration);
}
/* 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));
  }
}

/* ------------------------------------------------------------
   グランドメニューのアイコン出現アニメーション（PC幅のみ・全モード共通）
   ここには「どう動かすか」の手続きだけを置き、「どちらへ・どれだけ動かすか」は
   上の動きモードクラスが設定した変数から読みます。動きを変えるときは
   この指定ではなく HTML のモードクラスを付け替えてください。
   既定値（クラス無し）は移動 0・不透明度 1 なので、何も動きません。

   アイコン枠 <u> の幅は常に32pxのまま確保し、レイアウトは一切アニメーション
   させません（幅を動かすとレイアウト再計算と transform の描画タイミングが
   ずれて、アイコンが斜めに動いて見えるため）。動かすのは次の2つだけです:
   - アイコン本体（u::before）: opacity と translate
     ※入場（hover/select が付く時）は opacity と transform を両方
       アニメーションさせてフェードイン。退場（hover/select が外れる時）は
       rest 側の transition が効くので、opacity だけアニメーションさせ、
       transform は「動く時間ぶん遅延・0s で切替」にして、フェードが終わって
       見えなくなってから位置を戻す。これで戻り方向へ動かず、その場で消える。
   - サブコピー（i）: translateX。--grandmenu-sub-shift が 0 なら動かない
   スマホ幅（768px以下）の番号バッジには影響しません。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  /* アイコンとサブコピーの縦位置（fade 系は下端揃え。<b> は width:100% で別行なので影響なし） */
  .tpl-grandmenu ul.tpl-cir li {
    align-items: var(--grandmenu-row-align);
  }
  .tpl-grandmenu ul.tpl-cir li u::before {
    opacity: var(--grandmenu-icon-rest-opacity);
    transform: translate(var(--grandmenu-icon-x), var(--grandmenu-icon-y));
    /* 退場時: opacity だけフェードし、transform は消えてから戻す（その場で消える） */
    transition: opacity var(--grandmenu-motion-duration), transform 0s var(--grandmenu-motion-duration);
  }
  .tpl-grandmenu ul.tpl-cir li i {
    transform: translateX(var(--grandmenu-sub-shift));
  }
  .tpl-grandmenu ul.tpl-cir li.select u::before {
    opacity: 1;
    transform: translate(0, 0);
    /* 入場時: opacity と transform を両方アニメーションしてフェードイン */
    transition: opacity var(--grandmenu-motion-duration), transform var(--grandmenu-motion-duration);
  }
  .tpl-grandmenu ul.tpl-cir li.select i {
    transform: translateX(0);
  }
  /* fade 系はアイコンが見えるのが hover/select（＝背景が active 色）のときだけなので、
     通常時から active 版のアイコン画像を使う */
  .tpl-page--grandmenu-motion-fade .tpl-grandmenu ul.tpl-cir li u::before,
  .tpl-page--grandmenu-motion-fade-up .tpl-grandmenu ul.tpl-cir li u::before,
  .tpl-page--grandmenu-motion-fade-down .tpl-grandmenu ul.tpl-cir li u::before,
  .tpl-page--grandmenu-motion-fade-left .tpl-grandmenu ul.tpl-cir li u::before,
  .tpl-page--grandmenu-motion-fade-right .tpl-grandmenu ul.tpl-cir li u::before {
    background-image: var(--menu-icon-active, var(--menu-icon, none));
  }
}
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .tpl-grandmenu ul.tpl-cir li:hover u::before {
    opacity: 1;
    transform: translate(0, 0);
    /* 入場時: opacity と transform を両方アニメーションしてフェードイン */
    transition: opacity var(--grandmenu-motion-duration), transform var(--grandmenu-motion-duration);
  }
  .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-genre-tags .tpl-period-badge,
#tplContents .tpl-notice .tpl-genre-tags .tpl-period-badge {
  display: block;
  align-self: center;
  width: 82px;
  height: auto;
}
#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;
}

/* ============================================================
   出店舗リスト（cont7: 会期バー＋2カラムの店舗名リスト）
   画像を使わず、会期バー（通期／前期／後期）と店舗名リストだけで構成される
   セクション。商品リスト（tpl-layout-2col）・お知らせ（tpl-notice）とは別の型。
   幅・配色は下のカスタムプロパティ1か所にまとめてあるので、案件ごとの調整は
   案件スキンクラス（.tpl-page--<案件名>）側でこの変数を上書きするだけで済む。
   ============================================================ */
#tplContents .tpl-cont--shops {
  /* 会期バー・店舗リストの共通幅。単一カラム系の既存幅（--notice-max）に合わせている */
  --shop-max: var(--notice-max);
  /* 会期バーの配色。既存パレット（--color-black / --grandmenu-text / --btn-txt-active）だけで
     3会期を見分けられるようにした既定値。金地の後期だけ文字を黒にしてコントラストを確保する */
  --shop-bar-full-bg: var(--color-black);
  --shop-bar-full-txt: #ffffff;
  --shop-bar-early-bg: var(--grandmenu-text);
  --shop-bar-early-txt: #ffffff;
  --shop-bar-late-bg: var(--btn-txt-active);
  --shop-bar-late-txt: var(--color-black);
}

/* 会期ブロック（バー＋店舗リストの1セット）。
   幅は min() で持たせているので、SP側で width を上書きしなくても画面幅に追従する
   （768/769px の境界でも左右余白が 20px のまま連続する） */
#tplContents .tpl-shop-period {
  width: min(100% - 40px, var(--shop-max));
  margin: 80px auto 0;
}
#tplContents .tpl-shop-period + .tpl-shop-period {
  margin-top: 80px;
}

/* 会期バー。
   バー内の3つの寸法（「通 期」・日付・その間のスペース）は、すべてバー自身の
   font-size を基準にした em で持たせ、1か所で拡縮できるようにしている。
   font-size を min() にしているのは、いちばん字数の多い会期バーが
   狭い PC ウィンドウでもバー内に収まるようにするため */
#tplContents .tpl-shop-period-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em; /* 「通 期」と日付の間は全角スペース1文字ぶん */
  min-height: 80px;
  padding: .3em .6em;
  border-radius: 20px;
  background: var(--shop-bar-bg, var(--color-black));
  color: var(--shop-bar-txt, #ffffff);
  font-size: min(4.9rem, 6vw);
  font-weight: 600;
  line-height: 1.2;
}
#tplContents .tpl-shop-period--full .tpl-shop-period-bar {
  --shop-bar-bg: var(--shop-bar-full-bg);
  --shop-bar-txt: var(--shop-bar-full-txt);
}
#tplContents .tpl-shop-period--early .tpl-shop-period-bar {
  --shop-bar-bg: var(--shop-bar-early-bg);
  --shop-bar-txt: var(--shop-bar-early-txt);
}
#tplContents .tpl-shop-period--late .tpl-shop-period-bar {
  --shop-bar-bg: var(--shop-bar-late-bg);
  --shop-bar-txt: var(--shop-bar-late-txt);
}
#tplContents .tpl-shop-period-label {
  font-size: 1em;
}
/* 「通 期」と日付は flex の別アイテムなので、align-items: center だと文字サイズ差の
   ぶんだけ日付のベースラインが上がる。ずれ量は日付から見ると常に 0.1em なので、
   em で下げて1本のベースラインにそろえる（バーが縮んでも比率のまま追従する） */
#tplContents .tpl-shop-period-date {
  position: relative;
  top: .1em;
  font-size: .8em;
}

/* 店舗リスト（2等分。並び順は「左→右→次の行」の行方向） */
#tplContents .tpl-cont--shops ul.tpl-shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: start;
  width: 100%;
  max-width: none; /* 汎用の ul（max-width: var(--content-max)）を解除 */
  margin: 45px 0 0;
  padding: 0;
}
#tplContents .tpl-cont--shops .tpl-shop-item {
  padding-left: 1em;
  text-indent: -1em; /* 行頭「●」のぶら下げインデント（折り返し2行目を本文位置にそろえる） */
  font-size: 2.6rem;
  line-height: 1.7;
  text-align: left; /* 汎用の .tpl-cont（text-align: center）を解除 */
}

/* ============================================================
   アプリクーポン（cont8: バナー＋アプリアイコン＋登録ボタン）
   バナー → 画像＋期間＋注記 → 登録ボタン の縦1列だけで構成されるセクション。
   登録ボタン（.tpl-app-btn）は商品カードの .tpl-btn とは別パーツ。
   .tpl-btn は丸＋矢印を position: absolute で右端に固定するが、こちらは
   文字と丸がひとかたまりで中央に並ぶため flex で組んでいる（.tpl-btn 側は変更していない）。
   ============================================================ */
#tplContents .tpl-cont--app {
  --app-max: var(--notice-max); /* バナー・本文ブロックの幅（単一カラム系の既存幅） */
  --app-btn-max: 490px;         /* 登録ボタンの幅 */
  --app-banner-bg: var(--grandmenu-text);
  --app-banner-txt: #ffffff;
  /* 登録ボタンの配色。--app-btn-color が枠線・文字・丸アイコン、--app-btn-bg が地。
     hover ではこの2色が入れ替わる（.tpl-btn と同じ「反転」の流儀） */
  --app-btn-color: #000000;
  --app-btn-bg: #ffffff;
}

/* バナー。.tpl-cont の直下 <p> なので汎用の margin/padding/font-size/line-height を上書きする。
   高さは固定せず min-height にして、文字が折り返しても切れないようにしている */
#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;
  margin: 80px auto 0;
  padding: .3em .4em;
  border-radius: 20px;
  background: var(--app-banner-bg);
  color: var(--app-banner-txt);
  font-size: min(4.9rem, 6vw);
  font-weight: 600;
  line-height: 1.36;
  text-align: center;
}

/* 本文ブロック（画像＋期間＋注記） */
#tplContents .tpl-cont--app .tpl-app-body {
  width: min(100% - 40px, var(--app-max));
  margin: 80px auto 0;
}
#tplContents .tpl-cont--app .tpl-app-icon {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
#tplContents .tpl-cont--app .tpl-app-period {
  margin: 40px 0 0;
  font-size: 2.6rem;
  line-height: 1.4;
  text-align: center;
}
#tplContents .tpl-cont--app .tpl-app-note {
  margin: 40px 0 0;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left; /* 汎用の .tpl-cont（text-align: center）を解除 */
}

/* 登録ボタン */
#tplContents .tpl-cont--app .tpl-app-btn-wrap {
  width: min(100% - 40px, var(--app-btn-max));
  margin: 80px auto 0;
}
#tplContents .tpl-cont--app .tpl-app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px; /* 文字の右端→丸アイコンの左端 */
  width: 100%;
  min-height: 96px;
  padding: 8px 20px;
  border: 2px solid var(--app-btn-color);
  border-radius: 999px;
  background: var(--app-btn-bg);
  color: var(--app-btn-color);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.42;
  text-align: center;
  transition: .3s ease-out;
}
#tplContents .tpl-cont--app .tpl-app-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--app-btn-color);
  transition: .3s ease-out;
}
#tplContents .tpl-cont--app .tpl-app-btn-arrow::before {
  content: "";
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 24px solid var(--app-btn-bg);
  transition: .3s ease-out;
}
/* hover は .tpl-btn と同じ 0.3 秒の配色反転。ただしタッチ端末で hover が
   残留しないよう、グランドメニューと同じ「マウス等のPC環境のみ」に分けている */
@media (hover: hover) and (pointer: fine) {
  #tplContents .tpl-cont--app .tpl-app-btn:hover {
    background: var(--app-btn-color);
    color: var(--app-btn-bg);
  }
  #tplContents .tpl-cont--app .tpl-app-btn:hover .tpl-app-btn-arrow {
    background: var(--app-btn-bg);
  }
  #tplContents .tpl-cont--app .tpl-app-btn:hover .tpl-app-btn-arrow::before {
    border-left-color: var(--app-btn-color);
  }
}

/* ============================================================
   商品詳細ボタン（詳細はこちら）
   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);
  }
  #tplLead .tpl-kaiki {
    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-genre-tags .tpl-period-badge,
  #tplContents .tpl-notice .tpl-genre-tags .tpl-period-badge {
    width: clamp(64px, 10.67vw, 82px);
  }
  #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);
  }

  /* --- 出店舗リスト（cont7）。2カラムは維持したまま縮小する ---
     幅は PC 側の min(100% - 40px, --shop-max) がそのまま効くので上書きしない */
  #tplContents .tpl-shop-period {
    margin-top: clamp(48px, 10.42vw, 80px);
  }
  #tplContents .tpl-shop-period + .tpl-shop-period {
    margin-top: clamp(48px, 10.42vw, 80px);
  }
  /* バー内の文字は font-size 1か所で拡縮する（gap・padding は em で追従）。
     可変部を「vw − px」の一次式にしているのは、いちばん字数の多い会期バーが
     375px幅でもバー内に収まるようにするため（他所の「最大px ÷ 768 × 100」だけでは
     375pxで文字がバー幅いっぱいになってしまう）。768pxでPC側の値に接続する */
  #tplContents .tpl-shop-period-bar {
    min-height: clamp(44px, 10.42vw, 80px);
    border-radius: clamp(10px, 2.6vw, 20px);
    font-size: clamp(1.6rem, 7.2vw - 8.3px, 4.9rem);
  }
  #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)）を解除 */
  }
  #tplContents .tpl-cont--shops .tpl-shop-item {
    font-size: clamp(1.4rem, 3.39vw, 2.6rem); /* 26px系の既存SP指定と同係数 */
  }

  /* --- アプリクーポン（cont8） ---
     幅は PC 側の min(100% - 40px, --app-max / --app-btn-max) がそのまま効くので上書きしない。
     バナーの font-size も PC 側の min(4.9rem, 6vw) が 375px で約22pxまで下がるため上書き不要 */
  #tplContents .tpl-cont--app .tpl-app-banner {
    min-height: clamp(80px, 23.44vw, 180px);
    margin-top: clamp(48px, 10.42vw, 80px);
    border-radius: clamp(10px, 2.6vw, 20px);
  }
  #tplContents .tpl-cont--app .tpl-app-body {
    margin-top: clamp(48px, 10.42vw, 80px);
  }
  #tplContents .tpl-cont--app .tpl-app-icon {
    width: clamp(180px, 52.08vw, 400px);
  }
  #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指定と同係数 */
  }
  #tplContents .tpl-cont--app .tpl-app-note {
    margin-top: clamp(20px, 5.21vw, 40px);
    font-size: clamp(1.1rem, 1.82vw, 1.4rem);
  }
  #tplContents .tpl-cont--app .tpl-app-btn-wrap {
    margin-top: clamp(48px, 10.42vw, 80px);
  }
  #tplContents .tpl-cont--app .tpl-app-btn {
    gap: clamp(10px, 3.52vw, 27px);
    min-height: clamp(56px, 12.5vw, 96px);
    font-size: clamp(1.4rem, 3.13vw, 2.4rem);
  }
  #tplContents .tpl-cont--app .tpl-app-btn-arrow {
    width: clamp(28px, 6.51vw, 50px);
    height: clamp(28px, 6.51vw, 50px);
  }
  #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);
  }
}

/* 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);
  }
}

/* ==========================================================================
   案件スキン: autumn

   サイズ・余白・行間が案件のデザインで違う場合は、テンプレートの基本値を書き換えず
   ここに .tpl-page--autumn 配下で上書きを書く。変更した値には XD 注記コメントで出所を残す。
   PC は XD px = CSS px、rem は px ÷ 10（html{font-size:10px}）。
   SP は XD の TOP_SP を 750px 基準とし、既存の clamp() 設計で縮小する。
   ========================================================================== */

.tpl-page--autumn {
  --grandmenu-btn-w: 490px; /* XD: TOP ボタン背景幅 */
  --grandmenu-max: 996px; /* XD: 490px × 2列 + 16px */
  --grandmenu-btn-bg: #FC9D05; /* XD: TOP グランドメニュー 通常 */
  --grandmenu-btn-bg-active: #FEC305; /* XD: TOP グランドメニュー hover */
  --grandmenu-btn-txt: #3C2106; /* XD: TOP グランドメニュー タイトル */
  --grandmenu-btn-txt-active: #3C2106; /* XD: TOP グランドメニュー hover タイトル */
  --grandmenu-color-duration: .3s; /* XD: TOP Native Hover */
}

/* XD: TOP リード文 */
.tpl-page--autumn #tplLead {
  max-width: 1060px;
  padding: 60px 30px 100px;
}
.tpl-page--autumn #tplLead .tpl-ttl {
  display: block;
  margin: 0 0 21.5px;
  line-height: 30px;
}
.tpl-page--autumn #tplLead .tpl-ttl b {
  font-family: "A-OTF Gothic MB101 Pro", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.tpl-page--autumn #tplLead .tpl-kaiki {
  display: block;
  margin: 0 0 20px;
}
.tpl-page--autumn #tplLead .tpl-kaiki p {
  font-family: "Hiragino Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 300; /* XD: TOP W3 */
  line-height: 25px;
}
.tpl-page--autumn #tplLead .tpl-txt {
  margin: 0 0 52.5px;
  color: #231815;
  font-family: "Yu Gothic Pr6N", "Yu Gothic", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 27px;
}
.tpl-page--autumn #tplLead .tpl-sub {
  margin: 0;
  color: #231815;
  font-family: "Hiragino Sans", sans-serif;
  font-size: .9rem;
  font-weight: 600; /* XD: TOP W6 */
  line-height: 15px;
}

@media screen and (min-width: 769px) {
  .tpl-page--autumn #tplLead .tpl-ttl b {
    display: block;
  }
}

/* XD: TOP グランドメニュー */
.tpl-page--autumn .tpl-grandmenu {
  padding: 40px 0 60px;
  background-color: #FEF4D9;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir {
  max-width: 996px; /* XD: TOP ボタン 490px × 2列 + 16px */
  margin-top: 27px;
  column-gap: 16px;
  row-gap: 20px;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li {
  height: 96px;
  padding: 10px 0 0;
  border: 0;
  border-radius: 48px;
  box-shadow: 0 0 0 2px #CCA375; /* XD: outside 2px */
  align-content: flex-start;
  row-gap: 5px;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li i {
  color: #4D6B14;
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 400; /* XD: TOP W4 */
  line-height: 22px;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li:first-child i {
  padding-right: 4px; /* XD: 末尾スペースを含むコピー位置 */
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li b {
  color: #3C2106;
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 600; /* XD: TOP W6 */
  line-height: 34px;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.select :is(i, b) {
  color: inherit;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.select i {
  color: #4D6B14;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.select b {
  color: #3C2106;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li:focus-visible {
  outline: 3px solid #3C2106;
  outline-offset: 3px;
  background: #FEC305; /* XD: TOP グランドメニュー hover */
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.tpl-menu-comingsoon {
  background: #D3D3D3; /* XD: TOP 第二弾 comingsoon 背景 */
  box-shadow: 0 0 0 2px #C4C4C4; /* XD: TOP 第二弾 comingsoon outside 2px */
  color: #919191; /* XD: TOP 第二弾 comingsoon 文字 */
  cursor: default;
}
.tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.tpl-menu-comingsoon :is(i, b) {
  color: #919191; /* XD: TOP 第二弾 comingsoon 文字 */
}

/* XD: TOP 第二弾 comingsoon 2件は、ダブル会員限定抽選会の次の行に配置 */
@media screen and (max-width: 768px), screen and (min-width: 1026px) {
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.tpl-menu-comingsoon:nth-child(6) {
    grid-column: 1;
    grid-row: 4;
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.tpl-menu-comingsoon:nth-child(7) {
    grid-column: 2;
    grid-row: 4;
  }
}

/* XD: 01_下層 各ページ見出し */
.tpl-page--autumn #tplContents .tpl-cont h2 {
  color: #333333;
  font-family: "Hiragino Sans", sans-serif;
}
.tpl-page--autumn #tplContents .tpl-cont h2::before {
  background-size: contain;
  background-position: center;
}
.tpl-page--autumn #tplContents .tpl-cont[name="cont1"] h2::before {
  background-image: url("assets/images/cont1/cont1_icon1.svg"); /* XD: content1_icon */
}
.tpl-page--autumn #tplContents .tpl-cont[name="cont2"] h2::before {
  background-image: url("assets/images/cont2/cont2_icon1.svg"); /* XD: content2_icon */
}
.tpl-page--autumn #tplContents .tpl-cont[name="cont3"] h2::before {
  background-image: url("assets/images/cont3/cont3_icon1.svg"); /* XD: content3_icon */
}
.tpl-page--autumn #tplContents .tpl-cont[name="cont4"] h2::before {
  background-image: url("assets/images/cont4/cont4_icon1.svg"); /* XD: content4_icon */
}
.tpl-page--autumn #tplContents .tpl-cont[name="cont5"] h2::before {
  background-image: url("assets/images/cont5/cont5_icon1.svg"); /* XD: content5_icon */
}
.tpl-page--autumn #tplContents .tpl-cont h2 .tpl-cont-title,
.tpl-page--autumn #tplContents .tpl-cont h2 .tpl-cont-sub {
  display: block;
}

/* XD: 01_下層 商品本文 W3（実機では ProN W3 を family 名にせず weight 300 で指定） */
.tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-text {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 300;
}
.tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-text p,
.tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-text :is(.tpl-brand, .tpl-name) {
  font-weight: inherit;
}
.tpl-page--autumn #tplContents .tpl-cont[name="cont5"] .tpl-notice-line {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 300; /* XD: 5_01 W3 */
}

/* XD: cont1〜cont4 商品グリッド */
@media screen and (min-width: 769px) {
  .tpl-page--autumn #tplContents .tpl-cont {
    padding: 209px 0 100px; /* XD: ヘッダー下端 y=56 → content icon y=265 */
  }
  .tpl-page--autumn #tplContents .tpl-cont h2 {
    margin: 0;
    padding: 91px 0 0; /* XD: icon y=265/h=64 → title emTop=356 */
    font-size: 4.9rem;
    font-weight: 600;
    line-height: 49px;
  }
  .tpl-page--autumn #tplContents .tpl-cont h2::before {
    width: 64px;
    height: 64px;
  }
  .tpl-page--autumn #tplContents .tpl-cont h2 .tpl-cont-sub {
    margin-top: 28px; /* XD: title emBottom=405 → sub emTop=445 */
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 50px;
  }
  .tpl-page--autumn #tplContents .tpl-cont > :is(.tpl-cont-period, .tpl-cont-lead) {
    margin: 96px 0 0; /* XD: sub emBottom=471 → lead emTop=591 */
    padding: 0;
    color: #333333;
    font-family: "Hiragino Sans", sans-serif;
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 50px;
  }
  .tpl-page--autumn #tplContents .tpl-cont > .tpl-cont-period + .tpl-cont-lead {
    margin-top: 0; /* 参考キャプチャ: 会期表示の直後にページコピーを配置 */
  }
  .tpl-page--autumn #tplContents .tpl-cont ul.tpl-items {
    margin-top: 68px; /* XD: lead line box下端 → 商品グループ y=697 */
  }
  .tpl-page--autumn #tplContents .tpl-cont.tpl-layout-2col .tpl-item--2col {
    margin-bottom: 76px; /* XD: 商品行間（ブラウザ字面実測） */
  }
  .tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-thumb {
    margin-bottom: 0;
  }
  /* XD: PC 商品テキスト（2026-09-25 ユーザー指定値） */
  .tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-text {
    margin-top: 16px; /* XD: 商品画像下端から本文行ボックス */
    color: #333333;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: calc(25 / 14);
  }
  .tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-text p {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  .tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-text :is(.tpl-brand, .tpl-name) {
    font-weight: inherit;
  }
  .tpl-page--autumn #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-desc {
    margin-bottom: 0;
  }
  /* ユーザー指定: 和栗のモンブラン冒頭の説明はPC幅1280px以上で1行に収める */
  .tpl-page--autumn #tplContents .tpl-cont[name="cont3"] .tpl-item--2col .tpl-text .tpl-desc-pc-fit {
    letter-spacing: -.05em;
  }

  /* XD: cont5 5_01 / 抽選会本文 */
  /* 支給画像: ダブル会員抽選会画像.png（2160×1044px）を元の比率・透過で表示 */
  .tpl-page--autumn #tplContents .tpl-cont[name="cont5"] .tpl-notice-img {
    margin-bottom: 40px;
  }
  .tpl-page--autumn #tplContents .tpl-cont[name="cont5"] .tpl-notice-line {
    margin: 0;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 2.6rem;
    font-weight: 300; /* XD: 5_01 W3 */
    line-height: normal;
  }
}

/* XD: cont2〜cont5 は実画像をそのまま表示 */
.tpl-page--autumn #tplContents .tpl-cont[name="cont2"] .tpl-thumb,
.tpl-page--autumn #tplContents .tpl-cont[name="cont3"] .tpl-thumb,
.tpl-page--autumn #tplContents .tpl-cont[name="cont4"] .tpl-thumb,
.tpl-page--autumn #tplContents .tpl-cont[name="cont5"] .tpl-thumb {
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li:hover i {
    color: #4D6B14;
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li:hover b {
    color: #3C2106;
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.tpl-menu-comingsoon:hover {
    background: #D3D3D3; /* XD: TOP 第二弾 comingsoon hoverなし */
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.tpl-menu-comingsoon:hover :is(i, b) {
    color: #919191; /* XD: TOP 第二弾 comingsoon hoverなし */
  }
}

/* XD: TOP_SP */
@media screen and (max-width: 768px) {
  .tpl-page--autumn #tplLead {
    padding: clamp(28px, 5.33vw, 40px) clamp(14px, 2.67vw, 20px) clamp(14px, 2.4vw, 18px);
  }
  .tpl-page--autumn #tplLead .tpl-ttl {
    margin: 0 0 clamp(10px, 1.87vw, 14px);
    line-height: 1.4444;
  }
  .tpl-page--autumn #tplLead .tpl-ttl b {
    font-size: clamp(1.7rem, 4.8vw, 3.6rem);
  }
  .tpl-page--autumn #tplLead .tpl-kaiki {
    margin: 0 0 clamp(10px, 2.13vw, 16px);
  }
  .tpl-page--autumn #tplLead .tpl-kaiki p {
    font-size: clamp(1.1rem, 2.13vw, 1.6rem);
    line-height: 1.5625;
  }
  .tpl-page--autumn #tplLead .tpl-txt {
    margin: 0 0 clamp(25px, 5.2vw, 39px);
    font-size: clamp(1.1rem, 2.13vw, 1.6rem);
    line-height: 1.6875;
  }
  .tpl-page--autumn #tplLead .tpl-sub {
    font-size: clamp(.8rem, 1.2vw, .9rem);
    line-height: 1.6667;
  }
  .tpl-page--autumn .tpl-grandmenu {
    padding: clamp(32px, 5.33vw, 40px) 0 clamp(20px, 5.33vw, 40px);
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir {
    --menu-edge: clamp(10px, 2.67vw, 20px);
    --menu-inset: clamp(10px, 2.67vw, 20px);
    width: calc(100% - (var(--menu-edge) * 2));
    max-width: 710px;
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(5px, 1.33vw, 10px);
    row-gap: clamp(10px, 2.67vw, 20px);
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li {
    width: 100%;
    max-width: 350px;
    height: clamp(60px, 16vw, 120px);
    padding: 0;
    aspect-ratio: auto;
    border-radius: 999px;
    box-shadow: 0 0 0 clamp(1px, .27vw, 2px) #CCA375;
    display: block;
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.tpl-menu-comingsoon {
    box-shadow: 0 0 0 clamp(1px, .27vw, 2px) #C4C4C4; /* XD: TOP_SP 第二弾 comingsoon outside 2px */
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li u {
    top: calc(-1 * clamp(5px, 1.33vw, 10px));
    left: 50%;
    width: clamp(18px, 5.33vw, 40px);
    height: clamp(18px, 5.33vw, 40px);
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li u::before,
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li.select u::before {
    content: "";
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: var(--menu-icon, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li i {
    position: absolute;
    top: clamp(16px, 4.27vw, 32px);
    left: var(--menu-inset);
    width: calc(100% - (var(--menu-inset) * 2));
    padding: 0;
    font-size: clamp(.9rem, 2.13vw, 1.6rem);
    font-weight: 300; /* XD: TOP_SP W3 */
    line-height: clamp(11px, 2.93vw, 22px);
    text-align: center;
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li b {
    position: absolute;
    top: clamp(28px, 7.47vw, 56px);
    left: var(--menu-inset);
    width: calc(100% - (var(--menu-inset) * 2));
    font-size: clamp(1.2rem, 3.2vw, 2.4rem);
    line-height: clamp(17px, 4.53vw, 34px);
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li:nth-child(4) {
    height: clamp(59px, 15.73vw, 118px);
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li:nth-child(4) i {
    top: clamp(15px, 4vw, 30px);
  }
  .tpl-page--autumn .tpl-grandmenu ul.tpl-cir li:nth-child(4) b {
    top: clamp(27px, 7.2vw, 54px);
  }
  .tpl-page--autumn #tplContents .tpl-cont {
    padding: clamp(48px, 13.02vw, 100px) 0 var(--sp-section-y);
  }
  .tpl-page--autumn #tplContents .tpl-cont h2 {
    padding: clamp(40px, 5.86vw, 45px) var(--sp-edge) 0;
    font-size: clamp(2rem, 3.13vw, 2.4rem);
    font-weight: 600;
    line-height: 1;
  }
  .tpl-page--autumn #tplContents .tpl-cont h2::before {
    width: clamp(24px, 4.17vw, 32px);
    height: clamp(24px, 4.17vw, 32px);
  }
  .tpl-page--autumn #tplContents .tpl-cont h2 .tpl-cont-sub {
    margin-top: clamp(10px, 1.82vw, 14px);
    font-size: clamp(1.1rem, 1.69vw, 1.3rem);
    font-weight: 300;
    line-height: clamp(20px, 3.26vw, 25px);
  }
  .tpl-page--autumn #tplContents .tpl-cont > :is(.tpl-cont-period, .tpl-cont-lead) {
    margin: clamp(24px, 6.25vw, 48px) 0 0;
    padding: 0 var(--sp-narrow-edge);
    color: #333333;
    font-family: "Hiragino Sans", sans-serif;
    font-size: clamp(1.1rem, 1.69vw, 1.3rem);
    font-weight: 300;
    line-height: clamp(20px, 3.26vw, 25px);
  }
  .tpl-page--autumn #tplContents .tpl-cont > .tpl-cont-period + .tpl-cont-lead {
    margin-top: 0; /* 参考キャプチャ: 会期表示の直後にページコピーを配置 */
  }
  .tpl-page--autumn #tplContents .tpl-cont ul.tpl-items {
    margin-top: clamp(16px, 4.43vw, 34px);
  }
  .tpl-page--autumn #tplContents .tpl-cont[name="cont5"] .tpl-notice-img {
    margin-bottom: clamp(20px, 3.91vw, 30px);
  }
}