@charset "utf-8";

/* ============================================================
   1. スマホ・タブレット（768px以下）の設定
   ============================================================ */
@media screen and (max-width: 768px) {
    /* --- 1. ヘッダー（ロゴ・ボタン行）固定設定 --- */
    html body header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 80px !important;
        min-height: 0 !important;
        background: #fff !important;
        z-index: 10001 !important;
        display: block !important;
        box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.05);
    }

    html body header .headerInner {
        height: 80px !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    header .headerInner .headBtn {
        margin-right: 0px;
    }

    /* --- 2. ナビ（2段組みテキストリンク）固定設定 --- */
    html body .kv .sp-nav-wrap.spOnly {
        display: block !important;
        position: fixed !important;
        top: 80px !important; /* ヘッダーのすぐ下に連結 */
        left: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
        background: #fff !important;
        margin-top: 0 !important;
        /* タップしやすく上下の余白を多めに確保（10px → 15px） */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #eee;
    }

    /* 1行目：リンク同士の「縦の行間」を広げる */
    html body .sp-nav-wrap .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        /* 1段目と2段目の間隔を広げて誤タップ防止（8px → 18px） */
        margin-bottom: 18px !important; 
        list-style: none !important;
        padding: 0 !important;
    }

    /* 2行目：スタイルの整理 */
    html body .sp-nav-wrap .sub-nav {
        display: flex !important;
        justify-content: center !important;
        list-style: none !important;
        padding: 0 !important;
        margin-top: 0 !important; /* 上段のmarginで制御するため0に固定 */
    }

    /* 各リンクのスタイル（フォントUP & 判定拡大） */
    .sp-nav-list li {
        padding: 0 6px !important; /* 横の間隔も少し広げました */
        border-right: 1px solid #ccc;
        flex-shrink: 0 !important;
    }
    .sp-nav-list li:last-child { border-right: none; }

    html body .sp-nav-wrap .sp-nav-list li a {
        font-size: 14px !important; /* フォントサイズを13pxから14pxへUP */
        font-weight: bold !important;
        color: #333 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        position: relative;
        display: inline-block;
    }

    /* 透明な疑似要素で当たり判定を拡大 */
    html body .sp-nav-wrap .sp-nav-list li a::after {
        content: "";
        position: absolute;
        top: -12px;
        bottom: -12px;
        left: -10px;
        right: -10px;
    }

    /* --- 3. アンカーリンクの到達位置（潜り込み防止） --- */
    /* ヘッダー(80px) + ナビ2段(約95px) = 175px 程度必要 */
    section[id] {
        scroll-margin-top: 110px !important;
    }

    /* --- 4. コンテンツ（KV画像）の押し下げ設定 --- */
    html body main .kv .kvInner {
        /* ヘッダー全体の高さに合わせて調整 */
        padding-top: 110px !important; 
    }


    /* --- 5. main 画像　全体表示 --- */
main {
        padding-top: 113px;
    }
}


    /* スムーズスクロール有効化 */
    html {
        scroll-behavior: smooth;
    }
}

/* ============================================================
   2. PC・iPad（769px以上）の設定
   ============================================================ */
@media screen and (min-width: 769px) {
    .sp-nav-wrap { display: none !important; }

    header {
        width: 100% !important;
        min-width: 0 !important;
        background-color: #fff;
        height: 80px !important;
        position: fixed;
        top: 0;
        z-index: 1000;
        box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.05);
    }

    header .headerInner {
        max-width: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 40px !important;
        box-sizing: border-box !important;
    }

    header .headerInner .logo {
        flex-shrink: 0 !important;
        width: 180px !important;
    }

    header .headerInner nav.headerNavPc {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 20px !important;
    }

    header .headerInner nav.headerNavPc ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        list-style: none !important;
        max-width: 550px !important;
        gap: 2px 25px !important;
        line-height: 1.2 !important;
    }

    header .headerInner nav.headerNavPc ul li a {
        font-size: 15px !important;
        font-weight: bold !important;
        color: #111 !important;
        text-decoration: none !important;
    }
}


/* ============================================================
   iPad・タブレット (769px 〜 1250px) 
   1行レイアウトを維持し、ボタンを絶対に潰さない設定
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1250px) {
    /* 1. ヘッダーを1行（80px）に固定 */
    html body header.jsHeader {
        position: fixed !important;
        height: 80px !important;
        min-height: 80px !important;
        padding-bottom: 0 !important;
    }

    /* 2. 中身：1行に整列し、端まで使い切る */
    html body header .headerInner {
        flex-wrap: nowrap !important;
        height: 80px !important;
        padding: 0 15px !important; /* 左右の余白をさらに詰め、横幅を稼ぐ */
        justify-content: space-between !important;
    }

    /* 3. ロゴ：絶対に縮まない設定 */
    html body header .headerInner .logo {
        flex-shrink: 0 !important;
        width: 160px !important; /* 少しだけ小さくしてスペースを確保 */
    }

    /* 4. ナビゲーション：真ん中で縮みながら耐える */
    html body header .headerInner nav.headerNavPc {
        flex: 1 !important;
        margin: 0 5px !important;
        display: flex !important;
        justify-content: center !important;
        overflow: hidden; /* 万が一溢れても外に逃さない */
    }

    /* 5. リンクの間隔を最小限にして「1行」に押し込む */
    html body header .headerInner nav.headerNavPc ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 8px !important; /* ★間隔をさらに詰めて衝突回避 */
    }

    html body header .headerInner nav.headerNavPc ul li a {
        font-size: 13px !important; /* ★文字を少し小さくして1行を死守 */
        white-space: nowrap !important;
        letter-spacing: -0.5px !important; /* 字間も少し詰める */
    }

    /* 6. 【重要】ボタン：形を崩さず、改行を禁止する */
    html body header .headerInner .headBtn {
        flex-shrink: 0 !important; /* ★絶対に縮ませない */
    }

    html body header .headerInner .headBtn a {
        display: block !important;
        white-space: nowrap !important; /* ★絶対に改行させない */
        padding: 10px 15px !important; /* 元のパディングを維持 */
        font-size: 13px !important;
    }

    /* 7. 到達位置と押し下げを80px用に修正 */
    html body main .kv .kvInner {
        padding-top: 80px !important; 
    }
    section[id] {
        scroll-margin-top: 80px !important;
    }
}



/* ============================================================
   3. フッター設定
   ============================================================ */
footer {
    width: 100% !important;
    min-width: 0 !important;
    background: #fff;
}
footer .footInner .footBottomLinks {
    width: 100%;
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px solid #eee;
}
footer .footInner .footBottomLinks ul {
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
}
footer .footInner .footBottomLinks ul li {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
}
footer .footInner .footBottomLinks ul li a {
    text-decoration: none;
    color: inherit;
}
footer .footInner .footBottomLinks ul li + li::before {
    content: "|";
    margin: 0 15px;
    color: #ccc;
}
footer .footInner .footBottomLinks ul li a[target="_blank"]::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    background: url(/common/images/common/ico_outlink.png) no-repeat right center;
}