/* 既存上書き */
#dc__menu_2nd .dc__menu_list li {
    margin: 0 1.6%;
}


/* ユーティリティclass */
/* ==========================================================================
   Utility — gold ページ共通
   ブレークポイント: 768px以下 = SP
   ========================================================================== */

/* ── 表示切り替え ── */
.u-pc { display: block; }
.u-sp { display: none; }

@media screen and (max-width: 768px) {
  .u-pc { display: none; }
  .u-sp { display: block; }
}

/* inline要素向け（aタグ・spanなど） */
.u-pc-inline { display: inline; }
.u-sp-inline { display: none; }

@media screen and (max-width: 768px) {
  .u-pc-inline { display: none; }
  .u-sp-inline { display: inline; }
}

/* flex要素向け */
.u-pc-flex { display: flex; }
.u-sp-flex { display: none; }

@media screen and (max-width: 768px) {
  .u-pc-flex { display: none; }
  .u-sp-flex { display: flex; }
}


/* ── テキスト寄せ ── */
/* !important：他のCSSに負けずに必ず適用させるための強制指定 */
.u-text-left   { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right !important; }

@media screen and (max-width: 768px) {
  .u-text-left-sp   { text-align: left !important; }
  .u-text-center-sp { text-align: center !important; }
  .u-text-right-sp  { text-align: right !important; }
}


/* ── マージン（上下左右 × 5段階） ── */
/*
  xs :  8px
  sm : 16px
  md : 24px
  lg : 40px
  xl : 64px
*/

.u-mt-xs { margin-top:  8px !important; }
.u-mt-sm { margin-top: 12px !important; }
.u-mt-md { margin-top: 20px !important; }
.u-mt-lg { margin-top: 40px !important; }
.u-mt-xl { margin-top: 64px !important; }
.u-mt-0  { margin-top:  0   !important; }

.u-mb-xs { margin-bottom:  8px !important; }
.u-mb-sm { margin-bottom: 16px !important; }
.u-mb-md { margin-bottom: 24px !important; }
.u-mb-lg { margin-bottom: 40px !important; }
.u-mb-xl { margin-bottom: 64px !important; }
.u-mb-0  { margin-bottom:  0   !important; }

.u-ml-xs { margin-left:  8px !important; }
.u-ml-sm { margin-left: 16px !important; }
.u-ml-md { margin-left: 24px !important; }
/* margin-left: auto → 左に残った余白を全部使い、要素を右端に寄せる。u-mr-auto と組み合わせると中央揃えになる */
.u-ml-auto { margin-left: auto !important; }

.u-mr-xs { margin-right:  8px !important; }
.u-mr-sm { margin-right: 16px !important; }
.u-mr-md { margin-right: 24px !important; }
.u-mr-auto { margin-right: auto !important; }

/* 左右両方 auto にするとブロック要素が水平中央揃えになる */
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* SP専用マージン上書き */
@media screen and (max-width: 768px) {
  .u-mt-xs-sp { margin-top:  8px !important; }
  .u-mt-sm-sp { margin-top: 16px !important; }
  .u-mt-md-sp { margin-top: 24px !important; }
  .u-mt-lg-sp { margin-top: 40px !important; }
  .u-mt-0-sp  { margin-top:  0   !important; }

  .u-mb-xs-sp { margin-bottom:  8px !important; }
  .u-mb-sm-sp { margin-bottom: 16px !important; }
  .u-mb-md-sp { margin-bottom: 24px !important; }
  .u-mb-lg-sp { margin-bottom: 40px !important; }
  .u-mb-0-sp  { margin-bottom:  0   !important; }
}


/* ── パディング ── */
.u-pt-xs { padding-top:  8px !important; }
.u-pt-sm { padding-top: 16px !important; }
.u-pt-md { padding-top: 24px !important; }
.u-pt-lg { padding-top: 40px !important; }
.u-pt-0  { padding-top:  0   !important; }

.u-pb-xs { padding-bottom:  8px !important; }
.u-pb-sm { padding-bottom: 16px !important; }
.u-pb-md { padding-bottom: 24px !important; }
.u-pb-lg { padding-bottom: 40px !important; }
.u-pb-0  { padding-bottom:  0   !important; }


/* ── フォントサイズ ── */
.u-text-xs { font-size: 11px !important; }
.u-text-sm { font-size: 13px !important; }
.u-text-md { font-size: 15px !important; }
.u-text-lg { font-size: 18px !important; }
.u-text-xl { font-size: 20px !important; }
@media screen and (max-width: 768px) {
.u-text-xl-sp { font-size: 20px !important; }
}

.u-text-bold   { font-weight: bold !important; }
.u-text-normal { font-weight: normal !important; }


/* ── 幅 ── */
.u-w-full { width: 100% !important; }
.u-w-half { width: 50% !important; }


/* ── 背景色 ── */
.bg-lightblue {
  background-color: #F4F9FF;
}
.bg-blue {
  background-color: #E0F3FF;
}
.bg-gray {
  background-color: #F7F7F7;
}
.bg-white {
  background-color: #FFF;
}

/* フォントカラー */
.u-color-gold {
  color: #A6903A !important;
}
.u-color-black {
  color: #263033;
}
.gold-text-grove {
  color: #A6903A;
}
.gold-text-star {
  color: #004C97;
}

/* リンク設定 */
/* display: inline-flex → inline（テキストと同じ行に並べられる）+ flex（内部を横並びに整列）の組み合わせ */
.gold-link {
  font-size: 15px;
  color: #2477ab;
  text-decoration: none;
}
[class*='gold-link--']:before {
    position: relative;
    top: 2px;
    padding-right: 8px;
    font-family: fontello;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    text-align: center;
    width: auto;
    height: auto;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}
