@charset "UTF-8";

/*===========================================================
  ACTグループLP

  数値はカンプ（1000px幅・全高3866px）をピクセル計測した実測値に基づく。
  コンテンツ列は 800px（#page の 80%）で、bg02 の幅と一致させている。
  横方向のサイズは原則「列幅800pxに対する%」で持たせているため、
  画面幅が変わっても比率が保たれる（SPも同一レイアウト）。
===========================================================*/


/*---------------------------
背景の重ね構造

  ページ全体（#page / 最大1000px）
    .page-bg__top  … bg_top.jpg     999x987  上部。繰り返さない
    .page-bg__loop … bg_repeat.jpg 1000x8667 続きを repeat-y

  コンテンツ列（.lower / 800px・スライダーより下）
    .lower-bg__fade … bg02_top.png  800x278  α 0.007→0.978 のフェード。繰り返さない
    .lower-bg__tile … bg02_tile.jpg 800x255  パターン1周期を repeat-y

  ▼ なぜ background の多重指定ではなく要素を2つ置くのか
    背景を1要素にまとめて repeat-y すると、リピート層の位相は
    「その要素の上端」から始まる。上部画像の下端に来るリピート層の行は
    「上部画像の高さ ÷ リピート画像の高さ の剰余」で決まってしまい、
    987 と 8667 では剰余が0にならないため接続位置がずれる。
    上下2つの要素に分ければ、下の要素の上端＝上部画像の直下になるので
    リピートの位相が必ず0から始まり、画面幅が変わってもずれない。

  ▼ 背景を #page（main ではなく）に持たせている理由
    カンプではフッターの側帯にも風景写真が続いている。
    main だけに敷くとフッターで途切れるため、header/footer を含む
    ラッパー #page に持たせている。

  ▼ bg02 を2枚に分割した理由
    元の bg02.png（800x3031）は y=0〜278 が透明グラデーション、
    y=278以降がα1.00。そのまま repeat-y すると3031pxごとにフェードが
    再生されて背景が透ける帯が出る。
    不透明領域は均一なACTパターンで縦の繰り返し周期は実測255pxなので、
    1周期だけ切り出せば無限に繰り返せる。不透明＝アルファ不要なので
    タイルはJPEGにでき、合計199.2KB（元273.2KB）に収まっている。

  ▼ 素材差し替え時の注意
    ・bg_top / bg02_top の高さを変えたら対応する aspect-ratio も更新する
    ・bg_repeat の先頭行は bg_top の末尾行と繋がる色にする（現状の色差 5.05）
    ・bg_repeat は末尾→先頭の折返しに色差37.62があるため、
      ページ丈が 987+8667=9654px を超えると段差が見える
---------------------------*/
#page {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  /*
    フッターの赤帯の高さ。
    bg02 をこの分だけ下へ伸ばして帯の背面に潜り込ませるため、
    帯側（globalstyle.css の .site-footer__copyright）と共有している。
    片方だけ変えると帯の下に白い列が覗くので必ずセットで扱う。
  */
  --footer-band-h: 61px;
}
.page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  /*
    Retina等で境界に隙間が生じても白が透けないようにする下地。
    色は bg_repeat.jpg の先頭行を横方向9点サンプリングした実測値。
  */
  background-image: linear-gradient(to right,
      #56B2CC 0%, #3BB0D2 13%, #37BCDC 25%, #30B2D8 38%, #52BDD6 50%,
      #52BCCE 63%, #3BA3BE 75%, #6FABA4 88%, #418DA1 100%);
}
.page-bg__top {
  flex: 0 0 auto;
  width: 100%;
  /*
    ▼ 上部を切り落として表示を開始する
      bg_top.jpg の原寸は 999x987。
      分母を 987 より小さくするとその差分だけ画像の上端が切れる。
        987 → 表示開始位置は画像の先頭（切り落としなし）
        867 → 上から120px分を切り落とす（現在値）
      調整はこの分母の数値のみでよい。

    ▼ background-position を bottom にしている理由
      画像の下端は bg_repeat.jpg の先頭行と繋がる必要がある。
      bottom 基準にすれば、上をいくら切っても
      下端の接続は保たれる（top 基準だと下側がずれて隙間になる）。
  */
  aspect-ratio: 999/867;
  background: url("../img/bg_top.jpg") center bottom no-repeat;
  background-size: 100% auto;
}
.page-bg__loop {
  flex: 1 1 auto;
  min-height: 0;
  /* 上部画像と1px重ねて小数境界の隙間を塞ぐ */
  margin-top: -1px;
  background: url("../img/bg_repeat.jpg") center top repeat-y;
  background-size: 100% auto;
}

