/* ============================================================
   guarantee-style.css
   60日間返金保証（page-guarantee.php）＋申請フォーム（page-guarantee-apply.php）専用CSS
   デザイントークン：Navy #004183 ／ Coral #C63031
   フォント：Zen Old Mincho（見出し）＋ Zen Kaku Gothic New（本文）
   命名：.gt-*
   注意：site-header.css は優先度101で必ず本CSSより後に読み込まれる（functions.php鉄則B）。
         ヘッダー系のルールはこのファイルに書かないこと。
   ============================================================ */

:root {
  --gt-navy: #004183;
  --gt-navy-dark: #00305f;
  --gt-coral: #C63031;
  --gt-bg-soft: #f4f7fb;
  --gt-bg-warm: #faf8f4;
  --gt-text: #2a2a2a;
  --gt-text-soft: #5a6672;
  --gt-line: #dde4ec;
  --gt-serif: 'Zen Old Mincho', serif;
  --gt-sans: 'Zen Kaku Gothic New', sans-serif;
}

.gt-page {
  font-family: var(--gt-sans);
  color: var(--gt-text);
  font-size: 1.08rem;
  line-height: 1.9;
  overflow-x: hidden;
}

.gt-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 共通見出し */
.gt-eyebrow {
  font-family: var(--gt-sans);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--gt-coral);
  font-weight: 700;
  margin: 0 0 10px;
}

.gt-section-title {
  font-family: var(--gt-serif);
  font-size: 1.9rem;
  line-height: 1.5;
  color: var(--gt-navy);
  margin: 0 0 18px;
}

.gt-lead {
  font-size: 1.08rem;
  color: var(--gt-text);
  margin: 0 0 34px;
}

/* 共通ボタン */
.gt-btn {
  display: inline-block;
  padding: 15px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gt-btn:hover { opacity: 0.85; transform: translateY(-2px); }
.gt-btn--primary {
  background: var(--gt-coral);
  color: #fff;
  box-shadow: 0 6px 18px rgba(198, 48, 49, 0.28);
}
.gt-btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.gt-btn--large { padding: 18px 48px; font-size: 1.1rem; }

/* ============================================================
   ヒーロー
   ============================================================ */
/* 2026-07-29：他ページとメインビジュアル高さを揃える基準（min-height:380px）を床として追加。
   ただしバッジ＋テキストの横並びレイアウトのため、実際のコンテンツ高が基準値を上回るのは想定内
   （縮めるとバッジ・コピーが窮屈になるため、ここでは無理な圧縮はしない）。 */
.gt-hero {
  position: relative;
  background: linear-gradient(135deg, var(--gt-navy-dark) 0%, var(--gt-navy) 60%, #1a5ea8 100%);
  color: #fff;
  padding: 96px 20px 88px;
  overflow: hidden;
  isolation: isolate;
  min-height: 380px;
  display: flex;
  align-items: center;
}

.gt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.gt-hero__bg img,
.gt-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2026-08-20再々調整：「クロップ位置がベストではない」との指摘を受けて判明した点として、
     .gt-heroの横長コンテナ（幅に対して高さが低い）に対し元画像は1536×1024(1.5:1)と
     比較的正方形に近いため、object-fit:coverは常に「幅基準」でスケールされ、画像の横方向は
     一切トリミングされていなかった（＝object-positionのX値を変えても見え方が変化しない
     状態だった）。実際に余白を詰めるには、object-positionの調整ではなく元画像ファイル自体を
     被写体に寄せてプリクロップする必要があったため、PC用画像を1536×1024→1100×1024へ
     再クロップ（右側の余白を約28%カット）。これによりcoverのスケール倍率が上がり、
     被写体が画面いっぱいに大きく表示されるようになる。object-positionは新しいクロップ後の
     構図（被写体がほぼ全幅を占める）に合わせて中央よりやや下寄りに調整。 */
  object-position: 45% 62%;
  opacity: 0.85;
}
@media (max-width: 900px) {
  .gt-hero__bg img,
  .gt-hero__bg video {
    /* モバイル画像（縦位置1024×1536）は今回未変更。被写体が画面下半分中央寄りに
       集まっている構図のため、中央やや下寄りに固定表示。 */
    object-position: 50% 72%;
  }
}
.gt-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 2026-08-20：写真配置後、青のオーバーレイが強すぎて犬猫がほぼ見えないとの指摘。
     products-style.css .sp-hero__bg::after（製品一覧ページ）と同じ透過率・方向に
     揃えて、写真がしっかり見えるレベルまで弱めた（旧：135deg, 0.72→0.45） */
  background: linear-gradient(180deg, rgba(0, 65, 131, 0.3), rgba(0, 65, 131, 0.5));
}
/* 2026-08-20追記：PCはバッジ（左）＋テキスト（右）の横並びで、右側のテキスト列が
   ちょうど猫の顔・犬の鼻先という写真の一番情報量が多い部分に重なり、文字が読み取り
   づらいとの指摘。写真の位置（object-position）だけでは犬猫とも画面右側に写っている
   ため文字と被写体を完全に避けきれないため、テキストが乗る右側だけを追加でうっすら
   暗くする横方向グラデーションを重ねてコントラストを補う（左のバッジ側はほぼ変えず
   写真の見え方を保つ）。900px以下（バッジが上に来る縦積みレイアウト）では横方向の
   ズレがないため、この追加グラデーションは適用しない。 */
