@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * PRODUCT03...........WEBシステムディレクション
 * CHANGE_STYLE........スタイルの変更
 */





/*------------------------------------*\
    $PRODUCT03
\*------------------------------------*/
.images { margin-bottom: 72px }

    .images__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
        grid-row-gap: 32px;
    }

        .images__item {}

            /*figure*/.images__inner {
                display: flex;
                flex-direction: column;
                align-items: center;
                row-gap: 28px;
            }

                .images__inner img {
                    width: min(230px, 100%);
                    margin-inline: auto;
                }

                .images__inner figcaption {
                    padding-left: .05em;
                    font-family: var(--fontEn);
                    font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 2.4rem);
                    font-weight: 500;
                    line-height: 1;
                    letter-spacing: .05em;
                    text-align: center;
                }


.price {}

    .price__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(324px, 100%), 1fr));
        grid-row-gap: 64px;
    }

        .price__item {}

            .price__inner {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;
                padding-inline: calc(100% * (32 / 416));
            }

                .price__number {
                    align-items: center;
                    width: 1.55em;
                    height: 1.55em;
                    margin-bottom: clamp(24px, calc(100vw * (24 / 375)), 42px);
                    border: 2px solid white;
                    border-radius: 100%;
                    background-color: var(--primaryVariant);
                }

                .price__title {
                    width: 100%;
                    padding-bottom: 15px;
                    border-bottom: 2px solid var(--primaryColor);
                }

                .price__details {
                    margin-top: auto;
                    font-family: var(--fontEn);
                    font-size: clamp(4.0rem, calc(100vw * (40 / 375)), 6.0rem);
                    font-weight: 500;
                    line-height: 1;
                    letter-spacing: .05em;
                    text-align: center;
                }
                .price__details::before,
                .price__details::after {
                    font-size: 0.5em;
                    vertical-align: .1em;
                }
                .price__details::before { content: "¥" }
                .price__details::after { content: "～" }





/*------------------------------------*\
    $CHANGE_STYLE
\*------------------------------------*/
@media screen and (max-width: 767px) {
    .title--center:not(.price__title) {
        padding-left: 0;
        text-align: left;
    }
    .text--center {
        padding-left: 0;
        text-align: left;
    }
}