@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #0a0d0d;
    --red01: #B80001;
    --red02: #FF0000;
    --yellow01: #EDF700;
    --gray: #e9e9e9;


    /* ぼかし */
    --blur: blur(10px);

    /* 書式 */
    --notoSans: "Noto Sans JP", sans-serif;
    --notoSerif: "Noto Serif JP", serif;

    /* 文字サイズ */
    --font17: 1.7rem;
    --font30: 3.0rem;
    --font34: 3.4rem;
    --font46: 4.6rem;

    /* ウェイト */
    --weight400: 400;
    --weight500: 500;
    --weight700: 700;
    --weight800: 800;

    /* 行間 */
    --lineHight143: 1.43;
    --lineHight170: 1.70;
    --lineHight20: 2.0;

    /* 文字間 */
    --fontSpace050: 0.05em;

    /* トランジションの変数　 */
    --transitionBase01: all 0.3s ease-in-out;
    --transitionBase02: all 0.5s ease-in-out;

    /* 角丸の変数　 */
    --borderRadius01: 500px;
    --borderRadius10: 10px;
    --borderRadius20: 20px;
    --borderRadius30: 30px;
    --borderRadiusCircle: 50%;

    --opacity07: .7;
}




@media screen and (max-width: 1024px) {
    :root {
        --font17: 1.7rem;
        --font30: 2.7rem;
        --font34: 2.9rem;
        --font46: 4rem;
    }
}


@media screen and (max-width: 768px) {
    :root {
        --font17: 1.6rem;
        --font30: 2.5rem;
        --font34: 2.7rem;
        --font46: 3rem;



        --opacity07: 1;
    }


}

@media screen and (max-width: 480px) {
    :root {
        --font17: 1.5rem;
        --font30: 2.2rem;
        --font34: 2.5rem;
        --font46: 2.7rem;


        --borderRadius20: 10px;
        --borderRadius30: 15px;
    }
}

/*******************************************
common
*******************************************/

.symphony {
    width: 100%;
    font-family: var(--notoSans);

    .inner01 {
        width: min(100%, 1080px);
        margin: 0 auto;
    }

    img {
        width: 100%;
        height: auto;
    }

}

.iconBox {
    position: absolute;
    top: 0;
    left: 0;
    aspect-ratio: 1;
    width: 4.847em;
    font-size: var(--font46);
    transform: translate(-60%, -5%);


    .icon {
        position: relative;
        width: 100%;
        height: 100%;
    }

}

.iconBox__txt {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
    font-size: var(--font46);
    color: var(--white);
    line-height: 1.1;
    font-weight: var(--weight700);

    .small {
        font-size: 0.63em;
    }
}

.marker {
    background: linear-gradient(transparent 80%, var(--yellow01) 80%);
}

.color-red01 {
    color: var(--red02);
}



