@charset "UTF-8";
/* =====================================================
   ちばぎん Visaデビット新規入会キャンペーンLP (2026下期)
   トンマナ: 再校チラシ準拠（グレータイル × 青紫 / ピンク・アイスブルーアクセント）
   色はチラシ再校の支給SVGから実測
   ===================================================== */

:root {
  --purple: #4f3a93;        /* メイン紫 */
  --purple-dark: #331577;   /* 濃紫（帯・問い合わせ） */
  --purple-pale: #eae6f4;   /* 薄紫背景 */
  --pink: #e75297;          /* ポイント数字・強調 */
  --red: #e5002d;           /* ちばぎんレッド（ロゴ・アプリ関連） */
  --yellow: #ffd800;        /* 年会費無料バッジ */
  --ice: #c6e7f9;           /* アイスブルー差し色 */
  --paper: #f4f3f5;         /* グレータイル地 */
  --ink: #231815;           /* 基本文字色 */
  --white: #fff;
  --font-round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  --font-base: "M PLUS 1", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  color: var(--ink);
  line-height: 1.75;
  font-size: 17px;
  background-color: var(--paper);
  /* 支給されたチラシ背景タイル */
  background-image: url('../img/background.svg');
  background-size: 760px auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
figure figcaption { font-size: 14px; text-align: center; margin-top: 6px; line-height: 1.5; }
small { font-size: .72em; }
.container { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.sp { display: none; }
.sp-only { display: none; }
@media (max-width: 640px) { .sp { display: inline; } .pc-only { display: none; } .sp-only { display: block; } }

/* ---- 汎用 ---- */
.em-red { color: var(--red); }
.em-pink { color: var(--pink); }
.em-purple { color: var(--purple); }
.em-target { color: var(--pink); font-size: 1.15em; font-family: var(--font-round); font-weight: 800; }
.p-small { font-size: .68em; }
.note { font-size: 13px; line-height: 1.7; color: #5a5651; }
.img-note { display: block; font-size: 12px; color: #777; text-align: right; margin-top: 2px; }
.ta-left { text-align: left; }
.u-num { font-family: var(--font-round); font-weight: 800; }

/* フェードイン */
.fade-in { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; transform: none; transition: none; } }

/* =====================================================
   追従ヘッダー
   ===================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.site-header__inner {
  width: 100%; padding: 10px clamp(16px, 3vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header__logo { display: block; }
.site-header__logo img { height: clamp(48px, 5.4vw, 66px); width: auto; }
.site-header__cta {
  background: var(--red); color: var(--white); text-decoration: none;
  font-family: var(--font-round); font-weight: 700; font-size: clamp(14px, 1.6vw, 17px);
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  transition: opacity .2s;
}
.site-header__cta:hover { opacity: .8; }

/* =====================================================
   ヒーロー（チラシ表面）
   ===================================================== */
/* キービジュアルはコンテンツ幅(900px)を左右にはみ出して迫力を出す。
   はみ出し量(--kv-extra)はビューポートの余裕に応じて0〜200pxで可変 */
.hero {
  --kv-extra: clamp(0px, calc(100vw - 932px), 200px);
  padding: 24px 0 40px; overflow-x: clip;
}
.hero__catch-img {
  margin: 0 0 14px; width: calc(100% + var(--kv-extra));
  margin-left: calc(var(--kv-extra) / -2);
}
.hero__catch-img img {
  width: 100%;
  /* 白抜きキャッチをタイル背景から浮かせる。--edge は画面幅に比例させ、
     スマホで輪郭が太って潰れるのを防ぐ */
  --edge: clamp(.6px, .09vw, .85px);
  filter:
    drop-shadow(var(--edge) 0 0 var(--purple))
    drop-shadow(calc(var(--edge) * -1) 0 0 var(--purple))
    drop-shadow(0 var(--edge) 0 var(--purple))
    drop-shadow(0 calc(var(--edge) * -1) 0 var(--purple))
    drop-shadow(0 2px 4px rgba(51, 21, 119, .35));
}
.hero__kv {
  display: grid; grid-template-columns: 60fr 40fr; gap: 3.5%; align-items: start;
  width: calc(100% + var(--kv-extra));
  margin-left: calc(var(--kv-extra) / -2);
}
.hero__keyphrase { width: 100%; }
.hero__kv-right { display: flex; flex-direction: column; gap: 10px; }
.hero__family-img { width: 100%; margin-top: -6%; transform: translateX(8%); }
.hero__card-row { display: flex; align-items: flex-start; gap: 10px; padding: 0 2%; margin-top: -7%; }
.hero__card { position: relative; flex: 1 1 auto; max-width: 72%; }
.hero__card figcaption { font-size: 13px; }
.hero__card img { border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.hero__app { flex: 0 0 22%; align-self: center; text-align: center; }
.hero__app figcaption { font-size: 12px; white-space: nowrap; }
.hero__subcards-img { padding: 0 2%; }
/* カード画像内の3枚の中心(26.4% / 49.7% / 77.2%)に各キャプションの中心を合わせる。
   列幅と左パディングは実測の最小幅から逆算した固定値なので、比率を崩さないこと */
.hero__subcaps {
  display: grid; grid-template-columns: 24.4% 31.2% 34.5%; gap: 0;
  padding-left: 16.2%; font-size: 10px; line-height: 1.6; text-align: center; margin-top: 2px;
  /* 改行位置は<br>で明示。keep-allはiOSで折り返せず隣の列と重なるため使わない
     （既定の折り返しなら、幅が足りない端末でも重ならずに折り返る） */
}
.badge-free {
  position: absolute; top: -40px; left: -18px; z-index: 2;
  background: var(--ice); color: var(--purple); border-radius: 50%;
  width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-round); font-weight: 800; font-size: 12px; line-height: 1.2; text-align: center;
}
.badge-free strong { display: block; font-size: 1.45em; }
.app-icon-img { display: block; width: 68px; height: auto; margin: 0 auto; }
/* 70文字を2行に収めるため、行あたり約37文字入るサイズに抑える */
.hero__term-note { font-size: clamp(11px, 1.45vw, 16px); line-height: 1.8; margin: 10px 0 14px; color: #5a5651; }

/* =====================================================
   対象カード
   ===================================================== */
.target { position: relative; }
/* 吹き出し（ヒーローに少し重ねる） */
.target__bubble {
  position: relative; z-index: 3;
  width: min(760px, calc(100% - 32px)); margin: 0 auto;
  background: var(--white); border: 3px solid var(--purple); border-radius: 16px;
  padding: 14px 18px 16px; text-align: center;
  font-family: var(--font-round); font-weight: 800;
  font-size: clamp(15px, 2.8vw, 23px); line-height: 1.8;
}
.target__bubble::before, .target__bubble::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border-style: solid; border-color: transparent;
}
.target__bubble::before { bottom: -21px; border-width: 21px 17px 0 17px; border-top-color: var(--purple); }
.target__bubble::after { bottom: -16px; border-width: 17px 13px 0 13px; border-top-color: var(--white); }
/* 斜め2トーン分割 */
.target__split {
  display: grid; grid-template-columns: 44fr 56fr;
  background: var(--purple); color: var(--white);
  margin-top: -34px;
}
.target__cardside {
  position: relative; background: var(--ice); color: var(--purple-dark);
  clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 50%, calc(100% - 72px) 100%, 0 100%);
  padding: 80px 92px 40px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.target__label {
  font-family: var(--font-round); font-weight: 800; font-size: clamp(21px, 2.8vw, 28px);
  letter-spacing: .2em;
}
.target__fan { position: relative; width: min(400px, 100%); aspect-ratio: 10 / 7; }
.target__fan img { position: absolute; width: 62%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.target__fan-1 { top: 0; left: 0; z-index: 3; }
.target__fan-2 { top: 22%; left: 19%; z-index: 2; }
.target__fan-3 { top: 44%; left: 38%; z-index: 1; }
.target__applyside { padding: 78px min(72px, 6vw) 44px min(48px, 4vw); }
.target__title { font-family: var(--font-round); font-weight: 800; font-size: clamp(24px, 3.6vw, 38px); line-height: 1.4; }
.target__ex { font-size: 13px; margin: 8px 0 18px; opacity: .95; }
.target__buttons { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin-bottom: 12px; }
/* 商品案内（注記の下に余白を空けて配置） */
.target__product { margin-top: 32px; }
.target__product-title { font-family: var(--font-round); font-weight: 800; font-size: clamp(18px, 2.4vw, 25px); line-height: 1.5; margin-bottom: 14px; }
/* 語の途中で折れないよう、文節単位で折り返す */
.target__product-title span { display: inline-block; }
.target__product .btn { display: block; max-width: 420px; }
.btn--accent { position: relative; background: var(--pink); color: var(--white); padding-right: 40px; }
.btn__arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-54%); font-size: 1.3em; font-weight: 700; }
.target__notes { font-size: 13px; line-height: 1.75; }
.target__notes p { margin-bottom: 2px; }
.btn {
  display: inline-block; text-align: center; text-decoration: none;
  font-family: var(--font-round); font-weight: 800; font-size: 17px; line-height: 1.4;
  padding: 12px 26px; border-radius: 999px; transition: opacity .2s, transform .2s;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.btn:hover { opacity: .85; transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn--app { background: var(--red); color: var(--white); }
.btn--web { background: var(--purple); color: var(--white); }

/* =====================================================
   特典
   ===================================================== */
.benefits { background: var(--purple-pale); padding: 36px 0 44px; }
.benefit1 {
  display: flex; align-items: center; gap: 16px; background: var(--white);
  border-radius: 16px; padding: 20px; box-shadow: 0 3px 10px rgba(95,67,150,.15);
  margin-bottom: 26px;
}
.benefit-badge {
  flex: 0 0 auto; width: 70px; height: 70px; border-radius: 50%;
  background: var(--purple); color: var(--white); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-family: var(--font-round);
  font-size: 14px; line-height: 1.1; font-weight: 700;
}
.benefit-badge strong { font-size: 28px; }
.benefit-badge--s { width: 62px; height: 62px; font-size: 12px; }
.benefit-badge--s strong { font-size: 23px; }
.benefit1__body { flex: 1; }
.benefit1__lead { font-family: var(--font-round); font-weight: 800; font-size: clamp(18px, 3.8vw, 28px); line-height: 1.5; margin-bottom: 6px; }
.benefit1__pt { color: var(--pink); border-bottom: 4px solid var(--yellow); white-space: nowrap; }
.benefit1__pt .u-num { font-size: 1.6em; }
.benefit1__illust { flex: 0 0 150px; width: 150px; height: auto; align-self: flex-end; margin: -44px 0 -8px; }
.benefits__cond {
  text-align: center; font-family: var(--font-round); font-weight: 700;
  font-size: clamp(16px, 3.4vw, 23px); margin-bottom: 18px;
}
.benefits__cond small { font-size: .78em; }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.benefit-card {
  position: relative; background: var(--white); border: 2px solid var(--purple);
  border-radius: 14px; padding: 34px 14px 16px; text-align: center;
}
.benefit-card > img { width: 100%; }
.benefit-card .benefit-badge--s { position: absolute; top: -14px; left: -10px; }
.benefits__total {
  background: var(--ice); border-radius: 16px; padding: 18px 20px; margin-bottom: 0;
  box-shadow: 0 3px 10px rgba(95,67,150,.15);
}
.benefits__total img { width: 100%; }

/* =====================================================
   TSUBASAポイント
   ===================================================== */
.tsubasa { padding: 40px 0; }
.tsubasa__cols { display: flex; flex-direction: column; gap: 24px; }
.bar-title {
  background: var(--purple); color: var(--white); font-family: var(--font-round);
  font-weight: 700; font-size: clamp(17px, 2.8vw, 21px); text-align: center;
  padding: 8px 14px; border-radius: 8px; margin-bottom: 14px;
}
.tsubasa__about, .tsubasa__howto { background: var(--white); border-radius: 14px; padding: 18px; }
.tsubasa__about-img { width: 100%; max-width: 760px; margin: 6px auto 0; }
.tsubasa__howto-img { width: 100%; max-width: 820px; margin: 6px auto 0; }

/* =====================================================
   アプリ登録方法
   ===================================================== */
.app-guide { background: var(--purple); padding: 34px 0 40px; }
.band-title {
  color: var(--white); text-align: center; font-family: var(--font-round);
  font-weight: 800; font-size: clamp(21px, 4vw, 30px); margin-bottom: 20px;
}
.app-guide__box {
  background: var(--white); border-radius: 16px;
  padding: 30px min(44px, 5vw);
  display: grid; grid-template-columns: 1.35fr 1fr; gap: min(40px, 4vw);
  align-items: center; max-width: 840px; margin: 0 auto;
}
/* ボタン上の「アイコン＋ちばぎんアプリ」。ボタンに合わせて中央に並べる */
.app-guide__dl-title {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-round); font-weight: 800;
  font-size: clamp(18px, 2.8vw, 25px); line-height: 1.5; margin-bottom: 14px;
}
.app-guide__dl-title .app-icon-img--s { flex: 0 0 48px; width: 48px; margin: 0; }
.app-guide__dl .btn { display: block; text-align: center; margin-bottom: 18px; }
.app-guide__shot {
  justify-self: center; text-align: center;
  padding-left: min(28px, 3vw); border-left: 2px dotted var(--purple-pale);
}
.app-guide__shot img { max-width: 180px; margin: 0 auto; }
.app-guide__shot figcaption { font-size: 15px; line-height: 1.7; text-align: center; margin-top: 12px; }
.app-guide__shot .img-note { text-align: center; }
.app-guide__shot figcaption strong { color: var(--red); }
.app-guide__more { grid-column: 1 / -1; justify-self: center; width: min(420px, 100%); text-align: center; margin-top: 6px; }

/* =====================================================
   プラン概要表・スケジュール
   ===================================================== */
.plan { padding: 40px 0 10px; }
table { width: 100%; border-collapse: collapse; background: var(--white); }
.plan__table th, .plan__table td, .schedule__table th, .schedule__table td {
  border: 1px solid #c9c3dd; padding: 11px 13px; font-size: 15px; vertical-align: top;
}
.plan__table thead th, .schedule__table thead th {
  background: var(--purple-dark); color: var(--white); font-family: var(--font-round);
  text-align: center; vertical-align: middle;
}
/* 対象カード欄の「※スマートフォンからの〜」を1行に収めるため注記を少し小さく */
/* 注記はブロック化して親セルの行送り(15px)ではなく自前の行送りを使う */
.plan__table small { display: block; font-size: 10px; line-height: 1.45; margin-top: 5px; }
/* この一文を1行に収めるための字間微調整（見た目上は変わらない範囲） */
.plan__fit-line { letter-spacing: -.02em; }
.plan__table tbody th { background: var(--purple-pale); width: 110px; text-align: center; vertical-align: middle; font-family: var(--font-round); color: var(--purple-dark); }
.schedule { padding: 30px 0 44px; }
.schedule__cols { display: flex; flex-direction: column; gap: 28px; }
.schedule__table td { text-align: center; vertical-align: middle; }
.schedule__table tbody tr:nth-child(even) td { background: var(--purple-pale); }
.notes-list { list-style: none; background: var(--white); border: 1px solid #c9c3dd; border-radius: 10px; padding: 14px 16px; }
.notes-list li { font-size: 14px; line-height: 1.75; padding-left: 1.1em; position: relative; margin-bottom: 6px; }
/* この項目だけ1行に収めるための字間微調整 */
.notes-list li.fit-line { letter-spacing: -.04em; }
.notes-list li::before { content: "●"; position: absolute; left: 0; color: var(--purple); font-size: .8em; top: .25em; }
.faq { text-align: center; margin-top: 32px; }
.faq .btn {
  font-size: clamp(18px, 2.4vw, 23px);
  padding: 20px 60px; box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.faq .btn:hover { box-shadow: 0 3px 0 rgba(0,0,0,.18); }

/* =====================================================
   お問い合わせ・フッター
   ===================================================== */
.contact { background: var(--purple-dark); padding: 30px 0 34px; color: var(--white); }
.band-title--contact { font-size: clamp(15px, 3.2vw, 21px); border-bottom: 2px solid var(--ice); padding-bottom: 10px; }
.contact__body { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.contact__tel { display: flex; align-items: center; gap: 14px; }
.contact__label { font-size: 14px; line-height: 1.5; }
.contact__num { font-family: var(--font-round); font-weight: 800; font-size: clamp(24px, 4.6vw, 32px); text-decoration: none; }
.contact__hours { text-align: center; font-size: 14px; margin-top: 12px; }

/* =====================================================
   レスポンシブ
   ===================================================== */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero__kv { display: flex; flex-direction: column; gap: 12px; }
  .hero__kv-left, .hero__kv-right { display: contents; }
  .hero__keyphrase { order: 1; }
  /* 家族イラストは赤カードと同程度の幅に抑え、カード群ともども中央寄せ */
  .hero__family-img { order: 2; margin-top: 0; transform: none; width: min(230px, 65%); align-self: center; }
  .hero__card-row { order: 3; justify-content: center; align-self: center; margin-top: 0; padding: 0; }
  .hero__app { flex: 0 0 auto; }
  .hero__subcards-img { order: 4; width: 90%; align-self: center; padding: 0; }
  /* スマホは幅が足りず2行にすると10px以下になるため、読みやすさを優先して現行サイズを維持 */
  .hero__term-note { order: 5; margin: 0; font-size: 14px; }
  .target__split { grid-template-columns: 1fr; margin-top: -26px; }
  .target__cardside {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px));
    padding: 64px 20px 72px;
  }
  .target__applyside { padding: 30px 20px 36px; text-align: center; }
  .target__buttons { max-width: none; }
  .target__product .btn { max-width: none; }
  .app-guide__box { grid-template-columns: 1fr; gap: 22px; }
  .app-guide__shot { border-left: none; border-top: 2px dotted var(--purple-pale); padding: 22px 0 0; }
  .schedule__table th, .schedule__table td { font-size: 12px; padding: 8px 4px; }
  .benefits__grid { grid-template-columns: 1fr; gap: 20px; }
  .benefit-card { padding: 30px 14px 14px; }
  .benefit1 { display: grid; grid-template-columns: 62px 1fr; gap: 12px 12px; align-items: start; padding: 18px 16px; }
  /* 「200ポイントプレゼント！」を2行目に収める上限 */
  .benefit1__lead { font-size: 17px; }
  .benefit1 .benefit-badge { width: 62px; height: 62px; font-size: 12px; }
  .benefit1 .benefit-badge strong { font-size: 23px; }
  .benefit1__illust { grid-column: 1 / -1; justify-self: center; width: 100px; margin: 0; }
  .benefits__total { padding: 14px 12px; }
  .benefits__total-sp { display: flex; flex-direction: column; gap: 12px; }
  /* TSUBASAポイントとは／使い方のSP分割素材はすべて1カラムで縦積み */
  .tsubasa__sp { display: grid; gap: 14px; }
  .tsubasa__sp img { width: 100%; }
  /* キャッシュバックの素材は中身が左寄りに作られているため、右へ寄せて見た目の中心を合わせる */
  .tsubasa__sp img.tsubasa__sp-cashback { width: 92%; margin-left: 8%; }
  .hero__card { max-width: 200px; }
  /* 「年会費：11,000円」が1行に収まるサイズ（数字と「円」が分かれないように） */
  .hero__subcaps { font-size: 9px; }
  .contact__body { gap: 16px; flex-direction: column; align-items: center; }
  .contact__tel { flex-direction: column; gap: 2px; text-align: center; }
  .contact__num { white-space: nowrap; }
  .faq .btn { display: block; padding: 20px 16px; }
  .plan__table tbody th { width: 92px; font-size: 13px; }
  .site-header__cta { font-size: 13px; padding: 9px 14px; }
}