@charset 'utf-8';

/* =============================================================
   l-header
   design : PC 1440px / SP 375px
   liquid : --l-header-u = デザイン上の 1px
            PC … 常に等倍（文字を縮小しない）。1024px 以上で適用
            SP … 375px 基準で拡縮（450px 以上は 1.2px で頭打ち）。
                 等倍のままではグローバルナビが 1024px 未満に収まらないため、
                 1023px 以下はハンバーガーメニューに切り替える
   ============================================================= */
:root {
    --l-header-u: 1px;
    --l-header-h: calc(76 * var(--l-header-u));
    --l-header-mega-h: calc(250 * var(--l-header-u));
    --l-header-inner-max: 1920px;
    --l-header-bg: var(--color-hamabo-blue);
    /* ヘッダーの帯はデザインどおり少し透過（Figma：#004095 ／ 不透明度 90%）。
       SP メニューの全面パネルは透けると読みにくいので --l-header-bg（不透明）のまま */
    --l-header-bar-bg: rgba(0, 64, 149, 0.9);
}

@media screen and (max-width: 1023px) {
    :root {
        --l-header-u: min(1.2px, 100vw / 375);
        --l-header-h: calc(55 * var(--l-header-u));
    }
}

/* ヘッダーは fixed。その分だけコンテンツを下げる
   ( WP の global-styles が後から body{padding:0} を当てるため html body で詳細度を上げる ) */
html body {
    padding-top: var(--l-header-h);
}

/* -------------------------------------------------------------
   base
   ------------------------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: var(--l-header-h);
    background-color: var(--l-header-bar-bg);
    font-family: var(--font-noto);
    line-height: 1;
    transition: transform 0.4s ease;
}

/* TOP の FV 演出に合わせて、ヘッダーも「写真 → タイトル → ヘッダー＋歯車」の
   順で遅れて出す（JS が .is-fvIntroIn を付ける）。
   青い帯まで消すと、その下に敷いた body の余白が白く見えてしまうため、
   透明にするのは中身（ロゴ・ナビ）だけにする。                              */
.l-header.is-fvIntro .l-header__inner {
    opacity: 0;
    transition: opacity 0.9s ease;
}

.l-header.is-fvIntro.is-fvIntroIn .l-header__inner {
    opacity: 1;
    transition-delay: 1.35s;
}

/* 演出中は帯も透明にして、下に伸びている FV の動画を見せる（デザイン TOP_02）。
   ヘッダーの範囲は FV 側が同じ青で塗っているので、白は出ない。 */
.l-header.is-fvIntro {
    background-color: transparent;
    transition: transform 0.4s ease, background-color 0.9s ease;
}

.l-header.is-fvIntro.is-fvIntroIn {
    background-color: var(--l-header-bar-bg);
    transition-delay: 0s, 1.35s;
}

@media (prefers-reduced-motion: reduce) {

    .l-header.is-fvIntro .l-header__inner {
        opacity: 1;
        transition: none;
    }

    .l-header.is-fvIntro {
        background-color: var(--l-header-bar-bg);
        transition: none;
    }
}

/* 下方向スクロール中は隠す（上方向で再表示） */
.l-header.is-hidden {
    transform: translateY(-100%);
}

.l-header__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--l-header-inner-max);
    height: 100%;
    margin-inline: auto;
    /* 1440px 未満では左右と項目間を詰めて、文字サイズを保ったまま収める。
       右は EN が画面端に近づきすぎないよう 24px を下限にする
       （2vw のままだと 1024px で 20.5px まで縮み、スクロールバーとの間が窮屈になる） */
    padding-left: clamp(16px, 2.3vw, 33px);
    padding-right: clamp(24px, 2.3vw, 29px);
}

.l-header__logo {
    flex-shrink: 0;
    display: block;
    width: clamp(168px, 15.2vw, 218px);
    margin-top: calc(4 * var(--l-header-u));
}

/* -------------------------------------------------------------
   global nav (PC)
   ------------------------------------------------------------- */
