/* ==========================================================================
   株式会社PlusOne コーポレートサイト共通スタイル
   デザイン方向性: いろは案（2026-08-30）のトークンに準拠
   ========================================================================== */

/* ---- 1. カラートークン ---- */
:root{
  --brand:#1F3A52;
  --brand-rgb:31,58,82;
  --accent:#1E93C7;
  --accent-rgb:30,147,199;
  --action:#F2803D;
  --action-rgb:242,128,61;
  --bg:#FAFCFA;
  --surface:#FFFFFF;
  --text:#1B2622;
  --text-sub:#5B6B64;
  --border:#DCE6E0;

  --font-heading:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  --font-body:'Noto Sans JP',sans-serif;
  --font-num:'Inter','Noto Sans JP',sans-serif;

  --radius:8px;
  --shadow-sm:0 1px 2px rgba(27,38,34,0.05);
  --shadow-md:0 4px 12px rgba(27,38,34,0.06);
  --header-h:64px;
}

/* 2026-08-31 BOSS指示：端末のダークモード設定・手動切替に関わらず常にライト配色に固定するため、
   ダークモード用の上書きブロックは無効化（トークン変数名は変更せず、値をライトモードと同一にして残す）。
   切替ボタン(#themeToggle)自体もヘッダーから削除済み・js/main.js側の関連処理も削除済み。 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#1F3A52;
    --accent:#1E93C7;
    --action:#F2803D;
    --bg:#FAFCFA;
    --surface:#FFFFFF;
    --text:#1B2622;
    --text-sub:#5B6B64;
    --border:#DCE6E0;
    --shadow-sm:0 1px 2px rgba(27,38,34,0.05);
    --shadow-md:0 4px 12px rgba(27,38,34,0.06);
  }
}
:root[data-theme="dark"]{
  --brand:#1F3A52;
  --accent:#1E93C7;
  --action:#F2803D;
  --bg:#FAFCFA;
  --surface:#FFFFFF;
  --text:#1B2622;
  --text-sub:#5B6B64;
  --border:#DCE6E0;
  --shadow-sm:0 1px 2px rgba(27,38,34,0.05);
  --shadow-md:0 4px 12px rgba(27,38,34,0.06);
}

/* ---- 2. リセット & 基本 ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px; /* スマホ下部固定バーの分の余白 */
  transition:background-color .2s ease,color .2s ease;
}
@media (min-width:1180px){
  body{ padding-bottom:0; }
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--text);
  line-height:1.5;
  margin:0 0 .6em;
  font-weight:700;
}
.num,.price,.tel-num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
ul{ margin:0; padding:0; }
li{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.inner{ max-width:1080px; margin:0 auto; padding:0 20px; }
section{ padding:56px 0; }
.bg-surface{ background:var(--surface); }
.bg-brand{ background:var(--brand); color:#F5FBF7; }
.bg-brand h2,.bg-brand h3{ color:#F5FBF7; }

.section-head{ text-align:center; max-width:640px; margin:0 auto 36px; }
.section-head .eyebrow{
  display:inline-block; font-family:var(--font-num); font-size:12.5px; font-weight:700;
  letter-spacing:.1em; color:var(--accent); text-transform:uppercase; margin-bottom:10px;
}
.section-head h2{ font-size:clamp(22px,4vw,30px); }
.section-head p{ color:var(--text-sub); font-size:14.5px; margin:0; }

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

/* ---- 3. ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:10px; font-weight:700; font-size:15px;
  border:1.5px solid transparent; transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
  text-decoration:none; line-height:1.2; white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-action{ background:var(--action); color:#fff; box-shadow:var(--shadow-sm); }
.btn-action:hover{ box-shadow:var(--shadow-md); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-outline{ background:transparent; border-color:currentColor; color:var(--brand); }
:root[data-theme="dark"] .btn-outline{ color:var(--text); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-outline{ color:var(--text); } }
.btn-outline.on-dark{ color:#fff; border-color:rgba(255,255,255,0.7); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn-disabled{ opacity:.55; cursor:not-allowed; }

.btn-group{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-group.center{ justify-content:center; }

/* ---- 4. ヘッダー ---- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  height:var(--header-h);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:0 16px; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand-logo{ display:flex; align-items:center; gap:10px; color:var(--text); min-width:0; flex:1 1 auto; overflow:hidden; }
.brand-logo:hover{ text-decoration:none; }
.brand-logo img{ height:50px; width:50px; object-fit:contain; flex:none; }
.brand-logo .brand-text{ font-family:var(--font-heading); font-weight:700; font-size:15px; line-height:1.3; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.brand-logo .brand-text small{ display:block; font-weight:400; font-size:10.5px; color:var(--text-sub); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* タグライン（電気工事・空調工事…）はナビと各種ボタンで幅が窮屈になる1340px未満では非表示にし、モバイルでのヘッダー横あふれを防ぐ */
@media (max-width:1339px){ .brand-logo .brand-text small{ display:none; } }
.header-actions{ flex:none; }

.main-nav ul{ display:flex; gap:3px; align-items:center; }
.main-nav .nav-ico{ display:none; }
.main-nav a{
  position:relative; display:flex; align-items:center; gap:6px;
  color:var(--text); font-size:13.5px; font-weight:500; letter-spacing:.01em; white-space:nowrap;
  padding:7px 9px; border-radius:999px;
  transition:color .25s ease, background-color .3s ease;
}
/* 現在地インジケーター：hoverでふわっと伸びる下線（中心から左右に広がる） */
.main-nav a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px;
  border-radius:2px; background:var(--accent);
  transform:scaleX(0); opacity:0; transform-origin:center;
  transition:transform .32s cubic-bezier(.22,.68,.32,1), opacity .32s ease;
}
.main-nav a:hover{ color:var(--accent); text-decoration:none; background:rgba(var(--accent-rgb),0.07); }
.main-nav a:hover::after{ transform:scaleX(1); opacity:1; }
.main-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.main-nav a.active{
  color:var(--accent); font-weight:700;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.03) 90%);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),0.14);
}
.main-nav a.active::after{
  transform:scaleX(1); opacity:1;
  background:linear-gradient(90deg, var(--accent), var(--brand));
  box-shadow:0 0 6px rgba(var(--accent-rgb),.5);
}
/* お問い合わせ：常時オレンジのやわらかいピルで目立たせる（他項目と同じ余白のまま） */
.main-nav a.nav-cta{ color:var(--action); background:rgba(var(--action-rgb),0.09); }
.main-nav a.nav-cta::after{ background:var(--action); }
.main-nav a.nav-cta:hover{ color:var(--action); background:rgba(var(--action-rgb),0.17); }
.main-nav a.nav-cta.active{
  color:var(--action); background:rgba(var(--action-rgb),0.17);
  box-shadow:inset 0 0 0 1px rgba(var(--action-rgb),0.26);
}
@media (prefers-reduced-motion:reduce){
  .main-nav a, .main-nav a::after, .main-nav .nav-ico{ transition:none!important; }
}

