/* ============================================================
   p-header / p-footer — グローバルヘッダー・フッター
   依存：style.css の :root CSS変数
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.p-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header, 100);
    background-color: var(--color-bg-card); /* #ffffff */
    width: 100%;
}

.p-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-sm); /* SP: 20px */
    padding-block: 8px;             /* SP: 8px */
    max-width: var(--container-max, 1600px);
    margin-inline: auto;
}

/* ---- SP左グループ（ハンバーガー＋ロゴ） ---- */
.p-header__sp-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---- ロゴ ---- */
.p-header__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* PC用ロゴリンク（SP では非表示） */
.p-header__logo-link--pc {
    display: none;
}

.p-header__logo {
    display: block;
    height: auto;
}

.p-header__logo-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-header__logo-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-heading); /* #00818f */
    line-height: 1;
}

.p-header__logo-text {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-default);
}

/* ---- MVTOロゴ ---- */
.p-header__mvto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.p-header__mvto-logo {
    display: block;
    width: 80px;  /* SP */
    height: auto;
}

.p-header__mvto-text {
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-default);
}

.p-header__mvto-sub {
    /* SP では非表示（ロゴとハンバーガーのみ。ヘッダー高さを増やさない） */
    display: none;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-default);
    margin: 0;
    text-align: right;
    line-height: 1.4;
    font-feature-settings: "palt" 1;
}

/* ---- ハンバーガーボタン ---- */
.p-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.p-header__hamburger-line {
    display: block;
    width: 25px;
    height: 1.5px;
    background-color: var(--color-text-heading); /* #00818f */
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ハンバーガー → ✕ 変形 */
.p-header__hamburger[aria-expanded="true"] .p-header__hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.p-header__hamburger[aria-expanded="true"] .p-header__hamburger-line:nth-child(2) {
    opacity: 0;
}
.p-header__hamburger[aria-expanded="true"] .p-header__hamburger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- PC ナビ（SP では非表示） ---- */
.p-header__nav {
    display: none;
}

/* ---- SP ドロワー ---- */
.p-header__drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: min(320px, 80vw);
    height: 100dvh;
    background-color: var(--color-bg-card);
    z-index: calc(var(--z-header, 100) + 1);
    overflow-y: auto;
    transition: left 0.3s ease;
    padding: 80px var(--space-sm) var(--space-2xl);
}

.p-header__drawer.is-open {
    left: 0;
}

.p-header__drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.p-header__drawer-item {
    border-bottom: 1px solid var(--color-border-default);
}

.p-header__drawer-link {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-default);
    text-decoration: none;
    font-feature-settings: "palt" 1;
}

.p-header__drawer-link:hover {
    color: var(--color-text-heading);
}

/* オーバーレイ */
.p-header__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-header, 100);
}

.p-header__overlay.is-visible {
    display: block;
}

/* body スクロールロック */
body.is-drawer-open {
    overflow: hidden;
}

/* ============================================================
   PC（1280px〜）
   ============================================================ */
@media (min-width: 1280px) {

    .p-header__inner {
        padding-inline: var(--space-2xl); /* PC: 48px */
        padding-block: var(--space-md);   /* PC: 24px */
    }

    /* SP左グループは非表示 */
    .p-header__sp-left {
        display: none;
    }

    /* PC用ロゴを表示 */
    .p-header__logo-link--pc {
        display: flex;
    }

    .p-header__logo {
        width: 224px;
    }

    /* 右MVTOロゴ：Figma実寸（144×47）に準拠。
       サイズで解決せず、全体配置（下のnav中央化・align）でバランスを取る。
       親 .p-header__mvto は幅をロゴ幅(144px)に固定し、右に余計に広がらせない。 */
    .p-header__mvto {
        /* テキストが2行に収まるよう列幅を拡張（ロゴ画像サイズは144pxのまま） */
        flex: 0 0 240px;
        width: 240px;
        max-width: 240px;
        align-items: center; /* ロゴと補足テキストを列の中央に揃える */
        text-align: center;
    }
    .p-header__mvto-logo {
        display: block;
        width: 144px;
        max-width: 144px;
        height: auto;
        margin-inline: auto; /* 拡張した列内で中央寄せ */
        object-fit: contain;
    }

    /* PCでは MARIANAS ロゴ下に補足テキストを2行で表示（折り返さない） */
    .p-header__mvto-sub {
        display: block;
        text-align: center;
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap; /* 2行目を途中で折り返さない */
    }

    /* ハンバーガー非表示 */
    .p-header__hamburger {
        display: none;
    }

    /* ドロワー非表示 */
    .p-header__drawer {
        display: none;
    }

    /* PCナビを表示。中央列として伸長し、左ロゴ／右ロゴの間で真に中央寄せにする */
    .p-header__nav {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    .p-header__nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-lg); /* 32px */
    }

    .p-header__nav-link {
        font-family: var(--font-sans);
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text-default);
        text-decoration: none;
        font-feature-settings: "palt" 1;
        transition: color 0.2s;
    }

    .p-header__nav-link:hover,
    .p-header__nav-link.is-active {
        color: var(--color-text-heading);
    }

}

