@charset "utf-8";
/************ --------------------

rakuchin CSS

 -------------------- ************/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap');
body {
  -webkit-text-size-adjust: 100%;
}
#rakuchin-contents {
  overflow: hidden;
  background:
    url(../images/recipe_bg_03.png) calc(50% - 550px) calc(100% + 120px) no-repeat, url(../images/recipe_bg_02.png) calc(50% + 550px) calc(100% + 140px) no-repeat, #de1210 url("../images/ptn_01.png") top center;
  background-size: 555px, 555px, auto;
  color: #fff;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
  font-size: 20px;
  font-feature-settings: "palt";
  text-align: center;
}
#rakuchin-contents * {
  box-sizing: border-box;
  max-height: 100%;
}
#rakuchin-contents p {
  margin-bottom: 1em;
  transform: rotate(0.04deg);
}
/*PCでは調味料ナビを出さないので*/
.container .title {
  margin-bottom: 0;
}
.container {
  margin-top: 0;
}
/**********************************
 
スクロールしたらふんわり表示
 
**********************************/
/* 画面外にいる状態 */
.fadein {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 1200ms;
}
.fadein.slow {
  transform: translate(0, 56px);
  transition: all 1800ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
/* ---　SPサイズのみ　---*/
@media all and (max-width:767px) {
  #rakuchin-contents {
    padding: 0 0.6em;
    font-size: 16px;
  }
  #rakuchin-contents .pc {
    display: none !important;
  }
  /* 画面外にいる状態 */
  .fadein {
    transform: translate(0, 20px);
    transition: all 1200ms;
  }
  .fadein.slow {
    transform: translate(0, 36px);
    transition: all 1800ms;
  }
  /* 画面内に入った状態 */
  .fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* ---　PCサイズのみ　---*/
