/* 
 * スマホワオ Header Template Specific Styles
 * Version: 4.0
 * Last Updated: 2025-09-14
 * 
 * shared-header.cssの上に追加されるスマホワオ固有のスタイル
 * shared-header.phpの既存機能を最大限活用するシンプルアプローチ
 * 
 * 変更履歴:
 * v4.0 - 設計大幅見直し: shared-header.phpの既存機能活用、スマホワオ固有要素のみ追加
 *        デスクトップ: サブナビゲーション追加のみ、既存メニューはそのまま活用
 *        モバイル: ロゴ置換とサブメニュー挿入のみ、既存構造は変更せず
 *        コード量大幅削減、保守性向上
 * v3.1 - 動的挿入問題を解決し、直接スタイリングに変更
 * v3.0 - 動的挿入版（問題発生により廃止）
 * v2.x - 旧構造（shared-header.phpを置き換える複雑なアプローチ、廃止）
 * v1.0 - 初期バージョン
 */

/* ====================
 * スマホワオデスクトップサブナビゲーション
 * shared-header.phpで生成されるトップメニュー（.go-top-navi）の下に配置
 * ==================== */
.go-top-navi-sub {
    position: fixed;
    top: 60px; /* .go-top-naviの高さ分下に配置 */
    width: 100%;
    height: 100px;
    padding: 20px 0;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.35);
    z-index: 10001; /* .go-top-naviより下のz-index */
    display: block;
}

.go-top-navi-sub-inner {
    display: flex;
    width: 1400px;
    max-width: 95%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

.go-top-navi-sub .go-top-navi-sub-menu {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    list-style: none;
    padding: 0 5px;
    margin: 0;
}

.go-top-navi-sub .go-top-navi-sub-logo > a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.go-top-navi-sub .go-top-navi-sub-logo .go-logo-fullsize {
    display: block;
    width:calc(514px * .3);
    height:calc(98px * .3);
}

.go-top-navi-sub .go-top-navi-sub-logo-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: #099de7;
    margin: 0 0 0 10px;
}

.go-top-navi-sub .go-submenu-item {
    position: relative;
    margin: 0;
}

/* サブメニューアイテムのホバーエフェクト */
.go-top-navi-sub .go-submenu-item:not(.go-submenu-btn)::before {
    content: '';
    position: absolute;
    top: calc((60px - 1em - 20px) / 2 + 1px);
    left: 0;
    width: 100%;
    height: calc(1em + 20px);
    background: rgba(135, 84, 255, 0);
    border-radius: 9999px;
    transform: scale(.7);
    transition: background-color .2s ease-out, transform .2s ease-out;
}

.go-top-navi-sub .go-submenu-item:not(.go-submenu-btn):hover::before {
    background: rgba(135, 84, 255, 0.2);
    transform: scale(1);
}

/* サブメニューリンクの基本スタイル */
.go-top-navi-sub .go-submenu-link {
    display: block;
    position: relative;
    padding: calc((60px - 1em) / 2) 2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: #000;
    text-decoration: none;
}

.go-top-navi-sub .go-submenu-link:hover {
    cursor: pointer;
}

/* 購入ボタン（特別スタイル） */
.go-top-navi-sub .go-submenu-btn .go-submenu-link {
    color: #fff;
    border-radius: 6px;
    background: #099de7;
    margin-left: 2em;
    transition: ease-out .5s;
}

.go-top-navi-sub .go-submenu-btn .go-submenu-link:hover {
    background: #000;
}

/* ====================
 * スマホワオヘッダー高さ調整
 * デスクトップ時のコンテンツ押し下げ量
 * ==================== */
.go-header-wrapper .go-header-dummy {
    height: 160px; /* 60px(トップメニュー) + 100px(サブナビ) */
}

/* ====================
 * モバイル対応
 * shared-header.phpで生成されるモバイル構造を活用
 * ==================== */
@media (max-width: 768px) {
    /* デスクトップサブナビを非表示 */
    .go-top-navi-sub {
        display: none !important;
    }

    /* モバイルヘッダーダミーの高さ調整 */
    .go-header-wrapper .go-header-dummy {
        height: 70px; /* スマホワオロゴ用の調整済み高さ */
    }

    /* ====================
     * スマホワオモバイルサブナビゲーション
     * JavaScriptで .go-mobile-nav の上部に動的挿入される
     * ==================== */
    .go-mobile-sub-nav {
        border-bottom: 2px solid #e0e0e0;
        background: #f8f9fa;
        padding: 0;
        margin: 0;
    }

    /* スマホワオセクションヘッダー */
    .go-mobile-sub-header {
        padding: 15px 20px 10px;
        background: #e3f2fd;
        border-bottom: 1px solid #bbdefb;
    }

    .go-mobile-sub-title {
        font-size: 18px;
        font-weight: 600;
        color: #1976d2;
        margin: 0;
        font-family: 'Noto Sans JP', sans-serif;
    }

    /* スマホワオサブメニューリスト */
    .go-mobile-sub-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .go-mobile-sub-item {
        border-bottom: 1px solid #e0e0e0;
    }

    .go-mobile-sub-link {
        display: block;
        padding: 15px 25px;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        text-decoration: none;
        transition: background-color 0.2s;
        font-family: 'Noto Sans JP', sans-serif;
    }

    .go-mobile-sub-link:hover,
    .go-mobile-sub-link:focus {
        background: #f0f0f0;
        cursor: pointer;
    }

    /* スマホワオ購入ボタン（モバイル版） */
    .go-mobile-sub-btn-item {
        background: #f8f8f8;
    }

    .go-mobile-sub-btn {
        background: #099de7 !important;
        color: #fff !important;
        border-radius: 6px;
        margin: 10px 15px;
        text-align: center;
        font-weight: 600;
    }

    .go-mobile-sub-btn:hover,
    .go-mobile-sub-btn:focus {
        background: #000 !important;
    }

    /* セクション区切り線 */
    .go-mobile-sub-separator {
        height: 8px;
        background: #e0e0e0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    /* ジェムソフト総合メニューラベル */
    .go-mobile-general-header {
        padding: 15px 20px 10px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }

    .go-mobile-general-title {
        font-size: 16px;
        font-weight: 600;
        color: #666;
        margin: 0;
        font-family: 'Noto Sans JP', sans-serif;
    }

    /* 
     * 注意: .go-mobile-menu-list 以下のスタイルは shared-header.css で定義済み
     * スマホワオ版では既存のスタイルをそのまま使用し、重複定義を避ける
     * これにより、シリーズ見出し（ZEUSシリーズなど）や階層メニューの
     * 動作とスタイルがshared版と完全に一致する
     */
}

@media (max-width: 1250px) {
    .go-top-navi-sub .go-top-navi-sub-logo > a {
        flex-direction: column;
        align-items: flex-start;
    }
    .go-top-navi-sub .go-top-navi-sub-logo .go-logo-fullsize {
        width:calc(514px * .24);
        height:calc(98px * .24);
    }
    .go-top-navi-sub .go-top-navi-sub-logo-title {
        font-size: 16px;
        margin: 5px 0 0;
    }
    .go-top-navi-sub .go-submenu-link {
        padding-right: 1em;
        padding-left: 1em;
    }        
}    

/* より小さな画面での調整 */
@media (max-width: 480px) {
    .go-mobile-sub-link {
        padding: 12px 20px;
        font-size: 15px;
    }

    .go-mobile-sub-header {
        padding: 12px 15px 8px;
    }

    .go-mobile-general-header {
        padding: 12px 15px 8px;
    }
}