/* ===== header（Figma 14511:48067）1440×80 / px30 py16 / 白 ===== */
/* あおさん指示 A-1④「ヘッダーは常に固定し追従」→ absolute から fixed へ（どちらもフローの外なので下のレイアウトは変わらない） */
.header{position:fixed;top:0;left:0;z-index:10;width:100%;height:80px;padding:16px var(--sp-side-l);background:var(--c-base);display:flex;align-items:center;justify-content:space-between}
/* ロゴ: 168×45の枠にPNGをクロップ配置（Figma: w110.83% h137.93% left-5.42% top-18.47%） */
.header__logo{position:relative;display:block;width:168px;height:45px;overflow:hidden;flex:none}
.header__logo img{position:absolute;left:-5.42%;top:-18.47%;width:110.83%;height:137.93%;max-width:none}
.header__right{display:flex;align-items:center;gap:40px;flex:none}
/* グロナビ */
.gnav{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:auto}   /* 「コラム」追加（2026-09-15）で6項目→固定幅455をやめて内容幅に */
.gnav__link{display:flex;align-items:center;gap:6px;padding:8px 4px;font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.14px;white-space:nowrap}
.gnav__arrow{width:12px;height:15px;flex:none}
/* 連絡先ブロック */
.header__contact{display:flex;align-items:center;gap:20px}
.header__info{display:flex;flex-direction:column;align-items:center}
.header__hours{display:flex;align-items:center;gap:5px}
.header__badge{display:inline-flex;align-items:center;justify-content:center;padding:0 6px;background:var(--c-main);color:var(--c-inverse);font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.12px;border-radius:var(--r-s);white-space:nowrap}
.header__hours-text{font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px;white-space:nowrap}
.header__tel{display:flex;align-items:center;gap:4px}
.header__tel svg{width:22px;height:22px;flex:none}
.header__tel-num{font-weight:800;font-size:22px;line-height:1.2;text-align:right;white-space:nowrap}
.header__cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;background:var(--c-accent);color:var(--c-inverse);border-radius:var(--r-m);font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.14px;white-space:nowrap}
/* SP専用部品（ハンバーガーボタン・全画面メニュー）はPCでは出さない */
.header__menu-btn,.spnav{display:none}

/* ===== SP（768px以下）: header（Figma 14600:69662）375×65 / px18 py10 ===== */
/* ヘッダーだけは1024px以下でハンバーガーに切り替える。
   ロゴ＋ナビ6項目＋受付時間＋TEL＋CTA を769〜1024pxに収めると文字が潰れて読めなくなるため。
   （SPカンプは375。769〜1024はカンプ未支給のため、SPのヘッダーをそのまま拡張して使う） */
