@charset "UTF-8";
/* =========================================================
   J-STAND LP  /  style.css
   - 設計基準幅: 388px（コンプ実寸）
   - 表示: 最大 430px でロック、超過分は body 背景で左右余白
   - スケール: .lp を container にして cqw/％ で基準幅→430px を等比拡大
   ========================================================= */

/* ---------- リセット（最小） ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, p { margin: 0; }

/* ---------- カラー変数 ---------- */
:root {
  --lp-max: 430px;
  --c-side: #f2f2f2;       /* 左右余白の地色（side-bg 読込前のフォールバック） */
  --c-white: #ffffff;
  --c-orange-1: #ff9d00;   /* CTA上 */
  --c-orange-2: #ff5a1b;   /* CTA下 */
  --c-note: #7a7a7a;       /* 補足テキスト */
}

/* ---------- 全体レイアウト ---------- */
body {
  background: linear-gradient(90deg, #eef7f5 0%, #eeedf1 38%, #d9e5ed 78%, #c4e0f0 100%) fixed;
  background-image: url(../img/common/bg-pc.jpg) ;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  color: #14171a;
  -webkit-font-smoothing: antialiased;
}

/* LP本体：基準幅→430pxで等比、以降ロック */
.lp {
  width: 100%;
  max-width: var(--lp-max);
  background: var(--c-white);
  overflow: hidden;
  container-type: inline-size;   /* cqw の基準＝.lp の幅 */
  box-shadow: 0 18px 24px rgba(0, 40, 60, 0.30);
}

/* =========================================================
   共通：CTAボタン（全ブロックで再利用）
   ※コンプと差が出る場合はこのブロックだけ画像差し替え可
   ========================================================= */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 75%;
  margin: 0 auto;
  padding: 4.6cqw 4cqw;
  border-radius: 2.6cqw;
  background: linear-gradient(180deg, var(--c-orange-1) 0%, var(--c-orange-2) 100%);
  color: #fff;
  font-size: 4.6cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 1.2cqw 2.4cqw rgba(0,0,0,0.18);
}
.cta::before {            /* ▶ 矢印（CSS） */
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 1.5cqw 0 1.5cqw 2.4cqw;
  border-color: transparent transparent transparent #fff;
}

/* 補足テキスト（いつでも解約OK 等） */
.note {
  font-size: 3.1cqw;
  color: var(--c-note);
  text-align: center;
  margin-top: 2.4cqw;
}

/* =========================================================
   BLOCK 01 : ヒーロー（FV）
   ※テキスト/バッジの位置は仮画像基準の初期値。
     実アセット差し替え後に微調整します。
   ========================================================= */
.hero {
  position: relative;
  line-height: 0;            /* img 下の余白除去 */
}
.hero__bg { width: 100%; }

/* 右上バッジ */
.hero__badge-zero {
  position: absolute;
  top: 2.5cqw;
  right: 5cqw;
  width: 24cqw;
}

/* 見出し */
.hero__headline {
  position: absolute;
  top: 4.4cqw;
  left: 5.5cqw;
  width: 94%;                /* コンプ同様、長い行はスマホ上まで伸びる */
  color: #fff;
  font-size: 8.2cqw;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-shadow: 0 0.3cqw 1cqw rgba(0,0,0,0.18);
}
.hero__headline .l {
  display: block;
  white-space: nowrap;       /* 行内では折り返さない（改行は .l 単位のみ） */
  position: relative;
  z-index: 2;
}
/* 「と」に重ねる × */
.x-wrap { position: relative; display: inline-block; }
.close-x {
    position: absolute;
    top: 52%;
    left: 33.2%;
    width: 1.5em;/* 「と」一文字に被せる想定 */
    height: auto;
    opacity: 0.8;
    z-index: 1;
}

