@charset "UTF-8";
:root {
  --color-yuzu: #FFB600;
  --color-yomogi: #33AB20;
  --color-ringo: #FF5A75;
  --color-bg: #F8C6B5;
  --color-navy: #1D2087;
  --font-maru-go: "Zen Maru Gothic", sans-serif;
  --font-han-serif: "source-han-serif-japanese", sans-serif;
}

body[data-viewport="660"][data-device=pc] :where(#productCnt) .contents {
  --font-size-xl: calc(30 * var(--to-rem));
  --font-size-l: calc(24 * var(--to-rem));
  --font-size-m: calc(20 * var(--to-rem));
  --font-size-s: calc(18 * var(--to-rem));
  --font-size-xs: calc(16 * var(--to-rem));
  --font-size-min: calc(13 * var(--to-rem));
}

.contents.soda-yuzu {
  --color-main: var(--color-yuzu);
}
.contents.soda-yomogi {
  --color-main: var(--color-yomogi);
}
.contents.soda-ringo {
  --color-main: var(--color-ringo);
}
.contents img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.contents sub {
  font-size: var(--font-size-min);
}

.c-midashi {
  position: relative;
  margin-bottom: 110px;
  padding: 24px 0;
  border: 3px solid #000000;
  border-radius: 20px;
  background-color: #ffffff;
}
.c-midashi::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 64%;
  border-style: solid;
  border-width: 14px 0 0 26px;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
  transform: skew(24deg);
  transform-origin: top;
}
.c-midashi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 64%;
  border-style: solid;
  border-width: 9px 0 0 16.7px;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% + 1.7px) 100%;
  transform: skew(24deg);
  transform-origin: top;
}
.c-midashi__text {
  font-family: var(--font-han-serif);
  font-size: var(--font-size-l);
  font-weight: 700;
  color: var(--color-main);
  text-align: center;
}
.c-midashi__text .small {
  font-size: var(--font-size-m);
}
.c-midashi .black_color {
  color: #333;
}
.c-midashi__nadeshiko {
  position: absolute;
  bottom: -110px;
  right: 0;
  width: 156px;
}

