@charset "UTF-8";
.more-btn a{
    color: var(--sub-c);
    max-width:45rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    border-radius: 5rem;
    border: 5px solid #00bcd5;
    background-color: #fff;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    color: #007b8d!important;
    &:after{
        content: '';
        position: absolute;
        top: 50%;
        right: 3rem;
        border-bottom: 2px solid #00bcd5;
        border-right: 2px solid #00bcd5;
        width: 1rem;
        height: 1rem;
        transform: translateY(calc(50% - 1rem)) rotate(-45deg);
    }
}
.slick-dots button{
    background-color: #d1d1d1;
    height: 12px;
    width: 12px;
    border: 0;
}
.slick-dots .slick-active button{
    border: 0;
    background-color: #00bcd5;
    height: 12px;
    width: 12px;
}
@media screen and (max-width: 1000px) {
    .more-btn a{
        max-width:calc(517/750 *100vw);
        padding: calc(30/750 *100vw) 0;
        border-radius: 5rem;
        border: calc(5/750 *100vw) solid #00bcd5;
        font-size: calc(28/750 *100vw);
        &:after{
            right: calc(28/750 *100vw);
            width: calc(10/750 *100vw);
            height: calc(10/750 *100vw);
            transform: translateY(calc(50% - 1.33vw)) rotate(-45deg);
        }
    }
}
/*award*/
.award{
    background: url('../img/top/award_bg.png') no-repeat top center;
    padding: 6rem 0;
    text-align: center;
    h2{
        span{
            display: block;
            margin-bottom: 1.4rem;
        }
        font-size: 5rem;
        font-weight: 600;
        letter-spacing: 0.025em;
    }
    .award01{
        text-align: center;
        margin-top: 3rem;
        padding-bottom: 2rem;
    }
    .award02{
        text-align: center;
        margin-top: 6rem;
    }
    h2+p{
        padding: 2rem 0;
    }
    .gold{
        font-weight: 700;
        line-height: 1.875;
    }
    h3{
        font-size: 5rem;
        font-weight: 600;
        span{
            vertical-align: sub;
        }
        .number{
            font-size: 12.8rem;
        }
        .large{
            font-size: 6rem;
        }
    }
    h4{
        color: var(--sub-c);
        font-weight: 700;
        font-size: 3rem;
    }
    h4+p{
        padding: 2rem 0;
        max-width: 84.5rem;
        margin-left: auto;
        margin-right: auto;
    }
    .cite{
        font-size: 1.4rem;
        font-weight: 400;
        margin-top: 2rem;
    }
}
@media screen and (max-width: 1000px) {
    .award{
        background: url('../img/top/award_bg.png') no-repeat top center/150vw auto;
        padding: calc(150/750 *100vw) 0 calc(100/750 *100vw);
        .award_inr{
            padding-left:calc(20/750 *100vw) ;
            padding-right: calc(20/750 *100vw);
        }
        h2{
            span{
                display: block;
                margin:0 auto calc(18/750 *100vw);
                width:calc(160/750 *100vw);
            }
            font-size: calc(56/750 *100vw);
            line-height: calc(70/56 *1);
        }
        .award01{
            margin-top: calc(30/750 *100vw);
            padding-bottom: calc(20/750 *100vw);
        }
        .award02{
            margin-top: calc(60/750 *100vw);
        }
        h2+p{
            padding: calc(30/750 *100vw) 0;
            text-align: initial;
        }
        h3{
            font-size: calc(43/750 *100vw);
            .number{
                font-size: calc(122/750 *100vw);
            }
            .large{
                font-size: calc(82/750 *100vw);
            }
        }
        h4{
            text-align: initial;
            font-size: calc(40/750 *100vw);
            line-height: calc(60/40 *1);
        }
        h4+p{
            padding:  calc(40/750 *100vw) 0  calc(20/750 *100vw); 
            max-width:100%;
            text-align: initial;
        }
        .cite{
            font-size: calc(20/750 *100vw);
            margin-top:  calc(20/750 *100vw);
            text-align: left;
        }
    }
}
/*reviews*/
.reviews{
    padding: 8.8rem 0;
    background-color: #e9f4f5;
    color: var(--sub-c);
    h2{
        font-weight: 700;
        color: var(--sub-c);
        span{
            display: inline-block;
        }
        text-align: center;
        font-size: 4rem;
        .text{
            border-bottom: 5px solid #00bcd5;
        }
    }
    h2+p{
        font-size: 6.8rem;
        font-weight: 700;
        text-align: center;
        color: var(--sub-c);
        .number{
            letter-spacing: -0.1em;
            font-style: italic;
        }
        .large{
            font-size: 10.2rem;
        }
        .star{
            margin-left: 3rem;
            font-size: 5rem;
            color: #dde004;
        }
    }
    .reviews_list{
        margin-top: 3rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 3rem  0;
        font-size: 2rem;
    }
    li{
        width:48.92%;
        background-color: #fff;
        padding: 3.4rem;
        line-height: 1.5;
        font-weight: 700;
    }
    .reviews_btn a{
        margin: 4rem auto 0;
    }
}
@media screen and (max-width: 1000px) {
    .reviews{
        padding: calc(60/750 *100vw) 0  calc(90/750 *100vw);
        h2{
            text-align: center;
            font-size: calc(50/750 *100vw) ;
            img{
                width: calc(460/750 *100vw);
            }
            .text{
                font-size: calc(50/750 *100vw) ;
                border-bottom: 5px solid #00bcd5;
            }
        }
        h2+p{
            font-size: calc(82/750 *100vw) ;
            span{
                vertical-align: middle;
            }
            .large{
                font-size: calc(120/750 *100vw) ;
            }
            .star{
                margin-left: calc(20/750 *100vw);
                font-size: calc(42/750 *100vw);
            }
        }
        .reviews_list{
            margin-top:  calc(28/750 *100vw);
            flex-direction: column;
            gap: calc(20/750 *100vw)  0;
            font-size: calc(32/750 *100vw);
        }
        li{
            width: 100%;
            padding:  calc(30/750 *100vw)  calc(28/750 *100vw);
        }
        li:nth-child(n+4){
            display: none;
        }
        .reviews_btn a{
            margin: calc(45/750 *100vw) auto 0;
        }
    }
}
/*forNew*/
.forNew{
    margin-top: 7rem;
    h2{
        color: var(--sub-c);
        font-size: 4rem;
    }
    p{
        margin-top: 2rem;
        color: var(--sub-c);
    }
    .forNew_btn{
        margin: 6rem auto 0;
        text-align: center;
    }
}
.forNew_inr{
    padding: 13rem 0 3rem 15rem;
    background: url('../img/top/forNew_bg.jpg') no-repeat center/cover;
}
@media screen and (max-width: 1000px) {
    .forNew{
        margin-top: calc(80/750 *100vw);
        h2{
            font-size: calc(50/750 *100vw);
        }
        p{
            margin-top: calc(28/750 *100vw);
        }
        .forNew_btn{
            margin: calc(60/750 *100vw) auto 0;
        }
    }
    .forNew_inr{
        max-width: calc(686/750 *100vw);
        margin-left: auto;
        margin-right: auto;
        padding: calc(112/750 *100vw) calc(38/750 *100vw) calc(50/750 *100vw);
        background: url('../img/top/sp_forNew_bg.jpg') no-repeat center/cover;
    }
}
.top_ttl{
    font-size: 4rem;
    text-align: center;
    font-weight: 700;
    font-size: 4rem;
    color: var(--sub-c);
    span{
        border-bottom: 5px solid #00bcd5;
        display: inline-block;
    }
}
@media screen and (max-width: 1000px) {
    .top_ttl{
        font-size: calc(50/750 *100vw);
        span{
            border-bottom: calc(6/750 *100vw) solid #00bcd5;
        }
    }
}
/*reason*/
.reason{
    margin-top: 9rem;
    ul{
        display: flex;
        gap: 6rem 2rem;
        flex-wrap: wrap;
        margin-top: 6rem;
        justify-content: center;
    }
    h3{
        color: var(--sub-c);
        font-weight: 700;
        margin-top: 2rem;
    }
    .reason_img{
        text-align: center;
    }
    li{
        position: relative;
        display: flex;
        flex-direction: column;
    }
    h3+p{
        margin-top: 1rem;
    }
    li{
        width: 31.78%;
        background-color: #e9f4f5;
        padding: 3rem 2rem 5rem;
    }
    .point{
        background: #00bcd5;
        border-radius: 50px;
        text-align: center;
        justify-content: center;
        width: 14.2rem;
        height: 3rem;
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-50%);
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
    }
    .reason_btn{
        margin-top: 4.6rem;
        text-align: center;
    }
}
@media screen and (max-width: 1000px) {
    .reason{
        margin-top: calc(120/750 *100vw);
        .mainw{
            max-width:  calc(686/750 *100vw) ;
            margin-left: auto;
            margin-right: auto;
        }
        ul{
            flex-direction: column;
            gap: calc(70/750 *100vw) 0;
            margin-top: calc(78/750 *100vw);
        }
        h3{
            margin-top: calc(20/750 *100vw);
            font-size: calc(32/750 *100vw) ;
        }
        h3+p{
            margin-top:  calc(16/750 *100vw);
            font-size: calc(28/750 *100vw) ;
        }
        li{
            width: 100%;
            background-color: #e9f4f5;
            padding:  calc(50/750 *100vw)  calc(30/750 *100vw)  calc(40/750 *100vw);
        }
        .point{
            width: calc(228/750 *100vw) ;
            height:  calc(48/750 *100vw) ;
            font-size:  calc(28/750 *100vw);
        }
        .reason_btn{
            margin-top: calc(50/750 *100vw);
        }
    }
}