@media screen and (max-width: 1120px) {
    .symphony {
        .inner01 {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

    }
}

@media screen and (max-width: 1024px) {
    .push1024 {
        display: inline-block;
    }
}


/*******************************************
mv
*******************************************/
.symphony__mv {
    width: 100%;

}

/*******************************************
symphony__img01
*******************************************/
.symphony__img01 {
    /* padding-bottom: min(3.33%, 40px); */

    .img {
        width: min(100%, 1064px);
    }
}

@media screen and (max-width: 480px) {
    .symphony__img01 {
        padding-bottom: 0;
    }
}


/*******************************************
symphonyGift
*******************************************/
.symphonyGift {
    background-image: url(../img/symphony/bg-01.jpg);
    background-size: cover;
    background-position: top center;
}

.symphonyGift__top {
    padding: max(6%, 30px) 0 max(3.7%, 15px);

}

.symphonyGift__imgBox {
    position: relative;
    width: min(100%, 850px);
    margin: 0 auto;
}

.symphonyGift__bottom {
    margin-left: calc(-50vw + 50%);
    width: 100vw;
    background-color: var(--red01);
    padding: 5px;
}

.symphonyGift__txtBox {
    width: fit-content;
    margin: 0 auto;
    font-size: var(--font34);
    text-align: center;
    color: var(--white);

    .ttl {
        font-size: 2.05em;
        line-height: 1;
        font-weight: var(--weight700);
        text-shadow:
            1px 0 0 #000,
            -1px 0 0 #000,
            0 1px 0 #000,
            0 -1px 0 #000;
        letter-spacing: 0.017em;
    }

    .txt01,
    .txt02 {
        font-weight: var(--weight400);
    }

    .txt02 {
        display: block;
        margin-top: 0.9em;
        font-size: 0.617em;
        text-align: end;
    }
}

@media screen and (max-width: 1140px) {
    .symphonyGift__imgBox {
        width: 75%;

        .iconBox {
            font-size: max(4.1vw, 15px);
        }

        .iconBox__txt {
            font-size: max(4.1vw, 15px);
        }
    }
}

@media screen and (max-width: 768px) {
    .symphonyGift__imgBox {
        width: 100%;

        .iconBox {
            transform: translate(-10%, -25%);
        }
    }
}

@media screen and (max-width: 585px) {
    .symphonyGift__bottom {
        padding: 0.8vw;
    }

    .symphonyGift__txtBox {
        font-size: 4.6vw;
    }
}

@media screen and (max-width: 480px) {
    .symphonyGift__imgBox {

        .iconBox {
            transform: translate(-20%, -25%);
        }
    }
}


/*******************************************
symphonyPoint
*******************************************/
.symphonyPoint {
    background-image: url(../img/symphony/bg-02.jpg);
    background-size: 100%;
    background-position: top center;
    background-repeat: repeat-y;
    padding: clamp(30px, 5%, 55px) 0 clamp(35px, 7.5%, 75px);
}

.symphonyPoint__list {
    margin-bottom: max(4.63%, 25px);
}

.symphonyPoint__item {
    background-color: var(--white);
    margin-bottom: max(4.63%, 25px);
    padding: 25px 30px 30px;

    &:last-child {
        margin-bottom: 0;
    }
}

.symphonyPoint__item02 {

    .symphonyPoint__ttlBox {
        .ttl {
            padding-right: 27%;
        }
    }

    .symphonyPoint__flex {
        .img {
            width: min(26.86%, 274px);
            margin-top: -14%;
        }
    }
}

.symphonyPoint__ttlBox {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: var(--notoSerif);
    margin-bottom: max(2.942%, 15px);

    .number {
        font-size: var(--font46);
        width: 160px;
        aspect-ratio: 160/111;
        color: var(--white);
        background-color: var(--red01);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: var(--weight800);
        margin-right: 10px;
    }

    .ttl {
        flex: 1;
        font-weight: var(--weight800);

        .small-ttl {
            display: block;
            font-size: var(--font34);
            line-height: 1.2;

            .big {
                font-size: 1.176em;
            }
        }

        .big-ttl {
            display: block;
            font-size: var(--font46);
            line-height: var(--lineHight170);

            .small {
                font-size: 0.739em;
            }
        }
    }
}

.symphonyPoint__flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .txt {
        line-height: var(--lineHight143);
        font-size: var(--font30);
        text-align: justify;
        flex: 1;
        margin-right: 0.6em;

        .color-red01 {
            font-weight: var(--weight700);
        }
    }

    .img {
        width: min(47.6%, 485px);

    }
}

.symphonyDelivery__detail {
    font-size: var(--font30);
    flex: 1;

    dt {
        font-size: 1em;
        font-weight: var(--weight700);
        margin-bottom: 0.5em;
    }

    dd {
        font-size: 0.8em;
        line-height: 1.79em;
    }
}


@media screen and (max-width: 1024px) {
    .symphonyPoint__container {
        width: min(100%, 600px);
        margin: 0 auto;
    }

    .symphonyPoint__ttlBox {
        flex-direction: column;

        .number {
            font-size: 35px;
            width: 120px;
            aspect-ratio: 100/40;
        }

        .ttl {
            text-align: center;
            flex: initial;
            width: 100%;
        }
    }

    .symphonyPoint__flex {
        align-items: center;
        flex-direction: column-reverse;

        .txt {
            margin: 0.5em 0 0 0;
        }

        .img {
            width: min(100%, 300px);
        }
    }
}


@media screen and (max-width: 768px) {
    .symphonyPoint__ttlBox {
        .number {
            font-size: 20px;
            width: 100px;
        }
    }
}