@charset "utf-8";

.bold { font-weight:bold;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width:24px; height:21px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:1px; background-color:#fff;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:10px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity:0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}

* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { font-family:"ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif; text-align: center; line-height:1.7; color:#333; letter-spacing:0.1em; background: #fff;}
/* font読み込み後に表示 
html #cover{
    visibility: hidden;
}
html.wf-active #cover, html.wfno-load #cover{
    visibility: visible;
}
*/
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
svg{ border:none; vertical-align:middle; max-width:100%;}
svg{ width:auto\9; height:auto\9;}

a{ text-decoration: none; color:#333;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}

.mincho{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.abril-fatface-regular {font-family: "Abril Fatface", serif; font-weight: 400; font-style: normal;}

.mt1rem{ margin-top:1rem;}
.mt2rem{ margin-top:2rem;}
.mt4rem{ margin-top:4rem;}
.mt8rem{ margin-top:8rem;}

.mb1rem{ margin-bottom:1rem;}
.mb2rem{ margin-bottom:2rem;}
.mb4rem{ margin-bottom:4rem;}
.mb8rem{ margin-bottom:8rem;}

.pt1rem{ padding-top:1rem;}
.pt2rem{ padding-top:2rem;}
.pt4rem{ padding-top:4rem;}
.pt8rem{ padding-top:8rem;}

.pb1rem{ padding-bottom:1rem;}
.pb2rem{ padding-bottom:2rem;}
.pb4rem{ padding-bottom:4rem;}
.pb8rem{ padding-bottom:8rem;}


#teaser{ position: relative; width:100%; height:calc(100vh - 10rem); overflow:hidden; background:#fff;}
.teaserInner{ position:absolute; top:40%; left:50%; transform: translate(-50%,-50%);}
.teaserInner h1 img{ width:auto; height:4rem;}
.teaserCompany{ font-size:0.8rem; margin:1rem auto 0;}
.teaserBusiness{ font-size:0.8rem; margin:0 auto 2rem;}

.esWrapper{position: absolute; bottom: 2rem; left:50%; transform: translate(-50%,0); width:380px; margin:0 auto;}
.esBox{ display:flex; justify-content: space-between; align-items:center; }
.esBox > div{ text-align: left;}
.esBox img{width:auto; height:4rem;}
.esBox p{ font-size:0.8rem; color:#40220f;}
.esBox p a{ text-decoration: underline;}
.esBox p a:hover{ text-decoration: none;}

.pcOnly{}
.spOnly{ display: none;}

@media only screen and (max-width : 800px) {
.esWrapper{ width:260px;}
.teaserInner h1 img{ width:240px; height:auto;}
.pcOnly{ display:none;}
.spOnly{ display:block;}
}


#loading{ position:fixed; top:0; left:0; width:100%; height:100vh; z-index:9999; background:#fff;}
#loading::before{ content:""; position:absolute; top:0 ;left:0; width:100%; height:100%; background: url(img/logo.svg) center 40% no-repeat; background-size:200px; animation: fadeInOut 1.5s ease-in-out forwards;}

@keyframes fadeInOut {
  0% { opacity:1;}
  33% { opacity:1;}
  100% { opacity:0;}
}

#headerWrapper{ position:fixed; top:0; left:0; width:100%; z-index:9900;}
#headerInner{ max-width:calc(960px + 2rem); max-width:none; width:100%; height:6rem; margin:0 auto; padding:1rem 2rem 1rem; text-align:left; position:relative;}
#headerInner h1 img{ width:auto; height:10rem;}

#gNav{ position: absolute; top:2rem; right:2rem;}
#gNav > li{ display:inline-block; padding:0 0 0 2rem;}
#gNav > li a{font-family: "Abril Fatface", serif; font-weight: 400; font-style: normal; color:#000; font-size:1.0rem; line-height:1;}


.mainWrapper{ margin:12rem auto 0; background:url(img/main-1920.jpg) center bottom no-repeat;  background-size:auto 680px; max-width:1440px; height:680px; position:relative;}
.mainCatch{ position:absolute; top:20%; left:50%; transform: translate(-50%,0); width:420px;}
.mainCopy{ position:absolute; top:50%; left:50%; transform: translate(4rem,0); color:#fff; font-weight: bold; text-align: left; font-size:1.6rem; line-height:2.0;}
.mainCopy span{ opacity:0; transform: translate(-1rem,0); display:inline-block;}
.mainCopy span:nth-of-type(1).onAnime{ animation: leftSlide .5s ease-in forwards; animation-delay:0;}
.mainCopy span:nth-of-type(2).onAnime{ animation: leftSlide .5s ease-in forwards; animation-delay:.4s;}
.mainCopy span:nth-of-type(3).onAnime{ animation: leftSlide .5s ease-in forwards; animation-delay:.8s;}
@keyframes leftSlide {
  0% { opacity:0; transform: translate(-1rem,0);}
  100% { opacity:1; transform: translate(0,0);}
}


/* 福牛ロゴアニメーション */
.fukuushi-logo .fukuushi-path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.fukuushi-logo .fukuushi-path.onAnime {
  animation: drawLine 4s ease-in-out forwards, fillColor 1.0s ease-in-out 1.0s forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillColor {
  from {
    fill: transparent;
  }
  to {
    fill: #fff;
  }
}


#story{ padding-top:4rem; margin-top:-4rem;}
#about{ padding-top:4rem; margin-top:-4rem;}
#project{ padding-top:4rem; margin-top:-4rem;}
#store{ padding-top:4rem; margin-top:-4rem;}
#farm{ padding-top:4rem; margin-top:-4rem;}

@media only screen and (max-width : 800px) {
#loading::before{ background-size:120px;}
#gNav{ display:none;}
#headerWrapper{ position:relative;}
#headerInner{ height:calc(96px + 2rem); padding:1rem 1rem 1rem;}
#headerInner h1 img{ height:6rem;}

.mainWrapper{ margin:0 auto 0; background:url(img/main-960.jpg) center bottom no-repeat;  background-size:auto 480px; height:480px;}
.mainCatch{ top:1rem; width:280px;}
.mainCopy{ top:calc(135px + 1rem); transform: translate(-8rem,0); font-size:1.0rem; width:auto;white-space: nowrap;}
}


.secTitle{font-family: "Abril Fatface", serif; font-weight: 400; font-style: normal; color:#000; font-size:2.4rem; line-height:1; text-align: left;}
.videoWrapper{ display:flex; justify-content: space-between; gap:4rem; max-width: 1000px; margin:8rem auto;}
.videoBtn{ background:#000; padding:1rem 1rem; border-radius:8px; position: relative;}
.videoBtn::after {
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%; background:rgba(0, 0, 0, 0.5) url(img/play_btn.svg) center center no-repeat; background-size:100px; border-radius:8px;
}


.secWrapper{ margin:8rem 0 8rem;}

.designFlexWrapper{display:flex; justify-content: space-between; gap:4rem; max-width: 1000px; margin:0 auto 2rem;}
.designFlexWrapper div{ text-align: left;}
.w30{ flex-basis:30%;}
.w70{ flex-basis:70%;}

.lineBlock{ padding:4rem 0 4rem 5rem; position:relative; margin:2rem auto;}
.lineBlock::after{ content: ""; height:100%; width:1px; background:#333; position:absolute; bottom:0; left:3rem;}
.textBlock{ max-width: 1000px; margin:2rem auto 4rem; text-align: left;}
.textBlock p{ margin:2rem 0 0;}
.note{ font-size:0.8rem;}

.photoBlock{ max-width: 1000px; margin:0 auto 0; text-align: left; display:flex; justify-content: space-between; gap:2rem}
.photoBlock > div{ flex-basis:calc(50% - 1rem);}
.photoBlock > div p{ margin:2rem 0 0;}

@media only screen and (max-width : 800px) {
.secTitle{font-size:1.6rem;letter-spacing:0;}
.videoWrapper{ flex-direction: column; gap:2rem; margin:4rem auto; padding:0 1rem;}

.secWrapper{ margin:4rem 0 4rem;}

.designFlexWrapper{ flex-direction: column;padding: 0 1rem; gap:1rem; margin:0 auto 2rem;}
.lineBlock{ padding:1rem 0 1rem 5rem; margin:1rem auto;}
.lineBlock img{ height:96px; width:auto;}
.textBlock{ margin:1rem auto 2rem; padding:0 1rem; font-size:0.8rem;}
.textBlock p{ margin:1rem 0 0;}
.photoBlock{ flex-direction: column; gap:1rem; padding:0 1rem;}
.photoBlock > div{ flex-basis:auto;}
.photoBlock > div p{ margin:1rem 0 0; font-size:0.8rem;}
}




.linkBlock{ max-width: 1000px; margin:0 auto 0; text-align: left; display:flex; justify-content: space-between; gap:2rem; border-top:1px solid #333; padding-top:4rem; border-bottom:1px solid #333; padding-bottom:4rem;}
.linkBlock > div{ flex-basis:calc(50% - 1rem); text-align: center;}
.linkBlock > div a img{ height:6rem; width:auto;}
.linkBlock > div p{ margin:2rem auto 0; font-size: 0.8rem;}

.sustainableBg{background:url(img/sustainable_bg--pc.jpg) center bottom no-repeat;  background-size:auto 680px; max-width:1440px; height:680px; position:relative; z-index:-1; margin:0 auto 0;}
.subTitle{ font-weight: bold; font-size:1.6rem; margin:0 0 1rem;}

.saitofarmLogo{margin:0 0 1rem;}
.saitofarmLogo img{ height:8rem; width:auto;}

.aboutImageText img{ height:80px; width:auto;}
.projectImageText img{ height:80px; width:auto;}
.farmImageText img{ height:120px; width:auto;}

.footerWrapper{ padding:1rem 1rem;}
#copyRight{ font-size:.75rem; letter-spacing:0;}
#popupNav{ display:none;}
#hamburger{ display:none;}

@media only screen and (max-width : 800px) {
.linkBlock{ padding-top:2rem; padding-bottom:2rem;}
.linkBlock > div a img{ height:4rem;}
.linkBlock > div p{ margin:2rem auto 0; font-size: 0.8rem;}

.sustainableBg{background:url(img/sustainable_bg--pc.jpg) center bottom no-repeat;  background-size:auto 480px; height:480px;}
.subTitle{ font-size:1.0rem;}

.saitofarmLogo img{ height:4rem;}

.aboutImageText img{ height:40px;}
.projectImageText img{ height:40px;}
.farmImageText img{ height:80px;}

#hamburger{ display:block;}
}




.companyWrapper{ margin:12rem auto 8rem; max-width: 1000px; text-align: left;}

.selectList{
  position: relative;
  display: block;
  width: 280px;
  border: 1px solid #707070;
  background: #fff;
}
.selectList.sizeS{
  width: 5em;
}
  
.selectList:before {
      content: "";
      position: absolute;
      top: 50%;
      right: 10px;
      display: block;
      width: 0;
      height: 0;
      margin: -2px 0 0 0;
      border: 5px solid transparent;
      border-top: 7px solid #707070;
}

.selectList select{
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 320px;
  border: none;
  background: transparent;
  padding:1rem;
  box-sizing:border-box;
}

.formWrapper{ max-width:640px; width:100%; text-align: left; margin:2rem auto 4rem;}
.formWrapper fieldset legend{ text-align:center; margin-bottom:2rem;}
.formWrapper dl{ margin:1rem auto; color: #333;}
.formWrapper dl dt{ font-weight: normal; margin-bottom:5px;}
.formWrapper dl dt span{display: inline-block;line-height: 1;padding: 0.25rem 0.5rem;background: #e26459;border-radius: 5px;color: #fff;font-size: 0.75rem;margin: 0.25rem 0 0 1rem;vertical-align:top;}

.formWrapper input[type=text]{ border:1px solid #707070; width:100%; padding:0.5rem; background: #fff;}
.formWrapper input[type=email]{ border:1px solid #707070; width:100%; padding:0.5rem; background: #fff;}
.formWrapper textarea{ border:1px solid #707070; width:100%; padding:0.5rem; height:10em; background: #fff;}

.submitWrapper{ margin:1rem auto 0; text-align: center;}
.submitWrapper ul li{ display:inline-block; padding:0 1rem;}
.submitWrapper input[type=submit]{ background:#fff; border:1px solid #333; color:#000; padding:1rem 4rem;}
.submitWrapper input[type=submit]:hover{ background:hsl(0, 0%, 90%);}

.addLine{ border:1px solid #707070; width:100%; padding:0.5rem;}
.bookNote{ font-size:0.8rem; margin-top:10px;}

@media only screen and (max-width : 800px) {
  .formWrapper{ padding:0 1rem; margin:2rem auto;}
  .formWrapper fieldset legend{ margin-bottom:1rem;}
  .formWrapper dl{ font-size:0.8rem;}
  .submitWrapper ul li{ display:block; padding:0 0 1rem;}
  .submitWrapper input[type=submit]{ font-size:0.8rem;}
  .preCheckText{ font-size:0.8rem;}
}

.checkAnser{ border:1px solid #707070; padding:0.5rem 1rem;}

@media only screen and (max-width : 800px) {
}