@media screen and (min-width: 1001px) {
    .campaign{
        ul{
            display: flex;
            justify-content: center;
            margin-top: 5rem;
            gap: 0 4rem;
        }
    }
}
@media screen and (max-width: 1000px) {
    .campaign{
        ul{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 5rem;
            gap: calc(20/750 *100vw) calc(47/750 *100vw);
        }
        li{
            width: calc(50% - calc(47/750 *100vw));
        }
    }
}
.plan{
    margin-top: 10rem;
    padding: 8rem 0 10rem;
    background-color: #e9f4f5;
    h3{
        color: var(--sub-c);
        margin-top: 2rem;
        font-size: 4rem;
        font-weight: 700;
        text-align: center;
        span{
            margin-left: 1.6rem;

            font-size: 3.4rem;
            font-weight: 700;
            color: #fff;
            background-color: #01bbd4;
            display: inline-block;
            border-radius: 50px;
            padding: 0.8rem 2rem;
        }
    }
    ul{
        margin-top: 6rem;
    }
    .plan_list{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6rem 0;
    }
    li{
        width: calc(750 / 1120 * 100%);
        padding: 5rem 3rem;
        background-color: #fff;
        position: relative;
    }
    .plan_wrap{
        display: flex;
        align-items: center;
        justify-content:center;
    }
    .price{
        background-color: transparent;
        color: var(--sub-c);
        margin-top: 2rem;
        font-size: 3.6rem;
        font-weight: 700;
        span{
            display: inline-block;
            font-size: 5.2rem;
        }
    }
    .point{
        background: #00bcd5;
        border-radius: 50px;
        text-align: center;
        justify-content: center;
        width: 33rem;
        height: 4.8rem;
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-50%);
        font-size: 2.4rem;
        font-weight: 700;
        color: #fff;
    }
    .more-btn{
        margin-top: 5rem;
    }
}
@media screen and (max-width: 1000px) {
    .plan{
        margin-top:  calc(96/750 *100vw);
        padding:  calc(80/750 *100vw) 0  calc(100/750 *100vw);
        h3{
            color: var(--sub-c);
            margin-top:  calc(90/750 *100vw);
            font-size:  calc(40/750 *100vw);
            span{
                margin-left: calc(20/750 *100vw);
                font-size:calc(34/750 *100vw);
                padding: calc(8/750 *100vw) calc(18/750 *100vw);
            }
        }
        ul{
            margin-top: calc(70/750 *100vw);
            img{
                max-width:  calc(186/750 *100vw);
            }
        }
        .plan_wrap{
            justify-content: space-around;
        }
        .plan_list{
            gap: calc(70/750 *100vw) 0;
            flex-direction: column;
        }
        li{
            width: 100%;
            padding:  calc(60/750 *100vw) 0 calc(60/750 *100vw) calc(40/750 *100vw);
            font-size:calc(14/750 *100vw);
            letter-spacing: -0.1em;
        }
        .price{
            font-size: calc(36/750 *100vw);
            margin-top: 0;
            span{
                display: inline-block;
                font-size: calc(52/750 *100vw) ;
            }
        }
        .point{
            width: calc(330/750 *100vw);
            height: calc(48/750 *100vw);
            font-size: calc(28/750 *100vw);
        }
        .more-btn{
            margin-top: 5rem;
            margin-top: calc(50 / 750* 100vw);
        }
    }
}
.recommend{
    opacity: 10rem 0;
    .recommend_list{
        text-align: center;
        margin-top: 8.8rem;
    }
}
@media screen and (max-width: 1000px) {
    .recommend{
        opacity: calc(100/750 *100vw) 0 calc(160/750 *100vw);
        .recommend_list{
            text-align: center;
            margin:calc(100/750 *100vw) auto 0;
            max-width: calc(582/750 *100vw);
        }
    }
}
.story{
    padding: 8rem 0 7.6rem;
    background: url('../img/top/story_bg.jpg') no-repeat center/cover;
    .story_list{
        margin-top: 56rem;
    }
    .story_slider{
        a{
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0.8rem 2rem;
         
        }
        font-size: 4rem;
        font-weight: 700;
        padding: 0 1rem;
    }
    .slick-list{
        max-width: 89rem;
        margin-left: auto;
        margin-right: auto;
    }
    .slick-next ,.slick-prev{
        top: 30%;
        border-color: #000;
    } 
    .slick-dots{
        width: auto;
    }
    .story_btn{
        margin: 6rem auto 0;
        text-align: center;
    }
}
@media screen and (max-width: 1000px) {
    .story{
        padding:  calc(80/750 *100vw) 0 calc(70/750 *100vw);
        background: url('../img/top/story_bg.jpg') no-repeat center/cover;
        .story_list{
            margin-top:  calc(560/750 *100vw);
        }
        .story_slider{
            a{
                padding: calc(16/750 *100vw) calc(30/750 *100vw);
            }
            font-size: calc(28/750 *100vw);
            padding: 0;
        }
        .slick-list{
            max-width: calc(615/750 *100vw);
        }
        .story_btn{
            margin: calc(50/750 *100vw) auto 0;
        }
        .slick-next, .slick-prev{
            top: 38%;
          
        }
    }
}
.news{
    margin: 12rem 0 9rem;
    ul{
        margin-top: 5.6rem;
        max-width: 73.8rem;
        margin-left: auto;
        margin-right: auto  ;
    }
    li{
        border-top: 1px solid #007b8d;
        a{
            display: flex;
            padding: 2.8rem 2.4rem;
            gap: 0 3rem;
            position: relative;
            padding-right: 2rem;
            &:after{
                content: '';
                position: absolute;
                top: 50%;
                right: 1rem;
                border-bottom: 2px solid #00bcd5;
                border-right: 2px solid #00bcd5;
                width: 1rem;
                height: 1rem;
                transform: translateY(calc(50% - 1rem)) rotate(-45deg);
            }
        }
    }
    li:last-child{
        border-bottom: 1px solid #007b8d;
    }
}
@media screen and (max-width: 1000px) {
    .news{
        margin: calc(110/750 *100vw) 0 calc(120/750 *100vw);
        ul{
            margin-top:calc(50/750 *100vw);
            max-width: calc(705/750 *100vw);
        }
        li{
            a{
                
                flex-direction: column;
                padding: calc(20/750 *100vw) 0;
                padding-right: calc(38/750 *100vw);
                gap: calc(8/750 *100vw) 0 ;
                &:after{
                    right: calc(28/750 *100vw);
                    width: calc(10/750 *100vw);
                    height: calc(10/750 *100vw);
                    transform: translateY(calc(50% - 1.33vw)) rotate(-45deg);
                }
            }
        }
    }
}
.shop{
    background-color: #e9f4f5;
    padding: 8rem 0 9rem;
    ul{
        margin-top: 5rem;
        display: flex;
        gap: 0 5rem;
    }
    p{
        margin-top: 1.4rem;
        line-height: calc(26/16 *1);
    }
    .shop_map{
        iframe{
            width: 100%;
            height: 100%;
            aspect-ratio: 270 / 167;
        }
    }
    li{
        width: calc(540/1120 *100%);
    }
}
@media screen and (max-width: 1000px) {
    .shop{
        padding: calc(90/750 *100vw) 0 ;
        ul{
            margin-top: calc(60/750 *100vw);
            flex-direction: column;
            gap: calc(50/750 *100vw) 0;
        }
        p{
            margin-top:calc(28/750 *100vw);
            line-height: calc(40/28 *1);
            font-size: calc(28/750 *100vw);
        }
        .shop_map{
            iframe{
                width: 100%;
                height: 100%;
                aspect-ratio: 270 / 167;
            }
        }
        li{
            width: 100%;
        }
    }
}