@charset "UTF-8";
/*----------------------------------------------------
	変数
----------------------------------------------------*/
:root {
  --color-main: #D60000;
  --color-kuro: #2F2F2F;
  --color-sauna: #00AC97;
}

/* メインビジュアル
----------------------------------------------------*/
.mainvisual {
  -webkit-padding-after: 5.8cqw;
          padding-block-end: 5.8cqw;
  background-color: #D3EDFB;
  /* タイル柄: 横 48.4px / 縦 90.96px 間隔の白線(デザイン幅660px基準) */
  background-image: repeating-linear-gradient(90deg, transparent 0 6.6cqw, #fff 6.6cqw 7.333cqw), repeating-linear-gradient(180deg, transparent 0 13.2cqw, #fff 13.2cqw 13.782cqw);
  background-position: -1.214cqw 0, 0 -7.236cqw;
}

.mainvisual__visual {
  position: relative;
  aspect-ratio: 660/558;
}

.mainvisual__title {
  position: absolute;
  top: 4.5cqw;
  left: 0;
  width: 99.1cqw;
}

.mainvisual__note {
  position: absolute;
  top: 22.8cqw;
  right: 3.9cqw;
  color: var(--color-main);
}

.mainvisual__product {
  position: absolute;
  top: 29.2cqw;
  left: 11.4cqw;
  width: 77.1cqw;
}

.mainvisual__limited {
  position: absolute;
  top: 23.5cqw;
  left: 2.9cqw;
  width: 23.2cqw;
}
@media (prefers-reduced-motion: no-preference) {
  .mainvisual__limited {
    -webkit-animation: limitedPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
            animation: limitedPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
  }
}

@-webkit-keyframes limitedPop {
  0% {
    opacity: 0;
    scale: 0;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes limitedPop {
  0% {
    opacity: 0;
    scale: 0;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.mainvisual__charm {
  position: absolute;
  top: 58.3cqw;
  left: 68.6cqw;
  width: 31cqw;
}
@media (prefers-reduced-motion: no-preference) {
  .mainvisual__charm {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-animation: charmSwing 2.4s ease-in-out infinite;
            animation: charmSwing 2.4s ease-in-out infinite;
  }
}

@-webkit-keyframes charmSwing {
  0%, 100% {
    rotate: -4deg;
  }
  50% {
    rotate: 4deg;
  }
}

@keyframes charmSwing {
  0%, 100% {
    rotate: -4deg;
  }
  50% {
    rotate: 4deg;
  }
}
.mainvisual__name {
  padding-inline: var(--gutter-inline);
  color: var(--color-main);
  font-weight: bold;
  text-align: center;
}

.mainvisual__price {
  padding-inline: var(--gutter-inline);
  color: var(--color-main);
  font-weight: bold;
  text-align: center;
}

/* ロフト・石澤研究所 限定発売
----------------------------------------------------*/
.limited {
  position: relative;
  -webkit-padding-before: 40px;
          padding-block-start: 40px;
  /* 下端の波線(幅660px:高さ44px)の分を確保 */
  -webkit-padding-after: calc(40px + 6.67cqw);
          padding-block-end: calc(40px + 6.67cqw);
  background-color: #F8F4D4;
}
.limited::after {
  content: "";
  width: 100%;
  height: auto;
  aspect-ratio: 660/44;
  background-image: url(/geruma/assets/images/common/bg-wave-red.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom 0 left 0;
  position: absolute;
  left: 0;
  bottom: -1px;
}

.limited__inner {
  display: -ms-grid;
  display: grid;
  margin-inline: var(--gutter-inline);
  border: 4px solid var(--color-main);
  border-radius: 20px;
  background-color: #fff;
}
@media screen and (width > 750px) {
  .limited__inner {
    row-gap: 20px;
    padding-block: 30px;
    padding-inline: 30px;
  }
}
@media screen and (width <= 750px) {
  .limited__inner {
    row-gap: 10px;
    padding-block: 40px;
    padding-inline: 20px;
  }
}

.limited__title {
  color: var(--color-main);
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

.limited__logos {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 256fr 24px 240fr;
  grid-template-columns: 256fr 240fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
  -webkit-padding-end: 20px;
          padding-inline-end: 20px;
}

.limited__logo--loft {
  max-width: 256px;
}

.limited__logo--ishizawa {
  max-width: 240px;
}

.limited__note {
  color: #333;
  line-height: 1.7;
}

/* 本文+カート
----------------------------------------------------*/
.intro {
  -webkit-padding-before: 30px;
          padding-block-start: 30px;
  -webkit-padding-after: 60px;
          padding-block-end: 60px;
}
@media screen and (width > 750px) {
  .intro {
    padding-inline: var(--gutter-inline);
  }
}
@media screen and (width <= 750px) {
  .intro {
    padding-inline: 3cqw;
  }
}

.intro__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 20px;
  padding-block: 60px;
  border-radius: 30px;
  background-color: #fff;
}
@media screen and (width > 750px) {
  .intro__inner {
    padding-inline: 20px;
  }
}
@media screen and (width <= 750px) {
  .intro__inner {
    padding-inline: 3cqw;
  }
}

.intro__head {
  display: -ms-grid;
  display: grid;
  justify-items: end;
  -webkit-padding-after: 20px;
          padding-block-end: 20px;
}

.intro__title {
  color: var(--color-main);
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}

.intro__phrase {
  display: inline-block;
}

.intro__lineup {
  max-width: 574px;
}

.intro__text {
  -ms-grid-column-align: stretch;
      justify-self: stretch;
  line-height: 1.7;
}

.intro__charm {
  max-width: 598px;
}

.intro .p-product {
  -ms-grid-column-align: stretch;
      justify-self: stretch;
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
}

.intro__caution {
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
  color: var(--color-main);
  line-height: 1.6;
}

/* 今日はどれにする?
----------------------------------------------------*/
.choice {
  padding-inline: var(--gutter-inline);
}
.choice::after {
  background-image: url(/geruma/assets/images/soukai-set/toCart-wave.svg);
}

.choice__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
}

.choice__title {
  -ms-grid-column-align: center;
      justify-self: center;
  max-width: 548px;
}

.choice__card {
  --card-color: var(--color-main);
  --card-text-color: #fff;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
  -webkit-padding-before: 70px;
          padding-block-start: 70px;
  -webkit-padding-after: 60px;
          padding-block-end: 60px;
  color: var(--card-text-color);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
}
.choice__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 30px;
  background-color: var(--card-color);
  -webkit-mask-image: radial-gradient(circle at center 37px, transparent 0, transparent 15px, black 16px);
          mask-image: radial-gradient(circle at center 37px, transparent 0, transparent 15px, black 16px);
}
.choice__card .p-cartTicket__button {
  --button-color: #fff;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.choice__card .p-cartTicket__button__arrow {
  background-image: url(/geruma/assets/images/common/arrow-white.svg);
}

.choice__card--sauna {
  --card-color: var(--color-sauna);
}

.choice__card--siro {
  --card-color: #fff;
  --card-text-color: #333;
}
.choice__card--siro .p-cartTicket__button {
  --button-color: var(--color-main);
}
.choice__card--siro .p-cartTicket__button__arrow {
  background-image: url(/geruma/assets/images/common/arrow-red.svg);
}
.choice__card--siro .choice__voice {
  border: 2px solid var(--color-main);
}

.choice__card--kuro {
  --card-color: #787372;
}

.choice__visual {
  position: relative;
  aspect-ratio: 620/374;
  container-type: inline-size;
}

/* 写真は切り抜き後の見えている範囲で書き出しているため、書き出し画像の実寸(1倍換算)をカード幅620px基準に換算 */
.choice__product {
  position: absolute;
  left: -1.1cqw;
}

.choice__card--bath .choice__product {
  /* 272×383px / top -9px */
  top: -1.5cqw;
  width: 43.9cqw;
}

.choice__card--sauna .choice__product {
  /* 277×399px / top -9px */
  top: -1.5cqw;
  width: 44.7cqw;
}

.choice__card--siro .choice__product {
  /* 295×410px / top -16px */
  top: -2.6cqw;
  width: 47.5cqw;
}

.choice__card--kuro .choice__product {
  /* 286×405px / top -11px */
  top: -1.7cqw;
  width: 46.1cqw;
}

.choice__catch {
  position: absolute;
}

.choice__catch--bathLead {
  top: -3.2cqw;
  left: 44.6cqw;
  width: 41.4cqw;
}

.choice__catch--bathMain {
  top: 18.9cqw;
  left: 45.8cqw;
  width: 38.7cqw;
}

.choice__catch--saunaRibbon {
  top: -15.1cqw;
  left: 42.7cqw;
  width: 60.5cqw;
}

.choice__catch--saunaScent {
  top: 4.1cqw;
  left: 42.3cqw;
  width: 50.3cqw;
}

.choice__catch--saunaLead {
  top: 14.2cqw;
  left: 52.6cqw;
  width: 25.8cqw;
}

.choice__catch--saunaMain {
  top: 23.6cqw;
  left: 38.7cqw;
  width: 53.6cqw;
}

.choice__catch--siro {
  top: 8.5cqw;
  left: 43.1cqw;
  width: 51.1cqw;
}

.choice__catch--kuro {
  top: 8.5cqw;
  left: 43.9cqw;
  width: 50.3cqw;
}

.choice__note {
  position: absolute;
  top: 42.6cqw;
  right: 5.9cqw;
}

.choice__button {
  position: absolute;
  left: 36.1%;
  z-index: 1;
  width: 58%;
}

.choice__card--bath .choice__button {
  /* 元の実寸 top 301.9px(カード上端から +70px)をカード幅620px基準の比率に換算 */
  top: calc(70px + 48.7cqw);
}

.choice__card--sauna .choice__button {
  top: calc(70px + 44.1cqw);
}

.choice__card--siro .choice__button,
.choice__card--kuro .choice__button {
  top: calc(70px + 40.2cqw);
}

.choice__voice {
  margin-inline: 20px;
  -webkit-margin-before: 29px;
          margin-block-start: 29px;
  -webkit-padding-after: 30px;
          padding-block-end: 30px;
  border-radius: 20px;
  background-color: #fff;
  color: #000;
}

.choice__voiceTitle {
  max-width: min(424px, 80%);
  -webkit-margin-before: -29px;
          margin-block-start: -29px;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
  margin-inline: auto;
}

.choice__remark {
  -webkit-margin-before: -20px;
          margin-block-start: -20px;
  padding-inline: 50px;
  line-height: 1.7;
}
@media screen and (width <= 750px) {
  .choice__remark {
    padding-inline: 20px;
  }
}

/* 購入する
----------------------------------------------------*/
.toCart {
  padding-block: 40px;
  padding-inline: var(--gutter-inline);
  background-color: #fff;
}

.toCart__inner {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: 20px;
  padding-inline: 20px;
  border: 4px solid #FD3931;
  border-radius: 20px;
}
@media screen and (width > 750px) {
  .toCart__inner {
    -ms-grid-columns: 287fr 10px 271fr;
    grid-template-columns: 287fr 271fr;
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
  }
}
@media screen and (width <= 750px) {
  .toCart__inner {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 10px;
  }
}

@media screen and (width <= 750px) {
  .toCart__image {
    max-width: 70%;
  }
}

.toCart__body {
  display: -ms-grid;
  display: grid;
  justify-items: center;
  row-gap: 20px;
}

.toCart__name {
  color: var(--color-main);
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

.toCart__button {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  --button-color: var(--color-main);
}

.toCart__button__arrow {
  background-image: url(/geruma/assets/images/common/arrow-red.svg);
  rotate: -90deg;
}
/*# sourceMappingURL=soukai-set.css.map */