/* =====================================================================
   JDA コマースサミット限定キャンペーン LP : 専用コンポジション
   真実源 jda.css / jda-web.css のトークン・字形・余白・モーションを継承。
   本ファイルは LP 固有の差分のみ（ミニマルヘッダー・キャンペーンヒーロー・
   課題グリッド・キャンペーン帯・限定特典カード・対象企業・会費・最終フォーム）。
   主役はロイヤルブルー var(--accent)。真鍮ゴールド var(--seal) は「限定」の
   合図に一点で使う。装飾ドロップシャドウは使わず罫線と背景差で分離する。
   calc / clamp 内の + と - は前後に半角スペースを置く（CSS 仕様）。
   ===================================================================== */

/* ---- 共通ボタンの追補（暗面用の白アウトライン）---- */
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.55);padding:0.9rem 1.8rem}
.btn-ghost:hover{background:#fff;color:var(--navy-ink);border-color:#fff;transform:translateY(-2px)}
.btn-ghost:hover svg{transform:translateX(4px)}

/* ---- ミニマルヘッダー（ヒーローに重なる透過 → スクロールで白）---- */
.lp .top-rule{display:none}
.lp .site-header{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);border-bottom:1px solid rgba(255,255,255,0.18);transition:background var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease),-webkit-backdrop-filter var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lp .site-header.scrolled{background:rgba(255,255,255,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 14px 36px -28px rgba(10,18,48,0.32)}
.lp .site-header .brand img,.lp .site-header .brand .org,.lp .lp-head-note,.lp .lp-head-cta .btn-solid{transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),filter var(--dur) var(--ease)}
.lp .site-header:not(.scrolled) .brand img{filter:brightness(0) invert(1)}
.lp .site-header:not(.scrolled) .brand .org{color:#fff;border-left-color:rgba(255,255,255,0.4)}
.lp .site-header:not(.scrolled) .lp-head-note{color:rgba(255,255,255,0.85)}
.lp .site-header:not(.scrolled) .lp-head-cta .btn-solid{background:transparent;border-color:rgba(255,255,255,0.6);color:#fff}
.lp .site-header:not(.scrolled) .lp-head-cta .btn-solid:hover{background:#fff;border-color:#fff;color:var(--navy-ink)}
.lp-head-cta{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.lp-head-note{font-family:var(--ff-label);font-size:0.74rem;font-weight:700;letter-spacing:0.08em;color:var(--seal-ink);white-space:nowrap}

/* ---- ヒーロー（全面写真 + 大型セリフ + 限定バッジ）---- */
.lp-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:var(--navy-deep);overflow:hidden;isolation:isolate}
.lp-hero-media{position:absolute;inset:0;z-index:0;background-image:url(../img/hero.jpg);background-image:image-set(url(../img/hero.webp) type("image/webp"), url(../img/hero.jpg) type("image/jpeg"));background-size:cover;background-position:center}
.lp-hero-scrim{position:absolute;inset:0;background:linear-gradient(102deg, rgba(8,13,40,0.62) 0%, rgba(8,13,40,0.44) 38%, rgba(8,13,40,0.2) 72%, rgba(8,13,40,0.08) 100%),linear-gradient(to bottom, rgba(8,13,40,0.42) 0%, rgba(8,13,40,0) 24%, rgba(8,13,40,0) 54%, rgba(8,13,40,0.36) 100%)}
.lp-hero-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.1rem, 0.8rem + 1.6vh, 1.9rem);padding-block:calc(var(--header-h) + clamp(1.5rem, 5vh, 3.2rem)) clamp(3rem, 8vh, 6rem)}
.lp-hero-badge{display:inline-flex;align-items:center;gap:0.55rem;font-family:var(--ff-label);font-size:0.76rem;letter-spacing:0.1em;font-weight:700;color:var(--navy-ink);background:var(--seal);padding:0.5rem 1.1rem;border-radius:var(--pill)}
.lp-hero-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--navy-ink)}
/* max-width は em で指定（和文1文字 ≒ 1em）。ch だと CJK 15文字が収まらず意図した br の前で折れて孤立行が出る。 */
.lp-hero-title{font-family:var(--ff-display);font-weight:600;font-size:clamp(2.1rem, 0.6rem + 3.8vw, 4.6rem);line-height:1.18;letter-spacing:0.005em;color:#fff;max-width:19em;text-shadow:0 2px 36px rgba(6,11,34,0.42)}
.lp-hero-title .u{position:relative;color:#fff;font-weight:700}
.lp-hero-title .u::after{content:"";position:absolute;left:0;right:0;bottom:0.04em;height:0.07em;background:var(--seal);opacity:0.95}
.lp-hero-sub{font-family:var(--ff-label);font-weight:700;font-size:clamp(0.92rem, 0.85rem + 0.4vw, 1.12rem);letter-spacing:0.06em;color:#fff;margin:0;text-shadow:0 1px 18px rgba(6,11,34,0.5)}
.lp-hero-lede{font-family:var(--ff-body);font-weight:400;font-size:clamp(1rem, 0.94rem + 0.4vw, 1.2rem);color:rgba(255,255,255,0.92);line-height:1.85;max-width:52ch;margin:0;text-shadow:0 1px 22px rgba(6,11,34,0.45)}
.lp-hero-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.lp-hero-meta{display:flex;flex-wrap:wrap;gap:0.7rem 1.5rem;align-items:center;margin-top:0.3rem}
.lp-hero-meta li{display:flex;align-items:flex-start;gap:0.65rem;min-width:0;font-family:var(--ff-label);font-size:0.82rem;font-weight:600;color:#fff;letter-spacing:0.03em;line-height:1.5}
.lp-hero-meta li::before{content:"";flex-shrink:0;margin-top:0.32em;width:6px;height:6px;border-top:1.7px solid var(--seal);border-right:1.7px solid var(--seal);transform:rotate(45deg)}
.lp-hero-meta li span{min-width:0;overflow-wrap:anywhere}

/* ---- 課題提起グリッド ---- */
.lp-risks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-l) var(--gutter);margin-bottom:clamp(3rem, 2rem + 3vw, 5rem)}
.lp-risk{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;border-top:1px solid var(--line-2);padding-top:1.4rem;position:relative}
.lp-risk::before{content:"";position:absolute;top:-1px;left:0;width:32px;height:1px;background:var(--accent)}
.lp-risk-ic{width:42px;height:42px;border-radius:11px;background:var(--paper-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy-ink)}
.lp-risk-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.lp-risk p{font-size:0.98rem;color:var(--text);line-height:1.8;margin:0}
.lp-note{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);line-height:1.6;color:var(--ink);letter-spacing:0.005em;max-width:42ch;border-left:3px solid var(--accent);padding-left:clamp(1.2rem, 0.8rem + 1.2vw, 2rem)}
.lp-note .accent{color:var(--accent)}

/* ---- キャンペーン帯（暗面 + スウッシュ透かし + ゴールド）---- */
.lp-campaign{position:relative;background:var(--navy-deep);color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.lp-campaign .wrap{position:relative;z-index:1;padding-block:var(--space)}
.lp-campaign-sw{display:none} /* オレンジのスウォッシュ背景を非表示 */
.lp-campaign-sw svg{width:100%;height:auto;display:block}
.lp-campaign .kicker{color:var(--seal);justify-content:center;display:inline-flex;margin-bottom:1.4rem}
.lp-campaign .kicker::before{background:var(--seal)}
.lp-campaign-name{font-family:var(--ff-latin);font-size:clamp(0.88rem, 0.8rem + 0.4vw, 1.04rem);letter-spacing:0.14em;color:var(--seal);font-weight:600;text-transform:uppercase}
.lp-campaign-jp{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem);color:#fff;line-height:1.3;letter-spacing:0.01em;margin-top:1rem}
.lp-campaign-desc{color:rgba(255,255,255,0.82);max-width:46rem;margin:1.6rem auto 0;line-height:1.95;font-size:1.04rem}

/* ---- 限定特典カード（pillar をゴールドアクセントで「限定」化）---- */
.lp-benefits .pillar{border-top-color:var(--seal)}
.lp-benefits .pillar:hover{border-top-color:var(--seal)}
.lp-benefits .pillar .p-no{color:var(--seal-ink)}
.lp-ben-ic{width:48px;height:48px;border-radius:12px;background:var(--seal-soft);color:var(--seal-ink);display:flex;align-items:center;justify-content:center;margin-bottom:0.3rem}
.lp-ben-ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.lp-ben-tags-label{font-size:0.78rem;color:var(--mute);font-weight:700;margin-top:0.7rem;letter-spacing:0.02em}
.lp-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.55rem}
.lp-tags span{font-family:var(--ff-label);font-size:0.74rem;font-weight:600;color:var(--text);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--pill);padding:0.32rem 0.8rem;line-height:1.5}