.gold-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* 下矢印版: ::before でCSSだけ矢印を作る。
   border-right と border-bottom で「L字形の枠線」を描き、
   rotate(45deg) で45度傾けることで「∨形」にする */
.gold-link--down::before {
  content: '\f107';
  font-size: 24px;
  line-height: 15px;
}
.gold-link--up::before {
  content: '\f106';
  font-size: 24px;
  line-height: 15px;
}

/* 右矢印版: rotate(-45deg) で逆方向に傾けて「>形」にする */
.gold-link--right::before {
  content: '\f105';
  font-size: 24px;
  line-height: 15px;
}
.gold-link--blank::before {
  content: '\e806';
  line-height: 15px;
}

.gold-link.gold-link--sm {
  font-size: 13px;
  padding-left: 3px;
}

.gold-link--sm.gold-link--down::before {
  content: '\f107';
  font-size: 20px;
  line-height: 13px;
}
.gold-link--sm.gold-link--up::before {
  content: '\f106';
  font-size: 20px;
  line-height: 13px;
}

/* 右矢印版: rotate(-45deg) で逆方向に傾けて「>形」にする */
.gold-link--sm.gold-link--right::before {
  content: '\f105';
  font-size: 20px;
  line-height: 13px;
}

.gold-link--sm.gold-link--blank::before {
  content: '\e806';
  line-height: 13px;
}



.gold-link--nav {
  display: block;
  color: #002554;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10.6px;
}
.gold-link--nav a {
  color: #002554;
  text-decoration: none;   
}
.gold-link--nav a:hover {
  text-decoration: underline;
}

.gold-link--nav::before {
  color: #002554;
  font-size: 26px;
  padding-right: 8px;
  line-height: 18px;
}
@media screen and (max-width: 768px) {
  .gold-link--nav {
    font-size: 16px;
  }
  .gold-link--nav::before {
    font-size: 24px;
    line-height: 16px;
  }
}
.list-default>li {
    padding-left: 1.8rem;
    position: relative;
}
.list-default>li:before {
    content: '';
    width: .6rem;
    height: .6rem;
    border-radius: 100%;
    background-color: #999;
    position: absolute;
    left: .3rem;
    top: .8rem;
}

.list-default--col2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* 3番目以降だけ強制的に次の行へ */
.list-default--col2 > li:nth-child(n+3) {
  flex-basis: 100%;
}

@media (max-width: 768px) {
  .list-default--col2 {
    flex-direction: column;
  }
}


.list-kome>li {
    font-size: 13px;
    padding-left: 1.8rem;
    position: relative;
}
.list-kome>li:before {
    content: '※';
    position: absolute;
    left: 0;
}
.list-kome-kakkonote > li {
  font-size: 13px;
  padding-left: 3.5em;  /* 「（※1）」の文字幅に合わせる */
  text-indent: -3.5em;  /* 1行目だけ左に引っ張って※を左端に出す */
  position: relative;
}

.list-center {
  width: fit-content;
  margin: 12px auto 0;
}
@media (max-width: 768px) {
  .list-center {
    margin: 0;
  }
}
.gold-table {
  border-collapse:collapse;
  width:100%;
  border:1px solid #dbdbdb;
  border-bottom:none;
}
.gold-table td {
  background-color:#fff;
}
.gold-table tr {
  width:100%;
}
.gold-table th, .gold-table td {
  border:1px solid #dbdbdb;text-align:left;
}
.gold-table th {
  background-color:#e9e9e9;font-weight:normal;width:20%;
}
.gold-table .gold-table-gray {
  background-color:#f8f8f8;
}
.gold-table th, .gold-table td {
  padding:1.2rem;
}
@media only screen and (max-width: 768px) {
  .gold-table .gold-table-gray {
    background-color:#f8f8f8;
  }
  .gold-table th, .gold-table td {
    width:100%;display:block;border-top:none;border-right:none;border-left:none;
  }
}

/* =================================================================
  【KV WRAPPER】.kv
  ----------------------------------------------------------------- */
.kv {
  position: relative;
  width: 100%;
  height: 524px;
  /* overflow: hidden → 中の絶対配置要素やズームアニメーションがはみ出しても外に見えないようクリッピングする */
  overflow: hidden;
}

@media (max-width: 768px) {
  .kv {
    height: 1024px;
  }
}

/* =================================================================
  【KVスライド】.kv-slide
  ----------------------------------------------------------------- */
.kv-slide {
  position: absolute;
  /* inset: 0 → top/right/bottom/left すべてを0にする省略形。親要素全体を覆う */
  inset: 0;
  opacity: 0;
  /* transition → プロパティ変化をアニメーションで滑らかに見せる設定
     cubic-bezier(0.4, 0, 0.2, 1) はGoogleマテリアルデザインの標準イージング。
     自然な加速・減速でフェードする。数値を変えるとリズムが変わる */
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* pointer-events: none → 非表示スライドがクリック・タップを受け取らないようにする */
  pointer-events: none;
}
.kv-slide.is-active {
  opacity: 1;
  /* is-active のときだけクリックを受け付ける */
  pointer-events: auto;
}

/* =================================================================
  【背景レイヤー】.kv-bg-area / .kv-bg-layer
  ----------------------------------------------------------------- */
.kv-bg-area {
  position: absolute;
  inset: 0;
  /* ズームアニメーションで背景画像がはみ出しても外へ漏れないようクリッピング */
  overflow: hidden;
}

