/*
 * ヘッダーのメニュー（2026-09-24）
 *
 * パソコン（.gNav） … 見本 /design/header-menu-2/ の形。組み立ては inc/header-nav.php の trobz_header_gnav()
 *   英字の下に日本語／合わせると金の下線／SERVICE はロゴ付きの大きな一覧／MEDIA・COMPANY は墨色の小さな一覧／
 *   お問い合わせは細い縦線で区切った金の文字
 * スマホ（.spNav） … 見本 /design/header-sp/ の案2「白の全画面・サービスはロゴ」。組み立ては trobz_header_spnav()
 *   開け閉めは assets/js/header-nav.js（開いている間は body に is-menu と fixed を付ける）
 * 旧：.mainMenu（パソコンもスマホも同じ一覧）と .hamburger。2026-09-25 に header.php・common.css・script.js から外した
 */

#header,
.spNav {
    --g-ink: #242428;
    --g-raise: #2C2C31;
    --g-gold: #C9A551;
    --g-gold-dark: #A8812F;
    --g-line: #E3E3E6;
    --g-muted: #6A6A72;
    --g-en: "FuturaLTProLight", "Futura", sans-serif;
    --g-ease: cubic-bezier(.22, .61, .36, 1);
    --g-ease2: cubic-bezier(.65, 0, .35, 1);
}

/* =====================================================================
   パソコン
   ===================================================================== */
/* ヘッダーの帯をコンパクトに（2026-09-24 畔栁さん「帯が少し太い」）。
   旧：上下の余白 ページの上 48px・スクロール後 22px、項目の高さ 54px（帯の高さ 98px）
   スクロールしても帯の高さは変えない（2026-09-24 畔栁さん「最初のヘッダーの幅を基準に」）。上下とも 30px */
@media (min-width: 769px) {
    #header, #header.is-scrolled { padding-top: 30px; padding-bottom: 30px; }
}
@media (max-width: 768px) {
    #header.is-scrolled { padding-top: clamp(24px, 6.4vw, 26px); padding-bottom: clamp(24px, 6.4vw, 26px); }
}
.gNav { margin-left: auto; }
.gMenu { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.gMenu > li { position: relative; margin: 0; list-style: none; }
.gMenu > li + li { margin-left: 36px; }
.gMenu > li.big { position: static; }

/* 英字の下に小さく日本語 */
.gMenu > li > a { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 50px; color: #fff; white-space: nowrap; text-decoration: none; }
.gMenu > li > a .en { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--g-en); font-size: 14px; letter-spacing: .16em; line-height: 1.3; color: #fff; }
.gMenu > li > a small { font-size: 10.5px; letter-spacing: .14em; line-height: 1.3; color: #DADAE0; }
.gMenu .chev { width: 7px; height: 7px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--g-ease), margin .4s var(--g-ease); }
.gMenu > li:hover > a .chev, .gMenu > li:focus-within > a .chev, .gMenu > li.is-open > a .chev { transform: rotate(225deg); margin-top: 4px; }

/* 合わせると英字の下に金の線が左から伸びる */
.gMenu > li > a .en::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--g-gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--g-ease2); }
.gMenu > li.has > a .en::after { right: 15px; }
.gMenu > li:hover > a .en::after, .gMenu > li:focus-within > a .en::after, .gMenu > li.is-open > a .en::after { transform: none; transform-origin: left; }

/* 開く一覧まで、カーソルが途切れずに届くように（項目の下からヘッダーの下まで、見えない橋をかける） */
.gMenu > li.has > a::before { content: ""; position: absolute; left: -18px; right: -18px; top: 100%; height: 40px; }
/* SERVICE の大きな一覧は横いっぱいに開くので、開いている間はヘッダーの下の端を横いっぱいにつなぐ
   （斜めにカーソルを動かすと、項目の真下の細い橋から外れて閉じてしまっていた。2026-09-24 畔栁さんの指摘） */
.gMenu > li.big:hover::after, .gMenu > li.big.is-open::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; }

/* お問い合わせ：細い縦線で区切り、金の文字 */
.gMenu > li.contact { margin-left: 40px; padding-left: 40px; }
.gMenu > li.contact::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 34px; margin-top: -17px; background: rgba(255, 255, 255, .24); }
.gMenu > li.contact > a .en { color: var(--g-gold); }

/* ページの上（スクロール前）の見え方：案C「文字とロゴを墨色にする」（2026-09-24 畔栁さんが /design/header-top/ から選んだ）
   地は透明（上から暗くなる影もやめる）にして、文字・ロゴ・メニューの印を墨色にする。
   カーソルを合わせる・スクロールする・スマホのメニューを開くと、墨色の帯に白い文字へ切り替わる（下の「一覧を開いている間」以降と common.css）。
   旧：影の上に白い文字。下が白いページだと、下の段の日本語が溶けて見えた */
