/* ===========================================================
   アイエス｜火災・自然災害の被害調査と復旧工事
   サイト共通スタイル

   ・色は :root の変数だけで管理している。基準の3色はロゴから採取した実測値。
   ・クラス名はすべて fi- 始まり。素材集（sections.html）と共通なので、
     どちらも この1枚の CSS で表示できる。
   ・Webフォントは読み込んでいない（端末内蔵の日本語フォントを使う）。
     オフラインでも表示が崩れず、表示も速い。
   =========================================================== */

:root{
  /* --- ロゴから採取した3色（実測値。変更しないこと） --- */
  --fi-ink:#1D2089;        /* ネイビー：見出し帯・番号・濃色背景 */
  --fi-accent:#EE7500;     /* オレンジ：塗り・枠線・アイコン */
  --fi-gray:#BCBCBC;       /* グレー */

  /* --- 上の3色から作った派生色 --- */
  --fi-ink-2:#161A6B;      /* ネイビー濃いめ（グラデーション用） */
  --fi-ink-3:#0C0F42;      /* フッターなど最も濃い面 */
  --fi-accent-dk:#8F4400;  /* オレンジ ホバー時（塗りボタンより必ず濃く） */
  --fi-accent-btn:#B85700; /* 白文字を載せる「塗り」専用のオレンジ。
                              明るい #EE7500 に白文字だと 2.9:1 しかなく、
                              アクセシビリティ基準（4.5:1）を大きく下回るため。
                              この色なら白文字で 4.8:1 を確保できる */
  --fi-accent-tx:#A85000;  /* 小さい文字にオレンジを使うとき専用。
                              白・生成り・薄橙・灰のどの背景でも 4.5:1 以上 */
  --fi-gold:#E3A21E;       /* 名刺の帯にある山吹色。濃色面での差し色 */
  --fi-green:#1F7A5A;

  /* --- 面と文字 --- */
  --fi-text:#1C2233;       /* 本文の文字色 */
  --fi-muted:#5A6172;      /* 補足の文字色 */
  --fi-bg:#FFFFFF;
  --fi-bg-2:#F5F5F1;       /* 1段落とした背景 */
  --fi-bg-3:#E9E9E3;
  --fi-line:#DEDCD4;

  --fi-radius:16px;
  --fi-head-h:76px;        /* ヘッダーの高さ。#リンクの着地位置の計算にも使う */
  --fi-sans:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
            "Noto Sans JP","Yu Gothic Medium","Meiryo",sans-serif;
}

/* ===========================================================
   1. 土台
   =========================================================== */

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  /* 固定ヘッダーの下に見出しが隠れないようにする */
  scroll-padding-top:calc(var(--fi-head-h) + 12px);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  font-family:var(--fi-sans);
  color:var(--fi-text);
  line-height:1.9;
  background:var(--fi-bg);
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

img{max-width:100%;}
a{color:inherit;}

/* キーボード操作で本文へ飛ぶためのリンク（普段は見えない） */
.fi-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--fi-ink);color:#fff;padding:12px 20px;font-weight:700;
}
.fi-skip:focus{left:0;}

/* ===========================================================
   2. ヘッダー（追従・ナビゲーション）
   =========================================================== */

.fi-head{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--fi-line);
}
.fi-head__in{
  max-width:1180px;margin:0 auto;padding:0 24px;
  height:var(--fi-head-h);
  display:flex;align-items:center;gap:26px;
}

.fi-brand{
  display:flex;align-items:center;gap:11px;
  margin-right:auto;text-decoration:none;min-width:0;
}
.fi-brand img{width:46px;height:44px;object-fit:contain;flex:0 0 auto;}
.fi-brand__tx{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
.fi-brand__tx strong{
  font-size:19px;font-weight:800;letter-spacing:.06em;color:var(--fi-ink);
  white-space:nowrap;              /* 「アイ／エス」と2行に折れるのを防ぐ */
}
.fi-brand__tx small{
  font-size:10.5px;color:var(--fi-muted);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.fi-nav{display:flex;gap:20px;font-size:14px;font-weight:700;}
.fi-nav a{
  text-decoration:none;padding:6px 0;position:relative;white-space:nowrap;
}
.fi-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--fi-accent);transform:scaleX(0);transition:transform .18s ease;
}
.fi-nav a:hover::after,.fi-nav a:focus-visible::after{transform:scaleX(1);}

