@charset "UTF-8";
:root {
  --white-color: #fff;
  --black-color: #000000;
  --brown-color: #3f2c22;
  --lightbrown-color: #8b6849;
  --pink-color-500: #ff9792;
  --pink-color-100: #ffded9;
  --pink-color-10: #fff0e1;
  --green-color-500: #87d28d;
  --green-color-100: #edf8ee;
  --green-color-10: #dff1b2;
  --blue-color-500: #85b9ef;
  --blue-color-10: #dfebfa;
  --orange-color-500: #ff995c;
  --orange-color-10: #fff3c5;
  --purple-color-500: #c197d5;
  --purple-color-100: #f6f0f9;
  --yellow-color-100: #fffdc1;
  --font-size: 16;
  --font-zen-maru:'Zen Maru Gothic', serif, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-zen-kaku:'Zen Kaku Gothic Antique', serif, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-noto:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-josefin:'Josefin Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/* ==========================================================================
  ELEMENT RESET
========================================================================== */
.main-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--brown-color);
  font-weight: 500;
  font-family: var(--font-zen-maru);
  position: relative;
}
.main-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.main-container sup {
    font-size: .5em;
}
.main-container__in {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
  非表示
-------------------------------------------------------------------------- */
/* PCで非表示 */
@media all and (min-width: 1025px), print {
  .u-hide-pc {
    display: none;
  }
}
/* PC、タブレットで非表示 */
@media all and (min-width: 768px), print {
  .u-hide-tab-pc {
    display: none;
  }
}
/* タブレットのみ非表示 */
@media all and (min-width: 768px) and (max-width: 1024px) {
  .u-hide-tab {
    display: none;
  }
}
/* SPで非表示 */
@media all and (max-width: 767px) {
  .u-hide-sp {
    display: none;
  }
}
/* --------------------------------------------------------------------------
  行揃え
-------------------------------------------------------------------------- */
.u-center {
  text-align: center;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-center-tab-pc {
    text-align: center;
  }
}
/* SPのみテキストセンター */
@media all and (max-width: 767px) {
  .u-center-sp {
    text-align: center;
  }
}
.u-left {
  text-align: left;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-left-tab-pc {
    text-align: left;
  }
}
/* SPのみテキストセンター */
@media all and (max-width: 767px) {
  .u-left-sp {
    text-align: left;
  }
}
.u-right {
  text-align: right;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-right-tab-pc {
    text-align: right;
  }
}
/* SPのみテキストセンター */
@media all and (max-width: 767px) {
  .u-right-sp {
    text-align: right;
  }
}
.u-justify {
  text-align: justify;
  text-justify: inter-ideograph;
}
.u-combine {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
}
/* --------------------------------------------------------------------------
  強調
-------------------------------------------------------------------------- */
.u-strong {
  font-weight: 700;
}
.u-bold {
  font-weight: 700;
}
.u-medium {
  font-weight: 500;
}

/* --------------------------------------------------------------------------
  背景
-------------------------------------------------------------------------- */
/* color */
.u-color-white {
  color: var(--white-color);
}
.u-color-main-100 {
  color: var(--main-color-100);
}
.u-color-point {
  color: var(--orange-color-500);
}


/* --------------------------------------------------------------------------
  フォント
-------------------------------------------------------------------------- */
.main-container button,
.main-container input,
.main-container optgroup,
.main-container select,
.main-container textarea {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.main-container h1,
.main-container h2,
.main-container h3,
.main-container h4,
.main-container h5,
.main-container h6 {
  font-weight: 700;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.u-font-zen {
  font-family: var(--font-family-zen-new);
}
.u-font-jo {
  font-family: var(--font-family-jost);
}

/* --------------------------------------------------------------------------
  ROOT FONT SIZE
-------------------------------------------------------------------------- */
/* 16px */
.main-container {
  font-size: 16px;
  line-height: 1.5;
}
body {
  font-size: 1rem;
}
@media all and (min-width: 768px) and (max-width: 1365px) {
  /* 14px */
  .main-container {
    font-size: 16px;
  }
}


/* ==========================================================================
  HEADER COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  見出し
-------------------------------------------------------------------------- */
/* LV2 */
@media all and (min-width: 768px), print {
  .c-header-lv2 {
    --header-size: 32;
  }
  .c-header-lv2__in {
    position: relative;
    display: block;
    text-align: center;
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
    padding-bottom: calc(31 / var(--font-size) * 1em);
  }
  .c-header-lv2__in::before {
    content: "";
    display: block;
    width: calc(75 / var(--font-size) * 1em);
    height: calc(8 / var(--font-size) * 1em);
    -webkit-mask-image: url("/assets/img/common/txt-deco_wavy.svg");
    mask-image: url("/assets/img/common/txt-deco_wavy.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--main-color-100);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

  }
  .c-header-lv2__sub-txt {
    font-weight: 600;
    font-size: calc(20 / 28 * 1em);
    font-family: var(--font-family-jost);
    line-height: 1.7;
    display: block;
    padding-top: calc(50 / var(--font-size) * 1em);
    padding-bottom: calc(3 / var(--font-size) * 1em);
    margin-bottom: calc(3 /var(--font-size) * 1em);
    letter-spacing: calc(20 / 100 * 1em);
    position: relative;
  }
  .c-header-lv2__txt {
    color: var(--main-color-100);
    font-weight: 700;
    font-family: var(--font-family-zen-new);
    line-height: 1.3;
    letter-spacing: calc(0 / 100 * 1em);
  }
  .c-header-lv2__txt--sub {
    display: block;
    font-size: calc(24 / var(--header-size)  * 1em);
    color: var(--main-color-100);
    font-weight: 700;
    font-family: var(--font-family-zen-new);
    line-height: 1.3;
    letter-spacing: calc(0 / 100 * 1em);
    margin-top: calc(24 / var(--font-size) * 1em);
  }
  .c-header-lv2--reverse .c-header-lv2__sub-txt {
    color: var(--yellow-color-100);
  }
  .c-header-lv2--reverse .c-header-lv2__sub-txt::before {
    background: var(--white-color);
  }
  .c-header-lv2--reverse .c-header-lv2__txt {
    color: var(--white-color);
  }

  .c-header-lv2--s {
    --header-size: 28;
  }
}
@media all and (max-width: 767px) {
  .c-header-lv2 {
    --header-size: 26;
  }
  .c-header-lv2__in {
    position: relative;
    display: block;
    text-align: center;
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
    padding-bottom: calc(30 / var(--font-size) * 1em);
  }
  .c-header-lv2__in::before {
    content: "";
    display: block;
    width: calc(64 / var(--font-size) * 1em);
    height: calc(7 / var(--font-size) * 1em);
    -webkit-mask-image: url("/assets/img/common/txt-deco_wavy.svg");
    mask-image: url("/assets/img/common/txt-deco_wavy.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--main-color-100);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

  }
  .c-header-lv2__sub-txt {
    font-weight: 600;
    font-size: calc(20 / 28 * 1em);
    font-family: var(--font-family-jost);
    line-height: 1.7;
    display: block;
    padding-top: calc(50 / var(--font-size) * 1em);
    padding-bottom: calc(3 / var(--font-size) * 1em);
    margin-bottom: calc(3 /var(--font-size) * 1em);
    letter-spacing: calc(20 / 100 * 1em);
    position: relative;
  }
  .c-header-lv2__txt {
    color: var(--main-color-100);
    font-weight: 700;
    font-family: var(--font-family-zen-new);
    line-height: 1.3;
    letter-spacing: calc(0 / 100 * 1em);
  }
  .c-header-lv2__txt--sub {
    display: block;
    font-size: calc(16 / var(--header-size)  * 1em);
    color: var(--main-color-100);
    font-weight: 700;
    font-family: var(--font-family-zen-new);
    line-height: 1.3;
    letter-spacing: calc(0 / 100 * 1em);
    margin-top: calc(24 / var(--font-size) * 1em);
  }
  .c-header-lv2__txt--small {
    font-size: calc(18 / var(--header-size)  * 1em);
  }
  .c-header-lv2--reverse .c-header-lv2__sub-txt {
    color: var(--yellow-color-100);
  }
  .c-header-lv2--reverse .c-header-lv2__sub-txt::before {
    background: var(--white-color);
  }
  .c-header-lv2--reverse .c-header-lv2__txt {
    color: var(--white-color);
  }

  .c-header-lv2--s {
    --header-size: 28;
  }
}

/* LV3 */
@media all and (min-width: 768px), print {
  .c-header-lv3 {
    --header-size: 20;
    --header-line-height: 1.5;
    --header-deco-color: var(--primary-color-400);
  }
  .c-header-lv3__in {
    display: block;
    position: relative;
    display: flex;
  }
  .c-header-lv3__in::before {
    content: "";
    display: block;
    width: calc(40 / var(--font-size) * 1em);
    height: calc(4 / var(--font-size) * 1em);
    background-color: var(--header-deco-color);
    flex-shrink: 0;
    margin-top: calc((var(--header-size) * var(--header-line-height) - 4) / 2 / var(--font-size) * 1em);
    border-radius: 9999px;
  }
  .c-header-lv3__txt {
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
    font-weight: 700;
    line-height: var(--header-line-height);
    padding-left: calc(20 / var(--font-size) * 1em);
    display: block;
  }
}
@media all and (max-width: 767px) {
  .c-header-lv3 {
    --header-size: 20;
    --header-line-height: 1.5;
    --header-deco-color: var(--primary-color-400);
  }
  .c-header-lv3__in {
    display: block;
    position: relative;
    display: flex;
  }
  .c-header-lv3__in::before {
    content: "";
    display: block;
    width: calc(40 / var(--font-size) * 1em);
    height: calc(4 / var(--font-size) * 1em);
    background-color: var(--header-deco-color);
    flex-shrink: 0;
    margin-top: calc((var(--header-size) * var(--header-line-height) - 4) / 2 / var(--font-size) * 1em);
    border-radius: 9999px;
  }
  .c-header-lv3__txt {
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
    font-weight: 700;
    line-height: var(--header-line-height);
    padding-left: calc(20 / var(--font-size) * 1em);
    display: block;
  }
}

/* ==========================================================================
  TEXT COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.6;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1em);
    font-weight: 500;
    line-height: var(--txt-line-height);
    letter-spacing: 0;
    font-feature-settings: "palt";
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

  .c-txt sub{
    top: -0.5em;
  }

  .c-txt sub {
    bottom: -0.1em;
  }

  /* L */
  .c-txt--xxxxl {
    --txt-font-size: 28;
  }
  .c-txt--xxxl {
    --txt-font-size: 24;
  }
  .c-txt--xxl {
    --txt-font-size: 22;
  }
  .c-txt--xl {
    --txt-font-size: 20;
  }
  .c-txt--l,
  .c-txt--l-sp {
    --txt-font-size: 18;
  }

  /* M */
  .c-txt--m,
  .c-txt--m-sp {
    --txt-font-size: 16;
  }

  /* S */
  .c-txt--s,
  .c-txt--s-sp {
    --txt-font-size: 14;
  }
  .c-txt--xs,
  .c-txt--xs-sp {
    --txt-font-size: 12;
  }
  .c-txt--xxs {
    --txt-font-size: 11;
  }
  .c-txt--xxxs {
    --txt-font-size: 10;
  }

  .c-txt--underline {
  }
  .u-text-link {
    color: var(--main-color-100);
    text-decoration: underline;
  }
  .u-text-link:hover {
    text-decoration: none;
  }

}
@media all and (max-width: 767px) {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.6;
    font-size: calc(var(--txt-font-size) / 375 * 100vw);
    font-feature-settings: "palt";
    font-weight: 500;
    line-height: var(--txt-line-height);
    letter-spacing: 0;
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

  .c-txt sub{
    top: -0.5em;
  }

  .c-txt sub {
    bottom: -0.1em;
  }

  /* L */
  .c-txt--xxxxl {
    --txt-font-size: 18;
  }
  .c-txt--xxxl {
    --txt-font-size: 24;
  }
  .c-txt--xxl {
    --txt-font-size: 22;
  }
  .c-txt--xl {
    --txt-font-size: 20;
  }
  .c-txt--l {
    --txt-font-size: 18;
  }

  /* M */
  .c-txt--m,
  .c-txt--l-sp {
    --txt-font-size: 16;
  }
  .c-txt--m-sp {
    --txt-font-size: 14;
  }
  .c-txt--s-sp {
    --txt-font-size: 13;
  }

  /* S */
  .c-txt--s {
    --txt-font-size: 14;
  }
  .c-txt--xs,
  .c-txt--s-sp {
    --txt-font-size: 12;
  }
  .c-txt--xxs {
    --txt-font-size: 11;
  }
  .c-txt--xxxs,
  .c-txt--xs-sp {
    --txt-font-size: 10;
  }

  .c-txt--underline {
  }

  .u-text-link {
    color: var(--main-color-100);
    text-decoration: underline;
  }

}
/* --------------------------------------------------------------------------
  テキスト 番号強調
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
}
@media all and (max-width: 767px) {
}
/* --------------------------------------------------------------------------
  リスト テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.6;
    --list-rate: var(--list-font-size) / 16;
    --list-desc-color: var(--main-color-100);
    --gap-y: 6;
    --gap-x: 0;
  }
  .c-list-item {
    position: relative;
    display: flex;
    font-size: calc(var(--list-font-size) / var(--font-size) * 1em);
    line-height: var(--list-line-height);
  }
  .c-list-item + .c-list-item {
    margin-top: calc(var(--gap-y) / var(--font-size) * 1em);
  }
  .c-list-item::before {
    content: "・";
  }
  .c-list--desc .c-list-item::before {
    content: "";
    display: block;
    width: calc(var(--list-font-size) / var(--font-size) * 1em);
    height: calc(var(--list-font-size) / var(--font-size) * 1em);
    border-radius: 9999px;
    background-color: var(--list-desc-color);
    margin-top: calc((var(--list-font-size) * var(--list-line-height) - var(--list-font-size)) / 2 / var(--font-size) * 1em);
    margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1em);
    flex-shrink: 0;
  }
  .c-list-item-head {
    flex-shrink: 0;
  }
  .c-list-item__in {
  }

  /* L */
  .c-list--l {
    --list-font-size: 18;
  }
  /* m */
  .c-list--m {
    --list-font-size: 16;
  }
  /* s */
  .c-list--s {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs {
    --list-font-size: 12;
  }

}
@media all and (max-width: 767px) {
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.6;
    --list-rate: var(--list-font-size) / 16;
    --list-desc-color: var(--main-color-100);
    --gap-y: 6;
    --gap-x: 0;
  }
  .c-list-item {
    position: relative;
    display: flex;
    font-size: calc(var(--list-font-size) / var(--font-size) * 1em);
    line-height: var(--list-line-height);
  }
  .c-list-item + .c-list-item {
    margin-top: calc(var(--gap-y) / var(--font-size) * 1em);
  }
  .c-list-item::before {
    content: "・";
  }
  .c-list--desc .c-list-item::before {
    content: "";
    display: block;
    width: calc(var(--list-font-size) / var(--font-size) * 1em);
    height: calc(var(--list-font-size) / var(--font-size) * 1em);
    border-radius: 9999px;
    background-color: var(--list-desc-color);
    margin-top: calc((var(--list-font-size) * var(--list-line-height) - var(--list-font-size)) / 2 / var(--font-size) * 1em);
    margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1em);
    flex-shrink: 0;
  }

  .c-list-item-head {
    flex-shrink: 0;
  }
  .c-list-item__in {
  }

  /* L */
  .c-list--l {
    --list-font-size: 16;
  }
  /* m */
  .c-list--m{
    --list-font-size: 15;
  }
  /* s */
  .c-list--s,
  .c-list--s-sp {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs {
    --list-font-size: 10;
  }
  /* SP時のみ */
  /* L */
  .c-list-sp--l {
    --list-font-size: 16;
  }
  /* m */
  .c-list-sp--m {
    --list-font-size: 14;
  }
  /* s */
  .c-list-sp--s {
    --list-font-size: 12;
  }
  /* xs */
  .c-list-sp--xs {
    --list-font-size: 10;
  }
}
/* --------------------------------------------------------------------------
  番号付きリスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-num-list {
    --num-list-font-size: 16;
    --num-list-color: var(--main-color-100);
  }
  .c-num-list__dl {
    position: relative;
    padding-left: 2rem;
  }
  .c-num-list__dt {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.95em;
    color: var(--white-color);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.95;
    text-align: center;
    background-color:  var(--num-list-color);
    border-radius: 9999px;
  }
  .c-num-list__dd {
    line-height: 1.5;
    font-size: calc(var(--num-list-font-size) / var(--font-size) * 1em);
  }
}
@media all and (max-width: 767px) {
  .c-num-list {
    --num-list-font-size: 16;
    --num-list-color: var(--main-color-100);
  }
  .c-num-list__dl {
    position: relative;
    padding-left: 2rem;
  }
  .c-num-list__dt {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.95em;
    color: var(--white-color);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.95;
    text-align: center;
    background-color:  var(--num-list-color);
    border-radius: 9999px;
  }
  .c-num-list__dd {
    line-height: 1.5;
    font-size: calc(var(--num-list-font-size) / var(--font-size) * 1em);
  }
}
/* --------------------------------------------------------------------------
  注釈 テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-note {
    --note-txt-font-size: 16;
    --note-position: start;
  }
  .c-note-txt {
    font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1em);
    font-weight: 500;
    line-height: 1.6;
    display: flex;
    justify-content: var(--note-position);
  }
  .c-note-txt::before {
    content: "※";
  }
  .c-note-txt__label {
  }

  /* CENTER */

  .c-note--center {
    --note-position: center;
  }
  .c-note--end {
    --note-position: end;
  }
  .c-note-txt--center,
  .c-note-txt--center-sp {
    display: block;
    text-align: center;
  }
  .c-note-txt--center .c-note-txt::before,
  .c-note-txt--center-sp .c-note-txt::before {
    content: none;
  }

  /* M */
  .c-note--m {
    --note-txt-font-size: 16;
  }
  /* S */
  .c-note--s {
    --note-txt-font-size: 14;
  }
  /* XS */
  .c-note--xs {
    --note-txt-font-size: 12;
  }
  /* XXS */
  .c-note--xxs {
    --note-txt-font-size: 11;
  }
  /* XXXS */
  .c-note--xxxs {
    --note-txt-font-size: 10;
  }

}
@media all and (max-width: 767px) {
  .c-note {
    --note-txt-font-size: 16;
    --note-position: start;
  }
  .c-note-txt {
    font-size: calc(var(--note-txt-font-size) / 375 * 100vw);
    font-weight: 500;
    line-height: 1.6;
    display: flex;
    justify-content: var(--note-position);
    letter-spacing: calc(40 / 1000 * 1em);
  }
  .c-note-txt::before {
    content: "※";
  }
  .c-note-txt__label--deco {
    display: none;
  }
  .c-note-txt__label {
  }

  /* CENTER */
  .c-note--center {
    --note-position: center;
  }
  .c-note-txt--center {
    text-align: center;
  }
  .c-note-txt--center-sp {
    text-align: left;
  }

  /* M */
  .c-note--m {
    --note-txt-font-size: 16;
  }
  /* S */
  .c-note--s,
  .c-note--m-sp {
    --note-txt-font-size: 14;
  }
  /* XS */
  .c-note--xs,
  .c-note--s-sp {
    --note-txt-font-size: 12;
  }
  /* XXS */
  .c-note--xxs {
    --note-txt-font-size: 11;
  }
  /* XXXS */
  .c-note--xxxs {
    --note-txt-font-size: 10;
  }

}


/* ==========================================================================
  BUTTON COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  レイアウト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .l-btn-list {
    --col: 1;
    --gap-x: 32;
    --gap-y: 16;
    --btn-list-w: 1024;

    display: flex;
    justify-content: center;
    gap: calc(var(--gap-y) / var(--font-size) * 1em) calc(var(--gap-x) /var(--btn-list-w) * 100%);
  }
  .l-btn-list.l-btn-list--ico {
    justify-content: start;
  }
  .l-btn-list-item {
    width: calc((100% - (var(--gap-x) / var(--font-size) * 1em) * (var(--col) - 1)) / var(--col));
  }

  /* modifier */
  .l-btn-list--wrap {
    flex-wrap: wrap;
  }
  .l-btn-list--2col {
    --col: 2;
  }
  .l-btn-list--3col {
    --col: 3;
  }
  .l-btn-list--4col {
    --col: 4;
  }
  .l-btn-list--5col {
    --col: 5;
  }
  .l-btn-list--6col {
    --col: 6;
  }

  .l-btn-list--auto .l-btn-list__item {
    width: auto;
  }
}
@media all and (max-width: 767px) {
  .l-btn-list {
    --col: 1;
    --gap-x: 8;
    --gap-y: 16;

    display: flex;
    justify-content: center;
    gap: calc(var(--gap-y) / 375 * 100vw) calc(var(--gap-x) / 375 * 100vw);
  }
  .l-btn-list.l-btn-list--ico {
    justify-content: start;
  }
  .l-btn-list-item {
    width: calc((100% - (var(--gap-x) / var(--font-size) * 1em) * (var(--col) - 1)) / var(--col));
  }

  /* modifier */
  .l-btn-list--wrap {
    flex-wrap: wrap;
  }
  .l-btn-list--2col {
    --col: 2;
  }
  .l-btn-list--3col {
    --col: 3;
  }
  .l-btn-list--4col {
    --col: 4;
  }
  .l-btn-list--5col {
    --col: 5;
  }
  .l-btn-list--6col {
    --col: 6;
  }
  .l-btn-list--1col-sp {
    --col: 1;
  }
  .l-btn-list--2col-sp {
    --col: 2;
  }
  .l-btn-list--3col-sp {
    --col: 3;
  }
  .l-btn-list--4col-sp {
    --col: 4;
  }
  .l-btn-list--5col-sp {
    --col: 5;
  }
  .l-btn-list--6col-sp {
    --col: 6;
  }

  .l-btn-list--auto .l-btn-list__item {
    width: auto;
  }
}


/* --------------------------------------------------------------------------
  ボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-btn {
    --btn-bg-color: var(--pink-color-500);
    --btn-border-color: var(--pink-color-500);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 16;
    --btn-radius: 9999;
    --btn-px: 32;
    /* dot */
    --dot-size: calc(3 / var(--font-size) * 1em);
    --border-color: var(--btn-arrow-color);
    --border-radius: 50%;
    height: 100%;
    display: block;
    transition: all 0.3s;
  }
  .c-btn:hover {
    transform: scale(0.9);
  }
  .c-btn__in {
    --btn-w: 320;
    background: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1em);
    border: calc(2 / var(--font-size) * 1em) solid var(--btn-border-color);
    border-left: 0;
    border-right: 0;
    height: 100%;
    position: relative;
  }
  .c-btn--square .c-btn__in::before {
    background: url("../img/common/link-btn-deco.png") no-repeat center / contain;
    padding-top: calc(88 / var(--btn-w) * 100%);
  }
  .c-btn__in::before {
    content: "";
    width: 100%;
    background: url("../img/common/btn-deco.png") no-repeat center / contain;
    padding-top: calc(68 / var(--btn-w) * 100%);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
  }
  .c-btn__body {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(20.5 / var(--btn-w) * 100%) calc(var(--btn-px) / var(--btn-w) * 100%);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1em);
    height: 100%;
    --btn-body-w: 310;
  }
  .c-btn--square .c-btn__body {
    padding: calc(18.5 / var(--btn-w) * 100%) calc(var(--btn-px) / var(--btn-w) * 100%);
  }
  .c-btn--square .c-btn__body {
    border-radius: calc(12 / var(--font-size) * 1em);
  }
  .c-btn-txt {
    color: var(--btn-txt-color);
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1em);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: calc(70 / 1000 * 1em);
  }
  .c-btn--l .c-btn-txt__label {
    line-height: calc(22 / 18);
  }
  .c-btn-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: calc(var(--btn-px) / 310 * 100%);
  }
  .c-btn-arrow__label {
    display: flex;
    align-items: center;
    margin-left: calc(4 / var(--font-size) * 1em);
    height: 100%;
  }

  .c-btn-arrow__label .c-svg {
    width: calc(11 / var(--font-size) * 1em);
    fill: var(--btn-arrow-color);
  }
  .c-btn--l .c-btn-arrow__label .c-svg {
    width: calc(15 / 26 * 100%);
  }
  /* square */
  .c-btn--square {
    --btn-radius: 16;
  }

  /* fontsize */
  .c-btn--xl {
    --btn-txt-font-size: 20;
  }
  .c-btn--l {
    --btn-txt-font-size: 18;
  }
  .c-btn--m {
    --btn-txt-font-size: 16;
  }
  .c-btn--s {
    --btn-txt-font-size: 13;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
  }

  /* color */
  .c-btn--stroke {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-arrow-color: var(--btn-border-color);
  }
  a.c-btn--stroke:hover {
    --btn-bg-color: var(--btn-border-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
  }
}
@media all and (min-width: 768px) and (max-width: 1064px) {
  .c-btn__in {
    border-radius: calc(var(--btn-radius) / 1064 * 100vw);
  }
}
@media all and (max-width: 767px) {
  .c-btn {
    --btn-bg-color: var(--main-color-100);
    --btn-border-color: var(--main-color-100);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 52;
    --btn-radius: 9999;
    --btn-px: 40;

    display: block;
  }
  .c-btn__in {
    --btn-w: 560;
    background: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / 375 * 100vw);
    border: calc(1 / var(--font-size) * 1em) solid var(--btn-border-color);
    border-left: 0;
    border-right: 0;
    height: 100%;
    transition: all 0.3s;
    position: relative;
  }
  .c-btn--square .c-btn__in::before {
    background: url("../img/common/link-btn-deco_sp.png") no-repeat center / contain;
    padding-top: calc(144 / 750 * 100vw);
    background: url("../img/common/link-btn-deco_sp.png") no-repeat center / contain;
    padding-top: calc(144 / 750 * 100vw);
  }
  .c-btn__in::before {
    content: "";
    width: 100%;
    background: url("../img/common/btn-deco_sp.png") no-repeat center / contain;
    padding-top: calc(104 / 750 * 100vw);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
  }
  .c-btn__body {
    position: relative;
    min-height: calc(104 / 750 * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(8 / 750 * 100vw) calc(40 / 750 * 100vw);
  }
  .c-btn-txt {
    color: var(--btn-txt-color);
    text-align: center;
    width: 100%;
    transition: all 0.3s;
  }
  .c-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / 375 * 100vw);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: calc(5 / 1000 * 1em);
    font-feature-settings: "palt";
  }
  .c-btn-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: calc(80 / 750 * 100vw);
    height: calc(var(--btn-min-height) / var(--font-size) * 1em);
  }
  .c-btn-arrow__label {
    display: flex;
    align-items: center;
    margin-left: calc(12 / var(--font-size) * 1em);
    height: 100%;
  }

  .c-btn-arrow__label .c-svg {
    width: calc(17 / 750 * 100vw);
    fill: var(--btn-arrow-color);
    transition: all 0.3s;
  }

  /* square */
  .c-btn--square {
    --btn-radius: 8;
  }

  /* fontsize */
  .c-btn--xl {
    --btn-txt-font-size: 20;
  }
  .c-btn--l {
    --btn-txt-font-size: 18;
  }
  .c-btn--m {
    --btn-txt-font-size: 14;
  }
  .c-btn--s {
    --btn-txt-font-size: 14;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
  }

  /* color */
  .c-btn--stroke {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-arrow-color: var(--btn-border-color);
  }
}

