@charset "utf-8";

/*ベーシックStyle*/
/*基本的にはこれ読み込んでおく*/

/* ============================================================
   カラーパレット（全ペア WCAG 2.2 AA を超える余裕をもって検証済み）
   - 本文 : 背景        7:1 以上
   - 注釈 : 背景        4.5:1 以上
   - 非テキスト : 背景  3:1 以上
   ============================================================ */
:root{
  /* テキスト */
  --c-text:        #1f2937; /* 本文（白背景で 14.68:1） */
  --c-note:        #525a66; /* 注釈（白背景で 6.97:1） */
  --c-navy:        #1e3a8a; /* 見出し・ブランド（白背景で 10.36:1） */
  --c-navy-deep:   #16295e; /* 濃紺テキスト（白背景で 13.05:1）top.css の吹き出し等で使用 */
  --c-gold-text:   #6b5310; /* 金色系テキスト（白背景で 7.32:1） */
  /* 背景 */
  --c-bg:          #ffffff;
  --c-bg-section:  #eef2f8; /* 淡いブルーグレーのセクション背景 */
  --c-bg-cream:    #f6f1e2; /* 創業バッジの背景 */
  --c-bg-footer:   #16295e; /* フッター・濃紺帯 */
  --c-note-on-navy:#c3cbdd; /* 濃紺上の注釈（8.53:1） */
  /* UI コンポーネントの境界（3:1 以上） */
  --c-border-ui:       #767676; /* 白背景で 4.54:1 */
  --c-border-ui-navy:  #8a93a8; /* 濃紺背景で 4.51:1 */
  /* 装飾要素（こちらも 3:1 以上を確保） */
  --c-deco-gold:   #9a7b0a; /* 白背景で 4.03:1 */
  --c-deco-navy:   #1e3a8a;
  /* フォーカスインジケーター */
  --c-focus:       #1e3a8a;
  --c-focus-on-dark: #ffffff;

  /* ヘッダー・ドロワー・フッター等で参照している変数
     （未定義のまま参照されていたため追加。基本は上のパレットの別名） */
  /* 固定ヘッダーの高さ。header / #d_navi / kasou.css / watashi.css が参照 */
  --header-h:    64px;
  --border:      #d0dcea;
  --navy:        var(--c-navy);
  --navy-dark:   #16295e; /* 透明ヘッダー時の文字色 */
  --navy-mid:    #2b4eae; /* ページトップボタンのホバー */
  --gold:        var(--c-deco-gold);
  --gold-light:  #e6c96f; /* 濃紺背景（ドロワー）上のホバー文字色 */
  --bg-light:    var(--c-bg-section);
  --text-main:   var(--c-text);

    /* Material 風エレベーション（黒ではなくネイビーで着色して沈ませない） */
  --el1:0 1px 2px rgba(21,42,84,.22), 0 1px 3px 1px rgba(21,42,84,.10);
  --el2:0 1px 2px rgba(21,42,84,.22), 0 2px 6px 2px rgba(21,42,84,.10);
  --el3:0 1px 3px rgba(21,42,84,.22), 0 6px 14px 4px rgba(21,42,84,.13);
  --ease:cubic-bezier(.2,0,0,1);

  /* 明朝体（見出し・キャッチ用）。Webフォントは読まず、各OSの標準明朝を順に探す
     Mac/iPhone：ヒラギノ明朝 → Windows：游明朝 → その他：Noto Serif（Android 等） */
  --font-mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","游明朝","BIZ UDPMincho","Noto Serif JP","Noto Serif CJK JP",serif;
}

*,*::before,*::after{ box-sizing:border-box; }


html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","BIZ UDPGothic","Yu Gothic",sans-serif;
  font-size:1rem;            /* 16px 最小 */
  line-height:1.85;
  color:var(--c-text);
  background:var(--c-bg);
}

/* ---------- フォーカス（消さない・目立たせる） ---------- */
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:3px;
  border-radius:2px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible{
  outline-color:var(--c-focus-on-dark);
}