body:not(.is-menu):not(.single-trobz_case) #header:not(.is-scrolled):not(:hover):not(:focus-within) { background-color: transparent; background-image: none; }
body:not(.is-menu):not(.single-trobz_case) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gMenu > li > a .en { color: var(--g-ink); }
body:not(.is-menu):not(.single-trobz_case) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gMenu > li > a small { color: #55555C; }
body:not(.is-menu):not(.single-trobz_case) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gMenu > li.contact > a .en { color: var(--g-gold-dark); }
body:not(.is-menu):not(.single-trobz_case) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gMenu > li.contact::before { background: rgba(36, 36, 40, .2); }
body:not(.is-menu):not(.single-trobz_case) #header:not(.is-scrolled):not(:hover):not(:focus-within) .logo img { filter: brightness(0) invert(.14); }
body:not(.is-menu):not(.single-trobz_case) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gBurger { color: var(--g-ink); }
/* 導入事例の詳細ページだけは例外。写真がヘッダーの裏まで広がっていて、暗い写真（アトリエ名古屋など10件中6件）では
   墨色の文字が読めない。ここは案B（濃い影に白い文字）にする */
body.single-trobz_case:not(.is-menu) #header:not(.is-scrolled):not(:hover):not(:focus-within) { background-color: transparent; background-image: linear-gradient(180deg, rgba(20, 20, 24, .82) 0%, rgba(20, 20, 24, .66) 62%, rgba(20, 20, 24, .28) 88%, rgba(20, 20, 24, 0) 100%); }
body.single-trobz_case:not(.is-menu) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gMenu > li > a .en,
body.single-trobz_case:not(.is-menu) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gMenu > li > a small { text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
body.single-trobz_case:not(.is-menu) #header:not(.is-scrolled):not(:hover):not(:focus-within) .gMenu > li.contact > a .en { color: #D9BC6E; }

/* 切り替わりは色だけ、ゆっくり */
.gMenu > li > a .en, .gMenu > li > a small, #header .logo img, .gBurger { transition: color .3s, filter .3s; }

/* 一覧を開いている間は、ページの上（透明なヘッダー）でも墨色の帯にする。灰色の地の上だと文字が読みにくい */
@media (min-width: 769px) {
    /* 2026-09-24 HOME・CASE・CONTACT に合わせたときも同じにする（以前は一覧のある項目だけで、ほかは透明のままだった） */
    /* 2026-09-24 項目の間やロゴなど、ヘッダーのどこに合わせても墨色にする（以前は項目の上だけで、間に来ると透明に戻った） */
    #header:hover, #header:has(.gMenu > li:focus-within), #header:has(.gMenu > li.is-open) { background-color: rgba(36, 36, 40, .96); background-image: none; }
}

/* 開く一覧（共通の出し方：少し下から、濃さで） */
.gSub { position: absolute; top: 100%; z-index: 3; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .12s linear, transform .12s linear, visibility 0s .12s; }
.gMenu > li:hover > .gSub, .gMenu > li:focus-within > .gSub, .gMenu > li.is-open > .gSub { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--g-ease), transform .45s var(--g-ease), visibility 0s; }

/* MEDIA・COMPANY：墨色の小さな一覧。英字の下に日本語。合わせると頭に金の短い線 */
.gSmall { left: -24px; min-width: 250px; margin: 0; padding: 10px; list-style: none; background: var(--g-raise); border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.gSmall li { margin: 0; list-style: none; }
.gSmall a { position: relative; display: block; padding: 11px 16px; border-radius: 4px; color: #fff; text-decoration: none; transition: background .3s, padding .4s var(--g-ease); }
.gSmall a b { display: block; font-family: var(--g-en); font-weight: 400; font-size: 14px; letter-spacing: .14em; line-height: 1.4; color: #fff; }
.gSmall a small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .06em; line-height: 1.4; color: #CFCFD6; white-space: nowrap; }
.gSmall a::before { content: ""; position: absolute; left: 16px; top: 21px; width: 0; height: 1px; background: var(--g-gold); transition: width .4s var(--g-ease); }
.gSmall a:hover, .gSmall a:focus-visible { background: rgba(255, 255, 255, .06); padding-left: 34px; }
.gSmall a:hover::before, .gSmall a:focus-visible::before { width: 10px; }

/* SERVICE：ヘッダーの下に横長の白い面。4つのサービスをロゴと一言で */
.gMega { left: 0; right: 0; padding: 26px 60px 26px; background: #fff; box-shadow: 0 24px 48px rgba(0, 0, 0, .14); }
.gMegaIn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 230px; gap: 24px; max-width: 1300px; margin: 0 auto; }
.gCard { position: relative; display: block; padding: 22px 22px 20px; border: 1px solid var(--g-line); border-radius: 6px; color: var(--g-ink); text-decoration: none; transition: border-color .35s, box-shadow .35s, transform .45s var(--g-ease); }
.gCard:hover, .gCard:focus-visible { border-color: var(--g-gold); box-shadow: 0 12px 28px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.gLogo { display: flex; align-items: center; height: 34px; }
.gLogo .serviceBrand { height: calc(20px * var(--k)); transform: translateY(calc(20px * var(--dy))); }
.gTxt { display: block; margin-top: 14px; font-size: 12.5px; line-height: 1.8; color: var(--g-muted); white-space: normal; }
.gGo { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; letter-spacing: .1em; color: var(--g-ink); }
.gArw { position: relative; display: inline-block; width: 22px; height: 9px; flex: none; transition: transform .45s var(--g-ease); }
.gArw::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor; }
.gArw::after { content: ""; position: absolute; right: 0; top: 1px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.gNav a:hover .gArw { transform: translateX(5px); }
.gSide { display: flex; flex-direction: column; justify-content: center; padding-left: 26px; border-left: 1px solid var(--g-line); }
.gSide a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--g-ink); border-bottom: 1px solid var(--g-line); text-decoration: none; }
.gSide a b { display: block; font-weight: 500; font-size: 13.5px; }
.gSide a small { display: block; margin-top: 2px; font-size: 11px; color: var(--g-muted); }
/* 大きな一覧の中身は順に現れる */
.gMegaIn > * { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--g-ease), transform .5s var(--g-ease); }
.gMenu > li:hover > .gMega .gMegaIn > *, .gMenu > li:focus-within > .gMega .gMegaIn > *, .gMenu > li.is-open > .gMega .gMegaIn > * { opacity: 1; transform: none; }
.gMegaIn > *:nth-child(2) { transition-delay: .05s; }
.gMegaIn > *:nth-child(3) { transition-delay: .1s; }
.gMegaIn > *:nth-child(4) { transition-delay: .15s; }
.gMegaIn > *:nth-child(5) { transition-delay: .2s; }

/* 画面が少し狭いパソコン：間隔を詰める */
@media (max-width: 1180px) {
    .gMenu > li + li { margin-left: 26px; }
    .gMenu > li.contact { margin-left: 28px; padding-left: 28px; }
    .gMegaIn { grid-template-columns: repeat(4, minmax(0, 1fr)) 200px; gap: 16px; }
    .gMega { padding: 28px 30px; }
}
@media (max-width: 980px) {
    .gMenu > li + li { margin-left: 18px; }
    .gMenu > li.contact { margin-left: 20px; padding-left: 20px; }
    .gMenu > li > a .en { font-size: 12.5px; letter-spacing: .12em; }
    .gMenu > li > a small { font-size: 10px; letter-spacing: .08em; }
    .gMegaIn { grid-template-columns: repeat(2, minmax(0, 1fr)) 200px; }
    .gMegaIn .gSide { grid-column: 3; grid-row: 2 / span 2; }
}

/* =====================================================================
   スマホ（案2 白の全画面・サービスはロゴ）
   ===================================================================== */
.gBurger, .spNav { display: none; }

@media (max-width: 768px) {
    /* パソコンのメニューは出さない */
    .gNav { display: none; }

    /* メニューの印：2本の線＋小さく MENU。開くと線が×に、文字が CLOSE に */
    .gBurger { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 48px; height: 48px; margin-right: -10px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; font-family: inherit; }
    .gBurger i { position: relative; display: block; width: 24px; height: 10px; }
    .gBurger i::before, .gBurger i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .45s var(--g-ease), top .45s var(--g-ease); }
    .gBurger i::before { top: 0; }
    .gBurger i::after { top: 9px; }
    .gBurger em { font-style: normal; font-family: var(--g-en); font-size: 9px; letter-spacing: .2em; line-height: 1; }
    .is-menu .gBurger i::before { top: 5px; transform: rotate(35deg) scaleX(.85); }
    .is-menu .gBurger i::after { top: 5px; transform: rotate(-35deg) scaleX(.85); }
    /* 開いている間は、ヘッダーを墨色の帯にする */
    .is-menu #header { background-color: var(--g-ink); background-image: none; }

    /* 開いたメニュー：ヘッダーの下から画面の下まで白い面 */
    .spNav { position: fixed; left: 0; right: 0; top: var(--spTop, 72px); bottom: 0; z-index: 98; display: block; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .4s var(--g-ease), transform .45s var(--g-ease), visibility 0s .45s; }
    .is-menu .spNav { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--g-ease), transform .45s var(--g-ease), visibility 0s; }
    .spNavIn { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px 120px; background: #fff; }
    .spMain { margin: 0; padding: 0; list-style: none; }
    .spMain > li { margin: 0; border-bottom: 1px solid var(--g-line); list-style: none; }
    .spMain > li > a, .spAcc { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 2px; border: 0; background: none; color: var(--g-ink); text-align: left; text-decoration: none; font-family: inherit; cursor: pointer; }
    .spLab { display: flex; align-items: baseline; }
    .spLab .en { font-family: var(--g-en); font-size: 16px; letter-spacing: .16em; color: var(--g-ink); }
    .spLab small { margin-left: 12px; font-size: 11px; letter-spacing: .12em; color: var(--g-muted); }
    .spPm { position: relative; width: 14px; height: 14px; flex: none; }
    .spPm::before, .spPm::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: currentColor; transition: transform .4s var(--g-ease); }
    .spPm::after { transform: rotate(90deg); }
    .op > .spAcc .spPm::after { transform: rotate(0); }
    .spSub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--g-ease); }
    .spSub > div { overflow: hidden; }
    .op > .spSub { grid-template-rows: 1fr; }
    .op > .spSub > div { padding-bottom: 10px; }
    /* SERVICE：4つのサービスをロゴで */
    .spLogos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0 6px; }
    .spLogos a { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 84px; padding: 14px; border: 1px solid var(--g-line); border-radius: 6px; color: var(--g-ink); text-decoration: none; }
    .spLogos .serviceBrand { height: calc(15px * var(--k)); transform: translateY(calc(15px * var(--dy))); }
    .spLogos a small { font-size: 10px; line-height: 1.6; color: var(--g-muted); }
    /* 開いた中の行（サービス一覧・OEM・NEWS など）。英字は上の項目と同じ書体で、横に日本語 */
    .spRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; color: var(--g-ink); text-decoration: none; }
    /* 開いた中の行（OEM・NEWS など）も、上の項目（CASE 導入事例 など）と同じ大きさ・同じ左端にそろえる（2026-09-25 畔栁さんの指摘） */
    .spRow .ja { font-size: 15px; letter-spacing: .06em; }
    .spNav .gArw { color: var(--g-ink); }
    /* お問い合わせ：画面の下にいつも出ている墨色の帯 */
    .spCta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px calc(22px + env(safe-area-inset-bottom)); background: var(--g-ink); color: var(--g-gold); text-decoration: none; }
    .spCta .en { display: block; font-family: var(--g-en); font-size: 17px; letter-spacing: .16em; color: var(--g-gold); }
    .spCta small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .12em; color: #DADAE0; }
    .spCta .gArw { color: var(--g-gold); }
    /* 開くときに、項目が順に現れる */
    .spMain > li, .spCta { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--g-ease), transform .5s var(--g-ease); }
    .is-menu .spMain > li, .is-menu .spCta { opacity: 1; transform: none; }
    .is-menu .spMain > li:nth-child(1) { transition-delay: .12s; }
    .is-menu .spMain > li:nth-child(2) { transition-delay: .16s; }
    .is-menu .spMain > li:nth-child(3) { transition-delay: .2s; }
    .is-menu .spMain > li:nth-child(4) { transition-delay: .24s; }
    .is-menu .spMain > li:nth-child(5) { transition-delay: .28s; }
    .is-menu .spMain > li:nth-child(6) { transition-delay: .32s; }
    .is-menu .spCta { transition-delay: .2s; }
}

@media (prefers-reduced-motion: reduce) {
    .gSub, .gMegaIn > *, .gMenu .chev, .gMenu > li > a .en::after, .spNav, .spMain > li, .spCta, .spSub { transition: none !important; }
}

/* 導入事例（プラグイン trobz-case-studies）のスマホ：ページの上の余白 48px がヘッダー（約101px）より小さく、
   「CASE STUDIES 導入事例」がヘッダーの下に潜っていた。ヘッダーの地を透明にした（案C）ことで目立ったので、ここで余白を足す */
@media (max-width: 768px) {
    .tcs .tcs-hero { padding-top: 128px; }
}
/* 導入事例の詳細ページのスマホ：「戻る」ボタンが左上（上から10px）に固定されていて、ヘッダーのロゴに重なっていた（以前から）。
   ヘッダーのすぐ下へ下げる。事例を一覧の上に開いたとき（.tcs-panel-closeb）はヘッダーを覆う板の上なので、そのまま */
@media (max-width: 700px) {
    body .tcs-closeb--page { top: calc(112px + env(safe-area-inset-top)); }
}