.fi-head__tel{
  display:flex;flex-direction:column;align-items:center;line-height:1.25;
  background:var(--fi-ink);color:#fff;text-decoration:none;
  padding:9px 20px;border-radius:8px;flex:0 0 auto;
  transition:background .18s ease;
}
.fi-head__tel:hover{background:var(--fi-ink-2);}
.fi-head__tel b{font-size:18px;font-weight:800;letter-spacing:.02em;}
.fi-head__tel span{font-size:10px;color:#C9CBEC;letter-spacing:.08em;}

/* ハンバーガー（画面が狭いときだけ出す） */
.fi-burger{
  display:none;flex:0 0 auto;
  width:46px;height:44px;border:1px solid var(--fi-line);border-radius:8px;
  background:#fff;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.fi-burger span{
  display:block;width:20px;height:2px;background:var(--fi-ink);
  transition:transform .2s ease,opacity .2s ease;
}
.fi-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.fi-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.fi-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* メニューが8項目あるため、幅が狭くなるほど文字と間隔を詰めて1行に収める */
@media (max-width:1180px){
  .fi-nav{gap:16px;font-size:13.5px;}
  .fi-head__in{gap:20px;}
}
@media (max-width:1080px){
  .fi-brand__tx small{display:none;}
  .fi-brand__tx strong{font-size:17px;}
  .fi-nav{gap:12px;font-size:13px;}
  .fi-head__in{gap:18px;}
  .fi-head__tel{padding:9px 14px;}
}
/* 1000px以下はハンバーガーへ。これより狭いと社名とナビ1項目目が
   くっついて「アイエス代表挨拶」と一続きに読めてしまうため。 */
@media (max-width:1000px){
  .fi-burger{display:flex;}
  .fi-head__in{gap:12px;}
  .fi-nav{
    display:none;                      /* ハンバーガーで開くまで隠す */
    position:absolute;top:var(--fi-head-h);left:0;right:0;
    flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--fi-line);
    box-shadow:0 18px 40px rgba(12,15,66,.12);
    padding:8px 24px 18px;
  }
  .fi-nav.is-open{display:flex;}
  .fi-nav a{padding:14px 0;border-bottom:1px solid var(--fi-line);font-size:15px;}
  .fi-nav a:last-child{border-bottom:none;}
  .fi-nav a::after{display:none;}
}
@media (max-width:560px){
  .fi-head__in{padding:0 16px;}
  .fi-head__tel{padding:8px 12px;}
  .fi-head__tel b{font-size:15px;}
  .fi-head__tel span{font-size:9px;}
  .fi-brand img{width:38px;height:36px;}
  .fi-brand__tx strong{font-size:16px;}
}

/* ===========================================================
   3. セクション共通
   =========================================================== */