@media all and (min-width:768px) {
  #rakuchin-contents .sp {
    display: none !important;
  }
}
/**********************************
 
Utility
 
**********************************/
.u-no-wrap {
  display: inline-block;
}
/**********************************
 
Main Visual #mv
 
**********************************/
#mv {
  background: #fff url("../images/mv_bg_01.jpg") no-repeat center calc(50% + 5%) / 110%;
  text-align: center;
}
/**********************************
 
nav class="rakuchin_nav"
 
**********************************/
.rakuchin_nav ul {
  padding: 1.5em 1em;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.5em;
}
.rakuchin_nav li a, .rakuchin_nav li span.crnt {
  padding: 0.4em 0.37em 0.65em;
  display: block;
}
.rakuchin_nav li a:hover, .rakuchin_nav li .crnt {
  background: url("../images/ptn_02.png") bottom left repeat-x;
}
.rakuchin_nav li a:hover img {
  filter: contrast(1.0) brightness(1.0) /*hue-rotate(-5deg)*/ ;
  transform: scale(1.1);
}
/* ---　SPサイズのみ　---*/
@media all and (max-width:767px) {
  .rakuchin_nav li a:hover, .rakuchin_nav li .crnt {
    background-size: 0.6em;
  }
  .rakuchin_nav ul {
    gap: 2em;
  }
  .rakuchin_nav li img {
    height: 1.2em;
    width: auto;
  }
  .rakuchin_nav ul {
    padding: 0.2em 0.1em 0.36em;
  }
}
/**********************************
 
section id="tokucho" class="inner"
 
**********************************/
#tokucho {
  padding-top: 0.8em;
}
#tokucho .inner {
  padding: 0em 1em 1em;
  text-align: center;
  border: #FFFFFF 7px solid;
  border-radius: 2em;
  margin-top: 4em;
}
#tokucho h2 {
  margin: -2.0em 0 2em;
}
#tokucho p.koreippon {
  margin-bottom: 3em;
}
#tokucho h3 {
  margin-bottom: 2em;
}
#tokucho h3.himitsu {
  margin-top: 2em;
}
#tokucho .blend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  padding: 0 0 2em;
}
#tokucho .blend ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
#tokucho .blend figure img {
  filter: drop-shadow(0px 0px 17px rgba(0, 0, 0, 0.26));
}
.tokucho_banners {
  padding: 0.5em 0 2em;
}
.tokucho_banners a {
  padding: 0 0.5em;
}
/* ---　SPサイズのみ　---*/
@media all and (max-width:767px) {
  #tokucho h2 {
    margin-top: -1.36em;
  }
  #tokucho .koreippon {
    margin-bottom: 3em;
  }
  #tokucho h2 img {
    height: 2.3em;
    width: auto;
  }
  #tokucho h3 {
    margin-bottom: 1em;
  }
  #tokucho .inner {
    margin-top: 2em;
    border-width: 5px;
  }
  #tokucho .blend {
    flex-direction: column-reverse;
    gap: 1em;
    padding: 0 0 2em;
  }
  #tokucho .blend figure {
    width: 45%;
  }
  .tokucho_banners {
    padding-bottom: 0;
  }
  .tokucho_banners img {
    width: 270px;
    max-width: 90%;
    margin-bottom: 0.6em;
  }
}
/**********************************
 
section id="recipe"
 
**********************************/
#recipe {
  background: url(../images/recipe_bg_01.png) calc(50% - 460px) 260px no-repeat;
  padding: 80px 0;
}
#recipe h2 {
  margin-bottom: 2em;
}
.niku p {
  color: #eb8100;
}
.sakana p {
  color: #e60012;
}
.yasai p {
  color: #83b20f;
}
.recipe__cards {
  padding: 20px 0;
}
.recipe__cards__item {
  background: #fff;
  padding: 1em;
  border-radius: 1em;
  width: 850px;
  margin: 0 auto 30px;
  position: relative;
}
.recipe__cards__item::before {
  content: url("../images/ptn_03.svg");
  position: absolute;
  top: -35px;
  right: -46px;
}
.recipe__cards__item:nth-child(even)::before {
  right: auto;
  left: -46px;
  transform: scaleX(-1); /* ←左右反転 */
}
.recipe__cards__item::after {
  content: "";
  display: block;
  clear: both;
}
.recipe__cards__tit {
  margin-bottom: 0.7em;
}
.recipe__cards__image {
  position: relative;
  float: right;
  width: 40%;
  margin-left: 20px;
  margin-bottom: 0 !important;
  z-index: 2;
}
.recipe__cards__image a {
  display: block;
}
.recipe__cards__image a:hover {
  filter: brightness(0.8);
  transition: 0.2s;
}
.recipe__cards__image::before {
  content: "";
  height: 60px;
  width: 60px;
  background: url("../images/icon_play.svg");
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  pointer-events: none; /* ←これを追加！ */
  z-index: 3;
}
.coming a {
  pointer-events: none;
  filter: contrast(1.0) brightness(0.8) !important;
}
.recipe__cards__image.coming::before {
  content: "";
  height: 60px;
  width: 100%;
  background: url("../images/coming.svg") no-repeat center center;
}
.recipe__cards__ex {
  text-align: left;
  font-size: 16px;
}
.recipe__btn {
  margin-bottom: 0 !important;
}
.recipe__btn a {
  color: #fff;
  font-size: 18px;
  padding: 0.3em;
  display: block;
  border-radius: 2em;
  transition: all 0.3s ease;
}
.recipe__btn a:hover {
  transform: scale(1.03, 1.1);
  filter: contrast(1.2) brightness(0.95);
}
.niku .recipe__btn a {
  background: #eb8100;
}
.sakana .recipe__btn a {
  background: #e60012;
}
.yasai .recipe__btn a {
  background: #83b20f;
}
#recipe .btn {
  margin-bottom: 0;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
}
a img {
  transition: all 0.3s ease;
}
a:hover img {
  filter: contrast(1.0) brightness(1.1) /*hue-rotate(-5deg)*/ ;
  transform: scale(1.04);
}
/* ---　SPサイズのみ　---*/
@media all and (max-width:767px) {
  #recipe {
    padding-top: 2em;
    padding-bottom: 2em;
  }
  #recipe h2 {
    margin-top: 2em;
    margin-bottom: 1em;
  }
  .recipe__cards {
    padding: 170px 0 16px;
    background: url(../images/recipe_bg_01_sp.png) no-repeat center top / 240px;
  }
  .recipe__cards__item {
    width: auto;
    margin: 0 3% 20px;
    display: flex;
    flex-direction: column;
  }
  .recipe__cards__item::before {
    transform: scale(0.6);
    top: -28px;
    right: -30px;
  }
  .recipe__cards__item:nth-child(even)::before {
    transform: scale(-0.6, 0.6); /* ← 左右反転＋縮小 */
    left: -30px;
  }
  .recipe__cards__image {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.6em !important;
    order: 2;
  }
  .recipe__cards__tit {
    order: 1;
  }
  .recipe__cards__ex {
    order: 3;
  }
  .recipe__btn {
    order: 4;
  }
}
/**********************************
 
recipe.html
 
**********************************/
#recipe-list .page_tit {
  padding: 1em 0 2em;
}
.recipe__list {
  display: flex;
  gap: 1.5em;
  background: #fff;
  padding: 2.6em;
  border-radius: 2em;
  overflow: hidden;
  margin-bottom: 2em;
}
.recipe__type__tit {
  padding: 0.6em;
  margin-bottom: 2.0em;
  border-radius: 1.4em;
  border: #eb8100 2px solid;
}
.sakana .recipe__type__tit {
  border-color: #e50012;
}
.yasai .recipe__type__tit {
  border-color: #8dc21f;
}
.recipe__list__item:not(:last-child) {
  margin-bottom: 2.8em;
}
.recipe__list__item .recipe__list__image {
  margin-bottom: 0.6em !important;
}
.recipe__list__item .recipe__btn a {
  padding: 0.23em;
  border-radius: 0.6em;
  margin: 0.8em 2em 0;
}
#recipe-list p.btn_sonota {
  margin-bottom: 3em;
}
#recipe-list p.btn_sonota button {
  all: unset; /* すべてのスタイルを解除 */
  display: inline-block; /* デフォルト表示を復活 */
  cursor: pointer; /* ホバー時の手のマークは残す */
}
#recipe-list p.btn_sonota button:hover {
  filter: contrast(1.0) brightness(1.0) /*hue-rotate(-5deg)*/ ;
  transform: scale(1.08);
  transition: 0.2s;
}
/* ---　SPサイズのみ　---*/
@media all and (max-width:767px) {
  #recipe-list .page_tit {
    padding: 1.5em 0 0.8em;
  }
  .recipe__list {
    flex-wrap: wrap;
    justify-content: center;
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .recipe__type {
    background: #fff;
    padding: 1.0em;
    border-radius: 1em;
    overflow: hidden;
    margin-bottom: 2em;
  }
  .recipe__list__item:not(:last-child) {
    width: 100%;
    margin-bottom: 1.8em;
  }
  .recipe__type {
    margin-bottom: 0em;
  }
  .recipe__type__tit img {
    height: 1.6em;
    width: auto;
  }
  .recipe__type__tit {
    margin-bottom: 1.0em;
  }
  .recipe__list__tit img {
    max-height: 1.99em !important;
    width: auto;
  }
  img.sp_wider {
    transform: scaleX(1.3);
    transform-origin: center;
  }
}