/* メニューボタン */
.hamburger-btn {
    /* この3つで調整 */
    --menu-size: 120px;
    --menu-top: 85px;
    --menu-right: 50px;

    position: fixed;
    width: var(--menu-size);
    top: var(--menu-top);
    right: var(--menu-right);

    padding: 0;
    border: none;
    background: none;
    overflow: visible;
    cursor: pointer;
    z-index: 1000;
}

.hamburger-btn img {
    display: block;
    width: 100%;
}

/* 開いているとき：上下の線を中央で交差させる */
.hamburger-btn[aria-expanded="true"] .hamburger-lines>span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] .hamburger-lines>span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn[aria-expanded="true"] .hamburger-lines>span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* キーボード操作時の選択表示 */
.hamburger-btn:focus-visible {
    outline: 3px solid #3e5780;
    outline-offset: 5px;
    border-radius: 50%;
}

/* 三本線を配置する枠 */
.hamburger-lines {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 32%;
    height: 28%;

    transform: translate(-50%, -50%);
}

/* 三本線の共通設定 */
.hamburger-lines>span {
    position: absolute;
    left: 0;

    width: 100%;
    height: 3px;
    background: #fff;

    transition:
        top 0.3s ease,
        transform 0.3s ease,
        opacity 0.2s ease;
}

/* 上の線 */
.hamburger-lines>span:nth-child(1) {
    top: 0;
    transform: translateY(-50%);
}

/* 中央の線 */
.hamburger-lines>span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

/* 下の線 */
.hamburger-lines>span:nth-child(3) {
    top: 100%;
    transform: translateY(-50%);
}

/* 上から開くメニュー */
.drawer-menu-box {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    overflow-y: auto;

    background: rgba(255, 255, 255, 0.95);

    /* 閉じているときは、自分の高さ分だけ上へ移動 */
    transform: translateY(-100%);
    visibility: hidden;

    transition:
        transform 0.4s ease,
        visibility 0s linear 0.4s;

    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 開いているとき */
.drawer-menu-box.open {
    transform: translateY(0);
    visibility: visible;

    transition:
        transform 0.4s ease,
        visibility 0s;
}

/* メニュー項目 */
.drawer-menu-box ul {
    list-style: none;
    margin: 0;
    padding: 50px 280px;
}

.drawer-menu-box li {
    text-align: center;
    margin: 20px 0;
}

.drawer-menu-box a {
    display: inline-block;
    padding: 4px 0;

    text-decoration: none;
    color: #333;
    font-size: 24px;
    letter-spacing: 0.1em;
}



/* 動きを抑える設定を使用している場合 */
@media (prefers-reduced-motion: reduce) {

    .hamburger-lines>span,
    .drawer-menu-box,
    .drawer-menu-box.open {
        transition: none;
    }
}



/* 円形の文字 */
.hamburger-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 300px;
    height: 300px;

    overflow: visible;
    pointer-events: none;

    animation: hamburger-text-rotate 30s linear infinite;
}

.hamburger-circle-text text {
    font-family: "gotham", sans-serif;
    font-weight: 700;
    font-size: 22pt;
    font-variant-ligatures: none;
    fill: #79c9d3;
}

/* 文字だけを時計回りに回転 */
@keyframes hamburger-text-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



/* 動きを抑える設定の場合は回転を止める */
@media (prefers-reduced-motion: reduce) {
    .hamburger-circle-text {
        animation: none;
        transform: translate(-50%, -50%);
    }
}

/* プルダウンの背景色 */
.drawer-menu-box {
    background: rgba(252, 207, 0, 0.9);
}

/* メニューの文字色 */
.drawer-menu-box a {
    color: #3e5780;
}



/* ボタン本体の約1.96倍で統一 */
.hamburger-circle-text {
    width: 196.078431%;
    height: auto;
    aspect-ratio: 1;
}



/* 色替え用の画像と回転文字を重ねる枠 */
.hamburger-color-overlay {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;

    /* JSで重なった範囲だけ表示する */
    clip-path: none;
}

/* 色替え用の丸い画像 */
.hamburger-color-overlay>.hamburger-alternate-image {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    display: block;
    max-width: none;
    height: auto;
}

/* 色替え用の回転文字 */
.hamburger-color-overlay>.hamburger-circle-text {
    width: 100%;
    height: 100%;
}

.hamburger-color-overlay .hamburger-circle-text text,
.hamburger-color-overlay .hamburger-circle-text textPath {
    fill: #fccf00;
}

/* ニュースページ：閉じているときの画像 */
.news-page .hamburger-btn>img {
    content: url("../image/hamburger_bt_2.webp");
}

/* ニュースページ：閉じているときの回転文字 */
.news-page .hamburger-btn>.hamburger-circle-text text,
.news-page .hamburger-btn>.hamburger-circle-text textPath {
    fill: #fccf00;
}

/* ニュースページ：開いているときの画像 */
.news-page .hamburger-btn[aria-expanded="true"]>img {
    content: url("../image/hamburger_bt_1.webp");
}

/* ニュースページ：開いているときの回転文字 */
.news-page .hamburger-btn[aria-expanded="true"]>.hamburger-circle-text text,
.news-page .hamburger-btn[aria-expanded="true"]>.hamburger-circle-text textPath {
    fill: #79c9d3;
}

/* 三本線は常に画像より手前 */
.hamburger-lines {
    z-index: 2;
}



/* スマートフォン、タブレットでは文字の円も縮小 */
@media screen and (max-width: 899px) {
    .hamburger-btn {
        top: 30px;
        right: 20px;
        width: 54px;
    }

    .drawer-menu-box ul {
        padding: 110px 24px 30px;
    }

    .drawer-menu-box a {
        font-size: 20px;
    }

    .hamburger-circle-text {
        width: 108px;
        height: 108px;
    }

    .drawer-menu-box ul {
        list-style: none;
        margin: 0;
        padding: 40px 0px;
    }

    .drawer-menu-box a {
        font-size: 20px;
        letter-spacing: 0.1em;
    }
}