@charset "UTF-8";


/*loading mark*/

.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#fff;stroke-width:69;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}


/*----------------------------------------------------------------------------------------------------------------------main_v----------*/

#main_v{ 
position:relative;
width:100%;
height:100%;
min-height: 100%;
background:#289a49;
z-index:0;
}

#main_copy{
position:absolute;
bottom:23%;
left:16.6%;
z-index:100;
width:33.3%;
}

#main_copy h2{
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,.8);
}

#main_copy h2 img{ width:100%; height:auto; }

#main_copy h3{
font-size:16px;
margin-top: 12px;
color: #fff;
}

.scroll{
position:absolute;
right:6.25%;
bottom:8%;
z-index:100;
width:8.3%;
height:auto;
max-width: 160px;
max-height:160px;
}

.scroll p.arrow{
position:absolute;
right:50%;
top:50%;
width:15px;
height:42px;
margin-top: -20px;
margin-right: -8px;
}

.scroll img{
width:100%;
height:auto;
}

.scroll .circle img { animation: rotate-anime 20s linear infinite; }

@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}

.scroll img{
width:100%;
height: auto;
}

#video-area{
position: absolute;
z-index: 0;
top: 16%;
right:12.5%;
overflow: hidden;
width:75%;
height: 68%;
}

#video {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
height: 56.25vw;
min-height: 100%;
min-width: 100%;
}

.shop_info{
position: absolute;
bottom:6%;
left: 7.5%;
color: #fff;
font-size: 14px;
letter-spacing: 0.08em;
}


@media screen and (max-width:1100px){		

#main_copy{ width:40%; }

.shop_info{
bottom:5%;
left: 7.6%;
font-size: 14px;
line-height: 1.6;
}

.scroll{
right:6.25%;
bottom:8%;
width:12%;
height:auto;
}

}

@media screen and (max-width:767px){

#main_copy{
bottom:18%;
left:12%;
width:80%;
}

#main_copy h3{
font-size:13px;
margin-top: 13px;
}

#video-area{
position: absolute;
z-index: 0;
top: 5%;
left:8%;
overflow: hidden;
width:92%;
height: 80%;
}

.shop_info{
left: 5%;
}


.scroll{
right:5%;
bottom:5%;
width:20%;
height:auto;
}

}

/*----------------------------------------------------------------------------------------------------------------------#reserve----------*/

#reserve{
width:100%;
position: relative;
}

.box_reserve{
width:83.3%;
margin: 0 auto;
padding: 125px 0;
display: flex;
justify-content: space-between;
}

.box_reserve .ph{ width:60%; }

.box_reserve .ph img{
width:100%;
height: auto;
}

.box_reserve .txt{
width:46.6%;
margin-top:120px; 
margin-left: -6.6%;
padding: 55px 0 0 7.1%;
border-radius: 50px 0 0 0 ;
background-color:#edece6;
z-index: 1;
position: relative;
}

.box_reserve .txt .tit{
display: flex;
align-items: center;
}

.box_reserve .txt .tit h3{
font-weight: bold;
margin-left: 30px;
}

.box_reserve .wrap_link_arrow{ margin-top: 30px; }

.bg_reserve{
position: absolute;
z-index: -10;
top:0;
left:0;
width:41.5%;
height:100%;
background-color: #f6f6f3;
}

@media screen and (max-width:1100px){

.box_reserve{
width:83.3%;
padding: 100px 0 0 0;
display: block;
}

.box_reserve .ph{ width:100%; }

.box_reserve .txt{
width:90%;
margin-top:-50px; 
margin-left: 10%;
padding: 40px 0 60px 7.5%;
border-radius: 25px 0 0 0 ;
}

}

@media screen and (max-width:767px){

.box_reserve{
width:90%;
margin: 0 0 0 0;
padding: 60px 0;
}

.box_reserve .txt{ padding: 40px 0 0 7.5%; }

.box_reserve .txt .tit h3{ 
margin-left: 15px;
}

.box_reserve .txt p{ line-height: 1.8; }

.box_reserve .wrap_link_arrow{ margin-top: 20px; }

.bg_reserve{ display: none; }

}



/*----------------------------------------------------------------------------------------------------------------------#wrapper_all_cont----------*/

#wrapper_all_cont{
position:relative;
padding-bottom: 150px;
}

#wrapper_all_cont .bg_cont{
position: absolute;
z-index: -10;
top:20%;
right:0;
width:50%;
height:52%;
background-color: #f6f6f3;
}

@media screen and (max-width:1100px){

#wrapper_all_cont{
padding-bottom: 80px;
}

#wrapper_all_cont .bg_cont{
top:10%;
height:35%;
}

}

@media screen and (max-width:767px){

#wrapper_all_cont{
padding-bottom: 60px;
}

#wrapper_all_cont .bg_cont{
display: none;
}

}

/*----------------------------------------------------------------------------------------------------------------------#about----------*/



#about{ 
width:83.3%;
margin: 0 auto;
}