@media (min-width: 901px) {
  .gt-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(0, 26, 58, 0) 0%, rgba(0, 26, 58, 0.18) 32%, rgba(0, 26, 58, 0.42) 55%, rgba(0, 26, 58, 0.46) 100%),
      linear-gradient(180deg, rgba(0, 65, 131, 0.3), rgba(0, 65, 131, 0.5));
  }
}

.gt-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 56px;
}

/* 60日バッジ（CSS描画。後日画像・ロゴに差し替え可能）
   2026-08-20：写真とバッジが重なってレイアウトが崩れる問題のため、page-guarantee.php側で
   このバッジのマークアップ（.gt-hero__badge）を削除しユーザー確認済み。以下のCSSは現在
   使用箇所がないが、将来バッジ形式のUIを再度使う可能性を考慮してあえて残してある。
   （情報自体は.gt-hero__text側の見出し・本文で表示済みのため、削除しても内容の欠落はない） */
.gt-hero__badge {
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #fff;
  color: var(--gt-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  border: 6px double var(--gt-navy);
}
.gt-hero__badge-days {
  font-family: var(--gt-serif);
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1;
}
.gt-hero__badge-unit {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-top: 2px;
}
.gt-hero__badge-label {
  margin-top: 8px;
  background: var(--gt-coral);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 14px;
  border-radius: 999px;
}

.gt-hero__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  font-weight: 700;
  color: #ffd9d9;
  margin: 0 0 12px;
  /* 2026-08-20：写真の上に乗る文字なので、オーバーレイの薄い箇所でも読めるよう
     軽いシャドウで保険をかける（.gt-hero__title/.gt-hero__copy/.gt-hero__subも同様） */
  text-shadow: 0 1px 3px rgba(0, 20, 45, 0.5), 0 4px 14px rgba(0, 20, 45, 0.35);
}
.gt-hero__title {
  font-family: var(--gt-serif);
  font-size: 2.7rem;
  line-height: 1.35;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 20, 45, 0.55), 0 8px 24px rgba(0, 20, 45, 0.35);
}
.gt-hero__copy {
  font-family: var(--gt-serif);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 20, 45, 0.5), 0 6px 18px rgba(0, 20, 45, 0.3);
}
.gt-hero__sub {
  font-size: 1.02rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 30px;
  text-shadow: 0 1px 3px rgba(0, 20, 45, 0.5), 0 4px 14px rgba(0, 20, 45, 0.3);
}
.gt-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 申請フォーム用スリムヒーロー */
.gt-hero--slim { padding: 72px 20px 60px; }
.gt-hero--slim .gt-hero__inner { display: block; }

/* ============================================================
   なぜ保証できるのか
   ============================================================ */