.kv-bg-layer {
  position: absolute;
  inset: 0;
  /* background-size: auto 300px; */
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 3.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* transform-origin → ズームの基点。右寄り（70%）を中心に縮小する */
  transform-origin: 30% 50%;
  /* will-change → このプロパティが変化することをブラウザに事前通知し、GPUレイヤーに昇格させる。
     アニメーションが滑らかになる。多用するとメモリを消費するため、必要な要素のみに使う */
  will-change: opacity, transform;
}
.kv-bg-layer.is-active {
  /* forwards → アニメーション終了後も to{} の状態を維持する。
     指定しないとアニメーション後に元の状態（scale(1.00)）に戻ってしまう */
  animation: kvBgZoom 5s ease-out forwards;
}

/* Ken Burnsエフェクト（ゆっくり縮小）。scale(1.05)→scale(1.00)で5%縮小。
   終点を1.00にすることで画像が容器より小さくなるのを防ぐ */
@keyframes kvBgZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.00); }
}

/* Slide① の背景画像 */
.kv-slide--1 .kv-bg-layer {
  background-image: url('/content/dam/diners/img/cardlineup/dinersclubgold/service/pc_kv_01_A.jpg');
}
/* Slide② の背景画像 */
.kv-slide--2 .kv-bg-layer {
  background-image: url('/content/dam/diners/img/cardlineup/dinersclubgold/service/pc_kv_02_A.jpg');
}

@media (max-width: 768px) {
  .kv-bg-layer {
    background-size: cover;
    transform-origin: 70% 25%;
  }
  .kv-slide--1 .kv-bg-layer {
    background-image: url('/content/dam/diners/img/cardlineup/dinersclubgold/service/sp_kv_01_A.jpg');
  }
  /* Slide② の背景画像 */
  .kv-slide--2 .kv-bg-layer {
    background-image: url('/content/dam/diners/img/cardlineup/dinersclubgold/service/sp_kv_02_A.jpg');
  }
}

/* =================================================================
  【グラデーションオーバーレイ】.kv-bg-overlay
  KV下端の帯にだけ重ねる（画像全体は覆わない）
  ----------------------------------------------------------------- */
.kv-bg-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 500px;
  /* pointer-events: none → 装飾用レイヤーなので下のリンク等のクリックを邪魔しない */
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 768px) {
  .kv-bg-overlay {
    height: 800px;
  }
}

.kv-bg-overlay--1 {
  /* スター：#0D142E ベース、ほぼ変化なし */
  /* linear-gradient(方向, 開始色 位置%, 終了色 位置%) → 指定方向にグラデーション。
     rgba() の第4引数が透明度（1.0=不透明, 0=透明） */
  background: linear-gradient(to bottom, rgba(13, 20, 46, 1.00) 0%, rgba(13, 20, 46, 0.95) 100%);
}
.kv-bg-overlay--2 {
  /* グローブ：#C38928 ベース、ほぼ変化なし */
  background: linear-gradient(to bottom, rgba(195, 137, 40, 1.00) 0%, rgba(195, 137, 40, 0.95) 100%);
}

/* =================================================================
  【KV テキストエリア】.kv-text-area
  スライドの外（.kv 直下）に置く共通テキストブロック。
  デスクトップ基準。SP は max-width で上書き。
  ----------------------------------------------------------------- */
.kv-text-area {
  position: absolute;
  top: 96px;
  /* left:50% + translateX(-50%) → 要素の左端を画面中央に置き、
     要素幅の半分だけ左にずらして水平中央揃えを実現するテクニック */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 30px;
}

.kv-text-area h1 {
  width: 50%;
}
.kv-text-area h1 img {
  width: 100%;
  max-width: 553px;
}

@media (max-width: 768px) {
  .kv-text-area h1 {
    width: 100%;
  }
  .kv-text-area {
    padding: 0;
    left: 4.2%;
    top: 36px;
    transform: translateX(0%);
    width: calc(100% - 32px);
  }
}

/* =================================================================
  【PNG カードエリア】.kv-card-area / .kv-png-seq
  デスクトップ基準。SP は max-width で上書き。
  ----------------------------------------------------------------- */
.kv-card-area {
  position: absolute;
  /* left の計算式：
     デザイン幅 1920px での カード左端位置 968px をもとに算出
     中央 = 1920 ÷ 2 = 960px
     968 - 960 = 8px（中央より右に 8px）
     → calc(50% + 8px)
     ※ 位置を変えるときは「目標px - 960」を計算して + か - を決める
       中央より左なら calc(50% - ○px)、右なら calc(50% + ○px) */
  left: calc(50% + 8px);
  top: 90px;
  width: 288px;
  height: 226.5px;
  z-index: 5;
}
.kv-card-area.kv-card-area--star {
  top: 52.5px;
  /* (255 - 184)/2 を90から引く */
  left: calc(50% - 28.5px);
  /* (357 - 288)/2 して8を引く */
  width: 357px;
  height: 256px;
}
.kv-png-seq {
  position: relative;
  width: 100%;
  height: 100%;
  /* overflow: hidden → border-radius の角丸に合わせて、絶対配置された画像をクリッピングする。
     これがないと画像が角丸を無視してはみ出す */
  overflow: hidden;
}

@media (max-width: 768px) {
  .kv-card-area {
    top: 280px;
    left: 20px;
    width: 220px;
    height: 182px;
    transform: none;
  }
  .kv-card-area.kv-card-area--star {
    top: 251.5px;
    left: -8px;
    width: 272px;
    height: 210px;
  }
}

