@charset "utf-8";

:root {
    --main-color: #2B3947; /* 共通のカラーを定義 */
    --benest-color:#CDD5DC;
    --helka-color:#EBE9E2;
    --en:'Montserrat', sans-serif;
    --sec-pd:5vw 0;
    --sec-pd-sp:15vw 5vw 10vw;
    --transition01:all 0.3s ease;
}
.en{font-family:var(--en);}
a[href]{text-decoration: none;
    color: var(--main-color);
}

body{
    color:var(--main-color);
}
/* 共通パーツ ---------------*/

/* title */
.title h2{
font-size: 6rem;
font-family: var(--en);
font-weight: bold;  
line-height: 1;  
text-transform: uppercase;
}
.title h3{
    font-size: 1.6rem;
}

@media only screen and (max-width: 768px) {
    .title h2 {
        font-size: 4rem;
    }
}

/* btn */
.btn{
    border: solid var(--main-color);
    font-weight: bold;
    font-family: var(--en);
    font-size: 2.4rem;
    margin-top: 1.5em;
    position: relative;
    background-color: #FFF;
    transition: var(--transition01);
}
.btn .txt_box{
    display: block;
    line-height: 1;
    padding: 0.5em;
}
.btn .txt_box span{
    font-size: 1.4rem;
    display: block;
}
.btn .img_box{
background-color: var(--main-color);
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.5em;
}
.btn:hover{
    background-color:var(--benest-color);
}

.a_btn{
margin-top: 1.5em;
font-weight: bold;
border: solid;
padding:0.8em;
min-width:10em;
}

.link{
font-weight: bold;
}


/* arrow */
.arrow {
    position: relative;
    padding-right: 2em;
    width: fit-content;
    transition:var(--transition01);    
}
.arrow:hover{
    opacity: 0.7;
}
.arrow::after{
    content: "";
    width: 3em;
    height: 8px;
    border-bottom: solid;
    border-right: solid;
    position: absolute;
    top: 45%;
    right: -1.5em;
    transform:skew(45deg);
    transition:var(--transition01); 
}
.arrow:hover::after{
    right: -2em;
}


/* link */
.link{
    font-weight: bold;
    position: relative;
}



/* /共通パーツ ---------------*/



/* header */

header{
    padding: 1vw 5vw;
    margin: 0 auto;
}
header .header_list{
    align-items: center;
    justify-content: center;
    gap:1vw;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--benest-color);
}
header .header_list .current{
position: relative;
color: var(--main-color);
}
header .header_list .current::after{
    content:"";
    width:100%;
    height: 5px;
    background-color: var(--main-color);
    position: absolute;
    bottom:-3px;
    left: 0;
}

@media only screen and (max-width: 768px) {
    header .header_list {
        gap: 5vw;
    }
}

/* mv------ */
#mv{
    position: relative;
}
#mv h1{width: fit-content;
    padding: 2vw;
    /* background: #FFF; */
    position: absolute;
    top: 50%;
    left: 5vw;
    transform: translateY(-50%);
    border-radius: 50%;
}

#mv picture img{
    position: relative;
    width: 100%;
    padding-right: 5vw;
}
#mv picture img::after{
    content:"";
    background-image: url(../images/mv_bg.svg);
    background-size: contain;
    position: absolute;
    top: 0;
    right: 30px;
    width:5vw;
    height: 5vw;
    transform: translateX(-98%) translateY(-70%) rotate(135deg);
    background-color:#FFF;
}

#mv::after{
    content:"";
    background-image: url(../images/mv_bg_color.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 70vw;
    height: 70vw;
    position: absolute;
    bottom:-65%;
    right: 0;
    z-index: -1;

}

@media only screen and (max-width: 768px) {
    
    #mv::after {
        content: "";
        background-image: url(../images/mv_bg_color_sp.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 88vw;
        height: 200vw;
        position: absolute;
        bottom: -80%;
        right: 0;
        z-index: -1;
    }

    #mv h1 {
        padding: 6vw;
    /* background: #FFF; */
    position: absolute;
    top: 20%;
    left: 48%;
    transform: translateX(-50%);
    border-radius: 50%;
    width: 50%;
    }
}


/* about-------- */
#about{
    justify-content: center;
    align-items: center;
    gap: 5vw;
    padding: var(--sec-pd);
}

@media only screen and (max-width: 768px) {
    #about{
        padding: var(--sec-pd-sp); 
    }

    #about .txt{
        margin-top: 10vw;
    }
}



/* shop_info------- */
#shop_info{
    padding: var(--sec-pd);
    margin-top: 5vw;
    position: relative;
    overflow: hidden;
}

#shop_info .shop_contents{
    margin-top: 2em;
    justify-content: center;
    gap: 5vw;
}

#shop_info .shop_contents .map iframe{
    padding: 1vw;
    border: solid var(--main-color) !important;
    max-width: 458px;
    max-height: 317px;
}
#shop_info::after{
    content:"";
    background-image: url(../images/helka_bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 83px;
    height: 91px;
    position: absolute;
    right: -40px;
    top:50%;
}

@media only screen and (max-width: 768px) {
    #shop_info{
        margin: 0;
        padding: var(--sec-pd-sp); 
    }
    #shop_info title{
        text-align: left;
    }
    #shop_info .shop_contents .map iframe{
        margin: 5vw auto;
        max-width:100%;
        max-height:217px;
    } 
}


/* other_shop---------- */
.other_shop{
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 5vw;
    margin-top: 5vw;
    background: url(../images/benest_bg_color.svg) no-repeat;
    background-size: contain;
    background-position: center;
    max-width: 1000px;
    min-height: 600px;
    margin: 5vw auto;
}
.other_shop h2{
    margin-bottom: 0.5em;
}
.other_shop .img{
    width: 30%;
    height: auto;
}

@media only screen and (max-width: 768px) {
    .other_shop{
        padding: var(--sec-pd-sp); 
        background: url(../images/helka_bg_color_sp.svg) no-repeat;
    }
    .other_shop h2 {
        margin: 0.5em auto;
        width: fit-content;
    }
    .other_shop .img{
        margin: 5vw auto;
        width: 80%;
    }
    .other_shop p{
        text-align: center;
    }
    .other_shop .a_btn{
        margin: 1.5em auto;
    }
}


/* footer--------- */
footer{
    margin-top: 5vw;
}