.gt-why {
  padding: 88px 0;
  background: #fff;
  text-align: center;
}
.gt-why__list {
  list-style: none;
  margin: 44px 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.gt-why__item {
  background: var(--gt-bg-soft);
  border-radius: 14px;
  padding: 36px 22px;
  /* 2行積みのcombo項目だけ縦に長くなるため、flex-end揃えで3項目のラベル位置を底辺で揃える */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.gt-why__num {
  display: block;
  font-family: var(--gt-serif);
  font-size: 1.9rem;
  color: var(--gt-navy);
  font-weight: 700;
  margin-bottom: 10px;
}
/* 【2026-08-27追加修正】他2項目（1.9rem）と文字サイズが違って見えると指摘あり。
   横幅に収めるための縮小ではなく、同じ1.9remのまま「数字／×／数字」の3行積みにする。
   ×の上下だけ行間を詰め、センター揃えにする指示のためflex columnで各行を個別制御。 */
.gt-why__num--combo {
  font-size: 1.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gt-why__combo-line {
  line-height: 1.15;
}
.gt-why__num-sep {
  display: block;
  line-height: 1;
  margin: 1px 0;
  font-weight: 400;
  font-size: 0.5em;
}
.gt-why__desc {
  font-size: 0.98rem;
  color: var(--gt-text-soft);
  margin: 0;
}
.gt-why__link a {
  color: var(--gt-navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ============================================================
   3つの約束
   ============================================================ */
.gt-points {
  padding: 88px 0;
  background: var(--gt-bg-warm);
  text-align: center;
}
.gt-points__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 44px 0 24px;
}
.gt-points__card {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--gt-coral);
  padding: 34px 24px;
  box-shadow: 0 4px 20px rgba(0, 40, 90, 0.06);
}
.gt-points__label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
  background: var(--gt-navy);
  border-radius: 999px;
  padding: 3px 16px;
  margin: 0 0 16px;
}
.gt-points__main {
  font-family: var(--gt-serif);
  font-size: 1.65rem;
  line-height: 1.45;
  color: var(--gt-navy);
  font-weight: 700;
  margin: 0 0 14px;
}
.gt-points__desc {
  font-size: 0.95rem;
  color: var(--gt-text-soft);
  margin: 0;
}
.gt-points__note {
  font-size: 0.9rem;
  color: var(--gt-text-soft);
  margin: 0;
}

/* ============================================================
   4ステップ
   ============================================================ */
.gt-steps {
  padding: 88px 0;
  background: #fff;
}
.gt-steps .gt-section-title { text-align: center; }
.gt-steps__list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: none;
}
.gt-steps__item {
  position: relative;
  background: var(--gt-bg-soft);
  border-radius: 14px;
  padding: 30px 20px;
  text-align: center;
}
/* ステップ間の矢印（PC） */
.gt-steps__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -17px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--gt-coral);
  border-right: 3px solid var(--gt-coral);
  transform: translateY(-50%) rotate(45deg);
}
.gt-steps__visual {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.gt-steps__visual img {
  max-height: 88px;
  width: auto;
}
.gt-steps__num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gt-navy);
  color: #fff;
  font-family: var(--gt-serif);
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gt-steps__step-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gt-coral);
  margin: 0 0 6px;
}
.gt-steps__title {
  font-family: var(--gt-serif);
  font-size: 1.18rem;
  color: var(--gt-navy);
  margin: 0 0 10px;
}
.gt-steps__desc {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--gt-text-soft);
  margin: 0;
  text-align: left;
}

/* 口座情報の安全設計 */
.gt-steps__safety {
  margin-top: 40px;
  background: #fff;
  border: 2px solid var(--gt-navy);
  border-radius: 14px;
  padding: 26px 30px;
}
.gt-steps__safety-title {
  font-weight: 700;
  color: var(--gt-navy);
  font-size: 1.08rem;
  margin: 0 0 8px;
}
.gt-steps__safety-title::before {
  content: '\1F512'; /* 鍵アイコン（emoji。アイコン画像差し替え可） */
  margin-right: 8px;
}
.gt-steps__safety-desc {
  font-size: 0.95rem;
  color: var(--gt-text-soft);
  margin: 0;
}

/* ============================================================
   期限セルフチェック
   ============================================================ */
.gt-checker {
  padding: 88px 0;
  background: var(--gt-bg-soft);
  text-align: center;
}
.gt-checker__box {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  padding: 36px 30px;
  box-shadow: 0 4px 20px rgba(0, 40, 90, 0.08);
}
.gt-checker__label {
  display: block;
  font-weight: 700;
  color: var(--gt-navy);
  margin-bottom: 10px;
}
/* 2026-07-30追記：max-width指定・!important・-webkit-appearance:noneをいずれも試したが、
   実機iOS（Safari／Chromeともに内部はWebKit描画のため同一挙動）でinput[type="date"]の
   ネイティブUIがCSSの幅指定を無視してカード全幅に広がる問題が解消しなかった。
   デスクトップChromeでは正しく300pxに収まることを確認済みなので、iOSのネイティブ
   date pickerウィジェット固有の制約と判断。
   → 対策として「見た目用のspan（.gt-checker__input-display）を上に重ね、実際の
   input[type="date"]は透明化してタップ領域としてのみ使う」方式に変更。
   見た目はただのspanなのでCSSの幅指定がそのまま効き、iOS特有の幅バグの影響を受けない。 */