/* --------------------------------------------------------------------------
  テキストボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-link-btn {
    --link-arrow-color: var(--main-color-100);
    --link-font-size: 13;
    --link-txt-color: var(--black-color);
    --link-txt-position: flex-start;
  }
  a.c-link-btn:hover {
    --link-txt-color: var(--link-arrow-color);
  }
  .c-link-btn__in {
    display: flex;
    justify-content: var(--link-txt-position);
  }
  .c-link-btn__in--center {
    justify-content: center;
  }
  .c-link-btn-ico {
    width: calc(26 * var(--link-font-size) / 13 / var(--font-size) * 1em);
    height: calc(26 * var(--link-font-size) / 13 / var(--font-size) * 1em);
    border: calc(1.6 / var(--font-size) * 1em) solid var(--link-arrow-color);
    border-radius: 50%;
    margin-right: calc(10 / var(--font-size) * 1em);
    margin-top: calc(-1 * var(--link-font-size) / 13 / var(--font-size) * 1em);
    flex-shrink: 0;
  }
  .c-link-btn-ico__label {
    display: flex;
    justify-content: center;
    align-self: center;
    height: 100%;
  }
  .c-link-btn-ico__label .c-svg {
    width: calc(12 / var(--font-size) * 1em);
  }
  .c-link-btn-ico__label.c-link-btn-ico__label--down .c-svg {
    transform: rotate(90deg);
  }
  .c-link-btn--xs .c-link-btn-ico__label .c-svg {
    width: calc(9 / var(--font-size) * 1em);
  }
  .c-link-btn-ico__label svg {
    fill: var(--link-arrow-color);
  }
  .c-link-btn-txt {
  }
  .c-link-btn-txt__label {
    font-size: calc(var(--link-font-size) / var(--font-size) * 1em);
    line-height: 1.8;
    color: var(--link-txt-color);
    transition: all 0.3s ease;
  }

  /* size */
  .c-link-btn--l {
    --link-font-size: 20;
  }
  .c-link-btn--m {
    --link-font-size: 18;
  }
  .c-link-btn--s {
    --link-font-size: 16;
  }
  .c-link-btn--xs {
    --link-font-size: 14;
  }

  /* color */
  .c-link-btn--white {
    --link-arrow-color: var(--white-color);
    --link-txt-color: var(--white-color);
  }
  a.c-link-btn:hover .c-link-btn-txt__label {
    text-decoration: underline;
  }
}
@media all and (max-width: 767px) {
  .c-link-btn {
    --link-arrow-color: var(--main-color-100);
    --link-font-size: 13;
    --link-txt-color: var(--black-color);
    --link-txt-position: flex-start;
  }
  a.c-link-btn:hover {
    --link-txt-color: var(--link-arrow-color);
  }
  .c-link-btn__in {
    display: flex;
    justify-content: var(--link-txt-position);
  }
  .c-link-btn__in--center {
    justify-content: center;
  }
  .c-link-btn-ico {
    width: calc(26 * var(--link-font-size) / 13 / var(--font-size) * 1em);
    height: calc(26 * var(--link-font-size) / 13 / var(--font-size) * 1em);
    border: calc(1 / var(--font-size) * 1em) solid var(--link-arrow-color);
    border-radius: 50%;
    margin-right: calc(8 / var(--font-size) * 1em);
    margin-top: calc(-1 * var(--link-font-size) / 13 / var(--font-size) * 1em);
    flex-shrink: 0;
  }
  .c-link-btn-ico__label {
    display: flex;
    justify-content: center;
    align-self: center;
    height: 100%;
  }
  .c-link-btn-ico__label.c-link-btn-ico__label--down .c-svg {
    transform: rotate(90deg);
  }
  .c-link-btn-ico__label .c-svg {
    width: calc(9 / var(--font-size) * 1em);
  }
  .c-link-btn-ico__label svg {
    fill: var(--link-arrow-color);
  }
  .c-link-btn-txt {
  }
  .c-link-btn-txt__label {
    font-size: calc(var(--link-font-size) / var(--font-size) * 1em);
    line-height: 1.8;
    color: var(--link-txt-color);
    transition: all 0.3s ease;
  }

  /* size */
  .c-link-btn--l {
    --link-font-size: 14;
  }
  .c-link-btn--m {
    --link-font-size: 13;
  }

  /* color */
  .c-link-btn--white {
    --link-arrow-color: var(--white-color);
    --link-txt-color: var(--white-color);
  }
  a.c-link-btn:hover .c-link-btn-txt__label {
    text-decoration: underline;
  }
}