.kv-png-item {
  position: absolute;
  /* inset: 0 で親(.kv-png-seq)全体に重ねて配置 */
  top: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.kv-png-item.is-active { opacity: 1; }

/* カード下のキャプションテキスト（「グローブデザイン」等） */
.kv-img-txt {
  position: absolute;
  bottom: 0;
  width: 132px;
}
.kv-img-txt img {
  width: 100%;
}
.kv-img-txt.kv-img-txt--star {
  left: 35.5px;
  bottom: -8px;
}
@media (max-width: 768px) {
  .kv-img-txt.kv-img-txt--star {
    bottom: 0px;
    left: 32px;
  }
}
/* =================================================================
  【アンカーリンクエリア】.kv-links / .kv-link
  デスクトップ基準（3列）。SP は max-width で1列に上書き。
  ----------------------------------------------------------------- */
.kv-links {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 30px;
  /* display: grid → 子要素をグリッド（格子）レイアウトで並べる */
  display: flex;
  flex-wrap: wrap;          /* 4つ以上になったら折り返す */
  justify-content: center;  /* 全行まとめて中央揃え */
  gap: 1.2rem 16px;
  align-items: center;
}

.kv-link {
  display: flex;
  align-items: center;
  width: calc(25% - 16px); /* 4列になる幅。gapの分を引く */
  min-width: 80px;            /* 小さくなりすぎる防止 */
  height: 64px;
  padding: 9px 16px 7px;
  /* rgba(255,255,255,0.92) → 白の92%不透明。背景画像がうっすら透けて見える */
  background: #FFFFFF;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #004C97;
  position: relative;
  /* overflow: hidden → ::before で作るサイドバー装飾が枠外にはみ出さないようにする */
  overflow: hidden;
  /* 複数プロパティを個別の時間でアニメーション指定できる */
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 0px 0px rgba(0,0,0,0.16);
  line-height: 1.5;
}

.kv-link img {
  width: 32px;
  height: auto;
  margin-right: 26px;
}

@media (max-width: 768px) {
  .kv-links {
    padding: 0.8rem 1.6rem 0;
    display: block;
  }
  .kv-link {
    width: 100%;
    margin-top: 10px;
  }
}

@media (min-width: 769px) {
.kv-link:hover {
  background: #fff;
  /* translateY(-2px) → ホバー時に2px上に浮き上がる動き。box-shadowと組み合わせて「持ち上がった」感を演出 */
  /* transform: translateY(-2px); */
  box-shadow: 0 6px 22px rgba(0,0,0,0.8);
  opacity: 0.9;
}
}

.kv-link::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #004C97;
    border-bottom: 2px solid #004C97;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: -4px;
    position: absolute;
    right: 16px;
}

/* =================================================================
  【navi】SP 2階層追従メニュー
  デスクトップファースト：SP（767px以下）のみ sticky 表示。
  ----------------------------------------------------------------- */

/* CSS カスタムプロパティ（CSS変数）: --変数名 で定義し var(--変数名) で参照する。
   値を1か所で管理でき、JSからも変更できる。:root はページ全体のルート要素（html）を指す */
:root {
  --sp-header-height: 45px;
}