.header-actions{ display:flex; align-items:center; gap:10px; }
.header-tel{
  display:none; align-items:center; gap:6px; color:var(--brand); font-weight:700; font-size:15px;
}
.header-tel svg{ width:18px; height:18px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
}
.icon-btn svg{ width:18px; height:18px; }

.menu-toggle{
  width:40px; height:40px; border:none; background:transparent; border-radius:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1179px){
  .main-nav{
    position:fixed; inset:var(--header-h) 0 0 0; background:var(--bg);
    padding:18px 16px 28px; overflow-y:auto;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:6px; }
  .main-nav li{ border-bottom:none; }
  .main-nav a{
    display:flex; align-items:center; gap:14px;
    padding:13px 14px; font-size:16px; letter-spacing:.01em; white-space:normal;
    border-radius:14px;
  }
  .main-nav a::after{ display:none; } /* 縦並びでは下線ではなくピル背景で現在地を示す */
  .main-nav .nav-ico{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:34px; height:34px; border-radius:50%;
    background:rgba(var(--brand-rgb),0.07); color:var(--brand);
    transition:background-color .25s ease, color .25s ease, transform .25s ease;
  }
  .main-nav .nav-ico svg{ width:17px; height:17px; }
  .main-nav a:hover .nav-ico,
  .main-nav a:active .nav-ico{ background:rgba(var(--accent-rgb),0.16); color:var(--accent); transform:scale(1.08); }
  .main-nav a.active{
    background:linear-gradient(135deg, rgba(var(--accent-rgb),0.13), rgba(var(--accent-rgb),0.03));
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),0.16);
  }
  .main-nav a.active .nav-ico{ background:var(--accent); color:#fff; }
  .main-nav .nav-cta{
    margin-top:8px; justify-content:center;
    color:#fff; background:var(--action); font-weight:700; box-shadow:var(--shadow-sm);
  }
  .main-nav .nav-cta .nav-ico{ background:rgba(255,255,255,.22); color:#fff; }
  .main-nav .nav-cta:hover{ background:#E0722F; color:#fff; }
  .main-nav .nav-cta.active{ background:var(--action); color:#fff; box-shadow:var(--shadow-sm); }
}
@media (min-width:1180px){
  .menu-toggle{ display:none; }
  .header-tel{ display:inline-flex; }
}

/* ---- 5. 固定CTAバー(スマホ) ---- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:flex; box-shadow:0 -4px 16px rgba(0,0,0,0.12);
}
.sticky-cta a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 8px; font-weight:700; font-size:15px; color:#fff;
}
.sticky-cta a:hover{ text-decoration:none; }
.sticky-cta svg{ width:20px; height:20px; }
.sticky-tel{ background:var(--action); }
.sticky-line{ background:#06C755; position:relative; }
.sticky-line.is-pending{ background:#8A8F8C; }
.sticky-line .pending-badge{
  position:absolute; top:2px; right:6px; font-size:9px; background:rgba(255,255,255,.9); color:#333;
  border-radius:4px; padding:1px 5px; font-weight:700;
}
@media (min-width:1180px){ .sticky-cta{ display:none; } }

/* デスクトップ用フローティングCTA(右下) */
.float-cta{ display:none; }
@media (min-width:1180px){
  .float-cta{
    display:flex; flex-direction:column; gap:10px; position:fixed; right:24px; bottom:24px; z-index:250;
  }
  .float-cta a{
    display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; color:#fff;
    font-weight:700; box-shadow:var(--shadow-md);
  }
  .float-cta a:hover{ text-decoration:none; }
  .float-cta svg{ width:18px;height:18px; }
  .float-cta .fc-tel{ background:var(--action); }
  .float-cta .fc-line{ background:#06C755; }
  .float-cta .fc-line.is-pending{ background:#8A8F8C; }
}

/* ---- 6. エリア共通バー(電話・LINE・対応エリアの3点セット) ----
   2026-08-30: BOSS指摘により「枠」(背景・ボーダー・影)は撤去。テキストと見出しのみのすっきり表示に変更。
   ホームのヒーロー内では写真の電球を持つ手にかからないよう、.hero--home側で左寄せ＋幅制限をかけている。 */
.trust-bar{
  position:relative; z-index:10;
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:700px){ .trust-bar{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.trust-item{ display:flex; align-items:flex-start; gap:10px; }
.trust-item .ti-ico{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 1px 6px rgba(27,38,34,.14);
  color:var(--accent); display:flex;align-items:center;justify-content:center; flex:none;
}
.trust-item .ti-ico svg{ width:18px;height:18px; }
.trust-item h4{
  font-size:13.5px; color:var(--text-sub); font-weight:700; margin:0 0 2px;
  text-shadow:0 1px 3px rgba(255,255,255,.85), 0 1px 10px rgba(255,255,255,.55);
}
.trust-item p{
  margin:0; font-size:15px; font-weight:700;
  text-shadow:0 1px 3px rgba(255,255,255,.85), 0 1px 10px rgba(255,255,255,.55);
}
.trust-item p.tel-num{ font-size:20px; color:var(--brand); }
.trust-item a{ color:var(--text); }

/* ---- 7. ヒーロー ---- */
.hero{
  position:relative; padding:72px 0 100px; overflow:hidden; color:#fff;
  background:
    url('../assets/images/hero/genhp_bulb.jpg') 70% 38% / cover no-repeat;
  background-color:#0B1E30;
}
.hero .hero-copy{
  max-width:640px;
  margin:0 auto 0 clamp(60px, 18vw, 320px);
  padding:34px 38px;
}

/* ---- 7b. トップページ専用：ヒーロー＋3点セット＋選ばれる理由を1画面に集約 ---- */
.hero--home{
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  min-height:calc(100vh - var(--header-h));
  padding:40px 0 30px;
  /* 背景位置 68% 43% は電球のガラス部分がだいたい画面内に収まるよう調整した値。
     ※.hero-bulb-glow(電熱線への光エフェクト)は、この値と一致させる必要はない。
       2026-08-30以降はPC幅・スマホ幅で実際にレンダリングした画面を直接ピクセル計測して
       電熱線の位置に合わせているため、.hero-bulb-glow側のコメントを参照すること。 */
  background:url('../assets/images/hero/genhp_bulb.jpg') 68% 43% / cover no-repeat;
  background-color:#0B1E30;
}
.hero--home .hero-copy{ margin-left:clamp(40px, 14vw, 280px); padding:24px 30px 0; position:relative; z-index:2; }
/* home-trust-wrapは.innerクラス由来のmax-width:1080/margin:auto/padding:0 20pxを持つため、
   そのままだと.trust-barの左端がhero-copyより約200px右にずれて手にかかってしまう。
   ここで.innerの制約を打ち消し、hero--home全体の左端(0)基準に揃える(2026-08-30)。 */
.hero--home .home-trust-wrap{ width:100%; max-width:none; margin:0; padding:0; position:relative; z-index:2; }
/* 3点セットは写真右側の「電球を持つ手」にかからないよう、hero-copyと同じ左端に揃えて幅を制限する。
   44vw(上限680px)は1440px幅で実測して手前に十分な余白が残ることを確認済み(2026-08-30)。 */
.hero--home .trust-bar{
  margin:0 0 0 clamp(40px, 14vw, 280px);
  max-width:min(680px, 44vw);
}
.hero--home .home-why{ text-align:center; padding-bottom:2px; position:relative; z-index:2; }
/* 860〜1179px幅(ハンバーガーメニューになる中間サイズ)は3列だと1列あたりが狭すぎて
   電話番号などが折れすぎるため、フォントサイズは通常のまま1列縦積みにする(2026-08-30)。 */
@media (min-width:860px) and (max-width:1179px){
  .hero--home .trust-bar{ grid-template-columns:1fr; gap:10px; max-width:280px; }
}

/* 電球内部の電熱線(フィラメント)に密着させる光のエフェクト（radial-gradientの光の玉）。
   2026-08-30: BOSS指摘により「電球全体がぼんやり光る」→「電熱線だけがピンポイントで光る」に調整。
   位置はbackground-position(68% 43%)の基準点とは別に、実際にレンダリングしたPC幅(1440x900)・
   スマホ幅(375px)の画面をピクセル単位で確認し、電熱線が実際に映る座標を直接採用している
   （background-size:coverの縮小率がPCは横基準・スマホは縦基準で切り替わるため、基準点(68%,43%)の
   位置と実際の電熱線の見え方はPC/スマホで一致しない。位置を変える場合は両幅で再計測すること）。 */
.hero-bulb-glow{
  position:absolute;
  left:68%; top:39%;
  width:clamp(46px, 4.2vw, 80px); height:clamp(46px, 4.2vw, 80px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,251,230,.95) 0%,
    rgba(255,236,172,.55) 45%,
    rgba(255,221,140,.16) 72%,
    rgba(255,221,140,0) 100%);
  opacity:0;
  pointer-events:none;
  z-index:1;
  animation:bulbGlowIn 2s ease forwards;
  animation-delay:6s; /* JSが文字送り終了・ボタン表示のタイミングに応じて上書き */
}
@keyframes bulbGlowIn{
  from{ opacity:0; }
  to{ opacity:.85; }
}
@media (prefers-reduced-motion:reduce){
  .hero-bulb-glow{ animation:none !important; opacity:.8 !important; }
}
.hero--home .home-why .eyebrow{
  display:inline-block; font-family:var(--font-num); font-size:12px; font-weight:700;
  letter-spacing:.1em; color:#BFE0F2; text-transform:uppercase; margin-bottom:8px;
  text-shadow:0 2px 6px rgba(0,0,0,.55);
}
.hero--home .home-why h2{
  color:#fff; font-size:clamp(19px,2.6vw,25px); margin:0 0 8px;
  text-shadow:0 2px 6px rgba(0,0,0,.75), 0 6px 18px rgba(0,0,0,.55);
}
.hero--home .home-why p{
  color:rgba(255,255,255,.92); font-size:13.5px; margin:0 auto; max-width:620px;
  text-shadow:0 1px 5px rgba(0,0,0,.6);
}
.hero--home .home-why-links{ margin-top:10px !important; font-size:12.5px !important; }
.hero--home .home-why-links a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.hero--home .home-why-links a:hover{ color:#BFE0F2; }

/* スマホ幅ではスマホ固定CTAバー(高さ64px)がヒーロー最下部に重なるため、その分を差し引く */
@media (max-width:1179px){
  .hero--home{ min-height:calc(100vh - var(--header-h) - 64px); }
}

@media (max-width:859px){
  .hero--home{
    padding:16px 0 12px; gap:9px;
    /* 背景位置は基準の68% 43%のまま（電球の位置合わせを崩さないため変更しない） */
  }
  .hero--home .hero-copy{ padding:0 4px; margin:0 auto; }
  .hero--home .hero-line{ margin-bottom:4px; }
  .hero--home .hero-line--brand{ font-size:26px; margin-bottom:7px; }
  .hero--home .hero-line:not(.hero-line--brand){ font-size:14px; line-height:1.5; }
  .hero--home .hero-btns{ margin-top:6px; gap:8px; }
  .hero--home .hero-btns .btn{ padding:10px 20px; font-size:13.5px; }
  /* 3点セットはスマホ幅では写真右側の電球・手にかかるスペースが特に狭いため、
     3列並びではなく1列に縦積みにして、写真の手前(左側)に収まる幅に制限する。
     数値はPlaywrightで実機同等(375x812)にレンダリングして実測した値(2026-08-30)。 */
  .hero--home .trust-bar{
    grid-template-columns:1fr; gap:7px; padding:0;
    margin:0 0 0 12px; max-width:56%;
  }
  .hero--home .trust-item{
    flex-direction:row; align-items:center; text-align:left; gap:8px;
    min-width:0;
  }
  .hero--home .trust-item div{ min-width:0; width:100%; }
  .hero--home .trust-item h4,
  .hero--home .trust-item p{ overflow-wrap:break-word; word-break:break-word; }
  .hero--home .trust-item .ti-ico{ width:28px; height:28px; }
  .hero--home .trust-item .ti-ico svg{ width:14px; height:14px; }
  .hero--home .trust-item h4{ font-size:9.5px; line-height:1.3; }
  .hero--home .trust-item p{ font-size:11px; }
  .hero--home .trust-item p.tel-num{ font-size:13px; }
  .hero--home .home-why h2{ font-size:17px; margin-bottom:4px; }
  .hero--home .home-why p{ font-size:11.5px; }
  .hero--home .home-why-links{ display:none; }
  /* スマホ幅の電熱線位置はPlaywrightで実機同等(375x812)にレンダリングして実測した結果、
     PC版の基準値(68%,39%)とほぼ同じ(67.9%,39.7%)だったため、位置はPC版の値を継承し
     サイズのみスマホ向けに調整する(2026-08-30)。
     ※(注)以前ここに記載していた left:89% はデスクトップ版Edgeのウィンドウ最小幅の
       制約により実際より広い幅で計測してしまった誤った値だったため訂正済み。 */
  .hero-bulb-glow{
    width:clamp(28px, 12vw, 46px); height:clamp(28px, 12vw, 46px);
  }
}

/* ヒーローコピー：パネルなし、1文字ずつ時間差フェイドイン（全行を1本の文字送りとして連結） */
.hero-copy{ display:flex; flex-direction:column; }
.hero-line{
  margin:0 0 12px; color:#fff;
  font-family:"Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN",serif;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.8), 0 6px 22px rgba(0,0,0,.6);
}
.hero-line--brand{
  font-size:clamp(30px,6vw,50px); font-weight:800; letter-spacing:.03em;
  line-height:1.15; margin-bottom:18px;
}
.hero-line:not(.hero-line--brand){
  font-size:clamp(16.5px,2.6vw,21px); font-weight:600; line-height:1.7;
  color:#F1F8FF;
}

/* JSが1文字ずつ<span class="hero-char">を生成してこの中に差し込む */
.hero-chars{ display:inline; }
.hero-char{
  display:inline-block;
  opacity:0;
  transform:translateY(8px);
  animation:heroCharIn .55s cubic-bezier(.22,.68,.32,1) forwards;
  animation-delay:0s; /* JSが1文字ごとに上書き */
}

.hero-btns{
  margin-top:22px;
  opacity:0; transform:translateY(12px);
  animation:heroBtnsIn 1.2s ease forwards;
  animation-delay:5.2s; /* JSが実際の総文字数から再計算して上書き */
}
/* スマホ幅では確実に縦積み・幅いっぱいにして画面端のはみ出しを防ぐ */
@media (max-width:480px){
  .hero-btns{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
  .hero-btns .btn{ width:100%; }
}

/* ヒーロー内の「電話で相談する／お問い合わせフォームへ」は、詩的な5行コピーより
   視線を集めないよう控えめな下線テキストリンクに変更（BOSS指摘対応・2026-08-31）。
   タップ領域は padding で確保しつつ、塗り・枠は無くして存在感を抑える。
   ※ .btn-action / .btn-outline 自体は他ページ共通クラスのため直接編集せず、
     ヒーロー内だけに効くこの上書きで対応すること（他ページのボタンに影響させない）。 */
.hero--home .hero-btns .btn{
  background:transparent; border-color:transparent; box-shadow:none; border-radius:0;
  padding:12px 6px; font-size:14px; font-weight:600; letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.55); text-underline-offset:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.6); /* コピーより1段弱いが、写真の明るい部分でも読める強さに */
}
.hero--home .hero-btns .btn svg{ width:15px; height:15px; opacity:.85; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.hero--home .hero-btns .btn:hover{
  color:#fff; text-decoration-color:rgba(255,255,255,.95);
  background:transparent; box-shadow:none; transform:none;
}
@media (max-width:859px){
  .hero--home .hero-btns .btn{ padding:10px 4px; font-size:13px; }
}
@media (max-width:480px){
  .hero--home .hero-btns .btn{ justify-content:center; }
}

@keyframes heroCharIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes heroBtnsIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){
  .hero-char,.hero-btns{ animation:none !important; opacity:1 !important; transform:none !important; }
}

.page-hero{
  position:relative;
  background:linear-gradient(160deg, var(--brand), #13293B);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:#F5FBF7; padding:44px 0 34px; text-align:center;
}
.page-hero h1{ color:#fff; font-size:clamp(24px,4.4vw,34px); margin-bottom:8px; }
.page-hero p{ color:rgba(245,251,247,0.85); max-width:600px; margin:0 auto; font-size:14.5px; }
.breadcrumb{ font-size:12.5px; color:rgba(245,251,247,0.75); margin-bottom:10px; }
.breadcrumb a{ color:rgba(245,251,247,0.9); text-decoration:underline; }

/* lineup.html専用：タブ切替UIの上に載る見出しのため、他ページのpage-heroより
   縦幅を詰めたコンパクト版（BOSS指示・各タブを1画面に収めるための対応・2026-08-31） */
.page-hero--compact{ padding:22px 0 18px; }
.page-hero--compact h1{ font-size:clamp(20px,3.6vw,26px); margin-bottom:4px; }
.page-hero--compact p{ font-size:13px; }
.page-hero--compact .breadcrumb{ margin-bottom:6px; }

@media (max-width:639px){
  .page-hero{ padding:32px 0 26px; }
}

/* ---- 7c. サブページ見出し：実写真を背景に使う6ページ＋lineup.htmlタブ切替（2026-08-31・次郎チーム選定写真） ----
   BOSSの一貫した好み：画面全体を覆う濃いオーバーレイではなく、写真の透明感を活かしつつ
   見出し文字が読める程度の軽いオーバーレイ＋text-shadowで可読性を確保する。
   （上のpage-hero--works/--servicesは旧仕様＝濃いオーバーレイ(.82〜.88)のため、
     ここでは新規に軽いオーバーレイ(.28〜.42)のクラスを追加する。既存クラスは他に影響が
     無いことを確認済みのため変更しない） */
.page-hero--photo{ background-position:center; }
.page-hero--photo h1,
.page-hero--photo p,
.page-hero--photo .breadcrumb,
.page-hero--photo .breadcrumb a{
  text-shadow:0 2px 8px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);
}
.page-hero--about{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/about.jpg');
}
.page-hero--area{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/area.jpg');
}
.page-hero--voice{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/voice.jpg');
}
.page-hero--faq{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/faq.jpg');
}
.page-hero--assurance{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.28), rgba(19,41,59,.36)),
    url('../assets/images/page-hero/assurance.jpg');
}
.page-hero--contact{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/contact.jpg');
}
/* 2026-08-31追記：旧ページ（services/works/pricing.html＝lineup.htmlへ移動案内のみの中継ページ）と
   thanks.html（送信完了ページ）にも、BOSS指示で他ページと同じ写真ヒーローを反映する。
   thanks.htmlはcontact.jpgを流用するため専用クラスは不要（.page-hero--contactをそのまま使う）。 */
.page-hero--services{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/services.jpg');
}
.page-hero--works{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/works.jpg');
}
.page-hero--pricing{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/pricing.jpg');
}
@media (max-width:639px){
  .page-hero--about,.page-hero--area,.page-hero--voice,.page-hero--faq,.page-hero--contact,
  .page-hero--services,.page-hero--works,.page-hero--pricing{
    padding:40px 0 32px; min-height:170px;
  }
  .page-hero--assurance{ padding:40px 0 32px; min-height:170px; }
  .page-hero--about{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/about.jpg');
  }
  .page-hero--area{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/area.jpg');
  }
  .page-hero--voice{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/voice.jpg');
  }
  .page-hero--faq{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/faq.jpg');
  }
  .page-hero--assurance{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.36), rgba(19,41,59,.44)),
      url('../assets/images/page-hero/assurance.jpg');
  }
  .page-hero--contact{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/contact.jpg');
  }
  .page-hero--services{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/services.jpg');
  }
  .page-hero--works{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/works.jpg');
  }
  .page-hero--pricing{
    background-image:
      linear-gradient(180deg, rgba(var(--brand-rgb),.4), rgba(19,41,59,.5)),
      url('../assets/images/page-hero/pricing.jpg');
  }
}

/* lineup.html専用：タブに応じて.page-hero-photoの背景をJSで切り替える（対応工事/施工実績/料金表の3枚をフェード切替）。
   「主要取引先」タブには専用写真が無いため、対応工事タブと同じservices.jpgを使用する（なるは判断・2026-08-31）。 */
.page-hero--lineup{ position:relative; }
.page-hero--lineup > .inner{ position:relative; z-index:1; }
.page-hero-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .22s ease;
  opacity:1;
}
.page-hero-photo.is-fading{ opacity:0; }
.page-hero-photo[data-hero-bg="services"]{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/services.jpg');
}
.page-hero-photo[data-hero-bg="works"]{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/works.jpg');
}
.page-hero-photo[data-hero-bg="partners"]{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/services.jpg');
}
.page-hero-photo[data-hero-bg="pricing"]{
  background-image:
    linear-gradient(160deg, rgba(var(--brand-rgb),.32), rgba(19,41,59,.42)),
    url('../assets/images/page-hero/pricing.jpg');
}
@media (prefers-reduced-motion:reduce){
  .page-hero-photo{ transition:none !important; }
}

/* ---- 7d. サブページ写実ヒーロー：フルスクリーン化（BOSS指示・2026-08-31）----
   ホームの.hero--homeと同様、ヘッダー高さを除く画面いっぱい(100vh相当)に拡大する。
   見出し・リード文はセクション内で縦横中央に配置し、各ページ本来のコンテンツ
   (会社概要の表・対応エリアの地図・料金表・FAQのアコーディオン等)はこのセクションの
   下に続けてスクロール表示する、一般的なヒーロー構成にする。
   lineup.htmlはタブ切替時に.page-hero-photoの背景がフェードする実装はそのまま維持し、
   .page-hero自体の高さだけをここでフルスクリーンに上書きする（併せてlineup.html側の
   page-hero--compactクラスは廃止済み・下記コメント参照）。
   ※このブロックは上の7c(旧・帯状ヒーロー時代のmax-width:639px上書き含む)より必ず後に
     記述すること。同じ単一クラスのセレクタ同士がぶつかった場合、CSSは記述順で後の
     ルールが勝つため、ここより前に書くと旧ルールのpadding:40px/min-height:170pxに
     巻き戻ってしまう（2026-08-31 なるは確認済み）。 */
.page-hero--photo{
  min-height:calc(100vh - var(--header-h));
  padding:70px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-hero--photo .inner{ width:100%; }
.page-hero--photo h1{ font-size:clamp(28px,5vw,44px); margin-bottom:12px; }
.page-hero--photo p{ font-size:16px; max-width:640px; }
.page-hero--photo .breadcrumb{ margin-bottom:14px; }

@media (max-width:1179px){
  /* スマホ固定CTAバー(高さ64px)がヒーロー最下部に重なるため、.hero--homeと同じ考え方で差し引く */
  .page-hero--photo{ min-height:calc(100vh - var(--header-h) - 64px); }
}
@media (max-width:639px){
  .page-hero--photo{ padding:56px 0; }
  .page-hero--photo h1{ font-size:clamp(24px,7vw,30px); }
  .page-hero--photo p{ font-size:14px; }
}

/* ---- 8. カード類 ---- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm);
}
.card h3{ font-size:17px; margin-bottom:8px; color:var(--brand); }
.card p{ margin:0; color:var(--text-sub); font-size:14px; }
/* .card の外（thanks.html等の写真ヒーロー直下で使う場合）でもアイコンが等身大で
   崩れて表示されないよう、既定サイズを持たせておく（2026-08-31 なるは追記）。
   .card内で使う場合は下の.card .card-icoがより詳細度が高く優先される。 */
.card-ico{
  width:56px;height:56px;border-radius:50%; background:rgba(255,255,255,0.92); color:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
.card-ico svg{ width:28px;height:28px; }
.card .card-ico{
  width:46px;height:46px;border-radius:8px; background:rgba(var(--brand-rgb),0.08); color:var(--brand);
  display:flex;align-items:center;justify-content:center; margin-bottom:14px;
}
.card .card-ico svg{ width:24px;height:24px; }

.card-top-accent{ border-top:2px solid var(--accent); }

.badge{
  display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:rgba(var(--accent-rgb),0.1); color:var(--accent); letter-spacing:.02em;
}
.badge-soon{ background:rgba(var(--action-rgb),0.1); color:var(--action); }
.badge-done{ background:rgba(var(--brand-rgb),0.1); color:var(--brand); }
.badge-muted{ background:var(--border); color:var(--text-sub); }

/* ---- 9. サービス一覧 ---- */
.service-card{ position:relative; }
.service-card .badge{ position:absolute; top:18px; right:18px; }
.service-card ul{ margin-top:12px; }
.service-card li{ position:relative; padding-left:18px; font-size:13.5px; color:var(--text); margin-bottom:4px; }
.service-card li::before{ content:""; position:absolute; left:0; top:9px; width:6px;height:6px;border-radius:50%; background:var(--accent); }

/* lineup.htmlの「対応工事」タブのみ：3列グリッド化に合わせてカードを一段コンパクトにし、
   タブがビューポート内に収まりやすくする（BOSS指示・2026-08-31）。他ページのcard/service-cardには影響しない。 */
#tab-panel-services .grid{ gap:10px; }
#tab-panel-services .card{ padding:12px 14px; }
#tab-panel-services .card h3{ font-size:14.5px; margin-bottom:3px; }
#tab-panel-services .card p{ font-size:12px; line-height:1.55; }
#tab-panel-services .card .card-ico{ width:32px; height:32px; margin-bottom:6px; }
#tab-panel-services .card .card-ico svg{ width:16px; height:16px; }
#tab-panel-services .service-card .badge{ top:12px; right:12px; font-size:10px; padding:2px 8px; }
#tab-panel-services .service-card ul{ margin-top:8px; }
#tab-panel-services .service-card li{ font-size:11.5px; padding-left:14px; margin-bottom:2px; line-height:1.5; }
#tab-panel-services .service-card li::before{ width:5px; height:5px; top:7px; }
#tab-panel-services .note-box{ font-size:12.5px; padding:9px 14px; margin-top:12px !important; }

/* ---- 10. 料金表 ---- */
.price-table{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.price-table th,.price-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:14.5px; }
.price-table thead th{ background:var(--brand); color:#fff; font-weight:700; }
.price-table td.price{ font-size:19px; font-weight:700; color:var(--brand); text-align:right; }
.price-table tbody tr:last-child td{ border-bottom:none; }
.price-note{
  margin-top:16px; background:rgba(var(--accent-rgb),0.08); border-left:3px solid var(--accent);
  padding:14px 18px; border-radius:0 8px 8px 0; font-size:13.5px; color:var(--text);
}
.price-check{ margin:18px 0 0; }
.price-check li{ position:relative; padding-left:22px; font-size:14px; margin-bottom:6px; }
.price-check li::before{ content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700; }

/* lineup.html「料金表」タブ専用：table+補足／その他工事料金を2カラムにして縦の詰め込みを減らす
   （BOSS指示・各タブを1画面に収めるための対応・2026-08-31） */
.pricing-layout{ display:grid; gap:20px; }
.pricing-col-side .card{ margin:0; }
.pricing-side-head{ text-align:left; margin:0 0 10px; max-width:none; }
@media (min-width:860px){
  .pricing-layout{ grid-template-columns:1.15fr 1fr; align-items:start; gap:28px; }
}
/* このタブは情報量に対して余白が広めだったため、文字サイズ・行間を一段詰めてコンパクト化 */
#tab-panel-pricing .price-table th,
#tab-panel-pricing .price-table td{ padding:9px 12px; font-size:13.5px; }
#tab-panel-pricing .price-table td.price{ font-size:16.5px; }
#tab-panel-pricing .price-check{ margin-top:12px; }
#tab-panel-pricing .price-check li{ font-size:12.5px; margin-bottom:4px; line-height:1.5; }
#tab-panel-pricing .price-note{ margin-top:10px; padding:10px 14px; font-size:12px; }
#tab-panel-pricing .pricing-side-head p{ font-size:12.5px; }
#tab-panel-pricing .pricing-col-side .card{ padding:16px; }
#tab-panel-pricing .pricing-col-side .card p{ font-size:12.5px; margin-bottom:10px !important; }

/* ---- 11. 施工実績 ---- */
.case-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.case-head{ background:var(--brand); color:#fff; padding:18px 22px; }
.case-head h3{ color:#fff; margin:6px 0 0; font-size:18px; }
.case-body{ padding:22px; }
.spec-table{ width:100%; border-collapse:collapse; font-size:14px; margin-bottom:22px; }
.spec-table th,.spec-table td{ border-bottom:1px solid var(--border); padding:9px 8px; text-align:left; vertical-align:top; }
.spec-table th{ width:120px; color:var(--text-sub); font-weight:500; white-space:nowrap; }

.photo-frame{
  position:relative; aspect-ratio:4/3; background:var(--bg); border:1px dashed rgba(var(--brand-rgb),0.18);
  border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; }
.photo-frame .fallback{ text-align:center; color:var(--text-sub); font-size:12px; padding:10px; }
.photo-frame .fallback svg{ width:26px;height:26px; margin:0 auto 6px; display:block; opacity:.6; }
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
.gallery figcaption{ font-size:12px; color:var(--text-sub); text-align:center; margin-top:6px; }

.placeholder-case{
  border:1px dashed rgba(var(--brand-rgb),0.18); border-radius:var(--radius); padding:28px 22px; text-align:center;
  background:var(--surface); color:var(--text-sub);
}
.placeholder-case h3{ color:var(--text); font-size:16px; }

/* ---- 12. FAQ アコーディオン ---- */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:18px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:var(--font-heading); font-weight:700; font-size:15.5px; color:var(--text);
}
.faq-q .q-mark{ color:var(--accent); margin-right:8px; }
.faq-q .plus{ flex:none; width:22px;height:22px; position:relative; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .2s ease; }
.faq-q .plus::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.faq-q .plus::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); }
.faq-item.is-open .plus::after{ transform:translateX(-50%) scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a-inner{ padding:0 4px 20px 30px; color:var(--text-sub); font-size:14.5px; }
.faq-item.is-open .faq-a{ max-height:400px; }

/* ---- 13. お客様の声・準備中 ---- */
.notice-box{
  border:1px dashed rgba(var(--brand-rgb),0.18); background:var(--surface); border-radius:var(--radius);
  padding:32px 24px; text-align:center; color:var(--text-sub);
}
.notice-box h3{ color:var(--text); }

/* ---- 14. フォーム ---- */
.form-grid{ display:grid; gap:18px; }
.form-row > label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.form-row .req{ color:var(--action); font-size:11px; margin-left:4px; }
.form-row input:not([type="radio"]):not([type="checkbox"]),
.form-row select,
.form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px;
  font-size:15px; background:var(--surface); color:var(--text); font-family:inherit;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.radio-row{ display:flex; flex-wrap:wrap; gap:10px 18px; }
.radio-row label{ font-weight:400; display:flex; align-items:center; gap:6px; font-size:14px; }
.radio-row input[type="radio"]{ width:16px; height:16px; flex:none; margin:0; accent-color:var(--accent); }
.form-hint{ font-size:12px; color:var(--text-sub); margin-top:4px; }
.contact-methods{ display:grid; gap:16px; margin-bottom:40px; }
@media (min-width:760px){ .contact-methods{ grid-template-columns:repeat(3,1fr); } }
.contact-method{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; text-align:center; }
.contact-method .cm-ico{ width:48px;height:48px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; color:#fff; }
.contact-method .cm-ico svg{ width:24px;height:24px; }

/* ---- 15. 安心・保証 ---- */
.trust-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:700px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
.trust-card{ background:rgba(var(--accent-rgb),0.07); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.trust-card h3{ font-size:15.5px; color:var(--brand); display:flex; align-items:center; gap:8px; }
.trust-card h3 svg{ width:20px;height:20px; color:var(--accent); flex:none; }
.trust-card dl{ margin:10px 0 0; font-size:13.5px; }
.trust-card dt{ color:var(--text-sub); margin-top:8px; font-weight:400; }
.trust-card dd{ margin:2px 0 0; font-weight:400; }

/* ---- 16. 会社概要テーブル ---- */
.profile-table{ width:100%; border-collapse:collapse; }
.profile-table th,.profile-table td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top; }
.profile-table th{ width:130px; color:var(--text-sub); font-weight:500; white-space:nowrap; }

/* ---- 17. タイムライン(沿革) ---- */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:6px; top:4px; bottom:4px; width:1px; background:var(--border); }
.timeline-item{ position:relative; padding-bottom:26px; }
.timeline-item::before{ content:""; position:absolute; left:-26px; top:4px; width:10px;height:10px;border-radius:50%; background:var(--accent); border:2px solid var(--bg); }
.timeline-item .t-year{ font-family:var(--font-num); font-weight:700; color:var(--brand); font-size:15px; }
.timeline-item p{ margin:4px 0 0; color:var(--text-sub); font-size:14px; }

/* ---- 18. フッター ---- */
.site-footer{ background:var(--brand); color:#EAF3EE; padding:48px 0 20px; margin-top:60px; }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; margin-bottom:32px; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-brand{ display:flex; gap:12px; }
.footer-brand img{ height:44px; width:44px; object-fit:contain; }
.footer-brand p{ margin:0 0 4px; font-size:13px; color:rgba(234,243,238,0.85); }
.footer-brand .fb-name{ font-family:var(--font-heading); font-size:16px; font-weight:700; color:#fff; margin-bottom:6px; }
.footer-col h4{ color:#fff; font-size:13.5px; letter-spacing:.03em; margin-bottom:12px; }
.footer-col ul li{ margin-bottom:8px; }
.footer-col a{ color:rgba(234,243,238,0.85); font-size:13.5px; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); padding-top:18px; display:flex; flex-direction:column; gap:14px; }
.footer-recruit{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding-bottom:14px; border-bottom:1px dashed rgba(255,255,255,0.18); }
.footer-recruit .fr-label{ font-size:12px; color:rgba(234,243,238,0.7); }
.footer-recruit a{ font-size:12.5px; font-weight:700; color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-recruit a:hover{ color:var(--accent); }
.footer-legal{ font-size:11.5px; color:rgba(234,243,238,0.65); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; }

/* ---- 19. 対応エリア地図 ---- */
.map-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.map-wrap iframe{ width:100%; height:340px; border:0; display:block; }
.area-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 20px; margin-top:14px; }
@media (min-width:640px){ .area-list{ grid-template-columns:repeat(3,1fr); } }
.area-list li{ font-size:14px; padding:6px 0; border-bottom:1px dashed var(--border); }

/* ---- 20. 数字カウンター ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (min-width:700px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{ text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 10px; }
.stat-card .num{ font-size:clamp(26px,4vw,34px); font-weight:800; color:var(--accent); display:block; }
.stat-card .num sub{ font-size:14px; font-weight:700; }
.stat-card .lbl{ font-size:12.5px; color:var(--text-sub); margin-top:4px; }

/* ---- 22. タブUI（対応工事／施工実績／主要取引先／料金表） ---- */
/* 各タブがビューポート内に収まりやすいよう、見出し・ナビ・パネルの余白を
   全体的に詰めている（BOSS指示・2026-08-31）。lineup.html専用クラスのため他ページには影響しない。 */
.tabs-section{ padding:24px 0 40px; }
.tabs-section .section-head{ margin-bottom:16px; }
.tabs-shell{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.tabs-nav{
  position:relative; display:flex; gap:4px;
  border-bottom:1px solid var(--border);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; background:var(--surface);
  padding:6px 6px 0;
}
.tabs-nav::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex:none; display:flex; align-items:center; gap:9px;
  padding:11px 20px; background:none; border:none;
  border-radius:10px 10px 0 0;
  font-family:var(--font-heading); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  color:var(--text-sub); white-space:nowrap; position:relative;
  transition:color .25s ease, background .3s ease, box-shadow .3s ease;
}
.tab-btn svg{
  width:18px; height:18px; flex:none; opacity:.65;
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,.68,.32,1);
}
.tab-btn:hover{ color:var(--brand); background:rgba(var(--brand-rgb),0.05); }
.tab-btn:hover svg{ opacity:.9; }
.tab-btn[aria-selected="true"]{
  color:var(--accent); font-weight:700;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.02) 85%);
  box-shadow:0 -6px 16px -8px rgba(var(--accent-rgb),0.35);
}
.tab-btn[aria-selected="true"] svg{ opacity:1; color:var(--accent); transform:scale(1.16); }
.tab-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:8px; }
.tab-label-sub{ display:block; font-size:10.5px; font-weight:500; color:var(--text-sub); letter-spacing:.03em; }

.tabs-indicator{
  position:absolute; left:0; bottom:-1px; height:3px; width:0; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg, var(--accent), var(--brand));
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.5);
  transition:left .38s cubic-bezier(.22,.68,.32,1), width .38s cubic-bezier(.22,.68,.32,1);
}
@media (prefers-reduced-motion:reduce){ .tabs-indicator{ transition:none; } }