@media (max-width:1024px){
  .header{height:65px;padding:10px var(--sp-side-l)}
  /* メニュー展開中はヘッダーを固定し、ロゴ・閉じるボタンを常に見せる */
  .header.is-menu-open{position:fixed}
  /* ロゴ 130×34（Figma: w110.83% h142.38% left-5.42% top-23.62%） */
  .header__logo{width:130px;height:34px}
  .header__logo img{top:-23.62%;height:142.38%}
  .header__right{display:none}
  /* ハンバーガーボタン 45×45 / bg main / r3 / p10。中身は幅20の1.5px線×3（白・#b4e7ff・白）gap4 */
  .header__menu-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:none;width:45px;height:45px;padding:10px;background:var(--c-main);border-radius:3px}
  .header__menu-icon{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:20px;height:12.5px}
  .header__menu-icon span{display:block;width:100%;height:1.5px;background:var(--c-base);flex:none;transition:transform .3s var(--ease-out-quint,ease),opacity .3s,background-color .3s}
  .header__menu-icon span:nth-child(2){background:#b4e7ff}
  /* 開いた状態は「×」。Figma（Frame 1321318273）実測: 20pxの線2本を ±36.87°（atan 12/16）で交差させた 16×12 のバツ、
     左上→右下が白・右上→左下が #b4e7ff、太さ1.5px、ボタン中央（45px → 22.5）に配置。中央線は消す */
  .header__menu-btn[aria-expanded="true"] .header__menu-icon span:nth-child(1){transform:translateY(5.5px) rotate(36.87deg)}
  .header__menu-btn[aria-expanded="true"] .header__menu-icon span:nth-child(2){opacity:0}
  .header__menu-btn[aria-expanded="true"] .header__menu-icon span:nth-child(3){transform:translateY(-5.5px) rotate(-36.87deg);background:#b4e7ff}

  /* ---- 全画面メニュー（figma_sp_hamburger_open.png 実測）: bg base3 / pt100 px24 pb80 ----
     header（z-index:10・固定）のスタッキング文脈内で z-index:-1 → ヘッダー白帯の下・ページ本体の上に敷く */
  .spnav:not([hidden]){display:block}
  .spnav{position:fixed;inset:0;z-index:-1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:100px 24px 80px;background:var(--c-base3)}
  /* A-9: メニューは上から下へ降りてくる（main.js が hidden を外した直後に .is-open を付ける。閉じるときは transitionend 後に hidden） */
  .spnav{transform:translateY(-100%);transition:transform .5s var(--ease-out-quint,ease)}
  .spnav.is-open{transform:none}
  /* リスト: 各行 border-t #c2cde0 / px4 py20 / 18px medium lh1.6（1行=70px）。最終行は border-b */
  .spnav__list{border-bottom:1px solid var(--c-border)}
  .spnav__item{border-top:1px solid var(--c-border)}
  .spnav__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 4px;font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.18px;text-align:left;color:var(--c-text)}
  .spnav__arrow{width:14px;height:14px;flex:none}
  .spnav__arrow .ic-bar{fill:var(--c-main2)}
  .spnav__arrow .ic-chev{fill:none;stroke:var(--c-main);stroke-width:1.5}
  /* 事業案内の「＋／−」 14px / 1.5px。横棒 #01a0ea・縦棒 #1549a0（あおさん修正 B-1: Rectangle 116 の色）
     開くと縦棒が回転しながら消えて「−」（#01a0ea）になる（A-9 トグルアニメ） */
  .spnav__plus{position:relative;width:14px;height:14px;flex:none}
  .spnav__plus::before,.spnav__plus::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:var(--c-main2)}
  .spnav__plus::after{background:var(--c-main);transform:rotate(90deg);transition:transform .4s var(--ease-out-quint,ease),opacity .4s var(--ease-out-quint,ease)}
  .spnav__toggle[aria-expanded="true"] .spnav__plus::after{transform:rotate(0deg);opacity:0}
  /* アコーディオン（A-9）: 包み .spnav__acc の grid-template-rows を 0fr→1fr で開閉。中身の上下パディングは閉じたとき0 */
  .spnav__acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out-quint,ease)}
  .spnav__acc.is-open{grid-template-rows:1fr}
  /* アコーディオン中身: pt4 pb20 / gap12 / 各行80px = サムネ120×80 ＋ gap12 ＋ 15px ＋ 右端矢印 */
  .spnav__sub{display:flex;flex-direction:column;gap:12px;min-height:0;padding:0;overflow:hidden;visibility:hidden;transition:padding .45s var(--ease-out-quint,ease),visibility 0s .45s}
  .spnav__acc.is-open > .spnav__sub{padding:5px 0 20px;visibility:visible;transition-delay:0s,0s}
  .spnav__sub-link{display:flex;align-items:center;gap:12px;height:80px;padding:0 10px 0 9px}
  /* サムネ3枚は 120×80・角丸3px（あおさん修正 B-1: Frame 1321318286） */
  .spnav__thumb{position:relative;flex:none;width:120px;height:80px;border-radius:3px;overflow:hidden}
  .spnav__thumb img{width:100%;height:auto}
  /* 01 はSP事業カードと同じクロップ（タブレット寄り: w172.7% h174.4% left-38.35% top-59.44%） */
  .spnav__thumb--01 img{position:absolute;left:-38.35%;top:-59.44%;width:172.7%;height:174.4%;max-width:none}
  /* 03（5:4画像）も上2枚と同じ120×80に揃える（あおさん修正 B-1: Frame 1321318275）。比率は保ったまま上下をトリミング */
  .spnav__thumb--03 img{width:100%;height:100%;object-fit:cover;object-position:center}
  .spnav__sub-text{flex:1 1 auto;min-width:0;font-size:15px;font-weight:500;line-height:1.6;letter-spacing:.15px}
  /* ボタン群: リスト下 gap32 / w303 中央 / gap16 */
  .spnav__btns{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:32px}
  .spnav__btn{display:flex;align-items:center;gap:40px;width:303px;padding:16px 16px 16px 24px;border-radius:var(--r-m);font-size:16px;font-weight:500;line-height:1.6;letter-spacing:.16px;white-space:nowrap}
  .spnav__btn-label{display:flex;align-items:center;flex:1 0 0;min-width:0;padding-bottom:1px}
  .spnav__btn-icon{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;padding:10px;background:var(--c-main);border-radius:3px;overflow:hidden}
  .spnav__btn-icon svg{width:12px;height:12px;flex:none;max-width:none}
  .spnav__btn-icon .ic-bar{fill:#b4e7ff}
  .spnav__btn-icon .ic-chev{fill:none;stroke:#fff;stroke-width:1.5}
  .spnav__btn--accent{background:var(--c-accent);color:var(--c-inverse)}
  .spnav__btn--white{background:var(--c-base);border:1px solid var(--c-border2);color:var(--c-text-sub)}
}

/* ===== 1025〜1200px: PCヘッダーのまま余白と間隔を詰めて収める ===== */
@media (min-width:1025px) and (max-width:1200px){
  .header{padding:16px 24px}
  .header__right{gap:24px}
  .gnav{width:auto;gap:14px}
  .gnav__link{padding:8px 2px;font-size:13px}
  .header__contact{gap:14px}
  .header__cta{padding:12px 16px;font-size:13px}
  .header__tel-num{font-size:20px}
}

/* ===== メガメニュー（Figma 14662:30643 ヘッダー展開状態 1440×444。上80がヘッダー、その下364がパネル）=====
   PC（1025px以上）で「事業案内」にホバー／フォーカスすると main.js が hidden を外して .is-open を付ける。1024px以下はハンバーガー内アコーディオンのまま。
   パネル: 白 / pt24 pr30 pb48 pl120 / 左に Title（事業案内＋Service 80px）＋「事業案内TOP」ボタン 260 / 右に3カード 268 gap32 */
.mega{position:absolute;left:0;right:0;top:80px;display:flex;align-items:flex-start;justify-content:space-between;gap:40px;padding:24px 30px 48px max(30px,calc((100% - 1200px) / 2));background:var(--c-base);opacity:0;translate:0 -8px;transition:opacity .3s var(--ease-out-quint,ease),translate .3s var(--ease-out-quint,ease)}
.mega.is-open{opacity:1;translate:0 0}
.mega[hidden]{display:none}
.mega__head{display:flex;flex-direction:column;align-items:flex-start;gap:56px;width:260px;flex:none}
.mega__label{display:flex;align-items:center;gap:8px;font-size:var(--fs-body-m);font-weight:500;line-height:1.6;letter-spacing:.16px;white-space:nowrap}
.mega__label img{width:17px;height:10px;flex:none}
.mega__en{margin-top:6px;font-family:var(--font-en);font-weight:700;font-size:80px;line-height:1;letter-spacing:-1px;white-space:nowrap;font-feature-settings:normal}   /* Chrome の Lato はインク幅が広いため実測補正（TOP の .sec-title__en--service と同じ） */
.mega__list{display:grid;grid-template-columns:repeat(3,minmax(0,268px));gap:32px;width:868px;max-width:calc(100% - 300px)}
.mega__item{display:flex;flex-direction:column;gap:16px;min-width:0}
.mega__main{display:flex;flex-direction:column;gap:16px;color:var(--c-text)}
/* 写真 268×180 / r5（原本を同比率で切り出した2x画像。比率は変えない） */
.mega__img{display:block;width:100%;aspect-ratio:268/180;border-radius:var(--r-m);overflow:hidden}
.mega__img img{width:100%;height:100%;object-fit:cover}
.mega__title{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px;white-space:nowrap;transition:color .35s var(--ease-out-quint,ease)}
.mega__icon{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;padding:10px;background:var(--c-main);border-radius:3px}
.mega__icon svg{width:14px;height:14px;flex:none;max-width:none}
.mega__icon .ic-bar{fill:#b4e7ff}
.mega__icon .ic-chev{fill:none;stroke:#fff;stroke-width:1.5}
.mega__sub{display:flex;flex-direction:column;gap:12px}
.mega__sub-link{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-body-s);font-weight:500;line-height:1.2;letter-spacing:.14px;white-space:nowrap;transition:color .35s var(--ease-out-quint,ease)}
.mega__sub-arrow{width:12px;height:12px;flex:none}
.mega__sub-arrow .ic-bar{fill:var(--c-main2)}
.mega__sub-arrow .ic-chev{fill:none;stroke:var(--c-main);stroke-width:1.3}
@media (hover:hover){
  .mega__main:hover .mega__title,.mega__sub-link:hover{color:var(--c-main)}
}
.mega__main:focus-visible,.mega__sub-link:focus-visible{outline:2px solid var(--c-main2);outline-offset:3px}
/* トリガーが開いている間は矢印を上向きに（animation.css のホバー回転と同じ値） */
.gnav__link[aria-expanded="true"] .gnav__arrow{transform:rotate(180deg)}
.gnav__link[aria-expanded="true"]{color:var(--c-main)}
@media (max-width:1024px){.mega{display:none!important}}
@media (min-width:1025px) and (max-width:1200px){
  .mega{gap:24px}
  .mega__head{width:220px;gap:32px}
  .mega__en{font-size:64px}
  .mega__list{gap:20px;max-width:calc(100% - 244px)}
  .mega__title{font-size:17px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.mega{transition:none}}