.c-sectionSeason__visual {
  padding-block-start: 160px;
  padding-block-end: 48px;
  padding-inline: 40px;
  background-color: var(--color-bg);
  position: relative;
  background-color: #FFFDE5;
  /* 疑似要素の上にコンテンツを表示する */
}
.c-sectionSeason__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
  background-image: url("/onsen_nadeshiko/images/common/bg-soda.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  /* 上端を SVG の波形で「くり抜く」(反転マスク) */
  -webkit-mask-image: linear-gradient(#fff, #fff), url("/onsen_nadeshiko/images/common/section-wave.svg");
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, center -2px;
  -webkit-mask-size: 100% 100%, 102% auto;
  mask-image: linear-gradient(#fff, #fff), url("/onsen_nadeshiko/images/common/section-wave.svg");
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0 0, center -2px;
  mask-size: 100% 100%, 102% auto;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mask-mode: alpha;
  pointer-events: none;
  z-index: 0;
}
.c-sectionSeason__visual > * {
  position: relative;
  z-index: 1;
}
.c-sectionSeason__visual__heading {
  position: absolute;
  top: 78px;
  left: 59px;
}
.c-sectionSeason__visual__deco {
  position: absolute;
}
.c-sectionSeason__visual__deco.-upper {
  top: 44px;
  right: 7px;
}
.c-sectionSeason__visual__deco.-bottom {
  bottom: -35px;
  right: 30px;
}
.c-sectionSeason__list {
  padding-block-start: 24px;
  padding-inline: 40px;
  background-color: #FFFDE5;
  text-align: left;
}
.c-sectionSeason__product {
  padding-block: 35px;
  display: grid;
  grid-template-columns: 253px 1fr;
  -moz-column-gap: 16px;
       column-gap: 16px;
  place-items: center;
  position: relative;
}
.c-sectionSeason__product.-yuzu {
  --color-product: var(--color-yuzu);
}
.c-sectionSeason__product.-yomogi {
  --color-product: var(--color-yomogi);
}
.c-sectionSeason__product.-ringo {
  --color-product: var(--color-ringo);
}
.c-sectionSeason__product:not(:last-child)::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-navy);
  border-radius: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.c-sectionSeason__content {
  display: grid;
  row-gap: 20px;
  width: 100%;
}
.c-sectionSeason__head {
  text-decoration: none;
}
.c-sectionSeason__title {
  font-size: var(--font-size-m);
  font-weight: 700;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.c-sectionSeason__detail {
  font-size: var(--font-size-xs);
  color: var(--color-navy);
}
.c-sectionSeason__features {
  display: grid;
  row-gap: 10px;
  list-style-type: disc;
  list-style-position: outside;
}
.c-sectionSeason__feature {
  font-size: var(--font-size-m);
  color: var(--color-product);
  margin-inline-start: 1em;
}
.c-sectionSeason__feature::marker {
  color: var(--color-product);
}
.c-sectionSeason__button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 8px;
  padding-inline: 16px;
  border-radius: 8px;
  background-color: var(--color-product);
  background-image: url("/onsen_nadeshiko/images/common/button-bg.png");
  background-size: contain;
  background-repeat: repeat;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  position: relative;
}
.c-sectionSeason__button::after {
  content: "";
  width: 12px;
  height: 16px;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  right: 16px;
}
.c-sectionSeason__button__label {
  font-family: var(--font-maru-go);
  font-size: var(--font-size-s);
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
}
.c-sectionSeason__note {
  padding-inline: 40px;
  padding-block-end: 24px;
  background-color: #FFFDE5;
  font-size: var(--font-size-min);
  color: var(--color-navy);
  text-align: left;
}

.mv {
  background-color: var(--color-bg);
  background-image: url("/onsen_nadeshiko/images/common/mv-bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  padding-block-start: 10px;
}
.mv__head {
  padding-inline: 46px;
  display: grid;
  row-gap: 32px;
}
.mv__noren {
  position: relative;
}
.mv__noren__text {
  width: 94%;
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  margin-inline: auto;
}
.mv__nadeshiko {
  position: relative;
  z-index: 2;
}
.mv__nadeshiko__pukupuku {
  width: 215px;
  position: absolute;
  top: 11px;
  right: 25px;
  pointer-events: none;
  z-index: 2;
  /* 擬似要素でSVGをマスクし、background-colorで色を指定できるようにする */
}
.mv__nadeshiko__pukupuku::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-main);
  pointer-events: none;
  z-index: 1;
  /* WebKit系対応 */
  -webkit-mask-image: url("/onsen_nadeshiko/images/common/pukupuku-text.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  /* 標準 */
  mask-image: url("/onsen_nadeshiko/images/common/pukupuku-text.svg");
  mask-repeat: no-repeat;
  -webkit-mask-position: 24px 22px;
          mask-position: 24px 22px;
  -webkit-mask-size: 184px;
          mask-size: 184px;
  mask-mode: alpha;
}
.mv__nadeshiko__yuge01 {
  width: 171px;
  position: absolute;
  top: 133px;
  right: 86px;
  pointer-events: none;
  z-index: -1;
}
.mv__nadeshiko__yuge01 img {
  transform: rotate(180deg);
}
.mv__nadeshiko__yuge02 {
  width: 112px;
  position: absolute;
  top: 204px;
  right: 53px;
  pointer-events: none;
}
.mv__note {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline-start: auto;
  padding-block: 18px;
  font-size: var(--font-size-min);
  color: var(--color-navy);
}

.titleLabel {
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  -moz-column-gap: 32px;
       column-gap: 32px;
  justify-content: center;
  align-items: center;
  background-color: #FFFDE5;
}
.titleLabel__illust img {
  width: 100%;
}

.soda-yuzu .titleLabel {
  grid-template-columns: 82px auto;
}

.soda-yomogi .titleLabel {
  grid-template-columns: 63px auto;
}

.soda-ringo .titleLabel {
  grid-template-columns: 63px auto;
}

.about {
  background-color: var(--color-bg);
  background-image: url("/onsen_nadeshiko/images/common/bg-about.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
.about__inner {
  padding-block: 40px;
  padding-inline: 30px;
}
.about__text {
  display: grid;
  row-gap: 32px;
  margin-block-end: 56px;
  position: relative;
}
.about__text__onsen {
  width: 78px;
  position: absolute;
  top: -34px;
  left: 0;
}
.about__text__nadeshiko {
  width: 78px;
  position: absolute;
  top: 217px;
  right: 0;
}
.about__paragraph {
  font-family: var(--font-maru-go);
  font-size: var(--font-size-l);
  font-weight: 700;
  text-align: center;
  line-height: 2;
  color: #333;
}
.about__title {
  margin-block-end: 40px;
  position: relative;
  z-index: 2;
}
.about__title__yuge01 {
  width: 134px;
  position: absolute;
  top: 30px;
  right: 20px;
  z-index: -1;
}
.about__title__yuge01 img {
  transform: rotate(180deg);
}
.about__title__yuge02 {
  width: 114px;
  position: absolute;
  top: 70px;
  right: 80px;
  z-index: -1;
}
.about .aboutMedia {
  display: grid;
  gap: 30px;
  justify-items: center;
}
.about .aboutMedia__visual {
  container-type: inline-size;
  width: 100%;
  max-width: 510px;
  position: relative;
  text-align: center;
  z-index: 2;
}
.about .aboutMedia__visual__pukupuku {
  width: 52cqw;
  position: absolute;
  top: 14.7cqw;
  left: 2.4cqw;
}
.about .aboutMedia__visual__shuwa {
  width: 54.5cqw;
  position: absolute;
  top: 68cqw;
  right: -7.5cqw;
}
.about .aboutMedia__visual__onsen {
  width: 15.3cqw;
  position: absolute;
  bottom: 2.9cqw;
  left: -10.3cqw;
  z-index: -1;
}
.about .aboutMedia__visual__nadeshiko {
  width: 15.3cqw;
  position: absolute;
  top: -6.3cqw;
  right: -6.9cqw;
  z-index: -1;
}
.about .aboutMedia__visual__note {
  font-size: var(--font-size-min);
  text-align: center;
}
.about .aboutMedia__content {
  padding-inline: 40px;
  display: grid;
  row-gap: 8px;
}
.about .aboutMedia__text {
  font-size: var(--font-size-m);
}
.about .aboutMedia__text .link_soda {
  text-decoration: none;
}
.about .aboutMedia__note {
  font-size: var(--font-size-min);
}

.for-PC .aboutMedia {
  grid-template-columns: 43% 1fr;
  place-items: center;
}
.for-PC .aboutMedia__content {
  padding-inline: unset;
}

.for-PC .c-midashi__text {
  font-size: 28px;
}

.product {
  background-color: #FFFDE5;
  background-image: url("/onsen_nadeshiko/images/common/section-wave.svg");
  background-size: 102% auto;
  background-repeat: no-repeat;
  background-position: center -2px;
}
.product__inner {
  padding-block-start: 127px;
  padding-block-end: 40px;
  padding-inline: 30px;
  display: grid;
  gap: 20px;
}

.for-PC .product__inner {
  grid-template-columns: 1fr auto;
}

.howto__inner {
  padding-block: 50px;
}
.howto__heading {
  background-color: var(--color-navy);
  border-inline: 16px solid #FA0000;
  font-size: 27px;
  font-weight: 400;
  color: #FFFFFF;
  padding-block: 20px;
  padding-inline-end: 20px;
  text-align: right;
  margin-block-end: 40px;
  position: relative;
  text-align: center;
  padding-inline-start: 99px;
}
.howto__heading::after {
  content: "";
  display: block;
  width: 124px;
  height: auto;
  aspect-ratio: 124/97;
  background-image: url("/onsen_nadeshiko/images/common/howto-nadeshiko.svg");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 8px;
  left: -14px;
}
.howto__content {
  padding-inline: 24px;
  display: grid;
  row-gap: 10px;
}
.howto__subheading {
  font-size: var(--font-size-m);
  color: var(--color-navy);
  padding-inline-start: 8px;
  border-inline-start: 8px solid var(--color-navy);
}
.howto__order {
  display: grid;
  row-gap: 8px;
  list-style-type: disc;
  list-style-position: outside;
}
.howto__item {
  font-size: var(--font-size-s);
  color: var(--color-navy);
  margin-inline-start: 1em;
}
.howto__item::marker {
  color: var(--color-navy);
}

.animation-yuge {
  animation: yugeMove 8s ease-in-out infinite;
}
.animation-yuge:nth-of-type(1), .animation-yuge:nth-of-type(3) {
  animation-delay: 1s;
}

@keyframes yugeMove {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) scaleY(1.3);
  }
  100% {
    transform: translateY(-20px) scaleY(1.6);
    opacity: 0;
  }
}
.animation-fuwafuwa {
  animation: fuwafuwaMove 3s ease-in-out infinite;
}
.animation-fuwafuwa:nth-of-type(2) {
  animation-delay: 1s;
}
.animation-fuwafuwa:nth-of-type(3) {
  animation-delay: 2s;
}

@keyframes fuwafuwaMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.animation-light {
  animation: lightMove 2s ease-in-out infinite;
}

@keyframes lightMove {
  0% {
    opacity: 0.7;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.5));
  }
  100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  }
}