/* ---- 対象企業（チェックマークのグリッド）---- */
.lp-targets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,1.3rem + 1.8vw,3rem) var(--gutter)}
.lp-targets li{display:flex;align-items:flex-start;gap:0.8rem;padding:0;font-size:0.98rem;color:var(--ink);font-weight:500;line-height:1.6}
.lp-targets li svg{width:1.2rem;height:1.2rem;stroke:var(--accent);fill:none;stroke-width:2;flex-shrink:0;margin-top:0.16rem}

/* ---- 入会ステップ: 3ステップを均等3列で中央寄せ（番号丸・タイトル・説明を各列中央に）---- */
.stepper--3{grid-template-columns:repeat(3,1fr)}
.stepper--3 .step{padding:0;text-align:center}
.stepper--3 .step-num{margin-left:auto;margin-right:auto}
.stepper--3 .step-desc{max-width:24ch;margin-left:auto;margin-right:auto}
.stepper--3 .step::before{left:50%;right:-50%;top:18px}
.stepper--3 .step:last-child::before{display:none}
@media(max-width:760px){.stepper--3{grid-template-columns:1fr}}

/* ---- 会員制度（正会員カード + 会費の大字）---- */
.lp-member-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);align-items:center}
.lp-fee{border-left:1px solid var(--line-2);padding-left:var(--gutter)}
.lp-fee .kicker{display:inline-flex;margin-bottom:1rem}
.lp-fee-n{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:clamp(3.6rem, 2.6rem + 3.4vw, 5.6rem);font-weight:500;color:var(--ink);line-height:1;letter-spacing:-0.01em;display:flex;align-items:baseline;flex-wrap:wrap;gap:0.1em}
.lp-fee-n em{font-style:normal;font-size:0.34em;color:var(--seal-ink);font-weight:600;font-family:var(--ff-body)}
.lp-fee-u{font-family:var(--ff-body);font-size:1rem;color:var(--mute);font-weight:600;margin-left:0.5rem;letter-spacing:0.04em}
.lp-fee p{margin-top:1.3rem;color:var(--text);line-height:1.9;font-size:0.96rem;max-width:36ch}

