@charset "UTF-8";

/* --- 基礎レイアウト --- */
.accordion-container {
    width: 100%;
}

/* 最上位の親（リンクのみのエリア） */
.accordion-top-parent {
    padding: 10px;
    border-bottom: 2px solid #333;
    /* 親として目立たせる */
    font-weight: bold;
}

.accordion-top-parent a {
    text-decoration: none;
    color: inherit;
}

/* サイト共通: summary のデフォルトマーカーを非表示 */
summary::-webkit-details-marker {
    display: none;
}

summary::marker {
    content: '';
}

/* アコーディオン全体の共通設定 */
details.js-accordion-item {
    width: 100%;
}

details.js-accordion-item .accordion-content,
details.js-accordion-item .details-content,
details.js-accordion-item .js-accordion-content {
    overflow: hidden;
}

/* --- ヘッダー（summary）の設定 --- */
.accordion-header {
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    cursor: pointer;
    list-style: none;
    position: relative;
    /* アイコン配置の基準 */
}

/* デフォルトの三角形を消去 */
.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-header {
    display: block;
    /* 一部ブラウザ対策 */
}

.accordion-header span a {
    text-decoration: none;
    color: inherit;
}

/* --- アイコン設定（クラスがある場合のみ表示） --- */

/* アイコン付与対象（details配下summary / 直付クラス） */
:is(.accordion-icon-cross > .accordion-header, .accordion-icon-cross > summary, .js-menu-toggle.accordion-icon-cross, .js-sub-toggle.accordion-icon-cross, .js-tab-btn.accordion-icon-cross) {
    padding-right: 40px;
    position: relative;
}

/* プラスアイコンの土台（疑似要素） */
:is(.accordion-icon-cross > .accordion-header, .accordion-icon-cross > summary, .js-menu-toggle.accordion-icon-cross, .js-sub-toggle.accordion-icon-cross, .js-tab-btn.accordion-icon-cross)::before,
:is(.accordion-icon-cross > .accordion-header, .accordion-icon-cross > summary, .js-menu-toggle.accordion-icon-cross, .js-sub-toggle.accordion-icon-cross, .js-tab-btn.accordion-icon-cross)::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    background-color: #333;
    /* アイコンの色。必要に応じて var(--color-gray-03) に変更してください */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 横棒（－） */
:is(.accordion-icon-cross > .accordion-header, .accordion-icon-cross > summary, .js-menu-toggle.accordion-icon-cross, .js-sub-toggle.accordion-icon-cross, .js-tab-btn.accordion-icon-cross)::after {
    width: 12px;
    height: 2px;
    margin-top: -1px;
    /* 縦方向の中央揃え微調整 */
}

/* 縦棒（｜）プラスにするための線 */
:is(.accordion-icon-cross > .accordion-header, .accordion-icon-cross > summary, .js-menu-toggle.accordion-icon-cross, .js-sub-toggle.accordion-icon-cross, .js-tab-btn.accordion-icon-cross)::before {
    width: 2px;
    height: 12px;
    margin-top: -6px;
    /* 縦方向の中央揃え微調整 */
    right: 20px;
}

/* --- 開閉時のアクション --- */

/* details[open] と .is-active の見た目を共通化 */
:is(.accordion-icon-cross[open] > .accordion-header, .accordion-icon-cross[open] > summary, .js-menu-toggle.accordion-icon-cross.is-active, .js-sub-toggle.accordion-icon-cross.is-active, .js-tab-btn.accordion-icon-cross.is-active)::before {
    transform: rotate(90deg);
    opacity: 0;
}

:is(.accordion-icon-cross[open] > .accordion-header, .accordion-icon-cross[open] > summary, .js-menu-toggle.accordion-icon-cross.is-active, .js-sub-toggle.accordion-icon-cross.is-active, .js-tab-btn.accordion-icon-cross.is-active)::after {
    transform: rotate(180deg);
}

/* --- 階層のインデント --- */
.accordion-content {
    padding-left: 15px;
    /* 子階層を少し右にずらす */
}

/* --- PCサイズ（1024px以上）の制御 --- */
@media screen and (min-width: 1024px) {

    /* 特定のクラスがある場合のみ、PCでアコーディオンを無効化して展開する */
    .js-sp-accordion.js-accordion details,
    .js-accordion.js-accordion-sp-only details {
        display: block;
    }

    /* PCで強制展開する際のアイコン非表示 */
    .js-sp-accordion.js-accordion .accordion-icon-cross>.accordion-header::before,
    .js-sp-accordion.js-accordion .accordion-icon-cross>.accordion-header::after,
    .js-sp-accordion.js-accordion .accordion-icon-cross>summary::before,
    .js-sp-accordion.js-accordion .accordion-icon-cross>summary::after,
    .js-accordion.js-accordion-sp-only .accordion-icon-cross>.accordion-header::before,
    .js-accordion.js-accordion-sp-only .accordion-icon-cross>.accordion-header::after,
    .js-accordion.js-accordion-sp-only .accordion-icon-cross>summary::before,
    .js-accordion.js-accordion-sp-only .accordion-icon-cross>summary::after {
        display: none !important;
    }

    .js-sp-accordion.js-accordion summary,
    .js-accordion.js-accordion-sp-only summary {
        pointer-events: none;
        cursor: default;
    }
}