/* ============================================================
   AIO特化Web制作 — Design Proposal B「モダンSaaS・グラデーション」r8
   Stripe / Notion 系の明るく柔らかい今風SaaS。
   白の余白・角丸カード・ソフトシャドウ・インディゴ→バイオレット→スカイの
   グラデーションで「信頼感と軽やかさ」を両立する。
   ------------------------------------------------------------
   コントラスト設計（WCAG AA 4.5:1 以上を計算で担保）
   - 本文 #0F172A / 白        : 17.9:1
   - ミュート #47536B / #FFF   : 7.72:1
   - ミュート #47536B / #F7F9FC: 7.31:1
   - アクセント #4F46E5 / #FFF : 6.29:1
   - 白文字 / ボタングラデ #4F46E5→#7C3AED : 6.29〜5.70:1
   - 白文字 / CTA帯 #4338CA→#7C3AED       : 6.87〜5.70:1
   - ダークパネル #A9B6D4 / #0C1226        : 9.1:1
   ============================================================ */

:root{
  --bg:        #FFFFFF;
  --bg-alt:    #F7F9FC;
  --ink:       #0F172A;
  --muted:     #47536B;  /* 本文に多用されるため7:1以上を確保（40〜60代の低コントラスト感度対応） */
  --line:      #E5E9F2;

  --indigo:    #6366F1;
  --violet:    #8B5CF6;
  --sky:       #38BDF8;
  --indigo-d:  #4F46E5;  /* text-safe */
  --violet-d:  #7C3AED;
  --sky-d:     #0369A1;  /* 白地4.5:1以上（グラデ文字の末端色に使うため） */

  --grad:       linear-gradient(135deg, #6366F1, #8B5CF6 52%, #38BDF8);
  --grad-text:  linear-gradient(108deg, #4F46E5 8%, #7C3AED 46%, #0369A1 92%);
  --grad-btn:   linear-gradient(135deg, #4F46E5, #7C3AED);
  --grad-band:  linear-gradient(118deg, #4338CA, #6D28D9 55%, #0369A1);

  --deep-bg:    #0C1226;
  --deep-text:  #D7E0F2;
  --deep-muted: #A9B6D4;

  --r-xl: 28px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06);
  --shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 14px 36px rgba(79,70,229,.10);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.07), 0 28px 64px rgba(79,70,229,.16);
  --shadow-btn: 0 8px 22px rgba(99,102,241,.34);

  --font: "Inter","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --header-h: 74px;
}

/* ---------- Reset / base ---------- */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:18px;
  line-height:1.9;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--indigo-d); text-decoration:none; }
ul,ol{ list-style:none; }
address{ font-style:normal; }
strong{ font-weight:700; }

::selection{ background:#C7D2FE; color:#1E1B4B; }

:focus-visible{
  outline:3px solid var(--indigo-d);
  outline-offset:3px;
  border-radius:6px;
}
.deep-panel :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible{
  outline-color:#A5B4FC;
}

/* ---------- Layout primitives ---------- */

.wrap{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
}
.wrap.narrow{ max-width:820px; }

.section{ padding:112px 0; }
.section.alt{ background:var(--bg-alt); }

.center{ text-align:center; }

/* ---------- Skip link ---------- */

.skip-link{
  position:fixed;
  top:12px; left:12px;
  z-index:200;
  transform:translateY(-260%);
  background:#fff;
  color:var(--indigo-d);
  font-weight:700;
  font-size:17px;
  padding:12px 20px;
  border-radius:999px;
  border:1.5px solid #C7D2FE;
  box-shadow:var(--shadow-md);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:none; }

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid rgba(229,233,242,.9);
}

.header-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
}
.brand-mark{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:12px;
  background:#0B1220;
  box-shadow:0 4px 12px rgba(11,18,32,.22);
  position:relative;
  overflow:hidden;
}
.brand-mark::before{
  content:"";
  position:absolute;
  width:18px; height:18px;
  top:-7px; left:8px;
  border-radius:5px;
  background:#C9FF4A;
  transform:rotate(45deg);
}
.brand-mark::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  right:-7px; bottom:6px;
  border-radius:6px;
  background:#6E89FF;
  transform:rotate(45deg);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.logo-main{
  font-weight:800;
  font-size:18px;
  letter-spacing:.02em;
}
.logo-sub{
  font-size:16px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.06em;
}

/* nav */
.global-nav ul{
  display:flex;
  align-items:center;
  gap:4px;
}
.global-nav a{
  display:inline-block;
  padding:9px 14px;
  border-radius:999px;
  font-size:18px;
  font-weight:600;
  color:#3D4759;
  transition:background .18s ease, color .18s ease;
}
.global-nav a:hover{
  background:#EEF2FF;
  color:var(--indigo-d);
}
.nav-cta a{
  margin-left:8px;
  background:var(--grad-btn);
  color:#fff;
  font-weight:700;
  padding:10px 20px;
  box-shadow:var(--shadow-btn);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-cta a:hover{
  background:var(--grad-btn);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(99,102,241,.42);
}

/* hamburger (checkbox) */
.nav-toggle{
  position:absolute;
  width:1px; height:1px;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
.nav-toggle-label{
  display:none;
  align-items:center;
  gap:6px;
  font-size:18px;
  font-weight:700;
  /* 2026-08-28: 「MENU ☰」→「メニュー ☰」で1行に必要な幅が121px→139pxへ増え、
     393px未満（iPhone SE/13 mini の375px、iPhone 12〜14 の390px）で折り返して
     ボタンが90px高の縦長になり、ブランドまで巻き込んで2段に崩れていた。
     文字サイズは18px下限があるので下げられない。字間拡張・余白・折り返しで吸収する。
     実測（320/360/375/390/414px）: 現状 139x90 → この指定で全幅 122x56 の1行。
     ※字間拡張は日本語に不要なうえ、装飾として無視されやすい要因でもある。
     ※320px・360px は「MENU ☰」でも元から2行だったので、既存の崩れもここで解消する。 */
  letter-spacing:normal;
  color:var(--ink);
  background:#fff;
  border:1.5px solid #D9DFEC;
  border-radius:999px;
  padding:10px 14px;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:border-color .18s ease, background .18s ease;
}
.nav-toggle-label:hover{ border-color:#A5B4FC; background:#EEF2FF; }
.nav-toggle:focus-visible ~ .nav-toggle-label{
  outline:3px solid var(--indigo-d);
  outline-offset:3px;
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:15px 32px;
  border-radius:999px;
  font-size:18px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.02em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  text-align:center;
}

.btn-grad{
  background:var(--grad-btn);
  color:#fff;
  box-shadow:var(--shadow-btn);
  position:relative;
  overflow:hidden;
}
.btn-grad::after{
  content:"→";
  font-family:"Inter",sans-serif;
  font-weight:800;
  transition:transform .2s ease;
}
.btn-grad:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(99,102,241,.44);
}
.btn-grad:hover::after{ transform:translateX(3px); }

.btn-ghost{
  background:rgba(255,255,255,.85);
  color:var(--ink);
  border:1.5px solid #D9DFEC;
  box-shadow:var(--shadow-xs);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  border-color:#A5B4FC;
  box-shadow:var(--shadow-sm);
}

.btn-line{
  background:#fff;
  color:var(--indigo-d);
  border:1.5px solid #C7D2FE;
  box-shadow:var(--shadow-xs);
}
.btn-line:hover{
  transform:translateY(-2px);
  background:#EEF2FF;
  border-color:#A5B4FC;
  box-shadow:var(--shadow-sm);
}

.btn-white{
  background:#fff;
  color:var(--indigo-d);
  box-shadow:0 10px 28px rgba(8,12,40,.28);
}
.btn-white:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(8,12,40,.34);
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:40px;
}
.btn-row.left{ justify-content:flex-start; }

/* ---------- Hero ---------- */

.hero{
  position:relative;
  overflow:hidden;
  padding:118px 0 128px;
  background:
    radial-gradient(1100px 480px at 50% -8%, #EEF2FF 0%, rgba(238,242,255,0) 68%),
    var(--bg);
}
/* fine grid, fading out radially */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(820px 460px at 50% 8%, #000 20%, transparent 78%);
  mask-image:radial-gradient(820px 460px at 50% 8%, #000 20%, transparent 78%);
  pointer-events:none;
}

.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(48px);
  opacity:.55;
  will-change:transform;
}
.blob-1{ width:560px; height:560px; background:#C7D2FE; top:-200px; left:-150px; animation:float 16s ease-in-out infinite alternate; }
.blob-2{ width:520px; height:520px; background:#E3D5FE; top:-120px; right:-160px; animation:float 19s ease-in-out infinite alternate-reverse; }
.blob-3{ width:460px; height:420px; background:#BAE6FD; bottom:-240px; left:34%; opacity:.5; animation:float 22s ease-in-out infinite alternate; }

@keyframes float{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(34px,26px,0) scale(1.06); }
}

.hero-inner{
  position:relative;
  text-align:center;
  max-width:1080px;
}
.mobile-break{ display:none; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:#4338CA;
  background:rgba(238,242,255,.9);
  border:1px solid #C7D2FE;
  border-radius:999px;
  padding:8px 18px;
  box-shadow:var(--shadow-xs);
}
.pill-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--indigo-d);
  box-shadow:0 0 0 0 rgba(99,102,241,.45);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(99,102,241,.45); }
  70% { box-shadow:0 0 0 9px rgba(99,102,241,0); }
  100%{ box-shadow:0 0 0 0 rgba(99,102,241,0); }
}

.hero h1{
  margin:30px 0 26px;
  font-size:clamp(38px, 5.8vw, 64px);
  font-weight:900;
  line-height:1.34;
  letter-spacing:.005em;
}
.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  font-size:18px;
  color:var(--muted);
  line-height:2.05;
}
.lead strong{ color:var(--ink); }
.hero-lead{
  max-width:780px;
  margin:0 auto;
  text-align:left;
}
.section .lead.center{
  max-width:780px;
  margin:0 auto 8px;
}

