@charset "utf-8";

@media screen and (max-width: 767px){
    /* FVヘッダー */
    header{
        width: 100%;
        padding: 2%;
        background-image: url(../images/header_bg@1.5x.png);
        background-size: contain;
        box-sizing: border-box;
        background-color: antiquewhite;
    }
    .inner{
        display: flex;
        max-width: 600px;
        margin: 0 auto;
        align-items: center;
    }
    #top-logo{
        width: 20%;
    }
    header img{
        width: 100%;
    }
    header p{
        font-size:clamp(13px,4vw,25px);
        line-height: 1.5;
        font-weight: bold;
        margin-left: 10px;
        margin-bottom: 5px;
        white-space: nowrap;
    }
    h1{
        margin:0 0 0 2%;
    }
    h1 img{
        display: block;
        width: 120%;
    }
    #FV_text{
        width: 50%;
    }
    #FV_FLEX{
        width: 100%;
        position: relative;
        display: flex;
    }
    #FV_FLEX p{
        width: fit-content;
        display: inline-block;
        font-size: clamp(15px,6vw,43px);
        font-family: "筑紫B丸ゴシック", "ヒラギノ丸ゴ ProN",
             "Hiragino Maru Gothic ProN", sans-serif;
        margin: 13% 5%;
        background-image: url(../images/FV_h1box@1.5x.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
        padding: 0.2em 0.2em;
        white-space: nowrap;
    }
    #FV_model{
        width: 61%;
        display: block;
        position: absolute;
        background-image: url(../images/FV_model@1.5x.png);
        background-size: contain;
        background-repeat: no-repeat;
        right: 0px;
        top: 0;
        z-index: 2;
        aspect-ratio: 607/1136;
    }
    .MEDALS{
        width: 91%;
        margin: 0 auto;
    }
    #MEDALS_FLEX{
        display: flex;
        aspect-ratio: 1031/338;
        align-items: center;
        font-weight: bold;
    }
    #MEDALS_FLEX li{
        width: 35%;
        font-size: clamp(14px, 5vw, 38px);
        text-align: center;
        display: flex;
        flex-direction: column;
        background-image: url(../images/MEDALS2@1.5x.png);
        background-size: 100%;
        aspect-ratio: 567/599;
        background-repeat: no-repeat;
        margin: 1%;
        padding-top: 1.5%;
        height: 100%;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #canpain{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3%;
        position: relative;
    }
    #canpain p{
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(13px,4vw,27px);
        text-align: center;
        font-weight: bold;
        background-color: #eeafbd;
        padding: 1%;

    }
    #canpain ul{
        height: auto;
        aspect-ratio: 1/0.2;
        background-color: #fff;
        box-shadow: 5px 5px 12px rgba(0,0,0,0.2);
        display: flex;
        position: relative;
        font-weight: bold;
    }
    #canpain li:nth-child(1){
        width: 25%;
        height: 24px;
        background-color: #ebebeb;
        margin: 5px;
        font-size:clamp(20px,5vw,28px);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1%;
    }        
    #canpain li:nth-child(2) span{
        font-size: clamp(17px,15vw,110px);
        color: #f10443;
        margin-right: 1%;
        text-align: center;

        
    }
    #canpain li:nth-child(2){
        width: 45%;
        font-size:clamp(25px,4vw,40px);
        color: #f10443;
        display: flex;
        align-items: baseline;
    }
    #pop{
        position: absolute;
        z-index: 4;
        width: 17%;
        aspect-ratio: 1/1;
        background-color: #f10443;
        top: 23%;
        right: 2px;
        border-radius: 80px;
        text-align: center;
        color: #fff;
        font-size:clamp(15px,4vw,30px);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 6px 6px 10px rgba(0,0,0,0.2);
        font-weight: bold;
        padding: 1%;
    }
    #FV a img{
        width: 90%;
        color: #fff;
        font-size: 17px;
        margin-left: auto;
        margin-right: auto;
        transition: filter 0.1s ease;
    }
    #FV a{
        position: relative;
        display: inline-block;
        margin-top: 10px;
        transition: transform 0.1s ease;

    }
    #FV a:active{
        transform: translateY(4px);
    }
    #FV a:active{
        filter: brightness(0.95);
    }
    #FV a span{
        position: absolute;
        top: 46%;
        transform: translateY(-50%);
        left: 10%;
        font-size: clamp(15px,5vw,32px);
        font-family: "小塚ゴシック Pr6N",sans-serif;
        font-weight: bold;
        color: #fff;

    }
    #FV{
        background-image: url(../images/FV_bg@1.5x.png);
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        background-color: #FFF;
    }
    #NAYAMI{
        width: 100%;
        height: auto;
        background-image: url(../images/NAYAMI_bg@1.5x.png);
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        aspect-ratio: 1125/1254;
        padding-bottom: 5%;
        background-position: center;
    }
    h2{
        font-size: clamp(20px,8vw,45px);
        color: #fff;
        text-align: center;
        padding-top: 10px;
        line-height: 1.2;
    }
    h2 span{
        font-size: clamp(25px,8vw,55px);
        color: #f4eb5c;
    }
    #NAYAMI li{
        display: inline-block;
        color: #fff;
        font-size: clamp(12px,3vw,20px);
        background-color: #959393;
        white-space: nowrap;
        width: fit-content;
        padding: 1% 2%;
    }
    #NAYAMI-wrap{
        padding: 3% 5%;
    }
    #wrap{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    #wrap-r{
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: end;
        margin-top: 5%;

    }
    /* #wrap li.left:nth-child(1) { left: 0; top: 0; }
    #wrap li.left:nth-child(2) { left: 0; top: 30px; }
    #wrap li.left:nth-child(3) { left: 0; top: 60px; }
    #wrap li.left:nth-child(4) { left: 0; top: 90px; }
    #wrap li.right:nth-child(5) { right: 0; top: 140px; }
    #wrap li.right:nth-child(6) { right: 0; top: 170px; }
    #wrap li.right:nth-child(7) { right: 0; top: 200px; } */


    #TEIAN{
        position: relative;
        margin-bottom: 20%;
    }
    #TEIAN h2 p::after{
        content: "";
        height: 40px;
        background-image: url(../images/TEIAN_hukidashi@1.5x.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 90%;
        display: block;
        margin: 1% auto ;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);


    }
    #TEIAN h2 p{
        font-size: clamp(17px,4vw,34px);
        color: #423337;
        position: relative;

    }
    #TEIAN h2{
        margin-top: 12px;
    }
    #TEIAN_p{
        display: flex;
        justify-content: center;
        width: 90%;
        margin: 10px auto 0;
    }
    #TEIAN_p img{
        width: 40%;
    }
    #TEIAN_p p{
        font-size: clamp(13px,3vw,20px);
        text-align: center;
        font-weight: bold;
        margin-top: 10%;
        height: 90px;
        padding: 1%;
        background-color: #eeafbd;
        line-height: 2;
        width: 60%;
        height: fit-content;
        box-shadow: 6px 6px 12px thistle;
        white-space: nowrap;
    }
    #TEIAN a img{
        width: 90%;
        color: #fff;
        margin-left: auto;
        margin-right: auto;
    }
    #TEIAN a{
        display: inline-block;
        position: absolute;
        bottom: -18%;

    }
    #TEIAN a span{
        position: absolute;
        top: 50%;
        left: 50%;
        font-size:clamp(15px,5vw,32px);
        font-family: "小塚ゴシック Pr6N",sans-serif;
        font-weight: bold;
        color: #fff;
        transform: translateX(-51%) translateY(-54%);
        white-space: nowrap;

    }
    #EX img{
        width: 100%;
    }
    #REVIEW{
        background-image: url(../images/REVIEW_bg@1.5x.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin-top: 5%;
        padding-bottom: 5%;

    }
    #REVIEW img{
        width: 100%;
    }
    #YOYAKU{
        position: relative;
    }
    #YOYAKU img{
        width: 100%;
    }
    #YOYAKU a img{
        width: 85%;
        color: #fff;
        margin-left: auto;
        margin-right: auto;
    }
    #YOYAKU a{
        position: relative;
        display: inline-block;
        position: absolute;
        top: 34%;

    }
    #YOYAKU a span{
        position: absolute;
        top: 50%;
        left: 50%;
        font-size:clamp(15px,4.5vw,32px);
        font-family: "小塚ゴシック Pr6N",sans-serif;
        font-weight: bold;
        color: #fff;
        transform: translateX(-50%) translateY(-57%);
        white-space: nowrap;

    }
footer{
    margin-top: 3%;
}
footer img{
    width: 100%;
}
#copy{
    padding: 5% 0 2%;
    font-size: 10px;
    color: #FFF;
    background-color:#eeafbd;
    text-align: center;
}
#copy a{
    color: #FFF;
}
}