@charset "UTF-8";
/* ==========================================================================
   FVより下のセクション（案Aカンプ 04_カンプ_FV以下_1/2 を再現）
   色はカンプ実測：流れ背景 #E7EFFC ／ 電話CTA帯 #001C41 ／ フッター #F0F1F3
   ※青と赤はFVのトークン（--c-blue #0151A7 / --c-red-cta #EC3D29）を使う。
     カンプ側は #004BA1 / #E7301F とごく僅かに違うが、同一ページ内で
     2種類の青が混ざるほうが不具合なので、確定済みFV側に統一する。
   アイコンは lucide (ISC License) の正規パスをインラインSVGで使用。
   ========================================================================== */

:root{
  --sec-pale:  #E7EFFC;   /* 手続きの流れの背景 */
  --sec-foot:  #F0F1F3;   /* フッター背景 */
  --card-line: #D6E2F2;   /* カード枠 */
  --wrap:      1100px;
  --r-card:    12px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}
.wrap--narrow{ max-width:780px; }

/* 日本語を文節で折り返す。狭い幅で「間に合／います」のように
   語中で割れるのを防ぐ（未対応ブラウザでは既定の折り返しに戻るだけ） */
.faq__text, .faq__a p, .sec__lead, .areabox__main, .areabox__sub,
.typecard__txt, .step__txt, .field__label, .telcta__lead, .sitefoot p{
  word-break:auto-phrase;
}

