/* ==============================================
  1. CSS Variables
============================================== */
:root {
  --color-main: #5f5f5f;
  --color-sub-1: #878787;
  --color-sub-2: #e6e2e2;
  --color-sub-3: #fbeded;
  --color-sub-4: #e38296;
}


/* ==============================================
  2. Base Style
============================================== */
body {
    position: relative;
	color: var(--color-main); /* フォント色 : main */

    font-family:
        "Noto Serif JP",
        "Noto Serif",
        "Hiragino Mincho ProN",
        "Yu Mincho",
        serif; /* フォント */
    font-weight: 400; /* 400:Regular(R) 500:Medium(M) */
/*    font-optical-sizing: auto; /* 字形を自動調節 効果は無し / Variable Font（可変フォント）使用時有効  */

    background: #fff; /* 背景白 */

    padding-top: 50px;
    padding-bottom: 42px; /* ボタン高さ分 */
}

 /* ========== pc ========== */
@media screen and (min-width: 768px) { /* タブレット・PC用 */

    body{
        padding-top: 70px;
        padding-bottom: 0;
    }
}


/* ==============================================
  3. Layout
============================================== */
/* ▼ ==============================
    header 
============================== ▼ */
.header {
    position: fixed;
    display: flex;
    padding: 15px;

    height: 50px;
    background: #fff;
    border-top: 1px solid #878787;/* 上線 */

    justify-content: space-between;
    align-items: center;

    top: 0;
    width: 100%;
    z-index: 10000;
}

/* ▼ ========== logo ========== ▼ */
.site_logo {
    flex: 1;               /* 左側を可変に */
    min-width: 0;          /* ← SVGで超重要 */
}

.site_logo img {
    max-width: 100%;
    height: 20px;
    display: block;
}
/* ▲ ---------- logo ---------- ▲ */

 /* ▼ ==================== 
    header_actions　cta_btn 
==================== ▼ */
.header_actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 10000;
}

.header_actions .cta_btn {
    width: 50%;
    text-align: center;
    padding: 14px 0;

    font-size: 16px;
    font-weight: 500; /* 太さ */
    line-height: 1.65; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */

    border-radius: 0;
    border: none;
    background: #5f5f5f;
    color: #fff;
}

.header_actions .cta_btn:first-child {
    border-right: 1px solid #fff;
}

.header_actions .cta_btn:hover {
    background: #878787;
}
 /* ▲ ---------- header_actions cta_btn ---------- ▲ */

 /* ▼ ====================
    hamburger 
==================== ▼ */
/* ========== 外枠 ========== */
.hamburger-menu {
    width: 50px; /* 押せる範囲 */
    height: 50px; /* 押せる範囲 */
    position: relative;
    border: none;
    background: transparent; /* ボタン背景色 */
    appearance: none;
    padding: 0; /* 中のバーの余白 */
    cursor: pointer;

    margin-left: auto; /* ボタンが消えた分、ハンバーガーを右端に */
    z-index: 10000; /* hamburgerを前面に */
}

/* ========== 三本線 ========== */
.hamburger-menu__bar {
    display: inline-block;
    width: 44%; /* ボタン幅に対する線の長さ */
    height: 2px; /* 線の太さ */
    background: #878787; /* 線の色 */
    position: absolute; /* ボタン内自由配置 */
    left: 50%;
    transform: translateX(-50%);
    transition: .5s;
}
.hamburger-menu__bar:first-child { /* 一本目の縦位置 */
    top: 16px;
}
.hamburger-menu__bar:nth-child(2) { /* 二本目の縦位置 */
    top: 24px;
}
.hamburger-menu__bar:last-child { /* 三本目の縦位置 */
    top: 32px;
}
/* ===== ×（閉じる）仕組み ===== */
.hamburger-menu--open .hamburger-menu__bar {
    top: 50%;
}
.hamburger-menu--open .hamburger-menu__bar:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hamburger-menu--open .hamburger-menu__bar:last-child {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
    display: none;
}