/* ---------- リンク（アンダーライン維持・hoverで太く） ---------- */
a{
  color:var(--c-navy);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
}

/* ---------- スキップリンク ---------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--c-navy);
  color:#fff;
  padding:0.75em 1.5em;
  font-weight:700;
}
.skip-link:focus{
  left:8px;
  top:8px;
}

/* ---------- 汎用 ---------- */
.container{
  max-width:1080px;
  margin-inline:auto;
  padding-inline: 20px;
}
.note{
  color:var(--c-note);
  font-size:1rem; /* 注釈も 16px を維持し、優先度差はコントラストで表現 */
}
/* 明朝体にしたい見出し・キャッチに付ける共通クラス（どのページでも使える）
   太さは各見出しの指定をそのまま使う（游明朝は最も太い Demibold が選ばれる） */
.font-mincho{ font-family:var(--font-mincho); }
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

small{ font-size:1rem; } /* 注釈も 16px を下回らない */
h1,h2,h3,h4{ line-height:1.4; color:var(--c-navy); margin:0 0 0.6em; }
h2{ font-size:1.75rem; }  /* 28px */
h3{ font-size:1.375rem; } /* 22px */
h4{ font-size:1.125rem; } /* 18px */
p{ margin:0 0 1em; }

/* ---------- ボタン風リンク ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  background:var(--c-navy);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  padding:0.9em 1.8em;
  border-radius:999px;
  border:2px solid var(--c-navy);
}
.btn:hover{
  background:var(--c-bg-footer);
  border-color:var(--c-bg-footer);
}
.btn .arrow{ font-weight:700; }
.btn-ghost{
  background:#fff;
  color:var(--c-navy);
  border:2px solid var(--c-navy);
}
.btn-ghost:hover{
  background:var(--c-bg-section);
}

/* ---------- 画像プレースホルダー ---------- */
.ph {
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#dbe2ee 0%,#c8d2e4 100%);
  border:1px solid var(--c-border-ui);
  border-radius:8px;
  color:#33415e; /* プレースホルダーラベル（4.5:1 以上） */
  font-weight:700;
  text-align:center;
  padding:0.5em;
  min-height:140px;
}
.ph2 {
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#dbe2ee 0%,#c8d2e4 100%);
 /* border:1px solid var(--c-border-ui);*/
  border-radius:8px 8px 0 0;
  color:#33415e; /* プレースホルダーラベル（4.5:1 以上） */
  font-weight:700;
  text-align:center;
  padding:0.5em;
  min-height:140px;
}

.photo img {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

.photo2 img {
  object-fit: cover;
  width: 100%;
  height: 250px;
}

/* ============================================================
   ヘッダー
   ============================================================ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 0 48px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}

header.scrolled {
  background: rgba(255,255,255,0.8);
  border-bottom-color: var(--border);
  backdrop-filter: blur(5px) saturate(1.3);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-mark img { width: 30px; height: auto; }

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-dark);
  letter-spacing: 0.04em;
  transition: color 0.4s ease;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

header.scrolled .logo-text {
  color: var(--navy); }

.logo-sub {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #3b4a68;
  transition: color .4s ease;
  line-height: 1.6;
}

/* グローバルナビのみ。要素セレクタ(nav)だとパンくず・フッターnavにも当たるため id で指定 */
#g_navi { display: flex; align-items: center; gap: 36px; }

#g_navi a {
  text-decoration: none;
  color: var(--navy-dark);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  transition: color 0.4s ease;
}
header.scrolled #g_navi a { color: var(--text-main); }

/* ===== DROPMENU ===== */
.dropmenu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0; padding: 0;
}

.dropmenu > li {
  position: relative;
}

.dropmenu > li > a {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
  gap: 4px;
}
.dropmenu > li > a b { font-weight: 600; }

/* scrolled時のテキスト色 */
header.scrolled .dropmenu > li > a { color: var(--text-main); }

