@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap);


/* -------------------------------------------------- */
/* common */
/* -------------------------------------------------- */
#content {width: 100%;overflow-x: hidden;background: url(../img/bg.jpg) top center repeat;}
#content, #content *, #content ::after, #content ::before, #content::after, #content::before {box-sizing: border-box;font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", Osaka,  sans-serif;color: #1e4353;}
#content .content-wrapper {-webkit-transform-origin: center top; transform-origin: center top}
#content .inner {width: 95%;max-width: 1360px;background: none;border: none; margin: 0 auto; padding:0;}
#content h1, #content h2, #content h3 {margin: 0;padding: 0;line-height: 1;border-bottom: 0}
#content figure { margin: 0}
#content img {width: auto;max-width: 100%;}
#content a {transition: .3s;}
#content a:hover {opacity: .7;}
#content .text-left {text-align: left;}
#content .text-center {text-align: center;}
#content .text-right {text-align: right;}
#content .no-pc {display: none;}
#content .no-sp {display: block;}

#content h3.cmn-ttl-yellow {text-align: center;}
#content h3.cmn-ttl-yellow span {background:linear-gradient(transparent 60%, #fff3a4 0%);font-size: 40px;font-weight: bold;line-height: 1.6;}
#content h4.cmn-ttl-blue span {font-size: 35px;background:linear-gradient(transparent 60%, #c9e7f1 0%);line-height: 1.6;color: #1e4353;font-size: 25px;font-weight: bold;}


/* -------------------------------------------------- */
/* bg */
/* -------------------------------------------------- */
#block-intro {background: url(../img/bg-corn.png) right -100px top 30px no-repeat,url(../img/bg-tomato.png) left -50px top 200px no-repeat;}
#block-recipe {background: url(../img/bg-onion.png) right -60px top 0px no-repeat;}
#recipe01 .box-main {background: url(../img/bg-lemon.png) right -120px top 95% no-repeat;}
#recipe02 .box-main {background: url(../img/bg-paprika.png) left -80px top 80% no-repeat;}
#recipe03 .box-main {background: url(../img/bg-pista.png) right -120px top 90% no-repeat;}
#recipe04 .box-main {background: url(../img/bg-tako.png) left -80px top 85% no-repeat;}
#recipe05 .box-main {background: url(../img/bg-kyabetsu.png) right -120px top 110% no-repeat;}
#recipe06 .box-main {background: url(../img/bg-suica.png) right -120px top 90% no-repeat,url(../img/bg-basil.png) left -50px top 65% no-repeat;}
#block-item {background: url(../img/bg-vegetable.png) left -60px top 0 no-repeat;}
#block-hint {background: url(../img/bg-tomato2.png) right -60px top 0 no-repeat;}

/* -------------------------------------------------- */
/* #block-mv */
/* -------------------------------------------------- */
#block-mv {background: url(../img/mv-img.jpg) center / cover no-repeat;height: 550px;display: flex;align-items: center;}
#block-mv .inner {height: 75%;}
#block-mv h1 {text-align: center;height: 100%;}
#block-mv h1 img {height: 100%;}


/* -------------------------------------------------- */
/* #block-intro */
/* -------------------------------------------------- */
#block-intro {padding: 90px 0;}
#block-intro .text:before {content: '';display: block;width: 50px;height: 8px;background-color: #afe4f4;margin: 45px auto; }
#block-intro .text p {font-size: 25px;text-align: center;}
#block-intro .text p + p {margin-top: 1.5em;}
#block-intro .nav {display: flex;margin-top: 90px;}
#block-intro .nav li {flex: 1;text-align: center;padding: 10px;}
#block-intro .nav li a {display: block;height: 100%;position: relative;padding-bottom: 35px;}
#block-intro .nav li a:after {content: '';display: block;width: 100%;height: 20px;background: url(../img/icon-arrow-down.png) center bottom no-repeat ;position: absolute;left: 0;bottom: 3px;transition: .3s;}
#block-intro .nav li a:hover:after {bottom: 0;}
#block-intro .nav li p {font-size: 22px;font-weight: bold;margin-top: .8em;}

@media screen and (max-width: 1400px) {
  #block-intro .nav li p {font-size: 18px;}
}
@media screen and (max-width: 1100px) {
  #block-intro .nav li p {font-size: 16px;}
}
@media screen and (max-width: 1000px) {
  #block-intro .nav {flex-wrap: wrap;}
  #block-intro .nav li {width: 33.333%;flex: auto;margin-bottom: 40px;}
}

