@charset "utf-8";
/* =========================================================================
   contact.css — お問い合わせ（/contact/）3画面共通スタイル
   入力 / 確認 / 完了 を1ファイルで。共通（ヘッダー/フッター/パンくず/色変数/
   タイポ/基準線）は common.css。背景帯は全幅、内側コンテンツは基準線に揃える。
   ========================================================================= */

/* ============ ページヒーロー（生成り） ============ */
.phero{ position:relative; background:var(--cream); color:#000; padding:80px 0 60px; border-bottom:2px solid #000; overflow:hidden }
.phero-inner{ position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1.5fr .9fr; gap:32px; align-items:end }
.phero-text{ padding-top:24px; z-index:2 }
.phero-text .eyebrow{ color:var(--red); opacity:1 }
.phero-text h1{ font-family:var(--jp); font-weight:900; font-size:clamp(60px,8.5vw,140px); line-height:.9; letter-spacing:-0.04em; margin:24px 0 16px; text-wrap:balance; color:#000 }
.phero-text h1 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.3em; opacity:.4 }
.phero-text p{ font-size:17px; line-height:1.85; max-width:42ch; margin:0; opacity:.85 }
.phero-mascot{ display:flex; justify-content:center; align-items:flex-end; position:relative; z-index:2 }
.phero-mascot img{ height:380px; width:auto; filter:drop-shadow(0 12px 0 rgba(0,0,0,0.15)) }

/* ============ ステップ表示 ============ */
.steps-wrap{ background:#000; color:#fff; padding:24px 0; border-bottom:2px solid #000 }
.steps{ width:min(1100px, calc(100% - 2 * var(--gutter))); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; align-items:stretch }
.step{ display:flex; align-items:center; gap:18px; padding:14px 18px; position:relative; color:rgba(255,255,255,0.45); transition:color .2s }
.step::after{ content:""; position:absolute; right:-1px; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.18) }
.step:last-child::after{ display:none }
.step.is-active{ color:#fff }
/* 完了済みステップ（is-done）はbaseのグレーを維持。文字は白にしない（design-source準拠）＝番号のみ赤✓ */
.step .step-no{ font-family:var(--en); font-weight:900; font-size:40px; line-height:.85; letter-spacing:-0.02em; color:var(--red); transition:color .2s }
.step .step-no.is-dim{ color:rgba(255,255,255,0.25) }
.step .step-info{ display:flex; flex-direction:column; gap:2px; line-height:1.2 }
.step .step-info .step-en{ font-family:var(--en); font-weight:800; font-size:11px; letter-spacing:.18em; opacity:.7 }
.step .step-info .step-jp{ font-family:var(--jp); font-weight:900; font-size:18px; letter-spacing:-0.01em }
.step.is-done .step-no{ font-size:0 }
.step.is-done .step-no::before{ content:"✓"; color:var(--red); font-family:var(--en); font-weight:900; font-size:36px }

/* ============ 電話CTA ============ */
.tel-cta{ background:var(--cream); color:#000; padding:80px 0; border-bottom:2px solid #000 }
.tel-cta-inner{ width:min(1100px, calc(100% - 2 * var(--gutter))); margin-inline:auto; display:grid; grid-template-columns:auto 1fr auto; gap:48px; align-items:center; border:2px solid #000; background:#fff; padding:36px 48px; box-shadow:10px 10px 0 var(--red) }
.tel-cta .tag{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--red); font-weight:700; text-transform:uppercase; display:flex; flex-direction:column; gap:4px }
.tel-cta .tag strong{ font-family:var(--jp); font-weight:900; font-size:24px; color:#000; letter-spacing:-0.02em; line-height:1; text-transform:none }
.tel-cta a.tel-big{ font-family:var(--en); font-weight:900; font-size:clamp(48px,7vw,108px); letter-spacing:-0.02em; line-height:.9; color:#000; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; transition:color .15s }
.tel-cta a.tel-big:hover{ color:var(--red) }
.tel-cta a.tel-big small{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; opacity:.55; font-weight:400 }
.tel-cta .hours{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; line-height:1.7; opacity:.7; text-align:right; white-space:nowrap }
.tel-cta .hours strong{ font-family:var(--jp); font-weight:900; font-size:18px; color:#000; letter-spacing:-0.01em; opacity:1; display:block; margin-bottom:4px }
.tel-cta .hours .ht, .tel-cta .hours .ho{ display:block }

/* ============ フォーム本体 ============ */
.form-sec{ background:#fff; color:#000; padding:140px 0; border-bottom:2px solid #000; position:relative; overflow:hidden }
.form-sec .bg-watermark{ position:absolute; right:-3%; bottom:-7%; z-index:0; font-family:var(--en); font-weight:900; font-size:clamp(220px,28vw,460px); color:rgba(0,0,0,0.04); line-height:.85; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
.form-shell{ width:min(1100px, calc(100% - 2 * var(--gutter))); margin-inline:auto; position:relative; z-index:1 }
.form-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:48px; flex-wrap:wrap }
.form-head .eyebrow{ color:var(--red); opacity:1 }
.form-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,4.4vw,64px); line-height:1.05; letter-spacing:-0.03em; margin:12px 0 0 }
.form-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.6em; margin-right:.4em; opacity:.4 }
.ssl-badge{ display:inline-flex; align-items:center; gap:14px; border:2px solid #000; padding:12px 20px; background:var(--cream); font-family:var(--mono); font-size:11px; letter-spacing:.12em }
.ssl-badge .lock{ font-family:var(--en); font-weight:900; font-size:20px; color:var(--red); line-height:1 }
.ssl-badge strong{ font-family:var(--jp); font-weight:900; font-size:13px; letter-spacing:-0.01em; color:#000; text-transform:none }
.ssl-badge .meta{ display:flex; flex-direction:column; gap:2px; line-height:1.25 }

/* エラーサマリ */
.form-errors{ background:#fff; border:2px solid var(--red); box-shadow:6px 6px 0 var(--red); padding:22px 26px; margin-bottom:36px }
.form-errors .ttl{ display:block; font-family:var(--jp); font-weight:900; color:var(--red); margin-bottom:10px }
.form-errors ul{ margin:0; padding-left:1.3em; font-size:14px; line-height:1.9 }

/* フォーム項目 */
.form-grid{ display:grid; grid-template-columns:1fr; gap:0; border-top:2px solid #000 }
.field{ display:grid; grid-template-columns:240px 1fr; gap:0; border-bottom:2px solid #000; padding:0 }
.field-label{ display:flex; align-items:flex-start; gap:10px; background:transparent; border-right:2px solid #000; padding:28px 28px 28px 8px }
.field-label .l-en{ font-family:var(--en); font-weight:900; font-size:12px; letter-spacing:.18em; color:var(--red); text-transform:uppercase; flex-shrink:0; margin-top:6px }
.field-label .l-text{ display:flex; flex-direction:column; gap:6px }
.field-label .l-jp{ font-family:var(--jp); font-weight:900; font-size:17px; letter-spacing:-0.01em; line-height:1.4 }
.required-tag{ display:inline-block; font-family:var(--en); font-weight:800; font-size:11px; letter-spacing:.12em; background:var(--red); color:#fff; padding:3px 8px; align-self:flex-start; line-height:1 }
.optional-tag{ display:inline-block; font-family:var(--en); font-weight:800; font-size:11px; letter-spacing:.12em; background:transparent; color:#000; border:1.5px solid #000; padding:2px 8px; align-self:flex-start; line-height:1; opacity:.65 }
.field-input{ padding:28px 0 28px 28px; display:flex; flex-direction:column; gap:8px }
.field-help{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; opacity:.55; margin-top:4px }
.field-error{ color:var(--red); font-family:var(--jp); font-weight:700; font-size:13px; margin-top:2px }

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="tel"],
.form-grid input[type="url"],
.form-grid select,
.form-grid textarea{
  width:100%; font-family:var(--jp); font-size:16px; line-height:1.6;
  padding:14px 16px; background:#fff; color:#000;
  border:2px solid #000; border-radius:0;
  transition:background .15s ease,box-shadow .15s ease,border-color .15s ease;
  -webkit-appearance:none; appearance:none;
}
.form-grid textarea{ min-height:180px; resize:vertical; font-family:var(--jp) }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{ outline:none; background:var(--cream); box-shadow:5px 5px 0 var(--red) }
.form-grid input::placeholder,.form-grid textarea::placeholder{ color:#999; font-family:var(--jp) }
.form-grid select{
  background-image:linear-gradient(45deg,transparent 50%,#000 50%),linear-gradient(135deg,#000 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  padding-right:48px; cursor:pointer;
}
.field.is-error input,.field.is-error select,.field.is-error textarea{ border-color:var(--red); background:#fff5f6 }

/* ハニーポット（人間には不可視。ボット対策） */
.hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden }

/* プライバシー同意 */
.privacy{ margin-top:32px; padding:24px 28px; background:var(--cream); border:2px solid #000 }
.privacy .required-tag{ margin-bottom:14px }
.privacy.is-error{ border-color:var(--red); background:#fff5f6 }
.privacy label{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; font-size:14px; line-height:1.7 }
.privacy input[type="checkbox"]{ width:22px; height:22px; border:2px solid #000; accent-color:var(--red); cursor:pointer; flex-shrink:0; margin-top:2px }
.privacy a{ font-weight:700; border-bottom:2px solid var(--red); padding-bottom:1px }

/* 送信ボタン */
.submit-area{ margin-top:48px; display:flex; justify-content:center; gap:24px; align-items:center; flex-wrap:wrap }
.submit-area .submit-note{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; opacity:.55; text-align:center; width:100%; margin-bottom:8px }
.btn-primary{
  display:inline-flex; align-items:center; gap:18px;
  background:var(--red); color:#fff;
  font-family:var(--jp); font-weight:900; font-size:22px; letter-spacing:-0.01em;
  padding:24px 56px; border:2px solid #000; box-shadow:8px 8px 0 #000;
  cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.btn-primary .arrow{ font-family:var(--en); font-weight:800; font-size:24px; transition:transform .25s }
.btn-primary:hover{ background:#000; color:#fff; transform:translate(3px,3px); box-shadow:4px 4px 0 var(--red) }
.btn-primary:hover .arrow{ transform:translateX(8px) }
.btn-primary:active{ transform:translate(8px,8px); box-shadow:0 0 0 var(--red) }
.btn-secondary{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#000;
  font-family:var(--jp); font-weight:700; font-size:13px; letter-spacing:.02em;
  padding:8px 0; border:none; border-bottom:1.5px solid #000;
  cursor:pointer; transition:color .15s ease,border-color .15s ease;
}
.btn-secondary:hover{ color:var(--red); border-bottom-color:var(--red) }
.btn-secondary .arrow{ font-family:var(--en); font-weight:800 }

/* ============ 確認画面 ============ */
.confirm-sec{ background:var(--cream); color:#000; padding:140px 0; border-bottom:2px solid #000; position:relative; overflow:hidden }
.confirm-bg{ position:absolute; right:-3%; bottom:-15%; font-family:var(--en); font-weight:900; font-size:clamp(220px,28vw,460px); color:rgba(0,0,0,0.05); line-height:.85; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
.confirm-shell{ width:min(1100px, calc(100% - 2 * var(--gutter))); margin-inline:auto; position:relative }
.confirm-head{ margin-bottom:40px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap }
.confirm-head .eyebrow{ color:var(--red); opacity:1 }
.confirm-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,4.4vw,64px); line-height:1.05; letter-spacing:-0.03em; margin:12px 0 0 }
.confirm-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.6em; margin-right:.4em; opacity:.4 }
.confirm-head .note{ font-family:var(--jp); font-weight:500; font-size:15px; line-height:1.85; opacity:.85; max-width:36ch }
.confirm-head .note strong{ font-weight:900; background:linear-gradient(transparent 60%, rgba(248,39,79,0.3) 60%, rgba(248,39,79,0.3) 92%, transparent 92%); padding:0 .04em }
.confirm-list{ background:#fff; border:2px solid #000; display:grid; grid-template-columns:1fr; gap:0 }
.crow{ display:grid; grid-template-columns:240px 1fr; gap:0; border-bottom:2px solid #000 }
.crow:last-child{ border-bottom:none }
.crow .ck{ padding:24px 28px; border-right:2px solid #000; display:flex; align-items:flex-start; gap:10px; background:transparent }
.crow .ck .l-en{ font-family:var(--en); font-weight:900; font-size:12px; letter-spacing:.18em; color:var(--red); text-transform:uppercase; flex-shrink:0; margin-top:4px }
.crow .ck .l-jp{ font-family:var(--jp); font-weight:900; font-size:17px; letter-spacing:-0.01em; line-height:1.4 }
.crow .cv{ padding:24px 32px; display:flex; flex-direction:column; gap:6px; font-size:16px; line-height:1.85; word-break:break-word }
.crow .cv .empty{ color:#999; font-family:var(--mono); font-size:12px; letter-spacing:.06em }
.crow .cv.comment{ white-space:pre-wrap }
.confirm-actions{ margin-top:64px; display:flex; flex-direction:column; align-items:center; gap:16px }
.confirm-actions .send-note{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; opacity:.55; text-align:center; margin-top:4px }
.confirm-actions .back-side{ margin-top:16px }
.confirm-actions .btn-primary{ font-size:28px; padding:28px 80px; box-shadow:10px 10px 0 #000 }
.confirm-actions .btn-primary:hover{ box-shadow:5px 5px 0 var(--red) }

/* ============ 完了画面 ============ */
.complete{ background:var(--red); color:#fff; padding:140px 0; border-bottom:2px solid #000; position:relative; overflow:hidden }
.complete-bg{ position:absolute; right:-3%; bottom:-15%; font-family:var(--en); font-weight:900; font-size:clamp(260px,32vw,540px); color:rgba(0,0,0,0.14); line-height:.85; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
.complete-inner{ width:min(1000px, calc(100% - 2 * var(--gutter))); margin-inline:auto; position:relative; text-align:center }
.check-mark{ display:inline-flex; align-items:center; justify-content:center; width:120px; height:120px; border-radius:50%; background:#fff; color:var(--red); font-family:var(--en); font-weight:900; font-size:80px; line-height:1; border:4px solid #000; box-shadow:8px 8px 0 #000; margin-bottom:48px }
.complete h2{ font-family:var(--jp); font-weight:900; font-size:clamp(40px,5.4vw,84px); line-height:1.05; letter-spacing:-0.04em; margin:0 0 32px; text-wrap:balance; text-shadow:6px 6px 0 #000 }
.complete h2 .en{ font-family:var(--en); font-weight:900; display:block; font-size:.4em; letter-spacing:.02em; color:#fff; text-shadow:4px 4px 0 #000; margin-bottom:.2em; opacity:.95 }
.complete .lead{ font-family:var(--jp); font-weight:500; font-size:clamp(16px,1.5vw,20px); line-height:1.95; margin:0 auto; max-width:48ch }
.complete-meta{ margin-top:48px; display:inline-flex; gap:32px; flex-wrap:wrap; justify-content:center; font-family:var(--mono); font-size:12px; letter-spacing:.12em; opacity:.85; padding:18px 32px; border:2px solid #000; background:rgba(0,0,0,0.25) }
.complete-meta strong{ font-family:var(--en); font-weight:900; font-size:14px; letter-spacing:.18em; color:#fff; opacity:1 }

/* 完了：続いて見る */
.nextpages{ background:#fff; color:#000; padding:140px 0; border-bottom:2px solid #000 }
.nextpages-head{ width:min(1300px, calc(100% - 2 * var(--gutter))); margin:0 auto 56px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap }
.nextpages-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,4.4vw,64px); line-height:1.05; letter-spacing:-0.03em; margin:12px 0 0 }
.nextpages-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.6em; margin-right:.4em; opacity:.4 }
.nextpages-head p{ font-family:var(--jp); font-weight:500; font-size:15px; line-height:1.85; opacity:.75; max-width:32ch }
.nextpages-grid{ width:min(1300px, calc(100% - 2 * var(--gutter))); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0; border:2px solid #000 }
.next-tile{ padding:48px 36px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; border-right:2px solid #000; min-height:340px; transition:background .2s ease,color .2s ease,transform .15s ease; position:relative; overflow:hidden }
.next-tile:last-child{ border-right:none }
.next-tile .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; opacity:.6 }
.next-tile h3{ font-family:var(--jp); font-weight:900; font-size:clamp(22px,2vw,32px); line-height:1.15; letter-spacing:-0.025em; margin:14px 0 0; text-wrap:balance }
.next-tile .en-big{ font-family:var(--en); font-weight:900; font-size:clamp(40px,4vw,64px); line-height:.85; letter-spacing:-0.03em; opacity:.18; position:absolute; right:24px; bottom:20px }
.next-tile .more{ display:inline-flex; align-items:center; gap:10px; font-family:var(--en); font-weight:800; font-size:13px; letter-spacing:.15em; opacity:.8; transition:opacity .2s,transform .25s,color .2s }
.next-tile .more .arrow{ transition:transform .25s }
.next-tile:hover{ transform:translate(-3px,-3px) }
.next-tile:hover .more{ opacity:1; color:var(--red) }
.next-tile:hover .more .arrow{ transform:translateX(8px) }
.next-tile.tile-home{ background:var(--cream); color:#000 }
.next-tile.tile-card{ background:#000; color:#fff }
.next-tile.tile-card .en-big{ color:rgba(248,39,79,0.4); opacity:1 }
.next-tile.tile-seo{ background:var(--cream); color:#000 }
.next-tile.tile-seo .en-big{ color:rgba(0,0,0,0.15); opacity:1 }
.next-tile.tile-aiqoo{ background:var(--red); color:#fff }
.next-tile.tile-aiqoo .en-big{ color:rgba(0,0,0,0.25); opacity:1 }
.next-tile.tile-aiqoo .tag{ opacity:.95 }
.next-tile.tile-card:hover .more{ color:#fff }
.next-tile.tile-aiqoo:hover .more{ color:#000 }

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width:960px){
  .phero{ padding:48px 0 40px }
  .phero-inner{ grid-template-columns:1fr; gap:24px }
  .phero-text{ padding-top:8px }
  /* SP：見出しは text-wrap:balance（左右均等割り）を解除し画面幅で素直に折り返す。font-sizeはdesign-source準拠の54px。enは独立行 */
  .phero-text h1{ font-size:54px; line-height:.95; text-wrap:wrap }
  .phero-text h1 .en{ display:block; margin-right:0; font-size:30px }
  .phero-text h1 br{ display:none }
  /* SP：PC基本のmax-width:42chを解除し、ヒーロー文章を画面幅で自然に折り返す */
  .phero-text p{ max-width:none }
  .phero-mascot{ justify-content:center }
  .phero-mascot img{ height:220px }

  .steps-wrap{ padding:16px 0 }
  /* SP：3カラム横並び＋区切り線を維持（縦積みにしない） */
  .steps{ grid-template-columns:1fr 1fr 1fr; gap:0 }
  .step{ gap:6px; padding:10px 12px }
  .step .step-no{ font-size:26px }
  .step .step-info .step-en{ font-size:9px }
  .step .step-info .step-jp{ font-size:14px }

  .tel-cta{ padding:56px 0 }
  .tel-cta-inner{ grid-template-columns:1fr; gap:24px; padding:24px; text-align:center }
  .tel-cta .tag{ align-items:center }
  /* SP：「お電話でお問い合わせ」は1行（PCの改行を解除） */
  .tel-cta .tag strong br{ display:none }
  .tel-cta .tag strong{ white-space:nowrap }
  .tel-cta .hours{ text-align:center }
  /* SP：受付時間と土日祝定休を1行に。間はスラッシュ区切り（各々は折り返さない） */
  .tel-cta .hours .ht, .tel-cta .hours .ho{ display:inline }
  .tel-cta .hours .ho::before{ content:"／"; margin:0 .35em }

  .form-sec{ padding:64px 0 }
  .form-head h2{ font-size:34px }
  /* SP：「Form /」を上段、「フォームでお問い合わせ」を下段に（縦並び）。強制改行は解除し画面幅で自然折り返し */
  .form-head h2 .en{ display:block; margin-right:0 }
  .form-head h2 br{ display:none }
  /* SP：SSLバナーと最初の項目（区切り線）の間の余白を詰める */
  .form-head{ margin-bottom:24px }
  .ssl-badge .lock{ font-size:18px }
  .field{ grid-template-columns:1fr }
  /* SP：ラベル/入力欄の padding を design-source に一致（点線は元デザインに無いので削除）。
     field-label:20px 4px 0 ／ field-input:14px 4px 24px（入力欄は左右に僅か4px） */
  .field-label{ border-right:none; border-bottom:none; padding:20px 4px 0; align-items:flex-start }
  .field-label .l-en{ margin-top:4px }
  .field-label .l-text{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap }
  .field-label .required-tag, .field-label .optional-tag{ align-self:center }
  .field-input{ padding:14px 4px 24px }
  /* SP：SSLバナーと最初の項目の間にも区切り線（上罫）を出す（旧:first-child誤指定の修正） */
  .form-grid{ border-top:2px solid #000 }
  /* SP：FORM. 透かしを下部に見切れ表示（base の bottom:-15% は背高フォームで画面外へ消えるため px 指定で復活） */
  .form-sec .bg-watermark{ right:-3%; bottom:-24px; font-size:clamp(110px,38vw,220px) }
  /* SP：確認ボタンは入力欄と同じ全幅に */
  .submit-area{ margin-top:36px }
  .submit-area .btn-primary{ width:100%; justify-content:center }
  .btn-primary{ font-size:20px; padding:20px 36px }
  .btn-primary .arrow{ font-size:22px }

  .confirm-sec{ padding:64px 0 }
  /* SP：CONFIRM.透かしを下部に見切れ表示（base の bottom:-15% は背高画面で消えるため design-source の -4% に） */
  .confirm-bg{ right:-4%; bottom:-4%; font-size:44vw }
  /* SP：見出しは「Review /」を上段・日本語を下段（縦並び）。強制改行は解除し画面幅で自然折り返し。design-source準拠 */
  .confirm-head{ margin-bottom:28px }
  .confirm-head h2{ font-size:32px; line-height:1.1; margin:10px 0 16px }
  .confirm-head h2 .en{ display:block; font-size:.55em; margin-right:0; margin-bottom:.1em }
  .confirm-head h2 br{ display:none }
  /* SP：説明文は max-width を解除し画面幅で自然に折り返す */
  .confirm-head .note{ font-size:14px; line-height:1.8; max-width:none; margin:0 }
  .crow{ grid-template-columns:1fr }
  /* SP：確認項目のpaddingを design-source に合わせる（タイトル.ck / 確認テキスト.cv） */
  .crow .ck{ border-right:none; border-bottom:1px dashed rgba(0,0,0,0.18); padding:16px 18px 10px; align-items:center }
  .crow .ck .l-en{ margin-top:0 }
  .crow .ck .l-jp{ font-size:16px }
  .crow .cv{ padding:14px 18px 18px; line-height:1.8 }
  /* SP：送信ボタンは入力欄と同じ全幅に（design-source準拠） */
  .confirm-actions .btn-primary{ width:100%; justify-content:center; font-size:22px; padding:24px; box-shadow:8px 8px 0 #000 }

  .complete{ padding:80px 0 }
  /* SP：THANKS.透かしを下部に見切れ表示（base の bottom:-15% は背高画面で消えるため design-source の中央・bottom:-2% に） */
  .complete-bg{ left:50%; right:auto; transform:translateX(-50%); bottom:-2%; font-size:34vw }
  .check-mark{ width:96px; height:96px; font-size:56px; margin-bottom:32px }
  .complete h2{ font-size:38px }
  /* SP：lead は強制改行を解除＋max-width解除で画面幅まで連続した文章に */
  .complete .lead{ font-size:15px; max-width:none }
  .complete .lead br{ display:none }
  /* SP：metaバッジは base の inline-flex（内容幅）を解除し、テキストと同じ全幅に（design-source準拠） */
  .complete-meta{ display:flex; flex-direction:column; gap:8px; text-align:center; margin-top:36px; padding:18px 20px }
  .complete-meta strong{ font-size:13px }

  .nextpages{ padding:64px 0 }
  /* SP：headは base の flex（gap:32px・margin56px）を解除し block化。見出し下〜本文〜タイル間の余白をdesign-source値に */
  .nextpages-head{ display:block; margin-bottom:28px }
  /* SP：見出しは「Next /」を上段・日本語を下段（縦並び）。design-source準拠 */
  .nextpages-head h2{ font-size:34px; margin:10px 0 12px }
  .nextpages-head h2 .en{ display:block; margin-right:0 }
  /* SP：説明文は max-width を解除し画面幅で自然に折り返す。上下の余分なmarginも除去 */
  .nextpages-head p{ font-size:14px; max-width:none; margin:0 }
  .nextpages-grid{ grid-template-columns:1fr }
  /* SP：タイルの上下padding・余白を design-source 値に（base の 48px/min-height:200px は広すぎ） */
  .next-tile{ border-right:none; border-bottom:2px solid #000; padding:28px 24px; gap:16px; min-height:0; justify-content:flex-start }
  .next-tile:last-child{ border-bottom:none }
  .next-tile h3{ font-size:24px }
  /* SP：タイトルの強制改行を解除（design HTMLには<br>無し＝1行）。中途半端な折り返しを防ぐ */
  .next-tile h3 br{ display:none }
  .next-tile .en-big{ font-size:52px }
}