@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Kaisei+Opti:wght@400;500;700&display=swap");
/* =====================================================================


===================================================================== */
/*/////---example---//////
    html:lang(en) {
      body {}
    }
*/
/* -------------------------------------------------------------------------
-- This CSS is generated by Sass. Please do not never be edited directly. --
------------------------------------------------------------------------- */
/*-----------------------------------------------*/
/* Reset & Default Setting ----------------------*/
:root {
  --leading-trim: calc((1em - 1lh) / 2);
}

html {
  overflow-y: scroll;
  height: 100% !important;
}

html, body {
  font-size: 100%;
  overflow-x: clip !important;
}

select, input, button, textarea, button {
  font: 99% arial, helvetica, clean, sans-serif;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

table {
  font-size: inherit;
  font: 100%;
}

pre, code, kbd, samp, tt {
  font-family: monospace;
  *font-size: 108%;
  line-height: 130%;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, section, article, aside, footer, figure, figcaption, nav {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

*::selection {
  background: rgba(204, 177, 116, 0.55);
}

h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, section, article, aside, footer, figure, figcaption, nav {
  font-size: 1em;
}
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, ul::selection, ol::selection, dl::selection, li::selection, dt::selection, dd::selection, p::selection,
header::selection, section::selection, article::selection, aside::selection, footer::selection, figure::selection, figcaption::selection, nav::selection {
  background: rgba(204, 177, 116, 0.55);
}

body {
  -webkit-text-size-adjust: 100%;
  height: auto;
  min-height: 100%;
  position: relative;
  color: #000;
}

@media only screen and (max-width:767px) {
  body {
    min-width: 320px;
  }
}
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary {
  display: block;
}

address {
  font-style: normal;
}

img {
  border-style: none;
  vertical-align: bottom;
}

ul, ol {
  list-style: none;
}

sup, sub {
  font-size: 0.6em;
}

sub {
  position: relative;
  top: -0.2em;
  margin-bottom: -1em;
  display: inline-block;
}

table {
  border-spacing: 0;
  empty-cells: show;
}

iframe {
  border: none;
}

a {
  color: #000;
}

a, a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.lazyload {
  opacity: 0.1;
}

body > img {
  display: none;
}

sup {
  font-family: "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Pgothic", "Osaka", sans-serif, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/*-----------------------------------------------*/
/*-----------------------------------------------*/
[data-intersection-target*=subject], .js-ignitionPoint {
  opacity: 0;
}
[data-intersection-target*=subject] .subject-child, .js-ignitionPoint .subject-child {
  opacity: 0;
}
[data-intersection-target*=subject].is-active, .js-ignitionPoint.is-active {
  opacity: 1;
  transition: top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-intersection-target*=subject].is-active .subject-child, .js-ignitionPoint.is-active .subject-child {
  opacity: 1;
  transition: top 0.6s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*-----------------------------------------------*/
/*-----------------------------------------------*/
@media only screen and (min-width:768px) {
  a {
    transition: opacity 0.3s;
  }
  [data-movie-target*=player] .movieMain__btn:after {
    transition: opacity 0.3s;
  }
  [data-movie-target*=player]:hover .movieMain__btn:after {
    opacity: 0.7;
  }
}
/*-----------------------------------------------*/
/* =====================================================================





===================================================================== */
/* =====================================================================





===================================================================== */
html .bold, html .kvText__subCopy, html .kvText__mainCopy, html .kvBubble, html .leadMain, html .contentHeadBubble, html .contentHeadMain, html .categorySub, html .categoryMain, html .categoryItemLabel, html .recipeBelowHeadSub, html .recipeBelowHeadMain, html .recipeLinkText, html strong, html b, body .bold, body .kvText__subCopy, body .kvText__mainCopy, body .kvBubble, body .leadMain, body .contentHeadBubble, body .contentHeadMain, body .categorySub, body .categoryMain, body .categoryItemLabel, body .recipeBelowHeadSub, body .recipeBelowHeadMain, body .recipeLinkText, body strong, body b {
  font-weight: bold;
}

body {
  -webkit-font-smoothing: antialiased;
  color: #000;
}
body a {
  color: #000;
}

.kaisei-opti-bold {
  font-family: "Kaisei Opti", serif;
  font-weight: 700;
  font-style: normal;
  -webkit-text-stroke: 0.5px currentColor;
  text-shadow: 0 0 0.5px currentColor;
}

.font-noto-sans {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-min {
  -webkit-font-smoothing: antialiased;
}

.font-min-w6 {
  -webkit-font-smoothing: antialiased;
}

.font-en {
  font-family: TheSansBold, sans-serif;
}

.u-curning {
  font-feature-settings: "palt";
}

/* =====================================================================




===================================================================== */
.u-cf {
  *zoom: 1;
}
.u-cf:before, .u-cf:after {
  content: " ";
  display: table;
}

.u-cf:after {
  clear: both;
}

.u-taL {
  text-align: left;
}

.u-taR {
  text-align: right;
}

.u-taC {
  text-align: center;
}

.u-visHide {
  visibility: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.u-hide {
  display: none !important;
}

.u-hideTxt {
  overflow: hidden;
  display: block;
  height: 0;
  width: 100%;
  position: absolute;
}

.u-pcHide {
  display: none;
}

.u-fColor--wht {
  color: #fff;
}

.u-indent--1 {
  text-indent: 1em;
}

.u-indent--n1 {
  text-indent: -1em;
  padding-left: 1em;
}

.u-indent--n1_3 {
  text-indent: -1.25em;
  padding-left: 1.25em;
}

.u-indent--n1_5 {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

.u-indent--n1_5 {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

.u-indent--n2 {
  text-indent: -2em;
  padding-left: 2em;
}

.u-liMarker {
  text-indent: -1em;
  padding-left: 1em;
}
.u-liMarker:before {
  content: "・";
}

.u-pcHide,
.u-pcNobreak {
  display: none;
}

.u-spHide {
  display: inline;
}

.u-inlineBlock {
  display: inline-block;
}

.u-urlTxt {
  word-break: break-all;
}

.u-scrTxt {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.u-blankIcon {
  vertical-align: middle;
  padding-left: 3px;
  line-height: 1em;
  position: relative;
  top: -0.1em;
  height: 1em;
  width: auto;
}

.u-curning {
  font-feature-settings: "palt";
}

@media only screen and (max-width:767px) {
  .u-pcNobreak {
    display: inline;
  }
  .u-spNobreak {
    display: none;
  }
  .u-pcHide {
    display: block;
  }
  .u-spHide {
    display: none;
  }
}
.u-linkIcon {
  position: relative;
  padding-left: 1em;
  display: inline-block;
  text-decoration: none;
}
.u-linkIcon:before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: solid 1px #626260;
  border-bottom: solid 1px #626260;
  transform: rotate(-45deg);
  position: absolute;
  top: 0.6em;
  left: 0;
}
.u-linkIcon:link, .u-linkIcon:visited {
  text-decoration: none;
}
.u-linkIcon:hover, .u-linkIcon:active {
  text-decoration: underline;
}

.u-videoBox {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.u-videoBox iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.u-mt0em {
  margin-top: 0em !important;
}

.u-mb0em {
  margin-bottom: 0em !important;
}

.u-pt0em {
  padding-top: 0em !important;
}

.u-pb0em {
  padding-bottom: 0em !important;
}

.u-mt0_5em {
  margin-top: 0.5em !important;
}

.u-mb0_5em {
  margin-bottom: 0.5em !important;
}

.u-pt0_5em {
  padding-top: 0.5em !important;
}

.u-pb0_5em {
  padding-bottom: 0.5em !important;
}

.u-mt1em {
  margin-top: 1em !important;
}

.u-mb1em {
  margin-bottom: 1em !important;
}

.u-pt1em {
  padding-top: 1em !important;
}

.u-pb1em {
  padding-bottom: 1em !important;
}

.u-mt1_5em {
  margin-top: 1.5em !important;
}

.u-mb1_5em {
  margin-bottom: 1.5em !important;
}

.u-pt1_5em {
  padding-top: 1.5em !important;
}

.u-pb1_5em {
  padding-bottom: 1.5em !important;
}

.u-mt2em {
  margin-top: 2em !important;
}

.u-mb2em {
  margin-bottom: 2em !important;
}

.u-pt2em {
  padding-top: 2em !important;
}

.u-pb2em {
  padding-bottom: 2em !important;
}

.u-mt2_5em {
  margin-top: 2.5em !important;
}

.u-mb2_5em {
  margin-bottom: 2.5em !important;
}

.u-pt2_5em {
  padding-top: 2.5em !important;
}

.u-pb2_5em {
  padding-bottom: 2.5em !important;
}

.u-mt3em {
  margin-top: 3em !important;
}

.u-mb3em {
  margin-bottom: 3em !important;
}

.u-pt3em {
  padding-top: 3em !important;
}

.u-pb3em {
  padding-bottom: 3em !important;
}

.u-mt3_5em {
  margin-top: 3.5em !important;
}

.u-mb3_5em {
  margin-bottom: 3.5em !important;
}

.u-pt3_5em {
  padding-top: 3.5em !important;
}

.u-pb3_5em {
  padding-bottom: 3.5em !important;
}

.u-mt4em {
  margin-top: 4em !important;
}

.u-mb4em {
  margin-bottom: 4em !important;
}

.u-pt4em {
  padding-top: 4em !important;
}

.u-pb4em {
  padding-bottom: 4em !important;
}

.u-mt4_5em {
  margin-top: 4.5em !important;
}

.u-mb4_5em {
  margin-bottom: 4.5em !important;
}

.u-pt4_5em {
  padding-top: 4.5em !important;
}

.u-pb4_5em {
  padding-bottom: 4.5em !important;
}

.u-mt5em {
  margin-top: 5em !important;
}

.u-mb5em {
  margin-bottom: 5em !important;
}

.u-pt5em {
  padding-top: 5em !important;
}

.u-pb5em {
  padding-bottom: 5em !important;
}

.u-mt5_5em {
  margin-top: 5.5em !important;
}

.u-mb5_5em {
  margin-bottom: 5.5em !important;
}

.u-pt5_5em {
  padding-top: 5.5em !important;
}

.u-pb5_5em {
  padding-bottom: 5.5em !important;
}

.u-mt6em {
  margin-top: 6em !important;
}

.u-mb6em {
  margin-bottom: 6em !important;
}

.u-pt6em {
  padding-top: 6em !important;
}

.u-pb6em {
  padding-bottom: 6em !important;
}

.u-mt6_5em {
  margin-top: 6.5em !important;
}

.u-mb6_5em {
  margin-bottom: 6.5em !important;
}

.u-pt6_5em {
  padding-top: 6.5em !important;
}

.u-pb6_5em {
  padding-bottom: 6.5em !important;
}

.u-mt7em {
  margin-top: 7em !important;
}

.u-mb7em {
  margin-bottom: 7em !important;
}

.u-pt7em {
  padding-top: 7em !important;
}

.u-pb7em {
  padding-bottom: 7em !important;
}

.u-mt7_5em {
  margin-top: 7.5em !important;
}

.u-mb7_5em {
  margin-bottom: 7.5em !important;
}

.u-pt7_5em {
  padding-top: 7.5em !important;
}

.u-pb7_5em {
  padding-bottom: 7.5em !important;
}

.u-mt8em {
  margin-top: 8em !important;
}

.u-mb8em {
  margin-bottom: 8em !important;
}

.u-pt8em {
  padding-top: 8em !important;
}

.u-pb8em {
  padding-bottom: 8em !important;
}

.u-mt8_5em {
  margin-top: 8.5em !important;
}

.u-mb8_5em {
  margin-bottom: 8.5em !important;
}

.u-pt8_5em {
  padding-top: 8.5em !important;
}

.u-pb8_5em {
  padding-bottom: 8.5em !important;
}

.u-mt9em {
  margin-top: 9em !important;
}

.u-mb9em {
  margin-bottom: 9em !important;
}

.u-pt9em {
  padding-top: 9em !important;
}

.u-pb9em {
  padding-bottom: 9em !important;
}

.u-mt9_5em {
  margin-top: 9.5em !important;
}

.u-mb9_5em {
  margin-bottom: 9.5em !important;
}

.u-pt9_5em {
  padding-top: 9.5em !important;
}

.u-pb9_5em {
  padding-bottom: 9.5em !important;
}

.u-mt10em {
  margin-top: 10em !important;
}

.u-mb10em {
  margin-bottom: 10em !important;
}

.u-pt10em {
  padding-top: 10em !important;
}

.u-pb10em {
  padding-bottom: 10em !important;
}

.u-mt10_5em {
  margin-top: 10.5em !important;
}

.u-mb10_5em {
  margin-bottom: 10.5em !important;
}

.u-pt10_5em {
  padding-top: 10.5em !important;
}

.u-pb10_5em {
  padding-bottom: 10.5em !important;
}

.header img {
  height: auto;
  max-width: 100%;
}

.overlay-lock-test {
  overflow-y: hidden !important;
}

.navOverlay-lock {
  overflow: hidden !important;
  width: auto;
}
.navOverlay-lock body {
  overflow: hidden !important;
}

.header__close {
  width: auto;
  height: auto;
  display: block;
  overflow: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.header__closeBtn {
  display: inline-block;
  position: absolute;
  z-index: 40;
  top: 23px;
  right: 6%;
  width: 8%;
  max-width: 50px;
  padding-bottom: 8%;
  opacity: 0;
  transform: translateY(15%) scale(0.8);
  transition: opacity 0.25s, transform 0.25s ease;
}
.header__closeBtn:before, .header__closeBtn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 35%;
  width: 90%;
  height: 1px;
  background: #fff;
  margin: auto;
  transform: rotate(45deg);
}
.header__closeBtn:after {
  transform: rotate(-45deg);
}
@media only screen and (min-width:768px) {
  .header__closeBtn {
    top: 14px;
    right: 10px;
    width: 42px;
    padding: 26px 0 0;
    transform: translate(0) scale(1);
  }
  .header__closeBtn:before, .header__closeBtn:after {
    bottom: 60%;
    left: 0;
    right: 0;
    width: 65%;
  }
  .header__closeBtn span {
    display: block;
    color: #fff;
    font-size: 11px;
  }
}

.header {
  overflow: hidden;
  position: fixed;
  line-height: 1;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  background-color: #fff;
  border-bottom: 1px solid #d9d9d9;
}
.header.is-hidden {
  display: none;
}
@media only screen and (max-width:767px) {
  .header {
    transform: translateY(-17vw);
    transition: transform 0.4s ease;
    overflow: visible;
  }
}
@media only screen and (max-width:767px) {
  .header.is-show {
    transform: translateY(0);
  }
}
.header__inner {
  padding: 1.6em 53px;
  font-size: 16px;
  position: relative;
}
@media only screen and (max-width: 1280px) {
  .header__inner {
    font-size: 1.25vw;
    padding: 1.6em 4.140625%;
  }
}
@media only screen and (max-width:767px) {
  .header__inner {
    padding: 4.6666666667vw 0;
    padding: 7.666667vw 0;
  }
}

.header__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 363px;
  width: 28.359375%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  margin-left: 3.90625%;
}
@media only screen and (max-width: 1380px) {
  .header__logos {
    width: 20.359375%;
  }
}
@media only screen and (max-width:767px) {
  .header__logos {
    max-width: 77.3333333333vw;
    width: 100%;
  }
}

.header__menuBtn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  margin-right: 3.6vw;
  width: 8.4vw;
  height: 6vw;
  cursor: pointer;
  aspect-ratio: 1/1;
}
.header__menuBtn__inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.header__menuBtn__inner span {
  display: block;
  width: 100%;
  height: 0;
  background: #521003;
  padding-bottom: 1.0666666667vw;
  position: absolute;
  left: 0;
  right: 0;
  transform: skewY(-8deg);
  transition: all 0.25s ease;
  transform-origin: center;
}
.header__menuBtn__inner span:nth-child(1) {
  top: 0;
}
.header__menuBtn__inner span:nth-child(2) {
  top: calc(50% - 0.5333333333vw);
}
.header__menuBtn__inner span:nth-child(3) {
  bottom: 0;
}
.header__menuBtn.is-active .header__menuBtn__inner span:nth-child(1) {
  width: 120%;
  transform: rotate(-40deg) skewY(0);
  top: calc(50% - 0.5333333333vw);
}
.header__menuBtn.is-active .header__menuBtn__inner span:nth-child(2) {
  width: 0;
}
.header__menuBtn.is-active .header__menuBtn__inner span:nth-child(3) {
  width: 120%;
  bottom: calc(50% - 0.5333333333vw);
  transform: rotate(40deg) skewY(0);
}

.header__logo {
  max-width: 68.044077135%;
  width: 100%;
  height: 0;
  padding-bottom: 11.0192837466%;
  z-index: 10;
}
@media only screen and (max-width:767px) {
  .header__logo {
    max-width: 48.6666666667vw;
  }
}
.header__logo a {
  display: block;
}

.header__logo--40th {
  max-width: 22.5895316804%;
  width: 100%;
}
@media only screen and (max-width:767px) {
  .header__logo--40th {
    max-width: 13.8666666667vw;
  }
}

.header__nav {
  background-color: #fff;
}
@media only screen and (max-width:767px) {
  .header__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 15vw;
    padding-bottom: 10.4vw;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    opacity: 0;
    transform: translate(-100%, 0);
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.34, 1.26, 0.74, 1);
  }
}
@media only screen and (max-width:767px) {
  .header__nav.is-open {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.header__nav.no-transition {
  transition: none !important;
}

.header__nav__items {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media only screen and (max-width:767px) {
  .header__nav__items {
    display: block;
  }
}
.header__nav__items .header__nav__item {
  position: relative;
}
@media only screen and (max-width:767px) {
  .header__nav__items .header__nav__item {
    width: 100%;
    padding: 0;
  }
}
.header__nav__items .header__nav__item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 2px;
  height: 2em;
  margin-top: -0.25em;
  background-color: #d2d2d2;
}
@media only screen and (max-width:767px) {
  .header__nav__items .header__nav__item:before {
    display: none;
  }
}
.header__nav__items .header__nav__item:last-child:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  width: 2px;
  height: 2em;
  margin-top: -0.25em;
  background-color: #d2d2d2;
}
.header__nav__items .header__nav__item a {
  font-size: 1.1875em;
  font-weight: bold;
  color: #42191d;
  transition: color 0.25s ease;
  cursor: pointer;
  display: block;
  padding: 0 1.3em;
}
@media only screen and (min-width:768px) {
  .header__nav__items .header__nav__item a:hover {
    color: #003894;
  }
}
@media only screen and (max-width:767px) {
  .header__nav__items .header__nav__item a {
    display: block;
    width: 76.8vw;
    margin: 0 auto;
    padding: 6vw 0;
    border-bottom: 0.5333333333vw solid #ebebeb;
    text-align: center;
    font-size: 6.4vw;
  }
}
@media only screen and (max-width:767px) {
  .header__nav__items .header__nav__item a > img {
    display: block;
    margin: 0 auto;
  }
}

@media only screen and (max-width:767px) {
  .header__nav__item--products {
    max-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width:767px) {
  .header__nav__item--products a img {
    width: 26.4vw;
  }
}

@media only screen and (max-width:767px) {
  .header__nav__item--points {
    max-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width:767px) {
  .header__nav__item--points a img {
    width: 40.9333333333vw;
  }
}

@media only screen and (max-width:767px) {
  .header__nav__item--secret {
    max-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width:767px) {
  .header__nav__item--secret a img {
    width: 41.8666666667vw;
  }
}

@media only screen and (max-width:767px) {
  .header__nav__item--pariparitime {
    max-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width:767px) {
  .header__nav__item--pariparitime a img {
    width: 42.1333333333vw;
  }
}

@media only screen and (max-width:767px) {
  .header__nav__item--history {
    max-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width:767px) {
  .header__nav__item--history a img {
    width: 56.9333333333vw;
  }
}

img[src*=".cloudfront.net"] {
  display: none;
}

.main, main[role=main] {
  position: relative;
  display: block;
}

.contents, .l-contentBox {
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.contents:-webkit-scrollbar, .l-contentBox:-webkit-scrollbar {
  display: none;
}

.l-wrapper {
  margin-left: 210px;
  min-height: 100vh;
  box-sizing: border-box;
}
@media only screen and (max-width: 1400px) {
  .l-wrapper {
    margin-left: 15%;
  }
}
@media only screen and (max-width:767px) {
  .l-wrapper {
    margin-left: 0;
  }
}

.l-section {
  position: relative;
}
.l-section__inner {
  font-size: 16px;
  max-width: 1020px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 1020px) {
  .l-section__inner {
    font-size: 1.568627451vw;
    max-width: 96%;
  }
}
@media only screen and (max-width:767px) {
  .l-section__inner {
    max-width: 100%;
  }
}

.l-container {
  width: 100%;
}
.contentsMain {
  margin-bottom: 50px;
}
.contentsMain:last-child {
  margin-bottom: 0;
}

.l-adjustAnchor {
  padding-top: 90px;
  margin-top: -90px;
}

.c-heading {
  margin: 0 auto;
  font-weight: bold;
  background-color: #fff;
  color: #004090;
  box-sizing: border-box;
  border: 0.4666666667vw solid #004090;
  font-size: 6vw;
  display: inline-block;
  position: relative;
  z-index: 1;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@media only screen and (min-width:768px) {
  .c-heading {
    font-size: 2.1875em;
    border-width: 2px;
  }
}
.c-heading.is-show {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.c-heading span {
  padding-left: 0.4em;
  padding-right: 0.4em;
  letter-spacing: 0.07em;
}

.c-heading--pickup {
  display: block;
  border: none;
  font-size: 0;
  margin: 0 auto;
  background-color: transparent;
  clip-path: inherit;
}
@media only screen and (max-width:767px) {
  .c-heading--pickup {
    margin-bottom: 4vw;
    width: 16.8vw;
  }
}
@media only screen and (min-width:768px) {
  .c-heading--pickup {
    width: 12.3529411765%;
    margin-bottom: 2em;
  }
}

.c-heading--feature {
  margin-top: -7vw;
}

.c-heading--breakthrough {
  margin-top: -7vw;
  padding-top: 0.2em;
}
.c-heading--breakthrough .rubyWrap {
  line-height: 1;
  display: inline-grid;
  position: relative;
  padding: 0;
}
.c-heading--breakthrough .rubyItem {
  padding: 0;
  font-size: 0.34em;
  position: absolute;
  width: max-content;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.c-heading--recommend {
  margin-top: -7vw;
}

.c-heading--experience {
  border: none;
  background-color: transparent;
  clip-path: inherit;
}
.c-heading--experience span {
  padding: 0.1em 0.5em;
  border: 0.4666666667vw solid #004090;
  background-color: #fff;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  display: inline-block !important;
}
@media only screen and (min-width:768px) {
  .c-heading--experience span {
    border-width: 2px;
    border-right: none;
    z-index: 2;
    position: relative;
    padding-right: 0;
  }
}
.c-heading--experience span + span {
  display: inline-block;
  margin-top: -0.25em;
}
@media only screen and (min-width:768px) {
  .c-heading--experience span + span {
    border-left: none;
    margin-left: -0.5em;
    padding-right: 0;
    border-right: 2px solid #004090;
    z-index: 1;
    position: relative;
  }
}
.c-heading--experience.is-show span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.c-heading--experience.is-show span + span {
  transition-delay: 0.25s;
}

.c-heading--recommend {
  margin-bottom: 1em;
}

.c-btn {
  padding: 1em 0;
  display: block;
  color: #004090;
  font-size: 1.375em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  border: 0.4666666667vw solid #004090;
  text-align: center;
  font-weight: 600;
}
@media only screen and (max-width:767px) {
  .c-btn {
    font-size: 3.4666666667vw;
    flex-wrap: wrap;
  }
}
@media only screen and (min-width:768px) {
  .c-btn {
    border-width: 2px;
    font-size: 1.125em;
  }
}
.c-btn[target=_blank]:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  margin: auto;
  transform: translateY(-50%);
  aspect-ratio: 54/53;
  width: 2em;
  height: 2em;
  background: url("/icebox/assets/renew/img/icon--blank.svg") no-repeat center center/100% 100%;
}
.c-btn .c-btn__char--s {
  font-size: 0.7272727273em;
  margin-right: 0.8em;
}
@media only screen and (max-width:767px) {
  .c-btn .c-btn__char--s {
    margin-right: 0;
    margin-bottom: 0.25em;
  }
}
.c-btn .c-btn__char--m {
  font-weight: bold;
}

/*-----------------------------------
animation components
-----------------------------------*/
@keyframes LINE {
  0% {
    transform: translateY(-180%);
  }
  45% {
    transform: translateY(0%);
  }
  55% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(180%);
  }
}
@keyframes loopSlider {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loopSlider2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes loopSlider-r {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(200%);
  }
}
@keyframes loopSlider2-r {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes anim-shutter {
  0% {
    transform: translateY(-102%);
  }
  40%, 50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(102%);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}
/* 点滅 */
@keyframes blinking {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pyoko {
  0% {
    margin-bottom: 0;
  }
  10% {
    margin-bottom: 20px;
  }
  20% {
    margin-bottom: 0;
  }
  30% {
    margin-bottom: 20px;
  }
  40% {
    margin-bottom: 0;
  }
  100% {
    margin-bottom: 0;
  }
}
@keyframes purun {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
@keyframes purupuru {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  20% {
    transform: scale(1, 1.06) translate(-5%, -4%) skew(6deg, 0deg);
  }
  50% {
    transform: scale(1, 0.94) translate(5%, 4%) skew(-6deg, 0deg);
  }
  65% {
    transform: scale(1, 1.03) translate(2%, -2%) skew(-3deg, 0deg);
  }
  80% {
    transform: scale(1, 0.97) translate(-2%, 2%) skew(3deg, 0deg);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
@keyframes anime1 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
.anime2 {
  animation: anime2 3s infinite ease-in-out 0.8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 70px;
  height: 70px;
  margin-top: 15px;
}

@keyframes anime2 {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}
@keyframes flyOut01 {
  0% {
    transform: translate(100%, 150%) scale(0.3);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes flyOut02 {
  0% {
    transform: translate(-100%, 100%) scale(0.3);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes flyOut03 {
  0% {
    transform: translate(50%, -100%) scale(0.3);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes flyOut04 {
  0% {
    transform: translate(0, 0) scale(0.3);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes bubbleAppear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/**
750px → 600px
縮小率 .533333
基準値 5
 */
:root {
  --mh--duration01: 0.3s;
  --mh--duration02: 0.6s;
  --mh--duration03: 0.9s;
  --mh--duration04: 1.2s;
  --mh--easing01: ease;
  --mh--easing02: cubic-bezier(0.1, 0.7, 0.4, 1);
  --mh--easing03: cubic-bezier(0.03, 0.9, 0.15, 1);
  --mh--easing04: cubic-bezier(1, 0, 0.87, 0.86);
  --mh--easing05: cubic-bezier(0.952, 0.165, 1, 0.913);
}

html {
  scroll-behavior: smooth; /* JSなしでもここだけでスムースに */
}

img {
  height: auto;
  max-width: 100%;
  width: 100%;
}

.globalFooter img {
  width: auto;
  max-width: inherit;
}

.modal-overlay-lock {
  overflow: hidden !important;
  width: auto;
}
.modal-overlay-lock body {
  overflow: hidden !important;
}

html, body {
  overflow-x: clip !important;
}

html, body {
  height: 100%;
}

html.opAnimation-end,
body.opAnimation-end {
  overflow-y: auto !important;
  height: auto;
}

body.is-fixedMenu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  left: 0;
}

.main {
  overflow-y: clip;
}

.group {
  position: relative;
  z-index: 2;
}

.iceBox article, .iceBox aside, .iceBox body, .iceBox dd, .iceBox dl, .iceBox dt, .iceBox figcaption, .iceBox figure, .iceBox footer, .iceBox h1, .iceBox h2, .iceBox h3, .iceBox h4, .iceBox h5, .iceBox h6, .iceBox header, .iceBox html, .iceBox li, .iceBox nav, .iceBox ol, .iceBox p, .iceBox section, .iceBox ul {
  font-family: inherit;
  font-family: "Noto Sans JP", serif !important;
  font-optical-sizing: auto;
}
.iceBox a, .iceBox a:active, .iceBox a:hover, .iceBox a:link, .iceBox a:visited {
  color: #004090;
}
.iceBox .js-appear {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.iceBox .js-appear.is-show {
  opacity: 1;
  transform: translateY(0);
}
.iceBox .js-appearFromLeft {
  opacity: 0;
  transform: translate(-70%, 50%) scale(0.3);
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.74, 1);
  transform-origin: center;
}
.iceBox .js-appearFromLeft.is-show {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.iceBox .fixedBtn {
  position: fixed;
  right: 0;
  top: 0;
  margin-top: 4vw;
  margin-right: 6vw;
  width: 8.5333333333vw;
  height: 8.5333333333vw;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.4666666667vw solid #004090;
  background-color: #fff;
  z-index: 30;
  cursor: pointer;
}
@media only screen and (min-width:768px) {
  .iceBox .fixedBtn {
    width: 60px;
    height: 60px;
    border-width: 3px;
    margin-top: 20px;
    margin-right: 20px;
  }
}
.iceBox .fixedBtn__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.iceBox .fixedBtn__inner span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #004090;
  width: 50%;
  height: 0;
  padding-bottom: 0.4vw;
  transition: all 0.25s ease;
  transform-origin: 0 0;
}
@media only screen and (min-width:768px) {
  .iceBox .fixedBtn__inner span {
    padding-bottom: 3px;
  }
}
.iceBox .fixedBtn__inner span:nth-child(1) {
  transform: translateY(-1.5vw);
}
@media only screen and (min-width:768px) {
  .iceBox .fixedBtn__inner span:nth-child(1) {
    transform: translateY(-0.5em);
  }
}
.iceBox .fixedBtn__inner span:nth-child(3) {
  transform: translateY(1.5vw);
}
@media only screen and (min-width:768px) {
  .iceBox .fixedBtn__inner span:nth-child(3) {
    transform: translateY(0.5em);
  }
}
.iceBox .fixedBtn.is-active {
  border-color: #fff;
  background-color: #004090;
}
.iceBox .fixedBtn.is-active .fixedBtn__inner span {
  background-color: #fff;
}
.iceBox .fixedBtn.is-active .fixedBtn__inner span:nth-child(1) {
  transform: rotate(-45deg);
  margin-top: 65%;
  margin-left: 31%;
}
.iceBox .fixedBtn.is-active .fixedBtn__inner span:nth-child(2) {
  width: 0;
}
.iceBox .fixedBtn.is-active .fixedBtn__inner span:nth-child(3) {
  margin-top: 29%;
  transform: rotate(45deg);
  margin-left: 35%;
}
.iceBox .fixedMenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh;
  z-index: 20;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
}
.iceBox .fixedMenu__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
}
@media only screen and (max-width: 1280px) {
  .iceBox .fixedMenu__inner {
    font-size: 1.25vw;
  }
}
@media (min-width: 768px) and (max-height: 820px) {
  .iceBox .fixedMenu__inner {
    align-items: flex-start;
  }
}
.iceBox .fixedMenu.is-active {
  opacity: 1;
  pointer-events: auto;
}
.iceBox .fixedMenu__logo {
  width: 18vw;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 4vw;
  margin-left: 6vw;
  z-index: 10;
}
@media only screen and (min-width:768px) {
  .iceBox .fixedMenu__logo {
    width: 130px;
    margin-left: 20px;
    margin-top: 20px;
  }
}
.iceBox .fixedMenu__contents {
  width: 100%;
  transform: skewY(345deg);
  background-color: #004090;
}
.iceBox .fixedMenu__contents__inner {
  padding: 13.3333333333vw 0 20vw;
  transform: skewY(15deg);
  width: 71.6vw;
  margin: 0 auto;
}
@media only screen and (min-width:768px) {
  .iceBox .fixedMenu__contents__inner {
    width: 80%;
    max-width: 500px;
  }
}
@media (min-width: 768px) and (max-height: 820px) {
  .iceBox .fixedMenu__contents__inner {
    padding: 7% 0 4%;
  }
}
.iceBox .fixedMenu__items .fixedMenu__item + .fixedMenu__item {
  margin-top: 0.6em;
}
.iceBox .fixedMenu__items .fixedMenu__item a {
  display: inline-block;
  font-size: 4.2666666667vw;
  color: #fff;
  padding: 0.1em 0.2em;
  font-weight: bold;
}
@media only screen and (min-width:768px) {
  .iceBox .fixedMenu__items .fixedMenu__item a {
    font-size: 1.375em;
  }
}
.iceBox .fixedMenu__items .fixedMenu__item.is-active a {
  background-color: #FFF21C;
  color: #004090;
}
.iceBox .fixedMenu__contents__txt {
  color: #fff;
  font-size: 4.2666666667vw;
  font-weight: bold;
  margin-top: 10vw;
  margin-bottom: 0.5em;
  line-height: 1.5;
  position: relative;
}
@media only screen and (min-width:768px) {
  .iceBox .fixedMenu__contents__txt {
    font-size: 1.375em;
    margin-top: 3em;
  }
}
.iceBox .fixedMenu__contents__txt:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  margin-top: -6.5vw;
}
@media only screen and (min-width:768px) {
  .iceBox .fixedMenu__contents__txt:before {
    margin-top: -1.8em;
  }
}
@media only screen and (min-width:768px) {
  .iceBox .fixedMenu__contents__bnr {
    width: 60%;
    margin-top: 1em;
  }
}
.iceBox .pickup {
  position: relative;
  z-index: 2;
}
.iceBox .pickup:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: -16vw;
  margin-right: -1vw;
  width: 98.6666666667vw;
  height: 0;
  padding-bottom: 321.7333333333vw;
  background: url("/icebox/assets/renew/img/pickup_bg.png") no-repeat center center/cover;
  z-index: 0;
  pointer-events: none;
}
@media only screen and (min-width:768px) {
  .iceBox .pickup:before {
    display: none;
  }
}
.iceBox .pickup .l-section__inner {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width:767px) {
  .iceBox .pickup .l-section__inner {
    max-width: 90%;
  }
}
.iceBox .pickup .l-section__inner:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 125.4901960784%;
  height: 0;
  padding-bottom: 171.3725490196%;
  z-index: -1;
  margin-right: -70%;
  margin-top: -15%;
  pointer-events: none;
  background: url("/icebox/assets/renew/img/pickup_bg_pc.png") no-repeat center center/cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
@media only screen and (max-width:767px) {
  .iceBox .pickup .l-section__inner:after {
    display: none;
  }
}
.iceBox .pickup.is-show .l-section__inner:after {
  opacity: 1;
}
.iceBox .feature {
  background-color: #CAECFA;
}
@media only screen and (min-width:768px) {
  .iceBox .feature {
    margin-top: 200px;
    padding-bottom: 360px;
  }
}
@media only screen and (max-width: 1020px) {
  .iceBox .feature {
    margin-top: 19.6078431373%;
    padding-bottom: 35.2941176471%;
  }
}
@media only screen and (max-width:767px) {
  .iceBox .feature {
    margin-top: 26.6666666667vw;
    padding-bottom: 45.3333333333vw;
  }
}
@media only screen and (max-width:767px) {
  .iceBox .feature .l-section__inner {
    max-width: 90%;
  }
}
.iceBox .feature .l-section__inner {
  position: relative;
}
.iceBox .feature .l-section__inner:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-left: -10vw;
  margin-top: -20vw;
  width: 120vw;
  height: 53.3333333333vw;
  transform-origin: 50% 50%;
  transform: skewY(340deg);
  background-color: #CAECFA;
  z-index: 0;
  pointer-events: none;
}
@media only screen and (min-width:768px) {
  .iceBox .feature .l-section__inner:before {
    width: 150vw;
    margin-left: -25vw;
    margin-top: -37%;
    height: 54%;
    transform: skewY(348deg);
  }
}
.iceBox .l-feature__contents {
  position: relative;
}
@media only screen and (min-width:768px) {
  .iceBox .l-feature__contents {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (min-width:768px) {
  .iceBox .feature__meta {
    width: 50%;
  }
}
@media only screen and (min-width:768px) {
  .iceBox .feature__eyeCatch {
    width: 50%;
  }
}
.iceBox .iceBoxFeatures {
  margin-bottom: 2em;
  margin-top: 18vw;
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures {
    margin-top: 0;
  }
}
.iceBox .iceBoxFeatures__inner {
  position: relative;
}
.iceBox .iceBoxFeatures.is-show .iceBoxFeatures__pkg {
  opacity: 1;
  transform: translate(2em, 0);
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures.is-show .iceBoxFeatures__pkg {
    transform: translate(5em, 0);
  }
}
.iceBox .icon--ice_01 {
  width: 19.7333333333vw;
  padding-bottom: 19.7333333333vw;
  aspect-ratio: 1/1;
  background: url("/icebox/assets/renew/img/ice_grain_1.png") no-repeat center center/100% 100%;
  margin-top: -11vw;
  margin-left: -11vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_01 {
    width: 50.7317073171%;
    padding-bottom: 51.2195121951%;
    padding-bottom: 48.219512%;
    margin-top: -25%;
    margin-left: -24%;
  }
}
.iceBox .icon--ice_01 .icon--ice__inner {
  width: 19.7333333333vw;
  padding-bottom: 19.7333333333vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_01 .icon--ice__inner {
    width: 100%;
    padding-bottom: 51.2195121951%;
  }
}
.iceBox .icon--ice_02 {
  width: 21.3333333333vw;
  padding-bottom: 19.6vw;
  background: url("/icebox/assets/renew/img/ice_grain_2.png") no-repeat center center/100% 100%;
  margin-top: -11vw;
  margin-left: -11vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_02 {
    width: 67.3333333333%;
    padding-bottom: 51.3333333333%;
    padding-bottom: 55.333333%;
    margin-top: -31%;
    margin-left: -26%;
  }
}
.iceBox .icon--ice_02 .icon--ice__inner {
  width: 21.3333333333vw;
  padding-bottom: 19.6vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_02 .icon--ice__inner {
    width: 60.6666666667%;
    width: 100%;
    padding-bottom: 44.6666666667%;
  }
}
.iceBox .icon--ice_03 {
  width: 15.3333333333vw;
  padding-bottom: 14vw;
  background: url("/icebox/assets/renew/img/ice_grain_3.png") no-repeat center center/100% 100%;
  margin-top: -8vw;
  margin-left: -6vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_03 {
    width: 56.1111111111%;
    padding-bottom: 42.7777777778%;
    margin-top: -25%;
    margin-left: -24%;
  }
}
.iceBox .icon--ice_03 .icon--ice__inner {
  width: 15.3333333333vw;
  padding-bottom: 14vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_03 .icon--ice__inner {
    width: 100%;
    padding-bottom: 42.7777777778%;
  }
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_03 .icon--ice__inner .icon--ice__num {
    margin-top: -0.1em;
  }
}
.iceBox .icon--ice_04 {
  width: 19.4666666667vw;
  padding-bottom: 16.1333333333vw;
  background: url("/icebox/assets/renew/img/ice_grain_4.png") no-repeat center center/100% 100%;
  margin-top: -10vw;
  margin-left: -8vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_04 {
    width: 56.1111111111%;
    padding-bottom: 42.7777777778%;
    margin-top: -25%;
    margin-left: -24%;
  }
}
.iceBox .icon--ice_04 .icon--ice__inner {
  width: 19.4666666667vw;
  padding-bottom: 16.1333333333vw;
}
@media only screen and (min-width:768px) {
  .iceBox .icon--ice_04 .icon--ice__inner {
    width: 100%;
    padding-bottom: 42.7777777778%;
  }
}
.iceBox .iceBoxFeatures__bubble__txt {
  color: #fff;
  font-weight: bold;
  font-size: 4.2666666667vw;
  line-height: 1.5;
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__bubble__txt {
    font-size: 1.375em;
  }
}
.iceBox .iceBoxFeatures__bubble__txt span {
  font-size: 0.75em;
}
.iceBox .iceBoxFeatures__bubble_01 {
  margin-left: 4.2666666667vw;
  margin-top: -6vw;
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__bubble_01 {
    margin-left: 3%;
    margin-top: -8%;
  }
}
.iceBox .iceBoxFeatures__bubble_01 .iceBoxFeatures__bubble__inner:after {
  transform: skewX(36deg);
}
.iceBox .iceBoxFeatures__bubble_02 {
  margin-top: 2.666667vw;
  margin-left: 58.2666666667vw;
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__bubble_02 {
    margin-left: 53%;
    margin-top: -6%;
  }
}
.iceBox .iceBoxFeatures__bubble_02 .iceBoxFeatures__bubble__inner:after {
  transform: skewX(-36deg);
}
.iceBox .iceBoxFeatures__bubble_03 {
  margin-top: 50.666667vw;
  margin-left: 2.9333333333vw;
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__bubble_03 {
    margin-top: 39%;
    margin-left: 6%;
  }
}
.iceBox .iceBoxFeatures__bubble_03 .iceBoxFeatures__bubble__inner:after {
  bottom: inherit;
  top: 0;
  margin-top: -3.8vw;
  transform: rotate(180deg) skewX(320deg);
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__bubble_03 .iceBoxFeatures__bubble__inner:after {
    margin-top: -1.5em;
  }
}
.iceBox .iceBoxFeatures__bubble_04 {
  margin-top: 56vw;
  margin-top: 46vw;
  margin-left: 53.3333333333vw;
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__bubble_04 {
    margin-top: 38%;
    margin-left: 57%;
  }
}
.iceBox .iceBoxFeatures__bubble_04 .iceBoxFeatures__bubble__inner:after {
  bottom: inherit;
  top: 0;
  margin-top: -3.8vw;
  transform: rotate(180deg) skewX(-320deg);
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__bubble_04 .iceBoxFeatures__bubble__inner:after {
    margin-top: -1.5em;
  }
}
.iceBox .iceBoxFeatures__pkg {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translate(2em, 10%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.5s;
}
@media only screen and (min-width:768px) {
  .iceBox .iceBoxFeatures__pkg {
    width: 72.5490196078%;
    transform: translate(5em, 10%);
  }
}
.iceBox .features__btn {
  margin-bottom: 12.4vw;
}
@media only screen and (min-width:768px) {
  .iceBox .features__btn {
    max-width: 450px;
    margin: 0 auto;
    margin-bottom: 8.0392156863%;
  }
}
.iceBox .feature__txtBox {
  position: relative;
  margin-top: 20.2666666667vw;
}
@media only screen and (min-width:768px) {
  .iceBox .feature__txtBox {
    width: 65.7843137255%;
    margin: 0 auto;
    margin-top: 14.7058823529%;
  }
}
.iceBox .feature__txtBox:after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 110%;
  aspect-ratio: 748/604;
  z-index: 0;
  margin-top: -7em;
  margin-left: -3%;
  background: url("/icebox/assets/renew/img/feature__txtBox_bg.png") no-repeat center center/cover;
}
@media only screen and (min-width:768px) {
  .iceBox .feature__txtBox:after {
    background-image: url("/icebox/assets/renew/img/feature__txtBox_bg_pc.png");
    margin-top: -4.3em;
    margin-left: -4%;
    aspect-ratio: 672/400;
  }
}
.iceBox .feature__txtBox__inner {
  position: relative;
  z-index: 1;
  padding-left: 5.6vw;
}
@media only screen and (min-width:768px) {
  .iceBox .feature__txtBox__inner {
    padding-left: 0;
    padding: 0 6em;
  }
}
.iceBox .feature__txtBox__ttl {
  font-size: 4.2666666667vw;
  font-weight: bold;
  line-height: 1.7;
  color: #004090;
}
@media only screen and (min-width:768px) {
  .iceBox .feature__txtBox__ttl {
    text-align: center;
    font-size: 1.375em;
  }
}
.iceBox .feature__txtBox__txt {
  font-size: 3.4666666667vw;
  line-height: 1.8;
  margin-top: 1em;
  color: #004090;
  font-weight: 600;
}
@media only screen and (min-width:768px) {
  .iceBox .feature__txtBox__txt {
    font-size: 1.125em;
    margin-top: 0.7em;
    letter-spacing: -0.02em;
  }
}

.semibold, .categoryItemDetail, .contentHeadTexts, .leadText {
  font-weight: 600;
}

.bold, .recipeLinkText, .recipeBelowHeadMain, .recipeBelowHeadSub, .categoryItemLabel, .categoryMain, .categorySub, .contentHeadMain, .contentHeadBubble, .leadMain, .kvBubble, .kvText__mainCopy, .kvText__subCopy {
  font-weight: 700;
}

.iceBoxRecipe {
  color: #004294;
}
@media only screen and (min-width:768px) {
  .iceBoxRecipe .l-section__inner {
    max-width: 670px;
  }
}

.iceMotif01 {
  clip-path: polygon(13% 10%, 75% 0, 100% 45%, 77% 100%, 11% 88%, 0 47%);
  aspect-ratio: 268/224;
  background-color: #FFF87F;
}

.iceMotif02 {
  clip-path: polygon(60% 0, 95% 25%, 100% 52%, 99% 79%, 33% 100%, 5% 85%, 0 9%);
  aspect-ratio: 282/228;
  background-color: #FFF87F;
}

.kv {
  position: relative;
  max-width: 80em;
  margin: auto;
}
.kv.is-active .fvFigure {
  mask-size: 100%;
}
.kv.is-active .kvText__subCopy,
.kv.is-active .kvText__mainCopy {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.kv.is-active .kvText__subCopy:before,
.kv.is-active .kvText__mainCopy:before {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.kv.is-active .kvIcon img {
  animation-name: jumpin;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}
.kv.is-active .kvIce .iceMotif01,
.kv.is-active .kvIce .iceMotif02 {
  transform: translateY(0%);
  opacity: 1;
}

.kvIce {
  position: absolute;
  z-index: -1;
}
.kvIce .iceMotif01,
.kvIce .iceMotif02 {
  transition: all 0.8s ease-out 0.4s;
}

.kvIce01 {
  transform: rotate(-42deg);
  width: 79.7333333333vw;
  top: -19.4666666667vw;
  left: -16.4vw;
}
@media only screen and (min-width:768px) {
  .kvIce01 {
    top: -6.375em;
    left: -6.375em;
    width: 27.8125em;
  }
}
.kvIce01 .iceMotif01 {
  transform: translateY(50%);
  opacity: 0;
}

.kvIce02 {
  transform: rotate(54deg);
  width: 37.6vw;
  top: 29.4666666667vw;
  left: 55.2vw;
}
@media only screen and (min-width:768px) {
  .kvIce02 {
    top: 5.25em;
    left: 25.25em;
    width: 13.125em;
  }
}
.kvIce02 .iceMotif02 {
  transform: translateY(50%);
  opacity: 0;
}

.kvIce03 {
  transform: rotate(211deg);
  width: 37.6vw;
  bottom: -17.8666666667vw;
  left: 44.6666666667vw;
}
@media only screen and (min-width:768px) {
  .kvIce03 {
    top: 30.125em;
    left: 20em;
    bottom: auto;
    width: 17.625em;
  }
}
.kvIce03 .iceMotif02 {
  transform: translateY(50%);
  opacity: 0;
}

.recipeKvLogo {
  position: absolute;
  aspect-ratio: 107/52.87;
  top: 3.3333333333vw;
  left: 5.3333333333vw;
  width: 18vw;
}
@media only screen and (min-width:768px) {
  .recipeKvLogo {
    top: 1.5625em;
    left: 1.5625em;
    width: 6.6875em;
  }
}

.kvWrapper {
  display: grid;
  padding: 16.5333333333vw 4.5333333333vw 0;
  gap: 2.6666666667vw;
}
@media only screen and (min-width:768px) {
  .kvWrapper {
    gap: 0;
    grid-template-columns: 4fr 6fr;
    padding: 0 3.375em;
    align-items: center;
  }
}

.kvText {
  display: grid;
  height: fit-content;
  gap: 2.6666666667vw;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width:768px) {
  .kvText {
    gap: 1.25em;
  }
}

.kvText__subCopy {
  letter-spacing: 0.075em;
  line-height: 1;
  margin-block: calc((1em - 1lh) / 2);
  font-size: 4.2666666667vw;
}
@media only screen and (min-width:768px) {
  .kvText__subCopy {
    font-size: 1.625em;
  }
}

.kvText__mainCopy {
  letter-spacing: 0.075em;
  line-height: 1.4285714286;
  font-size: 9.3333333333vw;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (min-width:768px) {
  .kvText__mainCopy {
    line-height: 1.4;
    font-size: 3.125em;
  }
}

.kvText__subCopy,
.kvText__mainCopy {
  width: fit-content;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 0.36s ease 0.3s;
}
.kvText__subCopy:before,
.kvText__mainCopy:before {
  content: "";
  background-color: #004294;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.36s ease 0.8s;
}

.fvFigure {
  aspect-ratio: 664/789;
  position: relative;
  margin: 0 calc(50% - 50vw);
  mask-image: url(/icebox/assets/renew/img/recipe/img_kv_frame.svg);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 0%;
  transition: mask-size 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s;
  overflow: hidden;
  aspect-ratio: 664/789;
}
@media only screen and (min-width:768px) {
  .fvFigure {
    width: 100%;
    margin: 0;
  }
}
.fvFigure img {
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

.kvBubbles {
  width: 70%;
  aspect-ratio: 4/3;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 10%;
}

.kvBubble {
  opacity: 0;
  position: absolute;
  letter-spacing: 0.075em;
  line-height: 1;
  font-size: 3.4666666667vw;
  margin-block: calc((1em - 1lh) / 2);
  animation: fadeInOut 4s ease-in-out infinite;
}
@media only screen and (min-width:768px) {
  .kvBubble {
    font-size: 1.25em;
  }
}

.kvBubble01 {
  top: 10%;
  left: 45%;
}

.kvBubble02 {
  top: 30%;
  left: 10%;
  animation-delay: 0.6s;
}

.kvBubble03 {
  top: 45%;
  right: 20%;
  animation-delay: 0.5s;
}

.kvBubble04 {
  top: 65%;
  left: 20%;
  animation-delay: 0.3s;
}

.kvBubble05 {
  top: 85%;
  right: 30%;
  animation-delay: 0.8s;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(1em);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-1em);
  }
}
.kvIcon {
  display: block;
  position: absolute;
  aspect-ratio: 96.9/145.19;
  width: 12.9333333333vw;
  top: 3.3333333333vw;
  right: 5.0666666667vw;
  transform: rotate(17deg);
}
@media only screen and (min-width:768px) {
  .kvIcon {
    top: auto;
    right: auto;
    left: 90%;
    bottom: 7%;
    transform: translateX(-50%) rotate(17deg);
    width: 6.0625em;
  }
}
.kvIcon img {
  opacity: 0;
}

.leadText {
  line-height: 1.7307692308;
  font-size: 3.4666666667vw;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (min-width:768px) {
  .leadText {
    line-height: 2.2222222222;
    font-size: 1.125em;
  }
}

.leadWrapper {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 3.4666666667vw;
  padding: 16.5333333333vw 0 10.9333333333vw;
}
@media only screen and (min-width:768px) {
  .leadWrapper {
    gap: 1.25em;
    padding: 3.75em 0;
  }
}

.leadIce {
  position: absolute;
  transform: rotate(153deg);
  bottom: -6.9333333333vw;
  left: 2.1333333333vw;
  width: 37.6vw;
  z-index: -1;
}
@media only screen and (min-width:768px) {
  .leadIce {
    bottom: -3.25em;
    left: -10.125em;
    width: 14.1875em;
  }
}

.leadHead {
  text-align: center;
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 3.7333333333vw;
}
@media only screen and (min-width:768px) {
  .leadHead {
    gap: 1.25em;
  }
}

.leadMain {
  line-height: 1;
  font-size: 4.2666666667vw;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (min-width:768px) {
  .leadMain {
    font-size: 1.625em;
  }
}

.leadTrets {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4vw;
}
@media only screen and (min-width:768px) {
  .leadTrets {
    gap: 1.5em;
  }
}
.leadTrets.is-active .leadTretIcon img {
  animation-name: jumpin;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.leadTretIcon {
  display: block;
  height: auto;
}
.leadTretIcon img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: center bottom;
  transform: scale(0);
  opacity: 0;
}

.leadTretIcon01 {
  aspect-ratio: 66.92/186.45;
  transform: rotate(-7deg);
  width: 8.9333333333vw;
}
@media only screen and (min-width:768px) {
  .leadTretIcon01 {
    width: 4.1875em;
  }
}

.leadTretIcon02 {
  transform: rotate(12deg);
  aspect-ratio: 93.15/130.54;
  width: 12.4vw;
}
@media only screen and (min-width:768px) {
  .leadTretIcon02 {
    width: 5.8125em;
  }
}
.leadTretIcon02 img {
  animation-delay: 0.1s;
}

.leadTretIcon03 {
  transform: rotate(-10deg);
  aspect-ratio: 66.96/150.44;
  width: 8.9333333333vw;
}
@media only screen and (min-width:768px) {
  .leadTretIcon03 {
    width: 4.1875em;
  }
}
.leadTretIcon03 img {
  animation-delay: 0.2s;
}

.leadTretIcon04 {
  transform: rotate(11deg);
  aspect-ratio: 71.77/175.52;
  width: 9.6vw;
}
@media only screen and (min-width:768px) {
  .leadTretIcon04 {
    width: 4.5em;
  }
}
.leadTretIcon04 img {
  animation-delay: 0.3s;
}

.leadTretIcon05 {
  transform: rotate(-9deg);
  aspect-ratio: 80.8/140.66;
  width: 10.6666666667vw;
}
@media only screen and (min-width:768px) {
  .leadTretIcon05 {
    width: 5em;
  }
}
.leadTretIcon05 img {
  animation-delay: 0.4s;
}

.contentHeadWrap {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.contentHead {
  position: relative;
  text-align: center;
  display: grid;
  gap: 3.7333333333vw;
  margin: 10.9333333333vw auto 19.7333333333vw;
  padding: 15.0666666667vw 0 21.6vw;
}
@media only screen and (min-width:768px) {
  .contentHead {
    width: fit-content;
    gap: 1.375em;
    margin: 5.9375em auto 11.5em;
    padding: 7.875em 8em 7.375em;
  }
}
.contentHead:before {
  content: "";
  width: 120%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-color: #D3F0FB;
  z-index: 0;
  transform: translateX(-8%) scale(0);
  transition: transform 0.3s ease-out 0.2s;
  clip-path: polygon(14% 10%, 77% 0, 100% 52%, 77% 100%, 13% 93%, 0 61%);
  margin: auto calc(50% - 50vw);
}
@media only screen and (min-width:768px) {
  .contentHead:before {
    clip-path: polygon(14% 15%, 77% 0, 100% 52%, 77% 100%, 13% 93%, 0 61%);
    transform: unset;
    transform: translateX(0%) scale(0);
    margin: auto;
    width: 100%;
  }
}
.contentHead.is-active:before {
  transform: translateX(-8%) scale(1);
}
@media only screen and (min-width:768px) {
  .contentHead.is-active:before {
    transform: translateX(0%) scale(1);
  }
}
.contentHead.is-active .contentHeadInner {
  opacity: 1;
}
.contentHead.is-active .contentHeadIcon01 img,
.contentHead.is-active .contentHeadIcon02 img {
  animation: jumpin 0.3s ease forwards 0.4s;
}

.contentHeadInner {
  display: grid;
  gap: 3.7333333333vw;
}
@media only screen and (min-width:768px) {
  .contentHeadInner {
    gap: 1.375em;
  }
}

.contentHeadBubble {
  position: relative;
  width: fit-content;
  margin: auto;
  letter-spacing: 0.075em;
  margin-block: calc((1em - 1lh) / 2);
  line-height: 1.6666666667;
}
@media only screen and (min-width:768px) {
  .contentHeadBubble {
    padding: 0 0.75em;
  }
}
.contentHeadBubble:before, .contentHeadBubble:after {
  content: "";
  position: absolute;
  background-color: currentColor;
  width: 3px;
  height: 100%;
  transform-origin: bottom center;
  bottom: 0;
}
.contentHeadBubble:before {
  left: 0;
  transform: rotate(-20deg);
}
.contentHeadBubble:after {
  right: 0;
  transform: rotate(20deg);
}

.contentHeadMain {
  font-size: 3.4666666667vw;
  margin-block: calc((1em - 1lh) / 2);
  letter-spacing: 0.075em;
  font-size: 6vw;
  line-height: 1.5555555556;
}
@media only screen and (min-width:768px) {
  .contentHeadMain {
    line-height: 1;
    font-size: 2.1875em;
  }
}

.contentHeadTexts {
  letter-spacing: 0.075em;
  display: grid;
  gap: 3.7333333333vw;
}
@media only screen and (min-width:768px) {
  .contentHeadTexts {
    display: block;
    gap: 0;
  }
}

.contentHeadIce {
  position: absolute;
}

.contentHeadIce01 {
  transform: rotate(211deg);
  width: 37.6vw;
  right: 2.6666666667vw;
  bottom: -16.5333333333vw;
}
@media only screen and (min-width:768px) {
  .contentHeadIce01 {
    width: 12.8125em;
    bottom: -5.875em;
    right: 13.8125em;
    z-index: 4;
  }
}

.contentHeadIce02 {
  display: none;
}
@media only screen and (min-width:768px) {
  .contentHeadIce02 {
    transform: rotate(153deg);
    display: block;
    width: 11.5em;
    top: -8.25em;
    right: -3.4375em;
    z-index: -4;
  }
}

.contentHeadIcon {
  position: absolute;
}
.contentHeadIcon img {
  opacity: 0;
  transform: scale(0);
}

.contentHeadIcon01 {
  aspect-ratio: 72.17/109.89;
  transform: rotate(-13deg);
  width: 14.6666666667vw;
  top: 32.8vw;
  left: 8vw;
}
@media only screen and (min-width:768px) {
  .contentHeadIcon01 {
    width: 4.5em;
    top: 2.75em;
    left: 8.5em;
  }
}

.contentHeadIcon02 {
  aspect-ratio: 68/105;
  transform: rotate(18deg);
  width: 13.8666666667vw;
  bottom: 29.7333333333vw;
  right: 11.7333333333vw;
}
@media only screen and (min-width:768px) {
  .contentHeadIcon02 {
    width: 4.25em;
    right: 6em;
    bottom: 7.25em;
  }
}

.swipeImages {
  overflow: hidden;
  display: flex;
  gap: 4.6666666667vw;
}
@media only screen and (min-width:768px) {
  .swipeImages {
    gap: 1.625em;
  }
}

.swipeImageLine {
  display: flex;
  animation: scroll-left 30s infinite linear 0.5s both;
  gap: 4.6666666667vw;
}
@media only screen and (min-width:768px) {
  .swipeImageLine {
    gap: 1.625em;
  }
}
.swipeImageItem {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1;
  width: 33.3333333333vw;
  position: relative;
}
@media only screen and (min-width:768px) {
  .swipeImageItem {
    width: 12.5vw;
  }
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.swipeImageItemLink {
  display: block;
}

.recipeCategory {
  background: linear-gradient(0deg, rgb(255, 248, 127) 0%, rgb(241, 246, 167) 14%, rgb(211, 240, 251) 80%);
  position: relative;
  overflow: hidden;
  display: grid;
  padding: 17.3333333333vw 5.3333333333vw 20vw;
  gap: 32.6666666667vw;
  overflow: clip;
}
@media only screen and (min-width:768px) {
  .recipeCategory {
    padding: 12em 0 7.5em;
    gap: 12.5em;
  }
}

.recipeCategoryBg {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 670px;
}
.recipeCategoryBg:before {
  content: "";
  position: absolute;
  top: -1.6vw;
  background: url(/icebox/assets/renew/img/recipe/img_recipe_wave.svg) center bottom/cover no-repeat;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 8vw;
}
@media only screen and (min-width:768px) {
  .recipeCategoryBg:before {
    background: url(/icebox/assets/renew/img/recipe/img_recipe_wave.svg) center center/cover no-repeat;
    top: -1.5625em;
    height: 5.3125em;
  }
}
.recipeCategoryBg:after {
  content: "";
  background: #fff;
  position: absolute;
  bottom: 100%;
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  z-index: -1;
}

.recipeCategoryInner {
  position: relative;
}

.recipeCategoryIce {
  position: absolute;
  z-index: 0;
}
.recipeCategoryIce .iceMotif01,
.recipeCategoryIce .iceMotif02 {
  opacity: 0;
  transform: translateY(50%);
  transition: opacity 2.6s ease, transform 1.6s ease;
}
.recipeCategoryIce.is-active .iceMotif01,
.recipeCategoryIce.is-active .iceMotif02 {
  opacity: 1;
  transform: translateY(0%);
}

.recipeCategoryIce01 {
  transform: rotate(66deg);
  width: 54.6666666667vw;
  top: 16vw;
  left: -2.6666666667vw;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce01 {
    width: 16.75em;
    top: 5.875em;
    left: 1.125em;
  }
}

.recipeCategoryIce02 {
  transform: rotate(-42deg);
  width: 54.6666666667vw;
  right: -2.6666666667vw;
  top: 14%;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce02 {
    width: 16.75em;
    top: 19%;
    right: 3.125em;
  }
}

.recipeCategoryIce03 {
  width: 49.6vw;
  top: 33%;
  left: -10.6666666667vw;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce03 {
    width: 15.1875em;
    top: 32%;
    left: -5em;
  }
}

.recipeCategoryIce04 {
  transform: rotate(157deg);
  width: 37.6vw;
  right: -10.6666666667vw;
  top: 42%;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce04 {
    width: 11.5em;
    top: 38%;
    right: -7.5625em;
  }
}

.recipeCategoryIce05 {
  transform: rotate(54deg);
  width: 37.6vw;
  left: 10.6666666667vw;
  top: 56%;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce05 {
    width: 11.5em;
    top: 53%;
    left: 8em;
  }
}

.recipeCategoryIce06 {
  transform: rotate(-39deg);
  width: 51.4666666667vw;
  right: -8vw;
  top: 68%;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce06 {
    width: 15.75em;
    top: 61%;
    right: -1.375em;
  }
}

.recipeCategoryIce07 {
  transform: rotate(-39deg);
  width: 41.7333333333vw;
  left: -10.2666666667vw;
  top: 77%;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce07 {
    width: 12.625em;
    top: 77%;
    left: -4.8125em;
  }
}

.recipeCategoryIce08 {
  transform: rotate(255deg);
  width: 54.2666666667vw;
  right: -26.6666666667vw;
  top: 92%;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce08 {
    width: 16.625em;
    right: -9.75em;
  }
}

.recipeCategoryIce09 {
  transform: rotate(-39deg);
  width: 54.6666666667vw;
  left: -5.3333333333vw;
  top: 102%;
}
@media only screen and (min-width:768px) {
  .recipeCategoryIce09 {
    width: 16.75em;
    top: 102%;
    left: 3.75em;
  }
}

.recipeCategoryWrapper {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10vw;
}
@media only screen and (min-width:768px) {
  .recipeCategoryWrapper {
    gap: 4.375em;
  }
}

.recipeCategoryBlock {
  display: grid;
  gap: 5.3333333333vw;
  scroll-margin-top: 10.6666666667vw;
}
@media only screen and (min-width:768px) {
  .recipeCategoryBlock {
    gap: 2.25em;
    scroll-margin-top: 4em;
  }
}

.recipeCategoryBlockTitle {
  text-align: center;
  display: grid;
  gap: 2.4vw;
}
@media only screen and (min-width:768px) {
  .recipeCategoryBlockTitle {
    gap: 0.875em;
  }
}

.categorySub {
  margin-block: calc((1em - 1lh) / 2);
  font-size: 3.4666666667vw;
}
@media only screen and (min-width:768px) {
  .categorySub {
    font-size: 1.125em;
  }
}

.categoryMain {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: calc((1em - 1lh) / 2);
  font-size: 8vw;
  gap: 1.7333333333vw;
}
@media only screen and (min-width:768px) {
  .categoryMain {
    gap: 0.25em;
    font-size: 2.5em;
  }
}

.categoryMainIcon {
  aspect-ratio: 1;
  background: url(/icebox/assets/renew/img/recipe/txt_with.svg) center center/contain no-repeat;
  width: 9.6vw;
}
@media only screen and (min-width:768px) {
  .categoryMainIcon {
    width: 1.125em;
  }
}

.categoryList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.3333333333vw;
}
@media only screen and (min-width:768px) {
  .categoryList {
    gap: 1.625em;
  }
}

.categoryItem {
  display: grid;
  place-content: baseline;
  gap: 2vw;
}
@media only screen and (min-width:768px) {
  .categoryItem {
    text-align: center;
    gap: 1.25em;
  }
}

.categoryItemFigure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 10px;
}
@media only screen and (min-width:768px) {
  .categoryItemFigure {
    border-radius: 1em;
  }
}
.categoryItemFigure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.categoryItemLabel {
  margin-block: calc((1em - 1lh) / 2);
  font-size: 3.4666666667vw;
}
@media only screen and (min-width:768px) {
  .categoryItemLabel {
    font-size: 1.125em;
  }
}

.categoryItemDetail {
  letter-spacing: 0;
  margin-block: calc((1em - 1lh) / 2);
  line-height: 1.5217391304;
  font-size: 3.0666666667vw;
}
@media only screen and (min-width:768px) {
  .categoryItemDetail {
    letter-spacing: 0.05em;
    line-height: 1.5625;
    font-size: 1em;
  }
}

.recipeBelow {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5.3333333333vw;
}
@media only screen and (min-width:768px) {
  .recipeBelow {
    gap: 3.125em;
  }
}

.recipeBelowHead {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 2.6666666667vw;
}
@media only screen and (min-width:768px) {
  .recipeBelowHead {
    gap: 1.25em;
  }
}

.recipeBelowHeadSub {
  letter-spacing: 0.075em;
  position: relative;
  width: fit-content;
  margin-block: calc((1em - 1lh) / 2);
  line-height: 1.5625;
  font-size: 3.4666666667vw;
}
@media only screen and (min-width:768px) {
  .recipeBelowHeadSub {
    font-size: 1.125em;
  }
}
.recipeBelowHeadSub:before, .recipeBelowHeadSub:after {
  content: "";
  position: absolute;
  background-color: currentColor;
  width: 2px;
  height: 1.25em;
  transform-origin: bottom center;
}
.recipeBelowHeadSub:before {
  left: -0.75em;
  transform: rotate(-30deg);
}
.recipeBelowHeadSub:after {
  right: -0.75em;
  transform: rotate(30deg);
}

.recipeBelowHeadMain {
  letter-spacing: 0.075em;
  margin-block: calc((1em - 1lh) / 2);
  line-height: 1.4444444444;
  font-size: 6vw;
}
@media only screen and (min-width:768px) {
  .recipeBelowHeadMain {
    line-height: 1.5625;
    font-size: 2.1875em;
  }
}

.recipeBelowContents {
  display: grid;
  justify-content: center;
  gap: 8vw;
}
@media only screen and (min-width:768px) {
  .recipeBelowContents {
    gap: 4.5em;
    justify-items: center;
  }
}

.columnList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4vw;
}
@media only screen and (min-width:768px) {
  .columnList {
    gap: 3.75em;
    max-width: 39em;
  }
}

.columnItem {
  display: grid;
  gap: 2.1333333333vw;
  aspect-ratio: 320/331;
  position: relative;
  place-content: baseline;
}
@media only screen and (min-width:768px) {
  .columnItem {
    aspect-ratio: unset;
    gap: 0.625em;
  }
}
@media (hover: hover) and (pointer: fine) {
  .columnItem:hover .columnButtonIcon:before {
    transform: translateX(100%);
  }
  .columnItem:hover .columnButtonIcon:after {
    transform: translateX(0);
  }
}

.columnItemButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.columnButtonText {
  line-height: 1.3461538462;
}
@media only screen and (min-width:768px) {
  .columnButtonText {
    line-height: 1;
  }
}

.columnButtonIcon {
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  width: 5.8666666667vw;
  height: 5.8666666667vw;
  position: absolute;
  background-color: #fff;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
@media only screen and (min-width:768px) {
  .columnButtonIcon {
    position: relative;
    width: 2em;
    height: 2em;
  }
}
.columnButtonIcon:before, .columnButtonIcon:after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(/icebox/assets/renew/img/recipe/icon_arrow.svg) center center/contain no-repeat;
  position: absolute;
  transition: transform 0.3s ease;
}
.columnButtonIcon:after {
  transform: translateX(-100%);
}

.bannerList {
  display: grid;
  gap: 8vw;
  padding: 0 12vw;
}
@media only screen and (min-width:768px) {
  .bannerList {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.75em;
    max-width: 50em;
  }
}

.linkBanner {
  display: grid;
  gap: 2.6666666667vw;
}
@media only screen and (min-width:768px) {
  .linkBanner {
    gap: 1.25em;
  }
}

.linkBannerText {
  margin: auto;
  margin-block: calc((1em - 1lh) / 2);
  width: fit-content;
  word-break: keep-all;
}
@media only screen and (min-width:768px) {
  .linkBannerText {
    text-align: center;
  }
}

.recipeLinkText {
  letter-spacing: 0.075em;
  margin-block: calc((1em - 1lh) / 2);
  font-size: 3.4666666667vw;
}
@media only screen and (min-width:768px) {
  .recipeLinkText {
    font-size: 1.125em;
  }
}

.anim-jumpin {
  opacity: 0;
  transform: scale(0);
}
.anim-jumpin.is-active {
  animation: jumpin 0.3s ease both;
}

@keyframes jumpin {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  85% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.anim-fadein {
  opacity: 0;
  transform: translateY(2rem);
  transition: all 0.6s linear;
}
.anim-fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}

.recipeLinkFigure {
  overflow: hidden;
}
.recipeLinkFigure img {
  transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .hoverItem:hover .recipeLinkFigure img {
    transform: scale(1.05);
  }
}

/*# sourceMappingURL=style.css.map */