html:has(.loading) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

html {
    font-size: var(--font-size-base);
    font-weight: 500;
    scroll-behavior: smooth;
    line-height: 1.55;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    html {
        font-weight: 600;
    }
}

body {
    /* background-color: var(--color-yellow-lighter); */
    background-color: var(--color-yellow-light);
    position: relative;
    z-index: 10;
}

section {
    padding: 0 0 calc(var(--margin-pc) / 1.5);
}

.youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.youtube iframe {
    width: 100%;
    height: 100%;
}

ul.asterisk {
    margin-top: .5em;
}

ul.asterisk li {
    display: flex;
    margin-top: .5em !important;
    text-align: left;
}

ul.asterisk li p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

ul.asterisk li::before {
    content: "※";
    margin-right: .25em;
}

.l-inner {
    width: 100%;
    max-width: calc(var(--l-inner) * 1px + var(--padding-pc) * 2);
    height: inherit;
    margin: 0 auto;
    padding-block: calc(var(--margin-pc) / 4);
    padding-inline: var(--padding-pc);
}

.l-inner._md {
    max-width: calc(var(--l-inner-md) * 1px + var(--padding-pc) * 2);
}

.l-inner._lg {
    max-width: calc(var(--l-inner-lg) * 1px + var(--padding-pc) * 2);
}

.l-mt-n {
    margin-top: 0 !important;
}

.l-mb-n {
    margin-bottom: 0 !important;
}

.l-m-block-n {
    margin-block: 0 !important;
}

.l-pt-n {
    padding-top: 0 !important;
}

.l-pb-n {
    padding-bottom: 0 !important;
}

.l-p-block-n {
    padding-block: 0 !important;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.l-left {
    width: calc(100% / 2 - 2rem);
}

.l-right {
    width: calc(100% / 2 - 2rem);
}

.flex.jc-sb {
    justify-content: space-between;
}

.flex.jc-l {
    justify-content: left;
}

.flex.jc-r {
    justify-content: right;
}

.icon a {
    display: flex;
    align-items: center;
    justify-content: start;
}

.icon img {
    width: 1em;
    margin-right: 0.5em;
}

.icon .flex {
    display: flex;
    align-items: center;
}

.bg-rudius {
    border-radius: 3rem;
    padding: 3rem 2rem;
    text-align: center;
}

.bg-white {
    background-color: var(--color-white);
    color: var(--color-black);
}

.bg-blue {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.bg-pink {
    background-color: var(--color-pink);
    color: var(--color-white);
}

.bg-pink-light {
    background-color: var(--color-pink-light);
    color: var(--color-black);
}

.bg-pink-dullness {
    background-color: var(--color-pink-dullness);
}

.bg-blue-light {
    background-color: var(--color-blue-light);
    color: var(--color-white);
}

.bg-blue-lighter {
    background-color: var(--color-blue-lighter);
    color: var(--color-black);
}

.bg-yellow {
    background-color: var(--color-yellow);
}

.bg-question-blue {
    background: var(--color-white);
    background-image: url("../img/bg-question-blue.svg");
    background-size: 75%;
    background-repeat: repeat;
}

.bg-question-pink {
    background: var(--color-white);
    background-image: url("../img/bg-question-pink.svg");
    background-size: 75%;
    background-repeat: repeat;
}

.bg-dropshadow-blue-light {
    box-shadow: 1rem 1rem var(--color-blue-light);
}

.bg-dropshadow-pink {
    box-shadow: 1rem 1rem var(--color-pink);
}

.bg-wave-blue {
    color: var(--color-white);
    font-size: 1.5rem;
    text-align: center;
    background-color: var(--color-blue-light);
    width: 100%;
    height: auto;
}

.bg-wave-pink {
    color: var(--color-white);
    font-size: 1.5rem;
    text-align: center;
    background-color: var(--color-pink);
    width: 100%;
    height: auto;
}

.bg-wave-t {
    padding-top: calc(var(--margin-pc) / 1.5);
    margin-top: calc(var(--margin-pc) / 1.5 * -1);
}

.bg-wave-b {
    padding-bottom: calc(var(--margin-pc) / 1.5);
    margin-bottom: calc(var(--margin-pc) / 1.5 * -1);
}

.bg-wave-blue img,
.bg-wave-pink img,
.bg-wave-t img,
.bg-wave-b img {
    width: 120%;
    max-width: 120%;
}

.line-blue-top {
    border-top: 1px dashed var(--color-blue);
}

.line-blue-bottom {
    border-bottom: 1px dashed var(--color-blue);
}

.line-pink-top {
    border-top: 1px dashed var(--color-pink);
}

.line-pink-bottom {
    border-bottom: 1px dashed var(--color-pink);
}

.link-btn {
    font-weight: 600;
    display: inline-block;
    margin-top: 2rem;
    margin-inline: auto;
    padding: 1rem 2rem;
    min-width: 14rem;
    border-radius: 10rem;
    text-align: center;
    box-shadow: 3px 4px 0px 3px #CD7E9A;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .link-btn {
        font-weight: 600;
    }
}

.link-btn:hover {
    box-shadow: none;
    transform: translate(5px, 5px);
}

.link-btn.bg-rudius,
p.bg-rudius,
h1.bg-rudius,
h2.bg-rudius,
h3.bg-rudius,
h4.bg-rudius {
    padding: 0.5rem 2rem;
}

/* ===== テキスト ===== */
.txt-copy {
    font-size: calc(var(--font-size-base) / 10 * 1rem);
    font-family: var(--font-family-h);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.txt-normal {
    font-weight: 500;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .txt-normal {
        font-weight: 600;
    }
}

.txt-bold {
    font-weight: 700;
}

.txt-white {
    color: var(--color-white);
}

.txt-black {
    color: var(--color-black);
}

.txt-blue {
    color: var(--color-blue);
}

.txt-blue-light {
    color: var(--color-blue-light);
}

.txt-pink {
    color: var(--color-pink);
}

.txt-yellow {
    color: var(--color-yellow);
}

.txt-lg {
    /* display: inline-block; */
    font-size: 1.25em;
    line-height: 1.5;
}

.txt-lg .txt-lg {
    line-height: 1.25;
}

.txt-md {
    /* display: inline-block; */
    font-size: 0.75em;
    line-height: 1.5;
}

.txt-center {
    text-align: center;
}

/* ========== アニメーション設定 ========== */

.fade-in.in-view {
    animation: fadeIn .5s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 430px) {
    .sp {
        display: block;
    }

    .txt-copy {
        font-size: calc(var(--font-size-base) / 15 * 1rem);
    }

    .txt-lg {
        font-size: 1.2em;
    }
}