/* ---------- Section heads ---------- */

.sec-head{
  text-align:center;
  margin-bottom:30px;
}
.eyebrow{
  display:inline-block;
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.22em;
  color:#4338CA;
  background:#EEF2FF;
  border:1px solid #E0E7FF;
  border-radius:999px;
  padding:7px 18px 7px 20px;
  margin-bottom:18px;
}
.eyebrow.on-dark{
  color:#C7D2FE;
  background:rgba(199,210,254,.12);
  border-color:rgba(199,210,254,.28);
}
.sec-head h2{
  font-size:clamp(29px, 3.8vw, 44px);
  font-weight:900;
  line-height:1.5;
  letter-spacing:.01em;
}

.note{
  margin-top:28px;
  font-size:18px;
  color:var(--muted);
  line-height:1.9;
}
.section .note.center{ max-width:820px; margin-left:auto; margin-right:auto; }

/* ---------- Stats ---------- */

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:48px;
}
.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 26px 24px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat-card::before{
  content:"";
  position:absolute;
  top:0; left:26px; right:26px;
  height:3px;
  border-radius:0 0 3px 3px;
  background:var(--grad);
  opacity:.85;
}
.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.stat-num{
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:clamp(34px, 3.4vw, 42px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.15;
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat-desc{
  font-size:18px;
  line-height:1.8;
  color:var(--ink);
  font-weight:500;
  flex:1;
}
.stat-src{
  font-size:16px;
  color:var(--muted);
  border-top:1px dashed var(--line);
  padding-top:12px;
  letter-spacing:.02em;
}

/* ---------- Cards (problem / service) ---------- */

.card-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  margin-top:48px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 32px 30px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:#DDE3F3;
}
.card h3{
  font-size:20px;
  font-weight:800;
  line-height:1.6;
  margin:18px 0 10px;
}
.card p{
  font-size:18px;
  color:var(--muted);
  line-height:2;
}

/* colorful icon chips (CSS shapes + numbers, no emoji) */
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:36px;
  padding:0 13px;
  border-radius:11px;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:16.5px;
  font-weight:800;
  letter-spacing:.08em;
  position:relative;
}
.chip::after{            /* tiny gradient tick in the corner */
  content:"";
  position:absolute;
  right:-4px; top:-4px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 0 2.5px #fff;
}
.chip-indigo{ background:#EEF2FF; color:#4338CA; }
.chip-violet{ background:#F3E8FF; color:#6D28D9; }
.chip-sky   { background:#E0F2FE; color:#075985; }
.chip-rose  { background:#FCE7F3; color:#BE185D; }

/* ---------- Promise (zero) block ---------- */

.promise-card{
  margin-top:46px;
  border:2px solid transparent;
  border-radius:var(--r-xl);
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad) border-box;
  box-shadow:var(--shadow-md);
  padding:clamp(30px, 4.5vw, 52px);
}
.promise-card > h3{
  text-align:center;
  font-size:21px;
  font-weight:900;
  margin-bottom:30px;
  letter-spacing:.02em;
}
.promise-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.promise-item{
  position:relative;
  background:var(--bg-alt);
  border:1px solid #EDF0F7;
  border-radius:var(--r-md);
  padding:20px 20px 18px 56px;
  font-size:18px;
  color:var(--muted);
  line-height:1.85;
  transition:transform .2s ease, box-shadow .2s ease;
}
.promise-item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
}
.promise-item b{
  display:block;
  font-size:18px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:4px;
  line-height:1.5;
}
/* CSS check mark chip */
.promise-item::before{
  content:"";
  position:absolute;
  left:18px; top:22px;
  width:26px; height:26px;
  border-radius:9px;
  background:#E0E7FF;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.promise-item::after{
  content:"";
  position:absolute;
  left:25px; top:29px;
  width:11px; height:6px;
  border-left:2.5px solid var(--indigo-d);
  border-bottom:2.5px solid var(--indigo-d);
  transform:rotate(-45deg);
}

/* ---------- Comparison table ---------- */

.tbl-scroll{
  margin-top:44px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
  box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch;
}
table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  font-size:18px;
}
caption{
  caption-side:top;
  text-align:left;
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  padding:22px 26px 16px;
  background:#fff;
}
thead th{
  background:#101A33;
  color:#fff;
  font-size:18px;
  font-weight:700;
  letter-spacing:.04em;
  text-align:left;
  padding:14px 22px;
}
thead th:nth-child(2){
  background:#EEF2FF;
  color:var(--indigo-d);
}
tbody th{
  background:var(--bg-alt);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  text-align:left;
  padding:16px 22px;
  border-top:1px solid var(--line);
  white-space:nowrap;
}
tbody td{
  padding:16px 22px;
  border-top:1px solid var(--line);
  color:var(--muted);
  line-height:1.8;
}
tbody tr:hover td,
tbody tr:hover th{ background-color:#FBFCFE; }
td.zero{
  position:relative;
  background:linear-gradient(180deg,#EEF2FF,#F5F3FF) !important;
  color:#4338CA;
  font-weight:800;
}

/* ---------- Deep (dark) panels ---------- */

.deep-panel{
  position:relative;
  overflow:hidden;
  /* 信頼形成セクション（HONESTY/MONITOR）はテック演出を排したフラットな濃紺 */
  background:var(--deep-bg);
  border-radius:var(--r-xl);
  padding:clamp(38px, 6vw, 72px);
  color:var(--deep-text);
  box-shadow:0 24px 64px rgba(12,18,38,.35);
}
.deep-body{
  position:relative;
  max-width:860px;
}
.deep-panel h2{
  font-size:clamp(24px, 3.2vw, 34px);
  font-weight:900;
  color:#fff;
  line-height:1.55;
  margin:16px 0 22px;
}
.deep-panel p{
  font-size:18px;
  line-height:2.05;
  margin-bottom:18px;
}
.deep-panel .hl{
  color:#FDE68A;
  font-weight:800;
}
.deep-panel .fine{
  font-size:18px;
  color:var(--deep-muted);
  margin-bottom:0;
}

/* numbered steps */
.steps{
  counter-reset:step;
  margin:26px 0 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding:16px 20px 16px 64px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(199,210,254,.16);
  border-radius:var(--r-md);
  font-size:18px;
  line-height:1.95;
}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:18px; top:17px;
  width:30px; height:30px;
  border-radius:10px;
  background:#EEF2FF;
  color:var(--indigo-d);
  font-family:"Inter",sans-serif;
  font-size:17px;
  font-weight:800;
  display:grid;
  place-items:center;
  box-shadow:0 2px 8px rgba(12,18,38,.28);
}

/* monitor offer box */
.offer{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(199,210,254,.22);
  border-radius:var(--r-md);
  padding:24px 28px;
  margin:24px 0 6px;
}
.offer strong{
  font-size:18.5px;
  font-weight:900;
  color:#fff;
  line-height:1.8;
}
.offer-sub{
  display:inline-block;
  margin-top:8px;
  font-size:18px;
  color:var(--deep-muted);
  line-height:1.9;
}

.deep-panel .btn-row{ margin-top:30px; }

/* ---------- Pricing ---------- */

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:54px;
  align-items:stretch;
}
.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:36px 30px 30px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.plan:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
}
.plan h3{
  font-size:20px;
  font-weight:900;
  letter-spacing:.02em;
}
.plan-for{
  margin-top:10px;
  font-size:18px;
  color:var(--muted);
  line-height:1.9;
  min-height:3.8em;
}
.price{
  margin-top:18px;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.3;
}
.price small{
  font-size:16.5px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.02em;
}
.monthly{
  margin-top:4px;
  font-size:16.5px;
  font-weight:700;
  color:var(--indigo-d);
  background:#EEF2FF;
  border-radius:999px;
  padding:6px 14px;
  display:inline-block;
  align-self:flex-start;
}
.plan-list{
  margin:22px 0 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.plan-list li{
  position:relative;
  padding-left:32px;
  font-size:18px;
  line-height:1.8;
  color:var(--ink);
}
.plan-list li::before{
  content:"";
  position:absolute;
  left:0; top:5px;
  width:20px; height:20px;
  border-radius:7px;
  background:#EEF2FF;
}
.plan-list li::after{
  content:"";
  position:absolute;
  left:5.5px; top:10.5px;
  width:9px; height:5px;
  border-left:2px solid var(--indigo-d);
  border-bottom:2px solid var(--indigo-d);
  transform:rotate(-45deg);
}
.plan-list li.minus{ color:var(--muted); }
.plan-list li.minus::before{ background:#EFF1F6; }
.plan-list li.minus::after{
  border-left:none;
  border-bottom:2px solid #8A93A6;
  width:8px; height:0;
  left:6px; top:14px;
  transform:none;
}
.plan .btn{ width:100%; }

/* recommended plan */
.plan.reco{
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad) border-box;
  box-shadow:var(--shadow-lg);
}
@media (min-width:981px){
  .plan.reco{ transform:translateY(-10px); }
  .plan.reco:hover{ transform:translateY(-15px); }
}
.reco-tag{
  position:absolute;
  top:-15px; left:50%;
  transform:translateX(-50%);
  background:var(--grad-btn);
  color:#fff;
  font-size:16px;
  font-weight:800;
  letter-spacing:.14em;
  border-radius:999px;
  padding:6px 18px;
  box-shadow:var(--shadow-btn);
  white-space:nowrap;
}

/* ---------- Featured service card ---------- */

.featured-service-card{
  margin-top:40px;
  position:relative;
  background:linear-gradient(135deg,#EEF2FF, #F5F3FF 48%, #E0F2FE);
  border:1px solid #E0E7FF;
  border-radius:var(--r-lg);
  padding:38px 38px 34px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.featured-service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.featured-service-card::before{
  content:"";
  position:absolute;
  right:-70px; top:-70px;
  width:220px; height:220px;
  border-radius:50%;
  background:var(--grad);
  opacity:.14;
  filter:blur(6px);
}
.price-pill{
  display:inline-block;
  background:#fff;
  color:var(--indigo-d);
  border:1.5px solid #C7D2FE;
  border-radius:999px;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:16.5px;
  font-weight:800;
  letter-spacing:.03em;
  padding:8px 18px;
  box-shadow:var(--shadow-xs);
}
.featured-service-card h3{
  margin:18px 0 10px;
  font-size:23px;
  font-weight:900;
}
.featured-service-card p{
  font-size:18px;
  color:#33415C;
  line-height:2;
  position:relative;
}

/* ---------- Service carousel ---------- */

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.service-carousel{
  position:relative;
  margin-top:54px;
}
.service-carousel-viewport{
  overflow-x:auto;
  border-radius:var(--r-lg);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-y;
  box-shadow:var(--shadow-md);
}
.service-carousel-viewport::-webkit-scrollbar{ display:none; }
.service-carousel.is-ready .service-carousel-viewport{ overflow:hidden; }
.service-carousel-track{
  display:flex;
  align-items:stretch;
  transition:transform .68s cubic-bezier(.22,.72,.22,1);
  will-change:transform;
}
.service-slide{
  flex:0 0 100%;
  min-width:0;
  min-height:438px;
  margin:0;
  scroll-snap-align:start;
}
.service-carousel .featured-service-card{
  margin-top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px, 6vw, 68px);
}
.service-carousel .featured-service-card .reco-tag{
  position:static;
  transform:none;
  align-self:flex-start;
  margin-bottom:16px;
}
.service-carousel .featured-service-card h3{
  max-width:900px;
  font-size:clamp(25px, 3vw, 36px);
  line-height:1.5;
}
.service-carousel .featured-service-card p{
  max-width:920px;
  font-size:18px;
}
.service-carousel .featured-service-card .btn-row{
  margin-top:0;
  padding-top:30px;
}
.service-carousel .plan{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, .9fr);
  grid-template-rows:auto auto 1fr auto;
  column-gap:clamp(36px, 6vw, 72px);
  padding:clamp(42px, 6vw, 66px);
  border-color:#E0E7FF;
  border-radius:var(--r-lg);
  background:
    radial-gradient(420px 260px at 8% 0%, rgba(99,102,241,.12), transparent 72%),
    #fff;
}
.service-carousel .plan::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:var(--grad);
}
.service-carousel .plan:hover{
  transform:none;
  box-shadow:var(--shadow-lg);
}
.service-carousel .plan h3{
  grid-column:1;
  grid-row:1;
  font-size:clamp(25px, 3vw, 34px);
  line-height:1.45;
}
.service-carousel .plan-for{
  grid-column:1;
  grid-row:2;
  min-height:0;
  margin-top:16px;
  font-size:18px;
}
.service-carousel .price{
  grid-column:1;
  grid-row:3 / 5;
  align-self:end;
  font-size:clamp(32px, 4vw, 48px);
}
.service-carousel .price small{
  display:block;
  margin-top:5px;
  font-size:18px;
}
.service-carousel .plan-list{
  grid-column:2;
  grid-row:1 / 4;
  margin:0 0 28px;
  justify-content:center;
}
.service-carousel .plan-list li{
  font-size:18px;
  line-height:1.9;
}
.service-carousel .plan > .btn{
  grid-column:2;
  grid-row:4;
  align-self:end;
}
.service-carousel-controls{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}
.service-carousel.is-ready .service-carousel-controls{ display:flex; }
.carousel-arrow,
.carousel-toggle,
.carousel-dots button{
  appearance:none;
  border:0;
  font-family:inherit;
  cursor:pointer;
}
.carousel-arrow{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:#fff;
  border:1.5px solid #D9DFEC;
  box-shadow:var(--shadow-xs);
  font-size:22px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.carousel-arrow:hover{
  transform:translateY(-2px);
  border-color:#A5B4FC;
  box-shadow:var(--shadow-sm);
}
.carousel-dots{
  min-height:48px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.carousel-dots button{
  position:relative;
  width:44px;
  height:44px;
  background:transparent;
}
.carousel-dots button::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  border-radius:999px;
  background:#A5AEC0;
  transform:translate(-50%,-50%);
  transition:width .22s ease, background .22s ease;
}
.carousel-dots button[aria-current="true"]::after{
  width:28px;
  background:var(--indigo-d);
}
.carousel-toggle{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-left:8px;
  padding:0 18px;
  border-radius:999px;
  color:var(--ink);
  background:#fff;
  border:1.5px solid #D9DFEC;
  box-shadow:var(--shadow-xs);
  font-size:18px;
  font-weight:700;
}
.carousel-toggle:hover{
  border-color:#A5B4FC;
  background:#F8FAFF;
}
.carousel-toggle-icon{
  color:var(--indigo-d);
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:900;
}
.service-carousel.is-paused .carousel-toggle-icon{ font-size:17px; }

/* 小画面用の固定相談導線 */
.mobile-contact-cta{
  display:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.mobile-contact-cta.is-suppressed{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
}

/* ---------- Lineup card ---------- */

.lineup-card{
  margin-top:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(28px, 4vw, 44px);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.lineup-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background:var(--grad);
}
.lineup-card p{
  font-size:18px;
  color:var(--muted);
  line-height:2.05;
  margin-bottom:16px;
}
.lineup-card p strong{ color:var(--ink); }
.lineup-card .btn-row{
  margin-top:24px;
  justify-content:flex-start;
}

/* ---------- FAQ ---------- */

.faq-list{
  margin-top:44px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faq{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.faq:hover{ border-color:#DDE3F3; box-shadow:var(--shadow-sm); }
.faq[open]{ box-shadow:var(--shadow-sm); }
.faq summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:21px 66px 21px 26px;
  font-size:18px;
  font-weight:700;
  line-height:1.7;
  transition:background .18s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:#FBFCFE; }
.faq summary::after{
  content:"+";
  position:absolute;
  right:22px; top:50%;
  translate:0 -50%;
  width:30px; height:30px;
  border-radius:10px;
  background:#EEF2FF;
  color:var(--indigo-d);
  font-family:"Inter",sans-serif;
  font-size:19px;
  font-weight:700;
  display:grid;
  place-items:center;
  line-height:1;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.faq[open] summary::after{
  transform:rotate(45deg);
  background:#E0E7FF;
  color:var(--indigo-d);
}
.faq .a{
  padding:4px 26px 24px;
  font-size:18px;
  color:var(--muted);
  line-height:2.05;
  border-top:1px dashed var(--line);
  margin:0 0 0;
  padding-top:18px;
}

/* ---------- CTA band ---------- */

.cta-band{
  position:relative;
  overflow:hidden;
  background:var(--grad-band);
  padding:104px 24px;
  text-align:center;
  color:#fff;
}
.cta-bg{ position:absolute; inset:0; pointer-events:none; }
.cta-blob-1{
  width:480px; height:480px;
  background:rgba(255,255,255,.16);
  top:-240px; left:-140px;
  animation:float 18s ease-in-out infinite alternate;
}
.cta-blob-2{
  width:520px; height:520px;
  background:rgba(56,189,248,.28);
  bottom:-280px; right:-160px;
  animation:float 21s ease-in-out infinite alternate-reverse;
}
.cta-inner{ position:relative; }
.cta-band .en{
  display:inline-block;
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.34em;
  color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:7px 20px 7px 24px;
  margin-bottom:22px;
}
.cta-title{
  font-size:clamp(28px, 4vw, 40px);
  font-weight:900;
  line-height:1.5;
  margin-bottom:14px;
}
.cta-sub{
  font-size:18px;
  color:rgba(255,255,255,.95);
  line-height:2;
  max-width:640px;
  margin:0 auto 34px;
}

/* ---------- Footer ---------- */

.site-footer{
  background:var(--ink);
  color:#94A3B8;
  position:relative;
}
.site-footer::before{
  content:"";
  display:block;
  height:3px;
  background:var(--grad);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr;
  gap:48px;
  padding:72px 0 56px;
}
.footer-brand{
  display:inline-block;
  font-size:19px;
  font-weight:800;
  color:#fff;
  letter-spacing:.02em;
  margin-bottom:14px;
}
.footer-nap{
  font-size:16.5px;
  line-height:2.1;
  color:#94A3B8;
}
.footer-col h2{
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.24em;
  color:#94A3B8;
  margin-bottom:18px;
}
.footer-col ul{
  display:flex;
  flex-direction:column;
  gap:4px;
}
/* 2026-08-31: 実測でフッターのリンクが高さ21.0pxしかなく、WCAG 2.2 の
   2.5.8 Target Size (Minimum) が求める24pxを下回っていた（下層8ページ共通）。
   読み手は40〜60代で手の震えを想定する層。
   実測（375px・/privacy/・修正前→修正後）:
     リンクの高さ   21.0px → 40.2px
     隣接リンクの間隔 44.2px → 50.2px（+6px）
     フッター全体   869px  → 917px （+48px）
   ⚠️ 当初「見た目の間隔を保ったまま当たり判定だけ広げる／21→27px」と書いたが、
      どちらも実測と違った（デポの指摘で訂正）。inline-block にしたぶん li の
      行ボックス下に余白が積まれ、フッターは実際に縦へ伸びる。害はないが、
      可視の変化として承知のうえで採っている。 */
.footer-col ul a{
  display:inline-block;
  padding:3px 0;
  font-size:18px;
  color:#C3CCDC;
  transition:color .18s ease;
}
.footer-col ul a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.copyright{
  border-top:1px solid rgba(255,255,255,.09);
  text-align:center;
  font-size:16px;
  letter-spacing:.06em;
  color:#94A3B8;
  padding:22px 24px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:1000px){
  .stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .promise-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:980px){
  .plan-grid{
    grid-template-columns:1fr;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
  /* モバイルでも情報の自然な読み順を維持する */
}

/* ---- hamburger nav ---- */
@media (max-width:880px){
  .nav-toggle-label{ display:inline-flex; }

  .global-nav{
    position:absolute;
    top:100%;
    left:0; right:0;
    background:rgba(255,255,255,.98);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px rgba(15,23,42,.12);
    visibility:hidden;
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav-toggle:checked ~ .global-nav{
    visibility:visible;
    opacity:1;
    transform:none;
  }
  .global-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 16px 18px;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }
  .global-nav a{
    display:block;
    padding:14px 14px;
    border-radius:var(--r-sm);
    font-size:18px;
    border-bottom:1px solid #F1F3F9;
  }
  .global-nav li:last-of-type a{ border-bottom:none; }
  .nav-cta a{
    margin:12px 0 0;
    text-align:center;
    border-bottom:none;
    box-shadow:var(--shadow-btn);
  }
}

@media (max-width:760px){
  .section{ padding:76px 0; }
  .hero{ padding:84px 0 96px; }
  .hero h1{ line-height:1.5; }
  .hero-lead{ font-size:18px; }
  .card-grid{ grid-template-columns:1fr; gap:16px; }
  .footer-grid{
    grid-template-columns:1fr;
    gap:36px;
    padding:56px 0 44px;
  }
  .deep-panel{ border-radius:var(--r-lg); }
  .offer{ padding:20px 20px; }
  .offer strong{ font-size:18px; }
  .featured-service-card{ padding:28px 24px 26px; }
  .btn-row .btn{ width:100%; }
  .btn-row.left .btn{ width:auto; }
  .cta-band{ padding:84px 20px; }
}

@media (max-width:560px){
  .stat-grid{ grid-template-columns:1fr; }
  .promise-grid{ grid-template-columns:1fr; }
  .logo-sub{ display:none; }
  .steps li{ padding:14px 16px 14px 58px; }
  .plan{ padding:30px 22px 24px; }
}

/* ============================================================
   下層ページ用コンポーネント（追加分）
   index.html の既存スタイルは一切変更せず、下層ページ
   （pricing / method / about / faq / contact / legal / privacy / guide）
   の全コンポーネントをここで新デザインに対応させる。
   コントラスト追加分（WCAG AA）:
   - 本文サブ #33415C / #FFF: 10.4:1, / #F7F9FC: 9.8:1
   - --good #15803D / #F0FDF4: 4.8:1
   - .req #BE185D / #FCE7F3: 5.6:1  - .opt #47536B / #EFF2F8: 7.2:1
   ============================================================ */

:root{
  --good:      #15803D;                       /* フォーム成功メッセージ等 */
  --ink-soft:  #33415C;                       /* 記事本文などのソフト本文色 */
  --font-mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Noto Sans JP",monospace;
}

/* ---------- 互換セーフティネット ----------
   旧マークアップが一部残っても崩壊しないための保険。
   index.html には影響しない（同値適用 or 非マッチ）。 */

/* brand: .brand-text なしで logo-main/logo-sub が直下にある場合も縦積みに */
.brand{ flex-wrap:wrap; }
.brand > .logo-sub{ flex-basis:100%; margin-top:-4px; }

/* 修飾なし .btn はグラデ主ボタンとして描画（buttonタグにも対応） */
button.btn{
  border:0;
  cursor:pointer;
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.btn:not(.btn-ghost):not(.btn-line):not(.btn-white):not(.line){
  background:var(--grad-btn);
  color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn:not(.btn-ghost):not(.btn-line):not(.btn-white):not(.line):hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(99,102,241,.44);
}

/* .btn.line は .btn-line の別名 */
.btn.line{
  background:#fff;
  color:var(--indigo-d);
  border:1.5px solid #C7D2FE;
  box-shadow:var(--shadow-xs);
}
.btn.line:hover{
  transform:translateY(-2px);
  background:#EEF2FF;
  border-color:#A5B4FC;
  box-shadow:var(--shadow-sm);
}

/* CTA帯の中では修飾なし .btn を白ボタンとして描画 */
.cta-band .btn:not(.btn-ghost):not(.btn-line):not(.line){
  background:#fff;
  color:var(--indigo-d);
  box-shadow:0 10px 28px rgba(8,12,40,.28);
}
.cta-band .btn:not(.btn-ghost):not(.btn-line):not(.line):hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(8,12,40,.34);
}

/* .section.tint は .section.alt の別名 */
.section.tint{ background:var(--bg-alt); }

/* footer: .footer-col なしの <div> 直下でも同スタイル */
.footer-grid > div h2{
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.24em;
  color:#94A3B8;
  margin-bottom:18px;
}
.footer-grid > div ul{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-grid > div ul a{
  font-size:18px;
  color:#C3CCDC;
  transition:color .18s ease;
}
.footer-grid > div ul a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Page head（下層ページヘッダ） ---------- */

.page-head{
  position:relative;
  overflow:hidden;
  padding:84px 0 62px;
  background:
    radial-gradient(640px 300px at 10% -8%, rgba(199,210,254,.55), transparent 66%),
    radial-gradient(560px 280px at 92% 4%, rgba(227,213,254,.5), transparent 66%),
    radial-gradient(480px 240px at 55% 118%, rgba(186,230,253,.4), transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.page-head::before{  /* ヒーローと同じ微細グリッド */
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(760px 380px at 50% 0%, #000 22%, transparent 78%);
  mask-image:radial-gradient(760px 380px at 50% 0%, #000 22%, transparent 78%);
  pointer-events:none;
}
.page-head .wrap{ position:relative; }
.page-head h1{
  margin:16px 0 0;
  font-size:clamp(29px, 4.4vw, 44px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:.005em;
}
.page-head .lead{
  margin-top:18px;
  max-width:860px;
}
.page-head .note{      /* 記事の公開日・執筆者行 */
  margin-top:12px;
  font-size:18px;
  color:var(--muted);
}

/* パンくず */
.breadcrumb{ font-size:16px; }
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:var(--muted);
}
.breadcrumb li{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.7;
}
.breadcrumb li + li::before{
  content:"/";
  color:#A9B2C5;
  font-family:"Inter",sans-serif;
}
.breadcrumb a{
  color:var(--muted);
  font-weight:600;
  transition:color .18s ease;
}
.breadcrumb a:hover{
  color:var(--indigo-d);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 下層見出し .h2 / .h3（span.sub＝アイブロウピル） ---------- */

.h2{
  font-size:clamp(23px, 3.4vw, 33px);
  font-weight:900;
  line-height:1.5;
  letter-spacing:.01em;
  margin-bottom:22px;
}
.section .h2:not(:first-child){ margin-top:60px; }
.h2 .sub{
  display:table;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.2em;
  color:#4338CA;
  background:#EEF2FF;
  border:1px solid #E0E7FF;
  border-radius:999px;
  padding:5px 14px 5px 16px;
  margin-bottom:14px;
}
.h3{
  font-size:19px;
  font-weight:800;
  line-height:1.65;
  margin:38px 0 14px;
}

/* ---------- Prose（本文タイポグラフィ）
   規約・記事などテキスト主体のセクションは <div class="wrap narrow prose">
   （幅広なら <div class="wrap prose">）にする。index.html では未使用。 ---------- */

.prose > p{
  margin:0 0 20px;
  font-size:18px;
  color:var(--ink-soft);
  line-height:2.1;
}
.prose > p strong{ color:var(--ink); }
.prose a:not(.btn){
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:#A5B4FC;
  /* 2026-08-28: /privacy/ のGoogleオプトアウトURLを素のリンク文字列で置いており、
     375pxで幅309px（枠327px）に対し21px はみ出して横スクロールが出ていた（本番でも同じ）。
     長いURLだけを折り返させる。日本語の本文は元から折り返すので影響しない。 */
  overflow-wrap:anywhere;
}
.prose a:not(.btn):hover{ text-decoration-color:var(--indigo-d); }

/* 箇条書き（グラデドット） */
.prose ul:not(.steps){
  margin:2px 0 24px;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.prose ul:not(.steps) > li{
  position:relative;
  padding-left:27px;
  font-size:18px;
  color:var(--ink-soft);
  line-height:2;
}
.prose ul:not(.steps) > li::before{
  content:"";
  position:absolute;
  left:4px; top:13px;
  width:9px; height:9px;
  border-radius:3.5px;
  background:#A5B4FC;
}
.prose ul:not(.steps) > li strong{ color:var(--ink); }

/* 番号付きリスト（steps以外） */
.prose ol:not(.steps){
  counter-reset:pli;
  margin:2px 0 24px;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.prose ol:not(.steps) > li{
  counter-increment:pli;
  position:relative;
  padding-left:36px;
  font-size:18px;
  color:var(--ink-soft);
  line-height:2;
}
.prose ol:not(.steps) > li::before{
  content:counter(pli);
  position:absolute;
  left:0; top:4px;
  width:24px; height:24px;
  border-radius:8px;
  background:#EEF2FF;
  color:#4338CA;
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:800;
  display:grid;
  place-items:center;
}

.prose .tbl-scroll{ margin:28px 0 32px; }
.prose .note{ margin-top:20px; }
.prose .btn-row{ margin-top:36px; }
.prose .faq{ margin-top:14px; }
.wrap > .faq{ margin-top:14px; }   /* faq-list なしで details が並ぶ場合の間隔 */

/* steps を明るい背景で使う場合（.prose 内は自動、単独なら .steps.on-light） */
.prose .steps li,
.steps.on-light li{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
  color:var(--ink-soft);
  font-size:18px;
}
.prose .steps li strong,
.steps.on-light li strong{ color:var(--ink); }
.prose .steps{ margin:26px 0 30px; }

/* ---------- 料金プラン詳細ブロック（/pricing/ 縦積みカード） ---------- */

.plan.plan-detail,
.wrap > .plan{ margin-bottom:26px; }

.plan-detail::before{   /* カード上辺グラデライン */
  content:"";
  position:absolute;
  top:0; left:26px; right:26px;
  height:3px;
  border-radius:0 0 3px 3px;
  background:var(--grad);
  opacity:.85;
}
.plan-detail.reco::before{ display:none; }  /* recoはグラデ枠なので二重装飾を避ける */
.plan-detail h3{
  font-size:19px;
  line-height:1.7;
}
.plan-detail .plan-for{ min-height:0; }
.plan-detail > ul{
  margin:20px 0 6px;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.plan-detail > ul li{
  position:relative;
  padding-left:32px;
  font-size:18px;
  line-height:1.95;
  color:var(--ink-soft);
}
.plan-detail > ul li::before{
  content:"";
  position:absolute;
  left:0; top:6px;
  width:20px; height:20px;
  border-radius:7px;
  background:#EEF2FF;
}
.plan-detail > ul li::after{
  content:"";
  position:absolute;
  left:5.5px; top:11.5px;
  width:9px; height:5px;
  border-left:2px solid var(--indigo-d);
  border-bottom:2px solid var(--indigo-d);
  transform:rotate(-45deg);
}
.plan-detail > ul li strong{ color:var(--ink); }
.plan-detail > p{
  margin-top:14px;
  font-size:18px;
  color:var(--ink-soft);
  line-height:2;
}
.plan-detail > p strong{ color:var(--ink); }
.plan-detail > .note{
  margin-top:14px;
  border-top:1px dashed var(--line);
  padding-top:14px;
}

/* 作業上限ピル */
.cap{
  display:inline-block;
  margin-top:14px;
  font-size:16.5px;
  font-weight:700;
  color:var(--indigo-d);
  background:#EEF2FF;
  border:1px solid #E0E7FF;
  border-radius:999px;
  padding:6px 16px;
  letter-spacing:.02em;
}

/* ---------- 提供条件ブロック（.zero-* ＝ .promise-* の別名） ---------- */

.zero-block{
  margin-top:36px;
  border:2px solid transparent;
  border-radius:var(--r-xl);
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad) border-box;
  box-shadow:var(--shadow-md);
  padding:clamp(30px, 4.5vw, 52px);
}
.zero-block > h3{
  text-align:center;
  font-size:21px;
  font-weight:900;
  margin-bottom:30px;
  letter-spacing:.02em;
}
.zero-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.zero-item{
  position:relative;
  background:var(--bg-alt);
  border:1px solid #EDF0F7;
  border-radius:var(--r-md);
  padding:20px 20px 18px 56px;
  font-size:18px;
  color:var(--muted);
  line-height:1.85;
  transition:transform .2s ease, box-shadow .2s ease;
}
.zero-item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
}
.zero-item b{
  display:block;
  font-size:18px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:4px;
  line-height:1.5;
}
.zero-item::before{
  content:"";
  position:absolute;
  left:18px; top:22px;
  width:26px; height:26px;
  border-radius:9px;
  background:#E0E7FF;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.zero-item::after{
  content:"";
  position:absolute;
  left:25px; top:29px;
  width:11px; height:6px;
  border-left:2.5px solid var(--indigo-d);
  border-bottom:2.5px solid var(--indigo-d);
  transform:rotate(-45deg);
}

/* ---------- テーブル追加（数値セル・見出しなし行） ---------- */

td.num, th.num{
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-variant-numeric:tabular-nums;
}
td.num{
  font-weight:600;
  color:var(--ink);
}
td.num strong{ color:var(--indigo-d); font-weight:800; }
tbody td strong{ color:var(--ink); }

/* ---------- ダークセクション（.section.deep — deep-panel の全幅版） ---------- */

.section.deep{
  position:relative;
  overflow:hidden;
  background:var(--deep-bg);
  color:var(--deep-text);
}
.section.deep .wrap{ position:relative; }
.section.deep h2,
.section.deep h3,
.section.deep .h2{ color:#fff; }
.section.deep .h2 .sub{
  color:#C7D2FE;
  background:rgba(199,210,254,.12);
  border-color:rgba(199,210,254,.28);
}
.section.deep p{
  font-size:18px;
  line-height:2.05;
  margin-bottom:18px;
}
.section.deep p strong{ color:#fff; }
.section.deep .note,
.section.deep .fine{
  color:var(--deep-muted);
  font-size:18px;
}
.section.deep a:not(.btn){
  color:#A5B4FC;
  text-decoration:underline;
  text-underline-offset:3px;
}
.section.deep :focus-visible{ outline-color:#A5B4FC; }
.section.deep .hl{ color:#FDE68A; font-weight:800; }
.section.deep .btn-row{ margin-top:30px; }

/* ---------- 特商法の定義テーブル（def-table: dl/dt/dd） ---------- */

.def-table{
  margin-top:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  position:relative;
}
.def-table::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--grad);
  opacity:.85;
}
.def-table dl{
  display:grid;
  grid-template-columns:218px 1fr;
}
.def-table dt{
  padding:19px 22px;
  background:var(--bg-alt);
  font-size:16.5px;
  font-weight:700;
  color:var(--ink);
  line-height:1.9;
  border-top:1px solid var(--line);
}
.def-table dd{
  padding:19px 26px;
  font-size:18px;
  color:var(--ink-soft);
  line-height:2;
  border-top:1px solid var(--line);
}
.def-table dt:first-of-type,
.def-table dt:first-of-type + dd{ border-top:none; }
.def-table dd a{
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- コード表示 pre.code ---------- */

pre.code{
  margin:26px 0 30px;
  padding:26px 28px;
  overflow-x:auto;
  background:var(--deep-bg);
  color:#D7E0F2;
  border:1px solid rgba(199,210,254,.16);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-mono);
  font-size:16.5px;
  line-height:1.95;
  -webkit-overflow-scrolling:touch;
}
pre.code code{ font-family:inherit; }

/* ---------- ガイド記事カード（一覧） ---------- */

.card-grid.guide-grid{
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.card.guide-card{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:var(--ink);
}
.guide-card img{
  width:100%;
  height:auto;
  aspect-ratio:1200 / 630;
  object-fit:cover;
  border-bottom:1px solid var(--line);
  transition:transform .35s ease;
}
.guide-card:hover img{ transform:scale(1.03); }
.guide-card h3,
.guide-card .gc-title{
  margin:22px 24px 10px;
  font-size:18px;
  line-height:1.75;
}
.guide-card p{
  margin:0 24px 24px;
  font-size:18px;
  line-height:1.95;
  flex:1;
}

/* ---------- 記事ヒーロー画像 ---------- */

.article-hero{
  margin:0 0 40px;
}
.article-hero img{
  width:100%;
  height:auto;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}

/* ---------- お問い合わせフォーム一式 ---------- */

.contact-form{
  margin-top:36px;
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  padding:clamp(26px, 4vw, 46px);
  display:flex;
  flex-direction:column;
  gap:22px;
  overflow:hidden;
}
.contact-form::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--grad);
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lbl{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
}
.req,
.opt{
  display:inline-block;
  font-size:16px;
  font-weight:800;
  letter-spacing:.06em;
  border-radius:999px;
  padding:2.5px 10px;
  line-height:1.6;
}
.req{ color:#BE185D; background:#FCE7F3; }
.opt{ color:#47536B; background:#EFF2F8; }

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:inherit;
  font-size:18px;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg-alt);
  border:1.5px solid #7A8496;
  border-radius:12px;
  padding:13px 16px;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:#B9C4DC; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  background:#fff;
  border-color:var(--indigo-d);
  box-shadow:0 0 0 4px rgba(99,102,241,.16);
}
.field input::placeholder,
.field textarea::placeholder{ color:#64748B; }
.field textarea{
  min-height:180px;
  resize:vertical;
}
.field select{
  cursor:pointer;
}
.hint{
  font-size:18px;
  color:var(--muted);
  line-height:1.8;
}
.submit-row{
  margin-top:4px;
}
.submit-row .btn{ width:100%; }
.form-done{
  font-size:18px;
  background:#F0FDF4;
  border:1px solid #BBF7D0;
  border-radius:12px;
  padding:14px 18px;
  line-height:1.9;
}
.form-note{
  font-size:18px;
  color:var(--muted);
  line-height:1.95;
}
.form-note a{
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* 連絡手段カード */
.contact-methods{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.contact-method{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  padding:22px 24px;
  font-size:18px;
  color:var(--muted);
  line-height:2;
  overflow-wrap:anywhere;
}
.contact-method b{
  display:block;
  font-size:18px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:6px;
}
.contact-method a{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- CTA帯（簡易マークアップ互換: 直下に en / p / p.sub / .btn） ---------- */

.cta-band > .en,
.cta-band > p,
.cta-band > .btn{ position:relative; }
.cta-band > .en{ display:inline-block; }
.cta-band > p{
  font-size:clamp(28px, 4vw, 40px);
  font-weight:900;
  line-height:1.5;
  margin-bottom:14px;
}
.cta-band > p.sub{
  font-size:18px;
  font-weight:400;
  color:rgba(255,255,255,.95);
  line-height:2;
  max-width:640px;
  margin:0 auto 34px;
}

/* ---------- バッジ（.card 内の .num 等） ---------- */

.card .num{
  display:inline-block;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.08em;
  color:#4338CA;
  background:#EEF2FF;
  border:1px solid #E0E7FF;
  border-radius:999px;
  padding:5px 14px;
}

/* ============================================================
   Responsive（追加分）
   ============================================================ */

@media (max-width:1000px){
  .zero-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:760px){
  .hero h1{ font-size:clamp(32px, 8.8vw, 46px); }
  .mobile-break{ display:block; }
  .lead{ font-size:18px; }
  .sec-head h2{ font-size:clamp(28px, 7.6vw, 38px); }
  .service-carousel{ margin-top:42px; }
  .service-slide{ min-height:600px; }
  .service-carousel .featured-service-card{
    justify-content:flex-start;
    padding:38px 26px 32px;
  }
  .service-carousel .featured-service-card h3{ font-size:26px; }
  .service-carousel .featured-service-card p{ font-size:18px; }
  .service-carousel .featured-service-card .btn-row{
    margin-top:auto;
    padding-top:24px;
  }
  .service-carousel .featured-service-card .btn-row .btn{ width:100%; }
  .service-carousel .plan{
    display:flex;
    flex-direction:column;
    padding:38px 26px 30px;
  }
  .service-carousel .plan h3{ font-size:26px; }
  .service-carousel .plan-for{ font-size:18px; }
  .service-carousel .price{
    align-self:flex-start;
    margin-top:20px;
    font-size:34px;
  }
  .service-carousel .plan-list{
    flex:1;
    margin:24px 0 28px;
    justify-content:flex-start;
  }
  .service-carousel-controls{
    flex-wrap:wrap;
    row-gap:6px;
  }
  .carousel-toggle{
    flex:0 0 156px;
    margin-left:0;
  }
  .mobile-contact-cta{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:90;
    min-width:116px;
    min-height:52px;
    padding:0 22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--grad-btn);
    box-shadow:0 12px 32px rgba(79,70,229,.42);
    font-size:18px;
    font-weight:800;
  }
  .page-head{ padding:64px 0 48px; }
  .contact-methods{ grid-template-columns:1fr; }
  .plan-detail{ padding:30px 22px 26px; }
  .def-table dl{ grid-template-columns:1fr; }
  .def-table dt{
    padding:16px 20px 0;
    background:transparent;
    border-top:1px solid var(--line);
    color:var(--indigo-d);
    font-size:16px;
    letter-spacing:.04em;
  }
  .def-table dd{
    border-top:none;
    padding:6px 20px 18px;
  }
  .def-table dt:first-of-type{ border-top:none; }
  pre.code{ padding:20px 20px; font-size:16px; }
  .guide-card h3, .guide-card .gc-title{ margin:20px 20px 8px; }
  .guide-card p{ margin:0 20px 20px; }
}

@media (max-width:560px){
  .service-slide{ min-height:660px; }
  .service-carousel .featured-service-card{ min-height:660px; }
  .zero-grid{ grid-template-columns:1fr; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .service-carousel-track{ transition:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   V6: お問い合わせフォームの作り直し（2026-08-12 しょう指摘）
   指摘: 「すごくAIっぽくてダサい」「前回の入力内容を復元しましたが特にダサい」
         「Y&Aのフォームの枠の区切りかたがとても良い」
   方針: ①8項目を3つのグループに区切る（Y&Aの"ゾーニング"を採る。電話・LINEは対象外）
         ②必須/任意のピル型バッジ8個をやめ、記号と小さな文字に置き換える
         ③下書き復元をシステム警告風の水色ボックスから、フォーム内の静かな一行へ
         ④インラインstyleで散っていた色をデザイントークンへ寄せる
         ⑤タップ領域を44px以上にする（実測: 復元ボタンが114×29pxだった）
   ============================================================ */

/* --- フォーム全体の器。外枠は線を持たず影で浮かせ、中のグループが"枠"を担う --- */
.contact-form{
  border:0;
  box-shadow:var(--shadow-md);
  border-radius:var(--r-lg);
  padding:clamp(20px, 5vw, 34px);
  overflow:hidden;
}
.contact-form::before{ height:4px; background:var(--grad); }

/* --- 下書き復元バー。警告ではなく事実の告知として静かに置く --- */
.form-draft{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 16px;
  margin:0 0 22px;
  padding:14px 16px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-left:3px solid var(--indigo);
  border-radius:var(--r-sm);
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
}
.form-draft-text{ flex:1 1 auto; min-width:0; }
.form-draft-text small{
  display:block;
  margin-top:2px;
  font-size:16px;
  color:var(--muted);
}
.form-draft-clear{
  flex:0 0 auto;
  min-height:44px;              /* 実測で114×29pxだったため44pxを確保 */
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  color:var(--indigo-d);
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.form-draft-clear:hover{ border-color:var(--indigo); }
.form-draft-clear:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

/* --- 必須の凡例。バッジ8個の代わりに1行で説明する --- */
.form-required-note{
  margin:0 0 18px;
  font-size:16px;
  color:var(--muted);
}
/* .form-required-note i は参照元の <i>✳︎</i> を削除済みのため削除 */

/* --- 3つのグループ。ここが「枠の区切り」の本体 --- */
.form-group{ border:0; padding:0; margin:0; min-width:0; }
.form-group + .form-group{ margin-top:16px; }
.form-group-head{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  padding:13px clamp(14px, 3.6vw, 18px);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:18px;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--ink);
}
.form-group-num{
  flex:0 0 auto;
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.1em;
  color:#fff;
  background:var(--grad-btn);
  padding:4px 8px;
  border-radius:6px;
}
.form-group-note{
  flex:1 1 100%;
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0;
}
.form-group-body{
  display:grid;
  gap:20px;
  padding:clamp(18px, 4.4vw, 22px) clamp(14px, 3.6vw, 18px);
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 var(--r-sm) var(--r-sm);
}

/* --- ラベル。ピル型バッジをやめ、記号と小さな文字にする --- */
.lbl{ gap:0; align-items:baseline; }
/* 旧 .req-mark は後方の定義が全プロパティを上書きするため削除 */
.opt-mark{
  margin-left:8px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted);
}

/* --- 送信ボタン。Y&Aと同じく幅いっぱいで、直下に約束を一行 --- */
.contact-form .submit-row{ margin-top:22px; }
.contact-form .submit-row .btn{
  width:100%;
  justify-content:center;
  min-height:58px;
  font-size:18px;
}
.form-submit-note{
  margin:12px 0 0;
  text-align:center;
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
}

/* --- 送信完了パネル。インラインstyleからトークンへ寄せる --- */
.form-complete-card{
  background:linear-gradient(160deg, #F1FAF4, #EAF6EF);
  border:1px solid #A7D8BA;
  border-radius:var(--r-lg);
  padding:clamp(24px, 6vw, 34px) clamp(20px, 5vw, 28px);
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.form-complete-mark{
  width:56px; height:56px;
  margin:0 auto 14px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--good);
  color:#fff;
  font-size:28px;
  line-height:1;
}
.form-complete-card h3{
  margin:0 0 8px;
  font-size:clamp(19px, 4.6vw, 23px);
  font-weight:800;
  color:#0E5C2F;
}
.form-complete-card p{ margin:0; font-size:18px; line-height:1.8; }
.form-complete-card .fine{ margin-top:14px; font-size:18px; color:var(--muted); }
.form-echo-card{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(16px, 4vw, 22px);
  background:#fff;
}
.form-echo-card > b{ display:block; font-size:18px; margin-bottom:12px; letter-spacing:.02em; }
#formEcho{ margin:0; font-size:18px; line-height:1.85; }
#formEcho dt{ font-weight:700; color:var(--muted); font-size:16px; letter-spacing:.02em; }
#formEcho dd{ margin:2px 0 12px; }
.form-echo-card .fine{ margin:14px 0 0; font-size:18px; color:var(--muted); }
#formAgain{
  min-height:44px;
  padding:0 20px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
}
#formAgain:hover{ border-color:var(--indigo); color:var(--indigo-d); }

/* --- 375pxでの詰め。グループ見出しは注記を2行目へ落とす --- */
@media (max-width: 420px){
  .form-draft{ flex-direction:column; align-items:stretch; }
  .form-draft-clear{ width:100%; }
  .form-group-head{ flex-wrap:wrap; }
}
.echo-empty{ color:var(--muted); }
/* V6追補: 見出しの注記が同じ行に入るとタイトルが折れるため、常に2行目へ落とす
   （実測: 542px幅で「ご連絡先」が「ご連絡／先」に折れた） */
.form-group-head{ flex-wrap:wrap; row-gap:4px; }
.form-group-title{ flex:0 1 auto; }
.form-group-note{ flex:1 1 100%; }

/* V6.1: 必須項目を赤字で明示（2026-08-13 しょう指摘「必須項目を赤くするなどして目立たせて」）
   記号（✳︎）ではなく「必須」の文字にする。40〜60代には記号より文字のほうが直感的。
   ただし背景色つきのピル型バッジには戻さない（V6で「AIっぽくてダサい」と指摘された形）。
   色は #B00020（白地に対して7.3:1。本文と同じ7:1以上の基準を満たす）。 */
.req-mark{
  margin-left:8px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.04em;
  color:#B00020;
}
.form-required-note b{ color:#B00020; font-weight:800; }

/* V6.4: 検証で出た2件（2026-08-14）
   ① 375pxで「そのほか伝えておきたいこと」ラベルが261.4px＞使用可能257pxとなり、
      .lbl が flex/nowrap のため1文字が2行目へ落ち、同時に「任意」が縦2文字に割れていた。
      文言は変えず、折り返しを許可しつつマーク側は絶対に割らせない。
   ② .req-mark / .opt-mark は今後ラベルが伸びても縦に割れてはいけない。 */
.lbl{ flex-wrap:wrap; }
.req-mark, .opt-mark{ white-space:nowrap; flex:0 0 auto; }