@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 * CHANGE_STYLES.......スタイルの変更
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.introduction { background-color: var(--primaryColor-100) }

    .introduction__inner {
        padding-top: clamp(48px, calc(100vw * (70 / var(--innerContainerSize))), 70px);
        padding-bottom: clamp(48px, calc(100vw * (61 / var(--innerContainerSize))), 61px);
    }

        .introduction__tab {
            padding-top: max(12px, 1.171875%);
            padding-inline: max(16px, 2.5%);
            padding-bottom: max(16px, 1.328125%);
            margin-block: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
            border: 2px solid var(--primaryColor-800);
            border-radius: 10px;
            background-color: white;
        }

            .introduction__tab__label {
                padding-left: .05em;
                margin-bottom: .5em;
                font-family: var(--font);
                font-size: clamp(1.8rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                line-height: calc(32 / 24);
                letter-spacing: .05em;
                text-align: center;
            }

            .introduction__tab__menu {
                width: fit-content;
                margin-inline: auto;
            }

                .introduction__tab__list {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    row-gap: 12px;
                }

                    .introduction__tab__item {
                        width: fit-content;
                        padding-block: .05em;
                        padding-inline: .25em;
                        margin-inline: -1px;
                        border-inline: 2px solid var(--primaryColor-800);
                        color: var(--primaryColor-800);
                        font-size: clamp(1.4rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
                        font-weight: 700;
                        line-height: 1.25;
                        letter-spacing: .05em;
                    }
                    @media screen and (max-width: 1023px) {
                        .introduction__tab__item { width: calc((100% / 3) + 2px) }
                    }
                    @media screen and (max-width: 767px) {
                        .introduction__tab__item { width: calc(50% + 2px) }
                    }
                    @media screen and (max-width: 512px) {
                        .introduction__tab__item {
                            width: 100%;
                            margin-inline: 0;
                            border-inline: none;
                        }
                    }

                        .introduction__tab__button {
                            display: block;
                            width: 100%;
                            padding-block: .75em;
                            padding-inline: 1em;
                            border-radius: 8px;
                            background-color: white;
                            text-align: center;
                            transition: background-color .3s var(--easeOutQuart);
                        }
                        .introduction__tab__button:not(.is-active):hover { background-color: var(--primaryColor-100) }
                        .introduction__tab__button.is-active {
                            background-color: var(--primaryColor-800);
                            color: white;
                            pointer-events: none;
                        }
                        @media screen and (max-width: 512px) {
                            .introduction__tab__button { border: 1px solid var(--primaryColor-800) }
                        }


        .introduction__main {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
            grid-column-gap: max(24px, 3.125%);
            grid-row-gap: 32px;
            margin-top: clamp(48px, calc(100% * (64 / var(--innerContainerSize))), 64px);
            margin-bottom: 36px;
        }

            .introduction__details {
                display: flex;
                flex-direction: column;
                padding-top: 8px;
                padding-inline: 8px;
                border: 2px solid var(--primaryColor-800);
                border-radius: 10px;
                background-color: white;
                overflow: hidden;
            }

                .introduction__details__title {
                    padding-block: .25em;
                    padding-right: .9em;
                    padding-left: 1.0em;
                    border-radius: 10px;
                    color: white;
                    font-family: var(--font);
                    font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                    font-weight: 500;
                    line-height: 1.5;
                    letter-spacing: .1em;
                    text-align: center;
                }
                .introduction__details:nth-of-type(odd) .introduction__details__title { background-color: var(--primaryColor-500) }
                .introduction__details:nth-of-type(even) .introduction__details__title { background-color: var(--accentColor-100) }

                .introduction__content {
                    flex-grow: 1;
                    margin-inline: -8px;
                    padding-top: calc(100% * (8 / 600));
                    padding-inline: calc(100% * (14 / 600));
                    padding-bottom: 4%;
                    background-repeat: no-repeat;
                    background-position: 50% 100%;
                    background-size: contain;
                }

                    .introduction__table {
                        display: table;
                        table-layout: auto;
                        border-collapse: separate;
                        border-spacing: 0 12px;
                    }

                        .introduction__row { display: table-row }
                        .introduction__row + .introduction__row { margin-top: 12px }

                            .introduction__label {
                                display: table-cell;
                                width: fit-content;
                                padding-top: clamp(6px, calc(100vw * (12 / var(--innerContainerSize))), 12px);
                                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                                font-weight: 500;
                                line-height: 1.75;
                                vertical-align: top;
                                white-space: normal;
                            }
                            .introduction__label:first-of-type { padding-right: .8125em }
                            .introduction__label:last-of-type { padding-left: .5625em }
                            span.introduction__label {
                                color: black !important;
                                font-family: var(--fontSub);
                            }

                            .introduction__price {
                                display: table-cell;
                                width: max-content;
                                color: var(--primaryColor-800);
                                font-family: var(--fontEnSub);
                                font-size: clamp(2.0rem, calc(100vw * (40 / var(--innerContainerSize))), 4.0rem);
                                font-weight: 400;
                                line-height: 1;
                                letter-spacing: .05em;
                                vertical-align: bottom;
                            }
                            .introduction__price strong {
                                display: inline-block;
                                padding-bottom: .1em;
                                border-bottom: .075em solid var(--accentColor-400);
                            }
                            .introduction__price strong::before {
                                content: "￥";
                                font-size: 0.75em;
                                margin-left: -0.2em;
                                margin-right: -0.2em;
                            }
                            .introduction__price span {
                                display: inline-block;
                                padding-inline: .175em;
                                color: var(--accentColor-400);
                            }


        .introduction__list {}

            .introduction__item {
                display: flex;
                column-gap: 0.4375em;
                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                font-weight: 500;
                line-height: 1.5;
            }
            .introduction__item::before {
                content: "";
                display: block;
                width: 1em;
                min-width: 1em;
                height: 1em;
                margin-top: .25em;
                margin-left: 0.125em;
                border-radius: 100%;
                background-color: var(--accentColor-300);
            }
            .introduction__item + .introduction__item { margin-top: 6px }



.content {
    padding-top: clamp(48px, calc(100% * (64 / var(--innerContainerSize))), 64px);
    padding-bottom: clamp(96px, calc(100% * (127 / var(--innerContainerSize))), 127px);
}

    .content__caution {
        position: relative;
        margin-block: clamp(48px, calc(100% * (64 / var(--innerContainerSize))), 64px);
        border-block: 2px solid var(--primaryColor-500);
        font-size: clamp(1.6rem, calc(100vw * (22 / var(--innerContainerSize))), 2.2rem);
        font-weight: 700;
        line-height: calc(34 / 22);
    }
    .content__caution p {
        padding-block: max(20px, 1.71875%);
        background-image: url(../images/price/icon-caution.png);
        background-image:
            image-set(
                url(../images/price/icon-caution.png) 1x,
                url(../images/price/icon-caution@2x.png) 2x
            );
        background-image:
            -webkit-image-set(
                url(../images/price/icon-caution.png) 1x,
                url(../images/price/icon-caution@2x.png) 2x
            );
        background-repeat: no-repeat;
    }
    .content__caution span { color: var(--accentColor-100) }
    @media screen and (min-width: 768px) {
        .content__caution p {
            padding-left: max(120px, min(262px, calc(100vw * (262 / var(--innerContainerSize)))));
            background-position: min(199px, calc(100vw * (199 / var(--innerContainerSize)))) 50%;
            background-size: min(48px, calc(100vw * (48 / var(--innerContainerSize))));
        }
        .content__caution::before {
            content: "";
            aspect-ratio: 213 / 169;
            position: absolute;
            bottom: 0;
            left: -1.09375%;
            width: 16.640625%;
            background-image: url(../images/price/image-caution.png);
            background-image:
                image-set(
                    url(../images/price/image-caution.png) 1x,
                    url(../images/price/image-caution@2x.png) 2x
                );
            background-image:
                -webkit-image-set(
                    url(../images/price/image-caution.png) 1x,
                    url(../images/price/image-caution@2x.png) 2x
                );
            background-repeat: no-repeat;
            background-position: 50% 100%;
            background-size: contain;
        }
    }
    @media screen and (max-width: 767px) {
        .content__caution p {
            padding-left: 36px;
            background-position: 0 50%;
            background-size: 24px;
        }
    }

    .content__block {
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.0625%;
        row-gap: 32px;
    }
    .content__block:nth-of-type(even) { flex-direction: row-reverse }
    .content__block + .content__block {
        margin-top: clamp(48px, calc(100vw * (65 / var(--innerContainerSize))), 65px);
    }

        .content__image {
            flex-grow: 1;
            width: max(400px, 48.4375%);
            max-width: 100%;
            height: fit-content;
            padding: clamp(8px, calc(100vw * (18 / var(--innerContainerSize))), 18px);
            border: 2px solid var(--primaryColor-800);
            border-radius: 10px;
            background-color: white;
        }
        .content__image img {
            aspect-ratio: 620 / 460;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        .content__box {
            flex-grow: 1;
            width: max(380px, 47.5%);
            max-width: 100%;
            padding-top: calc(-6px + clamp(6px, calc(100vw * (12 / var(--innerContainerSize))), 12px));
        }

            .content__catchphrase {
                margin-bottom: calc(1em * (13 / 24));
                font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                font-weight: 700;
                line-height: calc(32 / 24);
            }

            .content__title {
                margin-bottom: calc(1em * (20 / 36));
                font-family: var(--fontSub);
                font-size: clamp(2.8rem, calc(100vw * (36 / var(--innerContainerSize))), 3.6rem);
                font-weight: 700;
                line-height: calc(44 / 36);
            }

            .content__status {
                display: flex;
                align-items: flex-end;
                column-gap: 5px;
                width: fit-content;
                padding-bottom: 8px;
                margin-bottom: 24px;
                border-bottom: 3px solid var(--primaryColor-500);
            }

                .content__status__price {
                    display: flex;
                    align-items: flex-end;
                    color: var(--primaryColor-500);
                    font-family: var(--fontEnSub);
                    font-size: clamp(1.6rem, calc(100vw * (30 / var(--innerContainerSize))), 3.0rem);
                    font-weight: 500;
                    line-height: 1;
                    letter-spacing: .05em;
                }
                .content__status__price strong {
                    display: inline-block;
                    margin-left: calc(1em * (3 / 46));
                    font-size: calc(1em * (46 / 30));
                    font-weight: 400;
                    letter-spacing: .05em;
                }

                .content__status__text {
                    display: flex;
                    align-items: flex-end;
                    font-size: clamp(1.6rem, calc(100vw * (30 / var(--innerContainerSize))), 3.0rem);
                    font-weight: 700;
                    line-height: 1;
                    letter-spacing: .05em;
                }
                .content__status__text strong {
                    display: inline-block;
                    font-family: var(--fontEnSub);
                    font-size: 1.2em;
                    font-weight: 400;
                    letter-spacing: .05em;
                }
                .content__status__text span {
                    display: inline-block;
                    margin-left: 0.1875em;
                    font-size: calc(1em * (16 / 30));
                    font-weight: 500;
                    letter-spacing: .05em;
                }


            .content__description {
                margin-bottom: 2.1875em;
                font-size: 1.6rem;
                line-height: 1.875;
                letter-spacing: .05em;
            }

            .content__details { margin-top: min(calc(100vw * (35 / var(--innerContainerSize))), 35px) }

                .content__details__label {
                    display: flex;
                    margin-bottom: .9em;
                    color: var(--primaryColor-800);
                    font-size: clamp(1.6rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                    font-weight: 700;
                    line-height: 1.3;
                }
                .content__details__label::before,
                .content__details__label::after {
                    content: "";
                    display: block;
                    width: .7em;
                    height: 1.3em;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
                .content__details__label::before {
                    margin-right: .5em;
                    background-position: 0 50%;
                    background-image: url(../images/program/icon-brackets-before.svg);
                }
                .content__details__label::after {
                    margin-left: .5em;
                    background-position: 100% 50%;
                    background-image: url(../images/program/icon-brackets-after.svg);
                }


                .content__details__content {}

                    .content__details__list {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        column-gap: 16px;
                        row-gap: 11px;
                    }

                        .content__details__item {
                            width: fit-content;
                            min-width: 10em;
                            padding-right: 1em;
                            padding-left: 1.05em;
                            border: 1px solid var(--primaryColor-800);
                            border-radius: 99px;
                            background-color: var(--secondaryColor-100);
                            color: var(--primaryColor-800);
                            font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                            font-weight: 700;
                            line-height: 1.875;
                            letter-spacing: .05em;
                            text-align: center;
                        }





/*------------------------------------*\
    $CHANGE_STYLES
\*------------------------------------*/
.underlayer-head__image { content-visibility: unset }
.underlayer-head__image img { transform: translateX(calc(100% * (15 / 505))) }