/* styles.css への追加と上書き（全ページ共通）
   styles.css は元の制作時のまま残し、あとから足した分はこのファイルにまとめる。 */


/* =================== ヘッダーの「ゲーム」サブメニュー（PC） ===================
   項目の数だけ縦に並ぶパネル。幅は固定で、はみ出す長いタイトルは、マウスを乗せると
   少し間をおいて左へ流れ、末尾まで見える（はみ出さない項目は動かない） */
.main-nav>li>ul {
    --submenu-width: 200px;
    --submenu-pad: 20px;
    height: auto;
    width: var(--submenu-width);
    padding: 4px 0 8px;
    background-color: #232323;
    border-radius: 0 0 10px 10px;
    text-align: left;
    /* 「ゲーム」の文字の真下に置く（この項目だけ右に 40px の余白を持っているので、その分を除いて中央を取る） */
    left: calc((100% - 40px) / 2);
    transform: translateX(-50%);
}

.main-nav>li>ul>li {
    line-height: 46px;
    border-top: 1px solid #3a3a3a;
    transition: background-color 0.2s;
}

.main-nav>li>ul>li:first-child {
    border-top: none;
}

.main-nav>li>ul>li>a {
    display: block;
    padding: 0 var(--submenu-pad);
    overflow: hidden;
    white-space: nowrap;
    /* はみ出した文字は、左右の余白の部分で薄く消す */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--submenu-pad), #000 calc(100% - var(--submenu-pad)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--submenu-pad), #000 calc(100% - var(--submenu-pad)), transparent);
}

.main-nav>li>ul>li>a>span {
    display: inline-block;
    transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .main-nav>li>ul>li:hover {
        background-color: #2f2f2f;
    }

    /* 動く量 = 文字の幅 − 表示できる幅（はみ出していなければ 0 で動かない） */
    .main-nav>li>ul>li>a:hover>span {
        transform: translateX(min(0px, calc(var(--submenu-width) - 2 * var(--submenu-pad) - 100%)));
        transition: transform 2s linear 0.4s;
    }
}


/* =================== ハンバーガーメニューの「ゲーム」の中身 ===================
   項目の数や、長いタイトルの折り返しに合わせて開いたときの高さが決まるようにする。
   開け閉めのクラス（is-open）は、今までどおり各ページの JS が付け外しする */
.hamburger_inner .accordion_content,
.hamburger_inner .accordion_content.is-open {
    height: auto !important;
}

.hamburger_inner .accordion_content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s ease;
}

.hamburger_inner .accordion_content.is-open {
    grid-template-rows: 1fr;
}

.hamburger_inner .accordion_content>div {
    min-height: 0;
    overflow: hidden;
}

.hamburger_inner .accordion_content a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(0px, 8.59vw, 88px);
    padding: 4px 0;
    line-height: 1.3;
    font-size: clamp(0px, 4.8vw, 28.8px);
    /* 日本語は文節の切れ目で折り返す（対応していないブラウザでは普通の折り返し） */
    word-break: auto-phrase;
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) and (min-width: 600px) {
    .hamburger_inner .accordion_content a {
        font-size: clamp(0px, 2.81vw, 28.8px);
    }
}

@media not (min-width: 600px) {
    .hamburger_inner .accordion_content a {
        min-height: clamp(0px, 10.68vw, 64px);
        font-size: clamp(0px, 3.9vw, 23.4px);
    }
}