/* ==========================================================================
  TABLE COMPONENT
========================================================================== */
@media all and (min-width: 768px), print {
  .c-table {
  }
  * + .c-table {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .c-table__in {
  }
  .c-table__header {
    margin-bottom: calc(10 / var(--font-size) * 1em);
  }
  .c-table__body {
  }
  .c-table-chart {
    border-radius: calc(16 / var(--font-size) * 1em);
    overflow: hidden;
    border: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--white-color);
    width: 100%;
  }
  .c-table-chart__thead {
  }
  .c-table-chart__thead + .c-table-chart__tbody {
    border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
  }
  .c-table-chart__thead .c-table-chart__tr {
    text-align: left;
  }
  .c-table-chart__tr {
  }
  .c-table-chart__tr + .c-table-chart__tr .c-table-chart-cell {
    border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
  }
  .c-table-chart-cell {
    padding: calc(16 / var(--font-size) * 1em) calc(24 / var(--font-size) * 1em);
  }
  .c-table-chart-cell + .c-table-chart-cell {
    border-left: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
  }
  .c-table__footer {
    margin-top: calc(10 / var(--font-size) * 1em);
  }
}
@media all and (max-width: 767px) {
  .c-table {
  }
  * + .c-table {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .c-table__in {
  }
  .c-table__header {
    margin-bottom: calc(10 / var(--font-size) * 1em);
  }
  .c-table__body {
  }
  .c-table-chart {
    border-radius: calc(16 / var(--font-size) * 1em);
    overflow: hidden;
    border: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--white-color);
    width: 100%;
  }
  .c-table-chart__thead {
  }
  .c-table-chart__thead + .c-table-chart__tbody {
    border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
  }
  .c-table-chart__thead .c-table-chart__tr {
    text-align: left;
  }
  .c-table-chart__tr {
  }
  .c-table-chart__tr + .c-table-chart__tr .c-table-chart-cell {
    border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
  }
  .c-table-chart-cell {
    padding: calc(16 / var(--font-size) * 1em) calc(24 / var(--font-size) * 1em);
  }
  .c-table-chart-cell + .c-table-chart-cell {
    border-left: var(--secondary-color-200) calc(2 / var(--font-size) * 1em) solid;
  }
  .c-table__footer {
    margin-top: calc(10 / var(--font-size) * 1em);
  }
}

