/* =====================================================================
   lp-theme.css : ブライト&ブルー ブラッシュアップ層
   リファレンス（親しみ系コンサルLP）に寄せる再スキン。jda.css / jda-web.css /
   lp.css の後に読み込み、body.lp スコープで上書きする。
   方向性: ロイヤルブルー主役で少し明るく / 見出しは力強いゴシック /
   角丸 + ソフトシャドウのカード / 金は「限定・数値」の差し色 / 反復CTAは青帯。
   calc / clamp 内の + と - は前後に半角スペースを置く（CSS 仕様）。
   ===================================================================== */

/* ---- トークン上書き（明るい青・角丸・影・ゴシック見出し）---- */
body.lp{
  --accent:#2563eb;          /* 明るく親しみのあるロイヤルブルー */
  --accent-2:#3b82f6;        /* グラデ用のスカイ寄り */
  --accent-soft:#e9f1ff;
  --paper-2:#eef4ff;         /* セクションの淡い青 */
  --paper-3:#dde9ff;
  --line:#e4ecfa;
  --line-2:#cfdcf5;
  --r:18px;
  --r-sm:12px;
  --ff-display:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif; /* 見出しもゴシックへ */
  --shadow-card:0 14px 32px -18px rgba(23,54,140,0.22);
  --shadow-pop:0 22px 48px -20px rgba(23,54,140,0.30);
  --shadow-soft:0 10px 24px -16px rgba(23,54,140,0.18);
  --shadow-btn:0 12px 24px -12px rgba(37,99,235,0.45);
  --shadow-gold:0 12px 26px -12px rgba(226,112,10,0.5);
  /* 温色アクセントをリファレンスのオレンジに統一（金 → 橙）。--seal 系を上書きすると全箇所へ反映 */
  --seal:#e2700a;        /* ビビッドなオレンジ : ボタン地・バッジ・罫・大字（白文字は大ボタン3:1）*/
  --seal-ink:#c2410c;    /* 濃いオレンジ : 白地の文字・数値（AA 5:1）*/
  --seal-soft:#fff0e3;   /* 淡いオレンジの面 */
}

/* ---- 見出しを力強いゴシックに（--ff-display はゴシックへ切替済。weight を上げる）---- */
body.lp .sec-head h2,body.lp .svc-split .svc-head h2,body.lp .lp-campaign-jp,
body.lp .lp-final h2,body.lp .cta h2,body.lp .lp-cta-band .ttl,body.lp .pillar h3,
body.lp .feature h3,body.lp .tier .t-name,body.lp .lp-note,body.lp .accordion .ac-t,
body.lp .reason .r-h,body.lp .mythfact-q h2,body.lp .fact-band h3,
body.lp .stat-card .s-n,body.lp .intro-card h3,body.lp .lp-fee-n{font-weight:800;letter-spacing:0.01em}
body.lp .lp-hero-title{font-weight:900;letter-spacing:0.005em;line-height:1.24}
body.lp .sec-head h2{line-height:1.4}

