/* =============================================
   SP 共通ヘッダー
   Figma: 5824:94695（Wireframe-17「ヘッダー」canonical / 1024-1439 middle + 320-1023 SP 仕様の正）
          4954:99080（SP ヘッダー sub-node）/ 1174:25336（ハンバーガー）/ 4993:84713（middle ドロワー）
   ============================================= */

.sp-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    /* ヘッダーバーはビューポート全幅。旧 min(100%,390px) では 390px 枠に root 拡縮した
       ロゴ等が入りきらず溢れて崩れていたため、width:100% に変更（フル幅・溢れ解消）。 */
    width: 100%;
    min-height: 72rem;
    padding: 16rem;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto;
    margin-right: auto;
    z-index: 10001 !important;
    /* Figma 4954:99080: 初期 #FFFFFF 不透明度60%（ぼかし指定なし）。
       backdrop-filter は fixed で静止時に背景を取りこぼし白く描画されるため使わない */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0 0 24rem 24rem;
    box-sizing: border-box;
}

/* スクロール後（Figma 4954:99080）: 背景 #FFFFFF 不透明度100%。最上部に戻ると60%へ */
.sp-header.is-scrolled {
    background-color: var(--color-white);
}

/* ---- ロゴ ---- */
.sp-header__logo {
    position: relative;
    display: block;
    width: 176rem;
    height: 39.6rem;
    flex-shrink: 0;
}

.sp-header__logo-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-header__logo-wordmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* ---- アクション（検索・メニュー） ---- */
.sp-header__actions {
    display: flex;
    align-items: center;
    gap: 16rem;
    padding-right: 8rem;
}

.sp-header__search-btn,
.sp-header__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rem;
    height: 32rem;
    padding: 0;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.sp-header__search-btn { background: none; }

/* ハンバーガーは key色の角丸ボックス＋白アイコン（Figma 1174:25336: 32px / radius24 / icon 13×12） */
.sp-header__menu-btn {
    background-color: var(--color-key);
    border-radius: 24rem;
    transition: background-color var(--duration-fast) var(--easing-default);
}

.sp-header__menu-btn:hover,
.sp-header__menu-btn:active { background-color: var(--color-orange-01); }

/* 3本線アイコン（指示 5693:90533: codepen altro-nvp2/xqVeKO 左端アニメ）。
   span 1本＋::before/::after の3本で「≡ → ×」を作る。 */
.sp-header__menu-icon {
    position: relative;
    display: inline-block;
    width: 14rem;
    height: 12rem;
    background: none;
    -webkit-mask: none;
            mask: none;
}

.sp-header__menu-icon::before,
.sp-header__menu-icon::after,
.sp-header__menu-icon > span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5rem;
    background-color: var(--color-white);
    border-radius: 1rem;
    transform-origin: center;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 200ms ease;
}

.sp-header__menu-icon::before { top: 0; }
.sp-header__menu-icon > span   { top: 50%; transform: translateY(-50%); }
.sp-header__menu-icon::after  { bottom: 0; }

