@charset "UTF-8";


/* common
==========================================================*/

html { font-size: 14px; }
body { line-height: 2; font-family: 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; margin:0; padding: 0; color:#000; -webkit-text-size-adjust: 100%; letter-spacing: 0.08em; }
@media screen and (max-width: 750px){ 
    body { line-height: 1.8; }
}

a { text-decoration: none; color: #000; outline: none; -webkit-transition: all .3s; transition: all .3s;}
a *,
:after,
:before,
.trans03{-webkit-transition: all .3s; transition: all .3s; }
a:hover{ text-decoration: none; -webkit-transition: all .3s; transition: all .3s;}

img { -ms-interpolation-mode: bicubic; height: auto; max-width: 100%; height: auto; vertical-align: bottom; }
.wide { width: 100%; height: auto; }
video { vertical-align: bottom; }
:focus { outline: 0; }
* { box-sizing: border-box}
.txl { text-align: left !important; }

.tellink { pointer-events: none;}
.nolink { opacity: 0.5; pointer-events: none;}
.show-750{ display: none;}
@media screen and (max-width: 750px){
    .tellink { pointer-events: auto;}
    .show-750 { display: block;}
    .hide-750 { display: none}
    .sp-br-none br { display: none;}
}

a.txtlink { text-decoration: underline}
a.txtlink:hover { text-decoration: none}
.txtbreak { word-break: break-all;}

.flex { display: flex; flex-wrap: wrap; }
.flex-nowrap { display: flex; }
.flex-jcs {display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex-jca { display: flex; justify-content: space-around; flex-wrap: wrap; }
.flex-jce { display: flex; justify-content: flex-end; flex-wrap: wrap; }
.flex-center {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.flex-aic { display: flex; align-items: center; flex-wrap: wrap; }
.flex-aie { display: flex; align-items: flex-end; flex-wrap: wrap; }
.flex-jcc { display: flex; justify-content: center; flex-wrap: wrap; }
.flex-fdc { display: flex; flex-direction: column;}

.pore { position: relative;}
.poab { position: absolute;}

.centerposi,
.centerposi-pc{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); }
.centertate,
.centertate-pc{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); /* Safari用 */ transform: translateY(-50%); } 
.centeryoko,
.centeryoko-pc{ position: absolute; left: 50%; -webkit-transform: translateX(-50%); /* Safari用 */ transform: translateX(-50%); }
@media screen and (max-width: 750px){
    .centeryoko-pc{ position:inherit; left: 0; -webkit-transform: translateX(0); transform: translateX(0); }  
    .centeryoko-sp{ position: absolute; left: 50%; -webkit-transform: translateX(-50%); /* Safari用 */ transform: translateX(-50%); }
}

.lh1 { line-height: 1}
.lh16 { line-height: 1.6; }
.ls0 { letter-spacing: 0; }

#wrapper { width: 100%; position: relative; overflow: hidden;}

.after,
.before{ position: relative;} 
.after:after,
.before:before { content: ""; position: absolute; }
.sticky { position: sticky; }

a.blank { display: inline-block; padding-right: ;}

.hoverbigimg { width: 100%; overflow: hidden; }
.hoverbigimg img { transition: all .6s ease-out; }
a:hover .hoverbigimg img { transform: scale(1.1); }



/*base setting*/

.fs-mincyo { font-family: 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
.fs-gothic { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;  }
.EBGaramond { font-family: 'Cormorant Garamond', serif; }
.WorkSans {font-family: 'Work Sans', sans-serif;}

.fs12{ font-size: calc(12rem / 14); }
.fs14{ font-size: calc(14rem / 14); }
.fs16{ font-size: calc(16rem / 14); }
.fs20{ font-size: calc(20rem / 14); }
.fs21{ font-size: calc(21rem / 14); }
.fs24{ font-size: calc(24rem / 14); }
.fs26{ font-size: calc(26rem / 14); }
.fs32{ font-size: calc(32rem / 14); }
.fs42{ font-size: calc(42rem / 14); }
@media screen and (max-width: 1000px) {
.fs32{ font-size: calc(32rem / 16); }
.fs42{ font-size: calc(42rem / 16); }
}   
@media screen and (max-width: 750px) {
    .fs12{ font-size: calc((12 / 375) * 100vw); }
    .fs14{ font-size: calc((13 / 375) * 100vw); }
    .fs16{ font-size: calc((14 / 375) * 100vw); }
    .fs20{ font-size: calc((15 / 375) * 100vw); }
    .fs21{ font-size: calc((17 / 375) * 100vw); }
    .fs24{ font-size: calc((17 / 375) * 100vw); }
    .fs26{ font-size: calc((17 / 375) * 100vw); }
    .fs32{ font-size: calc((21 / 375) * 100vw); }
    .fs42{ font-size: calc((26 / 375) * 100vw); }
}   

.fc-g,
.fc-g a{ color: #198E65; }
.fc-b { color: #000; }
.fc-w { color: #fff; }

.bg-lg{ background: #F7FCFA;}
.bg-be{ background: #F9F0E9;}
.bg-pi{ background: #FFEEED;}
.bg-g{ background: #f5f5f5;}

.inner1400max{ max-width: 1400px; width: 100%; margin: 0 auto; }
.inner620{ max-width: 620px; width: calc(100% - 100px); margin: 0 auto; }
.inner1160{ max-width: 1160px; width: calc(100% - 100px); margin: 0 auto; }
.inner1300{ max-width: 1300px; width: calc(100% - 100px); margin: 0 auto; }
@media screen and (max-width: 750px){
    .inner620,
    .inner1160,
    .inner1300{ width: calc(100% - 60px); }
}


/* header
==========================================================*/

.header { width: 30%; min-width: 350px; height: 100px; background: #fff; position: fixed; top: 0; right: 0; z-index: 99; }
.headlogo {}
.menuinner { height: 100%; padding: 0 8% 0 13%; }
.menuinhead { height: 100px; }
.gnavul{ margin-bottom: 40px;}
.gnavul li{}
.gnavul li a { padding: 10px 0; display: block;}
.headlogo2{ max-width: 310px; width: calc(100% - 40px); }
.headcopy{ padding: 20px 0 40px; font-size: 13px;}
@media screen and (max-width: 1600px) {
    .headcopy { font-size: 0.75vw;}
}
@media screen and (max-width: 750px) {
    .header { width: 100%; height: 50px; min-width: auto;}
    .headlogo { width: 140px; margin-bottom: 6px; }
    .menuinner { padding: 0; justify-content: center; }
    .menuinhead { height: 50px; border-bottom: 1px solid #AFD7C8; display: flex; justify-content: center;}
    .gnavul{ margin: 30px 0 40px; text-align: center;}
    .gnavul li{}
    .gnavul li a { padding: 10px 0; display: block;}
    .headlogo2{ margin: 0 auto; }
    .headcopy{ font-size: 2.5vw; text-align: center; font-size: 10px;}
}

#menu { width: 30%; min-width: 350px; max-height: 100vh; top: 0; right: 0; display: none; position: fixed; z-index: 9999; overflow: hidden; overflow-y: hidden; overflow-y: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; background: #e1f0ea; }
.navInner { width: 100px; height: 100px; position: fixed; top: 0; right: 0; z-index: 999999;}
.menu-trigger { width: 20px; height:20px; top: calc(50% - 10px); left: calc(50% - 10px); line-height: inherit; cursor: pointer; position: relative; display: inline-block; transition: all .4s; box-sizing: border-box; }
.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 2px; background-color: #198E65 !important;}
.menu-trigger span:nth-of-type(1){top:0}
.menu-trigger span:nth-of-type(2){top: 9px}
.menu-trigger span:nth-of-type(3){ bottom: 0}
.navInner:hover span:nth-of-type(1){top: 2px}
.navInner:hover span:nth-of-type(3){ bottom: 2px}
.menu-trigger.active span:nth-of-type(1){ transform:translateY(10px) rotate(-45deg); top: -5px;}
.menu-trigger.active span:nth-of-type(2){display: none;}
.menu-trigger.active span:nth-of-type(3){ transform:translateY(-10px) rotate(45deg); top:15px}
.menu-trigger p { white-space: nowrap; bottom: -18px; }
@media screen and (max-width: 750px) {
    #menu { width: 100%; min-width: inherit; }
    .navInner { width: 50px; height: 50px;}
    .menu-trigger { width: 12px; height: 12px; top: calc(50% - 12px); left: calc(50% - 6px); }
    .menu-trigger span:nth-of-type(1){top:0}
    .menu-trigger span:nth-of-type(2){top: 5px}
    .menu-trigger span:nth-of-type(3){ bottom: 0}
    .navInner:hover span:nth-of-type(1){top: 1px}
    .navInner:hover span:nth-of-type(3){ bottom: 1px}
    .menu-trigger.active span:nth-of-type(1){ transform:translateY(10px) rotate(-45deg); top: -5px;}
    .menu-trigger.active span:nth-of-type(3){ transform:translateY(-10px) rotate(45deg); top:15px}
    .menu-trigger p { white-space: nowrap; bottom: -18px; }   
}   
    

.footer{ padding: 30px 50px 60px; }
.footlogo{ width: 260px;}
.foot-r{ right: 60px; top: 0; }
.footlogo2{ width: 310px;}
.copy{ margin-top: 15px; font-size: 13px;}
@media screen and (max-width: 1200px) {
    .footer { justify-content: flex-start !important;}
}
@media screen and (max-width: 750px) {
    .footer{ padding: 30px 10px; display: flex; flex-direction: column; align-items: center;}
    .footlogo{ width: calc(170 / 375 * 100vw); margin-bottom: calc(30 / 375 * 100vw);}
    .foot-r{ position: inherit; right: 0; top: 0;display: flex; flex-direction: column; align-items: center;  }
    .footlogo2{ width: calc(240 / 375 * 100vw);}
    .copy{ margin-top: 15px; font-size: 10px; }
}


/* index
==========================================================*/

body{}
#wrapper{}

#index-mainwrap{ width: 70%; height: 100%; }
#index-main{ height: calc(100vh - 200px);  height: calc(100dvh - 200px); }
.index-main-ttl{ position: absolute; bottom: 40px;left:10%; box-sizing: border-box;  padding-right: 160px;}
.index-main-subttl{ padding-left: 10%; padding-top: 45px; box-sizing: border-box; padding-right: 150px; }
.slidecountbox{ position: absolute; top: 15px ; right: 40px; font-size: 42px; font-family: serif ;}
.slidecount{ display: block;}
.slidecounttotall{ display: block; padding-top: 40px; padding-left: 20px; }
.slidecounttotall::before{top:55px;left:-15px;position:absolute;height:1px;width:50px;background:#198e65;display:block;content:'';cursor:pointer; transform:skewY(-45deg)}

#index-subimgwrap{ width: 30%; margin-top: 100px; height: calc(100vh - 100px); height: calc(100dvh - 100px);}
#index-subimgwrap ul{ height: 100%;}
li.subimg01 { width: calc(100% + 100px);  height: 41.7%; background: url(../images/main_subimg01.jpg) 60% center no-repeat; background-size: cover;  position: relative; z-index: 9; margin-left: -100px;}
li.subimg02 { width: 100%;  height: 58.3%; background: url(../images/main_subimg02.jpg) center center no-repeat; background-size: cover; }

@media screen and (max-width: 960px) {
    .index-main-ttl{ left:8%; padding-right: 20vw;}
    .index-main-subttl{ padding-left: 8%; padding-right: 18vw;  }
    .slidecountbox{ font-size: 4vw; }
    .slidecounttotall{  padding-top: 4vw; padding-left: 2vw; }
    .slidecounttotall::before{top:5.5vw;left:-2vw;position:absolute;height:1px;width:1.5em;background:#198e65;display:block;content:'';cursor:pointer; transform:skewY(-45deg)}
}
@media screen and (max-width: 750px) {
    .index-main-ttl{  bottom: 20px;  left:6%; padding-right: 30vw;}
    .index-main-subttl{ padding-top:22px; padding-left: 6%; padding-right: 28vw;  }
    .slidecountbox{ font-size: 6vw; top: 10px ; right: 5%;}
    .slidecounttotall{  padding-top: 6vw; padding-left: 3.5vw; }
    .slidecounttotall::before{top:7.5vw;left:-2.5vw;width:1.5em;}

    #index-mainwrap{ margin-top: 50px; width: 100%;  height: calc(60vh - 50px); height: calc(60dvh - 50px);}
    #index-main{  height: 100%; }
   
    #index-subimgwrap{ width: 100%; margin-top:0px; height: calc(40vh - 90px);height: calc(40dvh - 90px);}
    #index-subimgwrap ul{ height: 100%;}
    li.subimg01 { width: 60%;  height: 100%; margin-left: 0px;order: 2; background-position: 70% 50%;}
    li.subimg02 { width: 40%;  height: 100%; order: 1;}

}

.mid{ padding-bottom: 30px; margin-bottom: 70px; line-height: 1;}
.mid:after{ width: 50vw; height: 1px; background: #DCECE5; right: 0; bottom: 0; }
.mid p{}
@media screen and (max-width: 750px) {
    .mid{ padding-bottom: 15px; margin-bottom: 30px;}
    .mid:after{ width: 100vw; right: 0; }
}  

.aboutwrap{ padding-top: 100px;}
.aboutwrap .inner1400max {}
.about01.flex{}
.about-l{ width: calc(640 / 1400 * 100%); padding-left: 100px; }
.about-limg{ margin-bottom: -40px;}
.about-limg div{ margin-bottom: 40px;}
.about-r{ width: calc(760 / 1400 * 100%);  }
.about-rtxt { margin-bottom: 90px; padding: 0 100px 0 90px;}
.about-r01txt{ margin-bottom: 90px;}
.about-r01txt .fs32{ margin-bottom: 40px;}
@media screen and (min-width: 1401px) {
    .about-r01txt .fs16{ white-space: nowrap;}
}
.about-r02txt{ padding-left: 110px; position: relative;}
.about-r02txt > .fs16{ top: 0; left: 0; position: absolute; }
.about-r02txt > .fs26{ margin-bottom: 30px;}
.about-r02txt > .fs14{}
.about-rimg{ }
.about-rimg div:nth-child(2) { display: none}
.about02{ padding-top: 140px;}
.about02mid { padding-left: 100px; margin-bottom: 40px; }
.about02-l{ }
.about02-r{ margin-top: -80px; }
.about02-rimg div:nth-child(2){ display: none}
.about02img{ padding: 80px 40px 0 100px; }
.about02img div:nth-child(1){ width: calc(740 / 1400 * 100%);}
.about02img div:nth-child(2){ width: calc(570 / 1400 * 100%);}
@media screen and (max-width: 1400px) {
    .about-l,
    .about02mid{ padding-left: 50px; }
    .about-rtxt { padding: 0 50px 0 45px;}
    .about-r01txt .fs16 br { display: none}
    .aboutwrap .about-r02txt{ padding-left: 80px; }
    .about-r02txt > .fs26 br { display: none}
    .about-rimg div:nth-child(1) { display: none}
    .about-rimg div:nth-child(2) { padding-left:120px; display: block;}
    .about02img{ padding: 80px 20px 0 50px; }
}
@media screen and (max-width: 1300px) {
    .about02-r{ margin-top: 0; }
}  
@media screen and (max-width: 1000px) {
    .about-r01txt .fs32 br { display: none }
    .aboutwrap .about-r02txt{ padding-left: 0; }
    .about-r02txt > .fs16{ margin-bottom: 20px; position: inherit; }
    .about-rimg div:nth-child(2) { padding-left: 40px; }
    .about02-rimg div:nth-child(1){ display: none; }
    .about02-rimg div:nth-child(2){ display: block; }
}
@media screen and (max-width: 750px) {
    .aboutwrap{ padding-top: 50px;}
    .about-l{ width: 100%; padding: 0 30px; }
    .about01 .about-l { display: none}
    .about-limg-sp { width: calc(100% - 30px); margin-left: -30px; margin-bottom: 30px;}
    .about-r{ width: 100%;  }
    .about-rtxt { margin-bottom: 45px; padding: 0 30px 0 30px;}
    .about-r01txt{ margin-bottom: 45px;}
    .about-r01txt .fs32{ margin-bottom: 15px;}
    .about-r02txt > .fs26{ margin-bottom: 15px;}
    .about02{ padding-top: 70px;}
    .about02mid { padding-left: 30px; margin-bottom: 20px; }
    .about02lr { flex-direction: column-reverse;}
    .about02-l{ padding-right: 30px; }
    .about02-r{ margin-top: 30px; }
    .about02img{ margin-top: 50px; padding: 0; }
    .about02img div:nth-child(1){ width: 100%;}
    .about02img div:nth-child(2){ display: none} 
}  
  
.nutwrap{ padding-top: 180px; }
.nuttxt{ margin-bottom: 80px;}
.nuttxt .fs32{ margin-bottom: 40px;}
.nuttxt .fs14{ margin-bottom: 30px; max-width: 740px;}
.nuttxt .fs12{}
.nutgraph{}
.nutgraph div {}
.nutgraph .poab{ width: calc(1237 / 1160 * 100%); right: 0; top: 0; }
@media screen and (max-width: 1400px) {
    .nutgraph{ margin-left: 6vw;}
}
@media screen and (max-width: 1100px) {
    .nuttxt .fs32 br { display: none}
}
@media screen and (max-width: 750px) {
    .nutwrap{ padding-top: 60px; }
    .nuttxt{ margin-bottom: 40px;}
    .nuttxt .fs32{ margin-bottom: 20px; }
    .nuttxt .fs14{ margin-bottom: 15px; }
    .nuttxt .fs12{}
    .nutgraph-sp { width: calc(100vw - 30px); overflow: scroll;}
    .nutgraph-sp div { width: 600px;}
}   

.recipewrap{ padding-top: 140px;}
.recipeul{ margin-left: -10px; margin-bottom: -50px;}
.recipeul li{ width: calc(25% - 10px); margin-left: 10px; margin-bottom: 50px;}
.recipeul li div { margin-bottom: 10px;}
.recipeul li p{}
@media screen and (max-width: 1100px) {
    .recipeul li{ width: calc(100% / 3 - 10px);}
}
@media screen and (max-width: 750px) {
    .recipewrap{ padding-top: 40px;}
    .recipeul{ margin-left: -10px; margin-bottom: -20px;}
    .recipeul li{ width: calc(50% - 10px); margin-left: 10px; margin-bottom: 15px;}
    .recipeul li div { margin-bottom: 5px;}
}


.linewrap{ padding-top: 250px;}
@media screen and (min-width: 1301px) {
    .linewrap h2.fs32{ white-space: nowrap;}
}
.lineul{}
.lineul li { padding: 50px 0; }
.lineul-r { padding-top: 50px; }
.lineul-rtxt{}
.lineul-rtxt .fs26{ margin-bottom: 40px; }
.lineul-rtxt .fs24{ }
.lineul-rtxt .fs16.after{ padding-bottom: 20px; margin-bottom: 20px; }
.lineul-rtxt .fs16:after{ width: 50vw; height: 1px; background: #ccc; bottom: 0; left: 0; }
@media screen and (min-width: 1201px) {
    .lineul-rtxt .fs14{ white-space: nowrap; }
}
@media screen and (max-width: 1300px) {
    .linewrap h2.fs32 br { display: none}
}   
@media screen and (max-width: 1200px) {
    .lineul-r { padding-top: 0; }
    .linewrap .about-r02txt { padding-left: 0; }
    .linewrap .about-r02txt > .fs16 { margin-bottom: 20px; position: inherit;}
    .lineul-rtxt .fs14 br{ display: none}
}
@media screen and (max-width: 1000px) {   
    .lineul-rtxt .fs26 br { display: none}
}
@media screen and (max-width: 750px) {
    .linewrap{ padding-top: 60px; }
    .lineul{}
    .lineul li { padding: 30px 0 0; }
    .lineul-r { padding-top: 40px; }
    .lineul-rtxt{}
    .lineul-rtxt .fs26{ margin-bottom: 30px; }
    .lineul-rtxt .fs24{ }
    .lineul-rtxt .fs16.after{ padding-bottom: 15px; margin-bottom: 20px; }
    .lineul-rtxt .fs16:after{ width: 100vw; }
    .linewrap .about-r02txt > .fs16 { margin-bottom: 15px;}
}




/* contact
==========================================================*/

input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.contactwrap { padding: 100px 0; }
.indcontactttl { letter-spacing: 0.04em; text-align: center; margin-bottom: 30px; }
.indcontacttxt { text-align: center; margin: 30px 0; margin-bottom: 70px; letter-spacing: 0.05em;}
.indcontacttxt span { color: #ea5e1a;}
.formwrap .col-l, .formwrap .col-r { width: calc(50% - 4px);}
.formwrap .col-l.juusho input { margin-bottom: 30px;}
.formmid { letter-spacing: 0.15em; margin-bottom: 10px;}
.formmid span { color: #ea5e1a;}
.formwrap input, .formwrap select { width: 100%; height: 90px; border: none; background-color: #fff; border-radius: 5px; font-size: 16px; letter-spacing: 0.15em; box-sizing: border-box; padding: 0 30px; margin-bottom: 40px;}
.formwrap textarea { width: 100%; padding: 30px; border: none; border-radius: 5px; font-size: 16px; letter-spacing: 0.15em; height: 385px; box-sizing: border-box; margin-bottom: 70px; background-color: #fff;}
::placeholder { color: #ccc;}
.error_box { display: none; color: #f00; border: 1px solid #f00; padding: 20px; margin-bottom: 40px;}
.formwrap input[type=submit] { width: 420px; height: 95px; margin: 0 auto; cursor: pointer; color: #fff; background-color: #198e65; font-size: 23px; -webkit-transition: all .3s; transition: all .3s; border: none; display: block; line-height: 90px; text-align: center; letter-spacing: 0.1em;}

@media screen and (max-width: 750px) {
    .contactwrap { padding: 70px 0; }
    .indcontacttxt { margin-top: 20px; margin-bottom: 50px; }
    .formwrap .col-l, .formwrap .col-r { width: 100%;}
    .formwrap .col-l.juusho { width: 50%;}
    .formwrap .col-l.juusho input { margin-bottom: 10px;}
    .formwrap input, .formwrap select { height: 50px; font-size: 15px; padding: 0 20px; margin-bottom: 30px;}
    .formwrap textarea { margin-bottom: 40px; padding: 20px; height: 200px; font-size: 15px; box-sizing: border-box;}
    .formwrap input[type=submit] { width: 200px; height: 60px; font-size: 18px; line-height: 60px;}
}

/* btn
==========================================================*/
a.link-btn  {
	overflow: hidden;
	width: 100%;
    max-width: 340px;
	margin: 30px 0;
	display: block;
	position: relative;
	z-index: 100;
	text-align:center;
	border: #198e65 1px solid;
	color: #198e65;
	font-size: 14px;
    font-weight: bold;
	text-decoration:none;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px; 
	padding: 13px 15px;
	box-sizing: border-box;
}
a:hover.link-btn  {
	color: #fff;
	background-color: #198e65;
}
a:before.link-btn  {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 25px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left: 5px solid #666;
}