/* ---- 最終メッセージ（暗面）+ 申込フォーム ---- */
.lp-final{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;isolation:isolate}
.lp-final-sw{position:absolute;left:50%;bottom:-34%;width:128%;transform:translateX(-50%);color:#fff;opacity:0.05;pointer-events:none;z-index:0;line-height:0}
.lp-final-sw svg{width:100%;height:auto;display:block}
/* wrap に text-align:center を置く。kicker は inline-flex のため、親が中央寄せでないと左に残る（本家 .cta .wrap と同じ方式に揃える）。 */
.lp-final .wrap{position:relative;z-index:1;padding-block:var(--space);text-align:center}
.lp-final .kicker{color:var(--seal);justify-content:center;display:inline-flex;margin-bottom:1.4rem}
.lp-final .kicker::before{background:var(--seal)}
.lp-final h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem);color:#fff;line-height:1.3;text-align:center;letter-spacing:0.005em}
.lp-final-lede{color:rgba(255,255,255,0.85);max-width:44rem;margin:1.5rem auto 0;text-align:center;line-height:1.95;font-size:1.04rem}
.lp-final-points{display:flex;flex-wrap:wrap;justify-content:center;gap:0.8rem 1.7rem;margin-top:2.1rem}
.lp-final-points li{display:flex;align-items:flex-start;gap:0.65rem;color:#fff;font-weight:600;font-size:0.94rem;line-height:1.5}
.lp-final-points li::before{content:"";flex-shrink:0;margin-top:0.2em;width:0.4em;height:0.7em;border-right:2px solid var(--seal);border-bottom:2px solid var(--seal);transform:rotate(45deg)}
.lp-apply{scroll-margin-top:calc(var(--header-h) + 1rem)}
.lp-apply .intro{color:var(--text);line-height:1.95;margin-bottom:0.5rem}
/* フォーム: 狭幅での折返し・はみ出し対策（同意文の折返し、注記の収まり）。 */
#lp-form > p{min-width:0;overflow-wrap:anywhere}
#lp-form .field-check label.consent{align-items:flex-start}
#lp-form .field-check label.consent input[type="checkbox"]{margin-top:0.4rem}
#lp-form .field-check label.consent .ct{min-width:0}

/* ---- フッター（簡易版 + 大判スウッシュ透かし）---- */
.lp-footer .footer-watermark{display:none} /* フッター右下のスウォッシュを非表示 */
.lp-footer .footer-watermark svg{width:100%;height:auto;display:block}
/* モバイル: フッターリンクのタップ領域を確保（44px）*/
@media(max-width:760px){.lp-footer .footer-bottom .links a{display:inline-flex;align-items:center;min-height:44px}}
.lp-foot-main{padding:clamp(3.4rem, 3rem + 2vw, 5rem) 0 2.4rem;max-width:54ch}
.lp-foot-main img{height:38px;width:auto;margin-bottom:1.5rem}
.lp-foot-main p{font-size:0.88rem;line-height:1.95;color:rgba(255,255,255,0.6)}

/* ---- 和文見出しの約物詰め + 改行制御（LP 固有見出しを追補）---- */
.lp-hero-title,.lp-campaign-jp,.lp-campaign-name,.lp-note,.lp-final h2,.lp-fee-n{font-feature-settings:"palt" 1;font-kerning:normal}
/* 見出しは禁則準拠の通常折返し（keep-all は長い和文セグメントが container を超えると clip するため使わない）。
   anywhere を安全網に、意図した br は活かしつつ収まらなければ折り返す。真実源 jda-web の keep-all を LP では上書き。 */
.lp-hero-title,.lp-campaign-jp,.lp-note,.lp-final h2,.lp .sec-head h2,.lp .svc-split .svc-head h2{word-break:normal;line-break:strict;overflow-wrap:anywhere}

/* ---- レスポンシブ ---- */
@media(max-width:900px){
  .lp-risks{grid-template-columns:1fr;gap:var(--space-m)}
  .lp-member-grid{grid-template-columns:1fr;gap:2.4rem}
  .lp-fee{border-left:none;padding-left:0;border-top:1px solid var(--line-2);padding-top:2rem}
  .lp-targets{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .lp-targets{grid-template-columns:1fr}
  .lp-hero-meta{flex-direction:column;align-items:flex-start;gap:0.6rem}
  .lp-head-note{display:none}
  .lp-submit{white-space:normal;text-align:left;line-height:1.5}
}

/* モバイル: LP 固有見出し・本文は画面幅で必ず折り返す（切れ防止）。意図した br のみ無効化して自然折返しに。 */
@media(max-width:640px){
  .lp-hero-title,.lp-hero-lede,.lp-campaign-jp,.lp-campaign-desc,
  .lp-note,.lp-final h2,.lp-final-lede,.lp-risk p,.lp-fee p,.lp-foot-main p{
    word-break:normal;line-break:auto;overflow-wrap:anywhere;white-space:normal;max-width:100%;
  }
  .lp-hero-title br,.lp-note br,.lp-campaign-desc br,.lp-final-lede br{display:none}
  .lp-hero-title{font-size:clamp(1.95rem, 8.4vw, 3rem);line-height:1.26}
  .lp-hero-lede{font-size:clamp(1rem, 3.8vw, 1.16rem);line-height:1.85;padding-right:clamp(0.5rem, 4vw, 1.6rem)}
  .lp-campaign-jp{font-size:clamp(1.5rem, 6.2vw, 2.1rem);line-height:1.34}
  .lp-note{font-size:clamp(1.25rem, 5.4vw, 1.7rem);line-height:1.55}
  .lp-final h2{font-size:clamp(1.5rem, 6vw, 2rem);line-height:1.4}
}

/* =====================================================================
   コンバージョン強化（日本の会員登録LPの定番導線）
   ゴールドの主CTA / 反復CTA帯 / 追従CTA / 安心訴求マイクロコピー。
   JDAブランド（青主役・金は限定の合図）を保ったまま申込導線を強める。
   ===================================================================== */

/* ゴールドの主CTA。金面の文字は濃紺で AA を確保（白on金は不足のため使わない）。 */
.btn-cta{background:var(--seal);color:var(--navy-ink);border-color:var(--seal);padding:1.05rem 2.2rem;font-size:1rem;font-weight:700}
.btn-cta:hover{background:var(--navy-ink);color:#fff;border-color:var(--navy-ink);transform:translateY(-2px)}
.btn-cta:hover svg{transform:translateX(4px)}

/* CTA直下の安心マイクロコピー（チェック付き） */
.lp-cta-micro{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem 1.4rem;margin:1.1rem 0 0;padding:0}
.lp-cta-micro li{display:flex;align-items:center;gap:0.45rem;font-size:0.84rem;color:var(--mute);font-weight:600}
.lp-cta-micro li::before{content:"";flex-shrink:0;width:0.4em;height:0.7em;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);margin-top:-0.16em}
.lp-cta-micro.on-dark li{color:rgba(255,255,255,0.85)}
.lp-cta-micro.on-dark li::before{border-color:var(--seal)}

/* 反復CTA帯（淡い金地で限定特典へ誘導） */
.lp-cta-band{background:var(--seal-soft);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.lp-cta-band .wrap{padding-block:clamp(2.6rem, 2rem + 2vw, 4.2rem);text-align:center}
.lp-cta-band .ttl{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.3rem, 1rem + 1.1vw, 1.9rem);color:var(--ink);line-height:1.5;letter-spacing:0.01em;margin-bottom:1.6rem;font-feature-settings:"palt" 1;word-break:normal;line-break:strict;overflow-wrap:anywhere}
.lp-cta-band .ttl .accent{color:var(--seal-ink)}

/* 追従CTA（下部固定バー。floating layer のため影は elevation として許容） */
.lp-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(13,18,50,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,0.14);box-shadow:0 -12px 30px -18px rgba(0,0,0,0.55);transform:translateY(120%);transition:transform .45s var(--ease);padding:1.3rem var(--pad)}
.lp-sticky-cta.show{transform:translateY(0)}
.lp-sticky-inner{display:flex;align-items:center;justify-content:center;gap:1.3rem;max-width:var(--maxw);margin:0 auto}
.lp-sticky-text{color:#fff;font-weight:700;font-size:1.18rem;letter-spacing:0.02em;display:flex;flex-direction:column;gap:0.18rem}
.lp-sticky-text .sub{color:var(--sky);font-weight:600;font-size:0.95rem;letter-spacing:0.03em}
.lp-sticky-cta .btn{flex-shrink:0;white-space:nowrap;padding:1.5rem 2.6rem;font-size:1.18rem}
@media (prefers-reduced-motion:reduce){.lp-sticky-cta{transition-duration:.01ms}}

/* 安心訴求（フォーム横） */
.lp-assure{list-style:none;display:flex;flex-direction:column;gap:0.65rem;margin:1.6rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--line-2)}
.lp-assure li{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.88rem;color:var(--text);line-height:1.7;font-weight:500}
.lp-assure li svg{width:1.1rem;height:1.1rem;stroke:var(--green);fill:none;stroke-width:2;flex-shrink:0;margin-top:0.18rem}

@media(max-width:560px){
  /* ヒーローCTAは全幅スタック（日本のLP定番）。長いラベルは折返し可。 */
  .lp-hero-cta{width:100%}
  .lp-hero-cta .btn{width:100%;justify-content:center;white-space:normal;text-align:center;padding-left:1.1rem;padding-right:1.1rem}
  /* 追従バーは全幅ボタン、補助テキストは省略 */
  .lp-sticky-text{display:none}
  .lp-sticky-cta .btn{width:100%;justify-content:center}
  /* 反復CTA帯・最終CTAのボタンも全幅化してボタン枠のクリップを防ぐ */
  .lp-cta-band .btn,.lp-final-cta .btn{width:100%;max-width:400px;justify-content:center;white-space:normal;text-align:center;padding-left:1.1rem;padding-right:1.1rem}
}