@media (max-width: 768px) {
  /* :has() → 「指定した子孫を含む親要素」へスタイルを当てる現代的なセレクタ。
     特定クラスを持つ子が存在するときだけ親を sticky にできる */
  .experiencefragment:has(.cmp-experiencefragment--dinersclubgold_lv2) {
    position: sticky !important;
    /* var(--変数名) で上で定義したCSS変数を参照 */
    top: var(--sp-header-height);
    z-index: 900;
    width: 100%;
    background-color: #fff;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  /* フッター到達時にメニューを上方向にスライドアウトして隠す */
  .experiencefragment.is-menu-stopped {
    /* translateY(-100%) → 要素の高さ分だけ上に移動して画面外に退場させる */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  /* アンカーリンクでジャンプしたとき、セクション見出しが sticky ナビの下に隠れないよう余白を確保。
     section[id] だと <h3 id="tabelog"> など section 以外のアンカー対象に当たらないため [id] に変更。
     scroll-margin-top はスクロール先になった時だけ効くため、他の id 要素への影響はない。
     --sp-nav-offset は JS（script.js ブロック⑦）が初回に実測値をセットする */
  [id] {
    scroll-margin-top: var(--sp-nav-offset, 90px);
  }
}


.content-wrap {
  /* min-width: 1180px; */
  max-width: 1240px;
  padding: 40px 30px 54px;
  margin: 0 auto;
}
.content-wrap--lg {
  padding: 54px 30px 72px;
  margin: 0 auto;
}
.content-wrap--noh2 {
  padding: 54px 15px 54px;
}

@media screen and (max-width: 768px) {
  .content-wrap {
      min-width: 100%;
      max-width: 100%;
      padding: 40px 12px 54px;
  }
  .content-wrap--noh2 {
    padding: 40px 12px 54px;
  }
}

/* =================================================================
  【h2 キャラクターアニメーション】バニラJS版 / プラグインなし
  ----------------------------------------------------------------- */

/* perspective → 子要素に3D変換をかけるとき「カメラが何px離れているか」を設定する。
   900px は中程度の奥行き感。数値が小さいほど3D効果が強調される。
   親要素に設定することで、子（.kc）の3D変換がこの視点距離で計算される */
/* .h2c, .big { perspective: 900px; } */ /* scaleY削除により3D変換不要のためコメントアウト */
.h2c, .big { -webkit-font-smoothing: antialiased; font-smooth: always; }

/* .kl は1行分のラッパー。overflow:hidden が演出の核心。
   .kc（各文字）が「下」からスライドアップしてくるが、
   overflow:hidden があることで「枠外（下）にある間は見えない」状態を作る。
   これでカーテンの裏から文字が出てくるような演出になる。
   padding/margin のマイナス指定で行の外側にはみ出ないよう調整している */
.kl {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  padding: .3em .14em;
  margin: -.3em -.14em;
}

/* 各文字の初期状態（アニメーション開始前）
   translateY(108%): 自身の高さより少し下に配置（.klのoverflow:hiddenで見えない）
   scaleY(0.48): 縦方向に半分つぶれた状態
   scaleX(1.16): 横方向に少し引き伸ばした状態
   → つぶれた文字が下から飛び出してくる演出の出発点 */
.kc {
  display: inline-block;
  /* transform: translateY(108%) scaleY(0.48); */ /* scaleY あり（戻す場合はコメントを外す） */
  transform: translateY(108%);
  opacity: 0;
  /* transform-origin: 50% 100% → 変形の基点を「下端の中央」に設定。
     これにより文字が「床を踏みしめて立ち上がる」ような動きになる。
     デフォルト（50% 50% = 中心）だと文字が浮いて見える */
  transform-origin: 50% 100%;
  /* backface-visibility: hidden; */ /* scaleY削除により裏面が見える状況がなくなったためコメントアウト */
  /* will-change: transform, opacity; */ /* GPUレイヤー強制昇格によるアンチエイリアス切替を防ぐためコメントアウト */
}


/* is-played が付与されるとアニメーション開始
   cubic-bezier(0.34, 1.56, 0.64, 1) → 第2引数が1.0を超えるとばねのようにオーバーシュートする弾む動きになる */
.h2c.is-played .kc {
  animation: kvCharIn 0.92s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  /* animation: kvCharIn 0.92s cubic-bezier(0.34, 1.05, 0.64, 1) forwards; */ /* バネ弱め版（戻す場合はコメントを外す） */
}
@keyframes kvCharIn {
  /* from { transform: translateY(108%) scaleY(0.48); opacity: 0; } */ /* scaleY あり（戻す場合はコメントを外す） */
  from { transform: translateY(108%); opacity: 0; }
  /* to   { transform: translateY(0)     scaleY(1);   opacity: 1; } */ /* scaleY あり（戻す場合はコメントを外す） */
  to   { transform: translateY(0);    opacity: 1; }
}

/* h2c-ready はJSがviewport外要素にのみ付与。CSSより先にblurが見えないよう制御 */
.h2c.h2c-ready { filter: none; }
.h2c.h2c-ready.is-played { animation: none; filter: none; }
/* 初期表示時 viewport 内要素・iOS Safari restore 後のぼかし完全抑制 */
.h2c.is-instant {
  filter: none !important;
  animation: none !important;
}
/* SP ではblurアニメーションを無効化 */
@media (max-width: 768px) {
  .h2c.h2c-ready { filter: none; }
  .h2c.h2c-ready.is-played { animation: none; filter: none; }
}




/* ── カテゴリタグ ── */
.gold-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  line-height: 1;
}

.gold-tag__icon {
  max-width: 80px;
  height: auto;
  text-align: center;
  padding: 8px;
}

.gold-tag__icon img {
  width: 64px;
  height: auto;
}

.gold-tag__label {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  color: #004C97;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 5px;
}

@media screen and (max-width: 768px) {
  /* SP では縦並びに変更 */
  .gold-tag {
    flex-direction: column;
    gap: 8px;
  }
  .gold-tag__label {
    padding-top: 0;
    font-size: 28px;
    font-weight: bold;
  }
}

/* アイコンの初期状態（非表示） */
.gold-tag__icon {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease; /* 元: 0.35s */
}

/* :has() → 「.gold-tag の子孫に .is-played が存在するとき」という条件セレクタ。
   JSは一切変更せず、.h2c に is-played が付いたことをCSSだけで検知してアイコンを動かす */
.gold-tag:has(.is-played) .gold-tag__icon {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
  コンテンツカード
============================================================ */
.gold-card {
  background: #fff;
  border-radius: 32px;
  /* overflow: hidden → border-radius の角丸に合わせて、内部の画像をクリッピングする */
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(77, 61, 38, 0.10);
  max-width: 100%;
  padding: 48px 32px;
  margin-top: 40px;
  /* ---- スクロールフェードインの初期状態 ----
     opacity: 0           → 透明（見えない）
     translateY(24px)     → 24px 下にずらした位置から始まる
     transition           → is-played が付いたとき、0.55s かけてなめらかに変化する
     ease-out             → 最初は速く、終盤にゆっくり止まる動き
     ---------------------------------------- */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
/* JS が .is-played を付けた瞬間から transition が動き出し、表示 + 元の位置に戻る */
.gold-card.is-played {
  opacity: 1;
  transform: translateY(0);
}
.gold-card--hassubcontents {
  padding-bottom: 0;
}
.gold-card__2colwrap {
  display: flex;
  gap: 32px;
}
.gold-card__2colwrap--small {
  gap: 24px;
}
.gold-card__2col {
  width: calc(50% - 16px);
}
.gold-card__2colwrap--2nd {
  margin-top: 40px;
}

.gold-card__img {
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.gold-card__img--card {
  border-radius: 0px;
}
.gold-card__title {
  font-size: 26px;
  font-weight: bold;
  color: #002554;
  margin: 0 0 27.5px;
  /* position: relative → ::after 擬似要素を absolute で配置するための基点になる */
  position: relative;
  text-align: center;
}
.gold-card__title::after {
  content: '';
  display: block;
  width: 75px;
  height: 2px;
  background: #002554;
  /* margin: auto で水平中央揃え */
  margin: 15px auto 0;
}

.gold-card__text {
  font-size: 15px;
  color: #263033;
  margin-top: 19.5px;
}
.gold-card__text--pccenter {
  text-align: center;
}
.gold-card__title--icon img {
  width: 40px;
}
.gold-card__link {
  margin-top: 19.5px;
}

@media (max-width: 768px) {
  .gold-card {
  display: block;
  /* overflow: hidden → border-radius の角丸に合わせて、内部の画像をクリッピングする */
  overflow: hidden;
  border-radius: 16px;
  padding: 12px;
  margin-top: 32px;
  /* ---- スクロールフェードインの初期状態 ----
    opacity: 0           → 透明（見えない）
    translateY(24px)     → 24px 下にずらした位置から始まる
    transition           → is-played が付いたとき、0.55s かけてなめらかに変化する
    ease-out             → 最初は速く、終盤にゆっくり止まる動き
     ---------------------------------------- */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }
  .gold-tag + .gold-card {
    margin-top: 30px;
  }
  .gold-card__img {
    width: 100%;
    border-radius: 8px;
  }
  .gold-card__img--card {
    border-radius: 0px;
  }
  .gold-card__img:not(:first-child) {
  margin-top: 24px;
  }
  .gold-card__body {
    width: 100%;
    padding: 0px 0px 28px;
  }
  .gold-card--hassubcontents {
  padding-bottom: 0;
  }
  .gold-card__title {
  font-size: 22px;
  text-align: center;
  margin: 20px 0;
  }
  .gold-card__title::after {
  margin: 16px auto 0;
  }
  .gold-card > .gold-card__title {
    margin: 24px 0;
  }
  .gold-card__title--icon {
    display: flex;
    flex-direction: column;
    margin: 8px 0 20px;
  }
  .gold-card__title--icon img {
    margin: 0 auto 12px;
  }
  .gold-card__text--pccenter {
  text-align: left;
  }
  .gold-card__2colwrap {
  display: block;
  }
  .gold-card__2colwrap--small {
    gap: 16px;
  }
  .gold-card__sp2colwrap {
    display: flex;
  }
  .gold-card__2col {
    width: 100%;
    margin-top: 20px;
  }
  .gold-card__sp2colwrap .gold-card__2col.gold-card__sp2col--col4 {
    width: calc(33.3333% - 8px);
    margin-top: 0px;
  }
  .gold-card__sp2colwrap .gold-card__2col.gold-card__sp2col--col8 {
    width: calc(66.6666% - 8px);
    margin-top: 0px;
  }
  .gold-card__2colwrap--2nd {
  margin-top: 12px;
  }
}

/* .gold-card__body > .gold-card__title {
  margin-top: 28px;
} */

.gold-card__subcontents {
  padding: 48px 24px;
  margin: 0px -32px;
}
.gold-card__subcontents--first {
  margin-top: 48px;
}
.gold-card__contents--inner {
  max-width: 768px;
  margin: 0 auto;
}
.gold-card__subtitle {
  font-size: 18px;
  color: #002554;
  font-weight: bold;
  margin: 0 0 10.6px;
}
.gold-card__subtitle a {
  font-size: 18px;
  color: #002554;
  font-weight: bold;
  margin: 0 0 10.6px;
  text-decoration: none;
}
.gold-card__img + .gold-card__subtitle {
  margin-top: 24px;
}

.gold-card__subtitle--lg {
  font-size: 22px;
}
.gold-card__sublead {
  font-size: 15px;
  font-weight: bold;
  color: #002554;
  margin-bottom: 12px;
}

/* 上下線見出し */
.gold-section-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #002554;
  padding: 3px 0 1px;
  margin: 0 auto 20px;
  border-top: 1px solid #002554;
  border-bottom: 1px solid #002554;
}

@media (max-width: 768px) {
  .gold-card__subcontents {
    padding: 40px 16px;
    margin: 0 -12px;
  }
  .gold-card__subcontents--first {
    margin-top: 40px;
  }
  .gold-card__subtitle {
    font-size: 16px;
    margin: 20px 0 12px;
  }
  .gold-card__subtitle a {
     font-size: 16px;
    }
  .gold-card__subtitle--lg {
    font-size: 16px;
  }
}

.gold-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.gold-link-list:not(:last-child) {
  margin-bottom: 26.6px;
}
.gold-link-list li {
  width: calc(50% - 20px);
  padding-left: 0.6em;
}
@media (max-width: 768px) {
.gold-link-list {
  display: flex;
  flex-wrap: wrap;
}
.gold-link-list li {
  width: 100%;
}
}

.gold-link-list .gold-link--right,
.gold-link-list .gold-link--blank {
  display: block;
  padding-left: 0.6em;
  text-indent: -0.6em;
}


.gold-link-navlist {
  display: flex;
  flex-wrap: wrap;
  gap: 26.6px 0px;
}
/* ============================================================
  ステップグリッド
============================================================ */
.gold-step-grid {
  display: flex;
  margin: 32px 0 0;
  justify-content: center;
  gap: 40px;
}
.gold-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(50% - 20px);
}
/* STEP 1 バッジ */
.gold-step-badge {
  background: #002554;
  text-align: center;
  border-radius: 40px;
  width: auto;
  min-width: 200px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 32px;
  padding: 1px 32px 2px;
  margin-bottom: 24px;
  line-height: 32px;
}
.gold-step-icon {
  margin-bottom: 18.6px;
}
.gold-step-icon img {
  width: 140px;
  height: auto;
}
/* 説明テキスト */
.gold-step-text {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #002554;
  margin-bottom: 18.6px;
}

/* ボタン（STEP1のみ） */
.gold-step-btn {
  line-height: 1.5;
  display: block;
  width: 100%;
  max-width: 356px;
  padding: 16px 10px;
  background: #2477AB;
  height: 56px;
  color: #fff;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}

.gold-step-btn:hover {
  opacity: 0.8;
}

.gold-step-btn span::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/content/dam/diners/img/cardlineup/dinersclubgold/service/btn_icon_external.png) no-repeat center / contain;
    flex-shrink: 0;
    margin-right: 8px;
}

@media (max-width: 768px) {
  .gold-step-grid {
    margin: 20px 0 0;
    display: block;
  }
  .gold-step-item {
  margin-top: 40px;
  width: 100%;
  }
  .gold-step-item:first-child {
    margin-top: 24px;
  }
  .gold-step-icon {
  margin-bottom: 10.6px;
  }
  /* STEP 1 バッジ */
  .gold-step-badge {
    min-width: 142px;
  }
  .gold-step-btn {
    max-width: 303px;
  }
}

.gold-step-applist {
  display: flex;
  gap: 16px;
}
.gold-step-applist li img {
  width: 100%;
}

.gold-card__subtitle + .gold-card__text {
  margin-top: 10.6px;
}
/* ── キャップ付きカード（上部カラーヘッダー型） ── */
.gold-card--capped {
  padding: 0;
  margin: 24px auto 40px;
}

.gold-card__cap {
  background: #004C97;
  border-radius: 16px 16px 0 0;
  padding: 10px 10px 8px;
  color: #fff;
  text-align: center;
  min-height: 54px;
  line-height: 1;
}
.gold-card--gold .gold-card__cap {
  background: linear-gradient(180deg, #d1bd70 0%, #bba860 60.6%, #ad9b56 100%);
}

.gold-card__cap-label {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin: 0;
}
.gold-card__cap-point {
  font-size: 36px;
}
.gold-card__cap-note {
  font-size: 14px;
}

.gold-card--capped .gold-card__body {
  background: #FFFFFF;
  border-radius: 0 0 16px 16px;
  padding: 32px 32px 40px;
}

.gold-shopimg-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* PC: 7列固定 */
  gap: 10px 6px;
  list-style: none;
  padding: 0;
  margin-bottom: 28px;
}

.gold-shopimg-list img {
  min-width: 95px;
  width: 100%;
  height: auto;
  display: block;
}
.gold-card__body p + .gold-shopimg-list {
  margin-top: 12px;
}

@media (max-width: 768px) {
  .gold-card--capped .gold-card__body {
    padding: 32px 16px 40px;
  }
  .gold-shopimg-list {
    grid-template-columns: repeat(3, 1fr); /* SP: 3列、幅は均等分割 */
  }
}

/* ============================================================
  アコーディオン
============================================================ */
.gold-accordion__item {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.gold-accordion__header {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  padding: 12px;
  border: none;
  cursor: pointer;
  text-align: left;
  background: #fff;
  color: #333;
}

.gold-accordion__title {
  flex: 1;
  font-size: 15px;
}

/* + アイコン（横線 + ::after で縦線） */
.gold-accordion__icon {
  flex-shrink: 0;
  width: 14px;
  height: 2px;
  background: #004C97;
  position: relative;
}

.gold-accordion__icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background: #004C97;
  top: -0.6rem;
  left: 0.6rem;
  transition: opacity 0.2s ease;
}

/* 開いたとき縦線を消す → − アイコンになる */
.gold-accordion__item.is-open .gold-accordion__icon::after {
  opacity: 0;
}

.gold-accordion__content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.gold-accordion__body {
  padding: 16px 24px 20px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .gold-accordion__body {
    padding: 16px 8px;
  }
}


/* ============================================================
  ポイントエリア
============================================================ */
.gold-point-arrow {
  text-align: center;
  width: 52px;
  margin: 32px auto 0;
}
.gold-point-arrow img {
  width: 100%;
}
.gold-card__title--slash {
  text-align: center;
  font-size: 36px;
  color: #002554;
  margin: 54px auto 26.8px;
  font-weight: bold;
}

.gold-slash-label {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  font-weight: bold;
  font-size: 22px;
  color: #A6903A;
}

/* \ を左側に表示 */
.gold-slash-label::before {
  content: "＼";
  margin-right: 4px;
}

/* / を右側に表示 */
.gold-slash-label::after {
  content: "／";
  margin-left: 4px;
}
@media (max-width: 768px) {
  .gold-slash-label {
    font-size: 14px;
  }
  .gold-card__title--slash {
    font-size: 26px;
    margin: 48px auto 26.8px;
  }

}

/* ============================================================
  計算エリア外枠
============================================================ */

/* 入力フォームとポイント結果を囲むボックス */
.sim-calculation {
  border-radius: 16px;
  border: 0.1rem solid #004C97;
  overflow: hidden;
  margin-bottom: 40px;
}

.sim-calculation-cap {
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  background: #002554;
  padding: 19px 18px 17px;
  margin: 0;
  line-height: 1;

}

@media (max-width: 768px) {
  .sim-calculation-cap {
    font-size: 17px;
    padding: 14px;
  }
}


/* ============================================================
  入力フォームエリア
============================================================ */

.sim-form {
  padding: 32px 32px 24px;
  flex: 1;
  display: flex;
  gap: 2rem;
  justify-content: center;
}
.sim-form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(50% - 6px);
}
.sim-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ラベルテキスト「対象店での利用」 */
.sim-form-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #d1bd70 0%, #ad9b56 100%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 15px;
  padding: 7px 15px 5px;
  line-height: 1;
  white-space: nowrap; /* テキストを折り返さない */
  width: 110px;
}

