@charset "UTF-8";
@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@200;300;400;500;700&display=swap');


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

:root {
  --seiro-orange: #e49a2b;
  --seiro-text: #222222;
  --seiro-bg: #f7f4eb;
  --seiro-font-ja: 'Noto Sans JP', sans-serif;
  --seiro-font-ja-2: 'Noto Serif JP', serif;
  --seiro-font-en: 'Montserrat', sans-serif;
  --seiro-font-script: 'Dancing Script', cursive;
}

.seiro-current{
  color: #666666;
}


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

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

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

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

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

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

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

.seiro-mv__content {
  /* flex: 0 0 24.77%;    317 / 1280 */
  flex: 0 0 317px;
  /* margin-left: -5.08%;  -65 / 1280 overlap */
  margin-left: -65px;
  /* margin-right: 10.55%; 135 / 1280 */
  margin-right: 135px;
  text-align: center;
  margin-top: 13px;
}

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

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

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

.seiro-mv__title {
  font-family: var(--seiro-font-ja-2);
  font-size: 62px;
  font-weight: 200;
  color: var(--seiro-text);
  margin-top: 16px;
  line-height: calc(80 / 62);
}

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

.seiro-lead {
  padding: 60px 0;
}

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

.seiro-lead__text {
  font-family: var(--seiro-font-ja);
  font-size: 14px;
  font-weight: 400;
  color: var(--seiro-text);
  text-align: center;
  line-height: calc(26.5 / 14);
  letter-spacing: 0.123em;
}

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

.seiro-banner {
  text-align: center;
}

.seiro-banner-bottom{
  padding-bottom: 63px;
}

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

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

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

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

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

.seiro-profile__sns a{
  transition: opacity 0.3s ease;
}

.seiro-profile__sns a:hover{
  opacity: 0.7;
}

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

.seiro-recipe-banner__link:hover{
  opacity: 0.7;
}

/* ---------- Card (alternating sections) ---------- */

.seiro-card {
  padding: 56px 0;
}

.seiro-card__inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4.77%;          /* 61 / 1280 */
}

.seiro-card--reverse .seiro-card__inner {
  flex-direction: row-reverse;
}

.seiro-card__body {
  /* flex: 0 0 34.06%;    436 / 1280 */
  flex: 0 0 436px;
  margin-left: 12.5%;  /* 160 / 1280 */
}

.seiro-card--reverse .seiro-card__body {
  margin-left: 0;
  margin-right: 12.5%;
}

.seiro-card__img {
  flex: 1 1 0;
  min-width: 0;
}

.seiro-card__img img {
  width: 100%;
  height: auto;
  display: block;
}

.seiro-card__img--reverse {
  /* reverse側も flex:1 で左端に張り付く */
}

.seiro-card__label {
  font-family: var(--seiro-font-en);
  font-size: 13px;
  font-weight: 500;
  color: var(--seiro-orange);
  letter-spacing: 0.14em;
  line-height: 1;
}

.seiro-card__heading {
  font-family: var(--seiro-font-ja-2);
  font-size: 36px;
  font-weight: 300;
  color: var(--seiro-text);
  line-height: calc(60 / 36);
  margin-top: 25px;
  letter-spacing: 0.04em;
}

.seiro-card__text {
  font-family: var(--seiro-font-ja);
  font-size: 14px;
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(32 / 14);
  margin-top: 24px;
  letter-spacing: 0.1em;
}

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

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

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

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

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

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

.seiro--sp .seiro-mv__content {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin-inline: auto;
  max-width: calc(360 * var(--spx));
  width: 100%;
  margin-top: 0;
}

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

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

