@charset "UTF-8" ;

/*######################################################
パーツ：基本（inner,pc/spでの表示非表示など）
######################################################*/
/* ==============================
inner
============================== */

.inner {
    width: 90%;
    max-width: var(--width-inner);
    margin-inline: auto;
}

.inner--s {
    max-width: var(--width-inner-s);
    margin-inline: auto;
}

.inner:has(.inner--s) {
    padding-inline: 20px;
}


/* ==============================
.sp でスマートフォンのみ表示
============================== */

.sp-only {
    display: none;
}


/* ==============================
.pc でPCのみ表示
============================== */
.pc-only {
    display: block;
}

/* ==============================
スクリーンリーダーの設定（表示はしない）
============================== */

.sr-only {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/**************************************************
ページタイトル
**************************************************/

.page-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-main);
    background-size: cover;
    background-position: center;
    position: relative;
}

.page-hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: color-mix(in oklab, var(--color-main) 85%, transparent);
	/* オーバーレイ */
}

.page-hero__title {
    color: var(--color-white);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    text-align: center;
}

.page-hero {
    min-height: clamp(200px, 20vw, 240px);
}



/*######################################################
パーツ：見出しタイトル
######################################################*/
/* ==============================
section-title
============================== */

.section-title {
    font-size: clamp(22px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.12em;
    color: #031730;
}



/*######################################################
パーツ：ボタン
######################################################*/



/*######################################################
パーツ：その他
######################################################*/
/* ==============================
アコーディオン
============================== */

.accordion {
    border-top: 1px solid #b4b9c0;
    padding: 0 0 clamp(8px, 1.05vw, 16px);
}

*:first-child > .accordion {
    border-top: none;
}

.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: clamp(16px, 2.11vw, 32px) clamp(10px, 1.32vw, 20px) calc(clamp(16px, 2.11vw, 32px)/2) 0;
    cursor: pointer;
    position: relative;
}

.accordion__summary::-webkit-details-marker {
    display: none;
}

.accordion__summary span {
    font-size: max(var(--font-size-base), clamp(14px, 1.58vw, 24px));
    line-height: 1.5;
    letter-spacing: 0.12em;
    display: flex;
    gap: 0.5em;
}

.accordion__summary span::before {
    content: "Q.";
}


/* アコーディオンボタン（＋/－） */

.accordion__summary::after {
    content: "＋";
    color: #525d6d;
    font-size: max(var(--font-size-base), clamp(15px, 1.98vw, 30px));
    transition: transform 0.2s ease-in-out;
}

.accordion[open] .accordion__summary::after {
    content: "－";
    color: #b4b9c0;
    transform: rotate(180deg);
}

.accordion__content-inner {
    line-height: 1.5;
    letter-spacing: 0.12em;
    padding-bottom: clamp(8px, 1.05vw, 16px);
}

@media (max-width: 767px) {

    .pc-only {
        display: none;
    }

    .sp-only {
        display: revert;
    }
}