.gt-checker__input-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.gt-checker__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  /* 透明だが実体として存在し、タップ・ネイティブピッカー起動を担当する。
     2026-08-20：以前ここに -webkit-appearance:none / appearance:none を付けていたが、
     PCブラウザ（特にChrome）ではinput[type="date"]にappearance:noneを付けると
     カレンダーピッカーを開くための内部UIごと無効化されてしまい、クリックしても
     日付選択が起動しない不具合の原因になっていたため削除した。
     opacity:0だけで透明化は十分で、appearance関連の指定は不要（かつ有害）だった。 */
}
.gt-checker__input-display {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--gt-sans);
  font-size: 1.1rem;
  padding: 12px 16px;
  border: 2px solid var(--gt-line);
  border-radius: 10px;
  text-align: center;
  color: var(--gt-text);
  background: #fff;
  pointer-events: none; /* クリック・タップは下の実inputへ通す */
}
.gt-checker__result {
  margin-top: 24px;
  border-radius: 10px;
  padding: 20px;
}
.gt-checker__result.is-ok   { background: #eef7ef; }
.gt-checker__result.is-soon { background: #fdf3e4; }
.gt-checker__result.is-over { background: #fbeeee; }
.gt-checker__deadline {
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.gt-checker__deadline strong {
  font-family: var(--gt-serif);
  font-size: 1.35rem;
  color: var(--gt-navy);
}
.gt-checker__days { margin: 0; font-size: 0.98rem; }
.is-soon .gt-checker__days { color: #a05a00; font-weight: 700; }
.is-over .gt-checker__days { color: var(--gt-coral); font-weight: 700; }
.gt-checker__note {
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--gt-text-soft);
}

/* ============================================================
   対象製品グリッド
   ============================================================ */
.gt-products {
  padding: 88px 0;
  background: #fff;
  text-align: center;
}
.gt-products__grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.gt-products__card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  background: #fff;
  border: 1px solid #E5E9ED;
  border-radius: 12px;
  text-decoration: none;
  color: var(--gt-text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.gt-products__card a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 40, 90, 0.12);
}
.gt-products__img {
  height: 92px;
  width: auto;
  object-fit: contain;
}
.gt-products__name {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ============================================================
   適用条件・FAQ（アコーディオン共通）
   ============================================================ */
.gt-terms { padding: 88px 0; background: var(--gt-bg-warm); }
.gt-faq   { padding: 88px 0 96px; background: #fff; }
.gt-terms .gt-section-title,
.gt-faq .gt-section-title { text-align: center; margin-bottom: 40px; }

.gt-terms__item,
.gt-faq__item {
  background: #fff;
  border: 1px solid var(--gt-line);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.gt-faq__item { background: var(--gt-bg-soft); border: none; }

.gt-terms__item summary,
.gt-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 52px 20px 24px;
  font-weight: 700;
  color: var(--gt-navy);
  position: relative;
  font-size: 1.02rem;
}
.gt-terms__item summary::-webkit-details-marker,
.gt-faq__item summary::-webkit-details-marker { display: none; }
.gt-terms__item summary::after,
.gt-faq__item summary::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gt-coral);
  border-bottom: 2px solid var(--gt-coral);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}
.gt-terms__item[open] summary::after,
.gt-faq__item[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.gt-terms__item ul,
.gt-faq__item p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 0.98rem;
  color: var(--gt-text);
}
.gt-terms__item ul {
  padding-left: 44px;
}
.gt-terms__item li { margin-bottom: 8px; }
.gt-faq__item a { color: var(--gt-navy); font-weight: 700; }

/* ============================================================
   クロージングCTA
   ============================================================ */
.gt-cta {
  background: linear-gradient(135deg, var(--gt-navy-dark) 0%, var(--gt-navy) 100%);
  color: #fff;
  text-align: center;
  padding: 88px 0;
}
.gt-cta__copy {
  font-family: var(--gt-serif);
  font-size: 2rem;
  margin: 0 0 12px;
}
.gt-cta__sub {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 34px;
}
.gt-cta__buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.gt-cta__tel {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.gt-cta__tel a { color: #fff; font-weight: 700; text-decoration: none; }
.gt-cta__apply-link {
  margin: 18px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.gt-cta__apply-link a {
  color: #fff;
  font-weight: 700;
}

/* ============================================================
   申請フォーム（page-guarantee-apply.php）
   ============================================================ */
.gt-form-wrap { padding: 56px 0 96px; background: #fff; }
.gt-form-wrap .gt-inner { max-width: 760px; }

.gt-form__backlink { margin: 0 0 28px; }
.gt-form__backlink a {
  color: var(--gt-navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.gt-notice {
  border-radius: 12px;
  padding: 26px 28px;
  margin-bottom: 30px;
}
.gt-notice--success { background: #eef7ef; border: 1px solid #b9dcbd; }
.gt-notice--error   { background: #fbeeee; border: 1px solid #eec3c3; }
.gt-notice__title {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 10px;
  color: var(--gt-navy);
}
.gt-notice--error .gt-notice__title { color: var(--gt-coral); }
.gt-notice ul { margin: 0; padding-left: 22px; }
.gt-notice li { margin-bottom: 4px; }

.gt-form__policy {
  background: var(--gt-bg-soft);
  border-left: 4px solid var(--gt-navy);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 34px;
}
.gt-form__policy p { margin: 0 0 6px; font-size: 0.95rem; }
.gt-form__policy p:last-child { margin-bottom: 0; }

/* 「お申し込みの前に」：もう少し試す方向への自然な誘導ボックス */
.gt-form__before {
  background: var(--gt-bg-warm);
  border: 1px solid #e8e0d2;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 22px;
}
.gt-form__before-title {
  font-family: var(--gt-serif);
  font-weight: 700;
  color: var(--gt-navy);
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.gt-form__before p:last-child { margin: 0; font-size: 0.95rem; }
.gt-form__before a { color: var(--gt-navy); font-weight: 700; }

.gt-field__note--head {
  margin: 0 0 18px;
  font-weight: 700;
  color: var(--gt-navy);
}

.gt-form__group {
  border: 1px solid var(--gt-line);
  border-radius: 14px;
  padding: 28px 28px 18px;
  margin: 0 0 28px;
}
.gt-form__group legend {
  font-family: var(--gt-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gt-navy);
  padding: 0 12px;
}

.gt-field { margin-bottom: 20px; }
.gt-field label,
.gt-field__label {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 8px;
}
.gt-required,
.gt-optional {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 8px;
  margin-left: 10px;
  vertical-align: 2px;
}
.gt-required { background: var(--gt-coral); color: #fff; }
.gt-optional { background: #e3e8ee; color: var(--gt-text-soft); }

.gt-field input[type="text"],
.gt-field input[type="tel"],
.gt-field input[type="email"],
.gt-field input[type="date"],
.gt-field input[type="number"],
.gt-field select,
.gt-field textarea {
  width: 100%;
  font-family: var(--gt-sans);
  font-size: 1.02rem;
  padding: 12px 14px;
  border: 2px solid var(--gt-line);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}
.gt-field input:focus,
.gt-field select:focus,
.gt-field textarea:focus {
  outline: none;
  border-color: var(--gt-navy);
}
.gt-field textarea { min-height: 140px; resize: vertical; }
.gt-field--zip input { max-width: 240px; }
.gt-field--weight input { max-width: 160px; }

/* ご購入日：年/月/日プルダウン（2026-08-23、ネイティブinput[type="date"]の
   OS依存カレンダーUI描画不具合を避けるため3プルダウン方式に変更） */
.gt-date-select-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gt-date-select-group .gt-date-select {
  width: auto;
  flex: 1 1 96px;
  min-width: 88px;
}
.gt-field__note {
  font-size: 0.85rem;
  color: var(--gt-text-soft);
  margin: 8px 0 0;
}

.gt-radio-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.gt-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--gt-line);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  font-weight: 700;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.gt-radio:has(input:checked) {
  border-color: var(--gt-navy);
  background: var(--gt-bg-soft);
}
.gt-radio input { accent-color: var(--gt-navy); }

.gt-form__consent-wrap { margin: 34px 0; }
.gt-form__privacy {
  background: var(--gt-bg-warm);
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.gt-form__privacy-title { font-weight: 700; margin: 0 0 8px; }
.gt-form__privacy p { margin: 0; }
.gt-form__privacy a { color: var(--gt-navy); font-weight: 700; }

.gt-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
}
.gt-consent input {
  width: 20px;
  height: 20px;
  accent-color: var(--gt-navy);
}

.gt-submit {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--gt-coral);
  color: #fff;
  font-family: var(--gt-sans);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 999px;
  padding: 18px 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(198, 48, 49, 0.28);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gt-submit:hover { opacity: 0.85; transform: translateY(-2px); }
.gt-form__submit-note {
  text-align: center;
  font-size: 0.88rem;
  color: var(--gt-text-soft);
  margin: 14px 0 0;
}
.gt-form__aftersuccess a { color: var(--gt-navy); font-weight: 700; }

/* ============================================================
   送信内容の確認画面（2026-08-25追加）
   ============================================================ */
.gt-confirm__lead {
  margin: 0 0 26px;
  font-size: 0.98rem;
}
.gt-confirm__section {
  border: 1px solid var(--gt-line);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 20px;
}
.gt-confirm__section-title {
  font-family: var(--gt-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gt-navy);
  margin: 0 0 14px;
}
.gt-confirm__list { margin: 0; }
.gt-confirm__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 10px 0;
  border-top: 1px solid var(--gt-line);
}
.gt-confirm__row:first-child { border-top: none; padding-top: 0; }
.gt-confirm__row dt {
  flex: 0 0 160px;
  font-weight: 700;
  color: var(--gt-text-soft);
  font-size: 0.9rem;
}
.gt-confirm__row dd {
  flex: 1 1 260px;
  margin: 0;
  word-break: break-word;
}
.gt-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}
.gt-confirm__actions .gt-submit { width: auto; flex: 1 1 260px; max-width: 320px; }
.gt-submit--outline {
  background: #fff;
  color: var(--gt-navy);
  border: 2px solid var(--gt-navy);
  box-shadow: none;
}
.gt-submit--outline:hover { opacity: 1; background: var(--gt-bg-soft); }

@media (max-width: 600px) {
  .gt-confirm__row dt { flex-basis: 100%; }
  .gt-confirm__actions .gt-submit { flex: 1 1 100%; max-width: none; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
.gt-pc-only { display: inline; }

@media (max-width: 900px) {
  .gt-hero { padding: 64px 20px 56px; min-height: 300px; }
  .gt-hero__inner {
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }
  .gt-hero__badge { width: 150px; height: 150px; border-width: 4px; }
  .gt-hero__badge-days { font-size: 3.4rem; }
  .gt-hero__title { font-size: 2rem; }
  .gt-hero__copy { font-size: 1.15rem; }
  .gt-hero__cta { justify-content: center; }
  .gt-pc-only { display: none; }

  .gt-section-title { font-size: 1.55rem; }
  .gt-why, .gt-points, .gt-steps, .gt-checker, .gt-products, .gt-terms, .gt-faq, .gt-cta { padding: 60px 0; }

  .gt-why__list,
  .gt-points__grid { grid-template-columns: 1fr; gap: 16px; }

  /* 【2026-08-27追加修正】2行積み（brで改行）に変更したため、狭い画面（この幅では1カラム表示）
     でも1.9remのまま収まる。縮小の必要がなくなったため個別指定を削除。 */

  .gt-steps__list { grid-template-columns: 1fr; gap: 30px; }
  /* モバイルは矢印を下向きに */
  .gt-steps__item:not(:last-child)::after {
    top: auto;
    bottom: -21px;
    right: 50%;
    transform: translateX(50%) rotate(135deg);
  }

  .gt-products__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  .gt-cta__copy { font-size: 1.5rem; }

  .gt-form__group { padding: 22px 18px 12px; }
}

@media (max-width: 520px) {
  .gt-products__grid { grid-template-columns: repeat(2, 1fr); }
  .gt-btn { padding: 14px 28px; font-size: 0.98rem; }
  .gt-btn--large { padding: 16px 36px; font-size: 1.02rem; }
}