@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700&display=swap');


/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  --rcp-orange: #e49a2b;
  --rcp-text: #222222;
  --rcp-bg: #f7f4eb;
  --rcp-bg-white: #fbfaf5;
  --rcp-font-ja: 'Noto Sans JP', sans-serif;
  --rcp-font-ja-2: 'Noto Serif JP', serif;
  --rcp-font-ja-serif: 'Noto Serif JP', serif;
  --rcp-font-en: 'Roboto', sans-serif;
}

/* body{
  overflow-x: clip;
} */

/* ==========================================================================
   PC Styles
   ========================================================================== */

.rcp--pc {
  background-color: var(--rcp-bg);
  color: var(--rcp-text);
  font-family: var(--rcp-font-ja);
  line-height: 1.8;
}

/* ---------- MV ---------- */

.rcp-mv {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.rcp-mv__inner {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

/* SP向け: innerのリセット */
.rcp--sp .rcp-mv__inner {
  display: block;
}

.rcp-mv__img {
  flex: 0 0 67.19%;    /* 860 / 1280 */
}

.rcp-mv__img img {
  width: 100%;
  height: auto;
  display: block;
}

.rcp-mv__content {
  flex: 0 0 350px;    /* 317 / 1280 */

  margin-left: -74px; /* -65 / 1280 overlap */
  margin-right: 135px;/* 135 / 1280 */
  text-align: center;
  margin-top: 34px;
}

.rcp-mv__label {
  display: inline-block;
  max-width:149px;
  width: 100%;
}

.rcp-mv__label img {
  width: 100%;
  height: auto;
  display: block;
}

.rcp-mv__subtitle {
  font-family: var(--rcp-font-ja-2);
  font-size: 18px;
  font-weight: 400;
  color: var(--rcp-text);
  margin-top: 35px;
}

.rcp-mv__title {
  margin-top: 33px;
}

.rcp-mv__title img {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* ---------- Lead ---------- */

.rcp-lead {
  padding: 65px 0 40px;
}

.rcp-lead__inner {
  max-width: 1050px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp-lead__text {
  font-family: var(--rcp-font-ja);
  font-size: 14px;
  font-weight: 400;
  color: var(--rcp-text);
  text-align: center;
  line-height: 2;
}

/* ---------- Thumbs ---------- */

.rcp-thumbs {
  padding: 36px 0 40px;
}

.rcp-thumbs__inner {
  max-width: 1050px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp-thumbs__title{
  font-family: var(--rcp-font-ja-serif);
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  color: var(--rcp-text);
  letter-spacing: 0.05em;
  position: relative;
}

.rcp-thumbs__title::after{
  position: absolute;
  content: '';
  display: block;
  width: 287px;
  height: 1px;
  top: 30%;
  right: 25px;
  transform: translateY(-50%);
  background-color: var(--rcp-text);
  margin-top: 10px;
  margin-inline: auto;
}

.rcp-thumbs__title::before{
  position: absolute;
  content: '';
  display: block;
  width: 287px;
  height: 1px;
  top: 30%;
  left: 25px;
  transform: translateY(-50%);
  background-color: var(--rcp-text);
  margin-top: 10px;
  margin-inline: auto;
}

.rcp-thumbs__list {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 38px;
}

.rcp-thumbs__item {
  width: 175px;
  text-align: center;
}

.rcp-thumbs__link {
  display: block;
  text-decoration: none;
  color: var(--rcp-text);
}

.rcp-thumbs__img {
  width: 175px;
  height: 141px;
  overflow: hidden;
  transform: translateZ(0);
}

.rcp-thumbs__img img {
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
  object-fit: cover;
  transition: transform 0.3s ease;
  transform: scale(1.001);
  backface-visibility: hidden;
}

.rcp-thumbs__link:hover .rcp-thumbs__img img {
  transform: scale(1.08);
}




.rcp-thumbs__name {
  font-family: var(--rcp-font-ja);
  font-size: 14px;
  font-weight: 700;
  color: var(--rcp-text);
  line-height: calc(20.5 / 14);
  background-color: #fbfaf5;
  min-height:72px ;
  letter-spacing: 0.123em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 20px;
}

.rcp-thumbs__name::before{
  position: absolute;
  content: '';
  background: url("../img/arrow.png") no-repeat center center;
  display: block;
  width: 9px;
  height: 9px;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Banner ---------- */

.rcp-banner {
  text-align: center;
  padding-top: 26px;
  padding-bottom: 120px;
}

.rcp-banner-bottom{
  padding-top: 71px;
  padding-bottom: 84px;
}

.rcp-banner-1{
  padding-top: 68px;
  padding-bottom: 72px;
}

.rcp-banner__inner {
  max-width: 1050px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp-banner__link {
  display: inline-block;
}

.rcp-banner__link img {
  max-width: 100%;
  height: auto;
  display: block;
}
.rcp-banner__link {
  transition: opacity 0.3s ease;
}

.rcp-banner__link:hover {
  opacity: 0.7;
}

.rcp-banner__link {
  transition: opacity 0.3s ease;
}

.rcp-banner__link:hover {
  opacity: 0.7;
}

.rcp-bottom-banner__link{
  transition: opacity 0.3s ease;
}

.rcp-bottom-banner__link:hover{
  opacity: 0.7;
}


/* ---------- Recipe Section ---------- */

.rcp-section {
  padding: 80px 0 105px;
  background-color: var(--rcp-bg);
  position: relative;
}

/* .rcp-section-under{
  padding-top: 120px;
} */

.rcp-section-spacer{
  padding-block: 60px;
  width: 100%;
  background-color: var(--rcp-bg);
}

.rcp--sp .rcp-section-spacer{
  padding-block: calc(56 * var(--spx));
}


.rcp-bg-panel {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 83%;
  height: 100%; */
  background: rgba(251, 250, 245, 1);
  pointer-events: none;
}

.rcp--sp .rcp-bg-panel{
  width: 94%;
  right: 0;
  left: auto;
  bottom: -1px; /* Safari サブピクセル丸め誤差による線を防止 */
}

.rcp-section--reverse .rcp-bg-panel{
  right: 0;
  left:auto;
}

.rcp-section--reverse-sp .rcp-bg-panel{
  right: auto;
  left:0;
}

/* ---------- rcp-bg-panel調整 ---------- */

.rcp-section {
  position: relative;
  /* overflow: hidden; */
}

.rcp-bg-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: max(0px, calc((100vw - 894px) / 2 + 25px));
  background: #fbfaf5;
  pointer-events: none;
}

/* 反転レイアウト用 */
.rcp-section--reverse .rcp-bg-panel {
  left: max(0px, calc((100vw - 894px) / 2 + 25px));
  right: 0;
}




.rcp-section--reverse .rcp-section__label{
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

.rcp-section--white {
  background-color: var(--rcp-bg-white);
}

.rcp-section__inner {
  max-width: 1010px;
  width: 100%;
  padding-inline: 25px;
  box-sizing: border-box;
  margin-inline: auto;
  position: relative;
  
}

.rcp-section__label {
  text-align: left;
  max-width: 200px;
  width: 100%;
  margin-top: -103px;
}

.rcp-section__label img {
  height: auto;
  width: 100%;
  display: inline-block;
}

.rcp-section__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 57px;
  margin-top: 85px;
}

.rcp-section--reverse .rcp-section__content {
  flex-direction: row-reverse;
}

.rcp-section__body {
  width: 45%;
}

.rcp-section__photo {
  width: 48.7%;
  margin-top: -10px;
}

.rcp-section__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.rcp-section__title {
  font-family: var(--rcp-font-ja-serif);
  font-size: 42px;
  font-weight: 300;
  color: var(--rcp-text);
  line-height: calc(60 / 42);
  letter-spacing: 0.04em;
  margin-top: 15px;
  white-space: nowrap;
}

.rcp-section__sub-title {
  font-family: var(--rcp-font-ja-serif);
  font-size: 16px;
  font-weight: 400;
  color: #e49a2b;
  line-height: 1;
  letter-spacing: 0.14em;
}

.rcp--sp .rcp-section__sub-title{
  font-size: calc(20 * var(--spx));
  font-weight: 400;
  color: #e49a2b;
  line-height: calc(56 / 20);
  letter-spacing: 0.14em;
}

.rcp-section__desc {
  font-family: var(--rcp-font-ja);
  font-size: 14px;
  font-weight: 400;
  color: var(--rcp-text);
  line-height: 2;
  margin-top: 16px;
}

.rcp-section__steps {
  margin-top: 71px;
}

.rcp-step {
  display: flex;
  align-items: flex-start;
  margin-top: 27px;
  max-width: 747px;
  width: 100%;
  background-color: #ffffff;
  padding-block:22px ;
  padding-left: 31px;
  padding-right: 20px;
  gap: 28px;
  align-items: center;
}

.rcp-step:not(:first-child){
  margin-top: 15px;
}

.rcp-section--reverse .rcp-step{
  margin-left: auto;
}

.rcp-section__steps-title{
  font-family: var(--rcp-font-ja-serif);
  font-size: 20px;
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-bottom: 20px;
  max-width: 848px;
  width: fit-content;
  margin-left: calc(-16 * var(--spx));;
}

.rcp--sp .rcp-section__steps-title{
  font-family: var(--rcp-font-ja-serif);
  font-size: calc(28 * var(--spx));
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-bottom: calc(19 * var(--spx));
  max-width: 848px;
  width: 100%;
  text-align: left;
}

.rcp-section--reverse .rcp-section__steps-title{
  margin-left: 165px;
}

.rcp-section--reverse .rcp-section__steps{
  margin-top: 54px;
}

.rcp-section--reverse .rcp-step__arrow-img{
  margin-left: 577px;
}


.rcp-step__arrow-img{
  width: 15px;
  height: 15px;
  margin-inline:auto ;
  margin-left: 411px;
}

.rcp-step__arrow-img img{
  width: 100%;
  height: auto;
}

.rcp-step:first-child {
  margin-top: 0;
}

.rcp-step__num {
  max-width: 120px;
  width: 100%;
  flex-shrink: 0;
}

.rcp-step__num img {
  width: 100%;
  height: auto;
  display: block;
}

.rcp-step__text {
  font-family: var(--rcp-font-ja);
  font-size: 14px;
  font-weight: 400;
  color: var(--rcp-text);
  line-height: calc(26 / 14);
  flex: 1;
  letter-spacing: 0.04em;
  max-width: 436px;
  width: 100%;
}

.rcp-step__text-point {
  font-family: var(--rcp-font-ja);
  font-size: 12px;
  font-weight: 400;
  color: var(--rcp-text);
  line-height: calc(26 / 14);
  margin-top: 16px;
  letter-spacing: 0.04em;
  color: #e49a2b;
}

.rcp--sp .rcp-step__text-point{
  font-family: var(--rcp-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--rcp-text);
  line-height: calc(38 / 24);
  margin-top: calc(10 * var(--spx));
  letter-spacing: 0.04em;
  color: #e49a2b;
  text-align: left;
  margin-inline:calc(38 * var(--spx)) ;
}

.rcp-step__text-point span{
  font-family: var(--rcp-font-ja);
  font-size: 12px;
  font-weight: 700;
  color: var(--rcp-text);
  line-height: calc(20 / 12);
  margin-top: 16px;
  letter-spacing: 0.04em;
  color: #e49a2b;
}

.rcp--sp .rcp-step__text-point span{
  font-family: var(--rcp-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--rcp-text);
  line-height: calc(38 / 24);
  margin-top: calc(30 * var(--spx));
  letter-spacing: 0.04em;
  color: #e49a2b;
}

/* ---------- Recipe Table ---------- */

.recipe-material {
  width: 424px;
  margin: 0 auto;
  color: var(--rcp-text);
  font-family: var(--rcp-font-ja);
  margin-top: 39px;
}

.rcp--sp .recipe-material{
  width: calc(522  * var(--spx));
  margin-top: calc( 63  * var(--spx)  );
}

.recipe-material__title {
  margin: 0 0 11px;
  font-weight: 700;
  line-height: 1.4;
  margin-left: -9px;
}

.rcp--sp .recipe-material__title{
  text-align: left;
  margin-left: calc(-15 * var(--spx));
  margin-bottom: calc(17 * var(--spx));
}

.recipe-material__label {
  font-family: var(--rcp-font-ja-serif);
  font-size: 20px;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.rcp--sp .recipe-material__label{
  font-size: calc(28  * var(--spx));
}

.recipe-material__serving {
  font-family: var(--rcp-font-ja-serif);
  margin-left: -15px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.rcp--sp .recipe-material__serving{
  font-size: calc(24  * var(--spx));
  margin-left: calc(-20 * var(--spx));
}

.recipe-material__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.recipe-material__table tr {
  border-bottom: 1px dotted #9a9a9a;
}

.recipe-material__table tr:last-child {
  border-bottom: none;
}

.recipe-material__table th,
.recipe-material__table td {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.rcp--sp .recipe-material__table th,
.rcp--sp .recipe-material__table td{
  font-size: calc(24 * var(--spx));
  padding-block: calc(13 * var(--spx));
}

.recipe-material__table th {
  width: 61%;
  font-weight: 400;
  text-align: left;
  padding-left:18px;
}


.rcp--sp .recipe-material__table th{
  width: 54%;
}
.rcp--sp .recipe-material__table-1 th{
  width: 40%;
}

.rcp--sp .recipe-material__table-2 th,
.rcp--sp .recipe-material__table-3 th{
  width: 65%;
}

.recipe-material__table td {
  width:46%;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.recipe-material__table tbody{
  border-top: 1px solid #222222;
}

.rcp--sp .recipe-material__table-3 tbody{
  border-bottom: 1px solid #222222;
}

.rcp--sp .recipe-material__table-3 tbody:last-child{
  border-bottom: none;
}

.recipe-material__group-main{
  border-bottom: 1px dotted #222222;
}


.recipe-material__table .center th{
  width: 40%;
}

.recipe-material__table .center td{
  width: 52%;
  padding-left: 127px;
  padding-bottom: 8px;
}

.recipe-material__note td {
  text-align: center;
  padding-left: 38px;
}

.recipe-material__group-a-label{
  margin-top: 2px;
}


.recipe-material__table-bottom{
  border-top: 1px solid #222222;
}


/* ---------- Group A (【A】section) ---------- */

.recipe-material__group-a {
  border-top: none !important;
}

.recipe-material__group-a + tbody {
  border-top: 1px solid #222222;
}

.recipe-material__group-a tr {
  border-bottom: none;
  position: relative;
}

.recipe-material__group-a tr::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 96%;
  border-bottom: 1px dotted #9a9a9a;
}

.rcp--sp .recipe-material__group-a tr::after {
  display: none;
}


.recipe-material__group-a tr:last-child::after {
  display: none;
}

.recipe-material__group-a th,
.recipe-material__group-a td {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;
}

.rcp--sp .recipe-material__group-a th,
.rcp--sp .recipe-material__group-a td {
  font-size: calc(22 * var(--spx));
  padding-top: calc(16 * var(--spx));
  padding-bottom: calc(9 * var(--spx));
  vertical-align: bottom;
}

.recipe-material__group-a th {
  padding-left: 18px;
}

/* ---------- Recipe Process Images ---------- */

.rcp-process {
  margin-top: 30px;
}

.rcp-process__inner {
  max-width: 1050px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp-process__list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.rcp-process__item {
  width: 177px;
  text-align: center;
  margin-left: auto;
}

.rcp-process__img {
  width: 177px;
  height: auto;
  overflow: hidden;
}

.rcp-process__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.rcp-process__caption {
  font-family: var(--rcp-font-ja);
  font-size: 12px;
  font-weight: 400;
  color: var(--rcp-text);
  margin-top: 8px;
  line-height: 1.6;
}

/* ---------- Bottom Banner ---------- */

.rcp-bottom-banner {
  padding: 78px 0 7px;
  text-align: center;
}

.rcp-bottom-banner__inner {
  max-width: 1050px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp-bottom-banner__link {
  display: inline-block;
}

.rcp-bottom-banner__link img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}



/* ==========================================================================
   SP Styles
   ========================================================================== */

.rcp--sp {
  --spx: calc(100vw / 640);
  background-color: var(--rcp-bg);
  color: var(--rcp-text);
  font-family: var(--rcp-font-ja);
  line-height: 1.8;
}

/* ---------- MV (SP) ---------- */

.rcp--sp .rcp-mv {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.rcp--sp .rcp-thumbs__title{
  font-family: var(--rcp-font-ja-serif);
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  line-height: calc(60 / 28);
  color: var(--rcp-text);
  letter-spacing: 0.04em;
  position: relative;
}

.rcp--sp .rcp-thumbs__title::before{
  position: absolute;
  content: '';
  display: block;
  width: 106px;
  height: 1px;
  top: 35%;
  left: 15px;
  transform: translateY(-50%);
  background-color: var(--rcp-text);
  margin-top: 10px;
  margin-inline: auto;
}

.rcp--sp .rcp-thumbs__title::after{
  position: absolute;
  content: '';
  display: block;
  width: 106px;
  height: 1px;
  top: 35%;
  right: 15px;
  transform: translateY(-50%);
  background-color: var(--rcp-text);
  margin-top: 10px;
  margin-inline: auto;
}

.rcp--sp .rcp-mv__img {
  margin-top: calc(313 * var(--spx));
  width: calc(100% + 22px);
  margin-left: calc(-44 * var(--spx));
  height: calc(442 * var(--spx));
}

.rcp--sp .rcp-mv__img img {
  width: 100%;
  height: auto;
  display: block;
}

.rcp--sp .rcp-mv__content {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 100%;
  width: 100%;
  margin-inline:auto ;
}

.seiro--sp .seiro-mv__label {
  display: inline-block;
  max-width: calc(160 * var(--spx));
}

.seiro--sp .seiro-mv__label img {
  height: calc(34 * var(--spx));
  width: auto;
  display: block;
}

.rcp--sp .rcp-mv__subtitle {
  font-family: var(--rcp-font-ja-serif);
  font-size: calc(20 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: 1;
  margin-top: calc(32 * var(--spx));
  letter-spacing: 0.04em;
}

.rcp--sp .rcp-mv__title {
 font-family: var(--rcp-font-ja-serif);
  font-size: calc(20 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: 1;
  margin-top: calc(35 * var(--spx));
  max-width: calc(410 * var(--spx));
  width: 100%;
  letter-spacing: 0.04em;
  margin-inline: auto;
}

.rcp--sp .rcp-mv__title img {
  width: 100%;
  height: auto;
  display: inline-block;
}

/* ---------- Lead (SP) ---------- */

.rcp--sp.rcp-lead {
  padding: calc(49 * var(--spx)) 0 calc(34 * var(--spx));
  padding-bottom: 0;
}

.rcp--sp .rcp-lead__inner {
  max-width: 640px;
  width: 100%;
  padding-inline: 22px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp--sp .rcp-lead__text {
  font-family: var(--rcp-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--rcp-text);
  text-align: left;
  line-height: calc(42 / 24);
}

/* ---------- Thumbs (SP) ---------- */

.rcp--sp .rcp-thumbs {
  padding: calc(17 * var(--spx)) 0 calc(34 * var(--spx));
}

.rcp--sp .rcp-thumbs__inner {
  max-width: 600px;
  width: 100%;
  padding-inline: 40px;
  margin-inline: auto;
  box-sizing: border-box;
  margin-top: calc(35 * var(--spx));
}

.rcp--sp .rcp-thumbs__list {
  display: flex;
  justify-content: center;
  gap: calc(17 * var(--spx));
  list-style: none;
  padding: 0;
  margin: 0;
}

.rcp--sp .rcp-thumbs__item {
  width: calc(102 * var(--spx));
  text-align: center;
}

.rcp--sp .rcp-thumbs__link {
  display: block;
  text-decoration: none;
  color: var(--rcp-text);
  touch-action: manipulation;
}

.rcp--sp .rcp-thumbs__img {
  max-width: calc(211 * var(--spx));
  width: 100%;
  height: auto;
  overflow: hidden;
}

.rcp--sp .rcp-thumbs__img img {
  width: 100%;
  height: auto;
  display: block;
  transition: none;
  transform: none;
}

.rcp--sp .rcp-thumbs__name {
  font-family: var(--rcp-font-ja);
  font-size: calc(20 * var(--spx));
  font-weight: 700;
  color: var(--rcp-text);
  line-height: calc(24.69 / 20);
  letter-spacing: 0.123em;
  padding-bottom: calc(47 * var(--spx) );
}

.rcp--sp .rcp-thumbs__link:hover .rcp-thumbs__img img {
  transform: scale(1.001);
}

/* ---------- Banner (SP) ---------- */

.rcp--sp.rcp-banner {
  text-align: center;
  padding-top: calc(85 * var(--spx));
}

.rcp--sp.rcp-banner-2 {
  padding-top: calc(60 * var(--spx));
  padding-bottom: calc(106 * var(--spx));
}

.rcp--sp.rcp-banner-3 {
  padding-top: calc(85 * var(--spx));
  padding-bottom: calc(106 * var(--spx));
}

.rcp--sp.rcp-banner-4 {
  padding-bottom: calc(74 * var(--spx));
}
.rcp--sp .rcp-banner__inner {
  max-width: calc(640 * var(--spx));
  width: 100%;
  padding-inline: calc(20 * var(--spx));
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp--sp .rcp-banner__link {
  display: inline-block;
}

.rcp--sp .rcp-banner__link img {
  max-width: 100%;
  height: auto;
  display: block;
}

.recipe-material__group-a tr th,
.recipe-material__group-a tr td {
  border-bottom: none;
}

.recipe-material__group-a .cell-line {
  display: block;
  padding-bottom: 6px;
  border-bottom: 1px dotted #9a9a9a;
}

.recipe-material__group-a tr:last-child .cell-line {
  border-bottom: none;
}

/* ---------- Recipe Section (SP) ---------- */

.rcp--sp.rcp-section {
  background-color: var(--rcp-bg);
  padding-bottom: calc(39 * var(--spx));
  /* -webkit-transform: translateZ(0); Safari サブピクセル線の防止 */
  /* transform: translateZ(0); */
}

.rcp--sp .rcp-section--white {
  background-color: var(--rcp-bg-white);
}

.rcp--sp .rcp-section__inner {
  max-width: 640px;
  width: 100%;
  padding-inline: 40px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp--sp .rcp-section__label {
  text-align: center;
  margin-inline: auto;
}

.rcp--sp .rcp-section__label img {
  height: auto;
  width: 100%;
  display: inline-block;
}

.rcp--sp .rcp-section__content {
  display: block;
  margin-top: calc(26 * var(--spx));
  margin-left: calc(39 * var(--spx));
}

.rcp-section--reverse-sp .rcp-section__content {
  margin-right: calc(39 * var(--spx));
  margin-left: 0;
}

.rcp--sp .rcp-section__body {
  width: 100%;
  text-align: center;
}

.rcp--sp .rcp-section__photo {
  width: 100%;
  margin-top: calc(45 * var(--spx));
}

.rcp--sp .rcp-section__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.rcp--sp .rcp-section__title {
  font-family: var(--rcp-font-ja-serif);
  font-size: calc(42 * var(--spx));
  font-weight: 300;
  color: var(--rcp-text);
  line-height: calc(60 / 42);
  letter-spacing: 0;
  margin-top: calc(-6 * var(--spx));
}

.rcp--sp .rcp-section__desc {
  font-family: var(--rcp-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--rcp-text);
  line-height: 1.5;
  margin-top: calc(32 * var(--spx));
  letter-spacing: 0;
}

.rcp--sp .rcp-section__steps {
  margin-top: calc(37  * var(--spx));
}

.rcp--sp .rcp-step {
  display: flex;
  align-items: flex-start;
  margin-top: 0;
  flex-direction: column;
  padding-block: calc(31 * var(--spx));
  padding-bottom: calc(49 * var(--spx));
  padding-left: 0;
  padding-right: 0;
  max-width:calc(521 * var(--spx)) ;
  width: 100%;
  gap: 0;
  background-color: #ffffff;
}

.rcp--sp .rcp-step:first-child {
  margin-top: 0;
}

.rcp--sp .rcp-step__num {
  flex-shrink: 0;
  font-size: calc(24 * var(--spx));
  font-weight: 700;
  color: var(--rcp-text);
  line-height: calc(40 / 24);
  letter-spacing: 0.04em;
  background: #cfcfbd;
  color: #ffffff;
  padding-block: calc(10 * var(--spx));
  text-align: left;
  max-width:calc(521 * var(--spx)) ;
  width: 100%;
}

.rcp--sp .rcp-step__num p{
margin-left: calc(50 * var(--spx));
color: #ffffff;
}

.rcp--sp .rcp-step__num p span{
font-size: calc(32 * var(--spx));
color: #ffffff;
font-family: "Roboto", sans-serif;
font-weight: 400;
}

.rcp--sp .rcp-step__num--2 {
  background: #e6c153;
}

.rcp--sp .rcp-step__num--3 {
  background: #dabc8c;
}

.rcp--sp .rcp-step__num img {
  width: 100%;
  height: auto;
  display: block;
}

.rcp--sp .rcp-step__arrow-img{
  padding-block: calc(15 * var(--spx));
  width: calc(27 * var(--spx));
  margin-inline: auto;
  margin-bottom: calc(8 * var(--spx));
}

.rcp--sp .rcp-step__text {
  font-family: var(--rcp-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--rcp-text);
  line-height: calc(38 / 24);
  flex: 1;
  text-align: left;
  margin-inline:calc(50 * var(--spx)) ;
}

/* ---------- Process (SP) ---------- */

.rcp--sp .rcp-process {
  margin-top: 5.333vw;
}

.rcp--sp .rcp-process__inner {
  max-width: 600px;
  width: 100%;
  padding-inline: 40px;
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp--sp .rcp-process__list {
  display: flex;
  justify-content: center;
  gap: 4vw;
}

.rcp--sp .rcp-process__item {
  flex: 1;
  text-align: center;
  margin-inline: auto;
  max-width: calc(321 * var(--spx));
  margin-top: calc(29 * var(--spx));
  width: 100%;
}

.rcp--sp .rcp-process__img {
  aspect-ratio: 1;
  overflow: hidden;
  max-width: calc(321 * var(--spx));
  width: 100%;
  height: auto;
}

.rcp--sp .rcp-process__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.rcp--sp .rcp-process__caption {
  font-family: var(--rcp-font-ja);
  font-size: 2.667vw;
  font-weight: 400;
  color: var(--rcp-text);
  margin-top: 1.333vw;
  line-height: 1.6;
}

/* ---------- Bottom Banner (SP) ---------- */

.rcp--sp.rcp-bottom-banner {
  padding-top: calc(108 * var(--spx));
  padding-bottom: calc(57 * var(--spx));
  text-align: center;
  background: #ffffff;
}



.rcp--sp .rcp-bottom-banner__inner {
  max-width: calc(640 * var(--spx));
  width: 100%;
  padding-inline: calc(20 * var(--spx));
  margin-inline: auto;
  box-sizing: border-box;
}

.rcp--sp .rcp-bottom-banner__link {
  display: inline-block;
}

.rcp--sp .rcp-bottom-banner__link img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ---------- Thumbs (SP) 横スクロール化 ---------- */
.rcp--sp .rcp-thumbs__inner {
  max-width: 100%;
  padding-inline: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.rcp--sp .rcp-thumbs__list {
  display: flex;
  justify-content: flex-start;
  gap: calc(17 * var(--spx));
  width: max-content;
  padding: 0 40px;
  padding-inline: calc(20 * var(--spx));
  margin: 0;
  flex-wrap: nowrap;
}

.rcp--sp .rcp-thumbs__item {
  width: calc(211 * var(--spx));
  flex: 0 0 auto;
}

.rcp--sp .rcp-thumbs__img {
  max-width: none;
  width: calc(211 * var(--spx));
}

.rcp--sp .rcp-thumbs__name {
  min-height: calc(72 * var(--spx));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rcp--sp .rcp-thumbs__name::before{
  bottom: 25px;
}