/* ========== リンク類 ========== */
/* ===== 外枠 ===== */
.navigation {
    position: fixed;
    flex-direction: column;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: #fff;
    padding: 50px 20px 60px;
    z-index: 9999;

    transform: translateX(100%);
    transition: transform .3s ease;
}
/* ===== リスト全体 ===== */
.navigation_list {
    text-align: left; /* 文字揃え */
    list-style: none;
    padding: 20px; /* メニュー左右の余白 */
    margin: 0;
    overflow-y: auto;
    max-height: calc(100vh - 60px); /* ×ボタン分 */
    flex: 1;
}

/* 各メニュー行 */
.navigation_list_item {
    border-bottom: solid 1px #474747; /* 区切り線 */
}

.navigation_list_item:first-child {
    border-top: solid 1px #474747;
}

/* リンク文字類 */
.navigation_link {
    display: block;
    padding: 18px 0; /* クリック領域 */

    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */

    color: #5f5f5f;
    text-decoration: none;
    transition: .5s;
}

.nav_overlay {
    position: fixed;
    inset: 0;
    background: rgba(230,226,226,.85); /* #e6e2e2 透過 */
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

/* 開いた状態 */
.nav-open .navigation {
    transform: translateX(0);
}

.nav-open .nav_overlay {
    opacity: 1;
    pointer-events: auto;
}

.nav-open .header_actions {
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) { /* pc端末用 */
    .navigation_link:hover {
        background: #e6e2e2;
  }
}
 /* ▲ ----- hamburger ----- ▲ */
/* ▲ ----- header ----- ▲ */


/* ▼ ==============================
    footer
============================== ▼ */
#footer {
    background: #878787;
}

#footer p {
    margin: 0;
    padding: 15px;
    text-align: center; /* SP */

    font-size: 14px;
    font-weight: 400; /* 太さ */
    line-height: 4em;
    letter-spacing: 0.02em; /* 文字間 */

    color: #fff;
}

#footer a {
    color: #fff;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
}
/* ▲ ----- footer ----- ▲ */


/* ▼ ===================================================
    @media
=================================================== ▼ */
 /* ========== pc ========== */
@media screen and (min-width: 768px) { /* タブレット・PC用 */

/* ▼ ==============================
    header
============================== ▼ */
    .header{
        display: flex;
        height: 70px;
        align-items: center;
        gap: 20px;
    }

    .site_logo{
        flex: 1; /*左を可変*/
        min-width: 0; /* svgが縮むために必須 */
    }

    .site_logo img {
        max-width: 100%;
        height: 24px;
    }

/* 2. 中央右寄り：2つのボタン（スマホでは下表示） */
    .header_actions {
        position: static;   /* 下固定解除 */
        display: flex;
        width: auto;
        margin-left: auto; /* ヘッダー内で右寄せ */
        margin-right: 24px; /* ハンバーガーとの距離 */
        gap: 12px;
}

    .btn_net {
        order: 1; /* 左 */
    }
    .btn_visit {
        order: 2; /* 右 */
    }


    .header_actions .cta_btn {
        width: auto;
        padding: 6px 24px;

        font-size: 14px;
        font-weight: 400; /* 太さ */
        line-height: 1.75; /* 行間 */
        letter-spacing: 0.02em; /* 文字間 */

        border: 1px solid #5f5f5f;
        background: #fff;
        color: #5f5f5f;
    }

    .header_actions .cta_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
}

    .header_actions .cta_btn:hover{
        background: #e6e2e2;
    }

    
    .header_actions .cta_btn:first-child {
        border-right: 1px solid #5f5f5f;
    }

 /* ========== リンク類 ========== */
 /* ===== 外枠 ===== */
    .navigation {
        width: 450px; /* メニュー：幅 */
    }

/* ▲ ---------- header ---------- ▲ */

 /* ▼ ==============================
    footer
 ============================== ▼ */
    #footer p {
        padding: 10px 30px;
        line-height: 5em;
        text-align: right;
    }
 /* ▲ ---------- footer ---------- ▲ */

}