/* アンダーライン：左から右へすっと伸びる */
.dropmenu > li > a::before {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropmenu > li:hover > a::before { transform: scaleX(1); }

/* サブメニュー */
.dropmenu > li > ul {
  list-style: none;
  position: absolute;
  top: calc(100%);
  left: 0;
  min-width: 190px;
  background: rgba(255,255,255,0.95);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 40px rgba(0,30,80,0.15);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
  z-index: 200;
}

.dropmenu > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.dropmenu > li > ul > li > a {
  display: block;
  padding: 9px 20px;
  font-size: 13px;
  color: var(--text-main);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
  white-space: nowrap;
}
.dropmenu > li > ul > li > a:hover {
  background: var(--bg-light);
  color: var(--navy);
  padding-left: 26px;
}

.btn-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1.5px solid rgba(0,30,80,0.8);
  border-radius: 6px;
  color: var(--navy-dark);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.4s ease;
}
header.scrolled .btn-contact {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-contact:hover {
  background: var(--navy);
  color: white !important;
  box-shadow:var(--mi-el3);
  transform:translateY(-4px);
}

.btn-contact2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1.5px solid rgba(0,30,80,0.8);
  border-radius: 6px;
  color: var(--navy-dark);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.4s ease;
}
header.scrolled .btn-contact2 {
  border-color: var(--navy);
  color:  var(--navy);
}
.btn-contact2:hover {
  background: var(--navy);
  color: white !important;
  text-decoration: none;
}

.header-cta{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 10px;
}
.btn-request{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid rgba(0,30,80,.35);
  border-radius: 6px;
  background: var(--c-navy);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-request:hover{
  background: #fff;
  border-color: var(--c-navy);
  color: var(--c-navy);
  text-decoration: none;
}

/* ===== HAMBURGER BUTTON ===== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 300;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--navy-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.4s ease;
  transform-origin: center;
}
header.scrolled .hamburger span { background: var(--navy); }

/* ×アニメーション */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== DRAWER (#d_navi) ===== */
#d_navi {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: min(320px, 85vw);
  height: fit-content;
  max-height: calc(100vh - var(--header-h)); /* 縦に長い時にスクロールできるように */
  background: rgba(29, 52, 97, 0.95);
  z-index: 250;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#d_navi.is-open { transform: translateX(0); }

#d_navi_inner { padding: 0 0 40px; }

/* ドロワー内ロゴ */
#logo_2 {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 8px;
}
#logo_2 a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
#logo_2 span {
  font-size: 15px;
  font-weight: 700;
  color: white;
}

#logo_2 img {
  width: 30px;
  height: auto;
  display: block;
}

/* SP メニューリスト */
.sp-menu {
  list-style: none;
  padding: 0; margin: 0;
}

.sp-menu > li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

/* 親リンク行 */
.sp-menu > li > a {
  display: block;
  padding: 15px 48px 15px 24px;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  transition: background 0.15s;
}
.sp-menu > li > a:hover { background: rgba(255,255,255,0.06); }
.sp-menu > li > a b { font-weight: 600; }

/* アコーディオン開閉ボタン */
.sp-toggle {
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: 52px;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-toggle::after {
  content: '';
  display: block;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,0.6);
  border-bottom: 2px solid rgba(255,255,255,0.6);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s ease;
}
.sp-has-child.is-open .sp-toggle::after {
  transform: rotate(-135deg) translateY(-3px);
}

/* サブメニュー */
.sp-menu > li > ul {
  list-style: none;
  padding: 0; margin: 0;
  background: rgba(0,0,0,0.2);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.sp-menu > li.is-open > ul { max-height: 400px; }

.sp-menu > li > ul > li > a {
  display: block;
  padding: 11px 20px 11px 36px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.05);
  transition: color 0.15s, padding-left 0.15s;
}
.sp-menu > li > ul > li > a::before {
  content: '–';
  margin-right: 8px;
  opacity: 0.5;
}
.sp-menu > li > ul > li > a:hover {
  color: var(--gold-light);
  padding-left: 42px;
}