.l-header__nav {
    height: 100%;
    margin-left: auto;
}

.l-header__navList {
    display: flex;
    align-items: stretch;
    height: 100%;
    column-gap: clamp(16px, 3vw, 43px);
}

.l-header__navItem {
    position: relative;
    height: 100%;
}

.l-header__navLink {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* 下の 3px は開いている項目の下線ぶんだが、そのまま 3px 空けると文字が 1.5px 上に寄り、
       右の CONTACT ボタンの文字より上がって見える。1px にして、英語版は CONTACT と
       文字の下端（ベースライン）が、日本語版は 2 段の文字の中心がヘッダーの中心とそろうようにする */
    padding: 0 0 calc(1 * var(--l-header-u));
    border: 0;
    background: none;
    color: #fff;
    font-family: var(--font-noto);
    cursor: pointer;
    transition: opacity 0.3s;
}

.l-header__navLink:hover {
    opacity: 0.7;
}

/* 開いている項目の下線（グラデーション） */
.l-header__navLink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 22 * var(--l-header-u));
    height: calc(3 * var(--l-header-u));
    background: var(--grad);
    opacity: 0;
    transition: opacity 0.3s;
}

.l-header__navEn {
    display: block;
    margin-right: -0.1em;
    color: var(--color-medium-blue);
    font-family: var(--font-mon);
    font-size: calc(10 * var(--l-header-u));
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
}

.l-header__navJa {
    position: relative;
    display: block;
    margin-top: calc(3 * var(--l-header-u));
    font-size: calc(14 * var(--l-header-u));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.l-header__navChevron {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: calc(11 * var(--l-header-u));
    width: calc(10 * var(--l-header-u));
    height: calc(5.5 * var(--l-header-u));
    background-color: #fff;
    transform: translateY(-50%);
    transform-origin: center;
    transition: transform 0.3s;
    -webkit-mask: url(../img/common/header_arrow_down.png) no-repeat center bottom / 100% auto;
    mask: url(../img/common/header_arrow_down.png) no-repeat center bottom / 100% auto;
}

/* -------------------------------------------------------------
   mega menu (PC)
   ------------------------------------------------------------- */
.l-header__mega {
    position: absolute;
    top: 100%;
    left: calc(25 * var(--l-header-u));
    display: flex;
    height: var(--l-header-mega-h);
    padding-top: 60px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
}
#l-header-mega-service.l-header__mega {
    padding-top: 45px;
}

/* パネル背景（画面幅いっぱい） */
.l-header__mega::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: 300vw;
    height: 100%;
    background-color: rgba(0, 64, 149, 0.95);
    transform: translateX(-50%);
}

/* パネルより下の暗幕（ホバー判定に含めない＝下に出たらメニューを閉じる） */
.l-header__mega::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 0;
    width: 300vw;
    height: 100vh;
    background-color: var(--color-anten);
    pointer-events: none;
    transform: translateX(-50%);
}

.l-header__navItem--mega:hover .l-header__mega,
.l-header__navItem--mega.is-megaOpen .l-header__mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.l-header__navItem--mega:hover .l-header__navLink::after,
.l-header__navItem--mega.is-megaOpen .l-header__navLink::after {
    opacity: 1;
}

/* いま表示しているページが属するメニューにも下線を出す（デザイン Header_company）。
   開閉の矢印がない項目は、下線を文字の幅にそろえる */
.l-header__navItem.is-current .l-header__navLink::after {
    opacity: 1;
}

.l-header__navItem:not(.l-header__navItem--mega) .l-header__navLink::after {
    width: 100%;
}

.l-header__navItem--mega:hover .l-header__navChevron,
.l-header__navItem--mega.is-megaOpen .l-header__navChevron {
    transform: translateY(-50%) rotate(180deg);
}

/* プルダウンの左に置く大見出し。
   ヘッダーが fixed なので、position: fixed で画面基準に置ける
   （メガメニューは <li> の中にあり、そこを基準にすると画面左端に合わせられない） */
