@charset "UTF-8";
/* ==========================================================
   ベーススタイル（SP時：モバイルファースト）
   ========================================================== */

/* 対象となる親要素の共通定義 */
.menu-item-has-children,
.js-accordion {
    position: relative;
}

/* 共通：直下にあるリンクやボタン（クリック領域） */
.menu-item-has-children>a,
.js-accordion>a,
.js-accordion>.accordion-toggle {
    display: block;
    position: relative;
    padding-right: 40px;
    /* アイコン分の余白 */
    cursor: pointer;
}

/* 共通：クロスのアイコン（縦横のベース線） */
.menu-item-has-children>a::before,
.menu-item-has-children>a::after,
.js-accordion>a::before,
.js-accordion>a::after,
.js-accordion>.accordion-toggle::before,
.js-accordion>.accordion-toggle::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 12px;
    height: 2px;
    background-color: #333;
    transition: transform 0.3s ease;
}

/* 横線 */
.menu-item-has-children>a::before,
.js-accordion>a::before,
.js-accordion>.accordion-toggle::before {
    transform: translateY(-50%) rotate(0deg);
}

/* 縦線（通常時は90度回転させてクロスにする） */
.menu-item-has-children>a::after,
.js-accordion>a::after,
.js-accordion>.accordion-toggle::after {
    transform: translateY(-50%) rotate(90deg);
}

/* -------------------------------------------
 * 開いている時（.is-open が付与された時）
 * ------------------------------------------- */

/* 縦線の回転を0度に戻して横棒にする */
.menu-item-has-children.is-open>a::after,
.js-accordion.is-open>a::after,
.js-accordion.is-open>.accordion-toggle::after {
    transform: translateY(-50%) rotate(0deg);
}


/* ==========================================================
   PC時のスタイル（画面幅 768px 以上）
   ========================================================== */
@media (min-width: 1280px) {

    /* PCではアコーディオンにせず、ホバー展開などにする場合（アイコンを隠す） */
    .menu-item-has-children>a,
    .js-accordion>a,
    .js-accordion>.accordion-toggle {
        padding-right: 0;
        /* 余白をリセット */
    }

    /* アイコンを非表示にする */
    .menu-item-has-children>a::before,
    .menu-item-has-children>a::after,
    .js-accordion>a::before,
    .js-accordion>a::after,
    .js-accordion>.accordion-toggle::before,
    .js-accordion>.accordion-toggle::after {
        display: none;
    }
}