/* ドロワー内お問い合わせボタン */
.sp-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 20px 0;
  padding: 14px;
  background: white;
  color: var(--navy);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
  width: 60%;
}
.sp-contact-btn:hover { opacity: 0.88; }

/* オーバーレイ
   ※ HTML に #d_navi_overlay 要素はありません。js/custom.js が動的に
   生成しないのであれば、要素を追加するかこのブロックを削除してください */
#d_navi_overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 240;
  backdrop-filter: blur(2px);
}
#d_navi_overlay.is-open { display: block; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{
  background:var(--c-bg-footer);
  color:#fff;
  padding:48px 24px 16px;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  max-width:1000px;
  margin:0 auto 40px;
}

.footer-brand .f-logo{ font-size:18px; font-weight:700; color:white; margin-bottom:14px; }
.footer-brand .f-info{ font-size:16px; line-height:2; color:rgba(255,255,255,0.9); }
.footer-brand .f-info a{ color:rgba(255,255,255,0.9); }

.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ font-size:14px; color:rgba(255,255,255,0.9); text-decoration:none; }
.footer-links a:hover{ color:white; }

/* フッターCTA（現在HTML側でコメントアウト中。復活させる場合に使用） */
.footer-cta{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:12px;
  padding:24px;
  text-align:center;
}
.footer-cta p{ font-size:13px; color:rgba(255,255,255,0.8); margin-bottom:16px; line-height:1.8; }
.btn-cta-footer{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:white;
  color:var(--navy);
  padding:11px 24px;
  border-radius:40px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:opacity 0.2s;
}
.btn-cta-footer:hover{ opacity:0.9; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:12px;
  text-align:center;
  font-size:16px;
  color:rgba(255,255,255,0.8);
  max-width:1100px;
  margin:0 auto;
}

/* ===== PAGE TOP BUTTON ===== */
#page-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: rgba(0,30,80,0.8);
  backdrop-filter: blur(2px) saturate(1.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(10,40,85,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease, background 0.2s;
  z-index: 150;
}
#page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
#page-top:hover {
  background: var(--navy-mid);
  transform: translateY(-3px);
}
#page-top svg {
  width: 20px; height: 20px;
  stroke: white;
}

/* ============================================================
   メガメニュー（2026-09-24 追加）
   ── li.has-mega の中の div.mega を、ヘッダーの下に全幅のパネルとして出す。
      HTML：li.has-mega ＞ a（親リンク）＋ button.mega-toggle ＋ div.mega
   ・上の「サブメニュー」（li > ul のドロップダウン）の指定は消していません。
     ヘッダーをまだ差し替えていないページは、今までどおりドロップダウンで動きます。
   ・開閉：js/megamenu.js が動くと #dropmenu に .is-js が付き、li の .is-open だけで開閉。
           JSが無い時は :hover / :focus-within で開く（最低限の動作）。
   ============================================================ */
:root{
  --mega-photo-w:  300px;                 /* 左の写真の幅 */
  --mega-max:      1280px;                /* パネル中身の最大幅 */
  --mega-desc-size:.875rem;               /* リンクの説明文（14px）。サイトの16px最小にそろえるなら 1rem */
  --mega-dim:      rgba(22,41,94,.16);    /* パネルの下のページを薄く沈める色。不要なら transparent */
  --mega-line:     rgba(30,58,138,.14);   /* パネル内の罫線（micro-interactions.css の --line と同じ値） */
  --mega-ease-out: cubic-bezier(.16,1,.3,1);
}

/* パネルの位置の基準をヘッダーにする（li の position:relative を外す）
   ＋ 親リンクと開閉ボタンを横に並べる */
.dropmenu > li.has-mega{
  position: static;
  display: flex;
  align-items: center;
}

/* ---------- 開閉ボタン（キーボード・読み上げ用） ----------
   マウスはホバー、タッチは親リンクの1回目のタップで開くので、普段は見せない。
   Tab でフォーカスが来た時だけ、親リンクの右に ∨ が出る。
   左右の負のマージンで親リンクの余白に重ねているので、ナビの幅は変わらない */