main.main {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* コンテンツ列。幅800px＝bg02の幅と一致させる（横paddingは持たせない） */
main.main .main_inner {
  position: relative;
  z-index: 1;
  width: 80%;
  margin: 0 auto;
}


/*---------------------------
メインビジュアル（見出し＋スライダー）

  カンプ実測
    見出し slider_copy.png … 681x150 / 配置(160,173)
    スライダー枠            … y292〜1040（x150〜850）
  ヘッダー高103pxを引いた main 起点で換算している。
---------------------------*/
.sec_mv {
  position: relative;
  /*
    ▼ .lower より前面に置く
      .lower は負マージンでスライダーに約205px食い込ませているため、
      DOM順（.lower が後）のままだと bg02 がスライダーを覆ってしまう。
      カンプでは bg02 はスライダーの背面に回り込む。
  */
  z-index: 2;
  /* 173 - 103 = 70px（列幅800px比 8.75%） */
  padding-top: 8.75%;
  /*
    スライダー下の余白（指示による追加）。
    ▼ .lower の --bg-rise も同じ量だけ増やしている
      ここを増やすと .lower の開始位置も下がるため、
      --bg-rise を据え置くと bg02 のスライダーへの食い込みが浅くなる。
      食い込み量を保つため 26% → 32% に合わせて引き上げている。
      余白だけ変えたい場合は両方を同じ量ずつ動かすこと。
  */
  padding-bottom: 10%;
}
.mv_copy {
  position: relative;
  z-index: 2;
  /* カンプ原寸は 681/800 = 85.1%。指示により調整（変更するのはこの数値のみ） */
  width: 78%;
  /* スライダー枠への重なり（800px比）。幅に合わせて比例させている */
  margin: 0 auto -3.6%;
  line-height: 0;
}
.mv_copy img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  スライダー枠

  ▼ 3本ラインの枠（カンプ実測）
    外→内で 青7px → ピンク6px → 金5px の計18px。
      青    #3E9CFF … 全周で一定
      ピンク #F58DFE … 全周で一定
      金            … グラデーション。上下辺は濃い金(#A47A28)、
                      左右辺は上下が濃く中央が淡い(#F9EDA3〜#F9F0AD)。
                      メタリックな金枠なので単色ではなく linear-gradient で再現する。

    金は border-image で枠自体をグラデーションにし、
    その外側のピンクと青は box-shadow のリングで重ねている。
    （border は1要素に1本しか持てないため）

  ▼ 縦横比
    カンプは777x777の正方形だが、指示によりA版縦（210:297）で固定する。
    slick が生成する内側の要素にも height:100% を渡し、
    画像は object-fit: contain で全体を収める（見切れさせない）。
*/
.slider-wrapper {
  position: relative;
  /*
    枠の幅。カンプ原寸は 777/800 = 97.1% だが指示により調整。
    box-shadow のリング（片側13px）が外側に出るため、
    見た目の外形は この値 + 26px になる点に注意。
    調整はこの数値のみでよい。
  */
  width: 92%;
  /* A版縦。枠を含むボックスの比率 */
  aspect-ratio: 210/297;
  margin: 0 auto;
  box-sizing: border-box;
  border: 5px solid transparent;
  border-image: linear-gradient(180deg,
      #A47A28 0%, #DAB469 6%, #F9EDA3 26%, #F9F0AD 52%,
      #EDD285 72%, #BF9A53 94%, #A47A28 100%) 1;
  box-shadow: 0 0 0 6px #F58DFE, 0 0 0 13px #3E9CFF;
  background: #fff;
}
.slider-wrapper .detail-slider {
  position: relative;
  height: 100%;
}
.slider-wrapper .slick-list {
  height: 100%;
}

/*
  ▼ スライドの高さを枠いっぱいまで通す

    slick は初期化時に .slick-slide を新規生成し、その中に
    「クラスの無い div」を挟んでからマークアップ側の .slide-item を包む。
    実際のDOMは次のようになる。

      .slick-track
        └ .slick-slide          ← slick が生成（インラインで width 指定）
            └ div（クラス無し）   ← slick が挿入するラッパー
                └ .slide-item    ← lp-body.php で書いている要素
                    └ img

    .slide-item を .slick-track の直接の子だと思って指定していたため、
    高さの指定が中間の2階層に届かず、画像の縦横比なりの高さで止まっていた
    （実測：トラック1030.9px に対しスライド408.4px）。

    トラックをフレックスにして .slick-slide を伸ばし、
    その下の無名ラッパーと .slide-item にも高さを通す。
    無名ラッパーはクラスが無いので直下セレクタ（>）で指定する。

    display: flex に !important が必要なのは、slick が .slide-item へ
    インラインで display を書き込むため（インラインには詳細度で勝てない）。
*/
.slider-wrapper .slick-track {
  height: 100%;
  display: flex;
  align-items: stretch;
}
.slider-wrapper .slick-slide {
  float: none;
  height: auto;
}
/* slick が挿入する無名ラッパー */
.slider-wrapper .slick-slide > div {
  height: 100%;
}
.slider-wrapper .slide-item {
  height: 100%;
  /* 画像を上下中央に置き、枠と比率が違う場合の余白を均等にする */
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.detail-slider .slide-item img {
  display: block;
  /*
    ▼ utility.css の長浜指定（aspect-ratio: 640/900）を解除する
      あちらは画像の縦横比に枠を合わせる作りだが、
      ACT版は枠をA版縦で固定して画像を流し込む作りなので、
      画像側の比率指定が残っていると枠の高さを押し広げてしまう。
  */
  aspect-ratio: auto;
  /*
    ▼ max- で上限を切る理由
      .slide-item を flex にしているため width/height の 100% だけでは
      画像の自然サイズが優先されて拡大され、枠から溢れる
      （実測で 800x450 の画像が 800x1125 になり上下47pxずつはみ出した）。
  */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* 画像を見切れさせず全体を収める。余白は枠の背景（白）が見える */
  object-fit: contain;
  /* 余白を上下左右へ均等に配分（既定値だが上書き検知のため明示） */
  object-position: center center;
}

/*
  スライダーのdots
  ▼ 長浜から引き継いだ setting.js は dotW / gap を DOM から実測する方式に変更済み。
    ここで指定した寸法がそのまま計算に使われるので、値を変えても破綻しない。
    5個を超えるとアクティブに追従してスクロールし、両端は縮小して続きがあることを示す。
*/
/*
  ▼ カスタムドットは utility.css の長浜実装をそのまま使う（ここでは上書きしない）
      .detail-slider .custom-dots button      … 35x8px のグレー四角 #c0c0c0
      .detail-slider .custom-dots .slick-active button … アクティブは赤 #c40000
      .detail-slider .custom-dots             … flex / gap 18px
      .detail-slider .custom-dots-track       … absolute / bottom 25px / max-width 247px
                                                （= 5×35 + 4×18。5個ぶんの幅）
      .slick-dots li button:before            … content:"" で slick標準の●を無効化

    setting.js は li の実寸と間隔をDOMから測るので、
    上記の 35px / 18px を変更しても計算が追従する。

  ここで重ねる指定は「ドットが枠の高さを押し広げないようにする」ためのものだけ。
  z-index はスライド画像より前面に出すために付与する。
*/
.detail-slider .custom-dots-track {
  z-index: 2;
}

/*
  ▼ スライダー下端に30pxの余白が出るのを打ち消す
    utility.css:197 の slick 標準テーマに
      .slick-dotted.slick-slider { margin-bottom: 30px }
    がある。dots を有効にすると slick が .slick-dotted を付与するため、
    枠（.slider-wrapper）の中で .detail-slider の下に30px空いてしまう。
    ACT版は dots を枠の内側に絶対配置しているのでこの余白は不要。
*/
.slider-wrapper .slick-dotted.slick-slider {
  margin-bottom: 0;
}


/*---------------------------
スライダーより下（bg02を敷く領域）
---------------------------*/
.lower {
  position: relative;
  /* .sec_mv（z-index:2）の背面に回す */
  z-index: 1;
  /*
    ▼ スライダーへの食い込み量
      カンプではスライダー枠（高さ約748px）に対して bg02 が canvas y=835 から
      始まり、約205px 食い込んでいる（列幅800px比 約25.6%）。
      実装上の隙間分を足した値をここで一括管理する。
  */
  --bg-rise: 36%;
  /*
    背景だけ上へ伸ばし、コンテンツ位置は .lower__inner の padding-top で戻す。
    margin と padding の % はどちらも「包含ブロックの幅」基準なので、
    画面幅が変わっても両者は必ず同値になり打ち消しが崩れない。
  */
  margin-top: calc(var(--bg-rise) * -1);
}
.lower-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /*
    ▼ 赤帯の高さぶん下へ伸ばす
      カンプでは白い列（bg02）がカンバス最下部まで続き、
      赤帯がその上に重なっている。
      .lower は中身（ロゴ）の終わりで閉じるため、
      ここで帯の高さぶん余分に伸ばして帯の背面に潜り込ませる。
      帯側は z-index で前面に出している（globalstyle.css 参照）。
  */
  bottom: calc(var(--footer-band-h) * -1);
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
.lower-bg__fade {
  flex: 0 0 auto;
  width: 100%;
  /* 800x278 の原寸比 */
  aspect-ratio: 800/278;
  background: url("../img/bg02_top.png") center top no-repeat;
  background-size: 100% auto;
}
.lower-bg__tile {
  flex: 1 1 auto;
  min-height: 0;
  /* フェード部と1px重ねて小数境界の隙間を防ぐ */
  margin-top: -1px;
  background: url("../img/bg02_tile.jpg") center top repeat-y;
  background-size: 100% auto;
}
.lower__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--bg-rise);
}


/*---------------------------
セクション見出し（画像）
  title_latestinfo.png / title_store.png … ともに 678x90 / 配置x=161
---------------------------*/
.sec_head {
  /* 678 / 800 = 84.75% */
  width: 84.75%;
  margin: 0 auto;
  line-height: 0;
}
.sec_head img {
  display: block;
  width: 100%;
  height: auto;
}


/*---------------------------
最新情報

  タイトル画像は使わない方針になったため見出しなし。
  SCFに動画・画像が登録されたときだけ中身が出る（未登録なら高さ0）。
  店舗一覧との間隔は .sec_store の padding-top 側で一括管理する。
---------------------------*/
.sec_latest {
  padding-top: 0;
}
.youtube-wrap {
  position: relative;
  width: 90%;
  margin: 0 auto 4%;
  aspect-ratio: 16/9;
}
.youtube-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-wrap {
  width: 90%;
  margin: 0 auto 4%;
}
.video-wrap video {
  display: block;
  width: 100%;
  height: auto;
}
.info-images-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-images-item {
  margin-bottom: 3%;
}
.info-images-item:last-child {
  margin-bottom: 0;
}
.info-images-img {
  display: block;
  width: 90%;
  height: auto;
  margin: 0 auto;
}


/*---------------------------
店舗一覧

  カンプ実測（1000pxカンバス／コンテンツ列800px）
    カード      … 362 x 381px（列幅比 45.25%）
    カード間余白 … 22px（2.75%）
    外側余白     … 左29 / 右24px（約3.3%）
    写真         … 328 x 224px・白枠4〜5px（カード幅の約90.6%）
    カード内余白 … 約17px（カード幅比 4.7%）
    店舗名       … 2行で高さ67px（1行約34px／font-size 約28px相当）
    ボタン       … カード幅いっぱい × 高さ50px・カード下端と揃う
    カードの赤   … #FE0000
---------------------------*/
.sec_store {
  /* .store-list の row-gap を cqi で解決するための基準（詳細は .store-list 参照） */
  container-type: inline-size;
  /*
    スライダー下端から店舗一覧見出しまでの間隔。
    カンプではスライダー枠下端1040 → 見出し1242 の202px（列幅800px比25.3%）だが、
    その内側に最新情報のタイトル画像（y1097〜1187）が入っていた。
    タイトル画像が無くなったぶんを詰めてこの値にしている。
    最新情報に動画・画像が登録された場合はその高さぶん下に押し出される。
  */
  padding-top: 12%;
}
.store-list {
  list-style: none;
  display: grid;
  /*
    ▼ minmax(0, 1fr) にする理由（重要）
      1fr は minmax(auto, 1fr) と同義で、auto の最小幅は
      「中身の最小コンテンツ幅」になる。
      店舗名は white-space: nowrap のため折り返せず、
      文字が列幅を超えると列そのものが押し広げられ、
      カードがコンテナから飛び出す。
      実機でフォントが少しでも横に広く描画されると発生する
      （検証：カード幅が 149.9px → 165.2px に膨張）。
      最小値を 0 にすれば列は決して広がらない。
  */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /*
    ▼ 行間に % を使わない（重要）
      グリッドの高さが auto のとき、% の row-gap は「自分の高さ」を基準に
      解決しようとして循環する。ブラウザは自身の高さを行間0で確定させた後、
      レイアウト時には解決済みの高さを基準に行間を復活させるため、
      中身が親グリッドから溢れる（実測で223pxはみ出し、フッターのロゴに重なった）。

      cqi は「コンテナの横幅」基準なので循環しない。
      ただし cqi は「自分自身」ではなく祖先のコンテナを参照するため、
      .store-list ではなく親の .sec_store をコンテナ宣言している
      （.store-list に付けてもコンテナ不在扱いになりビューポート幅が使われる）。
      6.75cqi = 列幅800px × 6.75% = 54px（カンプの行間54pxと一致）
  */
  /* カード間 22px（グリッド幅の2.75%）。横は幅基準なので % のままで問題ない */
  column-gap: 2.75%;
  row-gap: 6.75cqi;
  /* 外側余白 29px（3.6%）。見出し下端1332→カード上端1361 = 29px */
  margin: 3.6% 3.3% 0;
  padding: 0;
}
.store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /*
    ▼ 段ごとの配色反転
      カンプでは1・3・5段目が赤地／2・4段目が白地で、
      枠線・文字・ボタン・キラキラの色がすべて入れ替わる。
      2カラムなので「4枚ごとに3枚目と4枚目」が偶数段にあたる。
      色は3つの変数だけで切り替わるようにしてある。

        --card-bg     … カードとボタンの地色
        --card-fg     … 文字・写真枠・ボタン枠・キラキラの色
        --card-edge   … カード外周の枠色（奇数段は地色と同じで見えない）

      奇数段はカンプに外枠が無いが、偶数段と寸法を揃えるため
      同じ2pxの枠を地色で引いている（透明にすると背景が透けるため地色を使う）。
  */
  --card-bg: #fe0000;
  --card-fg: #fff;
  --card-edge: #fe0000;
  background: var(--card-bg);
  border: 3px solid var(--card-edge);
  /*
    ▼ 下端のみ角丸
      カンプではカード下端がボタンのピル形状に沿って丸くなっている。
      ボタンにぴったり隠れるよう、半径はボタンのピル半径と一致させる。

        ボタン高さ = カード幅 × 62/362 = 17.13%
        ピル半径   = その半分 = カード幅の 8.56%

      横半径は幅基準、縦半径は高さ基準で解決されるため、
      スラッシュ記法で別々に指定して真円に揃えている。
        横 8.56% × 362 = 31px
        縦 7.77% × 399 = 31px

      ※ボタンの高さ（aspect-ratio: 362/62）を変えたらここも合わせること。
  */
  border-radius: 0 0 8.56% 8.56% / 0 0 7.77% 7.77%;
  /*
    ▼ カードの高さは幅から確定させる（カンプ 362 x 381）
      中身の積み上げに任せると、%やcqiで指定した縦マージンが
      固有サイズ計算では0として扱われるためグリッド行高が足りず、
      ボタンがカード下端からはみ出してしまう。
      比率を固定すれば高さが幅から一意に決まり、この問題が起きない。
      同時に全10カードの高さも自動的に揃う。
  */
  aspect-ratio: 362/399;
  /*
    ▼ overflow は隠さない
      キラキラ（小星）はカンプでもカード右端をまたいで配置されているため、
      はみ出しを許可する必要がある。
  */
  /*
    ▼ cqi（コンテナのインラインサイズ1%）を使うための宣言
      カード内の文字サイズ・線幅をすべて「カード幅に対する%」で持たせられる。
      ビューポート基準のvwだと、列幅が 800px 固定になるPCと
      88vw になるSPで比率が変わってしまうため、カード基準にしている。
      → SP用のfont-size上書きが不要になり、どの画面幅でもカンプの比率を保つ
  */
  container-type: inline-size;
}

/* 偶数段（2・4段目）＝白地に赤で反転 */
.store-card:nth-child(4n + 3),
.store-card:nth-child(4n + 4) {
  --card-bg: #fff;
  --card-fg: #fe0000;
  --card-edge: #fe0000;
}

/* 写真（キラキラの位置基準はカード側にするため position は付けない） */
.store-card__photo {
  /* 固有サイズ計算で潰れないよう縮小を禁止する */
  flex: 0 0 auto;
  /*
    カード内余白 17px（カード幅362の4.7%）。
    ▼ %ではなく cqi を使う理由
      %マージンは固有サイズ計算では0として扱われるため、
      グリッド行高が margin 抜きで確定してしまい、
      レイアウト時に効いた margin の分だけ下端が overflow:hidden で切れる。
      cqi は長さなので固有サイズ計算でも正しく解決される。
  */
  margin: clamp(4px, 1.9vw, 17px) clamp(4px, 1.9vw, 17px) 0;
  margin: 4.7cqi 4.7cqi 0;
  /* カンプの枠 4〜5px は カード幅362の約1.2%。色は段ごとに反転 */
  border: max(2px, 1.2cqi) solid var(--card-fg);
  background: var(--card-fg);
  /*
    ▼ このボックスには aspect-ratio を付けない（重要）
      縦方向のフレックスアイテムに flex: 0 0 auto と aspect-ratio を併用すると、
      高さが先に確定した場合に幅が比率から逆算され、カード幅を超えることがある。
      Chrome は幅を優先して伸ばすが WebKit（iOS）は比率から幅を出すため、
      実機で写真がカードの右へはみ出していた。
      比率は下の img 側に持たせ、このボックスは幅いっぱいに伸びるだけにする。
  */
  width: auto;
  max-width: 100%;
}
.store-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* 高さはここで決める（カンプの表示窓 322x224） */
  aspect-ratio: 322/224;
  /* 書き出し画像は縦が216〜225pxでばらつくため cover で吸収する */
  object-fit: cover;
}

/* 店舗名（キラキラの位置基準はカード側にするため position は付けない） */
.store-card__name {
  flex: 1 1 auto;
  /*
    写真との間隔10.5px・ボタンとの間隔14px（%ではなくcqi。理由は写真の注記参照）。
    下余白は指示により拡大。カード高さ(aspect-ratio)もこの分を含めて算出している。
  */
  margin: clamp(3px, 1.2vw, 10px) clamp(4px, 1.9vw, 17px) clamp(3px, 1.6vw, 14px);
  margin: 2.9cqi 4.7cqi 3.9cqi;
  color: var(--card-fg);
  font-weight: 900;
  /*
    カンプ 28px ÷ カード幅362px = 7.7%。
    ▼ 直前の clamp は cqi 非対応環境（iOS Safari 16未満など）向けの保険
      cqi が無効値として破棄されると font-size が body から継承した16pxになり、
      カード高さは aspect-ratio で固定のため中身が溢れる。
      非対応ブラウザは2行目を捨てて1行目を採用する。
  */
  font-size: clamp(10px, 3.1vw, 28px);
  font-size: 7.7cqi;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  /* 1行の店舗でもカード高さを揃えるため2行分を確保する（7.7 × 1.2 × 2） */
  min-height: clamp(24px, 7.4vw, 67px);
  min-height: 18.5cqi;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.store-card__name-line {
  display: block;
  white-space: nowrap;
}

/* ボタン（カード幅いっぱい・下端揃え） */
.store-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /*
    縮小を禁止し、高さは原寸比で出す。
    カンプ実測は 362:50。指示により縦を拡大（分母を上げるほど高くなる）。
  */
  flex: 0 0 auto;
  /*
    ▼ カードのボーダー(2px)の外側まで広げる
      width:100% だとカードの内寸（362-6=356px）にしか広がらず、
      ボタンの左右にカードの地色が3pxずつ残ってしまう。
      左右のマージンを負にしてボーダー分を打ち消し、
      カードの外形と完全に一致させる。
  */
  width: calc(100% + 6px);
  margin: 0 -3px -3px;
  aspect-ratio: 362/62;
  /* カンプ実測は3px（カード幅362の0.83%）。指示により調整 */
  border: max(3px, 1.05cqi) solid var(--card-fg);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--card-fg);
  font-weight: 900;
  /* カンプ実測は20px（カード幅362の5.5%）。指示により拡大。clampは上と同じ保険 */
  font-size: clamp(9px, 2.9vw, 26px);
  font-size: 7.2cqi;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.store-card__btn:link,
.store-card__btn:visited {
  color: var(--card-fg);
}
.store-card__btn:hover {
  opacity: 0.82;
}
.store-card__btn--disabled {
  opacity: 0.45;
  cursor: default;
}

/*
  キラキラ（4方向星）

  形状はカンプ計測＋ベジェフィッティング（IoU 94.2%）。定義は header.php の <symbol>。
  viewBox が星の外形ぴったり（200x234）なので、width がそのまま見た目のサイズになる。

  ▼ fill は必ず svg 要素側に指定する
    .spark path { fill } と書くと <use> のシャドウツリーに届かず黒くなる。

  ▼ グローは使わない
    赤に反転する段でぼやけた赤が周囲ににじむため廃止した。

  ▼ 配置（カンプ2段目カードの実測値。カード 362x381 に対する比率）
    1カードに4つ＝「左上の大小ペア」と「店舗名右の大小ペア」。
    左上の大星はカード上端をまたいで外にはみ出す（top が負）。

      左上・大   中心( 14.5, -12)  37px
      左上・小   中心( 34,     8)  17px
      名前右・大 中心(331,   300)  37px
      名前右・小 中心(351,   320)  17px

    left/top は「中心 − 要素サイズの半分」で算出している。
*/
.spark {
  position: absolute;
  display: block;
  /* 段ごとに白／赤が入れ替わる */
  fill: var(--card-fg);
  pointer-events: none;
  aspect-ratio: 200/234;
  z-index: 2;
}
.spark--tl-lg {
  /* 中心( 14.5, -12)。top はカード高さ399基準 */
  width: 8.6%;
  left: -0.3%;
  top: -7.57%;
}
.spark--tl-sm {
  /* 中心( 34, 8) */
  width: 4.7%;
  left: 7.04%;
  top: -0.49%;
}
.spark--nm-lg {
  /* 中心(331, 290)。カード高さ拡大で店舗名が上に寄るため追従させている */
  width: 8.6%;
  left: 87.13%;
  top: 68.12%;
}
.spark--nm-sm {
  /* 中心(351, 310) */
  width: 4.7%;
  left: 94.61%;
  top: 75.2%;
}


/*---------------------------
グループロゴ（白い列の上に乗せる）
  logo_footer.png … 274x171 / 配置(362,3579)
---------------------------*/
.group-logo {
  /* 274 / 800 = 34.25% */
  width: 34.25%;
  /* カード最終行下端3490 → ロゴ上端3579 = 89px（11.1%） */
  margin: 11.1% auto 0;
  padding-bottom: 7%;
  line-height: 0;
}
.group-logo img {
  display: block;
  width: 100%;
  height: auto;
}


/*===========================================================
  SP（基本レイアウトはPCと同一。2カラムを維持する）
===========================================================*/
@media (max-width: 768px) {
  main.main .main_inner {
    width: 88%;
  }

  /*
    ▼ SP：フッターの赤帯を細くする
      61px は1000px幅のカンプで6.1%だが、375px幅では16.3%になり太すぎる。
      変数を上書きするだけで、帯の高さと bg02 の延長量が同時に追従する
      （globalstyle.css の .site-footer__copyright と .lower-bg が同じ変数を参照）。
  */
  #page {
    --footer-band-h: 38px;
  }

  /*
    カード内の文字サイズ・線幅は cqi（カード幅基準）で指定しているため、
    SP用の上書きは不要。自動で比率を保って縮小する。
  */

  /*
    ▼ SP：スライダー枠を細める
      枠の3本ライン（金5+ピンク6+青7＝18px）は固定pxのため、
      SPでは列幅に対して相対的に太くなりすぎる。
      カンプ比（777pxの枠に18px＝2.3%）に近づけるよう縮小し、
      あわせて枠自体の幅も下げて左右の余白を確保する。
        375px幅の場合： 列 330px ／ 枠 277px ＋ リング14px = 291px（左右各20px）
      ※縦横比（A版縦 210:297）は変更しない
  */
  .slider-wrapper {
    width: 88%;
    border-width: 2px;
    box-shadow: 0 0 0 4px #F58DFE, 0 0 0 7px #3E9CFF;
  }

  /*
    ▼ SP：カードとボタンのボーダーを1px細める
      どちらも固定pxのため、カード幅が縮むSPでは相対的に太くなる
      （SPのカード幅は約149px。3pxは2.0%で、PCの0.83%に対して過剰）。

      ▼ ボタンの打ち消し量も必ず一緒に変えること
        ボタンはカードのボーダー外側まで広げるため負マージンで打ち消している。
        カード側だけ 3px→2px にすると、ボタンが左右に1pxずつはみ出す。
  */
  .store-card {
    border-width: 2px;
  }
  .store-card__btn {
    border-width: 2px;
    width: calc(100% + 4px);
    margin: 0 -2px -2px;
  }

  footer .site-footer__copyright {
    font-size: 2.6vw;
  }
}