.sim-form-badge--5x {
  background: #004C97;
}

/* 金額入力ボックス */
input[type='text'].sim-form-input {
  padding: 12px 15px;
  flex: 1;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  text-align: right;
  /* border-color が 0.2秒かけて変化する（フォーカス時に青くなる演出）。 */
  transition: border-color 0.2s;
}

/* フォーカス時（クリックしてカーソルが入っているとき）のスタイル */
.sim-form-input:focus {
  outline: none; /* デフォルトのフォーカス枠（ブラウザ依存）を消す */
  border-color: #004c97; /* 青いボーダーに変える */
  /* 0(横) 0(縦) 0(ぼかし) 3px(広がり) rgba(色+透明度) */
  box-shadow: 0 0 0 3px rgba(0, 76, 151, 0.12);
}
/* 「円」テキスト */
.sim-form-unit {
  font-size: 15px;
  color: #263033;
  font-weight: bold;
}

@media (max-width: 768px) {
  .sim-form {
    padding: 24px 16px;
    gap: 24px;
    flex-direction: column;
  }
  .sim-form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  input[type='text'].sim-form-input {
    padding: 12px 15px;
    flex: 1;
    width: 80%;
  }
}
/* ============================================================
  ポイント結果エリア（右側の水色ボックス）
============================================================ */