.l-header__megaTtl {
    position: fixed;
    /* デザイン（1440px）で COMPANY の文字の上端が y=164 に来る位置 */
    top: calc(157 * var(--l-header-u));
    left: var(--gut);
    z-index: 1;
    color: #fff;
}

.l-header__megaTtlEn {
    display: block;
    font-family: var(--font-mon);
    font-size: calc(48 * var(--l-header-u));
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
}

.l-header__megaTtlJa {
    display: block;
    /* 英字の文字下端との間をデザインどおり 21px あける */
    margin-top: calc(9 * var(--l-header-u));
    font-size: calc(15 * var(--l-header-u));
    font-weight: 400;
    line-height: 1.66;
}

.l-header__megaInner {
    position: relative;
    z-index: 1;
    display: flex;
    column-gap: calc(91 * var(--l-header-u));
}

.l-header__megaList {
    width: calc(240 * var(--l-header-u));
}

.l-header__megaLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: calc(14 * var(--l-header-u));
    height: calc(31 * var(--l-header-u));
    color: #fff;
    font-size: calc(14 * var(--l-header-u));
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.l-header__megaLink:hover {
    color: var(--color-light-blue);
    opacity: 1;
}

.l-header__megaArrow {
    flex-shrink: 0;
    width: calc(13 * var(--l-header-u));
    height: calc(6 * var(--l-header-u));
    background-color: currentColor;
    -webkit-mask: url(../img/common/header_arrow_right.png) no-repeat center / contain;
    mask: url(../img/common/header_arrow_right.png) no-repeat center / contain;
}

/* -------------------------------------------------------------
   contact button (PC)
   ------------------------------------------------------------- */
.l-header__contact {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(5 * var(--l-header-u));
    width: calc(130 * var(--l-header-u));
    height: calc(33 * var(--l-header-u));
    margin-left: clamp(12px, 2.1vw, 30px);
    border: 1px solid var(--color-midium-gray);
    border-radius: 10px;
    color: #fff;
    font-size: calc(14 * var(--l-header-u));
    font-weight: 400;
    line-height: 1;
}

.l-header__contactArrow {
    flex-shrink: 0;
    width: calc(12 * var(--l-header-u));
    height: calc(5 * var(--l-header-u));
    background-color: var(--color-midium-gray);
    transition: background-color 0.3s;
    -webkit-mask: url(../img/common/header_arrow_right.png) no-repeat center / contain;
    mask: url(../img/common/header_arrow_right.png) no-repeat center / contain;
}

/* ホバー時は c-btnInvert に合わせて矢印も反転 */
.l-header__contact:hover .l-header__contactArrow {
    background-color: var(--color-hamabo-blue);
}

/* -------------------------------------------------------------
   language switch
   ------------------------------------------------------------- */
.l-header__lang {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    column-gap: calc(11 * var(--l-header-u));
    margin-left: clamp(10px, 1.7vw, 25px);
}

.l-header__langIcon {
    flex-shrink: 0;
    width: calc(19.5 * var(--l-header-u));
    height: calc(20 * var(--l-header-u));
    background-color: #fff;
    -webkit-mask: url(../img/common/icon_earth.png) no-repeat center / contain;
    mask: url(../img/common/icon_earth.png) no-repeat center / contain;
}

.l-header__langSep {
    width: 1px;
    height: calc(18 * var(--l-header-u));
    background-color: var(--color-midium-gray);
}

.l-header__langLink {
    color: var(--color-medium-blue);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--l-header-u));
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
}

.l-header__langLink.is-current {
    color: #fff;
}

/* GTranslate の base.js が a.glink.gt-current-lang { font-weight: bold } を足すので打ち消す。
   PC の「JP」の 300 は下のルールで上書きされるよう、この順番にしている */
.l-header__lang .l-header__langLink.glink {
    font-weight: 400;
}

/* PC ヘッダーの「JP」だけ細くする（SP メニュー内の切り替えは別要素なので対象外） */
.l-header__inner > .l-header__lang .l-header__langLink[lang="ja"] {
    font-weight: 300;
}

