@charset "utf-8";
/** アコーディオン */
details {}

/* :root>interpolate-size: allow-keywords;時に有効 */
@media (prefers-reduced-motion: no-preference) { /* ユーザが視差効果の制限をしていないときの条件式 */
    details::details-content {
        overflow: clip;
        transition-duration: 0.3s;
        transition-property: content-visibility, block-size;
        transition-behavior: allow-discrete; /* 離散アニメーションの許可 */
    }
}
details:not([open])::details-content {
    block-size: 0;
}


summary {
	list-style: none;
	cursor: pointer;
	position: relative;
}
/* 開閉ボタンの独自実装 */
summary button {
	pointer-events: none;
}
details[open] summary button {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** FV   
-------------------------------------------------------------------- */
section#hero {}
section#hero .character {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** リスト   
-------------------------------------------------------------------- */
section#list {
    background: var(--light-blue);
}
section#list::after {
    --bubble-size: calc(627 * var(--px));
    --bubble-color: var(--blue);
    left: 0;
    top: 100%;
}

section#list .container {
    max-width: var(--middle-width);
}
section#list details {
    padding-block: var(--m2);
    padding-inline: var(--m3);
    border-radius: calc(12 * var(--px));
    background: white;
    box-shadow: inset 0 0 0 1px var(--blue);
}
section#list details:not([open]) {
    padding-bottom: var(--m4);
}
section#list details + details {
    margin-top: var(--m4);
}
section#list summary {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.1ic;
    text-align: center;
}
section#list summary span {
    transform: skewX(-5deg);
}
section#list .text {
    margin-top: var(--m2);
    border-top: 1px solid var(--blue);
    padding-top: var(--m2);
}
section#list :is(summary, .text)::before {
    display: block;
    width: fit-content;
    padding-block: 0.1lh;
    padding-inline: 1em;
    margin-inline: auto;
    margin-bottom: var(--m2);
    color: white;
    font-size: 15px;
    font-weight: 500;
}
section#list summary::before {
    content: "QUESTION";
    background: var(--blue);
}
section#list .text::before {
    content: "ANSWER";
    background: var(--orange);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#list details {
        padding-inline: var(--m2);
    }
    section#list summary {
        font-size: calc(21 * var(--px));
    }
}