/* -------------------------------------------------- */
/* #block-campaign */
/* -------------------------------------------------- */
.block-campaign {text-align: center;}
.block-campaign h3 {margin-bottom: 70px !important;}
.block-campaign h3 span:before,
.block-campaign h3 span:after {content: '';display:inline-block;width: 35px;height: 45px;background: center / cover no-repeat;margin: 0 5px -5px}
.block-campaign h3 span:before{background-image: url(../img/campaign-ttl-left.png);}
.block-campaign h3 span:after {background-image: url(../img/campaign-ttl-right.png);}


/* -------------------------------------------------- */
/* #block-recipe */
/* -------------------------------------------------- */
#block-recipe {margin-top: -200px;padding-top: 350px;}
#block-recipe h2 {text-align: center;}
#block-recipe .box {padding: 100px 0;}
#block-recipe .box p {font-size: 20px;line-height: 1.8;}
#block-recipe .box-ttl {text-align: center;}
#block-recipe .box-ttl h3 {margin-top: 30px;}
#block-recipe .box-main > a > figure /*{max-width: 1200px;margin: 0 auto;}*/{max-width: 1000px;margin: 0 auto;}
#block-recipe .box-main > a > figure img {width: 100%;}
#block-recipe .box-main > .btn-recipe {font-size: 26px;font-weight: bold;background: #fee902;border-radius: 25px;width: 100%;max-width: 380px;padding: .7em;margin: 40px auto 0;text-align: center;display: block;}
#block-recipe .box-main [class^="btn-"]:before {content: '';display: inline-block;width: 16px;height: 13px;background: url(../img/icon-arrow-right.png) center no-repeat;margin: 0 10px 3px 0;}
#block-recipe .box-main-text {display: flex; justify-content: center;}
#block-recipe .box-sub a {display: flex;align-items: center;width: 95%;max-width: 1200px;margin: 50px auto 0;padding: 0 40px;}
#block-recipe .box-sub-text {flex: 1;margin-left: 40px;}
#block-recipe .box-sub-text .btn-recipe2 {border-bottom: 2px solid;font-size: 24px;font-weight: bold;margin-top: 20px;display: inline-block;}


/* -------------------------------------------------- */
/* #block-products */
/* -------------------------------------------------- */
#block-products {margin-top: 100px;}
#block-products h2 {text-align: center;margin-bottom: 80px;}
#block-products .slider {padding-bottom: 30px;}
#block-products .slider .slick-track {display: flex;}
#block-products .slider .slick-slide { height: auto !important;margin-left: 15px !important;margin-right: 15px !important;text-align: center;padding: 40px 0;}
#block-products .slider .slick-dots li button:before {font-size: 40px;}
#block-products .slider li figure {background: center / contain no-repeat;width: 70%;padding-bottom: 90%;margin: 0 auto 20px;}
#block-products .slider li p {font-size: 25px;font-weight: bold;}
#block-products .slider li p.more {font-size: 20px;margin-top: 20px;}
#block-products .slider li p.more:before {content: '';display: inline-block;width: 15px;height: 12px;background: url(../img/icon-arrow-right.png) center no-repeat;margin: 0 5px 2px 0}
#block-products .slider li.boursin {background:#f8fff6;}
#block-products .slider li.kiri {background:#f6faff;}
#block-products .slider li.bel {background:#fff7f6;}
#block-products .slider li.boursin figure {width: 50%;}

#block-products .pkg {padding-top: 2em; margin: 0 auto;text-align: center;}

@media screen and (max-width: 1200px) {
  #block-products .slider li p {font-size: 24px;}
  #block-products .slider li p.more {font-size: 20px;}
}


/* -------------------------------------------------- */
/* #block-item */
/* -------------------------------------------------- */
#block-item {margin-bottom: 160px;padding-top: 160px;}
#block-item ul {display: flex;justify-content: space-between;align-items: flex-end;margin: 70px auto 0;max-width: 980px;}
#block-item ul li {text-align: center;}


/* -------------------------------------------------- */
/* #block-hint */
/* -------------------------------------------------- */
#block-hint {padding-top: 160px;}
#block-hint h2 {text-align: center;}
#block-hint ul {display: flex;justify-content: space-between;margin: 80px auto 0;width: 100%;max-width: 980px;}
#block-hint ul li {flex: 1;}
#block-hint ul li h4 {font-size: 24px;color: #1e4353;margin: 20px 0 15px;}
#block-hint ul li p {font-size: 16px;}