.fi-sec{
  padding:88px 24px;
  background:var(--fi-bg);
}
.fi-sec--tint{background:var(--fi-bg-2);}
.fi-sec--dark{background:var(--fi-ink);color:#fff;}
.fi-sec--tight{padding-top:0;}
.fi-inner{max-width:1080px;margin:0 auto;}
.fi-inner--narrow{max-width:780px;}

.fi-kicker{
  font-size:16px;font-weight:800;letter-spacing:.1em;
  color:var(--fi-accent-tx);margin:0 0 14px;
}
/* 濃い背景のセクション（対応エリア・お問い合わせ）では色を反転させる */
.fi-sec--dark .fi-kicker,
.fi-area .fi-kicker,
.fi-cta .fi-kicker{color:var(--fi-gold);}

/* 見出しは日本語を文節のまとまりで折り返す（対応ブラウザのみ。非対応なら従来どおり）。
   本文に効かせると幅320pxで語句が割れずに溢れるため、短い見出しに限定している。 */
.fi-h2,.fi-h3,.fi-hero__h1,.fi-svc h3,.fi-step__t,.fi-vs__t,.fi-part__t{
  word-break:auto-phrase;
}
.fi-h2{
  font-size:clamp(26px,4.2vw,40px);font-weight:800;line-height:1.5;
  letter-spacing:.01em;margin:0 0 24px;text-wrap:balance;
}
.fi-h3{
  font-size:clamp(19px,2.6vw,24px);font-weight:800;line-height:1.6;margin:0 0 10px;
}
.fi-lead{
  font-size:clamp(16px,2vw,19px);color:var(--fi-muted);margin:0 0 40px;max-width:66ch;
}
.fi-sec--dark .fi-lead,
.fi-area .fi-lead,
.fi-cta .fi-lead{color:#C6C9EC;}
.fi-p{font-size:16px;margin:0 0 18px;}
.fi-p:last-child{margin-bottom:0;}
.fi-em{color:var(--fi-accent-tx);font-weight:800;}  /* 本文中の強調。明るいオレンジでは白背景で2.2:1しかない */
/* 濃い背景の面では、濃いオレンジだと沈むので山吹色に替える */
.fi-sec--dark .fi-em,
.fi-hero .fi-em,
.fi-area .fi-em,
.fi-cta .fi-em,
.fi-first .fi-em{color:var(--fi-gold);}
.fi-marker{
  background:linear-gradient(transparent 62%,rgba(238,117,0,.30) 62%);
  padding:0 2px;font-weight:800;
}
.fi-center{text-align:center;}
.fi-center .fi-lead{margin-left:auto;margin-right:auto;}

/* 見出しの上に置く小さなラベル付きの中央寄せ見出し */
.fi-hd{text-align:center;margin-bottom:44px;}
.fi-hd .fi-lead{margin-left:auto;margin-right:auto;margin-bottom:0;}
@media (max-width:600px){
  .fi-hd{text-align:left;}
}

/* ===========================================================
   4. ボタン
   =========================================================== */

.fi-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fi-accent-btn);color:#fff;
  font-size:clamp(15px,2vw,17px);font-weight:800;text-decoration:none;
  padding:17px 34px;border-radius:999px;line-height:1.4;border:0;cursor:pointer;
  font-family:inherit;
  transition:background .18s ease,transform .18s ease;
}
.fi-btn:hover,.fi-btn:focus-visible{background:var(--fi-accent-dk);transform:translateY(-2px);}
.fi-btn:focus-visible{outline:3px solid var(--fi-ink);outline-offset:3px;}
.fi-btn--white{background:#fff;color:var(--fi-ink);}
.fi-btn--white:hover,.fi-btn--white:focus-visible{background:#E9E9F6;}
.fi-btn--ghost{
  background:transparent;color:var(--fi-ink);border:2px solid var(--fi-ink);padding:15px 32px;
}
.fi-btn--ghost:hover,.fi-btn--ghost:focus-visible{background:var(--fi-ink);color:#fff;}
.fi-btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.fi-center .fi-btnrow,.fi-cta .fi-btnrow{justify-content:center;}

.fi-textlink{
  display:inline-block;font-weight:800;font-size:15px;
  color:var(--fi-accent-tx);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:1px;
}
.fi-textlink:hover{color:var(--fi-accent-dk);}

/* ===========================================================
   5. ヒーロー
   =========================================================== */

.fi-hero{
  background:linear-gradient(125deg,var(--fi-ink-3) 0%,var(--fi-ink) 55%,#2E32A8 100%);
  color:#fff;padding:82px 24px;overflow:hidden;position:relative;
}
/* ロゴのオレンジの曲線をイメージした背景の光。
   closest-side にしているのは、要素の左右端に達する前に色が消えるようにするため。
   これを外すと、端で色が切れて縦の筋が見えてしまう。 */
.fi-hero::after{
  content:"";position:absolute;right:-14%;top:-30%;width:60%;height:160%;
  background:radial-gradient(circle closest-side,rgba(238,117,0,.34),rgba(238,117,0,0));
  pointer-events:none;
}
/* PCは「見出しは横幅いっぱい／その下は 左に文章＋ボタン・右に動画」。
   動画が縦向き（9:16）で背が高いため、左の塊と動画を上下中央でそろえている。
   スマホでは1列にして「見出し → 文章 → ボタン → 動画」の順に積む。 */
.fi-hero__in{
  max-width:1080px;margin:0 auto;position:relative;z-index:1;
  /* 右の列は動画の幅ぴったり。動画が見出しの横から通るので、
     左の塊（見出し＋文章＋ボタン）と高さがほぼそろう */
  display:grid;grid-template-columns:1fr 272px;
  grid-template-areas:
    "head video"
    "body video";
  grid-template-rows:auto auto;
  column-gap:56px;row-gap:26px;align-items:start;
}
.fi-hero__head{grid-area:head;}   /* 見出しは横幅いっぱいに使う */
.fi-hero__body{
  /* 上下中央にすると見出しと本文の間に穴が空くので、見出しの直下に置く */
  grid-area:body;align-self:start;
  display:flex;flex-direction:column;gap:30px;
}
.fi-hero__video{grid-area:video;align-self:start;}
.fi-hero__eyebrow{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:.1em;
  color:var(--fi-ink);background:var(--fi-gold);
  padding:5px 14px;border-radius:999px;margin:0 0 18px;
}
.fi-hero__h1{
  /* 左の列に収める。いちばん長い2行目が折り返さない上限にしている */
  font-size:clamp(27px,3.3vw,40px);font-weight:800;line-height:1.42;
  margin:0;letter-spacing:.01em;
}
.fi-hero__h1 span{color:var(--fi-gold);}
/* 語の途中で改行させたくない箇所につける（「保険の対象」が割れないように） */
.fi-nowrap{white-space:nowrap;}
.fi-hero__lead{font-size:clamp(15px,1.9vw,18px);color:#D2D4F0;margin:0 0 30px;max-width:56ch;}
/* サイト本体では下の余白を .fi-hero__in の row-gap が受け持つので消す
   （素材集 sections.html のヒーローでは余白が要るため、こちらだけを打ち消している） */
.fi-hero__copy .fi-hero__lead{margin-bottom:0;}
.fi-hero__lead b{color:var(--fi-gold);font-weight:800;}
.fi-hero__trust{
  display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:24px 0 0;list-style:none;
  font-size:13px;color:#C6C9EC;
}
.fi-hero__trust li::before{content:"✓";color:var(--fi-gold);font-weight:800;margin-right:6px;}
.fi-hero__note{margin:22px 0 0;font-size:12.5px;color:#A6AADD;line-height:1.8;}

/* ヒーロー右の紹介動画（縦型9:16） */
.fi-hero__video{
  /* 縦向き（9:16）なので、大きくすると左の文章との高さの差が開く。
     文章の塊とだいたい釣り合う幅にとどめている */
  margin:0 0 0 auto;max-width:272px;width:100%;
}
.fi-hero__video video{
  display:block;width:100%;height:auto;background:#000;
  border-radius:18px;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 26px 70px rgba(8,10,50,.45);
}
.fi-hero__video figcaption{
  margin-top:12px;font-size:12.5px;color:#C6C9EC;line-height:1.75;
}
.fi-hero__video figcaption b{
  display:inline-block;background:var(--fi-gold);color:var(--fi-ink);
  font-size:11px;font-weight:800;letter-spacing:.08em;
  padding:2px 9px;border-radius:999px;margin-right:7px;
}
.fi-hero__video figcaption small{color:#C6C9EC;font-size:12px;}  /* #9296D4 では背景と4.1:1 しかなかった */
@media (max-width:900px){
  .fi-hero__video{margin:0 auto;max-width:320px;}
}

/* ヒーロー右の「まず確認」カード（sections.html でのみ使用） */
.fi-emg{
  background:#fff;color:var(--fi-text);border-radius:14px;padding:28px 26px;
  box-shadow:0 26px 70px rgba(8,10,50,.38);
}
.fi-emg__t{
  margin:0 0 6px;font-size:16px;font-weight:800;color:var(--fi-accent-tx);
  border-bottom:1px solid var(--fi-line);padding-bottom:12px;
}
.fi-emg ol{list-style:none;padding:0;margin:6px 0 12px;counter-reset:emg;}
.fi-emg li{
  display:grid;grid-template-columns:26px 1fr;gap:2px 11px;
  padding:12px 0;border-bottom:1px solid #EFEFEA;counter-increment:emg;
}
.fi-emg li:last-child{border-bottom:none;}
.fi-emg li::before{
  content:counter(emg);grid-row:1 / 3;
  width:24px;height:24px;border-radius:50%;background:var(--fi-accent-btn);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:4px;
}
.fi-emg b{font-size:15px;line-height:1.6;}
.fi-emg span{font-size:12.5px;color:var(--fi-muted);line-height:1.7;}
.fi-emg__note{margin:0;font-size:11.5px;color:var(--fi-muted);line-height:1.7;}

@media (max-width:900px){
  .fi-hero{padding:60px 24px;}
  .fi-hero__in{
    grid-template-columns:1fr;
    grid-template-areas:"head" "body" "video";
    grid-template-rows:auto;
    row-gap:26px;
  }
  /* スマホは電話・フォームのボタンを先に見せる（動画はその下） */
  .fi-hero__body{align-self:start;}
}
@media (max-width:560px){
  .fi-hero{padding:48px 18px;}
  .fi-hero__lead{font-size:15px;}
  .fi-hero .fi-btnrow{display:grid;}
  .fi-hero .fi-btn{width:100%;}
}

/* ===========================================================
   5-2. 火事のあと、まず確認（ヒーロー直下の帯）
   =========================================================== */

.fi-first{
  background:var(--fi-ink-3);color:#fff;padding:34px 24px 30px;
  border-top:3px solid var(--fi-accent);
}
.fi-first__t{
  margin:0 0 18px;font-size:17px;font-weight:800;letter-spacing:.06em;
  color:var(--fi-gold);
}
.fi-first__list{
  list-style:none;padding:0;margin:0;counter-reset:first;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.fi-first__list li{
  counter-increment:first;padding-left:34px;position:relative;line-height:1.6;
}
.fi-first__list li::before{
  content:counter(first);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:50%;background:var(--fi-accent-btn);
  display:grid;place-items:center;font-size:12px;font-weight:800;
}
.fi-first__list b{display:block;font-size:16.5px;}
.fi-first__list span{display:block;font-size:13.5px;color:#A6AADD;line-height:1.7;margin-top:2px;}
.fi-first__note{margin:20px 0 0;font-size:12px;color:#8A8FCB;}
@media (max-width:860px){
  .fi-first__list{grid-template-columns:1fr 1fr;gap:16px;}
}
@media (max-width:520px){
  .fi-first__list{grid-template-columns:1fr;gap:14px;}
}

/* ===========================================================
   5-3. 代表挨拶
   =========================================================== */

.fi-greet{
  background:#fff;border:1px solid var(--fi-line);border-radius:var(--fi-radius);
  padding:40px 44px 36px;position:relative;
}
/* 左上に引用符を薄く置く */
.fi-greet::before{
  content:"“";position:absolute;left:22px;top:-6px;
  font-size:88px;line-height:1;color:var(--fi-bg-3);font-family:Georgia,serif;
}
.fi-greet__p{
  font-size:17px;line-height:2.05;margin:0 0 22px;position:relative;
}
.fi-greet__p b{font-weight:800;}
.fi-greet__em{
  color:var(--fi-accent-tx);
  background:linear-gradient(transparent 62%,rgba(238,117,0,.22) 62%);
}
.fi-greet__sign{
  margin:32px 0 0;padding-top:22px;border-top:1px solid var(--fi-line);
  text-align:right;line-height:1.6;
}
.fi-greet__sign span{display:block;font-size:13px;color:var(--fi-muted);}
.fi-greet__sign b{font-size:22px;font-weight:800;letter-spacing:.08em;}
@media (max-width:600px){
  .fi-greet{padding:30px 22px 26px;}
  .fi-greet__p{font-size:15.5px;line-height:1.95;}
}

/* ===========================================================
   6. カード / チェックリスト
   =========================================================== */

.fi-grid{display:grid;gap:22px;}
.fi-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.fi-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}

.fi-card{
  background:#fff;border:1px solid var(--fi-line);border-radius:var(--fi-radius);
  padding:30px 28px;
}
.fi-card--num{border-top:4px solid var(--fi-accent);}
.fi-card__n{font-size:13px;font-weight:800;color:var(--fi-accent-tx);letter-spacing:.1em;}
.fi-card__ic{
  width:54px;height:54px;border-radius:14px;background:var(--fi-bg-3);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.fi-card__ic svg{width:28px;height:28px;}
.fi-card__t{font-size:20px;font-weight:800;margin:2px 0 10px;line-height:1.5;}
.fi-card__d{font-size:16px;color:var(--fi-muted);margin:0;line-height:1.85;}

.fi-checks{
  list-style:none;padding:0;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
}
.fi-checks li{
  display:flex;gap:13px;align-items:flex-start;
  background:#fff;border:1px solid var(--fi-line);border-radius:12px;padding:17px 19px;
  font-size:16px;font-weight:600;line-height:1.7;
}
.fi-checks li::before{
  content:"";flex:0 0 21px;height:21px;margin-top:3px;border-radius:50%;
  background:var(--fi-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5 L9.5 18 L20 6.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/15px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5 L9.5 18 L20 6.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/15px no-repeat;
}
.fi-checks--1col{grid-template-columns:1fr;}

/* ===========================================================
   7. 事故事例（タブ＋パネル）
   =========================================================== */

.fi-tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;
  padding:0;list-style:none;
}
.fi-tab{
  font-family:inherit;font-size:14.5px;font-weight:800;line-height:1.4;
  color:var(--fi-ink);background:#fff;
  border:1px solid var(--fi-line);border-radius:999px;
  padding:11px 20px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.fi-tab svg{width:17px;height:17px;flex:0 0 auto;}
.fi-tab:hover{border-color:var(--fi-ink);}
.fi-tab[aria-selected="true"]{
  background:var(--fi-ink);border-color:var(--fi-ink);color:#fff;
}
.fi-tab:focus-visible{outline:3px solid var(--fi-accent);outline-offset:2px;}

.fi-panel{
  background:#fff;border:1px solid var(--fi-line);border-radius:var(--fi-radius);
  padding:34px 34px 30px;
}
.fi-panel[hidden]{display:none;}
.fi-panel + .fi-panel{margin-top:22px;}   /* JSが動かない環境では縦に並べる */

.fi-panel__head{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;}
.fi-panel__ic{
  width:54px;height:54px;flex:0 0 auto;border-radius:14px;
  background:var(--fi-ink);color:#fff;display:grid;place-items:center;
}
.fi-panel__ic svg{width:28px;height:28px;}
.fi-panel__t{font-size:clamp(21px,3vw,27px);font-weight:800;margin:0 0 4px;line-height:1.45;}
.fi-panel__sub{margin:0;font-size:16px;color:var(--fi-muted);line-height:1.8;}

.fi-panel__grid{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start;}
.fi-panel__h{
  font-size:16.5px;font-weight:800;margin:26px 0 12px;letter-spacing:.04em;
  padding-left:12px;border-left:4px solid var(--fi-accent);line-height:1.6;
}
.fi-panel__h:first-child{margin-top:0;}

/* モデルケース */
.fi-case{
  background:var(--fi-bg-2);border-radius:12px;padding:22px 24px;
  border-left:5px solid var(--fi-gold);
}
.fi-case__label{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  background:var(--fi-gold);color:var(--fi-ink);
  padding:3px 11px;border-radius:999px;margin-bottom:10px;
}
.fi-case__t{font-size:18.5px;font-weight:800;margin:0 0 8px;line-height:1.6;}
.fi-case__d{font-size:16px;color:var(--fi-muted);margin:0;line-height:1.85;}
.fi-case__note{font-size:13px;color:var(--fi-muted);margin:12px 0 0;line-height:1.7;}

/* 点検箇所タグ */
.fi-tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px;}
.fi-tags li{
  font-size:14px;font-weight:700;line-height:1.5;
  background:#fff;border:1px solid var(--fi-line);border-radius:7px;padding:6px 11px;
}

/* パネル右側の枠 */
.fi-side{
  background:var(--fi-bg-2);border-radius:12px;padding:22px 22px 24px;
}
.fi-side__h{font-size:15.5px;font-weight:800;margin:24px 0 12px;letter-spacing:.04em;}
.fi-side__h:first-child{margin-top:0;}

/* 注意書き */
.fi-caution{
  font-size:14.5px;line-height:1.8;color:var(--fi-muted);
  background:#FFF6EC;border:1px solid #F3D9BC;border-radius:10px;padding:14px 16px;
}
.fi-caution b{color:var(--fi-accent-tx);}

@media (max-width:900px){
  .fi-panel{padding:26px 22px;}
  .fi-panel__grid{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:560px){
  .fi-tab{font-size:13px;padding:9px 14px;}
  .fi-tabs{gap:6px;}
}

/* ===========================================================
   8. 点検箇所リスト（写真つき）
   =========================================================== */

.fi-parts{
  display:grid;gap:1px;background:var(--fi-line);
  border:1px solid var(--fi-line);border-radius:var(--fi-radius);overflow:hidden;
}
.fi-part{
  background:#fff;padding:26px 28px;display:grid;
  grid-template-columns:56px 1fr;gap:20px;align-items:start;
}
.fi-part__n{
  width:44px;height:44px;border-radius:50%;background:var(--fi-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;
}
.fi-part__t{font-size:20px;font-weight:800;margin:0 0 8px;line-height:1.5;}
.fi-part__d{font-size:16px;color:var(--fi-muted);margin:0 0 10px;line-height:1.85;}
.fi-part__plain{
  font-size:15.5px;background:var(--fi-bg-2);border-left:4px solid var(--fi-accent);
  padding:12px 16px;border-radius:0 8px 8px 0;margin:0;line-height:1.8;
}
.fi-part__plain b{color:var(--fi-text);}

/* 写真を載せない項目（12 建物外観）の補足文。figcaption と同じ見た目にそろえている */
.fi-part__note{font-size:13px;color:var(--fi-muted);margin:10px 0 0;line-height:1.65;}

.fi-part--photo{grid-template-columns:56px 1fr 250px;}
.fi-part__fig{margin:0;}
.fi-part__fig img{
  width:100%;height:186px;object-fit:cover;display:block;
  border-radius:10px;border:1px solid var(--fi-line);background:var(--fi-bg-3);
}
.fi-part__fig figcaption{font-size:13px;color:var(--fi-muted);margin-top:7px;line-height:1.65;}

@media (max-width:860px){
  .fi-part--photo{grid-template-columns:56px 1fr;}
  .fi-part__fig{grid-column:2 / -1;margin-top:14px;}
  .fi-part__fig img{height:220px;}
}
@media (max-width:600px){
  .fi-part{grid-template-columns:1fr;gap:12px;}
  .fi-part--photo{grid-template-columns:1fr;}
  .fi-part__fig{grid-column:1 / -1;}
}

/* ===========================================================
   9. サービス / ステップ / 流れ
   =========================================================== */

/* 5列だと1行に11文字ほどしか入らず「シーリン／グ」のように語中で折れてしまうため、
   PCでも3列にとどめている（5枚なので下段は2枚） */
.fi-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.fi-svc article{
  background:#fff;border:1px solid var(--fi-line);border-top:4px solid var(--fi-ink);
  border-radius:0 0 10px 10px;padding:24px 20px;
}
.fi-svc b{font-size:13.5px;font-weight:800;color:var(--fi-accent-tx);letter-spacing:.1em;}
.fi-svc h3{font-size:18px;font-weight:800;margin:4px 0 8px;line-height:1.5;}
.fi-svc p{font-size:15px;color:var(--fi-muted);margin:0;line-height:1.8;}
@media (max-width:900px){.fi-svc{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.fi-svc{grid-template-columns:1fr;}}

.fi-steps{display:grid;gap:18px;}
.fi-step{
  background:#fff;border:2px solid var(--fi-ink);border-radius:var(--fi-radius);
  padding:26px 28px;display:grid;grid-template-columns:78px 1fr;gap:22px;align-items:start;
}
.fi-step__b{
  width:70px;height:70px;border-radius:16px;background:var(--fi-ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;
}
.fi-step__b b{font-size:25px;font-weight:800;}
.fi-step__b span{font-size:11px;font-weight:700;letter-spacing:.08em;margin-top:2px;}
.fi-step__t{font-size:21px;font-weight:800;margin:0 0 8px;line-height:1.5;}
.fi-step__d{font-size:16px;color:var(--fi-muted);margin:0;line-height:1.85;}
.fi-step__arrow{text-align:center;color:var(--fi-accent);font-size:24px;line-height:1;margin:-6px 0;}
@media (max-width:600px){
  .fi-step{grid-template-columns:1fr;gap:14px;padding:22px 20px;}
}

/* ===========================================================
   10. 比較（洗浄だけ vs 洗浄＋再塗装）
   =========================================================== */

.fi-vs{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.fi-vs__box{border-radius:var(--fi-radius);padding:28px 26px;border:2px solid;}
.fi-vs__box--bad{border-color:#C3C5CC;background:#F4F4F6;}
.fi-vs__box--good{border-color:var(--fi-accent);background:#FEF5EC;}
.fi-vs__label{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  padding:5px 14px;border-radius:999px;margin-bottom:13px;
}
.fi-vs__box--bad .fi-vs__label{background:#6B7280;color:#fff;}  /* 白文字で4.8:1（#767C8Aでは4.2:1） */
.fi-vs__box--good .fi-vs__label{background:var(--fi-accent-btn);color:#fff;}
.fi-vs__t{font-size:19.5px;font-weight:800;margin:0 0 12px;line-height:1.6;}
.fi-vs__d{font-size:16px;color:var(--fi-muted);margin:0;line-height:1.85;}

/* ===========================================================
   11. 報告書サンプル
   =========================================================== */

.fi-doc{
  background:#fff;border:1px solid var(--fi-line);border-radius:var(--fi-radius);overflow:hidden;
}
.fi-doc__bar{
  background:var(--fi-ink);color:#fff;padding:15px 26px;
  font-size:14px;font-weight:700;letter-spacing:.06em;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.fi-doc__bar span:last-child{color:var(--fi-gold);font-weight:700;}
.fi-doc__body{padding:28px 26px;}
.fi-doc__row{
  display:grid;grid-template-columns:150px 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--fi-line);font-size:16px;margin:0;
}
.fi-doc__row:last-child{border-bottom:none;}
.fi-doc__row dt{font-weight:800;margin:0;}
.fi-doc__row dd{margin:0;color:var(--fi-muted);line-height:1.85;}
@media (max-width:600px){
  .fi-doc__row{grid-template-columns:1fr;gap:4px;}
}

/* ===========================================================
   12. 動画
   =========================================================== */

.fi-video{
  max-width:380px;margin:0 auto;border-radius:20px;overflow:hidden;
  border:1px solid var(--fi-line);background:#000;
}
.fi-video video{display:block;width:100%;height:auto;}
.fi-video__note{
  font-size:12.5px;color:var(--fi-muted);margin:14px auto 0;max-width:520px;line-height:1.8;
}
.fi-video__note b{color:var(--fi-text);font-size:13.5px;}

/* 「ご利用の流れ」に置いた解説動画。下の手順表とのあいだに余白をとる */
.fi-flowvideo{margin:0 0 52px;}
@media (max-width:600px){
  .fi-flowvideo{margin-bottom:38px;}
}

/* ===========================================================
   13. 対応エリア
   =========================================================== */

.fi-area{background:var(--fi-ink-3);color:#fff;}
.fi-area__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.fi-area__grid h2{margin-bottom:18px;}
.fi-area__lead{color:#C6C9EC;font-size:17px;margin:0 0 18px;line-height:1.9;}
.fi-area__list{
  display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0 0 18px;
}
.fi-area__list li{
  font-size:14.5px;font-weight:700;
  border:1px solid rgba(255,255,255,.28);border-radius:7px;padding:6px 12px;
}
.fi-area__list li.is-base{background:var(--fi-gold);color:var(--fi-ink);border-color:var(--fi-gold);}
.fi-area__note{font-size:13px;color:#A6AADD;margin:0;line-height:1.8;}
.fi-area__card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:30px 28px;text-align:center;
}
.fi-area__card strong{display:block;font-size:15px;color:var(--fi-gold);letter-spacing:.1em;}
.fi-area__card b{display:block;font-size:clamp(28px,4vw,38px);font-weight:800;margin:6px 0 4px;}
.fi-area__card span{display:block;font-size:13.5px;color:#C6C9EC;line-height:1.8;}
.fi-area__card hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:20px 0;}
@media (max-width:900px){
  .fi-area__grid{grid-template-columns:1fr;gap:34px;}
}

/* ===========================================================
   14. 会社概要
   =========================================================== */

.fi-company{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;}
.fi-table{width:100%;border-collapse:collapse;font-size:16px;}
.fi-table th,.fi-table td{
  text-align:left;padding:15px 4px;border-bottom:1px solid var(--fi-line);vertical-align:top;
  line-height:1.85;
}
.fi-table th{width:132px;font-weight:800;white-space:nowrap;}
.fi-table td{color:var(--fi-muted);}
.fi-table td a{color:var(--fi-accent-tx);font-weight:700;}
.fi-table small{display:block;font-size:12.5px;margin-top:3px;}

.fi-logocard{
  background:#fff;border:1px solid var(--fi-line);border-radius:var(--fi-radius);
  padding:30px 26px;text-align:center;
}
.fi-logocard img{width:130px;height:auto;margin:0 auto 14px;display:block;}
.fi-logocard strong{display:block;font-size:21px;font-weight:800;letter-spacing:.1em;color:var(--fi-ink);}
.fi-logocard span{display:block;font-size:13px;color:var(--fi-muted);margin-top:6px;line-height:1.8;}
.fi-logocard ul{
  list-style:none;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--fi-line);
  font-size:13.5px;text-align:left;color:var(--fi-muted);
}
.fi-logocard li{padding:5px 0 5px 18px;position:relative;line-height:1.7;}
.fi-logocard li::before{
  content:"";position:absolute;left:0;top:12px;width:8px;height:8px;border-radius:2px;
  background:var(--fi-accent);
}
@media (max-width:900px){
  .fi-company{grid-template-columns:1fr;gap:28px;}
  .fi-table th{width:104px;font-size:14px;}
}

/* ===========================================================
   15. FAQ
   =========================================================== */

.fi-faq{border-top:1px solid var(--fi-line);}
.fi-faq details{border-bottom:1px solid var(--fi-line);}
.fi-faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 38px;position:relative;
  font-size:18px;font-weight:800;line-height:1.7;
}
.fi-faq summary::-webkit-details-marker{display:none;}
.fi-faq summary::before{
  content:"Q";position:absolute;left:0;top:22px;
  color:var(--fi-accent-tx);font-size:19px;font-weight:800;
}
.fi-faq summary::after{
  content:"";position:absolute;right:8px;top:30px;width:11px;height:11px;
  border-right:3px solid var(--fi-muted);border-bottom:3px solid var(--fi-muted);
  transform:rotate(45deg);transition:transform .2s ease;
}
.fi-faq details[open] summary::after{transform:rotate(-135deg);top:34px;}
.fi-faq summary:focus-visible{outline:3px solid var(--fi-accent);outline-offset:-3px;}
.fi-faq__a{
  padding:0 20px 24px 38px;position:relative;
  font-size:16px;color:var(--fi-muted);line-height:1.9;margin:0;
}
.fi-faq__a::before{
  content:"A";position:absolute;left:0;top:0;
  color:var(--fi-ink);font-size:19px;font-weight:800;
}

/* ===========================================================
   16. お問い合わせ
   =========================================================== */

.fi-cta{background:var(--fi-ink);color:#fff;}
/* フォームのほうが背が高いので、左の連絡先は上下中央でそろえる。
   start にすると左下に大きな空白が残ってしまう */
.fi-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.fi-contact__tel{
  display:inline-block;margin:6px 0 2px;
  font-size:clamp(28px,4.4vw,38px);font-weight:800;
  color:var(--fi-gold);text-decoration:none;letter-spacing:.02em;
}
.fi-contact__hours{font-size:14.5px;color:#C6C9EC;margin:0 0 22px;line-height:1.8;}
.fi-contact__hours a{color:#fff;font-weight:700;}
.fi-contact__sub{font-size:15px;color:#C6C9EC;margin:0;line-height:1.9;}
.fi-contact__sub a{color:#fff;font-weight:700;}

.fi-form{background:#fff;color:var(--fi-text);padding:30px 28px;border-radius:14px;}
.fi-form label{display:block;font-weight:800;font-size:14.5px;margin-bottom:16px;}
.fi-form input,.fi-form textarea,.fi-form select{
  display:block;width:100%;margin-top:6px;
  border:1px solid #C8CBD4;border-radius:6px;padding:12px;
  font:inherit;font-size:15px;font-weight:400;color:var(--fi-text);background:#fff;
}
.fi-form input:focus,.fi-form textarea:focus,.fi-form select:focus{
  outline:3px solid rgba(238,117,0,.35);outline-offset:0;border-color:var(--fi-accent);
}
.fi-form__consent{display:flex;gap:9px;align-items:flex-start;font-weight:600;font-size:13.5px;}
.fi-form__consent input{width:auto;margin:5px 0 0;flex:0 0 auto;}
.fi-form__consent a{color:var(--fi-accent-tx);font-weight:800;}
.fi-form .fi-btn{width:100%;margin-top:4px;}
.fi-form__note{font-size:11.5px;color:var(--fi-muted);margin:12px 0 0;line-height:1.7;}
@media (max-width:900px){
  .fi-contact__grid{grid-template-columns:1fr;gap:34px;}
}

/* ===========================================================
   17. 重要事項 / フッター / 追従バー
   =========================================================== */

.fi-note{
  background:var(--fi-bg-3);border-left:5px solid var(--fi-muted);
  border-radius:0 12px 12px 0;padding:26px 28px;
  font-size:14.5px;color:var(--fi-muted);line-height:1.95;
}
.fi-note b{color:var(--fi-text);}
.fi-note a{color:var(--fi-accent-tx);font-weight:700;}
.fi-note ul{margin:12px 0 0;padding-left:1.3em;}
.fi-note li{margin-bottom:6px;}

.fi-foot{background:var(--fi-ink-3);color:#C6C9EC;padding:50px 24px 34px;}
.fi-foot__in{
  max-width:1080px;margin:0 auto;
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.fi-foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.fi-foot__brand img{width:42px;height:40px;object-fit:contain;}
.fi-foot__brand strong{font-size:19px;font-weight:800;letter-spacing:.08em;color:#fff;}
.fi-foot p{font-size:13px;margin:0;line-height:1.9;}
.fi-foot nav{display:flex;flex-direction:column;gap:9px;font-size:13.5px;}
.fi-foot nav a{text-decoration:none;}
.fi-foot nav a:hover{color:#fff;text-decoration:underline;}
.fi-foot__copy{
  max-width:1080px;margin:34px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;font-size:11.5px;color:#8A8FCB;
}

.fi-bar{display:none;}
@media (max-width:960px){
  .fi-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    display:grid;grid-template-columns:1fr 1fr;
    box-shadow:0 -6px 22px rgba(12,15,66,.2);
  }
  .fi-bar a{
    padding:15px 8px;text-align:center;font-weight:800;font-size:15px;
    color:#fff;text-decoration:none;
  }
  .fi-bar a:first-child{background:var(--fi-ink);}
  .fi-bar a:last-child{background:var(--fi-accent-btn);}
  body{padding-bottom:58px;}   /* 追従バーに本文の末尾が隠れないように */
}

/* ===========================================================
   18. 全体の余白調整（狭い画面）
   =========================================================== */

@media (max-width:600px){
  .fi-sec{padding:58px 18px;}
  .fi-card{padding:24px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .fi-btn,.fi-tab,.fi-faq summary::after,.fi-nav a::after,.fi-burger span{transition:none;}
}

/* ===========================================================
   19. プライバシーポリシー（privacy.html でのみ使う）

   条番号は CSS のカウンタで自動採番している。
   条文を増やしても削除しても、番号を振り直す必要はない。
   =========================================================== */

.fi-legal{counter-reset:legal;}

.fi-legal__art{
  border-top:1px solid var(--fi-line);
  margin-top:32px;padding-top:28px;
}
.fi-legal__art:first-of-type{border-top:none;margin-top:0;padding-top:0;}

.fi-legal__t{
  font-size:clamp(18px,2.4vw,22px);font-weight:800;line-height:1.6;
  margin:0 0 12px;display:flex;gap:12px;align-items:flex-start;
  word-break:auto-phrase;
}
.fi-legal__t::before{
  counter-increment:legal;content:counter(legal);
  flex:0 0 auto;margin-top:3px;
  /* 2桁になっても数字が欠けないよう、幅は最小値だけ決めて横に伸ばす */
  min-width:26px;height:26px;padding:0 6px;border-radius:999px;
  background:var(--fi-ink);color:#fff;
  font-size:13px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}

.fi-legal p{font-size:16px;line-height:1.95;margin:0 0 14px;}
.fi-legal p:last-child{margin-bottom:0;}
.fi-legal ul{margin:0 0 14px;padding-left:1.3em;font-size:16px;line-height:1.95;}
.fi-legal li{margin-bottom:6px;}
.fi-legal ul:last-child,.fi-legal li:last-child{margin-bottom:0;}
.fi-legal a{color:var(--fi-accent-tx);font-weight:700;}

/* 制定日。右端に小さく置く */
.fi-legal__date{
  margin:44px 0 0;padding-top:18px;border-top:1px solid var(--fi-line);
  font-size:13.5px;line-height:1.9;color:var(--fi-muted);text-align:right;
}

@media (max-width:600px){
  .fi-legal__t{gap:10px;}
  .fi-legal__date{text-align:left;}
}

/* 印刷（見積書・報告書と一緒にお客様へ渡すことがあるため） */
@media print{
  .fi-head,.fi-bar,.fi-hero::after,.fi-form,.fi-video,.fi-hero__video{display:none !important;}
  .fi-panel[hidden]{display:block !important;}
  .fi-sec{padding:24px 0;}
  body{padding-bottom:0;}
}