.sec{ padding-block:72px; }
.sec--area{ background:#fff; }
.sec--flow{ background:var(--sec-pale); }
.sec--faq { background:#fff; }
.sec--form{ background:linear-gradient(180deg,#F7FAFF 0%,#EDF2FB 100%); }

/* 見出しまわり ------------------------------------------------------------- */
.sec__badge{
  display:block;
  width:fit-content;
  margin:0 auto;
  background:var(--c-blue); color:#fff;
  font-size:17px; font-weight:700; letter-spacing:.03em;
  padding:8px 26px; border-radius:999px;
}
.sec__title{
  margin:16px 0 0;
  text-align:center;
  /* カンプ実測（1024px幅）：字幅は1文字あたり37〜66px。
     カンプは「電気のお手続き」「WEB予約受付」だけ極端に大きく、
     「流れ」「よくあるご質問」は約37pxで不揃いだった（2枚を別々に生成したため）。
     11文字の見出しが収まる上限を採り、全セクションで統一する。 */
  font-size:clamp(28px,5vw,56px);
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.3;
  color:var(--c-ink);
}
.sec__lead{
  margin:14px 0 0;
  text-align:center;
  font-size:15px;
  color:#4A5665;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* (4) 対応エリア ---------------------------------------------------------- */
.areabox{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:34px;
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:var(--r-card);
  padding:26px 32px;
  box-shadow:var(--shadow-sm);
}
.areabox__ico{ flex:none; width:62px; height:62px; color:var(--c-blue); }
.areabox__ico svg{ width:100%; height:100%; }
.areabox__head{ margin:0; font-size:19px; font-weight:800; color:var(--c-blue-ink); }
.areabox__main{ margin:8px 0 0; font-size:17px; font-weight:700; line-height:1.6; }
.areabox__sub { margin:6px 0 0; font-size:15px; color:#3C4757; }

.typecards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.typecard{
  display:flex; align-items:center; gap:18px;
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:var(--r-card);
  padding:22px 24px;
  text-align:left;
  font-family:inherit;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, transform .15s ease;
}
.typecard:hover{ border-color:var(--c-blue); transform:translateY(-1px); }
.typecard__ico{ flex:none; width:48px; height:48px; color:var(--c-blue); }
.typecard__ico svg{ width:100%; height:100%; }
.typecard__txt{
  display:flex; flex-direction:column; gap:5px;
  font-size:18px; font-weight:800; color:var(--c-ink); line-height:1.4;
}
.typecard__txt small{ font-size:13px; font-weight:500; color:var(--c-muted); }

/* CTAの並び（FVの .fvbtn をそのまま使う） -------------------------------- */
.ctarow{ display:grid; gap:18px; margin-top:26px; }
.ctarow--3{ grid-template-columns:1.15fr .85fr 1fr; }
.ctarow--2{ grid-template-columns:1fr 1fr; max-width:820px; margin-inline:auto; margin-top:34px; }

/* FV外で使うときの .fvbtn の実寸（FVはcqw基準なのでここで上書きする） */
.sec .fvbtn,
.sitefoot .fvbtn{
  min-height:74px;
  padding:12px 20px;
  gap:12px;
  border-radius:10px;
  font-weight:800;
}
.sec .fvbtn .fvico{ font-size:24px; }
.sec .fvbtn__body{ font-size:17px; }
.sec .fvbtn__body small{ font-size:12.5px; }
.fvbtn--ghost{
  background:#fff;
  color:var(--c-blue-ink);
  border:1.5px solid var(--c-blue);
  box-shadow:none;
}
.fvbtn--ghost:hover{ background:#F2F7FE; }

/* (5) 手続きの流れ -------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  margin-top:36px;
  list-style:none;
  padding:0;
}
.step{
  position:relative;
  background:#fff;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(1,29,66,.07);
}
/* カード間の青い三角 */
.step + .step::before{
  content:"";
  position:absolute;
  left:-24px; top:50%;
  translate:0 -50%;
  border-style:solid;
  border-width:9px 0 9px 13px;
  border-color:transparent transparent transparent var(--c-blue);
}
/* ★height:auto を必ず付ける。img の height 属性(1024)が残ると
   高さが確定してしまい aspect-ratio が無視される（実際に縦長になった） */
.step__img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; display:block; }
.step__body{ display:flex; align-items:center; gap:14px; padding:16px 18px 20px; }
.step__num{
  font-size:36px; font-weight:900; line-height:1;
  color:var(--c-blue-ink); letter-spacing:.01em; flex:none;
}
.step__txt{ margin:0; font-size:15.5px; font-weight:700; line-height:1.5; }

/* (6) FAQ ----------------------------------------------------------------- */
.faq{ margin-top:32px; display:flex; flex-direction:column; gap:12px; }
.faq__item{
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:10px;
  overflow:hidden;
}
.faq__q{
  width:100%;
  display:flex; align-items:center; gap:14px;
  background:none; border:0; cursor:pointer;
  padding:18px 20px;
  font-family:inherit; font-size:16px; font-weight:700; color:var(--c-ink);
  text-align:left; line-height:1.5;
}
.faq__mark{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--c-blue); color:#fff;
  display:grid; place-items:center;
  font-size:14px; font-weight:800;
}
.faq__text{ flex:1 1 auto; }
.faq__toggle{ flex:none; width:22px; height:22px; color:var(--c-blue); }
.faq__toggle svg{ width:100%; height:100%; }
.faq__q[aria-expanded="true"] .faq__toggle-plus{ display:none; }
.faq__q[aria-expanded="false"] .faq__toggle-minus{ display:none; }
.faq__a{ padding:0 20px 20px 62px; }
.faq__a p{ margin:0; font-size:15px; color:#4A5665; line-height:1.75; }

/* (7) WEB予約フォーム ----------------------------------------------------- */
.formcard{
  margin-top:28px;
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:14px;
  padding:32px 34px 34px;
  box-shadow:0 2px 12px rgba(1,29,66,.06);
}
.field{ display:block; }
.field + .field, .field-2col + .field, .field + .field-2col{ margin-top:20px; }
.field__label{ display:block; font-size:14.5px; font-weight:700; margin-bottom:8px; }
.field__ctrl{ position:relative; display:block; }
.field__ctrl input,
.field__ctrl select{
  width:100%;
  height:56px;
  padding:0 46px 0 16px;
  border:1px solid #C9D7E9;
  border-radius:9px;
  background:#fff;
  font-family:inherit; font-size:16px; color:var(--c-ink);
  appearance:none;
}
.field__ctrl input:focus,
.field__ctrl select:focus{ outline:2px solid var(--c-blue); outline-offset:1px; border-color:var(--c-blue); }
.field__ico{
  position:absolute; right:16px; top:50%; translate:0 -50%;
  width:22px; height:22px; color:var(--c-blue); pointer-events:none;
}
.field-2col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-2col .field + .field{ margin-top:0; }
.formcard__submit{ width:100%; margin-top:26px; }
.formcard__msg{ margin:12px 0 0; font-size:13px; color:var(--c-muted); text-align:center; }
/* 送信できなかったときは見落とされないよう、電話CTAと同じ赤で出す */
.formcard__msg--error{
  font-size:14px; font-weight:700; color:var(--c-red-cta);
  background:#FDECEA; border:1px solid #F6C6BF; border-radius:8px;
  padding:10px 12px; line-height:1.7;
}
.formcard__msg--error a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* (8) 電話CTA ------------------------------------------------------------- */
.sec--telcta{
  background:var(--c-navy-deep);
  color:#fff;
  text-align:center;
  padding-block:60px;
}
.telcta__lead{ margin:0; font-size:clamp(19px,3.8vw,40px); font-weight:800; letter-spacing:.01em; }
.telcta__num{
  display:inline-flex; align-items:center; gap:18px;
  margin-top:10px;
  color:#fff;
  font-size:clamp(38px,8.6vw,96px);   /* カンプ実測：1024px幅で字高88px */
  font-weight:900; letter-spacing:.01em; line-height:1.1;
}
.telcta__num svg{ width:.86em; height:.86em; flex:none; }
.telcta__time{ margin:8px 0 0; font-size:clamp(14px,2.2vw,22px); font-weight:500; color:#D5E1F2; }
.telcta__web{ margin-top:24px; max-width:440px; margin-inline:auto; }
.sec--telcta .fvbtn--web{ background:var(--c-blue); }

/* (9) フッター（ヒカリのプロLPと同じ最小構成：リンク2本＋著作権） ---------- */
.sitefoot{ background:var(--sec-foot); padding-block:40px; }
.sitefoot .wrap{ text-align:center; }
.sitefoot__nav{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:8px 28px;
}
.sitefoot__link{
  font-size:14.5px; font-weight:700;
  color:var(--c-blue-ink);
  text-decoration:underline; text-underline-offset:3px;
}
.sitefoot__link:hover{ color:var(--c-blue); }
.sitefoot__copy{ margin:18px 0 0; font-size:12.5px; color:var(--c-muted); }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:900px){
  .sec{ padding-block:52px; }
  .wrap{ padding-inline:20px; }
  .areabox{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px; }
  .areabox__ico{ width:48px; height:48px; }
  .areabox__head{ font-size:17px; }
  .areabox__main{ font-size:15.5px; }
  .areabox__sub{ font-size:14px; }
  .typecards{ grid-template-columns:1fr; gap:14px; }
  .ctarow--3, .ctarow--2{ grid-template-columns:1fr; gap:12px; }
  .sec .fvbtn{ min-height:66px; }
  .steps{ grid-template-columns:1fr; gap:18px; }
  .step + .step::before{
    left:50%; top:-14px;
    translate:-50% 0;
    border-width:13px 9px 0 9px;
    border-color:var(--c-blue) transparent transparent transparent;
  }
  .faq__q{ font-size:15px; padding:15px 16px; gap:11px; }
  .faq__a{ padding:0 16px 16px 54px; }
  .formcard{ padding:24px 20px 26px; }
  .field-2col{ gap:14px; }
}

@media (max-width:400px){
  .wrap{ padding-inline:16px; }
  .sec__title{ font-size:26px; }
  .typecard{ padding:18px 16px; gap:14px; }
  .typecard__ico{ width:40px; height:40px; }
  .typecard__txt{ font-size:16px; }
  .step__num{ font-size:30px; }
  .telcta__num{ gap:12px; }
}

@media (prefers-reduced-motion:reduce){
  .typecard{ transition:none; }
  .typecard:hover{ transform:none; }
}