@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:#333;}
.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;}


#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_echizenfukuushi.svg) center 40% no-repeat; background-size:140px; 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:calc(1280px + 2rem); width:100%; height:6rem; margin:0 auto; padding:1rem 1rem 1rem; text-align:left; position:relative;}
#headerInner h1.sizeL img{ width:auto; height:12rem;}
#headerInner h1.sizeM img{ width:auto; height:9rem;}
#headerInner h1{ position:relative; display:inline-block;}
/*
#headerInner h1::before{ content:""; position: absolute; top:-1rem; left:-1rem; z-index:-1;
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  padding:2rem;
  background: rgba(255, 255, 255,1);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-radius:0 0 160px 160px;
}
*/


#gNav{ position: absolute; top:1rem; right:1rem;}
#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;}
#gNav > li:hover{opacity:0.8;}
.shopIcon img{height:3rem; width:auto;}

.lowerLogo img{height:12rem; width:auto;}




.mainCover{ padding:0 1rem;}
.mainWrapper{ margin:6rem auto 0; background:url(img/main-2400.jpg) center top no-repeat;  background-size:cover; width:100%; max-width:1280px; height:640px; position:relative; padding:0 1rem; border-radius:20px;}
.mainWrapper h1{ position: absolute; top:14%; left:4rem;}
.mainWrapper h1 img{ height:16rem; width:auto;}
.mainCatch{ position:absolute; top:20%; left:50%; transform: translate(-50%,0); width:420px;}
.mainCopy{ position:absolute; top:50%; left:50%; transform: translate(6rem,-50%); 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;}

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

@media only screen and (max-width : 960px) {
  .mainWrapper h1 img{ height:12rem;}
.mainCopy{ font-size:1.2rem;}
}

@media only screen and (max-width : 800px) {
#cover{ overflow-x:hidden; width:100vw;}
#loading::before{ background-size:100px;}
#gNav{ display:none;}

#headerWrapper{ position:relative;}
#headerInner{ height:0; padding:0;}
#headerInner h1{ padding:10px 10px 10px; display: inline-block;
  /*
  clip-path: polygon(
    0 0,
    100% 0,
    100% 77%,
    76% 100%,
    0 100%
  );*/
}
#headerInner h1 img{ height:6rem;}

#headerInner h1::before{ top:-1rem; left:-1rem; 
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  padding:1rem;
}

.mainWrapper h1{ top:1rem; left:1rem;}
.mainWrapper h1 img{ height:8rem;}
.mainCatch{ top:3rem; width:240px;}
.mainCopy{ top:170px; transform: translate(-7.4rem,0); font-size:1.0rem; width:auto;white-space: nowrap; line-height:1.7;}

.spHeadTitle{ font-weight:bold;}
.setPosition{ position: absolute; right:2rem; bottom:2rem;}
.setPosition img{ height:120px; width:auto;}

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

@media only screen and (max-width : 500px) {
.mainWrapper{ margin:1rem auto 0; background:url(img/main-800.jpg) center top no-repeat; background-size:auto 480px; height:480px; width:100%;}
}

.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:2rem 0 2rem 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;}
.videoBtn{ padding:0.5rem;}
.videoBtn::after {background:rgba(0, 0, 0, 0.5) url(img/play_btn.svg) center center no-repeat; background-size:60px;}

.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;}

.designFlexWrapper div.spFlex{ display: flex; justify-content: flex-start; gap:2rem; align-items:center;}
}




.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;}
.aboutImageText svg{ height:80px; width:auto;}
.projectImageText svg{ height:80px; width:auto;}
.farmImageText svg{ 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;}
.aboutImageText svg{ height:40px;}
.projectImageText svg{ height:40px;}
.farmImageText svg{ height:80px;}

