@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;

    --blue03: #82cbd1;
    --blue04: #d4eef0;
    --blue05: rgba(0, 174, 235, 0.2);
    --blue06: rgba(130, 203, 209, 0.2);
    --yellow: #fff000;


    /* 新 */
    --red01: #c30d23;
    --brown01: #40210f;


    /* 書式 */
    --zenMaru: "Zen Maru Gothic", sans-serif;

    /* サイズ */
    --size01: clamp(1px, 0.29vw, 2.172px);
    --size02: clamp(2px, 0.533vw, 4px);
    --size03: clamp(3px, 1vw, 8px);
    --size05: clamp(4.3px, 1.333vw, 10px);
    --size07: clamp(6px, 2vw, 15px);
    --size09: clamp(7.7px, 2.4vw, 18px);
    --size10: clamp(8.5px, 2.6666vw, 20px);
    --size12: clamp(10.2px, 3vw, 22.5px);
    --size13: clamp(11.1px, 3.6vw, 27px);
    --size15: clamp(11.1px, 4vw, 30px);
    --size18: clamp(15.4px, 4.8vw, 36px);
    --size20: clamp(17.1px, 5.2vw, 42px);
    --size27: clamp(23px, 7.2vw, 54px);
    --size30: clamp(25.6px, 7.9999vw, 59px);
    --size35: clamp(29.9px, 9.34vw, 70px);
    --size40: clamp(34.1px, 10.67vw, 80px);
    --size44: clamp(37.5px, 11.734vw, 88px);
    --size55: clamp(34.1px, 14.67vw, 110px);
    --size63: clamp(53.8px, 16.8vw, 126px);


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

    /* 行間 */
    --lineHight121: 1.217;
    --lineHight158: 1.5833;

    /* 文字間 */
    --fontSpace120: 0.12em;

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

    /* 角丸の変数　 */
    --borderRadius50: 50vw;
    --borderRadiusCircle: 50%;
}


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

body {
    font-family: var(--zenMaru);
}

p {
    font-weight: var(--weight700);
    font-size: clamp(12px, 3vw, 22.5px);
    font-size: var(--size12);
    line-height: var(--lineHight158);
    color: var(--brown01);
    text-align: justify;
}

.main__inner {
    width: min(100%, 750px);
    margin: 0 auto;
    overflow: hidden;
}

.section__inner {
    padding: 0 var(--size15);
}

.borderBox {
    padding: var(--size20) var(--size15) 0;
    border-radius: var(--size05);
    background-color: var(--white);
}

.borderBox__ttl {
    font-size: var(--size15);
    color: var(--white);
    background-color: var(--red01);
    text-align: center;
    line-height: var(--lineHight121);
    padding: var(--size03) 0;
    border-radius: var(--size05);
    margin-bottom: var(--size13);
    font-weight: var(--weight700);
}

.list {
    li {
        position: relative;
        padding-left: var(--size10);

        &::before {
            position: absolute;
            content: "";
            width: var(--size02);
            aspect-ratio: 1;
            background-color: var(--brown01);
            border-radius: var(--borderRadiusCircle);
            top: var(--size10);
            left: var(--size05);
            transform: translate(-50%, -50%);
        }
    }
}

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

.marker {
    background: linear-gradient(transparent 70%, var(--yellow) 70%);
    font-weight: 900;
}

.bg-01 {
    background-image: url(../img/bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    padding-bottom: var(--size63);
}


/*******************************************
btn
*******************************************/

.applyBtn {
    position: relative;
    width: 81.16%;
    aspect-ratio: 280/60;
    margin: 0 auto;
    box-shadow: var(--size05) var(--size05) 0 var(--brown01);
    border-radius: var(--size05);
}



.btn {
    position: relative;
    font-size: var(--size20);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--size05);
    width: 100%;
    height: 100%;
    background-color: var(--yellow);
    font-weight: var(--weight700);
    color: var(--brown01);
    transition: var(--transitionBase);

    &:hover {
        transform: translate(var(--size05), var(--size05));
    }

    &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1.5em;
        transform: translateY(-50%);
        width: 0.5em;
        aspect-ratio: 1/1.5;
        background: currentColor;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
}