/* -------------------------------------------------------------
   SP のみで使う要素は PC では非表示
   ------------------------------------------------------------- */
.l-header__hamburger,
.l-header__spMenu {
    display: none;
}

/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 1023px) {

    .l-header__inner {
        padding-inline: calc(20 * var(--l-header-u));
    }

    .l-header__logo {
        width: calc(175 * var(--l-header-u));
    }

    .l-header__nav,
    .l-header__contact,
    .l-header__inner > .l-header__lang {
        display: none;
    }

    /* --- hamburger --- */
    .l-header__hamburger {
        position: relative;
        z-index: 2;
        display: block;
        flex-shrink: 0;
        width: calc(26 * var(--l-header-u));
        height: calc(20 * var(--l-header-u));
        margin-left: auto;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .l-header__hamburgerBar {
        position: absolute;
        left: 0;
        width: 100%;
        height: calc(2 * var(--l-header-u));
        background-color: #fff;
        transition: transform 0.3s, opacity 0.3s;
    }

    .l-header__hamburgerBar:nth-child(1) {
        top: 0;
    }

    .l-header__hamburgerBar:nth-child(2) {
        top: 50%;
        margin-top: calc(-1 * var(--l-header-u));
    }

    .l-header__hamburgerBar:nth-child(3) {
        bottom: 0;
    }

    .l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(1) {
        transform: translateY(calc(9 * var(--l-header-u))) rotate(45deg);
    }

    .l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(2) {
        opacity: 0;
    }

    .l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(3) {
        transform: translateY(calc(-9 * var(--l-header-u))) rotate(-45deg);
    }

    /* --- メニューを開いている間 ---
       デザインではロゴと × が閉じているときより大きく、少し下がる。
       上端の位置を指定どおりにするため、天地中央そろえをやめて上そろえにする */
    body.is-spMenuOpen .l-header__logo {
        position: relative;
        z-index: 3;            /* パネル（z-index 1）に下端が隠れないように */
        align-self: flex-start;
        width: calc(229 * var(--l-header-u));
        margin-top: calc(35 * var(--l-header-u));
    }

    body.is-spMenuOpen .l-header__hamburger {
        align-self: flex-start;
        width: calc(23 * var(--l-header-u));
        height: calc(23 * var(--l-header-u));
        margin-top: calc(32 * var(--l-header-u));
    }

    /* × の見た目が 23px 角になる棒の長さ。45度に回すと (長さ + 太さ) / √2 が
       見た目の幅になるので、23 × √2 − 2 = 30.53 */
    body.is-spMenuOpen .l-header__hamburgerBar {
        left: 50%;
        width: calc(30.53 * var(--l-header-u));
        margin-left: calc(-15.265 * var(--l-header-u));
    }

    body.is-spMenuOpen .l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(1) {
        transform: translateY(calc(10.5 * var(--l-header-u))) rotate(45deg);
    }

    body.is-spMenuOpen .l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(3) {
        transform: translateY(calc(-10.5 * var(--l-header-u))) rotate(-45deg);
    }

    /* --- panel --- */
    .l-header__spMenu {
        position: fixed;
        top: var(--l-header-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: calc(26 * var(--l-header-u)) calc(20 * var(--l-header-u)) calc(48 * var(--l-header-u));
        background-color: var(--l-header-bg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s, visibility 0.35s;
    }

    .l-header__spMenu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* --- list --- */
    .l-header__spNavHead {
        position: relative;
        display: block;
        width: 100%;
        padding: calc(22 * var(--l-header-u)) calc(40 * var(--l-header-u)) calc(15 * var(--l-header-u)) 0;
        border: 0;
        border-bottom: 1px solid var(--color-medium-blue);
        background: none;
        text-align: left;
        cursor: pointer;
    }

    .l-header__spNavEn {
        display: block;
        color: var(--color-medium-blue);
        font-family: var(--font-mon);
        font-size: calc(12 * var(--l-header-u));
        font-weight: 500;
        letter-spacing: 0.1em;
        line-height: 1.25;
    }

    .l-header__spNavJa {
        display: block;
        color: var(--color-light-silver);
        font-size: calc(16 * var(--l-header-u));
        font-weight: 500;
        line-height: 1.75;
    }

    .l-header__spNavChevron {
        position: absolute;
        /* 英字＋日本語の天地中央ではなく、日本語行の天地中央に合わせる
           （padding-top 22 + 英字行 15 + 日本語行 28 の半分） */
        top: calc((22 + 15 + 28 / 2) * var(--l-header-u));
        right: calc(18 * var(--l-header-u));
        width: calc(15 * var(--l-header-u));
        height: calc(8.3 * var(--l-header-u));
        background-color: var(--color-medium-blue);
        transform: translateY(-50%);
        transition: transform 0.3s;
        -webkit-mask: url(../img/common/header_arrow_down.png) no-repeat center bottom / 100% auto;
        mask: url(../img/common/header_arrow_down.png) no-repeat center bottom / 100% auto;
    }

    /* 下層を持たない項目は「>」 */
    .l-header__spNavChevron--next {
        transform: translateY(-50%) rotate(-90deg);
    }

    .l-header__spNavItem.is-open .l-header__spNavChevron {
        transform: translateY(-50%) rotate(180deg);
    }

    /* --- accordion --- */
    .l-header__spSub {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s ease;
    }

    .l-header__spNavItem.is-open .l-header__spSub {
        grid-template-rows: 1fr;
    }

    .l-header__spSubInner {
        overflow: hidden;
    }

    .l-header__spSubList {
        padding: calc(14 * var(--l-header-u)) 0 calc(14 * var(--l-header-u)) calc(35 * var(--l-header-u));
    }

    .l-header__spSubLink {
        display: block;
        padding: calc(5 * var(--l-header-u)) 0;
        color: var(--color-light-blue);
        font-size: calc(14 * var(--l-header-u));
        font-weight: 500;
        line-height: 1.6;
    }

    /* --- language --- */
    .l-header__spMenu .l-header__lang {
        justify-content: center;
        margin-left: 0;
        margin-top: calc(43 * var(--l-header-u));
    }
}

/* SP メニュー展開中 */
body.is-spMenuOpen {
    overflow: hidden;
}

body.is-spMenuOpen .l-header {
    border-bottom-color: transparent;
}

/* =============================================================
   英語版（Figma「英語版」Global TOP のヘッダー）
     - ロゴの右の GLOBAL バッジは出さない（2026-09-18 指示）
     - ナビは英字 1 行。日本語版の「英字キャプション＋日本語」の 2 段にすると
       英語版では同じ語が上下に重なるので、キャプションを出さず下の段を英字で組む
       （Montserrat 500 / 15px / 字送り 1.5px / 大文字）
   ============================================================= */
html[lang^="en"] .l-header__navEn,
html[lang^="en"] .l-header__megaTtlEn {
    display: none;
}

html[lang^="en"] .l-header__navJa {
    margin-top: 0;
    font-family: var(--font-mon);
    font-size: calc(15 * var(--l-header-u));
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* 英語版の CONTACT ボタン：字送り 0 だと詰まって見えるので、ナビ（0.1em）とそろえて開ける */
html[lang^="en"] .l-header__contact {
    letter-spacing: 0.1em;
}

html[lang^="en"] .l-header__megaTtlJa {
    margin-top: 0;
    font-family: var(--font-mon);
    font-size: calc(48 * var(--l-header-u));
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {

    html[lang^="en"] .l-header__spNavEn {
        display: none;
    }

    html[lang^="en"] .l-header__spNavJa {
        font-family: var(--font-mon);
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* 英字キャプションの行（15）が無くなるぶん、矢印を上げる */
    html[lang^="en"] .l-header__spNavChevron {
        top: calc((22 + 28 / 2) * var(--l-header-u));
    }
}