.sp-header__menu-btn.is-open .sp-header__menu-icon::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.sp-header__menu-btn.is-open .sp-header__menu-icon > span {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}
.sp-header__menu-btn.is-open .sp-header__menu-icon::after {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

.sp-header__search-icon {
    width: 24rem;
    height: 24rem;
    display: block;
}

/* SPヘッダーバー / SP検索オーバーレイ: ≤1023.98px のみ表示（!important で display:flex を打ち消す） */
@media (min-width: 1024px) {
    .sp-header,
    .sp-srch-overlay { display: none !important; }
}

/* SPメニュードロワー: PC middle(992〜1439px)のハンバーガーからも流用するため ≥1440px でのみ非表示 */
@media (min-width: 1440px) {
    .sp-menu-overlay { display: none !important; }
}

/* ===================================================================
 * PC middle (1024〜1439px) のドロワー（Figma menu 4993:84713）
 *   SP は中央420pxパネルだが、中間幅は「右寄せ 480px のフローティングパネル」。
 *   中身はナビ＋サブナビのみ（SNS / Language / お問い合わせ はヘッダーバー側）。
 *   余白・境界・サブ項目の体裁を Figma に合わせる。
 *   ※ top-sp-menu.css(0,1,0) に勝つよう詰めセレクタで特異度を上げている。
 * ===================================================================*/
@media (min-width: 1024px) and (max-width: 1439px) {
    .sp-menu-overlay.sp-menu-overlay {
        justify-content: flex-end;
        background-color: transparent; /* PCドロワーは黒背景(スクリム)を出さない */
    }

    /* パネル: 幅480 / 内側 pt80・px40・pb56 / 上寄せ */
    .sp-menu-overlay .sp-menu-panel {
        max-width: 480rem;
        margin: 0; /* auto縦中央を解除して上寄せ */
        padding: 80rem 40rem 56rem;
    }

    /* メインナビ項目: 高さ固定をやめ Figma の py20・px8 に（薄グレー境界は据え置き） */
    .sp-menu-overlay .sp-menu-item {
        height: auto;
        min-height: 0;
        padding: 20rem 8rem;
    }

    /* アコーディオン展開中: トリガーの下線を消し、サブ群の下端に薄線+16px余白 */
    .sp-menu-overlay .sp-menu-accordion.is-open .sp-menu-item--accordion {
        border-bottom: none;
    }
    .sp-menu-overlay .sp-menu-accordion.is-open .sp-menu-sub {
        padding-bottom: 16rem;
        border-bottom: 1px solid rgba(217, 217, 217, 0.88);
    }

    /* サブ項目: インデントなし(px8)・bold・行間の区切り線なし */
    .sp-menu-overlay .sp-menu-sub-item {
        height: auto;
        padding: 8rem;
        font-weight: 700;
        border-bottom: none;
    }

    /* サブナビ(ニュースリリース等): py10・px8（Figma gap20 相当の縦リズム） */
    .sp-menu-overlay .sp-menu-sub-nav-item {
        height: auto;
        padding: 10rem 8rem;
    }

    /* サブナビ直前の区切りは濃い線を出さず透明gapに（区切りはアコーディオン群の薄線が担う） */
    .sp-menu-overlay .sp-menu-separator:has(+ .sp-menu-sub-nav-item) {
        height: 0;
        margin: 12rem 0;
        background-color: transparent;
    }

    /* 中間幅は SNS / Language / お問い合わせ をドロワーに出さない */
    .sp-menu-overlay .sp-menu-section,
    .sp-menu-overlay .sp-menu-contact-wrap { display: none; }

    /* 隠したセクション直前の区切り線も消す */
    .sp-menu-overlay .sp-menu-separator:has(+ .sp-menu-section),
    .sp-menu-overlay .sp-menu-separator:has(+ .sp-menu-contact-wrap) { display: none; }
}

/* ===================================================================
 * SPドロワー (≤1023.98px / Figma 320〜1023px 4957:82154)
 *   中央420pxカードではなく「全幅パネル（左右8pxマージン）」にする。
 *   スクリム(黒背景)・全コンテンツ(SNS/Language/お問い合わせ)は従来どおり。
 *   ※ top-sp-menu.css(0,1,0) に勝つよう詰めセレクタで特異度を上げる。
 * ===================================================================*/
@media (max-width: 1023.98px) {
    .sp-menu-overlay.sp-menu-overlay { padding: 8rem; }

    /* ドロワーは SP ヘッダー(.sp-header: min(100%,390px) 中央寄せ)と同じ幅に。
       Figma SP メニューカードは 374px（390px幅に左右8px余白）。中央寄せは base のまま。 */
    .sp-menu-overlay .sp-menu-panel { max-width: 374rem; }
}

/* ===================================================================
 * SPドロワー内リンクの状態（Figma navi_txt_link SP: default/hover/active）
 *   hover = 下線（文字色そのまま）/ active(タップ) = キーカラー文字
 *   hover はマウス端末のみ（@media hover）→ touch のタップ残り下線を防止。
 *   active はタッチでも有効（タップ時にオレンジ）。
 * ===================================================================*/
@media (hover: hover) {
    .sp-menu-item:hover .sp-menu-item-label,
    .sp-menu-sub-item:hover,
    .sp-menu-sub-nav-item:hover,
    .sp-menu-lang-item:hover {
        text-decoration: underline;
        text-decoration-thickness: 2rem;
        text-underline-offset: 3rem;
    }
}

.sp-menu-item:active .sp-menu-item-label,
.sp-menu-sub-item:active,
.sp-menu-sub-nav-item:active,
.sp-menu-lang-item:active {
    color: var(--color-key);
}