/* ============================================================
   FOOTER
   ============================================================ */
.p-footer {
    background-color: var(--color-bg-brand); /* #002c5e */
    padding-block: var(--space-3xl) var(--space-xl); /* SP: 64px / 40px */
}

.p-footer__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg); /* 32px */
}

/* ---- ブランドエリア ---- */
.p-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--space-lg);
}

.p-footer__logo {
    display: block;
    width: 120px; /* SP */
    height: auto;
}

.p-footer__logo-text {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
}

.p-footer__brand-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    margin: 0;
}

/* ---- 区切り線 ---- */
.p-footer__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-block: var(--space-lg);
}

/* ---- フッターナビ ---- */
.p-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* SP: 縦積み */
    gap: var(--space-lg);
}

.p-footer__nav-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-footer__nav-heading {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    font-feature-settings: "palt" 1;
}

.p-footer__nav-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-footer__nav-sub-link {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    opacity: 0.8;
    font-feature-settings: "palt" 1;
    transition: opacity 0.2s;
}

.p-footer__nav-sub-link:hover {
    opacity: 1;
}

/* ---- ボトム（SNS＋コピーライト） ---- */
.p-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.p-footer__sns {
    display: flex;
    align-items: center;
    gap: var(--space-sm); /* 20px */
}

.p-footer__sns-label {
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    letter-spacing: 1px;
}

.p-footer__sns-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px; /* SP */
}

.p-footer__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;  /* SP */
    height: 24px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.p-footer__sns-link svg {
    width: 24px;
    height: 24px;
}

.p-footer__sns-link:hover {
    opacity: 0.7;
}

.p-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-footer__copyright {
    font-family: var(--font-en); /* Sora */
    font-size: 12px;  /* SP */
    font-weight: 400;
    color: var(--color-white);
    margin: 0;
}

.p-footer__legal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.p-footer__legal-link {
    font-family: var(--font-sans);
    font-size: 12px;  /* SP */
    font-weight: 400;
    color: var(--color-white);
    text-decoration: none;
    font-feature-settings: "palt" 1, "pwid" 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.p-footer__legal-link:hover {
    opacity: 1;
}

/* ============================================================
   フッター PC（1280px〜）
   ============================================================ */
@media (min-width: 1280px) {

    .p-footer {
        padding-block: var(--space-4xl); /* PC: 80px */
    }

    .p-footer__inner {
        padding-inline: 0;
    }

    .p-footer__logo {
        width: 200px; /* PC */
    }

    .p-footer__nav-list {
        flex-direction: row; /* PC: 横5カラム */
        gap: var(--space-2xl); /* 48px */
        align-items: flex-start;
    }

    .p-footer__nav-col {
        flex: 1;
    }

    .p-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .p-footer__sns-list {
        gap: var(--space-sm); /* PC: 20px */
    }

    .p-footer__sns-link {
        width: 32px;
        height: 32px;
    }

    .p-footer__sns-link svg {
        width: 32px;
        height: 32px;
    }

    .p-footer__legal {
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
    }

    .p-footer__copyright {
        font-size: 14px; /* PC */
    }

    .p-footer__legal-link {
        font-size: 14px; /* PC */
    }

} /* end @media PC */

/* ============================================================
   狭幅PCヘッダー フィット調整（1280〜1279超〜1366px）
   PCナビヘッダー（min-width:1280px発火）の最狭帯だけ要素を縮小し、
   中央ナビの詰まり・折り返し、左右ロゴの占有過大を緩和する。
   ・1367px以上のPCヘッダーは変更しない（このクエリ外）
   ・SP/中間幅（〜1279px）は対象外（min-width:1280pxのため非適用）
   ・対象はヘッダーのみ。フッター・本文・カードには非干渉
   ============================================================ */
@media (min-width: 1280px) and (max-width: 1366px) {

    /* 左右の余白を詰めて中央ナビの可用幅を確保 */
    .p-header__inner {
        padding-inline: var(--space-lg); /* 48px→32px */
    }

    /* 左：Visit Saipan ロゴ縮小 */
    .p-header__logo {
        width: 180px; /* 224px→180px */
    }

    /* 中央：ナビの間隔と文字を縮小（折り返し/縦割れ防止） */
    .p-header__nav-list {
        gap: var(--space-sm); /* 32px→20px */
    }
    .p-header__nav-link {
        font-size: 14px; /* 16px→14px */
        line-height: 1.4;
    }

    /* 右：MARIANAS ロゴ列と補足テキストを縮小 */
    .p-header__mvto {
        flex: 0 0 200px; /* 240px→200px */
        width: 200px;
        max-width: 200px;
    }
    .p-header__mvto-logo {
        width: 120px; /* 144px→120px */
        max-width: 120px;
    }
    .p-header__mvto-sub {
        font-size: 10px; /* 11px→10px（2行のまま nowrap 維持） */
    }
}