.seiro--sp .seiro-mv__title {
  font-family: var(--seiro-font-ja-2);
  font-size: calc(58 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: 1.2;
  margin-top: calc(10 * var(--spx));
  letter-spacing: 0.04em;
}

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

.seiro--sp.seiro-lead {
  padding-top: calc(51 * var(--spx));
  padding-bottom: calc(51 * var(--spx));
}

.seiro--sp .seiro-lead__inner {
  max-width: calc(640 * var(--spx));
  width: 100%;
  padding-inline: calc(22 * var(--spx));
  margin-inline: auto;
  box-sizing: border-box;
}

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

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

.seiro--sp .seiro-banner {
  text-align: center;
}

.seiro--sp.seiro-banner-bottom{
  padding-bottom: calc(77 * var(--spx));
}

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

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

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

/* ---------- Card (SP) ---------- */

.seiro--sp.seiro-card {
  padding: calc(57 * var(--spx)) 0;
}


.seiro--sp.seiro-card--2 {
  padding-top: calc(64 * var(--spx));
  padding-bottom: calc(72 * var(--spx));
}
.seiro--sp .seiro-card__inner {
  max-width: calc(640 * var(--spx));
  width: 100%;
  padding-inline: calc(22 * var(--spx));
  margin-inline: auto;
  box-sizing: border-box;
  display: block;
}

.seiro--sp .seiro-card__body {
  width: 100%;
  margin-left: 0;
  max-width: calc(640 * var(--spx));
  text-align: center;
}

.seiro--sp .seiro-card__img {
  width: 100%;
  margin-top: calc(51 * var(--spx));
  width: calc(100% + 22px);
  margin-right: calc(-22 * var(--spx));
}

.seiro--sp .seiro-card--reverse .seiro-card__img {
  margin-top: calc(34 * var(--spx));
}

.seiro--sp .seiro-card__img-2 {
  margin-right: 0;
  margin-left: calc(-22 * var(--spx));
}

.seiro--sp .seiro-card__img img {
  width: 100%;
  height: auto;
  display: block;
}

.seiro--sp .seiro-card__label {
  font-family: var(--seiro-font-en);
  font-size: calc(18 * var(--spx));
  font-weight: 500;
  color: var(--seiro-orange);
  letter-spacing: 0.14em;
  line-height: calc(56 / 18);
}

.seiro--sp .seiro-card__heading {
  font-family: var(--seiro-font-ja-2);
  font-size: calc(42 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(60 / 42);
  margin-top: calc(-2 * var(--spx));
  letter-spacing: 0.04em;
  margin-left: calc(27 * var(--spx));
}

.seiro--sp .seiro-card__text {
  font-family: var(--seiro-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(42 / 24);
  margin-top: calc(26 * var(--spx));
  text-align: left;
  letter-spacing: 0;
}

/* ==========================================================================
   PC - Three Step
   ========================================================================== */

.seiro-step {
  background-color: var(--seiro-bg);
  padding: 80px 0;
  padding-top: 73px;
}

.seiro-step__inner {
  max-width: 1200px;
  padding-top: 96px;
  padding-bottom: 92px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
  background: #fbfaf5;
}

.seiro-step__label {
  text-align: center;
  max-width: 193px;
  width: 100%;
  margin-inline: auto;
}

.seiro-step__label img {
  height: auto;
  width: 100%;
  display: inline-block;
}

.seiro-step__heading {
  font-family: var(--seiro-font-ja-2);
  font-size: 36px;
  font-weight: 300;
  color: var(--seiro-text);
  text-align: center;
  line-height: calc(60 / 36);
  margin-top: 8px;
  letter-spacing: 0.04em;
  position: relative;
}

.seiro-step__heading::after {
  content: '';
  position: absolute;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 106px;
  height: 2px;
  background-color: #e49a2b;
  margin-top: 8px;
}

.seiro-step__row {
  max-width: 1010px;
  margin-inline: auto;
  padding-inline: 25px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 102px;
  gap: 66px;
}

.seiro-step__row-2 {
  gap: 63px;
}

.seiro-step__row--reverse {
  flex-direction: row-reverse;
}

.seiro-step__row--sub {
  margin-top: 40px;
  align-items: center;
}

.seiro-step__row .seiro-step__media {
  width: 47%;
}

.seiro-step__row .seiro-step__body {
  width: 43%;
}

.seiro-step__row .seiro-step__body-2 {
  width: 33.6%;
}

.seiro-step__row .seiro-step__media--horizontal {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  width: 56.8%;
}

.seiro-step__media--horizontal {
  display: flex;
  gap: 16px;
}

.seiro-step__media--horizontal .seiro-step__image {
  flex: 1;
}

.seiro-step__image-wrap {
  display: flex;
  gap: 17px;
  align-items: flex-end;
  margin-top: 60px;
}

.seiro-step__image-2 {
  /* max-width: calc(213 * var(--pcx)); */
  width: 168%;
}

.seiro-step__image-3 {
  max-width: 276px;
  width: 100%;
}

.seiro-step__image img {
  width: 100%;
  height: auto;
  display: block;
}

.seiro-step__image--round {
  width: 200px;
}

.seiro-step__image--round img {
  border-radius: 50%;
}

.seiro-step__row--sub .seiro-step__body {
  width: auto;
  flex: 1;
}

.seiro-step__row--sub .seiro-step__image--round {
  margin-left: 30px;
}

.seiro-step__text {
  font-family: var(--seiro-font-ja);
  font-size: 14px;
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(32 / 14);
}

.seiro-step__text-2{
  line-height: 1.8;
}

.seiro-step__text-3 {
  letter-spacing: .02em;
}

.seiro-step__text-4 {
  margin-top: 14px;
  line-height: calc(20 / 14);
}

.seiro-step__media .seiro-step__image + .seiro-step__image {
  margin-top: 16px;
}

.seiro-step__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.seiro-step__note {
  width: 48%;
}

/* ==========================================================================
   PC - Profile
   ========================================================================== */

.seiro-profile {
  padding-bottom: 80px;
}

.seiro-profile__inner {
  max-width: 1010px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
}

.seiro-profile__card {
  display: flex;
  align-items: flex-start;
  border: 1px solid #222222;
  padding: 50px;
}

.seiro-profile__photo {
  width: 208px;
  flex-shrink: 0;
}

.seiro-profile__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.seiro-profile__body {
  margin-left: 36px;
  flex: 1;
}

.seiro-profile__role {
  font-family: var(--seiro-font-ja-2);
  font-size: 13px;
  font-weight: 300;
  color: #888;
  line-height: calc(27 / 13);
  letter-spacing: 0.04em;
}

.seiro-profile__name {
  font-family: var(--seiro-font-ja-2);
  font-size: 26px;
  font-weight: 300;
  color: var(--seiro-text);
  margin-top: 4px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.seiro-profile__name-en {
  font-family: var(--seiro-font-ja-2);
  font-size: 10px;
  font-weight: 400;
  color: #888;
  margin-left: 12px;
  line-height: calc(27 / 10);
  letter-spacing: 0.01em;
  position: relative;
  top: -6px;
}

.seiro-profile__bio {
  font-family: var(--seiro-font-ja);
  font-size: 14px;
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(25 / 14);
  margin-top: 18px;
  letter-spacing: 0.04em;
}

.seiro-profile__sns {
  margin-top:17px;
}

.seiro-profile__sns a {
  display: inline-flex;
  align-items: center;
  color: var(--seiro-text);
  text-decoration: none;
  font-family: var(--seiro-font-en);
  font-size: 13px;
}

.seiro-profile__sns img {
  height: 37px;
  width: 100%;
}

/* ==========================================================================
   PC - Use
   ========================================================================== */

.seiro-use {
  padding: 25px 0 80px;
}

.seiro-use__inner {
  max-width: 620px;
  width: 100%;
  padding-inline: 25px;
  padding-block: 44px;
  margin-inline: auto;
  box-sizing: border-box;
  text-align: center;
  background-color: #ffffff;
  position: relative;
}

.seiro-use__heading {
  text-align: center;
  width: 350px;
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
}

.seiro-use__heading img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: inline-block;
}

.seiro-use__img {
  max-width: 366px;
  margin-inline: auto;
}

.seiro-use__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   SP - Three Step
   ========================================================================== */

.seiro--sp.seiro-step {
  background-color: var(--seiro-bg);
  padding-top: calc(92 * var(--spx));
  padding-bottom: calc(101 * var(--spx));
}

.seiro--sp .seiro-step__inner {
  max-width: calc(640 * var(--spx));
  width: 100%;
  padding-inline: calc(22 * var(--spx));.seiro--sp .seiro-step__label
  margin-inline: auto;
  box-sizing: border-box;
  padding-bottom: calc(100 * var(--spx));
}

.seiro--sp .seiro-step__label {
  text-align: center;
  max-width: calc(193 * var(--spx));
  width: 100%;
  margin-inline: auto;
}

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

.seiro--sp .seiro-step__heading {
  font-family: var(--seiro-font-ja-2);
  font-size: calc(42 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  text-align: center;
  line-height: calc(60 / 42);
  margin-top: calc(7 * var(--spx));
  letter-spacing: 0;
  position: relative;
  margin-left: calc(30 * var(--spx));
  letter-spacing: 0.04em;
}

.seiro--sp .seiro-step__heading::after {
  content: "";
  position: absolute;
  top: unset;
  bottom: calc(-29 * var(--spx));
  left: 50%;
  transform: translateX(-50%);
  width: calc(106 * var(--spx));
  height: 2px;
  background: #e49a2b;
}


.seiro--sp .seiro-step__body {
  margin-top: calc(34 * var(--spx));
}

.seiro--sp .seiro-step__text {
  font-family: var(--seiro-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(42 / 24);
  margin-top: calc(14 * var(--spx));
  letter-spacing: 0;
}

.seiro--sp .seiro-step__text-2 {
  font-size: calc(22 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(34 / 22);
  letter-spacing: 0;
  margin-bottom: calc(62 * var(--spx));
  margin-top: calc(24 * var(--spx));
}

.seiro--sp .seiro-step__text-3 {
  font-size: calc(22 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(34 / 22);
  letter-spacing: 0.04em;
  margin-top: calc(15 * var(--spx));
}



.seiro--sp .seiro-step__image {
  margin-top: calc(89 * var(--spx));
}

.seiro--sp .seiro-step__image img {
  width: 100%;
  height: auto;
  display: block;
}

.seiro--sp .seiro-step__image-1 {
  width: calc(100% + 22px);
  margin-right: calc(-22 * var(--spx));
}

.seiro--sp .seiro-step__image-2 {
  max-width: calc(382 * var(--spx));
  width: 100%;
  margin-inline: auto;
  margin-top: calc(64 * var(--spx));
}

.seiro--sp .seiro-step__image--round {
  width: calc(341 * var(--spx));
  margin-inline: auto;
}

.seiro--sp .seiro-step__image--round img {
  border-radius: 50%;
}

.seiro--sp .seiro-step__media--horizontal {
  display: flex;
  gap: calc(17 * var(--spx));
  margin-top: calc(76 * var(--spx));
}

.seiro--sp .seiro-step__media--horizontal .seiro-step__image {
  flex: 1;
  margin-top: 0;
}

/* ==========================================================================
   SP - Profile
   ========================================================================== */

.seiro--sp .seiro-profile {
  padding: calc(68 * var(--spx)) 0;
}

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

.seiro--sp .seiro-profile__card {
  display: block;
  border: 2px solid #222222;
  text-align: center;
  padding-top: calc(27 * var(--spx));
  padding-bottom: calc(51 * var(--spx));
  padding-inline: calc(76 * var(--spx));
}

.seiro--sp .seiro-profile__photo {
  max-width: calc(444 * var(--spx));
  width: 100%;
  margin-inline: auto;
  margin-top:calc(35 * var(--spx));
}

.seiro--sp .seiro-profile__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.seiro--sp .seiro-profile__body {
  margin-top: calc(26 * var(--spx));
  margin-left: 0;
}

.seiro--sp .seiro-profile__role {
  font-family: var(--seiro-font-ja-2);
  font-size: calc(22 * var(--spx));
  font-weight: 300;
  color: #888;
  line-height: calc(44.5 / 22);
  letter-spacing: 0.04em;
}

.seiro--sp .seiro-profile__name {
  font-family: var(--seiro-font-ja-2);
  font-size: calc(46 * var(--spx));
  font-weight: 300;
  color: var(--seiro-text);
  margin-top: calc(7 * var(--spx));
  line-height: 1;
  letter-spacing: 0.04em;
}

.seiro--sp .seiro-profile__name-en {
  display: block;
  font-family: var(--seiro-font-ja-2);
  font-size: calc(16 * var(--spx));
  font-weight: 400;
  color: #888;
  margin-top: calc(17 * var(--spx));
  margin-left: 0;
  line-height: calc(44.6 / 16);
  letter-spacing: 0.1em;
}

.seiro--sp .seiro-profile__bio {
  font-family: var(--seiro-font-ja);
  font-size: calc(24 * var(--spx));
  font-weight: 400;
  color: var(--seiro-text);
  line-height: calc(39 / 24);
  margin-top: calc(27 * var(--spx));
  text-align: left;
  letter-spacing: 0.01em;
}

.seiro--sp .seiro-profile__sns {
  margin-top: calc(31 * var(--spx));
}

.seiro--sp .seiro-profile__sns a {
  display: inline-flex;
  align-items: center;
  color: var(--seiro-text);
  text-decoration: none;
  font-family: var(--seiro-font-en);
  font-size: calc(20 * var(--spx));
  max-width: calc(344 * var(--spx));
  width: 100%;
  margin-inline: auto;
}

.seiro--sp .seiro-profile__sns img {
  height:auto;
  width: 100%;
}

/* ==========================================================================
   SP - Use
   ========================================================================== */

.seiro--sp.seiro-use {
  padding-top: calc(96 * var(--spx));
  
}

.seiro--sp .seiro-use__inner {
  max-width: 600px;
  width: 100%;
  padding-inline: 40px;
  margin-inline: auto;
  box-sizing: border-box;
  text-align: center;
  padding-top: calc(54 * var(--spx));
}

.seiro--sp .seiro-use__heading {
  text-align: center;
  max-width: calc(531 * var(--spx));
  width: 100%;
  margin-inline: auto;
  top: calc(-70 * var(--spx));
}

.seiro--sp .seiro-use__heading img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: inline-block;
}

.seiro--sp .seiro-use__img {
  max-width: calc(520 * var(--spx));
  width: 100%;
  margin-inline: auto;
}

.seiro--sp .seiro-use__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   PC - Recipe Banner
   ========================================================================== */

.seiro-recipe-banner {
  padding: calc(88 * var(--px)) 0 0;
  padding-bottom: calc(33 * var(--px));
}

.seiro-recipe-banner__inner {
  max-width: 1010px;
  width: 100%;
  padding-inline: 25px;
  margin-inline: auto;
  box-sizing: border-box;
  text-align: center;
  padding-top: 77px;
}

.seiro-recipe-banner__link {
  display: inline-block;
}

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

/* ==========================================================================
   SP - Recipe Banner
   ========================================================================== */

.seiro--sp.seiro-recipe-banner {
  padding: calc(14 * var(--spx)) 0 calc(34 * var(--spx));
  background: #ffffff;
}

/* .seiro--sp .seiro-recipe-banner__inner {
  max-width: 600px;
  width: 100%;
  padding-inline: 40px;
  margin-inline: auto;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: calc(20 * var(--spx));
} */

.seiro--sp .seiro-recipe-banner__link {
  display: inline-block;
}

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