@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --black: #000;
    --red01: #a21f24;
    --red02: #841218;
    --yellow01: #fbc600;
    --yellow02: #fff000;
    --beige: #fdf8e5;


    /* 書式 */
    --zenKaku: "Zen Kaku Gothic Antique", sans-serif;

    /* サイズ */
    --size01: clamp(1px, 0.29vw, 2.172px);
    --size02: clamp(2px, 0.533vw, 4px);
    --size03: clamp(0px, 1vw, 8px);
    --size05: clamp(0px, 1.333vw, 10px);
    --size07: clamp(0px, 2vw, 15px);
    --size08: clamp(0px, 2.2vw, 16px);
    --size09: clamp(0px, 2.4vw, 18px);
    --size10: clamp(0px, 2.6666vw, 20px);
    --size12: clamp(0px, 3.2vw, 22.5px);
    --size13: clamp(0px, 3.4667vw, 27px);
    --size15: clamp(0px, 4vw, 30px);
    --size18: clamp(0px, 4.8vw, 36px);
    --size20: clamp(0px, 5.34vw, 42px);
    --size25: clamp(0px, 6.67vw, 48px);
    --size27: clamp(0px, 7.2vw, 54px);
    --size30: clamp(0px, 7.9999vw, 59px);
    --size35: clamp(0px, 9.34vw, 70px);
    --size44: clamp(0px, 11.734vw, 88px);
    --size50: clamp(0px, 14vw, 105px);
    --size60: clamp(0px, 16vw, 120px);

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

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


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

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

p {
    font-size: var(--size12);
    line-height: 1.58333;
    text-align: justify;
    font-weight: 500;
}

.txt13 {
    font-size: var(--size13);
    line-height: 1.307;
}


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

.bg-red {
    position: relative;
    z-index: 0;
    padding-bottom: var(--size50);


    &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-image: linear-gradient(var(--red01), var(--red01)), url(../img/bg.png);
        background-blend-mode: multiply, normal;
        background-size: 100%;
        z-index: -1;

    }
}

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

.section {
    position: relative;
    z-index: 1;
}

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

.section__item {
    width: 100%;
    margin-bottom: var(--size20);


    &:last-of-type {
        margin-bottom: var(--size30);
    }
}


.box {
    width: 100%;
}

.box-frame {
    position: relative;
    padding: var(--size15);
    height: 100%;

    &::before {
        position: absolute;
        content: "";
        width: 100%;
        top: 0;
        left: 0;
        background-image: url(../img/frame01.png);
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }
}


.ttl {
    color: var(--white);
    background-color: var(--red02);
    text-align: center;
    width: 100%;
    aspect-ratio: 320/25;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: var(--size15);
    letter-spacing: 0.12em;
    border-radius: var(--size03);
    font-weight: 500;
}

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

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



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


.trademark {
    display: inline-block;
    transform: translateY(35%) scale(0.7);
    letter-spacing: -0.1em;
}

.narrowly1 {
    letter-spacing: -1em;
}

.narrowly04 {
    letter-spacing: -0.4em;
}



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

.btn-outer {
    display: block;
    position: relative;
    width: 81.16%;
    aspect-ratio: 280/60;
    margin: 0 auto;
    box-shadow: var(--size05) var(--size05) 0 var(--black);
    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(--yellow01);
    border: var(--size01) solid var(--black);
    font-weight: 700;
    color: var(--black);
    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;
        }
    }
}



/*******************************************
mv
*******************************************/

.mv {
    position: relative;
}


/*******************************************
apply
*******************************************/
.box-frame-apply {
    aspect-ratio: 350/208.5;

    &::before {
        aspect-ratio: 350/208.5;
    }
}

.apply {

    .ttl {
        font-size: var(--size12);
        aspect-ratio: 320/16;
    }
}

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

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

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

    .ttl {
        aspect-ratio: 150/16;
    }

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

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

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

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

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




/*******************************************
commodity
*******************************************/

.box-frame-commodity {
    aspect-ratio: 350/711;
    padding: var(--size15) var(--size15) var(--size35) var(--size15);

    &::before {
        aspect-ratio: 350/711;
        background-image: url(../img/frame02.png);
    }
}

.commodity__img {
    margin: var(--size30) auto var(--size12);
    width: 84.5%;
}

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

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




/*******************************************
note
*******************************************/
.note {
    .section__inner {
        padding: var(--size44) var(--size15) var(--size50);
    }
}

.noteBox {
    margin-bottom: var(--size27);

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

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

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

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

    &::before {
        width: var(--size08);
        aspect-ratio: 1;
        background-color: var(--red01);
        top: 50%;
        left: 0;
        transform: translateY(-50%) rotate(45deg);
    }

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

    }
}

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

.noteTxt02 {
    margin: 0 0 var(--size44);
}

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


.box-frame-receipt {
    aspect-ratio: 350/358;
    margin-top: var(--size25);

    &::before {
        aspect-ratio: 350/358;
        background-image: url(../img/frame03.png);
    }

    .ttl {
        background-color: var(--black);
        font-weight: 500;
    }
}

.receiptBox__txt {
    margin: var(--size15) 0 var(--size13);
}



.noteBox-contact {
    position: relative;

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

.contactBox {
    padding-left: var(--size07);
}

.mail {
    position: relative;
    padding-left: var(--size12);
    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(--black);

    p {
        font-size: var(--size10);
        color: var(--white);
    }
}