.mega-toggle[hidden]{ display: none; }
.mega-toggle{
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 -12px;             /* 親リンクの右余白16pxと隣の左余白16pxに12pxずつ重ねる（幅の増減ゼロ） */
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--c-navy);
  box-shadow: 0 0 0 1px var(--mega-line), 0 2px 6px rgba(21,42,84,.16);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.mega-toggle:focus-visible{
  opacity: 1;
  pointer-events: auto;
  outline-offset: 1px;          /* style.css の 3px だと隣の項目の文字に掛かるため */
}
.mega-toggle svg{
  width: 14px;
  height: 14px;
  transition: transform .2s var(--ease);
}
.mega-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

/* ---------- パネル（閉じている状態） ---------- */
.dropmenu .mega{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-top: 1px solid var(--mega-line);
  /* 2つ目の影＝パネルより下のページを薄く沈める。clip-path で上側（ヘッダー）には掛けない */
  box-shadow: 0 24px 40px -18px rgba(0,30,80,.22), 0 0 0 100vmax var(--mega-dim);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
}

/* ---------- 開いている状態 ---------- */
.dropmenu > li.has-mega.is-open > .mega,
.dropmenu:not(.is-js) > li.has-mega:hover > .mega,
.dropmenu:not(.is-js) > li.has-mega:focus-within > .mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .22s var(--ease), transform .28s var(--mega-ease-out), visibility 0s 0s;
}
/* 開いたまま隣の項目へ移った時は、アニメーションせずに即座に入れ替える
   （高さの違うパネル同士がフェードで重なるとちらつくため） */
.dropmenu.is-switching > li.has-mega > .mega{ transition: none; }

/* 開いている間は親リンクの下線を出したままにする（下線は上の a::before） */
.dropmenu > li.has-mega.is-open > a::before,
.dropmenu:not(.is-js) > li.has-mega:focus-within > a::before{ transform: scaleX(1); }

/* 開いている間はヘッダーを白にして、パネルとひと続きに見せる
   （トップの透明ヘッダーの下に白いパネルだけが出るのを防ぐ） */
header.is-mega-open{
  background: #fff;
  border-bottom-color: var(--border);
  transition-duration: .2s;
}
/* JSが無い時の同じ指定（:has() 非対応ブラウザではこの1行だけ無視される） */
header:has(.dropmenu:not(.is-js) > li.has-mega:is(:hover, :focus-within)){
  background: #fff;
  border-bottom-color: var(--border);
}

/* ---------- パネルの中身 ---------- */
.mega-inner{
  display: grid;
  grid-template-columns: var(--mega-photo-w) minmax(0, 1fr);
  gap: 48px;
  max-width: var(--mega-max);
  margin: 0 auto;
  padding: 32px 48px 40px;
}

/* #g_navi a（白抜き・nowrap・16px）と header.scrolled #g_navi a（文字色）が
   パネル内のリンクにも掛かるので、それより強い詳細度（1,2,1）で打ち消す */
#g_navi .mega .mega-inner a{
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 400;
  white-space: normal;
  text-decoration: none;
}
#g_navi .mega .mega-inner a:hover{ text-decoration: none; }

/* 左：写真カード（カテゴリのトップへ） */
#g_navi .mega .mega-inner .mega-feature{
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-bg-section);
  color: #fff;
}
.mega-photo,
.mega-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mega-photo img{
  display: block;
  object-fit: cover;
  transition: transform .6s var(--mega-ease-out);
}
.mega-feature:hover .mega-photo img{ transform: scale(1.05); }
/* 文字を読ませるための下側のグラデーション。
   写真が真っ白でも、見出し（20px太字）で約5:1、「詳しく見る」（14px）で7:1以上になる濃さ */
