@charset "UTF-8";

/* 1: Base Style Setting
----------------------------------------------------------------------------------------------*/

/* Base Setting
==========================================================*/

body { font: 15px/2 "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",  Helvetica, Arial, sans-serif; 
	 margin:0; padding: 0; background-color:#fbf7ef; color:#78645a;  font-weight: 400;  letter-spacing:1.2px;  }

	 
a       { text-decoration: none;  }
a:hover { }
img { -ms-interpolation-mode: bicubic; max-width:100%; height:auto; }



/* main-layout
==========================================================*/

body {}



.flex{ display: flex; flex-wrap: wrap;}
.flex-sb{ display: flex; flex-wrap: wrap; justify-content: space-between; }


header { width: 100%; height: 90px; box-sizing: border-box; padding: 15px 15px 0; /* margin-bottom: -5px;*/
    position: fixed; top: 0; left: 0; z-index: 998; background-color:#fbf7ef; line-height: 0; }

.head-sns{ position: fixed; right: 30px; top: 23px; z-index: 999;}
.head-sns li{ margin-left: 14px;}
.head-sns li a{ padding: 10px; display: block;}
.head-sns li:first-child{ margin-left: 0;}

header.fixed{ height: 64px; padding: 10px 15px 0;  transition: .4s; }
header.fixed #headerlogo img{ max-width: 110px;  transition: .2s; }
header.fixed .head-sns{  top: 8px; transition: .4s; }


#Container {overflow: hidden; padding-top: 70px; }


@media screen and (max-width: 600px) {
header { padding: 10px 10px 0;  height: 80px; }
#Container {overflow: hidden; padding-top: 70px; }
.head-sns{ right: 12px; top: 20px; }
.head-sns li{ margin-left:4px; }
.head-sns li img{ max-width: 20px;}
header.fixed{ height: 56px; }
header.fixed #headerlogo img{ max-width: 90px;  }
header.fixed .head-sns{  top: 6px;  }
}	

@media screen and (max-width: 360px) {
.head-sns li img{ max-width: 18px;}
.head-sns li{ margin-left:0px; }
}	



footer { padding-top: 100px; padding-bottom: 40px;}
.footerInner{ }
.footerInner:before{  }
.ft-fl { width: 126px;}
.ft-fr { width: calc(100% - 174px);}
.ft-fr:before { position: absolute; content: ""; left: -5% ; left: 0% ; top: 10px; width: 100vw; /*height: 0.5px; background-color: #1ec664; */ height: 1px; background-color: #78645A;}
.ft-fr.flex-sb{ align-items: flex-end; padding-bottom: 10px; }
.ft-copy-in{ width: calc(100% - 120px); }
.ft-copy-in img{ max-width: 90%;}
.ft-backtop{ margin-right: -5px;}


@media screen and (max-width: 750px) {
    footer { padding-top: 50px;text-align: center; }
    .footerInner.flex-sb{}
    .ft-fl { width: 100%; padding-bottom: 20px;}
    .ft-fr { width: 100%; padding-top: 20px;}
    .ft-fr:before { left: -5% ; top: 0px;} 
    .ft-fr.flex-sb{ padding-bottom: 0px; }
    .ft-copy-in{ width: 100%; order: 2; }
    .ft-copy-in img{ max-width: 80%;}
    .ft-backtop{ width: 100%; margin-right: 0px; order: 1; }
}

.ft-snsInner{ margin-top: 135px; padding: 80px 0 0; border-top: 1px solid #78645A;}
.ft-snsInner .ft-sns-ttl{ margin-bottom: 40px;}
.ft-snsInner .flex{ justify-content: center; }
.ft-snsInner .flex li{ margin: 0 5px 0px; line-height: 1; }
@media screen and (max-width: 750px) {
.ft-snsInner{ margin-top: 70px; padding: 40px 0 0; border-top: 1px solid #78645A;}
.ft-snsInner .ft-sns-ttl{ margin: 0 auto 20px; max-width: 300px;}
    .ft-snsInner .flex li{ margin: 0 5% 10px; }
}


/* content
==========================================================*/





/*
#Container{ background: url(../images/main.jpg?a) no-repeat center center; background-size: cover; width: 100%; height: 100vh; position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; } 
.pages{ padding: 5%;}
.h1tt{ position:absolute; text-indent:-999em;  }

.logo{ margin-bottom: 60px;}
.readInner{ margin-bottom: 40px; }
.btn_map{}
.btn_press{ position: absolute; bottom: 40px; right: 40px;}
.btn_press a{ background: #0fcd77; color: #fff; line-height: 1; padding: 14px 17px; box-sizing: border-box;}



#mapwrap{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mapInner{ width: 100%; max-width: 1100px; margin: 0 auto; color: #0fcd77; box-sizing: border-box; padding: 3% 5%;}
.map-img{ line-height: 1; margin-bottom: 100px; }
.map-txt{ text-align: left; font-size: 1.2em;  }
*/

.mainvisual{ background: url(../images/main.jpg?a) no-repeat center center; background-size: cover; width: calc(100% - 40px); height: calc(100vh - 115px); position: relative;
 display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; margin: 20px; }


#indMainPlaybtn { cursor: pointer; position: absolute; bottom: 80px; z-index: 10; }
#indMainPlaybtn a span { position: absolute; top: 0; left: 50%; width: 20px; height: 35px; margin-left: -20px; border: 2px solid #fff; border-radius: 40px; box-sizing: border-box;}
#indMainPlaybtn a span::before { position: absolute; top: 10px; left: 50%; content: ''; width: 6px; height: 6px; margin-left: -3px; background-color: #fff; border-radius: 100%; -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; box-sizing: border-box; }
#indMainPlaybtn a span::after{ position: absolute; width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;  top: 40px; left: 50%; content: ''; margin-left: -4px; transform: rotate(45deg);}

@-webkit-keyframes sdb {
	0% {-webkit-transform: translate(0, 0); opacity: 0; }
	40% {opacity: 1; }
	80% {-webkit-transform: translate(0, 10px); opacity: 0; }
	100% {opacity: 0; }
}
@keyframes sdb {
	0% {transform: translate(0, 0); opacity: 0; }
	40% {opacity: 1; }
	80% {transform: translate(0, 10px); opacity: 0; }
	100% {opacity: 0; }
}


.wrap1100{ max-width: 1100px; margin: 0 auto; box-sizing: border-box; }
/*.main-contents{ max-width: 1100px; margin: 0 auto; padding: 30px 0 40px; box-sizing: border-box; }*/
.readInner { padding-top: 30px; }
.readInner .elm01{ margin: 0 -20px 35px;}
.readInner .elm02{ margin: 20px -20px 35px;}
.readInner .elm03{ padding-bottom: 35px;}


.takeoutInner{ box-sizing: border-box; padding: 75px; background-color: #fff; margin-top: 45px;}
.takeout-ttl{ margin-bottom: 30px;}
.takeoutInner .col-txt{ font-size: 1.4em; line-height: 1.5; margin-bottom: 70px;}
.service_opentxtInner{  }
.service_more_box{ margin: 0 auto;}
.service_more_box .elm01{ margin-bottom: 45px;}
.service_more_box .elm02{ margin-bottom: 57px;}
.service_more_box .elm03{ margin-bottom: 70px;}
.service_more{ }


@media screen and (max-width: 1200px) {
.takeoutInner .col-txt{ font-size: 1.3em; }
}
@media screen and (max-width: 1150px) {
.takeoutInner{ padding: 7% 5%; margin-top: 25px;}
.takeout-ttl{ margin-bottom: 20px;}
.takeoutInner .col-txt{ font-size: 1.7vw; margin-bottom: 50px;}
}

@media screen and (max-width: 900px) {
.wrap1100.takeout{ margin: 0 -5%;}
.takeoutInner{  margin-top: 20px;}
.takeout-ttl{ margin-bottom: 15px;}
.takeoutInner .col-txt{ font-size: 2vw; }
}

@media screen and (max-width: 750px) {
.takeoutInner .col-txt{ font-size: 0.86em; margin-bottom: 30px;}
.service_more_box { max-width: 450px;}
.service_more_box .elm01{ margin-bottom: 0px;}
.service_more_box .elm02{ margin-bottom: 30px;}
.service_more_box .elm03{ margin-bottom: 30px;}
}





.aboutWrap {}
.aboutWrap:after {
position: absolute; content: ""; left: 0; top: -75px;   padding: 75px 0 ; 
    width: 20px; height: 100%; background-color: #fbf7ef; z-index: 2;}
.aboutInner{ margin: 155px 0; position: relative; box-sizing: border-box;}
.aboutInner:before{ position: absolute; content: ""; right: 24.2% ; top: -75px; 
    width: 100vw; height: 100%; padding: 75px 0 ; background-color: #FFF; z-index: -1;}


.aboutInner .flex-sb{ padding-top: 50px; }
.aboutInner .flex-l{ width: 47.2%; letter-spacing:1.1px;  }
.aboutInner h3{ margin: 60px 0 20px;}

.aboutInner .flex-r{ width: 47.2%; }
    .about-img{ background: url(../images/aboutimg.jpg) no-repeat center center; background-size: cover; height: 87%; }


@media screen and (min-width: 1151px) and (max-width: 1200px) {
    .aboutInner { padding-left: 15px;}
}

@media screen and (max-width: 1200px) {
    .about-img { max-height: 66vw;}
}
@media screen and (max-width: 960px) {
    .aboutWrap:after { display: none;}
    .aboutInner .flex-sb{ }
    .aboutInner:before{ right: -5% ; }
    .aboutInner { margin-right: 5%;}
    .aboutInner .flex-l{ width: 100%; order: 2; }
    .aboutInner .flex-r{ width:70%; height: 60vw;  order: 1;  margin-bottom: 5%; }
    .about-img{ height: 100%; max-height: 100%; }
}
@media screen and (max-width: 750px) {
    
}

@media screen and (max-width: 600px) {
.aboutWrap:after {top: -50px;  padding: 50px 0 ; }
    .aboutInner{ margin: 100px 0; }
    .aboutInner .flex-r{ width: 100%; height: 90vw; }
    .about-img{ height: 100%; }
    .aboutInner:before{ top: -50px;  padding: 50px 0 ; }
    .aboutInner h2{ max-width: 76%;}
    .aboutInner h3{ max-width: 48%;}
    
    .aboutInner .flex-sb{ padding-top: 30px; }
}




.mapInner{ margin-bottom: 90px;}



.ft-Inner{ width: 100%; line-height: 1; }
.ft-Inner .fl-wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 30px;}
.ft-Inner .fl-wrap .fl-01{ width: 35.2%; }
.ft-Inner .fl-wrap .fl-01 .elm01{ margin-bottom: 40px; box-sizing: border-box; }
.ft-Inner .fl-wrap .fl-01 .elm02{ box-sizing: border-box; display: flex; max-width: 388px;  }
.ft-Inner .fl-wrap .fl-01 .loute1{width: 55.9%;}
.ft-Inner .fl-wrap .fl-01 .loute2{width: 44.1%;}
.ft-Inner .fl-wrap .fl-02{ width: 50.1%; padding-left: 5.5%; padding-right: 5%; box-sizing: border-box; line-height: 0; }
.ft-Inner .fl-wrap .fl-03{ width: 14.7%; box-sizing: border-box; }
.ft-copy{ max-width: 40%; }



/* 
-------------------*/
.sp-hide { display:block;}
.sp-show,
.sp-show-inline{ display: none;}


@media screen and (max-width: 1150px) {
.wrap1100{ padding: 0px 5% 0px; }
.readInner .elm01{ margin: 0 -1.6% 35px;}
.readInner .elm02{ margin: 0 -1.6% 35px;}
.ft-Inner .fl-wrap .fl-01 .elm01{ margin-bottom: 9%;}
}	


@media screen and (max-width: 900px) {
.ft-Inner .fl-wrap{ padding-bottom: 30px;}
.ft-Inner .fl-wrap .fl-01{ width: 45%; }
.ft-Inner .fl-wrap .fl-02{ width: 47.8%; padding: 0%; box-sizing: border-box; }
.ft-Inner .fl-wrap .fl-03{ width: 100%; box-sizing: border-box; text-align: center; padding-top: 30px;}
.ft-copy{ max-width: 100%;box-sizing: border-box; text-align: center; }
    .ft-copy img{ width: 100%; max-width: 300px;}
}	



@media screen and (max-width: 750px) {
.sp-hide{display: none;}
.sp-show { display: block;}
.sp-show-inline{ display:inline;}
body{font-size: 14px; }
    
    
}	

@media screen and (max-width: 600px) {
.mainvisual{ width: calc(100% - 20px); height: calc(100vh - 90px); margin: 10px; }
    
.mapInner{ margin-bottom: 12%;}
.ft-Inner .fl-wrap{ padding-bottom: 30px;}
.ft-Inner .fl-wrap .fl-01{ width: 100%; }
.ft-Inner .fl-wrap .fl-02{ width: 100%; padding-top: 8%; }
.ft-Inner .fl-wrap .fl-03{ width: 100%; padding-top: 8%;}
.ft-Inner .fl-wrap .fl-01 .elm01{ margin-bottom: 4.5%;}
.ft-copy{ max-width: 100%; padding: 0 10%; }
    
}	
@media screen and (max-width: 500px) {
.ft-Inner .fl-wrap .fl-01{ padding-right: 2%; }
.ft-Inner .fl-wrap .fl-02{ padding-right: 2%; }
}	

/* height
-------------------*/
@media screen and (max-height: 1000px) {

}


/* 
-------------------*/

/* 
----------------------------------------------------------------------------------------------*/