.sim-points-section {
  background: #E0F3FF;
  padding: 32px;
  margin-top: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* 「あなたの獲得ポイント」ヘッダー */
.sim-points-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  gap: 10px;
}

.sim-points-header .title {
  font-size: 24px;
  color: #002554;
  font-weight: bold;
}

.sim-points-cards {
  display: flex;
  width: 100%;
  gap: 16px;
  justify-content: center;
  margin-bottom: 22px;
}

/* 月間 / 年間 それぞれのカード */
.sim-points-card {
  background: #fff;
  border-radius: 12px 10px 16px 10px;
  padding: 12px 10px;
  text-align: center;
  width: calc(50% - 8px);
  /* 0(横) 1rem(縦) 20px(ぼかし) rgba(色+透明度) */
  box-shadow: 0 10px 20px rgba(18, 82, 129, 0.12);
}

/* 「月間」「年間」のラベル */
.sim-points-card .label {
  color: #263033;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 16px;
}

/* ポイント数の大きな数字 */
.sim-points-card .value {
  font-size: 32px;
  color: #002554;
  margin-bottom: 0px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 2px;
}

/* 「ポイント」テキスト */
.sim-points-card .unit {
  font-size: 14px;
  color: #263033;
  font-weight: bold;
}
.sim-points-card .unit span {
  padding-right: 2px;
}