/* リード文 */
.hero__lead {
  position: absolute;
  top: 61cqw;                /* 見出し（4行）の下・スマホ左側 */
  left: 5.5cqw;
  width: 54%;
  color: #000;
  font-size: 4.2cqw;
  line-height: 1.6;
  text-shadow: 0 0.3cqw 0.8cqw rgba(255,255,255,0.5);
  text-shadow:
            3px 3px 3px rgba(255,255,255,0.5), -3px -3px 3px rgba(255,255,255,0.5),
           -3px 3px 3px rgba(255,255,255,0.5),  3px -3px 3px rgba(255,255,255,0.5),
            3px 0px 3px rgba(255,255,255,0.5), -3px -0px 3px rgba(255,255,255,0.5),
            0px 3px 3px rgba(255,255,255,0.5),  0px -3px 3px rgba(255,255,255,0.5);
}

/* 下部4バッジ：青/白の境界をまたぐよう下端からはみ出す */
.hero__badges {
  position: absolute;
  left: 2cqw;
  right: 0cqw;
  bottom: 0;
  transform: translateY(8%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.hero__badges li { width: 25%; }

/* CTAエリア（白地）。上余白はまたぐバッジ分を確保 */
.hero__cta-area {
  background: var(--c-white);
  padding: 15cqw 0 7cqw;
  line-height: 1.4;
}

/* =========================================================
   BLOCK 02 : 約10時間
   ========================================================= */
.block02 {
  background: #e7e7e7;
  padding: 7cqw 0 9cqw;
}
.block02 .b02__graphic { text-align: center; }
.block02 .b02__graphic img {
  width: 54%;
  margin: 0 auto;
}
.block02 .b02__text {
  text-align: center;
  color: #2b4a63;
  margin-top: 3cqw;
}
.block02 .b02__text p {
  font-size: 4.8cqw;
  line-height: 1.3;
}
.block02 .b02__lead { margin-bottom: 2.4cqw; }   /* 1行目だけ下に余白 */
.block02 .num {
  color: #5acace;
  font-size: 1.5em;
  font-weight: 700;
  margin: 0 0.12em;
  vertical-align: -0.04em;
}

/* =========================================================
   BLOCK 03 : 「無料」のニュースでは…
   ========================================================= */
.block03 { background: #fff; }

/* 上：コーナー括弧つき引用 */
.b03__quote { padding: 9cqw 10cqw 5cqw; }
.b03__quote-inner { position: relative; padding: 0cqw 7cqw; }
.b03__quote-inner p {
  color: #075085;
  font-size: 4.8cqw;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}
/* 左右の全高ブラケット「[ ]」（縦線フル＋上下の短い足） */
.b03__quote-inner::before,
.b03__quote-inner::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 5cqw;
  border: 0.7cqw solid #075085;
}
.b03__quote-inner::before { left: 0;  border-right: 0; }   /* [ */
.b03__quote-inner::after  { right: 0; border-left: 0; }    /* ] */

/* 下：青グラデ＋上端シェブロン（白地が透けて見える） */
.b03__lower {
  position: relative;
  background: linear-gradient(120deg, #00558c 0%, #0b87c3 100%);
  clip-path: polygon(0 0, 50% 16cqw, 100% 0, 100% 100%, 0 100%);
  padding: 23cqw 0 9cqw;
  text-align: center;
}
.b03__conc p {
  color: #fff;
  font-size: 5.8cqw;
  line-height: 1.4;
  margin: 0 0 7cqw;
  font-weight: 900;
}
.b03__conc .hl { color: #ffff00; }   /* 広告を一切入れません。 */

/* 青背景上の補足テキスト */
.note--on-blue { color: rgba(255,255,255,0.85); }

/* =========================================================
   BLOCK 04 : このような経験ありませんか？
   ========================================================= */
.block04 {
  background: #e8e8ea;
  padding: 2cqw 0 11cqw;
}

/* 見出し（斜線で挟む） */
.b04__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8cqw;
  margin: 0;
  padding: 9cqw 0 8cqw;
}
.b04__head::before,
.b04__head::after {
  content: "";
  width: 0.5cqw;
  height: 14cqw;
  background: #145786;
}
/* .b04__head::before{
  background: #1d6696;
} */
.b04__head::before { transform: rotate(-25deg); }  /* ＼ */
.b04__head::after  { transform: rotate(30deg); }   /* ／ */
.b04__head-txt {
  color: #145786;
  font-size: 5.8cqw;
  line-height: 1.55;
}

/* 4行リスト：アイコン＋右端まで伸びる白カード */
.b04__list {
  display: flex;
  flex-direction: column;
  gap: 9cqw;
}
.b04__row {
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 8cqw;
  padding-right: 15cqw;   /* 右マージン */
}
.b04__icon {
  width: 19cqw;
  flex: none;
  height: auto;
  margin-right: -5cqw;    /* 白カードに若干重ねる */
  position: relative;
  z-index: 1;             /* アイコンを前面に */
}
.b04__card {
  flex: 1;
  margin: 0;
  background: #fff;
  padding: 4.6cqw 5cqw 4.6cqw 11cqw;
  color: #145786;
  font-size: 5cqw;
  line-height: 1.5;
}

/* =========================================================
   BLOCK 05 : J-STANDが、その全部を解決します
   ========================================================= */
.block05 { background: #e8e8ea; }       /* チェブロンの透け部分＝グレー */
.b05__inner {
  background: linear-gradient(110deg, #00528a 0%, #5a96ce 100%);
  clip-path: polygon(0 0, 50% 12cqw, 100% 0, 100% 100%, 0 100%);
  padding: 20cqw 0 9cqw;
  text-align: center;
}
/* 見出しバナー（やや暗い半透明パネル） */
.b05__banner {
  margin: 0 7cqw;
  padding: 4cqw 5cqw;
  background: rgba(0, 35, 60, 0.5);
  border-radius: 1.6cqw;
}
.b05__banner p {
  margin: 0;
  color: #e6ff00;
  font-size: 5.8cqw;
  line-height: 1.2;
  font-weight: 900;
}
/* 説明文（白＋グリーン混在） */
.b05__desc {
  margin: 7cqw 0;
  color: #EAFF00;        /* 既定＝グリーン */
  font-size: 5.8cqw;
  line-height: 1.6;
}
.b05__desc .w { color: #fff; }   /* 白の行 */

/* =========================================================
   BLOCK 06 : 情報飽和 → 何を読むかを選ぶ力
   ========================================================= */
.block06 { background: #e8e8ea; }
.b06__top {
  padding: 4cqw 0 7cqw;
  text-align: center;
}
.b06__illust {
  width: 90%;
  margin: 20px auto 0;
  height: auto;
}
.b06__cap {
  margin: 2cqw 0 0;
  color: #2a6280;
  font-size: 4.65cqw;
  line-height: 1.75;
}
/* 下：青セクション（フラット境界） */
.b06__lower {
  background: linear-gradient(110deg, #00528a 0%, #1f9ccf 100%);
  padding: 11cqw 0 12cqw;
  text-align: center;
}
.b06__msg {
  margin: 0;
  color: #fff;
  font-size: 6.65cqw;
  line-height: 1.95;
  font-weight: 900;
}
.b06__msg .hl {
  display: inline-block;
  background: rgba(0, 28, 52, 0.5);
  padding: 1.4cqw 2cqw;
  line-height: 1.2;
  color: #ffff00;
}

/* =========================================================
   BLOCK 07 : J-CASTデイリーは…（厳選→設計→編集）
   ========================================================= */
.block07 {
  background: #fff;
  padding: 9cqw 0 11cqw;
}
/* 上：括弧フレーム */
.b07__frame {
  position: relative;
  margin: 0 6cqw;
  padding: 0cqw 13cqw;
}
.b07__frame::before,
.b07__frame::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 10cqw;
  /* border: 0.7cqw solid #2f8aa6; */
  display: block;
}
.b07__frame::before { 
  left: 7cqw;
  background-image: url(../img/block07/title-line-left.png);
  background-size: contain;
  background-repeat: no-repeat;
} /* ( */
.b07__frame::after  { 
  right:7cqw;
  background-image: url(../img/block07/title-line-right.png);
  background-size: contain;
  background-repeat: no-repeat;
} /* ) */
.b07__frame p {
  margin: 0;
  color: #145786;
  font-size: 5.8cqw;
  line-height: 1.4;
  text-align: center;
}
.b07__frame .u {
  background: linear-gradient(transparent 62%, #d6f400 62%);  /* 蛍光アンダーライン */
}

/* ステップ */
.b07__steps { margin-top: 8cqw; }
.b07__step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
}
.b07__label {
  background: #d6f400;
  color: #145786;
  font-size: 5.8cqw;
  padding: 2cqw 4cqw;
  white-space: nowrap;
}
.b07__icon { width: 19cqw; height: auto; }
.b07__icon.pos1 {
  margin-left: 3%;
  width: 22cqw;
}

/* 下向き矢印（中央） */
.b07__arrow {
  width: 0; height: 0;
  margin: 3.5cqw auto;
  border-left: 5cqw solid transparent;
  border-right: 5cqw solid transparent;
  border-top: 5cqw solid #1890cc;
}

/* =========================================================
   BLOCK 08 : 朝・通勤中・昼休み／4分で読める
   ========================================================= */
.block08 { background: #fff; }          /* チェブロンの透け＝白 */
.b08__inner {
  background: linear-gradient(110deg, #00528a 0%, #1f9cce 100%);
  clip-path: polygon(0 0, 50% 13cqw, 100% 0, 100% 100%, 0 100%);
  padding: 15cqw 0 10cqw;
  text-align: center;
}
.b08__graphic {
  width: 88%;
  margin: 0 auto;
  height: auto;
}
.b08__msg {
  margin: 6cqw 0 0;
  color: #fff;
  font-size: 5.8cqw;
  line-height: 1.6;
}
.b08__msg .hl {
  display: inline-block;
  background: rgba(0, 28, 52, 0.5);
  color: #d6f400;
  padding: 1cqw 2cqw;
  line-height: 1.2;
}

/* =========================================================
   BLOCK 09 : スマホ実機プレビュー／毎朝1本届く
   ========================================================= */
.block09 {
  position: relative;
  background: #b4d7ed;
  padding: 9cqw 0 9cqw;
  text-align: center;
}
/* 下端：次ブロックへ向かう下向き三角（block09側に保持） */
.block09::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12cqw;
  background: #b4d7ed;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
}

/* スマホ枠＋画面iframe */
.b09__phone {
  position: relative;
  width: 70%;
  margin: 0 auto;
}
.b09__frame {
  position: relative;
  z-index: 2;
  width: 100%;
   /* pointer-events: none; */  /* 枠は操作対象外 */
}
.b09__screen {
  position: absolute;
  z-index: 1;
  top: 3.2%; bottom: 3.2%;
  left: 5.5%; right: 5.5%;
  overflow: hidden;
  background: #fff;
  border-radius: 7% / 3.4%;
}
.b09__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;   /* 操作不可（自動スクロールのみ） */
}

/* 見出し（斜線で挟む） */
.b09__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5cqw;
  margin: 10cqw 0 6cqw;
}
.b09__head::before,
.b09__head::after {
  content: "";
  width: 0.9cqw;
  height: 12cqw;
  background: #3f7fa8;
}
.b09__head::before { transform: rotate(-20deg); }
.b09__head::after  { transform: rotate(20deg); }
.b09__head-txt {
  color: #145786;
  font-size: 5.2cqw;
  line-height: 1.55;
}

/* 点線ボックス */
.b09__box {
  margin: 0 5cqw;
  padding: 5cqw 5cqw 2cqw;
  background: #fff;
  border: 0.5cqw dashed #6aa0c8;
  border-radius: 2cqw;
  text-align: left;
}
.b09__item {
  padding: 3.5cqw 1cqw;
  border-bottom: 0.4cqw dashed #aacbe0;
}
.b09__item:last-child { border-bottom: 0; }
.b09__cat {
  margin: 0 0 1.5cqw;
  font-size: 4.8cqw;
  line-height: 1.3;
}
.b09__cat .arr { color: #1a6ba0; margin-right: 0.3em; }
.b09__cat .hl  { 
  background: #d6f400; 
  color: #1a4f6e; 
  padding: 0.1em 0.2em;     
  font-weight: 900;
}
.b09__desc {
  margin: 0;
  color: #000000;
  font-size: 3.8cqw;
  line-height: 1.6;
}

/* COMING SOON（点線ボックス） */
.b09__soon {
  margin: 8cqw 5cqw;
  padding: 5cqw 5cqw;
  background: #fff;
  border: 0.5cqw dashed #6aa0c8;
  border-radius: 2cqw;
  color: #2f7aac;
  font-size: 3.8cqw;
  line-height: 1.7;
  text-align: left;
}

/* このブロックのCTA下補足はグレーで可 */
.block09 .note { color: #5a7287; }


.b09__screen iframe {
  width: 100%;
  height: 302%;            /* 画面の3倍＝3画面分を送る。feed.htmlの内容量に合わせて倍率を調整 */
  border: 0;
  pointer-events: none;    /* 操作不可（自動スクロールのみ） */
  transform: translateY(0);
  animation: b09-feedscroll 22s linear infinite;
  animation-play-state: paused;   /* ★変更：初期は一時停止。JSが block09 に .is-playing を付けたら再生開始 */
  will-change: transform;
}
/* ★追加：block09の上端がビューポート上部の指定%（JS側 B09_TRIGGER で調整）に達したら再生 */
.block09.is-playing .b09__screen iframe {
  animation-play-state: running;
}
/* iframe高が画面のN倍のとき、送り量は -(N-1)/N × 100%（N=3 → -66.667%） */
@keyframes b09-feedscroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-66.667%); }
}
@media (prefers-reduced-motion: reduce) {
  .b09__screen iframe { animation: none; }
}

/* =========================================================
   BLOCK 10 : 読者が感じる4つの違い
   ========================================================= */
.block10 {
  position: relative;
  background: #fff;
  padding: 12cqw 0 9cqw;
}
/* 見出し */
.b10__head {
  margin: 7cqw 0 6cqw;
  text-align: center;
}
.b10__head-top {
  display: block;
  color: #145786;
  font-size: 5.4cqw;
  line-height: 1.3;
}
/* 「4つの違い」＋下線＝画像（特殊書体のため） */
.b10__head-img {
  display: block;
  width: 50cqw;
  height: auto;
  margin: -2.5cqw auto 0;
}

/* カード共通 */
.b10__card {
  position: relative;
  margin: 0 4.5cqw 4cqw;
  padding: 5cqw 9cqw 6cqw;
  border-radius: 3cqw;
}
.b10__card--dark  { background: #2497d1; color: #fff; }
.b10__card--light { background: #b4d6ec; color: #1f5a80; }

/* 透かし番号（画像）：枠外にはみ出す表現 */
.b10__num {
  position: absolute;
  top: -0.5cqw;
  left: 1.5cqw;
  height: 26cqw;
  width: auto;
  z-index: 0;
}
.b10__card--rev .b10__num { left: auto; right: 1.5cqw; }

/* タイトル・本文 */
.b10__title {
  position: relative;
  z-index: 1;
  margin: 0 0 3cqw;
  font-size: 5cqw;
  font-weight: 900;
  text-align: center;
}
.b10__cbody {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4cqw;
}
.b10__card--rev .b10__cbody { flex-direction: row-reverse; }
.b10__cicon { width: 25cqw; flex: none; height: auto; }
.b10__cdesc {
  margin: 0;
  font-size: 3.8cqw;
  line-height: 1.6;
}

/* =========================================================
   BLOCK 11 : 読者の声
   ========================================================= */
.block11 {
  background: radial-gradient(circle at 50% 22%, #1a90cf 0%, #00538a 78%);
  padding: 9cqw 0 9cqw;
}
.b11__head {
  margin: 0 auto 3cqw;
  width: max-content;
  color: #d6f400;
  font-size: 5.4cqw;
  font-weight: 700;
  text-align: center;
}
.b11__head img{
  width: 50%;
  height: auto;
  margin: 0 auto 16px;
}
.b11__cards {
  margin: 0 4.6cqw;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
}
.b11__card {
  display: flex;
  gap: 4cqw;
  background: #fff;
  border-radius: 1.5cqw;
  padding: 4cqw;
}
.b11__photo {
  width: 20cqw;
  height: auto;
  border-radius: 1.5cqw;
  flex: none;
  align-self: flex-start;
}
.b11__quote { flex: 1; }
.b11__text {
  margin: 0;
  color: #1a3a52;
  font-size: 3.5cqw;
  line-height: 1.75;
}
.b11__text .mk {
  background: linear-gradient(transparent 12%, #eaf24d 12%, #eaf24d 88%, transparent 88%);
}
.b11__who {
  margin: 1.5cqw 0 0;
  color: #1a3a52;
  font-size: 3.3cqw;
}

/* block11 CTA 上マージン */
.block11 .cta { margin-top: 30px; }

/* =========================================================
   BLOCK 12 : プランと料金
   ========================================================= */
.block12 {
  background: #fff;
  padding: 9cqw 0 10cqw;
  text-align: center;
}
/* 見出し＋下線（中央ノッチ） */
.b12__head {
  position: relative;
  margin: 0;
  padding-bottom: 1cqw;
  color: #145786;
  font-size: 5.6cqw;
  font-weight: 700;
}
.b12__head img{
  width: 50%;
  height: auto;
  margin: 0 auto 16px;
}
.b12__sub {
  margin: 5cqw 0 0;
  color: #145786;
  font-size: 4.8cqw;
  font-weight: 900;
}

/* 淡黄緑プランボックス（下端チェブロン） */
.b12__plan {
  margin: 7cqw 6cqw 0;
  padding: 7cqw 5cqw 17cqw;
  background: #f9ffcd;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13cqw), 50% 100%, 0 calc(100% - 13cqw));
}
.b12__list { text-align: left; }
.b12__li {
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  color: #145786;
  font-size: 5cqw;
  line-height: 1.5;
  margin-bottom: 4.5cqw;
}
.b12__li:last-child { margin-bottom: 0; }
.b12__check { width: 5.5cqw; flex: none; }
.b12__li--main { position: relative; }
.b12__price {
  color: #145786;
  font-size: 7cqw;
  font-weight: 900;
}
.b12__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12cqw; height: 12cqw;
  margin-left: 1.5cqw;
  border-radius: 50%;
  background: #ef6a4a;
  color: #fff;
  font-size: 2.8cqw;
  line-height: 1.1;
  text-align: center;
  transform: rotate(30deg);
}

/* 黄色の引用ボックス */
.b12__quote {
  margin: 9cqw 6cqw 0;
  padding: 4cqw 2.4cqw;
  background: #d8fc00;
  color: #1a4f7e;
  font-size: 4.3cqw;
  line-height: 1.5;
  text-align: left;
}
.b12__sub2 {
  margin: 6cqw 0 0;
  color: #2f6e96;
  font-size: 4.6cqw;
}

/* =========================================================
   BLOCK 13 : よくある質問
   ========================================================= */
.block13 {
  background: linear-gradient(180deg, #005a8e 0%, #0a6ea0 13%, #ffffff 26%);
  padding: 9cqw 0 10cqw;
  background-image: url("../img/block13/back-faq.png");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}
.b13__head {
  width: max-content;
  margin: 0 auto 7cqw;
  padding: 2.6cqw 8cqw;
  border-radius: 1.6cqw;
  color: #fff;
  font-size: 5.4cqw;
  font-weight: 700;
}
.b13__head {
  max-width: 59%;
}
.b13__faq {
  margin: 0 5cqw;
  display: flex;
  flex-direction: column;
  gap: 5cqw;
}
.b13__qa {
  background: #a1c8e5;
  border-radius: 2.5cqw;
  padding: 5cqw;
}
.b13__q, .b13__a {
  display: flex;
  gap: 2.5cqw;
  align-items: flex-start;
  margin: 0;
}
.b13__q { margin-bottom: 3cqw; }
.b13__badge {
  flex: none;
  width: 5.6cqw; height: 5.6cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8cqw;
  background: #00497f;
  color: #fff;
  font-size: 3.4cqw;
  font-weight: 400;
}
.b13__badge--a { 
  background: #ffffff;
  color: #00497f;
}
.b13__qt {
  color: #145786;
  font-size: 4.1cqw;
  font-weight: 700;
  line-height: 1.4;
}
.b13__a > span:last-child {
  color: #000000;
  font-size: 3.7cqw;
  line-height: 1.75;
}

/* =========================================================
   BLOCK 14 : クロージング
   ========================================================= */
.block14 {
  background: radial-gradient(circle at 50% 42%, #1893d2 0%, #00538a 80%);
  background-image: url("../img/block14/bg.jpg");
  background-size: cover;
  padding: 9cqw 0 10cqw;
  text-align: center;
}
.b14__head {
  margin: 0 0 5cqw;
  color: #fff;
  font-size: 4.8cqw;
  font-weight: 900;
}
.b14__head .g { color: #eaff00; }
.b14__body {
  margin: 0 0 7cqw;
  color: #fff;
  text-indent: -0.5em;
  font-size: 4.66cqw;
  line-height: 1.6;
  padding: 3cqw 16cqw;
  text-align: left;
}
/* 2段組CTA（メイン＋サブ） */
.cta--stack .cta__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}
.cta--stack .cta__sub {
  font-size: 0.66em;
  font-weight: 400;
  margin-top: 0.2em;
}
.block14 .note { color: rgba(255,255,255,0.85); }
.block14 .cta + .note { margin-top: 2cqw; }
.block14 .note + .cta { margin-top: 10cqw; }

/* =========================================================
   スクロール演出：背景込みで不透明度フェード＋中身スライド
   （次ブロックの背景が先に覗かない／接合部の白帯も出ない）
   ========================================================= */
.block {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.block.is-visible { opacity: 1; }
.block__in {
  transform: translateY(34px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.block.is-visible .block__in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .block, .block__in { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   固定CTA（スティッキー）
   ========================================================= */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 200;
  padding: 0 0 12px;
  text-align: center;
  pointer-events: none;          /* バー自体はクリック透過 */
  transition: opacity 0.3s ease;
}
.sticky-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.sticky-cta__btn {
  pointer-events: auto;          /* ボタンだけクリック可 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 75%;
  max-width: 372px;
  margin: 0 auto;
  padding: min(4.6vw, 20px) min(4vw, 17px);
  border-radius: 11px;
  background: linear-gradient(180deg, #ff9d00 0%, #ff5a1b 100%);
  color: #fff;
  font-weight: 700;
  font-size: min(4.6vw, 19px);
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(0,0,0,0.22);
}
.sticky-cta__btn::before {        /* ▶ */
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: min(1.5vw,6px) 0 min(1.5vw,6px) min(2.4vw,10px);
  border-color: transparent transparent transparent #fff;
}
.sticky-cta__note {
  pointer-events: none;
  margin: 7px 0 0;
  font-size: min(3.2vw, 13px);
  transition: color 0.25s ease;
}
/* 注釈色：背景ブロックの明暗で切替 */
.sticky-cta[data-theme="dark"]  .sticky-cta__note { color: #ffffff; }
.sticky-cta[data-theme="light"] .sticky-cta__note { color: #234453; }

/* 固定バー分の下余白（最後の内容が隠れないよう少し確保） 
.lp { padding-bottom: 4cqw; }*/

/* block01：CTA撤去後の白エリア（バッジの着地分のみ確保） */
.hero__cta-area { padding: 3cqw 0 5cqw; }

/* =========================================================
   FV内CTA（初期表示・通常配置）。スクロールで下部固定CTAへ引き継ぐ
   ========================================================= */
.hero-cta { text-align: center; margin-top: 2cqw; }
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 86%;
  max-width: 372px;
  margin: 0 auto;
  padding: min(4.6vw, 20px) min(4vw, 17px);
  border-radius: 11px;
  background: linear-gradient(180deg, #ff9d00 0%, #ff5a1b 100%);
  color: #fff;
  font-weight: 700;
  font-size: min(4.6vw, 19px);
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(0,0,0,0.22);
}
.cta-btn::before {                  /* ▶ */
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: min(1.5vw,6px) 0 min(1.5vw,6px) min(2.4vw,10px);
  border-color: transparent transparent transparent #fff;
}
.cta-note {
  margin: 7px 0 0;
  font-size: min(3.2vw, 13px);
}
.hero-cta__note { color: #234453; }  /* 白地なので濃色 */