/* ==========================================================================
  IMG SVG COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  img
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
}
@media all and (max-width: 767px) {
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
  svg
-------------------------------------------------------------------------- */
.c-svg {
  position: relative;
  display: block;
  width: 100%;
}
.c-svg::before {
  display: block;
  padding-top: 100%;
  content: '';
}
.c-svg > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
  COMMON COMPONENT
========================================================================== */
  /* --------------------------------------------------------------------------
  ACCORDION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
.js-accordion {
}

.js-accordion.is-accordion-active {
}

.js-accordion-trigger {
  cursor: pointer;
}

.js-accordion-container {
  transition: all 0.3s;
  display: none;
  opacity: 0;
  visibility: hidden;
}
.js-accordion.is-accordion-active .js-accordion-container {
  display: block;
  opacity: 1;
  visibility: visible;
}
}
@media all and (max-width: 767px) {
  .js-accordion {
  }
  
  .js-accordion.is-accordion-active {
  }
  
  .js-accordion-trigger {
  }
  
  .js-accordion-container {
    transition: all 0.3s;
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .js-accordion.is-accordion-active .js-accordion-container {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

/* --------------------------------------------------------------------------
  FOOTER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
}
@media all and (max-width: 767px) {
}


/* ==========================================================================
  LAYOUT
========================================================================== */

