/* ==== STYLE BLOCK 1 (starts around HTML line 100) ==== */
/* ============ Scope ============ */
.wwx, .wwx *{ box-sizing:border-box; }
.wwx{ --ink:#0f172a; --muted:#667085; --line:#e6eef8; --ring:rgba(2,132,199,.22); --accentA:#22d3ee; --accentB:#34d399; --glass:rgba(255,255,255,.86); position:sticky; top:0; z-index:9999; color:var(--ink); backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:saturate(120%) blur(10px); background:transparent; border-bottom:1px solid transparent; transition:background .25s ease,border-color .25s ease,box-shadow .25s ease }
.wwx.is-scrolled, .wwx[data-open="true"]{ background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.86)); border-bottom-color:#dfe8f3; box-shadow:0 10px 24px rgba(2,6,23,.08) }
/* Bar */
.wwx .bar{ width:min(1200px,92vw); margin-inline:auto; display:flex; align-items:center; gap:14px; height:64px }
@media(min-width:960px){ .wwx .bar{ height:72px } }
/* Logo */
.wwx .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:900 }
.wwx .logo .mark{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#0b5a6b; background:linear-gradient(135deg, rgba(34,211,238,.25), rgba(52,211,153,.25)); border:1px solid #bfe7ff }
/* Desktop nav */
.wwx nav{ margin-left:auto }
.wwx .nav{ list-style:none; display:none; gap:18px; margin:0; padding:0; align-items:center }
.wwx .nav a{ text-decoration:none; color:var(--ink); font-weight:800; position:relative }
.wwx .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg,var(--accentA),var(--accentB)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease }
.wwx .nav a:hover::after, .wwx .nav a:focus-visible::after{ transform:scaleX(1) }
/* CTA */
.wwx .btn{ display:inline-block; font-weight:900; text-decoration:none; padding:10px 14px; border-radius:12px; border:1px solid #cfe8ff; color:#fff; background:linear-gradient(90deg,#06C755,#05a94b); box-shadow:0 10px 26px rgba(6,199,85,.22) }
.wwx .cta{ display:none; margin-left:8px }
/* Burger */
.wwx .burger{ appearance:none; margin-left:auto; border:none; background:rgba(255,255,255,.72); width:44px; height:44px; border-radius:10px; display:grid; place-items:center; cursor:pointer; border:1px solid #e9f1fb; box-shadow:0 6px 18px rgba(3,9,27,.08) }
.wwx .burger:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
.wwx .burger svg{ width:22px; height:22px }
/* Scrim + Drawer : inline display制御（JSでstyle.display切替） */
.wwx .scrim{ position:fixed; inset:0; background:rgba(255,255,255,.6); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:9998 }
.wwx .drawer{ position:fixed; right:0; top:0; height:100vh; width:min(86vw,360px); background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94)); border-left:1px solid #e9f1fb; box-shadow:-14px 0 30px rgba(3,9,27,.12); z-index:9999; display:grid; grid-template-rows:auto 1fr auto; grid-template-areas:"title" "list" "cta"; padding:18px }
.wwx .title{ grid-area:title; margin:18px 0 12px; font-size:.95rem; color:var(--muted); font-weight:800 }
/* Menu list（衝突回避のため一部は inline-style も併用） */
.wwx .menu{ grid-area:list; list-style:none; margin:8px 0 0; padding:0; overflow:auto; min-height:0 }
.wwx .item{ display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:12px; text-decoration:none; color:var(--ink); font-weight:900; border:1px solid var(--line); background:#fff }
.wwx .ico{ width:20px; height:20px; flex:0 0 20px }
.wwx .ico svg{ width:100%; height:100% }
.wwx .chev{ margin-left:auto; width:18px; height:18px; opacity:.6 }
.wwx .split{ display:none }
/* Drawer close button (mobile) */
.wwx .dclose{ position:absolute; right:12px; top:12px; width:40px; height:40px; border:1px solid #e9f1fb; background:#fff; border-radius:12px; display:grid; place-items:center; box-shadow:0 8px 18px rgba(3,9,27,.12); cursor:pointer; z-index:1; transition:transform .15s ease }
.wwx .dclose:hover{ transform:translateY(-1px) }
.wwx .dclose:focus-visible{ outline:3px solid var(--ring); outline-offset:3px }
.wwx .dclose svg{ width:20px; height:20px; stroke:currentColor }
/* === LINE theming === */
.wwx{ --lineBrand:#06C755; --lineBrand2:#05a94b; }
/* Mobile drawer: LINE item */
.wwx .item--line{ border-color:transparent; color:#fff; background:linear-gradient(90deg,var(--lineBrand),var(--lineBrand2)); box-shadow:0 10px 26px rgba(6,199,85,.22); border-radius:14px; gap:8px }
.wwx .item--line .ico{ color:#fff }
.wwx .item--line .ico svg{ stroke:#fff }
.wwx .item--line .chev{ color:#fff; opacity:.95 }
.wwx .item--line:hover{ transform:translateY(-1px); filter:brightness(1.02) }
/* Desktop CTA with icon */
.wwx .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; color:#fff !important; background:linear-gradient(90deg,var(--lineBrand),var(--lineBrand2)) !important; border:1px solid transparent !important; box-shadow:0 10px 26px rgba(6,199,85,.22) }
.wwx .btn .ico{ width:18px; height:18px; flex:0 0 18px }
.wwx .btn .ico svg{ width:100%; height:100%; stroke:#fff }
/* --- Enforce desktop vs mobile roles (hard guard) --- */
/* Mobile (default): burger only */
@media(max-width:959px){
.wwx .nav{ display:none !important; }
.wwx .cta{ display:none !important; }
.wwx .burger{ display:grid !important; }
}
/* Desktop: nav + CTA, drawer system off */
@media(min-width:960px){
.wwx .burger{ display:none !important; }
.wwx .nav{ display:flex !important; }
.wwx .cta{ display:block !important; }
.wwx .drawer, .wwx .scrim{ display:none !important; }
}
/* ==== STYLE BLOCK 2 (starts around HTML line 292) ==== */
/* ========================================================
Wonderwall — Hero Section (Clean Consolidated CSS)
- PC: 2カラム（左テキスト / 右画像）
- Mobile: 画像を上・比率(640x660)で画面幅に収め、テキストは下
- 余白/ズレ/スクロール抑止のための修正を一本化
======================================================== */
/* ---- Tokens ---- */
.hero, .hero * { box-sizing: border-box; }
.hero{
--ink:#0f172a; /* 文字色 */
--muted:#667085; /* 補助テキスト */
--bg-grad-1:#f7fbff; /* 背景(上) */
--bg-grad-2:#f2f6ff; /* 背景(下) */
--card:#ffffff; /* カード */
--title:#0c4a5a; /* 見出し色(スクショ準拠の濃いティール) */
--brandA:#22d3ee; /* サイアン */
--brandB:#34d399; /* ティール */
--line:#06C755; /* LINE green */
--line-d:#05a94b; /* LINE green (darker) */
--ring:rgba(2,132,199,.18);
--radius:16px;
--shadow-md:0 8px 24px rgba(2,6,23,.10);
--shadow-lg:0 20px 40px rgba(2,6,23,.14);
}
/* ---- Base ---- */
.hero{
position: relative;
isolation: isolate;
padding-block: clamp(32px, 5vw, 72px);
color: var(--ink);
background:
radial-gradient(1200px 600px at 10% -10%, #e0f2fe 0%, transparent 55%),
linear-gradient(var(--bg-grad-1), var(--bg-grad-2));
overflow-x:hidden; /* 横スクロール抑止 */
}
.hero .container{ width:min(1180px, 92vw); margin-inline:auto; }
.hero__in{ display:grid; gap: clamp(20px, 3vw, 40px); align-items:center; }
/* ---- Desktop (≥1024px) ---- */
@media (min-width: 1024px){
.hero__in{ grid-template-columns: 1.08fr .92fr; }
.hero__img{ justify-self:end; }
}
/* ---- Copy side ---- */
.hero__copy{ max-width: 720px; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:10px; margin: 4px 0 10px; }
.hero .pill{ display:inline-flex; align-items:center; gap:.5rem; padding:8px 12px; border-radius:999px; font-weight:700; font-size:.85rem; line-height:1; }
.hero .pill--glass{ background: rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.8); box-shadow: 0 6px 18px var(--ring); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero__title{ color:var(--title); font-weight:900; font-size:clamp(2.2rem, 1.2rem + 3.2vw, 3.4rem); line-height:1.14; letter-spacing:.01em; margin:8px 0 12px; }
.hero__title .accent{ display:inline-block; background:linear-gradient(90deg, var(--brandA), var(--brandB)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; }
.hero__lead{ font-size:clamp(.96rem, .86rem + .4vw, 1.08rem); color:var(--muted); margin: 12px 0 16px; }
.hero-feats{ list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:480px){ .hero-feats{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.hero .feat{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--card); border-radius:12px; border:1px solid #e6eef8; box-shadow: var(--shadow-md);}
.hero .feat-ico{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, rgba(34,211,238,.2), rgba(52,211,153,.2)); }
.hero .feat-txt{ font-size:.95rem; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin: 10px 0 10px; }
.hero .btn{ display:inline-block; text-decoration:none; font-weight:800; border-radius:12px; padding:12px 16px; border:1px solid transparent; box-shadow:0 8px 22px rgba(2,132,199,.15); transition:translate .15s ease, box-shadow .15s ease; }
.hero .btn--xl{ padding:14px 22px; font-size:1rem; }
.hero .btn--primary{ background:linear-gradient(90deg, var(--brandA), var(--brandB)); color:#fff; }
.hero .btn--primary:hover{ translate:0 -1px; box-shadow:0 12px 28px rgba(2,132,199,.22); }
/* LINE-style CTA */
.hero .btn--line{ background:linear-gradient(90deg, var(--line), var(--line-d)); color:#fff; border-color:transparent; box-shadow:0 8px 22px rgba(6,199,85,.25); }
.hero .btn--line:hover{ translate:0 -1px; box-shadow:0 12px 28px rgba(6,199,85,.35); }
.hero .btn--ghost{ background:transparent; border-color:#cfe8ff; color:var(--ink); }
.hero .btn--ghost:hover{ background:#fff; }
.hero__note{ font-size:.8rem; color:var(--muted); margin-top:2px; }
/* ---- Visual side (desktop default) ---- */
.hero__img{ position:relative; max-width:min(560px, 44vw); margin-inline:auto; }
.hero__img img{ width:100%; height:auto; display:block; border-radius:18px; box-shadow: var(--shadow-lg); }
.hero__img .glass{ position:absolute; left:clamp(10px, 1.5vw, 18px); top:clamp(10px, 1.5vw, 18px); background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius:14px; padding:10px 12px; box-shadow: 0 12px 28px var(--ring); }
.hero__img .chip{ font-weight:800; margin:0; }
.hero__img .small{ margin:0; font-size:.8rem; color:var(--muted); }
/* ---- A11y ---- */
.hero .visually-hidden{ position:absolute !important; /* …既存の中身はそのまま… */ }
/* ---- Mobile (≤1023.98px) : 画像を上・比率維持で画面幅に収める ---- */
@media (max-width: 1023.98px){
.hero{ padding-block:0; }
.hero__in{ display:flex; flex-direction:column; }
/* 画像は先頭、横幅いっぱい。比率(640/660)で高さは自動 */
.hero__img{ order:-1; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none; aspect-ratio:640/660; height:auto; }
.hero__img img{ width:100%; height:auto; object-fit:contain; border-radius:0; box-shadow:none; }
/* テキスト側 */
.hero__copy{ width:min(1180px,92vw); margin-inline:auto; padding-block:clamp(20px,5vw,36px); }
.hero__title{ font-size:1.65rem; }
.hero-feats{ grid-template-columns:1fr; }
}
/* ==== STYLE BLOCK 3 (starts around HTML line 467) ==== */
/* =========================================================
Form Section — Clean Scoped CSS (no global pollution)
- Scope: .section--diag 直下のみ
- Visual: glass cards / soft gradient / large tap targets
- A11y: focus-ring, radiogroup semantics, label-for, scroll snap
========================================================= */
.section--diag, .section--diag * { box-sizing: border-box; }
.section--diag{
--ink:#0f172a; /* 本文 */
--muted:#667085; /* 補助 */
--accentA:#22d3ee; /* サイアン */
--accentB:#34d399; /* ティール */
--brand:#0ea5e9; /* ブルー系ボタン */
--brand-d:#2563eb; /* ブルー濃 */
--chip:#f6faff; /* チップ背景 */
--card:#ffffff; /* カード */
--glass:rgba(255,255,255,.62);
--glass-bd:rgba(255,255,255,.88);
--ring:rgba(2,132,199,.25);
--bd:#e6eef8; /* 枠線 */
--radius:14px; /* 角丸 */
--shadow-md:0 10px 24px rgba(2,6,23,.10);
--shadow-lg:0 22px 44px rgba(2,6,23,.12);
color:var(--ink);
background:
radial-gradient(1200px 600px at 12% -10%, #e4f3ff 0%, transparent 55%),
linear-gradient(#f7fbff,#f2f6ff);
padding-block: clamp(28px, 6vw, 64px);
}
.section--diag .wrap{ width:min(980px, 92vw); margin-inline:auto; }
.section--diag .anchor{ position:absolute; inset-block-start:-80px; height:1px; width:1px; }
.section--diag{ scroll-margin-top: 80px; }
/* Heading */
.section--diag .h2{ font-size:clamp(1.4rem, 1rem + 1vw, 1.9rem); margin:0 0 2px; font-weight:900; letter-spacing:.01em; }
.section--diag .subttl{ margin:0; color:var(--muted); font-size:.95rem; }
.section--diag .h3{ font-size:1.05rem; margin:0 0 .6rem; font-weight:800; }
/* Card form */
.section--diag .diag{
background:var(--card);
border:1px solid var(--bd);
border-radius: clamp(14px, .8vw, 18px);
box-shadow: var(--shadow-lg);
overflow:hidden;
}
.section--diag .diag__head{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:
linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
border-bottom:1px solid var(--bd);
}
.section--diag .diag__head__icon{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(52,211,153,.22)); color:#0b5a6b; box-shadow: inset 0 0 0 1px rgba(11,90,107,.12); }
.section--diag .diag__head__icon svg{ width:22px; height:22px; }
.section--diag .diag__row{ display:grid; gap:10px; padding:18px; border-top:1px solid var(--bd); }
.section--diag .diag__row:first-of-type{ border-top:none; }
/* Choices (radio pills) */
.section--diag .choices{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
@media (max-width:480px){ .section--diag .choices{ grid-template-columns: 1fr 1fr; } }
.section--diag .choice{ position:relative; }
.section--diag .choice input{ position:absolute; inset:0; opacity:0; pointer-events:auto; }
.section--diag .choice label{
display:flex; align-items:center; gap:10px; cursor:pointer;
padding:12px 14px; background:#fff; border:1.5px solid var(--bd); border-radius:12px;
box-shadow: var(--shadow-md);
transition: box-shadow .15s ease, border-color .15s ease, transform .02s ease;
user-select:none; -webkit-tap-highlight-color: transparent;
}
.section--diag .choice .dot{ width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg, rgba(34,211,238,.25), rgba(52,211,153,.25)); border:1px solid #cfe8ff; box-shadow: inset 0 0 0 3px #fff; }
.section--diag .choice input:focus-visible + label{ outline:3px solid var(--ring); outline-offset:2px; }
.section--diag .choice input:checked + label{ border-color:#9bd9ff; box-shadow:0 10px 24px rgba(2,132,199,.15); }
.section--diag .choice input:checked + label .dot{ background:linear-gradient(135deg, var(--accentA), var(--accentB)); border-color:transparent; box-shadow: inset 0 0 0 5px #fff; }
.section--diag .choice label:active{ transform:scale(.995); }
/* Notice (glass) */
.section--diag .diag__notice{ margin:4px 18px 12px; padding:14px 16px; border-radius:12px; background:var(--glass); border:1px solid var(--glass-bd); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow:0 20px 40px var(--ring); }
.section--diag .diag__notice .note{ color:var(--muted); margin:.2rem 0 0; }
/* Inputs */
.section--diag .input{
width:100%; height:48px; padding:12px 14px; border-radius:12px;
border:1.5px solid var(--bd); background:#fff; box-shadow: var(--shadow-md);
font-size:1rem; color:var(--ink);
}
.section--diag .input::placeholder{ color:#9aa7b4; }
.section--diag .input:focus{ outline:3px solid var(--ring); border-color:#9bd9ff; }
/* Muted small text */
.section--diag .muted{ color:var(--muted); font-size:.9rem; margin:2px 18px 6px; }
/* Submit button */
.section--diag .btn{ appearance:none; border:none; cursor:pointer; }
.section--diag .btn.btn--arrow{
display:block; width:calc(100% - 44px); margin:18px 22px; height:56px;
border-radius:14px; color:#fff; font-weight:900; letter-spacing:.02em; font-size:1.05rem;
background: linear-gradient(90deg, var(--brand), var(--brand-d));
box-shadow:0 14px 32px rgba(37,99,235,.28);
position:relative; transition:transform .06s ease, box-shadow .2s ease;
}
.section--diag .btn.btn--arrow::after{ content:""; position:absolute; right:18px; top:50%; translate:0 -50%; width:18px; height:18px; border-radius:999px; background:#fff; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.section--diag .btn.btn--arrow:hover{ transform:translateY(-1px); box-shadow:0 18px 36px rgba(37,99,235,.34); }
.section--diag .btn.btn--arrow:active{ transform:translateY(0); }
/* Result glass */
.section--diag #diag-result .glass{ background:var(--glass); border:1px solid var(--glass-bd); border-radius:12px; box-shadow:0 18px 40px var(--ring); }
/* Layout tweaks */
@media (min-width: 960px){
.section--diag .diag{ padding:4px 4px 16px; }
.section--diag .diag__row{ padding-inline:22px; }
/* Desktop tweak: Q3金額ピルを1行で収める */
.section--diag .choices[aria-labelledby="q3"] .choice label{ font-size:.95rem; white-space:nowrap; }
}
/* === Hero harmony: accent underline / glow frame / richer pills === */
.section--diag .h2::after{content:"";display:block;width:82px;height:3px;background:linear-gradient(90deg,var(--accentA),var(--accentB));border-radius:2px;margin-top:6px;}
.section--diag .diag{position:relative}
.section--diag .diag::after{content:"";position:absolute;inset:-6px;border-radius:calc(var(--radius) + 10px);background:
radial-gradient(120% 80% at 10% -10%, rgba(34,211,238,.25), transparent 60%),
radial-gradient(120% 80% at 110% 0%, rgba(52,211,153,.18), transparent 60%);
z-index:-1;filter:blur(20px)}
.section--diag .diag__head::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--accentA),var(--accentB));opacity:.9;border-bottom-left-radius:999px;border-bottom-right-radius:999px}
/* richer choice interactions */
.section--diag .choice label:hover{border-color:#bfe7ff;box-shadow:0 12px 28px rgba(2,132,199,.18)}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(34,211,238,.46)}100%{box-shadow:0 0 0 10px rgba(34,211,238,0)}}
.section--diag .choice input:checked+label .dot{animation:pulseRing 1.2s ease-out}
/* inputs focus glow */
.section--diag .input:focus{box-shadow:0 10px 24px rgba(2,132,199,.15), 0 0 0 3px var(--ring);}
/* CTA sheen */
.section--diag .btn.btn--arrow{overflow:hidden}
.section--diag .btn.btn--arrow::before{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .6s ease}
.section--diag .btn.btn--arrow:hover::before{left:120%}
/* Progress bar */
.section--diag .diag__progress{position:relative;margin:10px 18px 6px;height:8px;background:#eef5ff;border-radius:999px;overflow:hidden;border:1px solid #dbeafe}
.section--diag .diag__progress .bar{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--accentA),var(--accentB));transition:width .3s ease}
.section--diag .diag__progress .txt{position:absolute;right:10px;top:-22px;font-size:.8rem;color:var(--muted);font-weight:700}
/* ==== Fix: Q1見出しの左ズレ解消・Q1(モバイル)は2×2で一行表示 ==== */
/* Q1のラベルは他と同じ左インデント（diag__rowのpaddingに従う） */
.section--diag .diag__row .h3{ margin-left:0; }
/* モバイル時、Q1の選択肢は常に2列＆改行しない */
@media (max-width: 1023.98px){
.section--diag .choices[aria-labelledby="q1"]{ grid-template-columns: 1fr 1fr !important; }
.section--diag .choices[aria-labelledby="q1"] .choice label{ white-space: nowrap; font-size:.95rem; }
}
@media (max-width: 380px){
.section--diag .choices[aria-labelledby="q1"] .choice label{ font-size:.9rem; }
}
/* モバイル時、Q2の選択肢は常に2列＆改行しない */
@media (max-width: 1023.98px){
.section--diag .choices[aria-labelledby="q2"]{ grid-template-columns: 1fr 1fr !important; }
.section--diag .choices[aria-labelledby="q2"] .choice label{ white-space: nowrap; font-size:.95rem; }
}
@media (max-width: 380px){
.section--diag .choices[aria-labelledby="q2"] .choice label{ font-size:.9rem; }
}
/* === Privacy notice & policy (scoped) === */
.section--diag .bl_inquiry_txt{margin:10px 22px 8px;text-align:center;color:var(--muted);line-height:1.7;font-size:.92rem}
.section--diag .bl_inquiry_txt span{font-weight:900;background:linear-gradient(90deg,var(--accentA),var(--accentB));-webkit-background-clip:text;background-clip:text;color:transparent}
.section--diag .bl_privacyPolicy{margin:10px 18px 8px;padding:16px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-bd);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 40px var(--ring)}
.section--diag .bl_privacyPolicy_title{margin:0 0 10px;font-size:1.05rem;font-weight:900;letter-spacing:.01em}
.section--diag .bl_privacyPolicy_title::after{content:"";display:block;width:82px;height:3px;background:linear-gradient(90deg,var(--accentA),var(--accentB));border-radius:2px;margin-top:6px}
.section--diag .bl_privacyPolicy_numberList{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:clamp(220px,22vh,300px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:6px}
.section--diag .bl_privacyPolicy_numberItem{position:relative;padding-left:42px;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shadow-md);padding-top:12px;padding-bottom:12px}
.section--diag .bl_privacyPolicy_numberItem::before{content:counter(item);counter-increment:item;position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:999px;background:linear-gradient(135deg,var(--accentA),var(--accentB));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem}
.section--diag .bl_privacyPolicy_accordion{margin-top:10px;border:1px solid var(--bd);border-radius:10px;background:#fff;box-shadow:var(--shadow-md);overflow:hidden}
.section--diag .bl_privacyPolicy_accordionTitle{list-style:none;cursor:pointer;padding:12px 14px;font-weight:800}
.section--diag .bl_privacyPolicy_accordionTitle span{display:block;color:var(--muted);font-weight:700;font-size:.9rem}
.section--diag .bl_privacyPolicy_accordion>summary{position:relative}
.section--diag .bl_privacyPolicy_accordion>summary::marker{content:""}
.section--diag .bl_privacyPolicy_accordion>summary::after{content:"";position:absolute;right:12px;top:50%;translate:0 -50%;width:18px;height:18px;background:linear-gradient(135deg,var(--accentA),var(--accentB));mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;border-radius:999px;opacity:.9}
.section--diag .bl_privacyPolicy_accordion[open]{border-color:#bfe7ff}
.section--diag .bl_privacyPolicy_accordion[open]>summary{background:#f7fbff}
.section--diag .bl_privacyPolicy_accordionContents{padding:10px 14px 14px;border-top:1px solid #eaf2ff}
.section--diag .bl_privacyPolicy_heading{font-size:.95rem;margin:10px 0 6px;font-weight:900}
.section--diag .bl_privacyPolicy_txt{color:var(--muted);font-size:.92rem;line-height:1.7}
.section--diag .bl_privacyPolicy_linkList{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px;padding:0;list-style:none}
.section--diag .bl_privacyPolicy_link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid #dbeafe;background:#fff;box-shadow:var(--shadow-md);text-decoration:none;font-weight:800}
.section--diag .bl_privacyPolicy_transferList{margin:6px 0 0;padding-left:1.2rem}
.section--diag .bl_privacyPolicy_transferItem{margin:.2rem 0}
/* agree */
.section--diag .bl_inquiry_agree{display:flex;align-items:center;gap:10px;margin:12px 22px 4px;padding:10px 12px;border-radius:12px;border:1px dashed #cfe8ff;background:#fff;font-weight:800}
.section--diag .bl_inquiry_agree input{appearance:none;width:18px;height:18px;border:2px solid #9bd9ff;border-radius:6px;display:grid;place-items:center;background:#fff}
.section--diag .bl_inquiry_agree input:checked{background:linear-gradient(135deg,var(--accentA),var(--accentB));border-color:transparent}
.section--diag .bl_inquiry_agree input:checked::after{content:"";width:12px;height:12px;background:#fff;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;border-radius:2px}
/* === Errors / Validation === */
.section--diag .diag__errors{
margin:12px 22px; padding:12px 14px; border-radius:12px;
background:#fff5f5; border:1px solid #fecaca; color:#7f1d1d;
box-shadow:var(--shadow-md);
}
.section--diag [aria-invalid="true"]{
border-color:#fca5a5 !important;
box-shadow:0 10px 24px rgba(185,28,28,.08);
}
.section--diag .field-hint{
margin:.35rem 0 0; color:#b91c1c; font-size:.85rem;
}
/* ==== STYLE BLOCK 4 (starts around HTML line 989) ==== */
/* ===================
TOKENS (scoped)
=================== */
.ww-pack{
--ink:#0f172a; /* 本文（濃色に変更／可読性向上） */
--muted:#475569; /* 補助テキスト（コントラスト強化） */
--bg: transparent; /* 親背景に馴染ませる */
--card: rgba(255,255,255,.06); /* ガラスカード */
--line: rgba(255,255,255,.14); /* ボーダー */
--ring: rgba(90,162,255,.35); /* フォーカスリング */
--accent:#5aa2ff; /* シアン寄りアクセント */
--accent2:#8b5cff; /* バイオレット寄りアクセント */
--radius: 18px;
--shadow: 0 10px 30px rgba(3,9,27,.35);
--space: clamp(16px, 2.5vw, 28px);
--space-lg: clamp(28px, 4vw, 48px);
color: var(--ink);
}
.ww-pack *{box-sizing:border-box}
.ww-pack img{max-width:100%;height:auto;display:block}
.ww-pack a{color:inherit}
.ww-pack .ww-container{width:min(1080px, 92vw);margin-inline:auto;padding:var(--space)}
/* カード & 装飾ユーティリティ */
.ww-pack .ww-card{
position:relative;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
backdrop-filter:saturate(120%) blur(6px);
}
.ww-pack .ww-card .in{padding:clamp(16px,2vw,24px)}
.ww-pack .ww-title-img{margin-inline:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.ww-pack .ww-glow{position:relative}
.ww-pack .ww-glow::after{
content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius) + 2px);
background:linear-gradient(135deg,var(--accent),transparent 40%, var(--accent2));
filter:blur(14px);opacity:.28;z-index:-1;pointer-events:none
}
.ww-pack .ww-hl{background:linear-gradient(180deg, rgba(90,162,255,.22), rgba(90,92,255,.12));
padding:0 .25em;border-radius:.35em;box-decoration-break:clone}
/* 見出しの上下間隔統一 */
.ww-pack section{margin-block:var(--space-lg)}
/* Focus可視化 */
.ww-pack a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:10px}
/* スクロール時のふわっと表示（無効化対応あり） */
@keyframes ww-reveal{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
.ww-pack [data-anim]{opacity:0;transform:translateY(12px)}
.ww-pack [data-anim].is-in{opacity:1;transform:none;animation:ww-reveal .6s both}
@media (prefers-reduced-motion: reduce){
.ww-pack [data-anim]{opacity:1;transform:none}
.ww-pack [data-anim].is-in{animation:none}
}
/* ============ bl_attention ============ */
.ww-pack .bl_attention .ww-frame{display:grid;gap:var(--space);align-items:center}
.ww-pack .bl_attention .bl_attention_title{max-width:760px;margin-inline:auto}
.ww-pack .bl_attention .bl_attention_img{max-width:760px;margin-inline:auto}
.ww-pack .bl_attention .bl_attention_img img{border-radius:var(--radius);border:1px solid var(--line)}
/* ============ bl_investigation ============ */
.ww-pack .bl_investigation .ww-frame{display:grid;gap:var(--space)}
.ww-pack .bl_investigation .bl_investigation_title{max-width:760px;margin-inline:auto}
.ww-pack .bl_investigation .bl_investigation_img{max-width:760px;margin-inline:auto}
.ww-pack .bl_investigation .bl_investigation_img img{border-radius:var(--radius);border:1px solid var(--line)}
/* Banner H2 (text version) */
.ww-pack .ww-banner{display:grid;place-items:center;margin:var(--space-lg) 0 var(--space)}
.ww-pack .ww-banner__title{
display:inline-block;text-align:center;font-weight:900;letter-spacing:.01em;line-height:1.25;
font-size:clamp(28px, 2.4vw + 1rem, 52px);
padding:clamp(14px,2.4vw,24px) clamp(18px,4vw,44px);
color:#0b1220;
background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.90));
border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow)
}
.ww-pack .ww-banner__title .ww-accent{
background:linear-gradient(90deg, var(--accent), var(--accent2));
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 4px 18px rgba(90,162,255,.35))
}
.ww-pack .ww-banner__title .ww-accent2{
background:linear-gradient(90deg, var(--accent2), var(--accent));
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 4px 18px rgba(139,92,255,.40))
}
/* Mobile line-break version */
.ww-pack .ww-banner__title .ww-line{display:inline}
@media (max-width: 720px){
.ww-pack .ww-banner__title{font-size: clamp(28px, 7vw + .5rem, 46px); line-height:1.18; letter-spacing:.01em; padding: clamp(16px,4vw,28px) clamp(18px,6vw,40px);}
.ww-pack .ww-banner__title .ww-line{display:block}
}
/* ============ bl_point ============ */
.ww-pack .bl_point .bl_point_title{max-width:860px;margin-inline:auto}
.ww-pack .bl_point .bl_point_list{list-style:none;margin:var(--space) 0 0;padding:0;
display:grid;grid-template-columns:1fr;gap:var(--space)}
@media(min-width:780px){
.ww-pack .bl_point .bl_point_list{grid-template-columns:repeat(3,1fr)}
}
.ww-pack .bl_point .bl_point_list li{border-radius:var(--radius);overflow:hidden}
.ww-pack .bl_point .bl_point_img img{width:100%;aspect-ratio: 29/12;object-fit:cover}
.ww-pack .bl_point .bl_point_heading{margin:0;padding:0}
.ww-pack .bl_point .ww-pointCard{
display:grid;gap:12px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.ww-pack .bl_point .bl_point_txt{color:var(--ink);line-height:1.9;padding:0 16px 18px}
.ww-pack .bl_point .bl_point_txt span{font-weight:700}
.ww-pack .bl_point .bl_point_txt span.ww-hl{font-weight:800}
/* hover 微インタラクション */
.ww-pack .bl_point .ww-pointCard{transition:transform .25s ease, box-shadow .25s ease}
.ww-pack .bl_point .ww-pointCard:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(3,9,27,.45)}
/* ============ bl_info (CTA) ============ */
.ww-pack .bl_info{position:relative}
.ww-pack .bl_info .ww-cta{display:grid;gap:var(--space);align-items:center}
.ww-pack .bl_info .bl_info_catch{max-width:520px;margin-inline:auto}
.ww-pack .bl_info .bl_info_title{max-width:620px;margin-inline:auto}
.ww-pack .bl_info .bl_info_list{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin:8px 0 0;padding:0;max-width:560px;margin-inline:auto}
@media(min-width:720px){
.ww-pack .bl_info .bl_info_list{grid-template-columns:1fr 1fr}
}
.ww-pack .bl_info .bl_info_list a{
display:block;border-radius:14px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow);
transition:transform .2s ease, box-shadow .2s ease
}
.ww-pack .bl_info .bl_info_list a:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(3,9,27,.4)}
.ww-pack .bl_info .bl_info_annotation{max-width:620px;margin:12px auto 0}
.ww-pack .bl_info .bl_info_annotation img{border-radius:var(--radius);border:1px solid var(--line)}
/* 細かな整列 */
.ww-pack .center{display:grid;justify-items:center;text-align:center}
/* 印刷フレンドリー */
@media print{
.ww-pack{color:#111}
.ww-pack .ww-card{box-shadow:none}
}
/* ==== STYLE BLOCK 5 (starts around HTML line 1277) ==== */
/* ===== TOKENS / SCOPE ===== */
.ww-flow-skin{
--ww-ink: var(--ink, #0f172a);
--ww-muted: var(--muted, #6b7280);
--ww-bg: var(--bg, #ffffff);
--ww-card: color-mix(in oklab, var(--ww-bg) 92%, #000 8%);
--ww-a: var(--a, #0ea5e9); /* accent 1 */
--ww-b: var(--b, #6366f1); /* accent 2 */
--ww-ring: color-mix(in oklab, var(--ww-a) 35%, transparent 65%);
--radius: 18px;
--shadow: 0 12px 30px rgba(2, 8, 23, .14);
}
/* ===== FLOW ===== */
/* Title glass plate (always readable on white bg) */
.ww-flow-skin .bl_flow_title{position:relative; display:grid; place-items:center; margin: clamp(8px, 2vw, 24px) auto;}
.ww-flow-skin .bl_flow_title::before{content:""; position:absolute; width:min(720px,94vw); height: clamp(80px, 12vw, 140px); border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70)) padding-box, linear-gradient(135deg, color-mix(in oklab, var(--ww-a) 20%, transparent), color-mix(in oklab, var(--ww-b) 16%, transparent)) border-box; border:1px solid color-mix(in oklab, var(--ww-b) 20%, transparent); box-shadow: 0 18px 36px rgba(2,8,23,.14), inset 0 1px 0 rgba(255,255,255,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index:0;}
.ww-flow-skin .bl_flow_title .ww-flow-jp{position:relative; z-index:1; font-weight:900; font-size:clamp(26px, 5vw, 40px); line-height:1; letter-spacing:.06em; color:var(--ww-ink);}
.ww-flow-skin .bl_flow_title .ww-flow-en{position:relative; z-index:1; margin-top:.45em; font-weight:800; font-size:clamp(11px,1.6vw,14px); letter-spacing:.18em; color:color-mix(in oklab, var(--ww-ink) 40%, var(--ww-b) 60%); text-transform:uppercase;}
.ww-flow-skin .bl_flow{position: relative; padding: clamp(16px, 3.5vw, 40px) 0; overflow:hidden; z-index:0;}
/* Wavey ambient background */
.ww-flow-skin .bl_flow::before{content:""; position:absolute; inset:-8% -2% auto; height: clamp(180px, 24vw, 320px); z-index:-1;
background:
radial-gradient(60% 80% at 20% 80%, rgba(14,165,233,.18), transparent 70%),
radial-gradient(70% 90% at 80% 20%, rgba(99,102,241,.18), transparent 70%),
linear-gradient(180deg, transparent, rgba(0,0,0,.08));
background:
radial-gradient(60% 80% at 20% 80%, color-mix(in oklab, var(--ww-a) 20%, transparent), transparent 70%),
radial-gradient(70% 90% at 80% 20%, color-mix(in oklab, var(--ww-b) 20%, transparent), transparent 70%),
linear-gradient(180deg, transparent, color-mix(in oklab, var(--ww-bg) 92%, #000 8%));
-webkit-mask: radial-gradient(130% 100% at 50% 100%, #fff 42%, transparent 80%); mask: radial-gradient(130% 100% at 50% 100%, #fff 42%, transparent 80%);
}
.ww-flow-skin .bl_flow::after{content:""; position:absolute; inset:auto -2% -10% ; height: clamp(220px, 30vw, 400px); z-index:-1;
background:
radial-gradient(60% 80% at 15% 10%, rgba(99,102,241,.16), transparent 65%),
radial-gradient(70% 90% at 85% 30%, rgba(14,165,233,.16), transparent 65%),
linear-gradient(180deg, rgba(0,0,0,.04), transparent);
background:
radial-gradient(60% 80% at 15% 10%, color-mix(in oklab, var(--ww-b) 16%, transparent), transparent 65%),
radial-gradient(70% 90% at 85% 30%, color-mix(in oklab, var(--ww-a) 16%, transparent), transparent 65%),
linear-gradient(180deg, color-mix(in oklab, var(--ww-bg) 96%, #000 4%), transparent);
-webkit-mask: radial-gradient(140% 120% at 50% 0%, #fff 42%, transparent 80%); mask: radial-gradient(140% 120% at 50% 0%, #fff 42%, transparent 80%);
}
/* Timeline rail (SP vertical) */
.ww-flow-skin .bl_flow_list{list-style:none;margin:clamp(12px,2.4vw,24px) auto 0;padding:0;max-width:1100px;position:relative;}
.ww-flow-skin .bl_flow_list::before{
content:""; position:absolute; inset:auto auto 0 20px; top:0; width:2px; background:linear-gradient(var(--ww-b), var(--ww-a));
border-radius:2px; opacity:.35;
}
/* Media blocks */
.ww-flow-skin .bl_flow_heading{margin:0 0 10px; font-weight:800; color:var(--ww-ink); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; min-height:3.8em;}
.ww-flow-skin .bl_flow_heading > span:first-child{display:inline-flex; align-items:center; justify-content:center; min-width:86px; padding:8px 12px; font-size:.86rem; letter-spacing:.04em; color:#04121b; background:linear-gradient(135deg,var(--ww-a),var(--ww-b)); border-radius:999px; box-shadow: 0 6px 18px color-mix(in oklab, var(--ww-b) 25%, transparent); flex:none;}
.ww-flow-skin .bl_flow_txt{margin:0; color:var(--ww-muted); font-size:clamp(.97rem, .92rem + .22vw, 1.08rem); line-height:1.9}
.ww-flow-skin .bl_flow_heading .ww-ttl{display:block; font-weight:800; font-size:clamp(1.02rem,1rem + .2vw,1.14rem); line-height:1.35}
.ww-flow-skin .bl_flow_heading .ww-ttl.sub{font-weight:700; opacity:.95; margin-top:-2px}
/* Luxe chip list (text-based, SEO friendly) */
.ww-flow-skin .ww-chiplist{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; justify-content:center}
.ww-flow-skin .ww-chiplist li{padding:10px 12px; border-radius:12px; font-weight:600; font-size:.88rem; color:#05202b;
background: linear-gradient(180deg, color-mix(in oklab, var(--ww-bg) 96%, #000 4%), color-mix(in oklab, var(--ww-bg) 92%, #000 8%));
border:1px solid color-mix(in oklab, var(--ww-a) 18%, transparent);
box-shadow: 0 6px 16px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45);
}
.ww-flow-skin .ww-chiplist li::before{content:""; display:inline-block; width:.5em; height:.5em; margin-right:.45em; border-radius:999px; background:linear-gradient(135deg,var(--ww-a),var(--ww-b)); box-shadow:0 0 0 3px color-mix(in oklab, var(--ww-a) 28%, transparent)}
/* Card hover/focus luxe */
.ww-flow-skin .bl_flow_content{position:relative; display:flex; flex-direction:column; gap:12px;
/* Safe ring: background-clip two-layer (no mask quirks) */
background:
linear-gradient(180deg, color-mix(in oklab, var(--ww-bg) 96%, #000 4%), color-mix(in oklab, var(--ww-bg) 98%, #000 2%)) padding-box,
linear-gradient(135deg, color-mix(in oklab, var(--ww-a) 18%, transparent), color-mix(in oklab, var(--ww-b) 14%, transparent)) border-box;
border:1px solid transparent; border-radius:var(--radius);
padding:16px; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
overflow:hidden; isolation:isolate; height:auto;}
.ww-flow-skin .bl_flow_content:hover{transform:translateY(-4px); box-shadow: 0 18px 40px rgba(2,8,23,.20)}
.ww-flow-skin .bl_flow_content:focus-within{outline:2px solid var(--ww-ring); outline-offset:2px}
.ww-flow-skin .bl_flow_content:hover{transform:translateY(-4px); box-shadow: 0 18px 40px rgba(2,8,23,.20)}
.ww-flow-skin .bl_flow_content:focus-within{outline:2px solid var(--ww-ring); outline-offset:2px}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.ww-flow-skin .bl_flow_content{transition:none}
.ww-flow-skin .bl_flow_content:hover{transform:none}
}
.ww-flow-skin .bl_flow_note img{display:block; width:100%; height:auto; border-radius:12px; box-shadow: 0 10px 24px rgba(0,0,0,.14); border:1px dashed color-mix(in oklab, var(--ww-a) 35%, transparent)}
/* ===== DESKTOP (>= 960px): horizontal timeline ===== */
@media (min-width: 960px){
.ww-flow-skin .bl_flow_list{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:28px; padding-top:36px}
.ww-flow-skin .bl_flow_heading{min-height:clamp(92px, 9.5vw, 110px)}
.ww-flow-skin .bl_flow_note{max-width:340px; margin: 8px auto 0}
}
.ww-flow-skin .bl_flow_note{max-width:340px; margin: 8px auto 0}
}
.ww-flow-skin .bl_flow_list::before{left: calc(12px + 2%); right: calc(12px + 2%); top: 14px; bottom: auto; height:2px; width:auto;}
.ww-flow-skin .bl_flow_list>li{grid-template-columns:1fr; gap:16px; padding: 22px 18px; text-align:center;}
.ww-flow-skin .bl_flow_list>li{grid-template-columns:1fr; gap:16px; padding: 22px 18px; text-align:center;}
.ww-flow-skin .bl_flow_list>li::before{ /* move node to rail */ left:50%; transform:translateX(-50%); top:6px;}
.ww-flow-skin .bl_flow_img{max-width:240px; margin: 0 auto}
}
/* ===== COSTS ===== */
.ww-flow-skin .bl_costs{position:relative; margin: clamp(24px, 6vw, 64px) 0; padding: clamp(16px, 3vw, 32px) 0; z-index:0;}
.ww-flow-skin .bl_costs::before{ /* ambient glow bg */
content:""; position:absolute; inset:-6% 0 -2%; pointer-events:none; z-index:-1;
background:
radial-gradient(60% 40% at 50% 0%, rgba(99,102,241,.18), transparent 60%),
radial-gradient(40% 40% at 80% 30%, rgba(14,165,233,.18), transparent 60%);
background:
radial-gradient(60% 40% at 50% 0%, color-mix(in oklab, var(--ww-b) 18%, transparent), transparent 60%),
radial-gradient(40% 40% at 80% 30%, color-mix(in oklab, var(--ww-a) 18%, transparent), transparent 60%);
filter: saturate(120%);
}
.ww-flow-skin .bl_costs_title{margin:0 auto; max-width:min(900px, 96vw);}
.ww-flow-skin .bl_costs_title img{display:block; width:100%; height:auto; border-radius: var(--radius); box-shadow: var(--shadow);}
.ww-flow-skin .bl_costs_img{margin: clamp(8px, 2.4vw, 18px) auto 0; max-width:min(900px, 96vw);}
.ww-flow-skin .bl_costs_img img{display:block; width:100%; height:auto; border-radius: calc(var(--radius) + 4px);
border:1px solid color-mix(in oklab, var(--ww-a) 12%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.18);}
/* --- Mobile fix: prevent tall empty bottoms on cards --- */
@media (max-width: 959.98px){
.ww-flow-skin .bl_flow_list>li{align-items:start}
.ww-flow-skin .bl_flow_content{height:auto}
}
/* --- Desktop equal heights & clean grid --- */
@media (min-width: 960px){
.ww-flow-skin .bl_flow_list{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:28px; padding-top:36px}
.ww-flow-skin .bl_flow_img{max-width:240px; margin: 0 auto}
.ww-flow-skin .bl_flow_list>li{grid-template-columns:1fr; gap:16px; padding:22px 18px; text-align:center}
.ww-flow-skin .bl_flow_list::before{left: calc(12px + 2%); right: calc(12px + 2%); top:14px; bottom:auto; height:2px; width:auto}
.ww-flow-skin .bl_flow_list>li::before{left:50%; transform:translateX(-50%); top:6px}
.ww-flow-skin .bl_flow_content{height:100%}
}
/* === Title embellishments (readable + premium) === */
.ww-flow-skin .bl_flow_title{gap:6px}
.ww-flow-skin .bl_flow_title::after{content:""; position:absolute; bottom:-16px; width:min(720px,92vw); height:2px; border-radius:2px;
background: linear-gradient(90deg, transparent 4%, color-mix(in oklab, var(--ww-b) 60%, transparent) 20%, color-mix(in oklab, var(--ww-a) 70%, transparent) 50%, color-mix(in oklab, var(--ww-b) 60%, transparent) 80%, transparent 96%);
box-shadow:0 1px 0 rgba(255,255,255,.6);
}
.ww-flow-skin .bl_flow_title .ww-flow-jp{ text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 12px 28px rgba(2,8,23,.10); }
.ww-flow-skin .bl_flow_title .ww-flow-en{
display:inline-flex; align-items:center; gap:.6em; padding:.5em .9em;
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.38)) padding-box,
linear-gradient(135deg, color-mix(in oklab, var(--ww-a) 45%, transparent), color-mix(in oklab, var(--ww-b) 45%, transparent)) border-box;
border:1px solid transparent; border-radius:999px;
box-shadow: 0 6px 16px rgba(2,8,23,.12), inset 0 1px 0 rgba(255,255,255,.85);
color: color-mix(in oklab, var(--ww-ink) 78%, var(--ww-b) 22%);
}
.ww-flow-skin .bl_flow_title .ww-flow-en::before,
.ww-flow-skin .bl_flow_title .ww-flow-en::after{
content:""; display:inline-block; width:.5em; height:.5em; border-radius:999px;
background: linear-gradient(135deg, var(--ww-a), var(--ww-b));
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ww-a) 26%, transparent);
}
/* ==== STYLE BLOCK 6 (starts around HTML line 1535) ==== */
:root{--ink:#0f172a;--muted:#64748b;--bg:#f6f8fb;--card:#fff;--line:#e5eaf2;--accent:#5aa2ff;--accent2:#8b5cff;--radius:18px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans JP','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;color:var(--ink);background:linear-gradient(180deg,#fafcff,#f3f7ff)}
/* ====== ここから VOICE セクション（元コード + 最小パッチ）====== */
.ww-voice{--shadow:0 12px 36px rgba(3,9,27,.18);--space:clamp(14px,2.2vw,24px);--space-lg:clamp(24px,3.5vw,40px)}
.ww-voice img{display:block;max-width:100%;height:auto}
/* Full-bleed */
.ww-voice .wwv-wrap{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:var(--space-lg) 0;background:linear-gradient(180deg,#f7faff,#eef3ff)}
.ww-voice .wwv-head{width:min(1080px,92vw);margin:0 auto var(--space);text-align:center;display:flex;justify-content:center;align-items:center}
.ww-voice .wwv-title{display:grid;justify-items:center;align-content:center;gap:.25em;font-weight:900;letter-spacing:.02em;font-size:clamp(22px,2.2vw + .5rem,36px);white-space:initial;margin-inline:auto;text-align:center}
.ww-voice .wwv-sub{display:block;margin-top:.15em;font-size:.8em;color:var(--muted);letter-spacing:.15em}
/* Slider */
.ww-voice .wwv-viewport{position:relative;overflow:hidden}
.ww-voice .wwv-track{display:flex !important;gap:clamp(12px,1.6vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--space);-webkit-overflow-scrolling:touch;align-items:stretch}
.ww-voice .wwv-track::-webkit-scrollbar{height:10px}
.ww-voice .wwv-track::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px}
.ww-voice .wwv-slide{scroll-snap-align:center;flex:0 0 clamp(520px,48vw,720px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:block}
@media (max-width:780px){.ww-voice .wwv-slide{flex-basis:86vw}}
.ww-voice .wwv-in{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:clamp(12px,1.4vw,16px);padding:clamp(16px,2vw,22px);overflow:hidden}
.ww-voice .wwv-content,.ww-voice .bl_voice_txt{white-space:normal !important;word-break:break-word;overflow-wrap:anywhere}
/* カードヘッダー（顔＋本文） */
.ww-voice .wwv-cardhead{display:grid;grid-template-columns:96px 1fr;align-items:center;column-gap:12px}
@media (min-width:781px){.ww-voice .wwv-cardhead{grid-template-columns:110px 1fr;column-gap:16px}}
/* 顔（正円固定 & 他CSS上書き） */
.ww-voice .wwv-face{grid-column:1;width:96px;height:96px;flex:0 0 96px;border-radius:9999px;overflow:hidden;display:grid;place-items:center;float:none !important}
.ww-voice .wwv-face img{width:100% !important;height:100% !important;aspect-ratio:1/1;object-fit:cover;object-position:center;display:block}
@media (min-width:781px){.ww-voice .wwv-face{width:110px;height:110px;flex:0 0 110px}}
/* 本文側ははみ出さない */
.ww-voice .wwv-cardhead > :not(.wwv-face){grid-column:2;min-width:0}
.ww-voice .wwv-meta{display:grid;gap:6px;min-width:0}
.ww-voice .wwv-lead{font-weight:900;font-size:1.12rem;line-height:1.35;letter-spacing:.01em}
.ww-voice .wwv-dem{color:var(--muted);font-weight:600;font-size:.92rem}
.ww-voice .wwv-title-sm{font-weight:900;font-size:1rem;margin:0 0 6px;letter-spacing:.01em;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Accordion */
.ww-voice .wwv-content{max-height:8.5em;overflow:hidden;line-height:1.9;color:var(--ink);transition:max-height .35s ease}
.ww-voice .wwv-content.is-open{max-height:40em}
.ww-voice .wwv-toggle{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;font-weight:700;cursor:pointer;display:inline-grid;grid-auto-flow:column;align-items:center;gap:.6em;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.ww-voice .wwv-toggle svg{width:18px;height:18px;transition:transform .25s ease}
.ww-voice .wwv-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Arrows */
.ww-voice .wwv-arrows{position:relative}
.ww-voice .wwv-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 24px rgba(3,9,27,.15);display:grid;place-items:center;cursor:pointer;z-index:2}
.ww-voice .wwv-arrow svg{width:22px;height:22px}
.ww-voice .wwv-arrow.__prev{left:10px}
.ww-voice .wwv-arrow.__next{right:10px}
@media (min-width:781px){.ww-voice .wwv-arrow{display:none}}
/* Dots（任意） */
.ww-voice .wwv-dots{display:flex;gap:8px;justify-content:center;margin:12px 0 0}
.ww-voice .wwv-dots button{width:8px;height:8px;border-radius:999px;background:#cbd5e1;border:none}
.ww-voice .wwv-dots button.is-active{background:linear-gradient(90deg,var(--accent),var(--accent2))}
/* ===== 最終オーバーライド（重なり完全ストップ） ===== */
.ww-voice .wwv-cardhead{display:flex !important;align-items:center !important;gap:16px !important}
@media (max-width:560px){.ww-voice .wwv-cardhead{gap:12px !important}}
.ww-voice .wwv-face{flex:0 0 100px !important;width:100px !important;height:100px !important;border-radius:9999px !important;overflow:hidden !important;margin:0 !important;float:none !important}
@media (max-width:560px){.ww-voice .wwv-face{flex-basis:90px !important;width:90px !important;height:90px !important}}
.ww-voice .wwv-face img{width:100% !important;height:100% !important;aspect-ratio:1/1 !important;object-fit:cover !important;object-position:center !important;display:block !important}
.ww-voice .wwv-cardhead > :not(.wwv-face){min-width:0 !important;flex:1 1 auto !important}
.ww-voice .bl_voice_img,.ww-voice .bl_voice_img img{float:none !important}
/* ==== STYLE BLOCK 7 (starts around HTML line 1809) ==== */
/* ===== Scoped tokens (this sectionだけに適用) ===== */
.faq-scope{ --ink:#0f172a; --muted:#475569; --bg:#ffffff; --line:rgba(2,6,23,.08); --accent:#2563eb; --accent2:#0ea5e9; --ring:rgba(37,99,235,.22); --radius:14px; --shadow:0 8px 24px rgba(2,6,23,.06); }
/* ====== FAQ Block — light / clean (scoped) ====== */
.faq-scope .bl_faq{
color:var(--ink); background:var(--bg);
padding:min(6vw,48px) clamp(12px,3vw,28px); border-radius:20px; position:relative; overflow:hidden;
box-shadow:var(--shadow); border:1px solid #e5e7eb;
}
.faq-scope .bl_faq_title{
display:block; text-align:center; margin:0 0 .75rem;
font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); line-height:1.25; letter-spacing:.02em;
color:var(--ink);
}
.faq-scope .bl_faq_title .en{ display:block; font-weight:700; color:var(--accent); margin:.35em 0 0; }
/* 目次（チップ） */
.faq-scope .bl_faq_index{ margin: .25rem 0 1.25rem; }
.faq-scope .bl_faq_index ul{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; padding:0; margin:0; list-style:none; }
.faq-scope .bl_faq_index a{
display:inline-block; padding:.5rem .7rem; border-radius:999px; font-size:.92rem;
text-decoration:none; color:var(--ink);
background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,var(--accent),var(--accent2)) border-box; border:1px solid transparent;
}
.faq-scope .bl_faq_index a:hover{ box-shadow:0 0 0 3px var(--ring); }
/* アコーディオン */
.faq-scope .bl_faq_accordion{
background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 10px rgba(2,6,23,.04);
margin:.9rem 0; overflow:hidden;
}
.faq-scope .bl_faq_toggle{
cursor:pointer; list-style:none; padding:1rem 1.1rem 1rem 3rem; position:relative;
font-weight:700; color:#111827;
}
/* ＋／－アイコン（CSSのみ） */
.faq-scope .bl_faq_toggle .icon{
position:absolute; left:1.1rem; top:50%; translate:0 -50%;
width:18px; height:18px; border-radius:4px;
background:linear-gradient(135deg, #e2e8f0, #f1f5f9);
box-shadow:inset 0 0 0 1px #cbd5e1;
}
.faq-scope .bl_faq_toggle .icon::before, .faq-scope .bl_faq_toggle .icon::after{ content:""; position:absolute; inset:0; margin:auto; background:#334155; }
.faq-scope .bl_faq_toggle .icon::before{ width:12px; height:2px; }
.faq-scope .bl_faq_toggle .icon::after{ width:2px; height:12px; transition:opacity .2s ease; }
.faq-scope details[open] .bl_faq_toggle .icon::after{ opacity:0; }
.faq-scope .bl_faq_toggle:focus{ outline:none; }
.faq-scope .bl_faq_toggle:focus-visible{ box-shadow:0 0 0 3px var(--ring) inset; }
.faq-scope .bl_faq_content{ padding:0 1.1rem 1.1rem 3rem; color:#334155; background:#fff; }
.faq-scope .bl_faq_txt{ margin:.2rem 0 0; line-height:1.9; color:#334155; }
/* ===== Decorative usage of SVG assets (scoped) ===== */
/* 背景ドット（控えめ） */
.faq-scope .bl_faq::before{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.18;
background-image:url('data:image/svg+xml;utf8,');
background-size:64px 64px; background-repeat:repeat; background-position:center top;
mask-image:linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
}
/* タイトル下のアンダーライン */
.faq-scope .faq-underline{ margin:.35rem auto 1rem; max-width:820px; }
.faq-scope .faq-underline svg{ width:100%; height:auto; display:block }
/* 左上コーナーリボン */
.faq-scope .dec{ position:absolute; pointer-events:none; }
.faq-scope .dec--corner{ top:-1px; left:-1px; width:100px; height:100px; z-index:1; }
@media (max-width:768px){ .faq-scope .dec--corner{ width:80px; height:80px; } }
/* セクション下の区切りウェーブ */
.faq-scope .faq-divider{ margin-top:8px; }
.faq-scope .faq-divider svg{ width:100%; height:72px; display:block }
/* ==== STYLE BLOCK 8 (starts around HTML line 2031) ==== */
/* ===============================
Wonderwall — Final CTA (Scoped)
- Drop-in section for the page bottom
- Light x Glass aesthetic (hero調)
- No global pollution
=============================== */
.ww-ctaFinal, .ww-ctaFinal * { box-sizing: border-box; }
.ww-ctaFinal{
--ink:#0f172a; /* 本文 */
--muted:#667085; /* 補助 */
--card:#ffffff; /* カード */
--line:#e6eef8; /* 枠線 */
--accentA:#22d3ee; /* サイアン */
--accentB:#34d399; /* ティール */
--brand:#0ea5e9; /* ブルー */
--brand-d:#2563eb; /* ブルー濃 */
--ring:rgba(2,132,199,.18);
--shadow-md:0 10px 24px rgba(2,6,23,.10);
--shadow-lg:0 22px 44px rgba(2,6,23,.14);
--radius:18px;
position:relative; isolation:isolate; color:var(--ink);
padding: clamp(28px, 6vw, 72px) 0;
background:
radial-gradient(1200px 600px at 8% -10%, #e0f2fe 0%, transparent 55%),
linear-gradient(#f7fbff,#f2f6ff);
overflow:hidden;
}
.ww-ctaFinal .wrap{ width:min(1080px, 92vw); margin-inline:auto; }
/* --- Card --- */
.ww-ctaFinal .card{
position:relative; border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
border:1px solid var(--line); box-shadow: var(--shadow-lg);
overflow:hidden;
}
.ww-ctaFinal .card::before{
content:""; position:absolute; inset:-2px;
background:
radial-gradient(120% 80% at 10% -10%, rgba(34,211,238,.20), transparent 60%),
radial-gradient(120% 80% at 110% 0%, rgba(52,211,153,.16), transparent 60%);
filter: blur(18px); z-index:-1;
}
.ww-ctaFinal .in{ padding: clamp(18px, 3vw, 28px) clamp(18px, 4vw, 36px); }
/* --- Headline --- */
.ww-ctaFinal .eyebrow{ display:inline-flex; gap:.5rem; align-items:center; font-weight:800; font-size:.88rem; color:#0b5a6b; background:rgba(34,211,238,.15); border:1px solid #bcefff; padding:8px 12px; border-radius:999px; }
.ww-ctaFinal .title{ margin:.4rem 0 .3rem; font-weight:900; letter-spacing:.01em; line-height:1.15; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.8rem); color:#0c4a5a; }
.ww-ctaFinal .title .accent{ background:linear-gradient(90deg, var(--accentA), var(--accentB)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ww-ctaFinal .lead{ margin:.4rem 0 1rem; color:var(--muted); font-size: clamp(.98rem, .9rem + .35vw, 1.08rem); }
.ww-ctaFinal .underline{ display:block; width:92px; height:3px; border-radius:999px; background:linear-gradient(90deg, var(--accentA), var(--accentB)); margin:.4rem 0 1rem; }
/* --- Points --- */
.ww-ctaFinal .points{ list-style:none; display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 16px; padding:0; }
@media(min-width:680px){ .ww-ctaFinal .points{ grid-template-columns: repeat(3, 1fr); } }
.ww-ctaFinal .point{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md); }
.ww-ctaFinal .ico{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(52,211,153,.22)); color:#0b5a6b; }
/* --- Buttons --- */
.ww-ctaFinal .ctas{ display:flex; flex-wrap:wrap; gap:12px; margin: 12px 0 6px; }
.ww-ctaFinal .btn{ display:inline-block; text-decoration:none; font-weight:900; letter-spacing:.01em; border-radius:14px; padding:14px 18px; border:1px solid transparent; transition: translate .12s ease, box-shadow .2s ease; }
.ww-ctaFinal .btn--xl{ padding:16px 22px; font-size: clamp(.98rem, .9rem + .25vw, 1.05rem); }
.ww-ctaFinal .btn--line{ background:linear-gradient(90deg, #06C755, #04b84e); color:#fff; box-shadow:0 10px 24px rgba(6,199,85,.25); }
.ww-ctaFinal .btn--line:hover{ translate:0 -1px; box-shadow:0 14px 32px rgba(6,199,85,.35); }
.ww-ctaFinal .btn--primary{ background:linear-gradient(90deg, var(--brand), var(--brand-d)); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.28); }
.ww-ctaFinal .btn--primary:hover{ translate:0 -1px; box-shadow:0 16px 36px rgba(37,99,235,.34); }
.ww-ctaFinal .btn--ghost{ background:transparent; color:var(--ink); border-color:#cfe8ff; }
.ww-ctaFinal .btn--ghost:hover{ background:#fff; }
.ww-ctaFinal .note{ color:var(--muted); font-size:.86rem; margin-top:4px; }
/* --- Foot strip --- */
.ww-ctaFinal .strip{
margin-top: clamp(16px, 2.4vw, 24px);
padding: 12px 14px; border:1px dashed #cfe8ff; border-radius:12px; background:rgba(255,255,255,.72);
display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; text-align:center; color:#0b5a6b; font-weight:800;
}
.ww-ctaFinal .chip{ display:inline-flex; align-items:center; gap:.5rem; padding:8px 12px; border-radius:999px; background:rgba(34,211,238,.14); border:1px solid #bcefff; }
/* --- Reveal animation (reduced-motion safe) --- */
@keyframes cta-reveal{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform:none;} }
.ww-ctaFinal [data-anim]{ opacity:0; transform: translateY(12px); }
.ww-ctaFinal [data-anim].is-in{ opacity:1; transform:none; animation: cta-reveal .6s both; }
@media (prefers-reduced-motion: reduce){ .ww-ctaFinal [data-anim], .ww-ctaFinal [data-anim].is-in{ opacity:1; transform:none; animation:none; } }
/* --- Print --- */
@media print{ .ww-ctaFinal .card{ box-shadow:none } }
/* ==== STYLE BLOCK 9 (starts around HTML line 2204) ==== */
/* =========================
Footer — Scope: .bl_footer
========================= */
.bl_footer{
/* Token bridge (auto-adapts to light/dark) */
--ft-fg: var(--fg, var(--ink, #111));
--ft-muted: var(--muted, #6b7280);
--ft-chip: var(--chip, rgba(0,0,0,.04));
--ft-a: var(--a, #0ea5e9);
--ft-b: var(--b, #6366f1);
--ft-radius: clamp(12px, 1.4vw, 18px);
--ft-max: min(980px, 92vw);
--ft-border: color-mix(in oklab, var(--ft-fg) 16%, transparent);
color: var(--ft-fg);
background: transparent; /* keep page bg */
border-top: 1px solid var(--ft-border);
}
.bl_footer__in{
max-width: var(--ft-max);
margin-inline: auto;
padding: clamp(22px, 4.6vw, 44px) clamp(14px, 4vw, 28px);
}
/* Title (keeps your image title asset) */
.bl_footer_title{ margin:0 0 clamp(14px,2.6vw,22px); display:flex; align-items:center; gap:.65rem; }
.bl_footer_title img{ display:block; height:auto; max-width: 280px; }
.bl_footer__sr{ position:absolute !important; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
/* Grid: 1col -> 2col (desktop) */
.bl_footer__grid{
display:grid;
grid-template-columns: 1fr;
grid-template-areas: "brand" "list" "legal";
gap: clamp(16px,2.4vw,22px);
align-items:start;
}
.bl_footer__grid > *{ width: min(860px, 100%); margin-inline:auto; }
/* Brand (text) — subtle card using chip */
.bl_footer_logo{ grid-area: brand;
margin:0; padding: clamp(12px,2vw,16px);
border-radius: calc(var(--ft-radius)*.9);
background: color-mix(in oklab, var(--ft-chip) 90%, transparent);
box-shadow: inset 0 0 0 1px var(--ft-border);
text-align:center;
display:flex; flex-direction:column; gap:.5rem; align-items:center;
}
/* Two-line brand styling */
.bl_footer_logo .brand__line{ display:block; text-align:center; }
/* JP line */
.bl_footer_logo .brand__line--jp{
font-weight:800; letter-spacing:.06em; line-height:1.15;
font-size:clamp(20px,2.8vw,24px);
color:color-mix(in oklab, var(--ft-fg) 92%, var(--ft-muted) 8%);
position:relative;
}
.bl_footer_logo .brand__line--jp::after{
content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
background:linear-gradient(90deg,transparent 0 6%,
color-mix(in oklab, var(--ft-a) 35%, var(--ft-b) 65%) 12% 88%,
transparent 94% 100%);
opacity:.24;
}
/* EN line */
.bl_footer_logo .brand__line--en{
margin-top:.4rem; font-weight:700; letter-spacing:.22em; line-height:1;
font-size:clamp(11px,1.3vw,12.5px); text-transform:uppercase;
color:color-mix(in oklab, var(--ft-fg) 60%, var(--ft-muted) 40%);
}
/* Definition list — semantic dt/dd (no wrappers) */
.bl_footer_list{ grid-area: list; margin:0; padding: clamp(12px,2vw,18px); border-radius: calc(var(--ft-radius)*.9); background: color-mix(in oklab, var(--ft-chip) 94%, transparent); box-shadow: inset 0 0 0 1px var(--ft-border); display:grid; grid-template-columns: 7.5em 1fr; column-gap: 1rem; }
.bl_footer_list dt{ grid-column: 1; font-weight: 700; letter-spacing: .03em; color: color-mix(in oklab, var(--ft-fg) 85%, var(--ft-muted) 15%); padding: .75rem 0; white-space: nowrap; }
.bl_footer_list dd{ grid-column: 2; margin:0; color: color-mix(in oklab, var(--ft-fg) 78%, var(--ft-muted) 22%); line-height: 1.8; padding: .75rem 0; }
/* row separators */
.bl_footer_list dt, .bl_footer_list dd{ border-bottom: 1px dashed var(--ft-border); }
.bl_footer_list dd:last-of-type, .bl_footer_list dd:last-of-type + *{ border-bottom: none; }
/* Action link (pill) */
.bl_footer_actions{
grid-area: legal;
margin: clamp(14px,2.2vw,20px) 0 0;
justify-self: center;
text-align: center;
}
.bl_footer_link{
display:inline-flex; align-items:center; gap:.5em;
padding:.55em .9em; border-radius: 10px;
text-decoration:none; font-weight:600;
color: color-mix(in oklab, var(--ft-fg) 72%, var(--ft-muted) 28%);
background: transparent;
border:1px solid var(--ft-border);
box-shadow: none; transition: border-color .2s ease, color .2s ease;
}
.bl_footer_link:hover{ border-color: color-mix(in oklab, var(--ft-fg) 30%, transparent); text-decoration: underline; }
.bl_footer_link:active{ opacity:.8; }
.bl_footer_link__ico{ width: 1em; aspect-ratio: 1; display:inline-block; translate: 0 .5px; background: conic-gradient(from 45deg at 50% 50%, #fff 0 25%, transparent 0 100%), linear-gradient(#fff,#fff) left 55% top 50% / 50% 2px no-repeat; -webkit-mask: radial-gradient(circle at 100% 0, #000 11px, transparent 12px) exclude; mask: radial-gradient(circle at 100% 0, #000 11px, transparent 12px) exclude; border-radius: 2px; opacity: .95; }
/* Copyright */
.bl_footer_copyright{ margin: clamp(14px, 2.2vw, 22px) 0 0; color: color-mix(in oklab, var(--ft-fg) 66%, var(--ft-muted) 34%); text-align:center; }
.bl_footer_copyright small{ font-size: clamp(12px,1.3vw,13.5px); letter-spacing:.03em; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){ .bl_footer_link{ transition:none; } }
/* --- extra polish (one more twist) --- */
/* brand underline accent (subtle, on JP first line) */
.bl_footer_logo .jp-line1::after{
content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
background: linear-gradient(90deg,
transparent 0 6%,
color-mix(in oklab, var(--ft-a) 35%, var(--ft-b) 65%) 12% 88%,
transparent 94% 100%);
opacity:.24;
}
/* framed corners for the info card (matches your cyber/glass vibe, but muted) */
.bl_footer_list{ position:relative; }
.bl_footer_list::after{
content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.18;
background:
linear-gradient( to right, color-mix(in oklab, var(--ft-fg) 22%, transparent), transparent ) top left / 28px 1px no-repeat,
linear-gradient( to bottom, color-mix(in oklab, var(--ft-fg) 22%, transparent), transparent ) top left / 1px 28px no-repeat,
linear-gradient( to left, color-mix(in oklab, var(--ft-fg) 22%, transparent), transparent ) bottom right / 28px 1px no-repeat,
linear-gradient( to top, color-mix(in oklab, var(--ft-fg) 22%, transparent), transparent ) bottom right / 1px 28px no-repeat;
}
/* legal link even calmer; keep only underline affordance */
.bl_footer_link{ color: color-mix(in oklab, var(--ft-fg) 64%, var(--ft-muted) 36%); border-color: color-mix(in oklab, var(--ft-fg) 12%, transparent); }
.bl_footer_link__ico{ opacity:.45; }
.bl_footer_link:hover{ text-decoration: underline; border-color: color-mix(in oklab, var(--ft-fg) 22%, transparent); }
.bl_footer_link:focus-visible{ outline:2px solid color-mix(in oklab, var(--ft-fg) 32%, transparent); outline-offset:3px; }
.bl_footer_link{ color: color-mix(in oklab, var(--ft-fg) 64%, var(--ft-muted) 36%); border-color: color-mix(in oklab, var(--ft-fg) 12%, transparent); }
.bl_footer_link__ico{ opacity:.45; }
.bl_footer_link:hover{ text-decoration: underline; border-color: color-mix(in oklab, var(--ft-fg) 22%, transparent); }
.bl_footer_link:focus-visible{ outline:2px solid color-mix(in oklab, var(--ft-fg) 32%, transparent); outline-offset:3px; }
/* JSが未動作でも表示するフォールバック */
.ww-pack [data-anim],
.ww-cta [data-anim],
.ww-ctaFinal [data-anim]{
opacity:1 !important;
transform:none !important;
}
/* POINTセクション：カードが“みっちり”にならないよう余白を追加 */
#ww-points .ww-pointCard{
padding: clamp(16px, 2vw, 24px) !important; /* 内側余白 */
border-radius: 18px; /* 角の丸み（任意） */
}
/* 画像まわりに余白＆角丸 */
#ww-points .bl_point_img{
margin: 0 0 clamp(12px, 1.5vw, 18px) !important;
}
#ww-points .bl_point_img img{
display:block;
width:100%;
height:auto;
border-radius: 12px;
}
/* 画像見出し（POINT01～03のタイトル画像）にも少しゆとり */
#ww-points .bl_point_heading{
margin: clamp(10px, 1.2vw, 14px) 0 0 !important;
}
#ww-points .bl_point_heading img{
display:block;
width: 100%;
height:auto;
}
/* 本文テキストの上に間隔 */
#ww-points .bl_point_txt{
margin-top: clamp(8px, 1vw, 12px) !important;
line-height: 1.85;
}
/* （任意）カード同士のすき間を少し広げたい場合 */
#ww-points .bl_point_list{
gap: clamp(16px, 2vw, 24px) !important;
}
/* === PCだけ：#ww-info を横いっぱいの2カラムCTAに === */
@media (min-width: 1024px){
/* カードをワイド化＆余白強化 */
#ww-info .ww-card{
padding: clamp(20px, 3vw, 32px) !important;
border-radius: 24px;
box-shadow: 0 18px 48px rgba(3,9,27,.16);
}
/* 中身の横幅を大きく（画面幅の92%/最大1200px） */
#ww-info .ww-card .in{
width: min(1200px, 92vw);
margin: 0 auto;
}
/* 2カラムレイアウト（左：ビジュアル、右：タイトル＋ボタン） */
#ww-info .ww-card .in{
display: grid;
grid-template-columns: 1.05fr 0.95fr;
grid-template-areas:
"art title"
"art ctas"
"art note";
align-items: center;
gap: clamp(16px, 2vw, 28px);
}
/* 各要素の配置 */
#ww-info .bl_info_catch{ grid-area: art; margin: 0 !important; }
#ww-info .bl_info_title{ grid-area: title; margin: 0 0 8px !important; }
#ww-info .bl_info_list{ grid-area: ctas; }
#ww-info .bl_info_annotation{ grid-area: note; margin: 8px 0 0 !important; }
/* 画像の幅指定（モバイル用の --img-width を上書き） */
#ww-info .ww-title-img img{
width: 100% !important; /* カラム幅いっぱいに */
height: auto;
max-width: none;
display: block;
}
/* ボタン2つを横並びにしてドーンと */
#ww-info .bl_info_list{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(12px, 1.2vw, 16px);
align-items: stretch;
}
#ww-info .bl_info_list li a img{
width: 100%;
height: auto;
display: block;
/* ほんの少しの浮き上がり効果（お好みで） */
filter: drop-shadow(0 8px 20px rgba(3,9,27,.12));
border-radius: 14px;
}
/* 注意書きは右列の下に控えめに */
#ww-info .bl_info_annotation img{
width: min(560px, 100%);
height: auto;
display: block;
}
}
/* PCでも上下の余白・背景グラデの広がりを少し強めたい場合（任意） */
@media (min-width: 1024px){
#ww-info .ww-cta{ background: linear-gradient(180deg,#f1f6ff,#edf2ff); }
}
/* PCだけ：LINE と 無料調査診断ボタンを縦並びに */
@media (min-width:1024px){
/* 右カラムのボタンリストを1列に */
#ww-info .bl_info_list{
display: grid;
grid-template-columns: 1fr; /* ← 1列 */
gap: clamp(12px, 1.2vw, 16px);
justify-items: start; /* 左揃え（中央にしたいなら center） */
align-items: stretch;
}
/* ボタン画像を大きめ＆横幅は列いっぱいに */
#ww-info .bl_info_list li a img{
width: min(460px, 100%); /* お好みで 420〜520px に調整可 */
height: auto;
display: block;
filter: drop-shadow(0 8px 20px rgba(3,9,27,.12));
border-radius: 14px;
}
/* タイトルとの間隔を少し詰める（お好みで） */
#ww-info .bl_info_title{ margin: 0 0 8px !important; }
/* 注意書きは右列の下で右カラム幅に収める */
#ww-info .bl_info_annotation img{ width: min(560px,100%); height:auto; }
}
/* ========== Footer Heading: 画像→テキスト表示 ========== */
.bl_footer_title{
display:grid; place-items:center; gap:.35em;
margin: clamp(16px,2.2vw,28px) 0 clamp(18px,2.6vw,32px);
text-align:center;
}
/* 画像タイトルは隠す */
.bl_footer_title img{ display:none !important; }
/* sr-onlyを解除して見出しとして表示（既存の視覚非表示ルールを上書き） */
.bl_footer_title .bl_footer__sr{
position:static !important; clip:auto !important; clip-path:none !important;
width:auto !important; height:auto !important; overflow:visible !important;
padding:0 !important; margin:0 !important; white-space:normal !important;
font-weight:900; letter-spacing:.14em;
font-size: clamp(28px, 4.8vw, 56px);
/* ブランドのグラデ文字 */
background: linear-gradient(90deg,#5aa2ff,#8b5cff);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 10px 24px rgba(90,162,255,.30));
}
/* 英字の「ABOUT」サブタイトルを追加 */
.bl_footer_title .bl_footer__sr::after{
content: "ABOUT";
display:block;
margin-top:.25em;
font-size: clamp(12px,1.2vw,14px);
letter-spacing:.38em;
color:#64748b; /* ミューテッド */
font-weight:800;
}
/* 下線グロー（お好みで） */
.bl_footer_title::after{
content:"";
width:min(240px, 26vw);
height:8px; border-radius:999px;
margin-top:.55em;
background: linear-gradient(90deg,#5aa2ff,#8b5cff);
opacity:.28;
}
/* グラデ未対応ブラウザのフォールバック色 */
@supports not (-webkit-background-clip:text){
.bl_footer_title .bl_footer__sr{ color:#0f172a; }
}
/* === 固定ヘッダー（PC/モバイル共通） === */
:root{ --wwx-h: 70px; } /* 初期高さ（JSで上書き） */
body{ padding-top: var(--wwx-h); } /* コンテンツの押し下げ */
.wwx{
position: fixed; inset: 0 0 auto 0; z-index: 9999;
background: rgba(255,255,255,.86);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid #e5eaf2;
}
.wwx.is-scrolled{ box-shadow: 0 10px 24px rgba(3,9,27,.10); }
.wwx .bar{
min-height: var(--wwx-h);
width: min(1180px, 94vw);
margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr auto auto; /* logo | nav | (cta/cta-m) | burger */
align-items: center;
gap: 16px;
}
/* PC */
@media (min-width: 960px){
.wwx .nav{ display:flex; gap: 20px; font-weight:700; }
.wwx .cta{ display:block; }
.wwx .burger{ display:none; }
.wwx .cta-m{ display:none; }
}
/* モバイル：ナビと大CTAは隠し、LINE誘導＋バーガーを並べる */
@media (max-width: 959.98px){
.wwx .nav{ display:none; }
.wwx .cta{ display:none; }
.wwx .cta-m{
display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px;
padding:10px 12px; border-radius:999px;
background: linear-gradient(90deg,#00c851,#06c755); /* LINEっぽい緑 */
color:#fff; font-weight:800; font-size:14px;
box-shadow: 0 8px 20px rgba(0,199,85,.25);
}
.wwx .cta-m .ico{ width:18px; height:18px }
}
/* ドロワーとスクリムは固定配置（ヘッダー下起点） */
.wwx .scrim{
position: fixed; inset: 0; background: rgba(2,8,23,.44); z-index: 10000;
}
.wwx .drawer{
position: fixed; top: var(--wwx-h); right: 0;
width: min(88vw, 420px); height: calc(100dvh - var(--wwx-h));
background:#fff; z-index: 10001; overflow:auto;
padding: 16px; display: grid; align-content:start; gap: 16px;
border-left: 1px solid #e5eaf2; box-shadow: -12px 0 36px rgba(3,9,27,.10);
}
/* === Hero：モバイルの“詰め”パッチ（幅そろえ＋余白調整） === */
@media (max-width: 768px){
/* 画像とテキストの横幅を統一して左右のラインを揃える */
.hero__in{
display: grid;
justify-items: center;
gap: clamp(8px, 2.5vw, 14px); /* セクション内の縦の隙間も少し詰める */
}
.hero__copy,
.hero__img{
width: min(520px, 92vw); /* ←両者の見た目の幅を合わせる */
}
.hero__img img{
width: 100%;
height: auto;
margin-top: -4px; /* 画像上の余白をほんの少しだけ詰める（任意） */
display: block;
}
/* バッジ（来社不要/匿名OK/実績多数）のサイズ感と間隔を調整 */
.hero__badges{
display: flex; flex-wrap: wrap;
gap: 6px 8px;
margin: 4px 0 6px; /* 上下の余白を小さく */
}
.pill{ padding: 6px 10px; font-size: 12px; }
/* タイトル・リード・ボタンのマージンも微縮 */
.hero__title{
font-size: clamp(22px, 5.6vw, 28px);
line-height: 1.25;
margin: 6px 0 6px;
}
.hero__lead{
font-size: clamp(13px, 3.6vw, 15px);
margin: 4px 0 8px;
}
.hero__ctas{ display: grid; gap: 8px; }
.hero__note{ margin-top: 8px; }
}
/* ====== テキストCTAボタン ====== */
.ww-ctaBtn{
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: .75em;
width: 100%;
min-height: 70px;
padding: 14px 16px;
border-radius: 16px;
text-decoration: none;
color: #fff;
font-weight: 800;
letter-spacing: .02em;
box-shadow: 0 14px 34px rgba(3,9,27,.14);
transition: transform .15s ease, box-shadow .15s ease;
will-change: transform;
}
.ww-ctaBtn:focus-visible{
outline: 3px solid #93c5fd; outline-offset: 3px;
box-shadow: 0 16px 38px rgba(3,9,27,.18);
}
.ww-ctaBtn:hover{ transform: translateY(-1px); }
/* 配色：LINE（グリーン） / Primary（ブルー） */
.ww-ctaBtn--line{
background: linear-gradient(90deg,#00c853,#06c755);
}
.ww-ctaBtn--primary{
background: linear-gradient(90deg,#0ea5e9,#0284c7);
}
/* バッジ（上に飛び出す白ピル） */
.ww-ctaBadge{
position: absolute;
top: -12px; left: 20px;
background: #fff;
color: #0f172a;
border-radius: 999px;
padding: 6px 10px;
font-size: 12px; font-weight: 800;
letter-spacing: .04em;
box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
/* アイコン／テキスト／矢印 */
.ww-ctaIcon svg{ display:block; width:22px; height:22px; }
.ww-ctaText{ font-size: clamp(16px, 2.8vw, 18px); line-height:1; }
.ww-ctaArrow svg{ width:22px; height:22px; transition: transform .15s ease; }
.ww-ctaBtn:hover .ww-ctaArrow svg{ transform: translateX(3px); }
/* リストの並び（既存のPC縦並び設定とも両立） */
.bl_info_list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.bl_info_list li{ display:block; }
/* レスポンシブ微調整 */
@media (max-width: 768px){
.ww-ctaBtn{ min-height:64px; border-radius:14px; padding:12px 14px; }
.ww-ctaBadge{ top:-10px; left:16px; padding:5px 9px; font-size:11px; }
}
@media (min-width: 1024px){
/* PCの幅感：右カラムで気持ちワイドに */
.bl_info .bl_info_list{ justify-items:start; }
.bl_info .bl_info_list .ww-ctaBtn{ width: min(520px, 100%); }
}
@media (prefers-reduced-motion: reduce){
.ww-ctaBtn, .ww-ctaArrow svg{ transition:none; }
}
/* ===== INFO/CTA（#ww-info）— テキストCTAを綺麗に＆崩れ修正 v2 ===== */
#ww-info .bl_info_list{
display: grid;
gap: 16px;
justify-items: start; /* ボタンを左揃え（親幅に追随） */
margin: 8px 0 0;
}
#ww-info .bl_info_list li{ width: 100%; }
#ww-info .bl_info_list .ww-ctaBtn{
/* 幅をしっかり確保（カラム幅いっぱい、最大560px） */
width: min(560px, 100%);
min-height: 82px;
padding: 18px 20px;
border-radius: 18px;
/* 中のレイアウトを広げる（崩れの主因） */
grid-template-columns: 28px 1fr 24px;
column-gap: 14px;
box-shadow: 0 16px 40px rgba(3,9,27,.12);
transition: transform .15s ease, box-shadow .15s ease;
}
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaIcon svg,
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaArrow svg{ width:24px; height:24px; }
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaText{
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.1;
}
/* 上付きバッジ（位置とサイズを見直し） */
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaBadge{
position:absolute; top:-14px; left:22px;
padding: 6px 12px;
font-size: 12px; font-weight: 800; letter-spacing: .04em;
background:#fff; color:#0f172a;
border:1px solid rgba(15,23,42,.06);
border-radius: 999px;
box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
/* 配色と縁（ややグロッシー） */
#ww-info .ww-ctaBtn--line{
background: linear-gradient(90deg,#0bdc6b,#06c755);
border: 1px solid rgba(255,255,255,.30);
}
#ww-info .ww-ctaBtn--primary{
background: linear-gradient(90deg,#22c1ff,#0ea5e9 55%,#0b78c5);
border: 1px solid rgba(255,255,255,.28);
}
#ww-info .ww-ctaBtn::after{
content:""; position:absolute; inset:1px; border-radius:inherit;
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%);
pointer-events:none;
}
/* ホバー＆アクティブ */
@media (hover:hover){
#ww-info .ww-ctaBtn:hover{
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(3,9,27,.16);
}
#ww-info .ww-ctaBtn:hover .ww-ctaArrow svg{ transform: translateX(3px); }
}
#ww-info .ww-ctaBtn:active{ transform:none; box-shadow: 0 12px 30px rgba(3,9,27,.12); }
/* モバイル調整（はみ出しと行間を詰める） */
@media (max-width: 768px){
#ww-info .bl_info_list{ gap:12px; }
#ww-info .bl_info_list .ww-ctaBtn{
width:100%; min-height:68px; padding:14px 16px;
grid-template-columns: 24px 1fr 22px; border-radius:14px;
}
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaText{ font-size:16px; }
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaBadge{
top:-10px; left:16px; font-size:11px; padding:5px 9px;
}
}
/* ===== INFO / CTA（#ww-info）— モバイルを幅いっぱい＋崩れ修正 v3 ===== */
/* ベース（PC含む）: ボタンは親幅に追随 */
#ww-info .bl_info_list{ display:grid; gap:16px; justify-items:start; width:100%; }
#ww-info .bl_info_list li{ display:block; width:100%; } /* ← inlineの幅無視を防ぐ */
#ww-info .bl_info_list .ww-ctaBtn{
display:grid; grid-template-columns:28px 1fr 24px;
column-gap:14px;
width:100%; max-width:none; box-sizing:border-box;
min-height:82px; padding:18px 20px; border-radius:18px;
}
/* バッジ位置のズレを補正 */
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaBadge{
position:absolute; top:-14px; left:22px;
padding:6px 12px; font-size:12px; border-radius:999px;
}
/* ===== モバイル：横幅いっぱいに（余白だけ少し残す） ===== */
@media (max-width: 768px){
/* セクション内側を“ほぼ全幅”にしてボタンを100%に */
#ww-info .ww-card .in{ width:100%; padding-left:4vw; padding-right:4vw; }
#ww-info .bl_info_list{ gap:12px; }
#ww-info .bl_info_list li,
#ww-info .bl_info_list .ww-ctaBtn{ width:100%; }
/* ボタンの高さ・丸み・タイポをスマホ向けに */
#ww-info .bl_info_list .ww-ctaBtn{
min-height:68px; padding:14px 16px; border-radius:14px;
grid-template-columns:24px 1fr 22px; column-gap:12px;
}
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaText{ font-size:16px; line-height:1.1; }
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaIcon svg,
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaArrow svg{ width:22px; height:22px; }
/* 小バッジも少し内側へ */
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaBadge{
top:-10px; left:16px; padding:5px 9px; font-size:11px;
}
}
/* 見た目（配色/グロス/影）はそのまま流用。必要なら少しだけ強めに。 */
@media (hover:hover){
#ww-info .ww-ctaBtn:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(3,9,27,.16) }
}
#ww-info .ww-ctaBtn:active{ transform:none; box-shadow:0 12px 30px rgba(3,9,27,.12) }
/* --- CTAバッジが切れない＆前面に来るように層を整理 --- */
#ww-info .bl_info_list .ww-ctaBtn{
position: relative; /* 既に指定済でもOK */
overflow: visible; /* バッジのはみ出しを許可 */
}
#ww-info .bl_info_list .ww-ctaBtn::after{
z-index: 0; /* グロスは一番奥へ */
}
#ww-info .bl_info_list .ww-ctaBtn > *{
position: relative;
z-index: 1; /* 通常コンテンツはグロスの上 */
}
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaBadge{
z-index: 2; /* バッジを最前面に固定 */
white-space: nowrap; /* 文言が折り返されて潰れないように */
line-height: 1; /* ピルの上下が切れないように */
}
/* 念のため：極端に狭い幅でもはみ出し防止（任意） */
@media (max-width: 360px){
#ww-info .bl_info_list .ww-ctaBtn .ww-ctaBadge{
font-size: 10.5px; /* 少しだけ縮める */
padding: 5px 8px;
}
}
/* === Header icons force color & visibility === */
.wwx .burger,
.wwx .drawer .dclose{
color: #0f172a !important; /* ← SVGの stroke=currentColor がこれに従う */
}
.wwx .burger svg,
.wwx .drawer .dclose svg{
width: 22px; height: 22px; display: block;
}
/* 見やすさ（任意）：白背景上でボタンの縁と影を少し付ける */
.wwx .burger,
.wwx .drawer .dclose{
background: #fff;
border: 1px solid #e6eef9;
box-shadow: 0 8px 18px rgba(3,9,27,.08);
border-radius: 12px;
}
/* ===== INFO/CTA（#ww-info）のクリック率アップ白文字＆強調パッチ ===== */
/* まずは“色=白”を統一（テキスト/アイコン/矢印） */
#ww-info .ww-ctaBtn{ color:#fff !important; }
#ww-info .ww-ctaBtn .ww-ctaText{ color:#fff !important; }
#ww-info .ww-ctaBtn .ww-ctaIcon,
#ww-info .ww-ctaBtn .ww-ctaArrow{ color:#fff !important; }
#ww-info .ww-ctaBtn .ww-ctaIcon svg,
#ww-info .ww-ctaBtn .ww-ctaArrow svg{ stroke: currentColor; }
/* 配色を“押せるグラデ”に（LINE=グリーン、診断=ブルー） */
#ww-info .ww-ctaBtn--line{
background: linear-gradient(180deg,#18d35a 0%,#0fab43 100%);
border: 0;
}
#ww-info .ww-ctaBtn--primary{
background: linear-gradient(180deg,#2fb7ff 0%,#0e7eea 100%);
border: 0;
}
/* 見た目のメリハリ（影・角・内側余白） */
#ww-info .ww-ctaBtn{
min-height: 64px; /* タップしやすい高さ */
padding: 16px 18px;
border-radius: 16px;
box-shadow: 0 14px 36px rgba(3,9,27,.16);
transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
/* 小バッジ（白枠）とのコントラストはそのまま：読みやすい濃紺 */
#ww-info .ww-ctaBtn .ww-ctaBadge{
color:#0f172a; background:#fff; border:1px solid #e6eef9;
}
/* ホバー/タップのマイクロインタラクション（押し感UP） */
@media (hover:hover){
#ww-info .ww-ctaBtn:hover{
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(3,9,27,.20);
filter: saturate(1.08);
}
}
#ww-info .ww-ctaBtn:active{ transform: translateY(0); }
/* アクセシビリティ：キーボードフォーカスを見えるように */
#ww-info .ww-ctaBtn:focus-visible{
outline: 3px solid rgba(255,255,255,.9);
outline-offset: 2px;
}
/* モバイルで“横幅いっぱい”かつ行間詰め気味で力強く */
@media (max-width: 768px){
#ww-info .bl_info_list{ gap:12px; }
#ww-info .ww-ctaBtn{
width:100%;
grid-template-columns: 26px 1fr 20px; /* アイコン/テキスト/矢印 */
column-gap:12px;
min-height: 68px;
padding: 14px 16px;
}
#ww-info .ww-ctaBtn .ww-ctaText{
font-size: 17px; font-weight: 800; letter-spacing:.02em; line-height:1.15;
}
}
/* ===== Hero CTA（同デザインをヒーローにも適用） ===== */
.hero .hero-ctas{ display:grid; gap:14px; margin-top:14px; }
@media (min-width: 880px){
.hero .hero-ctas{ grid-template-columns:1fr 1fr; gap:16px; }
}
/* 白文字＋アイコン/矢印の色も統一 */
.hero .ww-ctaBtn{ color:#fff !important; position:relative; width:100%;
min-height:64px; padding:16px 18px; border-radius:16px; border:0;
display:grid; grid-template-columns:26px 1fr 20px; align-items:center; column-gap:12px;
box-shadow:0 14px 36px rgba(3,9,27,.16); transition:transform .08s, box-shadow .12s, filter .12s;
}
.hero .ww-ctaBtn .ww-ctaText{ color:#fff !important; font-weight:800; letter-spacing:.02em; }
.hero .ww-ctaBtn .ww-ctaIcon,
.hero .ww-ctaBtn .ww-ctaArrow{ color:#fff !important; }
.hero .ww-ctaBtn svg{ stroke:currentColor; display:block; }
/* バッジ（小さな白ピル） */
.hero .ww-ctaBtn .ww-ctaBadge{
position:absolute; top:-10px; left:16px; z-index:1;
font-size:12px; font-weight:700; line-height:1; letter-spacing:.02em;
color:#0f172a; background:#fff; border:1px solid #e6eef9; padding:6px 10px; border-radius:999px;
box-shadow:0 10px 24px rgba(3,9,27,.08);
}
/* 配色：LINE＝グリーン、診断＝ブルー（情報セクションと同一） */
.hero .ww-ctaBtn--line{
background:linear-gradient(180deg,#18d35a 0%,#0fab43 100%);
}
.hero .ww-ctaBtn--primary{
background:linear-gradient(180deg,#2fb7ff 0%,#0e7eea 100%);
}
/* ホバー/タップの押し感 */
@media (hover:hover){
.hero .ww-ctaBtn:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(3,9,27,.2); filter:saturate(1.08); }
}
.hero .ww-ctaBtn:active{ transform:translateY(0); }
.hero .ww-ctaBtn:focus-visible{ outline:3px solid rgba(255,255,255,.9); outline-offset:2px; }
/* モバイルは横幅いっぱい・行間やや詰め */
@media (max-width:768px){
.hero .ww-ctaBtn{ min-height:68px; padding:14px 16px; }
.hero .ww-ctaBtn .ww-ctaText{ font-size:17px; line-height:1.15; }
}
/* Hero CTA: 丸ポチを消す＆余白リセット */
.hero-ctas{
list-style: none;
margin: 0;
padding: 0;
display:flex;
flex-wrap:wrap;
gap:12px;
}
.hero-ctas > li{
list-style: none;
margin: 0;
padding: 0;
}
/* Safari 等での保険 */
.hero-ctas > li::marker{ content: none; }
html, body { overflow-x: clip; } /* iOS Safariの横ブレ抑止に有効 */
/* 1) グローバルに横スクロール自体を無効化（iOSに有効） */
html, body { overflow-x: clip; }
/* clip非対応の古い環境用フォールバック */
@supports not (overflow: clip) {
html, body { overflow-x: hidden; }
}
/* 2) VOICEセクションでも保険をかける */
.ww-voice { overflow-x: clip; }
/* 3) iOSの動的ビューポート対策：100vw → 100dvw */
@supports (width: 100dvw) {
.ww-voice .wwv-wrap {
width: 100dvw;
margin-left: calc(50% - 50dvw);
margin-right: calc(50% - 50dvw);
box-sizing: border-box; /* ← paddingがあっても安心 */
}
}
/* 4) 100dvw非対応向けの“端数殺し” */
@supports not (width: 100dvw) {
.ww-voice .wwv-wrap {
width: calc(100vw + 1px);
margin-left: calc(50% - 50vw - .5px);
margin-right: calc(50% - 50vw - .5px);
box-sizing: border-box;
}
}
/* 横スクロール抑止（グローバル） */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
/* まずは .wwv-wrap を“通常幅”に戻して、ズレを消す */
.ww-voice .wwv-wrap{
position: relative;
left:auto; right:auto;
width:100%;
margin:0 auto;
box-sizing:border-box;
}
/* 念のためビューポート内で完結させる */
.ww-voice .wwv-viewport{ overflow:hidden; }
/* === Fixed Footer CTA Bar =========================================== */
.ww-fixbar{
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9999;
/* 背景（半透明＋ガラス感） */
background: color-mix(in srgb, #0a1020 72%, transparent);
-webkit-backdrop-filter: saturate(160%) blur(12px);
backdrop-filter: saturate(160%) blur(12px);
/* セーフエリア考慮 */
padding: clamp(8px, 1.6vw, 12px) clamp(10px, 2vw, 16px);
padding-bottom: calc(clamp(8px,1.6vw,12px) + env(safe-area-inset-bottom));
border-top: 1px solid rgba(255,255,255,.08);
overflow-x: clip; /* 横スク防止 */
}
.ww-fixbar__in{
max-width: min(1140px, 92vw);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto; /* UL と 閉じるボタン */
align-items: center;
gap: clamp(8px, 1.6vw, 16px);
}
.ww-fixbar .bl_info_list{
display: grid;
grid-auto-flow: column;
gap: clamp(8px, 1.6vw, 14px);
margin: 0; padding: 0; list-style: none;
}
/* ボタンの見た目（fixbar上で最適化） */
.ww-fixbar .ww-ctaBtn{
--h: 52px;
display: inline-flex; align-items: center; justify-content: center;
gap: .6em; height: var(--h);
padding: 0 clamp(14px, 3.6vw, 22px);
border-radius: 999px;
font-weight: 700; line-height: 1;
text-decoration: none;
box-shadow: 0 10px 26px rgba(2,6,23,.22);
border: 1px solid rgba(255,255,255,.14);
color: #e7ecff;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
white-space: nowrap;
}
.ww-fixbar .ww-ctaBtn--primary{
background: linear-gradient(90deg,#5aa2ff,#8b5cff);
color: #fff; border-color: transparent;
}
.ww-fixbar .ww-ctaBtn--line{
background: linear-gradient(180deg, rgba(46,204,113,.18), rgba(46,204,113,.08));
border-color: rgba(46,204,113,.45);
}
.ww-fixbar .ww-ctaBadge{
font-size: .74rem; font-weight: 700;
padding: .4em .65em; border-radius: 999px;
background: rgba(255,255,255,.12);
}
.ww-fixbar .ww-ctaIcon, .ww-fixbar .ww-ctaArrow{ display:inline-flex }
/* 閉じるボタン */
.ww-fixbar__close{
inline-size: 40px; block-size: 40px;
display: inline-grid; place-items: center;
border-radius: 12px; cursor: pointer;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #e7ecff; font-size: 20px; line-height: 1;
}
/* レスポンシブ（狭い幅は縦積み） */
@media (max-width: 560px){
.ww-fixbar__in{
grid-template-columns: 1fr;
}
.ww-fixbar .bl_info_list{
grid-auto-flow: row;
}
.ww-fixbar .ww-ctaBtn{ --h: 48px; width: 100%; }
}
/* 本文との重なり対策：バーの分だけ下パディング */
body.has-fixbar{
padding-bottom: var(--ww-fixbar-h, 80px);
}
/* 好みでライトモード配色微調整 */
@media (prefers-color-scheme: light){
.ww-fixbar{ background: color-mix(in srgb, #ffffff 72%, transparent); }
.ww-fixbar .ww-ctaBtn{ color:#0f172a; border-color: rgba(2,6,23,.1); }
.ww-fixbar .ww-ctaBtn--primary{ color:#fff }
}
/* ================================================================ */
/* === Fixbar Tweaks: LINE配色 / バッジ可読性 / SPセンタリング === */
/* 1) LINEボタンを“LINEらしい緑”に */
.ww-fixbar .ww-ctaBtn--line{
background: linear-gradient(90deg,#06C755,#00B341); /* LINEグリーン */
border-color: rgba(6,199,85,.85);
color:#fff;
}
/* 2) バッジを高コントラスト化（白チップ＋濃色文字） */
.ww-fixbar .ww-ctaBtn .ww-ctaBadge{
background: rgba(255,255,255,.94);
color: #0f172a; /* ベースは濃いグレー */
border: 0;
box-shadow: 0 1px 0 rgba(0,0,0,.06);
font-size: .8rem;
letter-spacing: .02em;
padding: .42em .7em;
}
/* ボタン別の文字色微調整 */
.ww-fixbar .ww-ctaBtn--line .ww-ctaBadge{ color:#0b6f3a; } /* 緑系 */
.ww-fixbar .ww-ctaBtn--primary .ww-ctaBadge{ color:#3b2a6f; } /* バイオレット系 */
/* 3) モバイル時のセンタリング（ボタンを中央に・幅も整える） */
@media (max-width:560px){
.ww-fixbar__in{ grid-template-columns:1fr; justify-items:center; }
.ww-fixbar .bl_info_list{ justify-content:center; width:100%; }
.ww-fixbar .ww-ctaBtn{
width: clamp(260px, 92vw, 560px);
margin-inline:auto; /* 中央寄せ */
}
}
/* === Fixbar: precise centering & safe-area padding === */
/* 左右パディングは固定px + セーフエリア、丸め誤差を排除 */
.ww-fixbar{
--pad-x: 12px;
padding-left: calc(var(--pad-x) + env(safe-area-inset-left));
padding-right: calc(var(--pad-x) + env(safe-area-inset-right));
}
/* 中身は 100% 基準で中央寄せ（vw を使わない） */
.ww-fixbar__in{
width: min(1140px, 100%);
margin-inline: auto;
}
/* ULは確実に中央配置（grid→flexで丸め差分ゼロに） */
.ww-fixbar .bl_info_list{
display: flex;
gap: clamp(8px, 1.8vw, 16px);
margin: 0; padding: 0; list-style: none;
justify-content: center; align-items: center;
}
/* ボタン幅は左右パディングを考慮して“見た目中央”に */
@media (max-width: 560px){
.ww-fixbar__in{
display: grid; grid-template-columns: 1fr; justify-items: center;
width: 100%;
}
.ww-fixbar .bl_info_list{
flex-direction: column; width: 100%;
}
.ww-fixbar .ww-ctaBtn{
width: calc(100% - 2 * var(--pad-x));
max-width: 560px;
margin-inline: auto;
}
}
/* フッター到達時にふわっと消える */
.ww-fixbar[aria-hidden="true"]{
opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease;
}
/* フッター手前でCTAを隠す時のアニメ */
.ww-fixbar[aria-hidden="true"]{
opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease;
}
/* 下端が隠れないように、固定バーの高さ分パディングを足す */
body.has-fixbar{
padding-bottom: calc(var(--ww-fixbar-h, 80px) + 8px);
}
/* アンカー(#form 等)に飛んだ時も隠れないようにする */
html{ scroll-padding-bottom: calc(var(--ww-fixbar-h, 80px) + 12px); }
/* ===== Fixbar: SPで必ず横一列・等幅にする（上書きパッチ） ===== */
/* セーフエリア＋左右パディングはそのまま */
.ww-fixbar{
--pad-x: 12px;
padding-left: calc(var(--pad-x) + env(safe-area-inset-left));
padding-right: calc(var(--pad-x) + env(safe-area-inset-right));
}
/* 中身は100%幅で中央寄せ（vwベースは使わない） */
.ww-fixbar__in{
width: 100%;
margin-inline: auto;
}
/* ULを横並び・等幅に。過去指定を打ち消すため !important を使用 */
.ww-fixbar .bl_info_list{
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center;
align-items: stretch;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.ww-fixbar .bl_info_list > li{
flex: 1 1 0; /* 等幅に分配 */
min-width: 0; /* 文字が長くても折り返し可能に */
}
/* ボタンはリスト幅いっぱいを使う（以前の clamp 幅を打消し） */
.ww-fixbar .ww-ctaBtn{
width: 100% !important;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: .6em;
padding: 12px 14px;
border-radius: 999px;
min-height: 48px;
}
/* アイコンは縮まない／テキストは省略可能に */
.ww-fixbar .ww-ctaIcon,
.ww-fixbar .ww-ctaArrow{ flex: 0 0 auto; }
.ww-fixbar .ww-ctaText{
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: clamp(14px, 3.8vw, 16px);
}
/* バッジで高さが増えすぎるのを防ぐ（小型化＋極小端末では非表示） */
.ww-fixbar .ww-ctaBtn{ position: relative; }
.ww-fixbar .ww-ctaBadge{
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
font-size: 11px; padding: .2em .6em; border-radius: 999px;
}
@media (max-width: 380px){
.ww-fixbar .ww-ctaBadge{ display: none; }
}
/* 以前の“SPは縦積み”指定を強制で無効化 */
@media (max-width: 560px){
.ww-fixbar__in{ display: block !important; }
.ww-fixbar .bl_info_list{ flex-direction: row !important; }
}
/* ===== モバイルで選択肢が横にはみ出さないように調整 ===== */
/* 既存の min-width を無効化し、折り返し可能にする */
.section--diag .choices {
display: grid;
gap: 10px;
/* ワイド時は自動調整（既存より後に書くことで上書き） */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
width: 100%;
}
/* SPは必ず2列（はみ出し防止のため min を0に） */
@media (max-width: 480px){
.section--diag .choices{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* かなり狭い端末は1列に */
@media (max-width: 360px){
.section--diag .choices{
grid-template-columns: 1fr;
}
}
/* コンテンツ側も折り返しOK＋横幅計算を正しく */
.section--diag .choice,
.section--diag .choice label { min-width: 0; box-sizing: border-box; }
.section--diag .choice label{
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
white-space: normal; /* 一行固定を解除 */
word-break: keep-all; /* 日本語の不自然な分割を避ける */
overflow-wrap: anywhere; /* 括弧や長語でも折り返し可 */
}
/* ドットは固定幅、テキスト側を伸縮 */
.section--diag .choice .dot{ flex: 0 0 auto; }
.section--diag .choice label span:not(.dot){ flex: 1 1 auto; min-width: 0; }
/* --- Q2のラベルを2段表示にした時の見た目調整 --- */
.section--diag .choices { width: 100%; }
.section--diag .choice,
.section--diag .choice label { min-width: 0; box-sizing: border-box; }
.section--diag .choice label{
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
}
.section--diag .choice .dot{ flex: 0 0 auto; margin-top: 2px; }
/* 2段用のラッパー */
.section--diag .choice label .coin{ display: flex; flex-direction: column; line-height: 1.15; flex: 1 1 auto; min-width: 0; }
.section--diag .choice label .coin-main{ font-size: 1em; font-weight: 600; }
.section--diag .choice label .coin-sub{ font-size: .9em; opacity: .9; }
/* グリッドは端末幅で自動調整（はみ出し防止） */
@media (max-width: 480px){
.section--diag .choices{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 360px){
.section--diag .choices{ grid-template-columns: 1fr !important; }
}
/* 固定フッターの下の余白を消す：SPでは×を隠す */
@media (max-width: 560px){
.ww-fixbar__close{ display:none !important; }
.ww-fixbar__in{ padding-bottom: 0 !important; } /* 念のため */
}
/* 最終CTAのボタンレイアウト（モバイル最適化） */
.ww-ctaFinal .ctas{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
gap: 12px;
align-items: stretch;
}
.ww-ctaFinal .ctas .btn{ inline-size: 100%; } /* 上段2つをキッチリ横並び */
.ww-ctaFinal .ctas .btn--ghost{
grid-column: 1 / -1; /* 2列分を占有 */
justify-self: center; /* センター配置 */
inline-size: auto; /* 幅は中身に合わせる */
padding-inline: 20px; /* ほんの少し横にゆとり */
}
/* 画面が広い時は3列に戻す（任意。PCで3つ横並びにしたい場合） */
@media (min-width: 960px){
.ww-ctaFinal .ctas{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ww-ctaFinal .ctas .btn--ghost{
grid-column: auto;
justify-self: stretch; /* PCでは他と同じ幅でOK */
inline-size: 100%;
}
}
/* 長い文で折り返しが気になる場合の微調整（任意） */
.ww-ctaFinal .ctas .btn{
white-space: nowrap; /* 折り返したくない時は有効化。2行OKなら消してください */
}
/* ========== Header: LINEで無料相談 を常に1行で ========== */
/* レイアウト：ロゴ(可変) / CTA(固定) / メニュー(固定) */
.ww-header .wrap {
display: flex; align-items: center; gap: 8px;
}
.ww-header .brand {
flex: 1 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ボタン自体は1行固定＆改行禁止（グローバルの break-all を打ち消す） */
.ww-header .ww-headCta,
.ww-header .ww-headCta * {
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
/* 見た目微調整：アイコンと文字の間隔・高さ */
.ww-header .ww-headCta {
display: inline-flex; align-items: center; gap: .5em;
line-height: 1; padding: 10px 14px; border-radius: 999px;
}
/* iOS の勝手な文字サイズ拡大を抑止（wrap原因になるため） */
html { -webkit-text-size-adjust: 100%; }
/* 幅が厳しい端末向けの縮小（320〜360px想定） */
@media (max-width: 420px){
.ww-header .ww-headCta { font-size: 13px; padding: 8px 12px; }
.ww-header .ww-headCta svg { width: 16px; height: 16px; }
.ww-header .brand { font-size: 15px; } /* ロゴ側を少しだけ譲る */
}
@media (max-width: 360px){
.ww-header .ww-headCta { font-size: 12.5px; letter-spacing: .01em; }
}
/* ====== Header CTA 一行固定パッチ (2025-10-09) ====== */
/* iOS の勝手な拡大抑止（念のため全体） */
html { -webkit-text-size-adjust: 100%; }
/* ヘッダーの LINE ボタンに ww-ctaLine を付けた前提 */
:where(header) .ww-ctaLine{
display: inline-flex;
align-items: center;
gap: .5em;
/* 折り返し禁止（両方指定で強めに） */
white-space: nowrap;
text-wrap: nowrap;
/* 見た目の詰め（全角カナ等が多い時に効く） */
font-feature-settings: "palt" 1;
letter-spacing: .01em;
/* 余白を少しだけタイトに */
padding-inline: 12px 14px; /* お好みで 10〜14px */
/* 内容幅優先＝はみ出しではなく“縮む”方向に */
min-inline-size: max-content;
}
/* 内側のアイコンがあれば少しだけ小さく（任意） */
:where(header) .ww-ctaLine svg{
inline-size: 1.05em;
block-size: 1.05em;
}
/* 狭幅端末（iPhone SE相当 320〜360px）でだけフォントを少し落とす */
@media (max-width: 360px){
:where(header) .ww-ctaLine{ font-size: 13px; }
}
/* さらにキツい超狭幅（<= 340px）の保険。必要なければ削ってOK */
@media (max-width: 340px){
:where(header) .ww-ctaLine{ font-size: 12.5px; padding-inline: 10px 12px; }
}
/* デフォルト（PC/タブレット）では改行しない */
.sp-br { display: none; }
/* モバイルだけ 2 行にする（閾値は必要に応じて 560px/600px に変更OK） */
@media (max-width: 480px) {
.sp-br { display: inline; }
/* ラベルを2行前提で少しタイトに、中央寄せでスタイリッシュに */
.item.item--line .label{
white-space: normal; /* 親で nowrap 指定があってもラベル内は改行OKにする保険 */
line-height: 1.12;
letter-spacing: .01em;
text-align: center;
display: inline-block; /* テキスト中央寄せを安定 */
}
/* 2行化で高さが増える分、上下パディングを微調整（好みで） */
.item.item--line{
align-items: center; /* アイコン・テキスト・矢印の縦位置をそろえる */
padding-block: 10px; /* 既存より少しだけ余裕をつける */
}
/* アイコンと矢印の主張を控えめに（任意） */
.item.item--line .ico svg,
.item.item--line .chev{
inline-size: 1.05em;
block-size: 1.05em;
}
}
/* デフォルト：PC/タブレットは1行のまま */
.sp-br { display: none; }
/* ヘッダーLINEボタンの基礎（PCもモバイルも共通） */
.wwx .item--line{
display: inline-grid; /* アイコン | ラベル | 矢印 */
grid-auto-flow: column;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: #06C755; /* 公式LINEグリーン */
color: #fff;
-webkit-font-smoothing: antialiased;
text-decoration: none;
flex: 0 0 auto; /* ヘッダーのフレックス圧縮を防ぐ */
}
.wwx .item--line .ico svg,
.wwx .item--line .chev{
width: 1.1em; height: 1.1em; /* 端末差の影響を受けにくいサイズに */
}
/* ラベルの文字詰め（PC側は1行固定） */
.wwx .item--line .label{
white-space: nowrap;
letter-spacing: .01em;
}
/* ===== モバイルだけ2行固定 & 幅を安定させる ===== */
@media (max-width: 600px){
.sp-br { display: inline; } /* ← 強制改行を有効にする */
.wwx .item--line{
min-width: clamp(170px, 42vw, 230px); /* 端末幅に応じてボタン幅を確保 */
padding-block: 10px; /* 2行になっても窮屈に見えない余白 */
}
.wwx .item--line .label{
white-space: normal; /* ラベル内だけ改行許可（保険） */
line-height: 1.12;
text-align: center; /* 2行を中央に */
display: inline-block;
font-size: clamp(13px, 3.6vw, 14px); /* 端末差で溢れにくい可変サイズ */
}
}
/* iOS/Safariの自動テキスト拡大対策（未設定なら） */
html { -webkit-text-size-adjust: 100%; }
/* すでに入れてある .sp-br と .item--line のスタイルはそのまま */
@media (max-width: 350px){
.wwx .item--line{
min-width: 160px; /* ボタンの最低幅を少しだけ下げて確保 */
gap: 6px;
padding-inline: 10px;
}
.wwx .item--line .chev{ /* いちばん小さい幅では矢印を隠してラベル幅を確保 */
display: none;
}
.wwx .item--line .label{
font-size: 13px; /* 文字拡大時の3行化を抑える */
word-break: keep-all; /* 和文のムダな途中改行を抑止（
のみで改行） */
}
}
/* iOS/Safariの自動拡大を抑える（未設定なら念のため） */
@supports (-webkit-touch-callout:none){
html{ -webkit-text-size-adjust:100%; }
}