.box_slick{
position: relative;
width: 100%;
}

.box_slick .square{
width: 50%;
height: 85px;
position: absolute;
bottom:-1px;
left:0;
background-color:#edece6;
z-index: 5;
border-radius: 0 50px 0 0;
}

#about .slick01{
width:90%;
margin:0 0 0 10%;
position:relative;
}

#about .slick01 img{ 
width:100%;
height:auto;
}

#about .cont{ 
width:100%;
display: flex;
align-items: center;
margin-top: 20px;
}

#about .cont h2{ width:20%;}

#about .cont .txt{ width:60%;}

#about .cont .txt h3{ font-weight: bold; }

#about .cont .txt p{ margin-top: 10px; }

#about .cont .wrap_link_arrow{ 
margin-left: auto;
margin-top: 20px;
}


@media screen and (max-width:1100px){

#about{ margin: 0 auto; }

.box_slick .square{
width: 50%;
height: 50px;
border-radius: 0 25px 0 0;
}

#about .slick01{
width:100%;
margin:0 0 0 0;
}

#about .cont{ 
display: block;
margin-top: 20px;
}

#about .cont h2{ width:100%;}

#about .cont .txt{ width:100%;}

#about .cont .wrap_link_arrow{ 
margin-left: 0;
margin-top: 20px;
}

}

@media screen and (max-width:767px){

#about{ 
margin: 0 0 0 10%; 
width: 90%;
}

.box_slick .square{
margin-left: -1px;
height: 40px;
}

#about .cont{ 
width:90%;
margin: 0 0 0 0;
}

#about .cont h2{ width:100%;}

#about .cont .txt{ 
width:90%;
}

#about .cont .txt p{ line-height: 1.8; }

#about .cont .wrap_link_arrow{ 
margin-left: 0;
margin-top: 20px;
}

}



/*----------------------------------------------------------------------------------------------------------------------#service----------*/

#wrapper{
width:91.67%;
display: flex;
justify-content: space-between;
margin-top:135px;
}

#service{ width:45.45%; }

#service .ph img{
width:100%;
height: auto;
}

#service .txt{
width:80%;
margin-top: -75px;
margin-left: 20%;
padding: 75px 0 0 12.5%;
border-radius: 50px 0 0 0 ;
background-color:#edece6;
z-index: 1;
position: relative;
}

#service .tit{
display: flex;
align-items: center;
}

#service .tit h3{
font-weight: bold;
margin-left: 30px;
}

#service .wrap_link_arrow{
margin-top: 30px;
}

@media screen and (max-width:1100px){

#wrapper{
width:83.3%;
display: block;
margin:100px auto 0;
}

#service{ width:100%; }

#service .txt{
width:90%;
margin-top: -50px;
margin-left: 10%;
padding: 40px 0 0 7.5%;
border-radius: 25px 0 0 0 ;
}


}

@media screen and (max-width:767px){

#wrapper{
width:100%;
display: block;
margin:60px auto 0;
}

#service{ width:90%; }

#service .txt{
margin-left: 10.5%;
}

#service .txt p{
width:90%;
line-height: 1.8;
}

}


/*----------------------------------------------------------------------------------------------------------------------#online_store----------*/

#online_store{
width:45.45%;
margin-top: 100px;
}

#online_store .ph img{
width:100%;
height: auto;
}

#online_store .txt{
width:80%;
margin-top: -75px;
padding: 75px 0 0 0;
border-radius: 0 50px 0 0 ;
background-color:#edece6;
z-index: 1;
position: relative;
}


#online_store .tit h3{
font-weight: bold;
}

#online_store .txt p{
margin-top: 20px;
}

#online_store .wrap_link_arrow{
margin-top: 30px;
}


@media screen and (max-width:1100px){


#online_store{ 
width:100%;
}

#online_store .txt{
width:90%;
margin-top: -50px;
padding: 40px 0 0 0;
border-radius: 0 35px 0 0 ;
z-index: 1;
}

}

@media screen and (max-width:767px){


#online_store{ 
width:90%;
margin: 60px 0 0 10%;
}

#online_store .txt{
margin-left: -1px;
}

#online_store .txt p{
width:90%;
margin-top: 10px;
line-height: 1.8;
}

}


/*----------------------------------------------------------------------------------------------------------------------#large_img----------*/


#large_img{
width: 100%;
height: 44vw;
background: url(../images/top_btm_img.webp) no-repeat center center;
background-size:cover;
background-attachment: fixed;
}

@media screen and (max-width:1100px){

#large_img{
height: 50vw;
background-attachment: scroll;
}

}

@media screen and (max-width:767px){

#large_img{
height: 100vw;
}

}


/*----------------------------------------------------------------------------------------------------------------------共通要素----------*/

h2.tit_en_large{
font-size: 48px;
color:#279a49;
line-height: 1.6;
}


@media screen and (max-width:1100px){

h2.tit_en_large{ font-size: 40px; }

}


@media screen and (max-width:767px){

h2.tit_en_large{
font-size: 30px;
}

}