.tabs-panels{ padding:20px 28px 8px; position:relative; }
.tab-panel[hidden]{ display:none; }
.tab-panel{
  opacity:1; transform:translateY(0) scale(1);
  transition:opacity .32s cubic-bezier(.22,.68,.32,1), transform .32s cubic-bezier(.22,.68,.32,1);
}
.tab-panel.is-entering{ opacity:0; transform:translateY(10px) scale(.994); }
.tab-panel.is-leaving{ opacity:0; transform:translateY(-8px) scale(.994); transition-duration:.15s; }
@media (prefers-reduced-motion:reduce){
  .tab-panel{ transition:none !important; }
  .tab-panel.is-entering,.tab-panel.is-leaving{ opacity:1 !important; transform:none !important; }
}

@media (max-width:639px){
  .tab-btn{ padding:10px 14px; font-size:13.5px; gap:6px; }
  .tab-btn svg{ width:16px; height:16px; }
  .tabs-panels{ padding:16px 16px 4px; }
}

/* タブ内では独立セクションの上下余白を詰める */
.tab-panel > .tp-block{ margin-bottom:24px; }
.tab-panel > .tp-block:last-child{ margin-bottom:0; }
.tp-head{ text-align:center; max-width:640px; margin:0 auto 16px; }
.tp-head .eyebrow{
  display:inline-block; font-family:var(--font-num); font-size:12px; font-weight:700;
  letter-spacing:.1em; color:var(--accent); text-transform:uppercase; margin-bottom:8px;
}
.tp-head h3{ font-size:clamp(19px,3.4vw,24px); margin-bottom:6px; }
.tp-head p{ color:var(--text-sub); font-size:14px; margin:0; }

/* 主要取引先／認定・特約店 一覧 */
.partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:859px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479px){ .partner-grid{ grid-template-columns:1fr; } }
.partner-card{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:8px; padding:14px 16px; font-size:13.5px; font-weight:700; color:var(--text);
}
.partner-ico{ display:flex; flex:none; color:var(--accent); }
.partner-ico svg{ width:18px; height:18px; }
.partner-card--cert{ border-left-color:var(--action); }
.partner-card--cert .partner-ico{ color:var(--action); }
.partner-card .pc-badge{
  margin-left:auto; flex:none; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px;
  background:rgba(var(--action-rgb),0.12); color:var(--action); letter-spacing:.02em; white-space:nowrap;
}
.partner-grid--cert{ max-width:640px; }

/* ---- 21. ユーティリティ ---- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.text-sub{ color:var(--text-sub); }
.note-box{
  background:rgba(var(--action-rgb),0.08); border-left:3px solid var(--action); border-radius:0 8px 8px 0;
  padding:14px 18px; font-size:13.5px; margin-top:18px;
}
hr.sep{ border:none; border-top:1px solid var(--border); margin:40px 0; }