@media screen and (max-width:1024px) {
    .btn {
        &:hover {
            transform: none;
        }
    }
}



/*******************************************
apply
*******************************************/
/* .presentBox {
    margin-top: min(-11%, -35px);
} */

.present__img {
    &:nth-child(2) {
        margin-top: min(-0.5%, -1px);
    }
}

.applyBox {
    border-radius: var(--size05);
    padding: var(--size15) var(--size10);
    margin: var(--size15) 0 var(--size40);
    background-color: var(--white);
}

.applyBox__ttl {
    letter-spacing: var(--fontSpace120);
    font-size: var(--size13);
    color: var(--white);
    background-color: var(--red01);
    text-align: center;
    line-height: var(--lineHight121);
    font-weight: var(--weight700);
    border-radius: var(--size03);
}

.applyBox__txt {
    margin: var(--size10) 0 var(--size15);
    font-weight: var(--weight700);
}

.applyBox__flex {
    position: relative;
    display: flex;
    justify-content: space-between;

    &::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--red01);
    }

    .item {
        width: calc((100% - var(--size18))/2);
    }

    .img {
        margin-top: var(--size07);
    }
}

.merchandiseBox {
    margin-bottom: var(--size20);
}

.lotteryBox {
    padding: var(--size20) var(--size10);
    margin-bottom: var(--size55);

    .borderBox__ttl {
        width: 96.58%;
        margin: 0 auto var(--size13);
    }
}

/* 480以上 */
@media screen and (min-width:480px) {
    .present__img {
        transform: translateX(-0.5%);
        width: 101%;
    }
}


/*******************************************
note
*******************************************/
.note {
    .section__inner {
        padding-top: var(--size35);
        padding-bottom: var(--size40);
    }
}

.note__ttl {
    position: relative;
    font-size: var(--size15);
    font-weight: var(--weight700);
    color: var(--brown01);
    padding: 0 0 0 var(--size15);
    margin-bottom: var(--size15);
    color: var(--brown01);

    &::before,
    &::after {
        position: absolute;
        content: "";
    }

    &::before {
        width: var(--size09);
        aspect-ratio: 1;
        border-radius: var(--borderRadiusCircle);
        background-color: var(--brown01);
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    &::after {
        width: 100%;
        height: var(--size01);
        background-color: var(--brown01);
        top: calc(100% + var(--size05));
        left: 0;

    }
}

.noteTxt01 {
    margin: var(--size07) 0 var(--size10);
}

.borderLeftBox {
    padding-left: var(--size10);
    border-left: var(--size02) solid var(--brown01);
}

.borderBox-note {
    margin: var(--size27) 0 var(--size30);
    padding-bottom: var(--size12);
    border: var(--size02) solid var(--red01);

    .img {
        margin-top: var(--size10);
    }
}

.noteBox-personal {
    margin-bottom: var(--size35);
}

.noteBox-contact {
    position: relative;
    margin-top: var(--size44);
    background-color: var(--white);
    padding: var(--size20) var(--size10);
    border-radius: var(--size05);
    border: var(--size02) solid var(--red01);

    .small {
        font-size: var(--size10);
        margin-top: var(--size07);
    }

    .note__ttl {
        color: var(--red01);

        &::before {
            background-color: var(--red01);
        }

        &::after {
            background-color: var(--red01);
        }
    }

}

.mail {
    position: relative;
    padding-left: var(--size13);
    transition: var(--transitionBase);

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/icon01.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: var(--size10);
        aspect-ratio: 1;
        top: 50%;
        left: 0;
        transform: translateY(-30%);

    }

    &:hover {
        opacity: .7;
    }
}

@media screen and (max-width:768px) {
    .mail {

        &:hover {
            opacity: 1;
        }
    }
}




/*******************************************
footer
*******************************************/
.footer {
    width: min(100%, 750px);
    aspect-ratio: 375/50;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: var(--red01);

    p {
        font-size: var(--size10);
        color: var(--white);
        letter-spacing: 0.03em
    }
}