@media screen and (max-width: 1000px) {
  #block-hint ul li {padding: 0 10px;}
}


/* -------------------------------------------------- */
/* #block-banner */
/* -------------------------------------------------- */
#block-banner {margin: 200px 0 130px;}
#block-banner .inner {max-width: 980px;}


/* -------------------------------------------------- */
/* .recipe-all */
/* -------------------------------------------------- */
.recipe-all {position: fixed;right: 20px;bottom: 20px;z-index: 100;}
.recipe-all a {background: #aee3f3;width: 80px;height: 80px;border-radius: 10em;text-align: center;display: block;}
.recipe-all a img {transform: rotate(180deg);width: 10px !important;margin: 12px 0 5px}
.recipe-all a p {font-weight: bold;line-height: 1.2;font-size: 16px;}




/* -------------------------------------------- */
/* for SP */
/* -------------------------------------------- */
@media screen and (max-width: 768px) {
  
  /* -------------------------------------------------- */
  /* common */
  /* -------------------------------------------------- */
  #content a {text-decoration: none;}
  #content h3.cmn-ttl-yellow span {font-size: 36px;}
  #content h4.cmn-ttl-blue span {font-size: 20px;}
  #content .no-pc {display: block;}
  #content .no-sp {display: none;}

  /* -------------------------------------------------- */
  /* bg */
  /* -------------------------------------------------- */
  #block-intro {background-size:40% auto,30% auto;background-position: right -10% top 5%,left -5% top 14%;}  
  #block-recipe { background-size: 36% auto ;background-position: right -8% top 1.5%;}
  #recipe01 .box-main { background-size:60% auto ;background-position: right -5% top 80%;}
  #recipe02 .box-main { background-size:40% auto ;background-position: left -5% top 70%;}
  #recipe03 .box-main { background-size:60% auto ;background-position: right -5% top 80%;}
  #recipe04 .box-main { background-size:40% auto ;background-position: left -5% top 70%;}
  #recipe05 .box-main { background-size:50% auto ;background-position: right -5% top 85%;}
  #recipe06 .box-main { background-size:36% auto, 28% auto ;background-position: right -4% top 80%, left -10% top 60%;}
  #block-item {background: none;}
  #block-item + .block-campaign {background: url(../img/bg-vegetable.png) left -5% top 0 no-repeat;background-size: 30% auto;}
  #block-hint {background-size:50% auto ;background-position: right -5% top 24%;}
  
  /* -------------------------------------------------- */
  /* #block-mv */
  /* -------------------------------------------------- */
  #block-mv {background: url(../img/mv-img_sp.jpg) center / cover no-repeat;height: 100vw;}
  #block-mv h1 img {width: 80%;max-width: 380px;}
  
  /* -------------------------------------------------- */
  /* #block-intro */
  /* -------------------------------------------------- */
  #block-intro {padding: 50px 0; }
  #block-intro h3.cmn-ttl-yellow span {font-size: 28px;}
  #block-intro .text p {font-size: 16px;}

  /* -------------------------------------------------- */
  /* block-campaign */
  /* -------------------------------------------------- */
  .block-campaign h3 span:before, .block-campaign h3 span:after {height: 1em;background-size: contain;}
  
  /* -------------------------------------------------- */
  /* #block-recipe */
  /* -------------------------------------------------- */
  #block-recipe h2 img {width: 80%;}
  #block-recipe .box {padding: 50px 0}
  #block-recipe .box p {font-size: 16px;}
  #block-recipe .box-ttl,
  #block-recipe .box-main-text{margin: 0 2.5%;}
  #block-recipe .box-main [class^="btn-"]::before {width: 10px;height: 8px;background-size: contain;}
  #block-recipe .box-ttl  figure img {width: 90px;}
  #block-recipe .box-sub a {padding: 0;}
  #block-recipe .box-sub figure {width: 160px;}
  #block-recipe .box-sub-text p {font-size: 14px;}
  #block-recipe .box-sub-text .btn-recipe2 {font-size: 16px;border-bottom-width: 1px;}

  /* -------------------------------------------------- */
  /* #block-products */
  /* -------------------------------------------------- */
  #block-products h2 img {width: 50%;}
  #block-products .slider .slick-slide {margin-left: 8px !important;margin-right: 8px !important;}
  #block-products .slider li figure {padding-bottom: 70%;}

  /* -------------------------------------------------- */
  /* #block-item */
  /* -------------------------------------------------- */
  #block-item {margin-bottom: 0;padding-top: 100px;}
  #block-item ul {padding: 0 5%;}
  #block-item ul li {padding: 20px;}
  #block-item + .block-campaign {padding-top: 100px;}

  /* -------------------------------------------------- */
  /* #block-hint */
  /* -------------------------------------------------- */
  #block-hint h2 img {width: 60%;}
  #block-hint ul {display: block;width: 80%;max-width: 430px}
  #block-hint ul li + li {margin-top: 50px;}
  #block-hint ul li img {width: 100%;}

  /* -------------------------------------------------- */
  /* #block-banner */
  /* -------------------------------------------------- */
  #block-banner {margin: 130px 0 80px;}
  
  /* -------------------------------------------------- */
  /* .recipe-all */
  /* -------------------------------------------------- */
  .recipe-all a {transform: scale(.8)}
  .recipe-all a:hover {opacity: 1 !important;}
  
}

@media screen and (max-width: 600px) {
  #content h3.cmn-ttl-yellow span {font-size: 26px;}
  #block-intro .nav li p {font-size: 14px;}
  #block-recipe .box-main .btn-recipe {font-size: 22px;width: 95%;}
  #block-recipe .box-sub-text {margin-left: 20px;}
}

@media screen and (max-width: 480px) {
  #content h3.cmn-ttl-yellow span {font-size: 24px;}
  #block-intro .nav li {width: 50%;}
  .block-campaign h3 {margin-bottom: 35px !important;}
  #block-recipe .box-sub figure {width: 110px;}
  #block-products h2 {margin-bottom: 40px;}
  #block-products .slider li p {font-size: 20px;}
  #block-products .slider li p.more {font-size: 16px;}
  #block-item ul {margin-top: 35px;padding: 0;}
  #block-hint ul {margin-top: 40px;}
  #block-hint ul li h4 {font-size: 18px;}
  
  /* bg */
  #block-intro {background-position: right -10% top 2%,left -5% top 10%;}  
  #block-recipe { background-position: right -8% top 2.5%;}
  #recipe01 .box-main { background-position: right -5% top 50%;}
  #recipe02 .box-main { background-position: left -5% top 50%;}
  #recipe03 .box-main { background-position: right -5% top 50%;}
  #recipe04 .box-main { background-position: left -5% top 40%;}
  #recipe05 .box-main { background-position: right -5% top 55%;}
  #recipe06 .box-main { background-position: right -4% top 50%, left -10% top 45%;}
  
}
@media screen and (max-width: 400px) {
  #content h4.cmn-ttl-blue {margin-bottom: 5px;}
  #content h4.cmn-ttl-blue span {font-size: 18px;}
  .block-campaign h3 span:before, .block-campaign h3 span:after {width: 15px;}
  #block-recipe .box-main .btn-recipe {font-size: 18px;}
  #block-recipe .box-sub-text .btn-recipe2 {margin-top: 10px;font-size: 14px;}
  #block-products .slider li p {font-size: 18px;}
  #block-products .slider li p.more {font-size: 14px;}
}



/* -------------------------------------------------------------------------------------- */
/* animation */
/* -------------------------------------------------------------------------------------- */
.anim-bottom{opacity:0;}
.anim-bottom.animated{animation:slideInBottom .5s ease-out .5s forwards;}
.anim-bottom2{opacity:0;}
.anim-bottom2.animated{animation:slideInBottom .5s ease-out .8s forwards;}
.anim-left{opacity:0;}
.anim-left.animated{animation:slideInLeft .5s ease-out .5s forwards;}
.anim-right{opacity:0;}
.anim-right.animated{animation:slideInRight .5s ease-out .5s forwards;}

@keyframes slideInBottom{
  0%{opacity:0;-webkit-transform:translateY(70px);transform:translateY(70px);}
  100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInLeft{
  0%{opacity:0;-webkit-transform:translateX(-70px);transform:translateX(-70px);}
  100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes slideInRight{
  0%{opacity:0;-webkit-transform:translateX(70px);transform:translateX(70px);}
  100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}