/* ---- カードを角丸 + ソフトシャドウに（罫線分離 → 影分離へ）---- */
body.lp .pillar,body.lp .tier,body.lp .card,body.lp .news-card,body.lp .login-card{
  border-radius:var(--r);box-shadow:var(--shadow-card);border-color:transparent;background:#fff}
body.lp .pillar:hover,body.lp .tier:hover,body.lp .card:hover,body.lp .news-card:hover{
  box-shadow:var(--shadow-pop);transform:translateY(-6px)}
body.lp .pillar{border-top:4px solid var(--accent)}
body.lp .lp-benefits .pillar{border-top-color:var(--seal)}
body.lp .tier.featured{background:linear-gradient(160deg,var(--accent),#1e40af)}
/* フォーム入力も角丸 + 軽い影で柔らかく */
body.lp .form input,body.lp .form select,body.lp .form textarea{border-radius:var(--r-sm);border-color:var(--line-2)}
body.lp .form input:focus,body.lp .form select:focus,body.lp .form textarea:focus{box-shadow:0 0 0 4px var(--accent-soft)}

/* ---- 明るい背景（淡い青のソフトグラデ。ドット地紋＋グラデのタイル化バンドを廃止し、落ち着いた面に）---- */
body.lp .sec.alt{background:linear-gradient(180deg,#f7faff 0%,#edf3ff 100%)}
body.lp .lp-apply{background:linear-gradient(180deg,#f7faff 0%,#edf3ff 100%)}

/* ---- ボタンを親しみある質感に（角丸ピル + ソフトシャドウ + 弾む hover）---- */
body.lp .btn-cta{color:#fff;box-shadow:var(--shadow-gold)}
body.lp .btn-cta:hover{color:#fff;box-shadow:0 16px 32px -12px rgba(226,112,10,0.6)}
body.lp .btn-solid{box-shadow:var(--shadow-btn)}
body.lp .btn-solid:hover{box-shadow:0 16px 32px -12px rgba(37,99,235,0.55)}
body.lp .btn{font-weight:700}

/* ---- 反復CTAバンドを青帯（リファレンスの主要CTA）に ---- */
body.lp .lp-cta-band{background:linear-gradient(135deg,#2f6bf0 0%,#1e40af 100%);border-top:none;border-bottom:none;position:relative;overflow:hidden}
body.lp .lp-cta-band .ttl{color:#fff}
body.lp .lp-cta-band .ttl .accent{color:#ffc89e}
body.lp .lp-cta-band .lp-cta-micro li{color:rgba(255,255,255,0.92)}
body.lp .lp-cta-band .lp-cta-micro li::before{border-color:#ffc89e}

/* ---- ヒーローの差し色をゴールド下線のまま、見出しは超太ゴシック（上で指定）---- */
body.lp .kicker{font-weight:800}

/* =====================================================================
   新コンポーネント（リファレンス由来）
   ===================================================================== */

/* ---- JDAとは: 導入2カード ---- */
.intro-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-m)}
.intro-card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:var(--space-l);display:flex;gap:1.2rem;align-items:flex-start}
.intro-card .ic-img{flex:0 0 auto;width:72px;height:72px;border-radius:16px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.intro-card .ic-img img,.intro-card .ic-img svg{width:44px;height:44px}
.intro-card h3{font-family:var(--ff-display);font-size:1.15rem;color:var(--ink);margin-bottom:0.5rem;line-height:1.5}
.intro-card p{font-size:0.95rem;color:var(--text);line-height:1.9}
@media(max-width:760px){.intro-cards{grid-template-columns:1fr}}

/* ---- 問題提起 → 反証 ---- */
.mythfact-q h2{text-align:center}
/* 「誤解」エビーブロー: 前後に罫線を入れて「- 誤解 -」の中央ラベルに。和文2字は字間を少し詰める */
.mythfact-q .kicker{letter-spacing:0.16em}
.mythfact-q .kicker::after{content:"";width:28px;height:1px;background:var(--accent)}
.myth-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-m);margin-top:2.4rem}
.myth{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:2rem 1.6rem;text-align:center;position:relative}
.myth .m-ill{width:96px;height:96px;margin:0 auto 1.1rem;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.myth .m-ill img,.myth .m-ill svg{width:64px;height:64px}
.myth .m-t{font-family:var(--ff-display);font-weight:700;color:var(--ink);font-size:1.05rem;line-height:1.6}
.myth .m-bubble{display:inline-block;font-family:var(--ff-label);font-size:0.72rem;font-weight:800;letter-spacing:0.08em;color:var(--mute);background:var(--paper-2);border-radius:999px;padding:0.3rem 0.9rem;margin-bottom:1rem}
.fact-band{margin-top:clamp(2.5rem,2rem + 2vw,4rem);background:linear-gradient(150deg,#0e1b46 0%,#10245e 100%);border-radius:24px;box-shadow:var(--shadow-pop);padding:clamp(2.4rem,1.8rem + 3vw,4rem);text-align:center;position:relative;overflow:hidden;color:#fff}
.fact-band .f-tag{display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--ff-label);font-size:0.8rem;font-weight:800;letter-spacing:0.1em;color:#fff;background:var(--seal);padding:0.45rem 1.2rem;border-radius:999px;margin-bottom:1.4rem}
.fact-band h3{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.6vw,2.3rem);line-height:1.5;color:#fff;letter-spacing:0.01em}
.fact-band .f-big{display:block;font-family:var(--ff-num);font-weight:700;font-size:clamp(2.8rem,2rem + 4vw,5rem);color:var(--seal);line-height:1.1;margin:clamp(1.6rem,1.1rem + 1.8vw,2.8rem) 0 0.6rem}
.fact-band p{color:rgba(255,255,255,0.86);max-width:48rem;margin:1.4rem auto 0;line-height:1.95;font-size:1rem}
@media(max-width:760px){.myth-list{grid-template-columns:1fr;gap:1.2rem}}

/* ---- 選ばれる理由 Point（媒体 + テキスト交互）---- */
.reasons{display:flex;flex-direction:column;gap:clamp(2.6rem,2rem + 2.5vw,4.8rem)}
.reason{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(2rem,1.4rem + 3vw,5rem);align-items:center}
.reason:nth-child(even) .r-media{order:2}
.reason .r-tag{display:inline-flex;align-items:center;gap:0.55rem;font-family:var(--ff-label);font-size:0.78rem;font-weight:800;letter-spacing:0.06em;color:#fff;background:var(--accent);padding:0.42rem 1.05rem;border-radius:999px;margin-bottom:1.1rem;box-shadow:var(--shadow-btn)}
.reason .r-h{font-family:var(--ff-display);font-size:clamp(1.4rem,1.1rem + 1.3vw,2.1rem);color:var(--ink);line-height:1.45;margin-bottom:0.9rem}
.reason .r-d{color:var(--text);line-height:1.95;font-size:1rem;max-width:42ch}
.reason .r-media{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-card);background:var(--paper-3)}
.reason .r-media img{width:100%;height:100%;object-fit:cover;display:block}
.reason .r-media .r-badge{position:absolute;left:1.1rem;top:1.1rem;font-family:var(--ff-num);font-weight:800;font-size:1.1rem;color:#fff;background:rgba(14,27,70,0.7);backdrop-filter:blur(4px);border-radius:12px;padding:0.4rem 0.8rem;letter-spacing:0.04em}
@media(max-width:860px){.reason{grid-template-columns:1fr;gap:1.4rem}.reason:nth-child(even) .r-media{order:0}}

/* ---- 実績・特典 ハイライトカード ---- */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-m)}
.stat-card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:1.9rem 1.3rem 1.7rem;text-align:center;border-top:4px solid var(--seal)}
.stat-card .s-ico{width:56px;height:56px;margin:0 auto 0.9rem;border-radius:50%;background:var(--seal-soft);color:var(--seal-ink);display:flex;align-items:center;justify-content:center}
.stat-card .s-ico svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7}
.stat-card .s-n{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:clamp(2rem,1.6rem + 1.4vw,2.9rem);color:var(--seal-ink);line-height:1.05}
.stat-card .s-n em{font-style:normal;font-size:0.42em;font-family:var(--ff-body);font-weight:700;margin-left:0.15em;color:var(--seal-ink)}
.stat-card .s-l{font-size:0.86rem;color:var(--text);margin-top:0.5rem;font-weight:600;line-height:1.6}
@media(max-width:860px){.stat-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.stat-cards{grid-template-columns:1fr}}

/* ---- ヒーロー: ライト＆イラスト（リファレンス調）---- */
/* 暗い写真ヒーローをやめ、淡い青グラデ + 濃色ゴシック見出し + 右にフラットイラスト。 */
body.lp .lp-hero{background:linear-gradient(165deg,#ffffff 0%,#eaf2ff 50%,#d9e6ff 100%);min-height:auto}
body.lp .lp-hero-media{display:none}
body.lp .lp-hero-inner{display:flex;flex-direction:column}
body.lp .lp-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.1rem, 0.8rem + 1.4vh, 1.8rem);min-width:0}
body.lp .lp-hero-title{color:var(--ink);text-shadow:none;max-width:20em;font-size:clamp(1.85rem, 0.6rem + 2.4vw, 3.2rem)}
body.lp .lp-hero-title .u{color:var(--ink)}
body.lp .lp-hero-title .u::after{background:var(--seal);opacity:1;height:0.22em;bottom:0.02em;opacity:0.5}
body.lp .lp-hero-sub{color:var(--accent);text-shadow:none}
body.lp .lp-hero-lede{color:var(--text);text-shadow:none}
body.lp .lp-hero-meta li{color:var(--ink)}
body.lp .lp-hero-inner .lp-cta-micro.on-dark li{color:var(--mute)}
body.lp .lp-hero-inner .lp-cta-micro.on-dark li::before{border-color:var(--green)}
body.lp .lp-hero-cta .btn-ghost{color:var(--navy-ink);border-color:var(--line-2)}
body.lp .lp-hero-cta .btn-ghost:hover{background:var(--navy-ink);color:#fff;border-color:var(--navy-ink)}
.lp-hero-art{display:block;width:100%;max-width:420px;align-self:center;margin-top:0.5rem}
.lp-hero-art img{width:100%;height:auto;display:block}
@media(min-width:1024px){
  body.lp .lp-hero-inner{display:grid;grid-template-columns:1.06fr 0.94fr;align-items:center;gap:clamp(2rem, 1rem + 3vw, 4.5rem)}
  .lp-hero-art{max-width:none;margin-top:0}
}

/* ---- ライトヒーローに合わせてヘッダーは常に白（透過をやめる）---- */
body.lp .site-header{background:rgba(255,255,255,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body.lp .site-header:not(.scrolled) .brand img{filter:none}
body.lp .site-header:not(.scrolled) .brand .org{color:var(--ink);border-left-color:var(--line-2)}
body.lp .site-header:not(.scrolled) .lp-head-note{color:var(--seal-ink)}
body.lp .site-header:not(.scrolled) .lp-head-cta .btn-solid{background:var(--navy-ink);border-color:var(--navy-ink);color:#fff}
body.lp .site-header:not(.scrolled) .lp-head-cta .btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- 選ばれる理由タイル内部（グラデ地 + 白円 + 大アイコン + 金ドット）---- */
.reason .r-text{min-width:0}
.reason .r-media{background:linear-gradient(150deg,#eaf2ff 0%,#cfe0fb 100%);display:flex;align-items:center;justify-content:center}
.reason .r-media::before{content:"";position:absolute;width:58%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:var(--shadow-soft)}
.reason .r-media::after{content:"";position:absolute;right:15%;top:18%;width:13px;height:13px;border-radius:50%;background:var(--seal)}
.reason .r-ico-lg{position:relative;z-index:1;width:30%;color:var(--accent);display:flex}
.reason .r-ico-lg svg{width:100%;height:auto;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* 誤解アイコン */
.myth .m-ill svg{width:56px;height:56px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.myth .m-t,.reason .r-h,.fact-band h3,.stat-card .s-l{word-break:normal;overflow-wrap:anywhere}
@media(max-width:640px){.myth .m-t br{display:none}}

/* ---- リファレンスに合わせセクションを中央寄せ（選ばれる理由 Point の行1-5は交互のまま除外）---- */
body.lp .sec-head,body.lp .svc-split .svc-head{text-align:center;max-width:none;margin-left:auto;margin-right:auto}
body.lp .sec-head .kicker,body.lp .svc-split .svc-head .kicker{justify-content:center}
body.lp .sec-head p,body.lp .svc-split .svc-head p{margin-left:auto;margin-right:auto}
body.lp .svc-split .svc-head .link{justify-content:center}
/* 申込フォーム: 左の情報カラム削除に伴いフォームを中央1カラムへ */
body.lp .lp-apply .contact-grid{grid-template-columns:minmax(0,640px);justify-content:center}
body.lp .lp-apply .form > p{text-align:center}

/* ---- ヒーローを1枚バナー画像に（文字・ボタンは画像内。固定ヘッダー分だけ上に余白）---- */
body.lp .lp-hero{display:block;min-height:auto;padding:0;background:#eaf3fb;isolation:auto;overflow:hidden}
body.lp .lp-hero .lp-hero-img{display:block;width:100%;height:auto;aspect-ratio:1980/976}
@media(max-width:640px){body.lp .lp-hero .lp-hero-img{aspect-ratio:937/1624}}

/* ---- 全セクションのエビーブローを「- X -」（前後に罫線）の中央ラベルに統一（年会費等の値ラベルは対象外）---- */
body.lp .sec-head .kicker,body.lp .svc-head .kicker,body.lp .lp-campaign .kicker{letter-spacing:0.16em}
body.lp .sec-head .kicker::after,body.lp .svc-head .kicker::after,body.lp .lp-campaign .kicker::after{content:"";width:28px;height:1px;background:currentColor}