#hamburger{ display:block; position:fixed; top:10px; right:10px; z-index:9998;}
#popupNav{ display:block; position:fixed; top:0; right:0; z-index:9997; background:rgba(255, 255, 255,0.95); width:100%; height:100vh; padding:2rem 2rem; transform: translate(105%,0); transition: all .5s;}
#popupNav.on{transform: translate(0,0);}
.pLogo{ height:120px; width:auto;}
.pNav{ margin-top:2rem;}
.pNav > li{ display:inline-block; width:50%; margin:1rem auto 0; padding:0 0.5rem;}
.pNav > li a{font-family: "Abril Fatface", serif; font-weight: 400; font-style: normal; color:#000; font-size:1.0rem; line-height:1; padding:1rem 0; display:block; border:1px solid #ccc;}
.pNav > li.ecLink a{padding:0; border:none; margin-top:2rem;}
.pNav > li.ecLink a img{ height:4rem; width:auto;}
}



.voiceWrapper{ margin:8rem auto;}
.voiceWrapper .secTitle{text-align:center; position:relative;}
.voiceWrapper .secTitle::before{ content:"";width:240px; height:1px; background:#000; position: absolute; top:50%; left:50%; margin-left:-500px;}
.voiceWrapper .secTitle::after{ content:"";width:240px; height:1px; background:#000; position: absolute; top:50%; right:50%; margin-right:-500px;}
.voiceWrapper .secTitle .subTitle{ font-size:1.4rem; margin:0.5rem auto 0; color:#ababab; letter-spacing:0;}

.voiceListWrapper{ margin:2rem auto 2rem; max-width:1000px; width:100%;}
.voiceList{ display:flex; justify-content: space-between; gap:1rem;flex-wrap: wrap;}
.voiceList > li{ width:calc(50% - 0.5rem); text-align: left; border:1px solid #eee; padding:1rem;}
.voiceList > li a img:hover{ opacity:0.8;}
.voiceList > li em{  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style:italic; font-size:0.8rem;}
.voiceList > li h2{ margin:1em 0 0; font-size:1rem;}
.voiceList > li p{ margin:1em 0 0; font-size:0.8rem;}

.readMoreBox{ margin:1rem 0 0; position:relative; text-align: right;}
.readMoreBox a{ font-size:0.8rem; letter-spacing:0; display:inline-block; position:relative; padding:0.5em 2.0em 0.5em 0; font-weight:bold;line-height:1;}
.readMoreBox a::before{ content:""; position: absolute; bottom:0; right:0; height:1px; width:100%; background: #333;}
.readMoreBox a::after{ content:""; position: absolute; top:50%; right:0; height:0.8rem; width:0.8rem; background:url(img/icon_sankaku.svg) center center no-repeat; background-size: contain; transform: translate(0,-50%);}
.readMoreBox a:hover{ opacity:0.8;}

.post-navigation{ margin:4rem auto 0; padding:0 1rem;}
.post-navigation a{ font-size:0.8rem;}
.post-navigation a.prev{ display:inline-block; position:relative; padding:0.5em 2em 0.5em 0;}
.post-navigation a.prev::before{ content:""; position: absolute; bottom:0; right:0; height:1px; width:100%; background: #333;}
.post-navigation a.prev::after{ content:""; position: absolute; top:50%; right:0; height:1rem; width:1rem; background:url(img/icon_sankaku.svg) center center no-repeat; background-size: contain; transform: translate(0,-50%);}

.post-navigation a.next{ display:inline-block; position:relative; padding:0.5em 0 0.5em 2em;}
.post-navigation a.next::before{ content:""; position: absolute; bottom:0; left:0; height:1px; width:100%; background: #333;}
.post-navigation a.next::after{ content:""; position: absolute; top:50%; left:0; height:1rem; width:1rem; background:url(img/icon_sankaku.svg) center center no-repeat; background-size: contain; transform:scaleX(-1) translate(0,-50%);}

@media only screen and (max-width : 800px) {
.voiceWrapper{ margin:4rem auto;}
.voiceWrapper .secTitle::before{ width:15%; margin-left:-50%;}
.voiceWrapper .secTitle::after{ width:15%; margin-right:-50%;}
.voiceWrapper .secTitle .subTitle{ font-size:1rem;}
.voiceList{ padding:0 1rem; flex-direction: column; gap:4rem;}
.voiceList > li{ width:100%;}
}




.leftIn{ transform: translate(0,0);}
.leftIn.animeStart{animation: leftInAnime 1s ease-in-out forwards;}

@keyframes leftInAnime {
  0% {transform: translate(0,0);}
  20% {transform: translate(0,-1rem);}
  40% {transform: translate(0,0);}
  100% {transform: translate(0,0);}
}

.rotatePhoto {transform:rotate(-10deg); transform-origin:0 0; opacity:0;}
.rotatePhoto.animeStart{animation: rotateAnime 2s ease-in-out forwards;}

@keyframes rotateAnime {
  0% {transform:rotate(-10deg); opacity:0;}
  50% {transform:rotate(5deg); opacity:1;}
  100% {transform:rotate(0deg); opacity:1;}
}

.scaleIn{ transform: scale(0.8); opacity:0;}
.scaleIn.animeStart{animation: scaleInAnime 1s ease-in-out forwards;}

@keyframes scaleInAnime {
  0% {transform: scale(0.8); opacity:0;}
  100% {transform: scale(1); opacity:1;}
}

/* テキストアニメーション */
.textCatch .text-path {
  fill: transparent;
  stroke: #000;
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.textCatch .text-path.onAnime {
  animation: drawLine 4s ease-in-out forwards, fillColorDark 1.0s ease-in-out 1.0s forwards;
}

@keyframes fillColorDark {
  from {
    fill: transparent;
  }
  to {
    fill: #000;
  }
}




.singleWrapper{ margin:6rem auto 6rem; max-width: 640px; text-align: left;}
.singleInner{ margin:2rem auto 0;}

.singleInner h2{ margin:0 0 2rem; font-size:1.0rem; font-weight:bold;}
.singleInner h2 em{font-size:0.8rem; font-weight:normal;}

.singleInner h3{ margin:0 0 2rem; font-size:1.0rem; font-weight:bold;}
.singleInner h3 em{font-size:0.8rem; font-weight:normal;}

.singleInner h3.menuTitle{ font-weight:normal; margin:2rem 0 1rem;}

.singleInner p{ margin:0 0 2rem; font-size:0.8rem;}
.singleInner span em{font-size:0.8rem;}
.singleInner em{
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style:italic;
}
.singleInner img{ margin:0 0 1rem;}

.interview{position:relative; text-indent:4em;}
.interview::before{content:""; height:1px; width:3em; background:#666;position: absolute; top:0.8em;left:0;}

.infoBlock{ margin:4rem auto 0;}
.infoBlock h3{font-weight:bold; font-size:0.8rem;margin:0 0 1em;}
.infoBlock p{ margin:0 0; font-size:0.8rem;}
.infoBlock a{text-decoration:underline;}
.infoBlock a:hover{text-decoration:none;}

.interviewerBlock{ margin:2rem auto 0; border:1px solid #ccc; padding:1rem;}
.interviewerBlock p{ margin-bottom:0;}

@media only screen and (max-width : 800px) {
.singleWrapper{ margin:4rem auto 2rem;}
.singleWrapper .secTitle{ text-align: right; padding:0 1rem 0 0;}
.singleInner{ padding:0 1rem;}
.singleInner h2{ font-size:0.8rem;}
.singleInner h3{ font-size:0.8rem;}
}




.contactWrapper{ margin:12rem auto 8rem; max-width: 640px; 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:#000; border:1px solid #000; color:#fff; padding:1rem 4rem;}
.submitWrapper input[type=submit]:hover{ background:#333;}

.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) {
  .contactWrapper{ margin:2rem auto 4rem;}
  .contactWrapper .secTitle{ padding:0 1rem;}

  .formWrapper{ padding:0 1rem; margin:2rem auto;}
  .formWrapper fieldset legend{ margin-bottom:1rem;}
  .formWrapper p{ font-size:0.8rem;}
  .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;}