/* ============================================================
   SP（スマートフォン）対応
   @media (max-width: 768px) → 画面幅が768px以下のときだけ適用するスタイル
============================================================ */
@media (max-width: 768px) {
  .sim-points-section {
    background: #E0F3FF;
    padding: 32px 16px;
    margin-top: 24px;
  }
  .sim-points-header .title {
    font-size: 18px;
    color: #002554;
    font-weight: bold;
  }

  .sim-points-cards {
    flex-direction: column;
  }

  /* 月間 / 年間 それぞれのカード */
  .sim-points-card {
    width: 100%;
  }
}

/* =================================================================
   シミュレーター バリデーションエラーテキスト
   JS が input10x の直後に <p class="sim-error"> を挿入し、
   hidden 属性を付け外しすることで表示/非表示を切り替える。
   ================================================================= */
.sim-error {
  /* margin-top: 0 → insertAdjacentElement で挿入された直後に隙間が出ないよう */
  margin: 4px 0 0;
  font-size: 1.2rem; /* = 12px（html font-size:62.5% 前提） */
  color: #c0392b;    /* 赤系のエラーカラー */
  line-height: 1.5;
}


.gold-card__title--simple {
  font-size: 26px;
  color: #002554;
  font-weight: bold;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .gold-card__title--simple {
    font-size: 20px;
    margin: 22px 0 28px;
  }
}
.gold-card-info {
  max-width: 710px;
  width: 100%;
  margin: 40px auto 16px;
}
.gold-card-info-text {
  font-size: 16px;
  position: relative;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  display: inline-block;
}
.gold-card-info-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0%;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, transparent 80%);
}
.gold-card-info-text.gold-text-grove::after {
background: linear-gradient(to right, rgba(166, 144, 58, 1.0) 0%, transparent 80%);
}
.gold-card-info-text.gold-text-star::after {
background: linear-gradient(to right, rgba(0, 76, 151, 1.0) 0%, transparent 80%);
}
@media (max-width: 768px) {
  .gold-card-info {
    padding: 0 12px;
    margin: 30px auto 16px;
  }
}

/* =================================================================
  【申込ボタン】.gold-apply
  ----------------------------------------------------------------- */
.gold-apply {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px auto;
}

.gold-apply__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 55px 19px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  min-width: 358px;
  transition: opacity 0.2s;
  line-height: 1;
}
.gold-apply__btn:hover { opacity: 0.75; }

.gold-apply__btn--grove {
  border: 1px solid #92bbd5;
  background-color: #fff;
  color: #2477ab;
}
.gold-apply__btn--grove::before {
    content: '\e806';
    font-family: fontello;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    text-align: center;
    width: 2rem;
    height: 2rem;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    padding-top: 2px;
}

.gold-apply__btn--star { 
  border: 1px solid #2477ab;
  background-color: #2477ab;
  color: #fff;
}

.gold-apply__btn--star::before {
    content: '\e806';
    font-family: fontello;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    text-align: center;
    width: 2rem;
    height: 2rem;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    padding-top: 2px;
}
@media (max-width: 768px) {
  .gold-apply {
    flex-direction: column;
    align-items: center;
  }
  .gold-apply__btn {
    width: 100%;
    max-width: 320px;
  }
}

/* =================================================================
  【追従申込ボタン】.gold-fixed-apply
  ----------------------------------------------------------------- */
.gold-fixed-apply {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 890;
  background: rgba(220, 220, 220, .7);
  padding: 12px 16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}
.gold-fixed-apply__inner {
  display: flex;
  gap: 32px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .gold-fixed-apply {
    padding: 10px 15px;
  }
  .gold-fixed-apply__inner {
    gap: 12px;
  }
  .gold-fixed-apply__inner .gold-apply__btn {
    width: calc(50% - 6px);
    font-size: 15px;
    min-width: calc(50% - 6px);
    padding: 11px 10px 11px 10px;
    text-align: center;
  }
}