.mega-feature::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(22,41,94,0) 25%,
    rgba(22,41,94,.55) 55%,
    rgba(22,41,94,.92) 100%);
}
.mega-feature-body{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-feature-title{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.mega-feature-more{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .875rem;
}
.mega-arrow{
  display: inline-block;
  transition: transform .25s var(--mega-ease-out);
}
.mega-feature:hover .mega-arrow{ transform: translateX(4px); }

/* 右：見出し・リード・リンク */
.mega-eyebrow{
  margin: 0 0 .15em;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  color: var(--c-gold-text);
}
.mega-lead{
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mega-line);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text);
}
.mega-links{
  list-style: none;
  margin: 0 -14px;               /* リンクの内側余白ぶん外へ出して、文字の頭をリードとそろえる */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 12px;
}
#g_navi .mega .mega-links a{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 12px 34px 12px 14px;
  border-radius: 8px;
  transition: background-color .2s var(--ease);
}
/* 右端の › */
#g_navi .mega .mega-links a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 2px solid var(--c-navy);
  border-right: 2px solid var(--c-navy);
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .25s var(--mega-ease-out), opacity .2s var(--ease);
}
#g_navi .mega .mega-links a:hover{ background: var(--c-bg-section); }
#g_navi .mega .mega-links a:hover::after{
  transform: translateX(3px) rotate(45deg);
  opacity: 1;
}
.mega-name{
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.mega-desc{
  font-size: var(--mega-desc-size);
  line-height: 1.6;
  color: var(--c-note);
}
/* 折り返す時は文節で（「まと／めて」のような切れ方を防ぐ。Chrome・Edge 119以降。未対応は通常の折り返し） */
.mega-name,
.mega-desc,
.mega-lead{ word-break: auto-phrase; }

/* お問い合わせパネルの電話番号 */
.mega-tel{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1em .8em;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--mega-line);
}
.mega-tel-label,
.mega-tel-note{
  font-size: .875rem;
  color: var(--c-note);
}
.mega-tel-note{ margin-left: -.6em; }
#g_navi .mega .mega-inner .mega-tel a{
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--c-navy);
  white-space: nowrap;
}

/* ---------- 幅が狭い時 ---------- */
@media (max-width: 1100px){
  :root{ --mega-photo-w: 240px; }
  .mega-inner{ gap: 32px; padding: 28px 32px 32px; }
  .mega-links{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* SP はナビごと非表示（ドロワーを使う）。念のためパネルも出さない */
@media (max-width: 767px){
  .dropmenu .mega{ display: none; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce){
  .dropmenu .mega,
  .dropmenu .mega *,
  .mega-toggle svg{ transition: none !important; }
  .dropmenu .mega{ transform: none; }
  .mega-feature:hover .mega-photo img,
  .mega-feature:hover .mega-arrow{ transform: none; }
}

/* メニューをわずかに透かす（数字を下げるほど透ける。0.92〜0.95 が「ほんのわずか」） */
:root{ --mega-bg: rgba(255,255,255,.97); }

.dropmenu .mega{
  background: var(--mega-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
}
/* ヘッダーもパネルと同じ透け具合にする。スクロール後のヘッダーのぼかしは開いている間だけ外す */
header.is-mega-open{
  background: var(--mega-bg);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* JSが無い時の同じ指定。:has() に対応していないブラウザでは、このルールだけ無視されます */
header:has(.dropmenu:not(.is-js) > li.has-mega:is(:hover, :focus-within)){
  background: var(--mega-bg);
}
/* ==================== メガメニュー ここまで ==================== */

/* ============================================================
   レスポンシブ
   ============================================================ */


/* SP：ハンバーガーメニューに切り替え */
@media (max-width: 767px) {
  header { padding: 0 16px; }
  /* 要素セレクタ（nav）だとパンくず・フッターのnavまで消えるため id/class で指定 */
  #g_navi, .btn-contact, .btn-contact2, .header-cta { display: none; }
  .hamburger { display: flex; }


  #page-top {
    bottom: 20px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 430px){
  .footer-grid{
    grid-template-columns:repeat(3,1fr);
    gap:5px;
  }
  .footer-grid > *:first-child{
    grid-column:1 / -1;
  }
}