/* --------------------------------------------------------------------------
  SECTION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .l-sec {
    --l-sec-width: 1366;
  }
  .l-sec__in {
    max-width: calc(1064 / var(--font-size) * 1em);
    padding: 0 calc(20 / var(--font-size) * 1em);
    margin: 0 auto;
    --sec-width: 1024;
  }
  .l-sec__body {
    padding: calc(96 / var(--sec-width) * 100%) 0;
  }
  .l-sec__header {
}
.what-sec__header {
    margin-bottom: 0;
    padding-bottom: 0;
}
.c-header-title {
margin-bottom: calc(12 / var(--sec-read-w) * 100%);
}
.recommend-read {
  --sec-read-w: 486;
}
.c-header-title__in {
display: flex;
flex-direction: column;
text-align: left;
}
.c-header-title__sub-txt {
    color: var(--sec-color-10);
    font-size: calc(32 / var(--font-size) * 1em);
    font-family: var(--font-josefin);
    font-weight: bold;
    margin-top: 0;
}
.c-header-title__txt {
    color: var(--sec-color);
    font-size: calc(32 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
}
  .l-sec__content {

  }
}
@media all and (max-width: 767px) {
  .l-sec {
    --ttl-color:#8fc9c5;
  }
  .l-sec__in {
    padding: 0 calc(40 / 750 * 100vw);
    margin: auto;
  }
  .l-sec__body {
    padding: calc(125 / 750 * 100vw) 0;
    position: relative;
    z-index: 1;
  }
  .l-sec__header {
    margin-bottom: calc(76 / 750 * 100vw);
    padding-bottom: calc(72 / 750 * 100vw);
    position: relative;
  }
  .what-sec__header {
    margin-bottom: 0;
    padding-bottom: 0;
}
  .l-sec__header::before {
    content: "";
    display: block;
    padding-top: calc(53 / 750 * 100vw);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .l-sec__content {

  }
  .c-header-title {
    margin-bottom: calc(12 / 750 * 100vw);
    }
    .recommend-read {
      --sec-read-w: 486;
    }
    .c-header-title__in {
    display: flex;
    flex-direction: column;
    text-align: center;
    }
    .c-header-title__sub-txt {
        color: var(--sec-color-10);
        font-size: calc(36 / 750 * 100vw);
        font-family: var(--font-josefin);
        font-weight: bold;
        letter-spacing: calc(240 / 1000 * 1em);
        margin-top: 0;
    }
    .c-header-title__txt {
        color: var(--sec-color);
        font-size: calc(48 / 750 * 100vw);
        font-family: var(--font-zen-maru);
        font-weight: bold;
    }
}

/* --------------------------------------------------------------------------
  RECIPE-CARD
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .recipe-card {
    --card-w: 358;
    --img-w: 376;
    position: relative;
  }
  .recipe-card__in:hover .recipe-card-img {
    opacity: 0.7;
  }
  .recipe-card__in {
  }
  .recipe-card__body {
  }
  .recipe-card-img {
      position: relative;
      
      transition: all .3s ease;
  }
  button.recipe-card-img-ico {
      --ico-w: 37;
      width: calc(var(--ico-w) / var(--img-w) * 100%);
      padding-top: calc(var(--ico-w) / var(--img-w) * 100%);
      position: absolute;
      top: 0;
      right: 0;
      margin-top: calc(8 / var(--img-w) * 100%);
      margin-right: calc(8 / var(--img-w) * 100%);
      z-index: 1;
      cursor: pointer;
      transition: all .3s ease;
  }
  button.recipe-card-img-ico:hover {
    opacity: 0.7;
  }
  .recipe-card-img-ico::before,
  .recipe-card-img-ico::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% , -50%);
  }
  .recipe-card-img-ico::before {
      width: 100%;
      height: 100%;
      background: var(--white-color);
      border-radius: 50%;
  }
  .recipe-card-img-ico::after {
    width: calc(20 / var(--ico-w) * 100%);
      padding-top: calc(16 / var(--ico-w) * 100%);
      margin-top: calc(1 / var(--ico-w) * 100%);
  }
  .i-fav[data-fav="off"].recipe-card-img-ico::after {
      background: url("../img/common/recipe-card-ico.png") no-repeat center / contain;
  }
  .i-fav[data-fav="on"].recipe-card-img-ico::after {
      background: url("../img/common/recipe-card-ico-active.png") no-repeat center / contain;
  }
  .recipe-card-read {
  }
  .recipe-card-read-name {
    margin-top: calc(18 / var(--card-w) * 100%);
  }
  .recipe-card-read-name__label {
      font-size: calc(18 / var(--font-size) * 1em);
      font-weight: 500;
      font-family: var(--font-noto);
      font-feature-settings: "palt";
      letter-spacing: calc(60 / 1000 * 1em);
  }
  .recipe-card-read-version {
      margin-top: calc(9 / var(--card-w) * 100%);
  }
  .recipe-card-read-version-list {
      display: flex;
      gap: calc(16 /var(--font-size) * 1em);
  }
  .recipe-card-read-version-list-item {
  }
  .recipe-card-read-version-list-item--time {
  }
  .recipe-card-read-version-list-item--kcal {
  }
  .recipe-card-read-version-list-item--salt {
  }
  .recipe-detail {
  }
  .recipe-card-read-version-list-item--time .recipe-detail {
    --txt-w: 61;
    --ico-w: 20;
  }
  .recipe-card-read-version-list-item--kcal .recipe-detail {
    --txt-w: 75;
    --ico-w: 16;
  }
  .recipe-card-read-version-list-item--salt .recipe-detail {
    --txt-w: 50;
    --ico-w: 12;
  }
  .recipe-detail-txt {
      padding-left: calc(var(--ico-w) / var(--font-size) * 1em);
      position: relative;
  }
  .recipe-detail-txt::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
  }
  .recipe-card-read-version-list-item--time .recipe-detail-txt::before {
      background: url("../img/common/ico-time.png") no-repeat center / contain;
      width: calc(20 / var(--font-size) * 1em);
      padding-top: calc(20 / var(--font-size) * 1em);
  }
  .recipe-card-read-version-list-item--kcal .recipe-detail-txt::before {
      background: url("../img/common/ico-kcal.png") no-repeat center / contain;
      width: calc(16 / var(--font-size) * 1em);
      padding-top: calc(20 / var(--font-size) * 1em);
  }
  .recipe-card-read-version-list-item--salt .recipe-detail-txt::before {
      background: url("../img/common/ico-salt.png") no-repeat center / contain;
      width: calc(12 / var(--font-size) * 1em);
      padding-top: calc(20 / var(--font-size) * 1em);
  }
  .recipe-detail-txt__label {
      font-size: calc(14 / var(--font-size) * 1em);
      font-weight: 400;
      font-family: var(--font-noto);
      font-feature-settings: "palt";
      letter-spacing: calc(60 / 1000 * 1em);
      width: 100%;
      margin-left: calc(9 / var(--txt-w) * 100%);
  }
}
@media all and (max-width: 767px) {
  .recipe-card {
    position: relative;
  }
  .recipe-card__in {
  }
  .recipe-card__body {
  }
  .recipe-card-img {
      --img-w: 376;
      transition: all .3s ease;
  }
  button.recipe-card-img-ico {
      --ico-w: 37;
      width: calc(var(--ico-w) / 750 * 100vw);
      padding-top: calc(var(--ico-w) / 750 * 100vw);
      position: absolute;
      top: 0;
      right: 0;
      margin-top: calc(8 / 750 * 100vw);
      margin-right: calc(8 / 750 * 100vw);
      z-index: 1;
  }
  .recipe-card-img-ico::before,
  .recipe-card-img-ico::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% , -50%);
  }
  .recipe-card-img-ico::before {
      width: 100%;
      height: 100%;
      background: var(--white-color);
      border-radius: 50%;
  }
  .recipe-card-img-ico::after {
    width: calc(20 / 750 * 100vw);
      padding-top: calc(17 / 750 * 100vw);
      margin-top: calc(1 / 750 * 100vw);
  }
  .i-fav[data-fav="off"].recipe-card-img-ico::after {
      background: url("../img/common/recipe-card-ico.png") no-repeat center / contain;
  }
  .i-fav[data-fav="on"].recipe-card-img-ico::after {
      background: url("../img/common/recipe-card-ico-active.png") no-repeat center / contain;
  }
  .recipe-card-read {
  }
  .recipe-card-read-name {
    margin-top: calc(18 / 750 * 100vw);
  }
  .recipe-card-read-name__label {
      font-size: calc(28 / 750 * 100vw);
      font-weight: 500;
      font-family: var(--font-noto);
      font-feature-settings: "palt";
      letter-spacing: calc(60 / 1000 * 1em);
  }
  .recipe-card-read-version {
      margin-top: calc(9 / 750 * 100vw);
  }
  .recipe-card-read-version-list {
      display: flex;
      gap: calc(16 /750 * 100vw);
  }
  .recipe-card-read-version-list-item {
  }
  .recipe-card-read-version-list-item--time {
  }
  .recipe-card-read-version-list-item--kcal {
  }
  .recipe-card-read-version-list-item--salt {
  }
  .recipe-detail {
  }
  .recipe-card-read-version-list-item--time .recipe-detail {
    --txt-w: 61;
    --ico-w: 20;
  }
  .recipe-card-read-version-list-item--kcal .recipe-detail {
    --txt-w: 75;
    --ico-w: 16;
  }
  .recipe-card-read-version-list-item--salt .recipe-detail {
    --txt-w: 50;
    --ico-w: 12;
  }
  .recipe-detail-txt {
      padding-left: calc(var(--ico-w) / 750 * 100vw);
      position: relative;
  }
  .recipe-detail-txt::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
  }
  .recipe-card-read-version-list-item--time .recipe-detail-txt::before {
      background: url("../img/common/ico-time.png") no-repeat center / contain;
      width: calc(31 / 750 * 100vw);
      padding-top: calc(31 / 750 * 100vw);
  }
  .recipe-card-read-version-list-item--kcal .recipe-detail-txt::before {
      background: url("../img/common/ico-kcal.png") no-repeat center / contain;
      width: calc(22 / 750 * 100vw);
      padding-top: calc(28 / 750 * 100vw);
  }
  .recipe-card-read-version-list-item--salt .recipe-detail-txt::before {
      background: url("../img/common/ico-salt.png") no-repeat center / contain;
      width: calc(15 / 750 * 100vw);
      padding-top: calc(29 / 750 * 100vw);
  }
  .recipe-detail-txt__label {
      font-size: calc(22 / 750 * 100vw);
      font-weight: 400;
      font-family: var(--font-noto);
      font-feature-settings: "palt";
      letter-spacing: calc(60 / 1000 * 1em);
      width: 100%;
      margin-left: calc(12 / 750 * 100vw);
  }
}

/* --------------------------------------------------------------------------
  LINK-BTN
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .link-btn-link {
  }
  .l-btn-list-item .c-btn {
      --btn-bg-color: var(--btn-color);
      --btn-border-color: var(--btn-color);
  }
  .l-btn-list-item .c-btn-txt {
      width: auto;
  }
  .l-btn-list-item .c-btn-txt__label {
      font-weight: bold;
  }
  .l-btn-list-item--top {
      --btn-color: var(--orange-color-500);
  }
  .l-btn-list-item--recipe {
      --btn-color: var(--pink-color-500);
  }
  .l-btn-list-item--reason {
      --btn-color: var(--green-color-500);
  }
  .l-btn-list-item--about {
      --btn-color: var(--blue-color-500);
  }
  .link-btn-link .c-btn__body {
      justify-content: start;
      padding-left: calc(16 / var(--font-size) * 1em);
  }
  .link-btn-ico {
      position: relative;
      --ico-w: 48;
      width: calc(var(--ico-w) / 272 * 100%);
      padding-top: calc(var(--ico-w) / 272 * 100%);
      margin-right: calc(14 / 272 * 100%);
      flex-shrink: 0;
  }
  .link-btn-ico::before,
  .link-btn-ico::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% , -50%);
  }
  .link-btn-ico::before {
      background: var(--white-color);
      border-radius: 50%;
      width: 100%;
      height: 100%;
  }
  .link-btn-ico::after {
      background: var(--btn-color);
  }
  .l-btn-list-item--top .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-top.png") no-repeat center bottom;
      mask: url("../img/common/ico-top.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(34 / var(--ico-w) * 100%);
      padding-top: calc(34 / var(--ico-w) * 100%);
  }
  .l-btn-list-item--recipe .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-recipe.png") no-repeat center bottom;
      mask: url("../img/common/ico-recipe.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(18 / var(--ico-w) * 100%);
      padding-top: calc(29 / var(--ico-w) * 100%);
  }
  .l-btn-list-item--reason .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-reason.png") no-repeat center bottom;
      mask: url("../img/common/ico-reason.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(25 / var(--ico-w) * 100%);
      padding-top: calc(25 / var(--ico-w) * 100%);
  }
  .l-btn-list-item--about .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-about.png") no-repeat center bottom;
      mask: url("../img/common/ico-about.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(36 / var(--ico-w) * 100%);
      padding-top: calc(32 / var(--ico-w) * 100%);
  }
  .link-sec .c-btn__in {
      --btn-w: 320;
  }
}
@media all and (min-width: 768px) and (max-width: 1064px) {
  .link-btn-link .c-btn-txt__label {
      font-size: calc(var(--btn-txt-font-size) / 1064 * 100vw);
  }
}
@media all and (max-width: 767px) {
  .link-btn-link {
  }
  .l-btn-list-item .c-btn {
      --btn-bg-color: var(--btn-color);
      --btn-border-color: var(--btn-color);
      --btn-txt-font-size: 12;
  }
  .l-btn-list-item .c-btn-txt {
      width: auto;
  }
  .l-btn-list-item .c-btn-txt__label {
      font-weight: bold;
      line-height: 1.3;
  }
  .l-btn-list-item--top {
      --btn-color: var(--orange-color-500);
  }
  .l-btn-list-item--recipe {
      --btn-color: var(--pink-color-500);
  }
  .l-btn-list-item--reason {
      --btn-color: var(--green-color-500);
  }
  .l-btn-list-item--about {
      --btn-color: var(--blue-color-500);
  }
  .link-btn-link .c-btn__body {
      justify-content: center;
      padding: calc(12 / 750 * 100vw);
      height: calc(144 / 750 * 100vw);
  }
  .link-btn-ico {
      --ico-w: 52;
      width: calc(var(--ico-w) / 750 * 100vw);
      padding-top: calc(var(--ico-w) / 750 * 100vw);
      flex-shrink: 0;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      margin-top: calc(-9 / 750 * 100vw);
  }
  .link-btn-ico::before,
  .link-btn-ico::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% , -50%);
  }
  .link-btn-ico::before {
      background: var(--white-color);
      border: solid var(--btn-border-color) calc(3 / 750 * 100vw);
      border-radius: 50%;
      width: 100%;
      height: 100%;
  }
  .link-btn-ico::after {
      background: var(--btn-color);
  }
  .l-btn-list-item--top .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-top.png") no-repeat center bottom;
      mask: url("../img/common/ico-top.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(34 / 750 * 100vw);
      padding-top: calc(34 / 750 * 100vw);
  }
  .l-btn-list-item--recipe .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-recipe.png") no-repeat center bottom;
      mask: url("../img/common/ico-recipe.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(18 / 750 * 100vw);
      padding-top: calc(29 / 750 * 100vw);
  }
  .l-btn-list-item--reason .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-reason.png") no-repeat center bottom;
      mask: url("../img/common/ico-reason.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(25 / 750 * 100vw);
      padding-top: calc(25 / 750 * 100vw);
  }
  .l-btn-list-item--about .link-btn-ico::after{
      -webkit-mask: url("../img/common/ico-about.png") no-repeat center bottom;
      mask: url("../img/common/ico-about.png") no-repeat center bottom;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: calc(36 / var(--ico-w) * 100%);
      padding-top: calc(32 / var(--ico-w) * 100%);
  }
  .link-sec .c-btn__in {
      --btn-w: 320;
  }
  .link-btn-link .c-btn-arrow {
    width: calc(17 / 750 * 100vw);
    height: auto;
  }
  .link-btn-link .c-btn-arrow__label {
    margin-left: 0;
  }
  .link-btn-link .c-btn-arrow {
    top: auto;
    left: 0;
    bottom: 0;
    margin: 0 auto calc(21 / 750 * 100vw);
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
  SEASON-CONTENT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .initial-block {
    --content-color-500: var(--blue-color-500);
    --content-color-100: var(--green-color-100);
  }
  .middle-block {
    --content-color-500: var(--green-color-500);
    --content-color-100: var(--green-color-100);
}
  .late-block {
      --content-color-500: var(--purple-color-500);
      --content-color-100: var(--purple-color-100);
  }
  .completion-block {
      --content-color-500: var(--pink-color-500);
      --content-color-100: #ffeae9;
}
  .season-content {
  }
  .season-content__in {
  }
  .season-content__body {
  }
  .season-content-heading {
  }
  .season-content-heading__in {
    background: var(--content-color-500);
    border-radius: calc(28 / var(--font-size) * 1em) calc(28 / var(--font-size) * 1em) 0 0;
  }
  .season-content-heading__body {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(24 / var(--sec-width) * 100%);
      padding: calc(22 / var(--sec-width) * 100%) 0;
  }
  .season-content-heading-ico {
  }
  .initial-block .season-content-heading-ico {
      width: calc(50 / var(--sec-width) * 100%);
  }
  .middle-block .season-content-heading-ico {
      width: calc(73 / var(--sec-width) * 100%);
  }
  .late-block .season-content-heading-ico {
      width: calc(46 / var(--sec-width) * 100%);
  }
  .completion-block .season-content-heading-ico {
      width: calc(42 / var(--sec-width) * 100%);
  }
  .season-content-heading-txt {
      color: var(--white-color);
      font-size: calc(36 / var(--font-size) * 1em);
      font-weight: bold;
      letter-spacing: calc(40 / 1000 * 1em);
      line-height: 1;
  }
  .season-content-heading-txt__label {
  }
  .season-content-heading-txt__sub {
      font-size: calc(18 / 36 * 1em);
      margin-top: calc(8 / 187 * 100%);
      text-align: center;
  }
  .season-box {
  }
  .season-box__in {
      background: var(--content-color-100);
      padding: 0 calc(61 / var(--sec-width) * 100%);
      border-radius: 0 0 calc(28 / var(--font-size) * 1em) calc(28 / var(--font-size) * 1em);
  }
  .season-box__body {
      padding: calc(50 / 1158 * 100%) 0 calc(75 / 1158 * 100%);
      --box-w: 1158;
  }
  }
  @media all and (min-width: 768px) and (max-width: 1064px) {
    .season-content-heading__in {
        border-radius: calc(28 / var(--sec-outer-w) * 100vw) calc(28 / var(--sec-outer-w) * 100vw) 0 0;
    }
    .season-box__in {
        border-radius: 0 0 calc(28 / var(--sec-outer-w) * 100vw) calc(28 / var(--sec-outer-w) * 100vw);
    }
    .season-content-heading-txt {
        font-size: calc(36 / var(--sec-outer-w) * 100vw);
    }
}
@media all and (max-width: 767px), print {
  .initial-block {
    --content-color-500: var(--blue-color-500);
    --content-color-100: var(--green-color-100);
  }
  .middle-block {
    --content-color-500: var(--green-color-500);
    --content-color-100: var(--green-color-100);
}
  .late-block {
      --content-color-500: var(--purple-color-500);
      --content-color-100: var(--purple-color-100);
  }
  .completion-block {
      --content-color-500: var(--pink-color-500);
      --content-color-100: #ffeae9;
}
  .season-content {
  }
  .season-content__in {
  }
  .season-content__body {
  }
  .season-content-heading {
  }
  .season-content-heading__in {
    background: var(--content-color-500);
    border-radius: calc(28 / 750 * 100vw) calc(28 / 750 * 100vw) 0 0;
  }
  .season-content-heading__body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(15 / 750 * 100vw);
    padding: calc(30 / 750 * 100vw) 0;
  }
  .season-content-heading-ico {
  }
  .initial-block .season-content-heading-ico {
    width: calc(66 / 750 * 100vw);
  }
  .middle-block .season-content-heading-ico {
    width: calc(103 / 750 * 100vw);
  }
  .late-block .season-content-heading-ico {
    width: calc(62 / 750 * 100vw);
  }
  .completion-block .season-content-heading-ico {
    width: calc(50 / 750 * 100vw);
  }
  .season-content-heading-txt {
    color: var(--white-color);
    font-size: calc(48 / 750 * 100vw);
    font-weight: bold;
    letter-spacing: calc(80 / 1000 * 1em);
    line-height: 1;
  }
  .season-content-heading-txt__label {
  }
  .season-content-heading-txt__sub {
    font-size: calc(28 / 750 * 100vw);
    margin-top: calc(8 / 750 * 100vw);
    text-align: center;
  }
  .season-box {
  }
  .season-box__in {
    background: var(--content-color-100);
    padding: 0 calc(32 / var(--sec-width) * 100vw);
    border-radius: 0 0 calc(28 / 750 * 100vw) calc(28 / 750 * 100vw);
  }
  .season-box__body {
    padding: calc(40 / 750 * 100vw) 0 calc(80 / 750 * 100vw);
    --box-w: 610;
  }
}
/* --------------------------------------------------------------------------
  BG-WAVE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .bg-wave {
    position: relative;
  }
  .bg-wave::before {
    content: "";
        display: block;
        width: 100%;
        padding-top: calc(205 / var(--font-size) * 1em);
        -webkit-mask: url("../img/common/bg-mask.png") no-repeat center bottom;
        mask: url("../img/common/bg-mask.png") no-repeat center bottom;
        -webkit-mask-size: cover;
        mask-size: cover;
        background-color: var(--pink-color-10);
        position: absolute;
        top: 0;
        margin-top: calc(-205 / var(--font-size) * 1em);
        left: 50%;
        transform: translateX(-50%);
  }
}
@media all and (max-width: 767px), print {
  .bg-wave {
    position: relative;
    z-index: 1;
  }
  .bg-wave::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(164 / 750 * 100vw);
    -webkit-mask: url("../img/common/bg-mask_sp.png") no-repeat center bottom;
    mask: url("../img/common/bg-mask_sp.png") no-repeat center bottom;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--pink-color-10);
    position: absolute;
    top: 0;
    margin-top: calc(-164 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
}

/* --------------------------------------------------------------------------
  WHAT-SEC
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .what-sec__content {
    display: flex;
    align-items: center;
    position: relative;
    --what-w: 1024;
}
.what-sec__content::before {
  content: "";
  display: block;
  --what-img-w: 512;
  width: calc(var(--what-img-w) / var(--sec-width) * 100%);
  padding-top: calc(324 / var(--sec-width) * 100%);
  margin-right: calc(20 / var(--sec-width) * 100%);
  flex-shrink: 0;
}
.what-img {
    --what-img-w: 512;
    width: calc(var(--what-img-w) / var(--sec-width) * 100%);
    position: absolute;
    top: 0;
    left: 0;
}
.what-img::before,
.what-img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.what-img::before {
    width: calc(76 / var(--what-img-w) * 100%);
    padding-top: calc(100 / var(--what-img-w) * 100%);
    background: url("../img/common/what-img-deco-01.png") no-repeat center / contain;
    margin-top: calc(21 / var(--what-img-w) * 100%);
    margin-left: calc(-36 / var(--what-img-w) * 100%);
}
.what-img::after {
    width: calc(138 / var(--what-img-w) * 100%);
    padding-top: calc(120 / var(--what-img-w) * 100%);
    background: url("../img/common/what-img-deco-02.png") no-repeat center / contain;
    margin-top: calc(240 / var(--what-img-w) * 100%);
    margin-left: calc(-28 / var(--what-img-w) * 100%);
}
.what-read {
    --sec-read-w: 492;
    z-index: 1;
}
.what-read::before {
    content: "";
    display: block;
    width: calc(358 / var(--what-w) * 100%);
    padding-top: calc(314 / var(--what-w) * 100%);
    position: absolute;
    top: 0;
    right: 0;
    margin-right: calc(-74 / var(--what-w) * 100%);
    margin-top: calc(92 / var(--what-w) * 100%);
    background: url("../img/common/what-read-deco.png") no-repeat center / contain;
    z-index: -1;
}
.what-read-txt {
}
.what-read-txt__label {
    color: var(--brown-color);
    font-size: calc(16 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
    line-height: calc(25.6 / 16);
    letter-spacing: calc(40 / 1000 * 1em);
}
.what-read-txt__label--accent {
    color: var(--pink-color-500);
}
}
@media all and (max-width: 767px), print {
  .what-sec__header {
    margin-bottom: calc(32 / 750 * 100vw);
    padding-bottom: 0;
  }
  .what-sec__content {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .what-img {
    --what-img-w: 670;
    width: 100%;
    margin-bottom: calc(50 / 750 * 100vw);
    flex-shrink: 0;
    position: relative;
  }
  .what-img::before,
  .what-img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .what-img::before {
    width: calc(76 / 750 * 100vw);
    padding-top: calc(100 / 750 * 100vw);
    background: url("../img/common/what-img-deco-01.png") no-repeat center / contain;
    margin-top: calc(-22 / 750 * 100vw);
    margin-left: calc(-17 / 750 * 100vw);
  }
  .what-img::after {
    width: calc(193 / 750 * 100vw);
    padding-top: calc(169 / 750 * 100vw);
    background: url("../img/common/what-img-deco-02.png") no-repeat center / contain;
    margin-top: calc(300 / 750 * 100vw);
    margin-left: calc(-6 / 750 * 100vw);
  }
  .what-read {
    --sec-read-w: 670;
    position: relative;
    z-index: 1;
  }
  .what-read::before {
    content: "";
    display: block;
    width: calc(356 / 750 * 100vw);
    padding-top: calc(313 / 750 * 100vw);
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: calc(-146 / 750 * 100vw);
    margin-bottom: calc(-100 / 750 * 100vw);
    background: url("../img/common/what-read-deco_sp.png") no-repeat center / contain;
    z-index: -1;
  }
  .what-read-txt {
  }
  .what-read-txt__label {
    color: var(--brown-color);
    font-size: calc(28 / 750 * 100vw);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
    line-height: calc(44.8 / 28);
    letter-spacing: calc(40 / 1000 * 1em);
  }
  .what-read-txt__label--accent {
    color: var(--pink-color-500);
  }
}

/* --------------------------------------------------------------------------
  PAGE-BTN
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .page-btn__container {
    --btn-w: 360;
    --content-w: 450;
    --btn-mt: 12;
    width: calc(var(--btn-w) / var(--content-w) * 100%);
    margin: calc(var(--btn-mt) / var(--content-w) * 100%) auto 0;
  }
  .page-btn-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(11 / var(--btn-w) * 100%);
    margin-bottom: calc(4 / var(--btn-w) * 100%);
  }
  .page-btn-txt::before,
  .page-btn-txt::after {
    content: "";
    display: block;
    background: url("../img/common/nutrition-btn-deco.png") no-repeat center / contain;
    width: calc(9 / var(--btn-w) * 100%);
    padding-top: calc(15 / var(--btn-w) * 100%);
  }
  .page-btn-txt::after {
    transform: scale(-1 , 1);
  }
  .page-btn-txt__label {
    color: var(--lightbrown-color);
    font-size: calc(16 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(40 / 1000 * 1em);
  }
  .page-btn {
    transition: all .3s ease;
  }
  .page-btn--nutrition {
    --btn-color: #01653e;
  }
  .page-btn--marusantonyu {
    --btn-color: #8ede00;
  }
  .page-btn:hover {
    transform: scale(.9);
  }
  .page-btn__in {
    display: block;
    background: var(--white-color);
    border: var(--btn-color) solid calc(2 / var(--font-size) * 1em);
    border-radius: 9999px;
    position: relative;
  }
  .page-btn__body {
    padding: calc(22 / var(--btn-w) * 100%) calc(46 / var(--btn-w) * 100%) calc(19 / var(--btn-w) * 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    --btn-body: 356;
  }
  .page-btn-arrow {
    width: calc(11 / var(--btn-body) * 100%);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: calc(18 / var(--btn-body) * 100%);
  }
  .page-btn-arrow svg {
    fill: var(--btn-color);
  }
  .tonyu-nutrition-btn-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    --btn-txt: 264;
    width: 100%;
  }
  .tonyu-nutrition-btn-txt::before {
    content: "";
    display: block;
    background: url("../img/common/nutrition-btn-ico.svg") no-repeat center / contain;
    width: calc(30 / var(--btn-txt) * 100%);
    padding-top: calc(23 / var(--btn-txt) * 100%);
    margin-right: calc(9 / var(--btn-txt) * 100%);
  }
  .tonyu-nutrition-btn-txt__label {
    width: calc(202 / var(--btn-txt) * 100%);
  }
  .tonyu-nutrition-btn-txt__label img {
    vertical-align: inherit;
  }

  .marusantonyu-btn-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    --btn-txt: 265;
    width: 100%;
  }
  .marusantonyu-btn-txt__label {
    width: calc(216 / var(--btn-txt) * 100%);
  }
  .page-btn--marusantonyu .page-btn__body {
    padding: calc(14 / var(--btn-w) * 100%) calc(46 / var(--btn-w) * 100%) calc(12 / var(--btn-w) * 100%);
  }
}
@media all and (min-width: 768px) and (max-width: 1064px) {
  .nutrition-btn-txt__label {
    font-size: calc(16 / 1064 * 100vw);
  }
}
@media all and (max-width: 767px) {
  .page-btn__container {
    --btn-w: 606;
    --btn-mt: 48;
    width: calc(var(--btn-w) / 750 * 100vw);
    margin: calc(var(--btn-mt) / 750 * 100vw) auto 0;
  }
  .page-btn-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(22 / 750 * 100vw);
    margin-bottom: calc(8 / 750 * 100vw);
  }
  .page-btn-txt::before,
  .page-btn-txt::after {
    content: "";
    display: block;
    background: url("../img/common/nutrition-btn-deco.png") no-repeat center / contain;
    width: calc(21 / 750 * 100vw);
    padding-top: calc(26 / 750 * 100vw);
  }
  .page-btn-txt::after {
    transform: scale(-1 , 1);
  }
  .page-btn-txt__label {
    color: var(--lightbrown-color);
    font-size: calc(28 / 750 * 100vw);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(40 / 1000 * 1em);
  }
  .page-btn {
  }
  .page-btn--nutrition {
    --btn-color: #01653e;
  }
  .page-btn--marusantonyu {
    --btn-color: #8ede00;
  }
  .page-btn__in {
    display: block;
    background: var(--white-color);
    border: var(--btn-color) solid calc(4 / 750 * 100vw);
    border-radius: 9999px;
    position: relative;
  }
  .page-btn__body {
    padding: calc(22 / 750 * 100vw) calc(46 / 750 * 100vw) calc(19 / 750 * 100vw);
    height: calc(112 / 750 * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    --btn-body: 356;
  }
  .page-btn-arrow {
    width: calc(17 / 750 * 100vw);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: calc(34 / 750 * 100vw);
    height: calc(17 / 750 * 100vw);
  }
  .page-btn-arrow svg {
    fill: var(--btn-color);
    position: absolute;
    top: 0;
    left: 0;
  }
  .tonyu-nutrition-btn-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    --btn-txt: 264;
  }
  .tonyu-nutrition-btn-txt::before {
    content: "";
    display: block;
    background: url("../img/common/nutrition-btn-ico.svg") no-repeat center / contain;
    width: calc(50 / 750 * 100vw);
    padding-top: calc(38 / 750 * 100vw);
    margin-right: calc(15 / 750 * 100vw);
  }
  .tonyu-nutrition-btn-txt__label {
    width: calc(334 / 750 * 100vw);
  }
  .tonyu-nutrition-btn-txt__label img {
    vertical-align: inherit;
  }

  .marusantonyu-btn-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    --btn-txt: 265;
  }
  .marusantonyu-btn-txt__label {
    width: calc(354 / 750 * 100vw);
  }
  .page-btn--marusantonyu .page-btn__body {
    padding: calc(16 / 750 * 100vw) calc(46 / 750 * 100vw) calc(10 / 750 * 100vw);
  }
}

/* --------------------------------------------------------------------------
  PAGE-MENU
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .js-menu-container {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: all .3s ease;
    
  }
  .is-menu-open .js-menu-container {
    visibility: visible;
    transform: translateX(0);
    opacity: 1;
  }
  .page-menu.up {
    margin-top: calc((150 / var(--font-size) * 1em) - 120px);
  }
}
@media all and (min-width: 768px), print {
  .page-menu {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    margin-top: calc(150 / var(--font-size) * 1em);
    margin-right: calc(32 / var(--font-size) * 1em);
    transition: all .3s ease;
  }
  .page-menu--top .menu-content-list-item--top,
  .page-menu--recipe .menu-content-list-item--recipe,
  .page-menu--recommend .menu-content-list-item--recommend,
  .page-menu--about .menu-content-list-item--about {
    pointer-events: none;
  }
  .page-menu--top .menu-content-list-item--top .menu-list-txt__label,
  .page-menu--recipe .menu-content-list-item--recipe .menu-list-txt__label,
  .page-menu--recommend .menu-content-list-item--recommend .menu-list-txt__label,
  .page-menu--about .menu-content-list-item--about .menu-list-txt__label{
    color: #fffdc1;
  }
  .page-menu--top .menu-content-list-item--top .menu-list-txt::before,
  .page-menu--recipe .menu-content-list-item--recipe .menu-list-txt::before,
  .page-menu--recommend .menu-content-list-item--recommend .menu-list-txt::before,
  .page-menu--about .menu-content-list-item--about .menu-list-txt::before{
    background: #fffdc1;
  }
  .page-menu__in {
  }
  .page-menu__body {
  }
  .menu-trigger-ico {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
  .menu-trigger-ico__in {
    background: var(--orange-color-500);
    border-radius: 50%;
    width: calc(64 / var(--font-size) * 1em);
    aspect-ratio: 1 / 1;
    position: relative;
    --ico-w: 64;
  }
  .menu-trigger-ico__label {
    width: 100%;
    height: 100%;
  }
  .menu-trigger-ico__in::before,
  .menu-trigger-ico__label::before,
  .menu-trigger-ico__label::after {
    content: "";
    display: block;
    background: var(--white-color);
    width: calc(32 / var(--ico-w) * 100%);
    padding-top: calc(2 / var(--font-size) * 1em);
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    transition: all .3s ease;
  }
  .is-menu-open .menu-trigger-ico__in::before {
    opacity: 0;
  }
  .menu-trigger-ico__label::before {
    margin-top: calc(-6 / var(--ico-w) * 100%);
  }
  .menu-trigger-ico__label::after {
    margin-top: calc(6 / var(--ico-w) * 100%);
  }
.is-menu-open .menu-trigger-ico__label::before {
  margin-top: 0;
  transform: translate(-50%,-50%) rotate(45deg);
}
.is-menu-open .menu-trigger-ico__label::after {
  margin-top: 0;
  transform: translate(-50%,-50%) rotate(-45deg);
}
  .menu-content {
    width: calc(341 / var(--font-size) * 1em);
    border-radius: calc(32 / var(--font-size) * 1em);
    background: var(--orange-color-500);
    --menu-w: 341;
  }
  .menu-content__in {
    padding: 0 calc(24 / var(--menu-w) * 100%);
    --menu-in-w: 293;
  }
  .menu-content__body {
    padding: calc(60 / var(--menu-in-w) * 100%) 0 calc(48 / var(--menu-in-w) * 100%);
  }
  .menu-content-logo {
    width: calc(224 / var(--menu-in-w) * 100%);
    margin: 0 auto calc(42 / var(--menu-in-w) * 100%);
  }
  .menu-content-list__container {
  }
  .menu-content-list {
  }
  .menu-content-list-item {
    transition: all .3s ease;
  }
  .menu-content-list-item:hover a {
    opacity: 1;
  }
  .menu-content-list-item:hover .menu-list-txt__label {
    color: #fffdc1;
  }
  .menu-content-list-item:hover .menu-list-txt::before {
    background: #fffdc1;
  }
  .menu-content-list-item + .menu-content-list-item {
    margin-top: calc(14 / var(--menu-in-w) * 100%);
  }
  .menu-list-txt {
    display: flex;
    align-items: start;
  }
  .menu-list-txt::before {
    content: "";
    display: block;
    width: calc(6 / var(--menu-in-w) * 100%);
    padding-top: calc(6 / var(--menu-in-w) * 100%);
    background: var(--white-color);
    border-radius: 50%;
    margin-top: calc(10 / var(--menu-in-w) * 100%);
    margin-right: calc(14 / var(--menu-in-w) * 100%);
  }
  .menu-list-txt__label {
    color: var(--white-color);
    font-size: calc(18 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(80 / 1000 * 1em);
  }
}
@media all and (min-width: 768px) and (max-width: 1064px) {
  :root {
    --max-w: 1064;
  }
  .menu-trigger-ico__in {
    width: calc(64 / var(--max-w) * 100vw);
  }
  .menu-content {
    width: calc(341 / var(--max-w) * 100vw);
    border-radius: calc(32 / var(--max-w) * 100vw);
  }
  .menu-list-txt__label {
    font-size: calc(18 / var(--max-w) * 100vw);
  }
}
@media all and (max-width: 767px) {
  .is-menu-open {
    position: relative;
    overflow: hidden;
    touch-action: none;
  }
  .js-menu-container {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: all .3s ease;
    
  }
  .is-menu-open .js-menu-container {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
  .page-menu.up {
    margin-top: calc(16 / 750 * 100vw);
  }
  .is-menu-open .main-container {
  }
  .menu-bg {
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease;
    position: absolute;
    margin-top: 71px;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
  .is-menu-open .menu-bg {
    visibility: visible;
    opacity: 1;
    width: 100vw;
    height: calc(100vh + 100vw);
    background: var(--white-color);
    z-index: -1;
  }
}
@media all and (max-width: 767px) {
  .page-menu {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    margin-top: calc(196 / 750 * 100vw);
    margin-right: calc(16 / 750 * 100vw);
    transition: all .3s ease;
  }
  .page-menu--top .menu-content-list-item--top,
  .page-menu--recipe .menu-content-list-item--recipe,
  .page-menu--recommend .menu-content-list-item--recommend,
  .page-menu--about .menu-content-list-item--about {
    pointer-events: none;
  }
  .page-menu--top .menu-content-list-item--top .menu-list-txt__label,
  .page-menu--recipe .menu-content-list-item--recipe .menu-list-txt__label,
  .page-menu--recommend .menu-content-list-item--recommend .menu-list-txt__label,
  .page-menu--about .menu-content-list-item--about .menu-list-txt__label{
    color: #fffdc1;
  }
  .page-menu--top .menu-content-list-item--top .menu-list-txt::before,
  .page-menu--recipe .menu-content-list-item--recipe .menu-list-txt::before,
  .page-menu--recommend .menu-content-list-item--recommend .menu-list-txt::before,
  .page-menu--about .menu-content-list-item--about .menu-list-txt::before{
    background: #fffdc1;
  }
  .page-menu__in {
  }
  .page-menu__body {
  }
  .menu-trigger-ico {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
  .menu-trigger-ico__in {
    background: var(--orange-color-500);
    border-radius: 50%;
    width: calc(80 / 750 * 100vw);
    aspect-ratio: 1 / 1;
    position: relative;
    --ico-w: 64;
  }
  .menu-trigger-ico__label {
    width: 100%;
    height: 100%;
  }
  .menu-trigger-ico__in::before,
  .menu-trigger-ico__label::before,
  .menu-trigger-ico__label::after {
    content: "";
    display: block;
    background: var(--white-color);
    width: calc(40 / 750 * 100vw);
    padding-top: calc(4 / 750 * 100vw);
    border-radius: 999px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    transition: all .3s ease;
  }
  .is-menu-open .menu-trigger-ico__in::before {
    opacity: 0;
  }
  .menu-trigger-ico__label::before {
    margin-top: calc(-10 / 750 * 100vw);
  }
  .menu-trigger-ico__label::after {
    margin-top: calc(10 / 750 * 100vw);
  }
.is-menu-open .menu-trigger-ico__label::before {
  margin-top: 0;
  transform: translate(-50%,-50%) rotate(45deg);
}
.is-menu-open .menu-trigger-ico__label::after {
  margin-top: 0;
  transform: translate(-50%,-50%) rotate(-45deg);
}
  .menu-content {
    width: calc(718 / 750 * 100vw);
    border-radius: calc(32 / 750 * 100vw);
    background: var(--orange-color-500);
    --menu-w: 341;
  }
  .menu-content__in {
    padding: 0 calc(24 / var(--menu-w) * 100%);
    --menu-in-w: 293;
  }
  .menu-content__body {
    padding: calc(56 / 750 * 100vw) 0 calc(72 / 750 * 100vw);
  }
  .menu-content-logo {
    width: calc(391 / 750 * 100vw);
    margin: 0 auto calc(42 / 750 * 100vw);
  }
  .menu-content-list__container {
    text-align: center;
  }
  .menu-content-list {
    display: inline-block;
  }
  .menu-content-list-item {
    transition: all .3s ease;
  }
  .menu-content-list-item:hover .menu-list-txt__label {
    color: #fffdc1;
  }
  .menu-content-list-item:hover .menu-list-txt::before {
    background: #fffdc1;
  }
  .menu-content-list-item + .menu-content-list-item {
    margin-top: calc(32 / 750 * 100vw);
  }
  .menu-list-txt {
    display: flex;
    align-items: start;
  }
  .menu-list-txt::before {
    content: "";
    display: block;
    width: calc(12 / 750 * 100vw);
    padding-top: calc(12 / 750 * 100vw);
    background: var(--white-color);
    border-radius: 50%;
    margin-top: calc(22 / 750 * 100vw);
    margin-right: calc(28 / 750 * 100vw);
  }
  .menu-list-txt__label {
    color: var(--white-color);
    font-size: calc(36 / 750 * 100vw);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(80 / 1000 * 1em);
  }
}

/* --------------------------------------------------------------------------
  FADEIN
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .fadein-contents {
      opacity: 0;
      transition: all 1s ease;
      transform: translateY(calc(20 / var(--font-size) * 1em));
  }
  .fadein-contents.fadein-active {
      opacity: 1;
      transform: translateY(0);
  }
}
@media all and (max-width: 767px) {
  .fadein-contents {
      opacity: 0;
      transition: all 1s ease;
      transform: translateY(calc(20 / var(--font-size) * 1em));
  }
  .fadein-contents.fadein-active {
      opacity: 1;
      transform: translateY(0);
  }
}
@media all and (min-width: 768px), print {
  .gfooter__inner {
    margin-top: 0;
  }
}