@charset "UTF-8";
html {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0em;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-weight: 400;
}

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

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  clear: both;
  height: 0;
  overflow: visible;
  margin: 0;
  border-top-width: 1px;
  color: inherit;
  box-sizing: content-box;
}

address {
  font-style: inherit;
}

a {
  color: inherit;
  background: transparent;
  text-decoration: none;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 100%;
}

sub,
sup {
  position: relative;
  line-height: 0;
  vertical-align: baseline;
  font-size: 75%;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;
  -webkit-appearance: none;
  appearance: none;
}

[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  appearance: radio;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

button {
  border: 0;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  font-weight: bold;
  text-align: left;
}

:root {
  --noto: "Noto Serif JP", serif;
  --noto-sans: "Noto Sans JP", sans-serif;
  --yugo:
    "游ゴシック体", yugothic, "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック", "Yu Gothic", sans-serif;
}

:root {
  --color-ink: #231815;
  --color-black: #000;
  --color-white: #fff;
  --color-bg-beige: #f0ebe2;
  --color-bg-gray: #f9f9f9;
  --color-bg-cream: #f6f3ee;
  --color-bg-nav: #faf7f0;
  --color-section-title: #77625f;
  --color-gold: #d6ae3c;
  --color-gold-text: #c68535;
  --color-gold-em: #ae840c;
  --color-cta-green: #8d9d55;
  --color-cta-text: #4c4131;
  --color-basic: #792f3b;
  --color-basic-title: #744f4c;
  --color-basic-accent: #9b4452;
  --color-basic-tag: #824b54;
  --color-basic-soft: #aa6e6e;
  --color-basic-marker: #ead2d6;
  --color-basic-marker-light: #efe9da;
  --color-basic-bg: #f3eae7;
  --color-damage: #657442;
  --color-damage-accent: #627322;
  --color-damage-name: #75853c;
  --color-damage-button: #6e841b;
  --color-damage-border: #75853c;
  --color-damage-tri: #7d8366;
  --color-damage-marker: #e5e8ce;
  --color-damage-marker-light: #ede7b2;
  --color-damage-bg: #faf7f0;
  --color-damage-bg-light: #fbfdf6;
  --color-damage-dot: #9f7e50;
  --color-nav-brown: #3c2d18;
  --color-nav-basic: #501818;
  --color-nav-damage: #3e4a21;
  --color-panel-basic: #733c3c;
  --font-serif: "Zen Old Mincho", var(--noto), serif;
  --font-serif-noto: "Noto Serif JP", var(--noto), serif;
  --font-sans: "Zen Kaku Gothic New", var(--noto-sans), sans-serif;
  --font-sans-noto: "Noto Sans JP", var(--noto-sans), sans-serif;
  --font-en: "Marcellus", "Times New Roman", serif;
  --nav-width: min(230px, max(160px, 15.3333vw));
  --main-padding: min(20px, 3.8461538462vw);
  --header-height: min(80px, 15.3846153846vw);
}
@media screen and (min-width: 768px) {
  :root {
    --main-padding: min(40px, 7.6923076923vw);
  }
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}
@media screen and (min-width: 768px) {
  html {
    scroll-padding-top: 0;
  }
}

body {
  min-width: 320px;
  color: var(--color-black);
  background: var(--color-white);
  font-family: var(--font-serif);
  line-break: strict;
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.75;
  letter-spacing: 0em;
}
body.is-menu-open, body.is-dialog-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button {
  transition: opacity 180ms ease, color 180ms ease, background-color 180ms ease;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

sup {
  font-size: max(12px, 0.6em);
  line-height: 0;
  vertical-align: 0.155556em;
}

.c-note-ref {
  top: 0.3em;
  vertical-align: text-top;
  line-height: 1;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: min(12px, 2.3076923077vw);
  left: min(12px, 2.3076923077vw);
  padding: min(8px, 1.5384615385vw) min(14px, 2.6923076923vw);
  color: var(--color-white);
  background: var(--color-ink);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}

.opening {
  position: fixed;
  z-index: 110;
  inset: 0;
  background: var(--color-ink);
  transition: opacity 0.4s ease;
}
.opening__video {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: url("../img/bg-sp-poster.jpg") center/cover no-repeat;
  background-size: 720px 1080px;
}
@media screen and (min-width: 768px) {
  .opening__video {
    background-image: url("../img/bg-poster.jpg");
    background-size: cover;
  }
}
.opening__video > video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.opening__video.is-playing > video {
  opacity: 1;
}
.opening__controls {
  position: absolute;
  bottom: min(40px, 7.6923076923vw);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: min(16px, 3.0769230769vw);
}
.opening__controls[hidden] {
  display: none;
}
.opening__button {
  padding: min(12px, 2.3076923077vw) min(20px, 3.8461538462vw);
  border: 1px solid var(--color-white);
  border-radius: min(30px, 5.7692307692vw);
  color: var(--color-white);
  background: rgba(35, 24, 21, 0.65);
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1.5;
  letter-spacing: 0em;
}
.opening__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - min(48px, 9.2307692308vw));
  max-width: min(400px, 76.9230769231vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(24px, 4.6153846154vw);
  translate: -50% -50%;
  pointer-events: none;
}
.opening__brand::before {
  content: "";
  position: absolute;
  inset: calc(min(70px, 13.4615384615vw) * -1) calc(min(90px, 17.3076923077vw) * -1);
  background: radial-gradient(ellipse, rgba(33, 22, 14, 0.38) 0%, rgba(33, 22, 14, 0.18) 40%, rgba(33, 22, 14, 0) 72%);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.opening__logo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 280/44;
  background: var(--color-white);
  -webkit-mask: url("../img/logo_lead.svg") center/contain no-repeat;
  mask: url("../img/logo_lead.svg") center/contain no-repeat;
  filter: drop-shadow(0 min(2px, 0.3846153846vw) min(6px, 1.1538461538vw) rgba(0, 0, 0, 0.3));
  opacity: 0;
  transition: opacity 0.8s ease;
}
.opening__copy {
  position: relative;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 min(2px, 0.3846153846vw) min(8px, 1.5384615385vw) rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.8s ease;
  font-size: max(16px, min(24px, 4.6153846154vw));
  line-height: 1.5833333333;
  letter-spacing: 0.025em;
}
.opening.is-brand-visible .opening__brand::before,
.opening.is-brand-visible .opening__logo {
  opacity: 1;
}
.opening.is-brand-visible .opening__copy {
  opacity: 1;
  transition-delay: 0.6s;
}
.opening.is-ended {
  opacity: 0;
  pointer-events: none;
}

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  background: var(--color-bg-nav);
}
@media screen and (min-width: 768px) {
  .site-header {
    display: none;
  }
}
.site-header__inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: min(25px, 4.8076923077vw);
}
.site-header__logo {
  position: relative;
  z-index: 2;
  width: min(137px, 26.3461538462vw);
}
.site-header__toggle {
  position: relative;
  z-index: 2;
  width: min(32px, 6.1538461538vw);
  height: min(32px, 6.1538461538vw);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  cursor: pointer;
}
.site-header__toggle-icon {
  position: relative;
  width: min(24px, 4.6153846154vw);
  height: min(3px, 0.5769230769vw);
  border-radius: min(1.5px, 0.2884615385vw);
  background: #1e1e1e;
  transition: background-color 200ms ease;
}
.site-header__toggle-icon::before, .site-header__toggle-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(3px, 0.5769230769vw);
  border-radius: min(1.5px, 0.2884615385vw);
  background: #1e1e1e;
  transition: transform 200ms ease;
}
.site-header__toggle-icon::before {
  transform: translateY(calc(min(8px, 1.5384615385vw) * -1));
}
.site-header__toggle-icon::after {
  transform: translateY(min(8px, 1.5384615385vw));
}
.is-menu-open .site-header__toggle-icon {
  background: transparent;
}
.is-menu-open .site-header__toggle-icon::before {
  transform: rotate(45deg);
}
.is-menu-open .site-header__toggle-icon::after {
  transform: rotate(-45deg);
}

.global-nav {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  color: var(--color-black);
  background: var(--color-bg-nav);
  font-family: var(--font-en);
  visibility: hidden;
  opacity: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.is-menu-open .global-nav {
  visibility: visible;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .global-nav {
    top: var(--nav-offset, 0px);
    width: var(--nav-width);
    height: calc(100dvh - var(--nav-offset, 0px));
    min-height: 0;
    color: var(--color-white);
    background: var(--color-nav-brown);
    visibility: visible;
    opacity: 1;
    overflow-y: visible;
    overscroll-behavior: auto;
    transition: background-color 400ms ease;
  }
  .global-nav.is-theme-basic {
    background: var(--color-nav-basic);
  }
  .global-nav.is-theme-damage {
    background: var(--color-nav-damage);
  }
}
.global-nav__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: min(137px, 26.3461538462vw) min(25px, 4.8076923077vw) min(100px, 19.2307692308vw);
}
@media screen and (min-width: 768px) {
  .global-nav__inner {
    display: block;
    padding: min(80px, 15.3846153846vw) 0 min(80px, 15.3846153846vw) min(30px, 5.7692307692vw);
  }
}
@media screen and (min-width: 1280px) {
  .global-nav__inner {
    padding-left: min(52px, 10vw);
  }
}
.global-nav__list {
  width: min(190px, 36.5384615385vw);
  display: flex;
  flex-direction: column;
  gap: min(40px, 7.6923076923vw);
}
@media screen and (min-width: 768px) {
  .global-nav__list {
    width: auto;
    gap: min(20px, 3.8461538462vw);
  }
}
.global-nav__item {
  display: flex;
  flex-direction: column;
  gap: min(20px, 3.8461538462vw);
}
@media screen and (min-width: 768px) {
  .global-nav__item {
    gap: min(5px, 0.9615384615vw);
  }
}
.global-nav__link {
  display: inline-block;
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1.25;
  letter-spacing: 0em;
}
@media (hover) {
  .global-nav__link:hover {
    opacity: 0.6;
  }
}
@media screen and (min-width: 768px) {
  .global-nav__link {
    font-size: max(14px, min(20px, 3.8461538462vw));
    line-height: 1.5;
    letter-spacing: 0em;
  }
}
.global-nav__sublist {
  display: flex;
  flex-direction: column;
}
.global-nav__sublink {
  display: inline-flex;
  align-items: center;
  gap: min(5px, 0.9615384615vw);
  font-size: max(14px, min(20px, 3.8461538462vw));
  line-height: 2.2;
  letter-spacing: 0em;
}
.global-nav__sublink::before {
  content: "";
  width: min(7px, 1.3461538462vw);
  height: 1px;
  flex-shrink: 0;
  background: currentColor;
}
@media (hover) {
  .global-nav__sublink:hover {
    opacity: 0.6;
  }
}
@media screen and (min-width: 768px) {
  .global-nav__sublink {
    font-size: max(14px, min(16px, 3.0769230769vw));
    line-height: 1.875;
    letter-spacing: 0em;
  }
  .global-nav__sublink::before {
    width: min(6px, 1.1538461538vw);
  }
}
.global-nav__contact {
  width: min(238px, 45.7692307692vw);
  height: min(50px, 9.6153846154vw);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: min(40px, 7.6923076923vw);
  border: 1px solid var(--color-black);
  border-radius: min(25px, 4.8076923077vw);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .global-nav__contact {
    display: none;
  }
}

.c-pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: min(240px, 46.1538461538vw);
  height: min(60px, 11.5384615385vw);
  padding-inline: min(20px, 3.8461538462vw);
  white-space: nowrap;
  border: 1px solid var(--color-gold-text);
  border-radius: min(30px, 5.7692307692vw);
  color: var(--color-gold-text);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .c-pill-link {
    width: min(200px, 38.4615384615vw);
    min-width: 0;
    height: min(50px, 9.6153846154vw);
    padding-inline: 0;
    border-radius: min(25px, 4.8076923077vw);
  }
}
@media (hover) {
  .c-pill-link:hover {
    color: var(--color-white);
    background: var(--color-gold-text);
  }
}

.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(380px, 73.0769230769vw);
  height: min(80px, 15.3846153846vw);
  padding: min(3px, 0.5769230769vw);
  border: 1px solid var(--color-gold);
  color: var(--color-white);
  font-weight: 700;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1.1818181818;
  letter-spacing: 0em;
}
@media (hover) {
  .c-button:hover {
    opacity: 0.8;
  }
}
.c-button--gold {
  background: linear-gradient(var(--color-gold), var(--color-gold)) content-box, linear-gradient(var(--color-white), var(--color-white)) padding-box;
}
.c-button--green {
  border-color: var(--color-cta-green);
  background: linear-gradient(var(--color-cta-green), var(--color-cta-green)) content-box, linear-gradient(var(--color-white), var(--color-white)) padding-box;
}

.c-panel-button {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: min(10px, 1.9230769231vw);
  width: 100%;
  height: min(112px, 21.5384615385vw);
  padding: min(4px, 0.7692307692vw);
  border: 1px solid var(--color-basic);
  color: var(--color-white);
  background: linear-gradient(var(--color-basic), var(--color-basic)) content-box, linear-gradient(var(--color-white), var(--color-white)) padding-box;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1.2272727273;
  letter-spacing: 0em;
}
@media (hover) {
  .c-panel-button:hover {
    opacity: 0.8;
  }
}
.c-panel-button__icon {
  width: min(40px, 7.6923076923vw);
  flex-shrink: 0;
}

.c-section-title {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  color: var(--color-black);
  font-family: var(--font-en);
  text-transform: uppercase;
  font-size: max(14px, min(68px, 13.0769230769vw));
  line-height: 1;
  letter-spacing: 0.03em;
}
.c-section-title::after {
  content: "";
  width: min(80px, 15.3846153846vw);
  height: 2px;
  background: var(--color-black);
}
.c-section-title--brown {
  color: var(--color-section-title);
}
.c-section-title--basic {
  color: var(--color-basic);
}
.c-section-title--damage {
  color: var(--color-damage);
}

.c-note {
  --note-indent: 1.4em;
  display: block;
  padding-left: var(--note-indent);
  text-indent: calc(var(--note-indent) * -1);
}
.c-note--num {
  --note-indent: 2em;
}
.c-note--inline {
  display: inline-block;
  vertical-align: top;
}
.c-note__mark {
  display: inline-block;
  width: var(--note-indent);
  text-indent: 0;
}

.c-hyphen {
  display: inline-block;
  width: 0.5em;
  height: 1px;
  margin-inline: 0.08em;
  vertical-align: 0.32em;
  background: currentColor;
}

.c-marker {
  --marker: var(--color-basic-marker);
  font-style: normal;
  background-image: linear-gradient(transparent 55%, var(--marker) 55%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
}
.c-marker.is-marker-ready {
  background-size: 0% 100%;
}
.c-marker.is-marker-visible {
  animation: marker-reveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}
.c-marker--basic {
  color: var(--color-basic-accent);
}
.c-marker--beiji {
  color: #9b4452;
  background-image: linear-gradient(transparent 70%, #f0ebe2 70%);
}
.c-marker--damage {
  --marker: var(--color-damage-marker);
  color: var(--color-damage);
  background-image: linear-gradient(transparent 70%, #e5e8ce 70%);
}
.c-marker--damage-band {
  --marker: var(--color-damage-marker);
  background-image: linear-gradient(transparent 70%, #ede7b2 70%);
}

.c-dot {
  width: min(7px, 1.3461538462vw);
  height: min(7px, 1.3461538462vw);
  padding: 0;
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
}
.c-dot.is-active {
  background: var(--color-basic-soft);
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(30px, 5.7692307692vw);
  padding: min(40px, 7.6923076923vw) var(--main-padding) min(25px, 4.8076923077vw);
  background: var(--color-bg-beige);
}
@media screen and (min-width: 768px) {
  .site-footer {
    padding-inline: min(37px, 7.1153846154vw);
  }
}
.site-footer__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
}
.site-footer__logo {
  width: min(200px, 38.4615384615vw);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 500;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 2;
  letter-spacing: -0.07em;
}
.site-footer__links li:not(:first-child,
.site-footer__links-break,
.site-footer__links-break + li)::before {
  content: "｜";
}
.site-footer__links-break {
  width: 100%;
  height: 0;
}
@media (hover) {
  .site-footer__link:hover {
    opacity: 0.6;
  }
}
.site-footer__sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(17px, 3.2692307692vw);
}
.site-footer__sns-title {
  width: min(140px, 26.9230769231vw);
  height: min(28px, 5.3846153846vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--font-en);
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1.7857142857;
  letter-spacing: 0em;
}
.site-footer__sns-list {
  display: flex;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
}
@media screen and (min-width: 768px) {
  .site-footer__sns-list {
    gap: min(25px, 4.8076923077vw);
  }
}
.site-footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: min(56px, 10.7692307692vw);
  height: min(64px, 12.3076923077vw);
}
@media screen and (min-width: 768px) {
  .site-footer__sns-link {
    min-width: 0;
    height: min(20px, 3.8461538462vw);
  }
}
.site-footer__sns-link img {
  width: auto;
  height: min(30px, 5.7692307692vw);
}
@media screen and (min-width: 768px) {
  .site-footer__sns-link img {
    height: 100%;
  }
}
@media (hover) {
  .site-footer__sns-link:hover {
    opacity: 0.6;
  }
}
.site-footer__company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
}
.site-footer__company img {
  width: min(119px, 22.8846153846vw);
}
.site-footer__copyright {
  text-align: center;
  font-family: var(--font-en);
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1.7857142857;
  letter-spacing: 0em;
}

.dialog {
  --dialog-duration: 320ms;
  --dialog-ease: cubic-bezier(0.22, 1, 0.36, 1);
  width: min(700px, 100% - min(40px, 7.6923076923vw));
  max-height: calc(100dvh - min(40px, 7.6923076923vw));
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  opacity: 0;
  translate: 0 min(20px, 3.8461538462vw);
  transition: opacity var(--dialog-duration) ease, translate var(--dialog-duration) var(--dialog-ease), overlay var(--dialog-duration) allow-discrete, display var(--dialog-duration) allow-discrete;
}
.dialog[open] {
  opacity: 1;
  translate: 0 0;
}
@starting-style {
  .dialog[open] {
    opacity: 0;
    translate: 0 min(20px, 3.8461538462vw);
  }
}
.dialog::backdrop {
  background: rgba(216, 203, 199, 0.5);
  opacity: 0;
  transition: opacity var(--dialog-duration) ease, overlay var(--dialog-duration) allow-discrete, display var(--dialog-duration) allow-discrete;
}
.dialog[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .dialog[open]::backdrop {
    opacity: 0;
  }
}
@media screen and (min-width: 768px) {
  .dialog--volume {
    width: min(800px, 100% - min(40px, 7.6923076923vw));
  }
}
.dialog--volume::backdrop {
  background: rgba(130, 75, 84, 0.8);
}
.dialog--basic::backdrop {
  background: rgba(130, 75, 84, 0.8);
}
.dialog--damage::backdrop {
  background: rgba(101, 116, 66, 0.8);
}
.dialog__frame {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: min(8px, 1.5384615385vw);
  max-height: calc(100dvh - min(40px, 7.6923076923vw));
}
.dialog__close {
  position: relative;
  width: min(30px, 5.7692307692vw);
  height: min(30px, 5.7692307692vw);
  flex-shrink: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.is-pointer-input .dialog__close:focus-visible {
  outline: none;
}
.dialog__close::before, .dialog__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(42px, 8.0769230769vw);
  height: 2px;
  background: var(--color-white);
  transform: translate(-50%, -50%) rotate(45deg);
}
.dialog__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.dialog__panel {
  width: 100%;
  overflow-y: auto;
  background: var(--color-white);
}

[data-scroll=fade-up].is-scroll-ready {
  transition: opacity 1.2s ease, translate 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-scroll=fade-up].is-scroll-ready:not(.fade-up):not(:focus-within) {
  opacity: 0;
  translate: 0 min(30px, 5.7692307692vw);
}
[data-scroll=fade-up].is-scroll-ready:focus-within {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll=fade-up].is-scroll-ready:not(.fade-up):not(:focus-within) {
    opacity: 1;
    translate: none;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.lp {
  position: relative;
  width: 100%;
  padding-top: var(--header-height);
}
@media screen and (min-width: 768px) {
  .lp {
    padding-top: 0;
  }
}
.lp__visual {
  --side-brand-size: min(274px, 52.6923076923vw) auto;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: max(0px, 100% - min(540px, 103.8461538462vw) - var(--nav-width));
  height: 100vh;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .lp__visual {
    display: block;
  }
}
.lp__visual::before, .lp__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.lp__visual::before {
  background-image: var(--side-current-image, url("../img/side_top.jpg"));
  background-color: var(--side-current-color, transparent);
  background-size: var(--side-current-size, cover);
  background-position: var(--side-current-position, center);
}
.lp__visual::after {
  opacity: 0;
  background-image: var(--side-next-image, none);
  background-color: var(--side-next-color, transparent);
  background-size: var(--side-next-size, cover);
  background-position: var(--side-next-position, center);
}
.lp__visual.is-switching::after {
  opacity: 1;
  transition: opacity var(--side-duration, 400ms) ease-in-out;
}
@media screen and (min-width: 768px) {
  .lp__content {
    width: min(540px, 103.8461538462vw);
    margin-right: var(--nav-width);
    margin-left: auto;
  }
}

.lp-row__main {
  min-width: 0;
}
.lp-row--basic {
  background: var(--color-panel-basic);
}
.lp-row--damage {
  background: var(--color-damage);
}

.lead {
  display: flex;
  flex-direction: column;
  gap: min(60px, 11.5384615385vw);
  padding: min(145px, 27.8846153846vw) 0 min(100px, 19.2307692308vw);
  background: var(--color-bg-beige);
}
.lead__contact {
  position: fixed;
  z-index: 19;
  right: min(20px, 3.8461538462vw);
  bottom: min(20px, 3.8461538462vw);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(min(10px, 1.9230769231vw) * -1));
  transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms;
}
.lead__contact.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.lead__contact.is-footer-stopped {
  position: absolute;
  bottom: calc(var(--contact-footer-height, 0px) + min(20px, 3.8461538462vw));
}
@media screen and (min-width: 768px) {
  .lead__contact {
    right: calc(var(--nav-width) + min(20px, 3.8461538462vw));
    bottom: calc(min(20px, 3.8461538462vw) + var(--contact-footer-offset, 0px));
  }
  .lead__contact.is-footer-stopped {
    position: fixed;
    bottom: calc(min(20px, 3.8461538462vw) + var(--contact-footer-offset, 0px));
  }
}
.lead__contents {
  display: flex;
  flex-direction: column;
  gap: min(100px, 19.2307692308vw);
}
.lead__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(50px, 9.6153846154vw);
  padding-inline: var(--main-padding);
}
@media screen and (min-width: 768px) {
  .lead__head {
    padding-inline: min(63px, 12.1153846154vw);
  }
}
.lead__title {
  width: min(280px, 53.8461538462vw);
}
.lead__copy {
  font-weight: 500;
  text-align: center;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 2.2727272727;
  letter-spacing: 0em;
}
.lead__copy::before, .lead__copy::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.lead__copy::before {
  margin-block-end: calc((1 - 2.2727272727) * 0.5em);
}
.lead__copy::after {
  margin-block-start: calc((1 - 2.2727272727) * 0.5em);
}
.lead__visual {
  position: relative;
  aspect-ratio: 540/547;
}
.lead__photo {
  position: absolute;
  object-fit: cover;
}
.lead__photo--1 {
  top: 0;
  left: 0;
  width: 74.07%;
  height: 43.87%;
}
.lead__photo--2 {
  top: 21.94%;
  left: 26.3%;
  width: 73.7%;
  height: 48.45%;
}
.lead__leaf {
  position: absolute;
}
.lead__leaf--large {
  top: 61.79%;
  left: 59.07%;
  width: 37.96%;
}
.lead__leaf--small {
  top: 90.86%;
  left: 45%;
  width: 9.81%;
}
.lead__features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(50px, 9.6153846154vw);
  padding-inline: var(--main-padding);
}
@media screen and (min-width: 768px) {
  .lead__features {
    padding-inline: min(60px, 11.5384615385vw);
  }
}
.lead__text {
  font-size: max(16px, min(18px, 3.4615384615vw));
  line-height: 2.1666666667;
  letter-spacing: 0em;
}
.lead__text::before, .lead__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.lead__text::before {
  margin-block-end: calc((1 - 2.1666666667) * 0.5em);
}
.lead__text::after {
  margin-block-start: calc((1 - 2.1666666667) * 0.5em);
}
.lead__em {
  color: var(--color-gold-em);
  font-style: normal;
  font-weight: 700;
}
.lead__strong {
  font-weight: 500;
}
.lead__cycle {
  width: min(425px, 81.7307692308vw);
  max-width: 100%;
}

.series {
  background: var(--color-bg-beige);
}
.series__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(30px, 5.7692307692vw);
  padding: min(70px, 13.4615384615vw) var(--main-padding) min(50px, 9.6153846154vw);
  border-radius: min(50px, 9.6153846154vw) min(50px, 9.6153846154vw) 0 0;
  background: var(--color-white);
}
@media screen and (min-width: 768px) {
  .series__inner {
    padding-inline: min(25px, 4.8076923077vw);
  }
}
.series__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
  text-align: center;
}
.series__title-en {
  color: var(--color-section-title);
  font-family: var(--font-en);
  font-size: max(14px, min(39px, 7.5vw));
  line-height: 0.9230769231;
  letter-spacing: 0.03em;
}
.series__title-ja {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1;
  letter-spacing: 0em;
}
.series__list {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: min(20px, 3.8461538462vw);
}
.series__item {
  width: min(235px, 45.1923076923vw);
  max-width: calc(50% - min(10px, 1.9230769231vw));
}
.series__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(15px, 2.8846153846vw);
}
@media (hover) {
  .series__link:hover {
    opacity: 0.8;
  }
}
.series__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 235/200;
  border-radius: min(10px, 1.9230769231vw);
  overflow: hidden;
  box-shadow: 0 min(4px, 0.7692307692vw) 0 rgba(0, 0, 0, 0.2);
}
.series__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(39, 23, 23, 0.32);
}
.series__item--damage .series__thumb::after {
  background: rgba(13, 43, 25, 0.32);
}
.series__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.series__label {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1;
  letter-spacing: 0em;
}
.series__arrow {
  width: min(69px, 13.2692307692vw);
  height: min(20px, 3.8461538462vw);
  background: var(--color-basic-soft);
  -webkit-mask: url("../img/icon_triangle.svg") no-repeat center/contain;
  mask: url("../img/icon_triangle.svg") no-repeat center/contain;
}
.series__item--damage .series__arrow {
  background: var(--color-damage-tri);
}

.care-kv {
  position: relative;
  aspect-ratio: 540/882;
  overflow: hidden;
}
.care-kv__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.care-kv--damage .c-note-ref {
  top: 0.45em;
}
.care-kv--damage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.47), rgba(255, 255, 255, 0) 45%);
}
.care-kv__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: min(30px, 5.7692307692vw);
  padding: min(70px, 13.4615384615vw) var(--main-padding) 0;
}
.care-kv--damage .care-kv__body {
  filter: drop-shadow(0 0 min(16px, 3.0769230769vw) rgba(255, 255, 255, 0.74));
}
@media screen and (min-width: 768px) {
  .care-kv__body {
    padding-inline: min(35px, 6.7307692308vw);
  }
  .care-kv--damage .care-kv__body {
    padding-inline: min(31px, 5.9615384615vw);
  }
}
.care-kv__title {
  color: var(--color-basic-title);
  font-family: var(--font-en);
  font-size: max(14px, min(68px, 13.0769230769vw));
  line-height: 1.0441176471;
  letter-spacing: 0.03em;
}
.care-kv--damage .care-kv__title {
  color: var(--color-black);
  letter-spacing: 0;
}
.care-kv__text {
  display: flex;
  flex-direction: column;
  gap: min(16px, 3.0769230769vw);
}
.care-kv--damage .care-kv__text {
  gap: min(15px, 2.8846153846vw);
}
.care-kv__lead {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1;
  letter-spacing: 0em;
}
.care-kv--damage .care-kv__lead {
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1.2272727273;
  letter-spacing: 0em;
}
.care-kv__note {
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1.5714285714;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .care-kv__note {
    font-size: max(14px, min(12px, 2.3076923077vw));
    line-height: 1;
    letter-spacing: 0em;
  }
}

.problem {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  padding: min(100px, 19.2307692308vw) var(--main-padding);
  background: var(--color-bg-gray);
}
.problem--damage {
  padding-top: min(100px, 19.2307692308vw);
  background: var(--color-damage-bg);
}
.problem__intro {
  display: flex;
  flex-direction: column;
  gap: min(40px, 7.6923076923vw);
}
@media screen and (min-width: 768px) {
  .problem__intro {
    gap: min(30px, 5.7692307692vw);
  }
}
.problem__heading {
  display: flex;
  flex-direction: column;
  gap: min(20px, 3.8461538462vw);
}
.problem__kicker {
  font-weight: 700;
  font-size: max(14px, min(20px, 3.8461538462vw));
  line-height: 1;
  letter-spacing: 0em;
}
.problem__catch {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: max(14px, min(34px, 6.5384615385vw));
  line-height: 1;
  letter-spacing: 0em;
}
.problem__text {
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.75;
  letter-spacing: 0em;
}
.problem__text::before, .problem__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.problem__text::before {
  margin-block-end: calc((1 - 1.75) * 0.5em);
}
.problem__text::after {
  margin-block-start: calc((1 - 1.75) * 0.5em);
}
.problem__strong {
  color: var(--color-basic-accent);
  font-weight: 700;
}
.problem__graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(23px, 4.4230769231vw);
}
.problem__graph-title {
  color: var(--color-basic-title);
  font-weight: 600;
  text-align: center;
  font-size: max(14px, min(20px, 3.8461538462vw));
  line-height: 1;
  letter-spacing: 0em;
}
.problem--damage .problem__graph-title {
  color: #545e3b;
  font-weight: 400;
}
.problem__graph-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(11px, 2.1153846154vw);
}
.problem__graph-image {
  border-radius: min(10px, 1.9230769231vw);
  background: var(--color-white);
}
.problem__volume-chart {
  --volume-label-width: max(120px, min(124px, 23.8461538462vw));
  --volume-end-space: max(32px, min(40px, 7.6923076923vw));
  width: 100%;
  padding: min(18px, 3.4615384615vw) 0 min(12px, 2.3076923077vw) min(20px, 3.8461538462vw);
  border-radius: min(10px, 1.9230769231vw);
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 500;
}
.problem__volume-year, .problem__volume-age-number {
  font-weight: 600;
  font-size: max(14px, min(15px, 2.8846153846vw));
  line-height: 1.0666666667;
  letter-spacing: 0em;
}
.problem__volume-heading {
  display: flex;
  align-items: baseline;
  gap: min(4px, 0.7692307692vw);
  white-space: nowrap;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
.problem__volume-rows {
  display: flex;
  flex-direction: column;
  margin-top: min(8px, 1.5384615385vw);
}
.problem__volume-row {
  display: grid;
  grid-template-columns: var(--volume-label-width) minmax(0, 1fr);
  min-height: max(26px, min(27.5px, 5.2884615385vw));
}
.problem__volume-label {
  display: grid;
  grid-template-columns: max(50px, min(55px, 10.5769230769vw)) minmax(0, 1fr);
  align-items: center;
  gap: min(4px, 0.7692307692vw);
  padding: 0 min(10px, 1.9230769231vw) 0 min(6px, 1.1538461538vw);
  white-space: nowrap;
  font-size: max(14px, min(13px, 2.5vw));
  line-height: 1.2307692308;
  letter-spacing: 0em;
}
.problem__volume-age {
  justify-self: end;
}
.problem__volume-count {
  justify-self: end;
  white-space: nowrap;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
.problem__volume-plot {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - var(--volume-end-space));
  border-right: 1px solid #d3d3d4;
  background: repeating-linear-gradient(to right, #d3d3d4 0 1px, transparent 1px 14.2857%);
}
.problem__volume-bar {
  display: block;
  width: var(--bar-width);
  height: min(17px, 3.2692307692vw);
  transform-origin: left center;
  background: #ae9088;
}
.problem__volume-bar--last {
  background: #a86363;
}
.problem__volume-value {
  position: absolute;
  top: 50%;
  left: calc(var(--bar-width) + min(6px, 1.1538461538vw));
  transform: translateY(-50%);
  white-space: nowrap;
  font-weight: 600;
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1.2142857143;
  letter-spacing: 0em;
}
.problem__volume-value--accent {
  color: #c74646;
}
.problem__volume-axis {
  position: relative;
  margin-top: min(3px, 0.5769230769vw);
  padding-left: var(--volume-label-width);
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
.problem__volume-ticks {
  position: relative;
  display: block;
  width: calc(100% - var(--volume-end-space));
  height: max(16px, min(16px, 3.0769230769vw));
}
.problem__volume-tick {
  position: absolute;
  top: 0;
  left: var(--tick);
  transform: translateX(-50%);
}
.problem__volume-unit {
  position: absolute;
  top: 0;
  left: calc(100% - var(--volume-end-space) + min(16px, 3.0769230769vw));
}
.problem__source {
  padding-left: 3em;
  text-indent: -3em;
  font-family: var(--font-sans);
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.6666666667;
  letter-spacing: 0em;
}

.damage-box {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  padding: min(30px, 5.7692307692vw) min(20px, 3.8461538462vw) min(50px, 9.6153846154vw);
  border-radius: min(10px, 1.9230769231vw);
  background: var(--color-white);
}
@media screen and (min-width: 768px) {
  .damage-box {
    padding-inline: min(25px, 4.8076923077vw);
  }
}
.damage-box__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(30px, 5.7692307692vw);
}
.damage-box__text {
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.75;
  letter-spacing: 0em;
}
.damage-box__text::before, .damage-box__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.damage-box__text::before {
  margin-block-end: calc((1 - 1.75) * 0.5em);
}
.damage-box__text::after {
  margin-block-start: calc((1 - 1.75) * 0.5em);
}
.damage-box__em {
  color: var(--color-damage);
  background: linear-gradient(transparent 70%, rgba(101, 116, 66, 0.3) 30%);
  font-style: normal;
  font-weight: 700;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1.4545454545;
  letter-spacing: 0em;
}
.damage-box__figure {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
}
@media screen and (min-width: 768px) {
  .damage-box__figure {
    width: auto;
  }
}
.damage-box__figure-image {
  aspect-ratio: 495/410;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .damage-box__figure-image {
    aspect-ratio: auto;
  }
}
.damage-box__figure-caption {
  font-family: var(--font-serif-noto);
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1;
  letter-spacing: 0em;
}
.damage-box__worries {
  display: flex;
  flex-direction: column;
  gap: min(40px, 7.6923076923vw);
}
.damage-box__title {
  display: flex;
  align-items: center;
  gap: min(5px, 0.9615384615vw);
  color: var(--color-damage);
  font-weight: 700;
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1;
  letter-spacing: 0em;
}
.damage-box__title::before {
  content: "";
  width: min(10px, 1.9230769231vw);
  height: min(10px, 1.9230769231vw);
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.worries {
  position: relative;
  width: min(410px, 78.8461538462vw);
  max-width: 100%;
  margin-inline: auto;
}
@media screen and (max-width: 499px) {
  .worries {
    width: 100%;
  }
}
.worries__art {
  display: block;
}
.worries__label {
  position: absolute;
  width: 27.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  color: #343e1e;
  font-family: var(--font-sans);
  font-weight: 500;
  text-align: center;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1.3125;
  letter-spacing: 0em;
}
.worries__label--1 {
  top: 12.29%;
  left: 5.71%;
}
.worries__label--2 {
  top: 0;
  left: 36.14%;
}
.worries__label--3 {
  top: 12.63%;
  left: 67.93%;
}
.worries__label--4 {
  top: 51.19%;
  left: 0;
}
.worries__label--5 {
  top: 50.85%;
  left: 72.83%;
}

.solution {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  padding: min(100px, 19.2307692308vw) var(--main-padding) 0;
  background: var(--color-basic-bg);
}
.solution--damage {
  background: var(--color-damage-bg-light);
}
.solution__lead {
  font-family: var(--font-serif);
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1.75;
  letter-spacing: 0em;
}
.solution__lead::before, .solution__lead::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.solution__lead::before {
  margin-block-end: calc((1 - 1.75) * 0.5em);
}
.solution__lead::after {
  margin-block-start: calc((1 - 1.75) * 0.5em);
}
.solution__lead-em {
  color: var(--color-basic);
  font-size: max(14px, min(30px, 5.7692307692vw));
  line-height: 1.4;
  letter-spacing: 0em;
}
.solution__lead-area {
  display: flex;
  flex-direction: column;
  gap: min(15px, 2.8846153846vw);
}
.solution__note {
  font-family: var(--font-sans);
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.8333333333;
  letter-spacing: 0em;
}
.solution__notes {
  overflow-wrap: anywhere;
  font-family: var(--font-sans);
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.5833333333;
  letter-spacing: 0em;
}
.solution__notes .c-note {
  text-indent: 0;
  position: relative;
}
.solution__notes .c-note__mark {
  position: absolute;
  left: 0;
}
.solution__notes::before, .solution__notes::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.solution__notes::before {
  margin-block-end: calc((1 - 1.5833333333) * 0.5em);
}
.solution__notes::after {
  margin-block-start: calc((1 - 1.5833333333) * 0.5em);
}
.solution__approach {
  display: flex;
  flex-direction: column;
  gap: min(45px, 8.6538461538vw);
}
.solution__approach-image {
  width: 100%;
}
.solution__figure {
  display: flex;
  flex-direction: column;
  gap: min(15px, 2.8846153846vw);
}
.solution__figure img {
  border-radius: min(10px, 1.9230769231vw);
}

.bond-box {
  display: flex;
  flex-direction: column;
  gap: min(30px, 5.7692307692vw);
  padding: min(40px, 7.6923076923vw) min(20px, 3.8461538462vw) min(30px, 5.7692307692vw);
  border-radius: min(10px, 1.9230769231vw);
  background: rgba(255, 255, 255, 0.8);
}
@media screen and (min-width: 768px) {
  .bond-box {
    padding-inline: min(25px, 4.8076923077vw);
  }
}
.bond-box__intro {
  display: flex;
  flex-direction: column;
  gap: min(25px, 4.8076923077vw);
}
.bond-box__title {
  color: var(--color-ink);
  font-weight: 500;
  font-size: max(18px, min(18px, 3.4615384615vw));
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .bond-box__title {
    font-size: max(14px, min(24px, 4.6153846154vw));
    line-height: 1;
    letter-spacing: 0em;
  }
}
.bond-box__body {
  display: flex;
  flex-direction: column;
  gap: min(15px, 2.8846153846vw);
  padding-top: min(20px, 3.8461538462vw);
  border-top: 1.5px solid var(--color-basic-tag);
}
.bond-box__text {
  font-family: var(--font-serif);
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.75;
  letter-spacing: 0em;
}
.bond-box__text sup {
  font-size: max(10px, min(11px, 2.1153846154vw));
  line-height: 1;
  letter-spacing: 0em;
}
.bond-box__text::before, .bond-box__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.bond-box__text::before {
  margin-block-end: calc((1 - 1.75) * 0.5em);
}
.bond-box__text::after {
  margin-block-start: calc((1 - 1.75) * 0.5em);
}
.bond-box__note {
  font-family: var(--font-sans);
  text-align: right;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1;
  letter-spacing: 0em;
}
.bond-box__note--left {
  text-align: left;
}
.bond-box__steps {
  display: flex;
  flex-direction: column;
  gap: min(16px, 3.0769230769vw);
  background: #fcfcfc;
}
.bond-box__legend-area {
  display: flex;
  flex-direction: column;
  gap: min(20px, 3.8461538462vw);
}
.bond-box__legend {
  display: flex;
  justify-content: center;
  gap: min(20px, 3.8461538462vw);
  flex-wrap: wrap;
  font-family: var(--font-sans);
}
.bond-box__legend-item {
  display: flex;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1.625;
  letter-spacing: 0em;
}
.bond-box__legend-item img {
  width: min(60px, 11.5384615385vw);
}
.bond-box__caption {
  font-family: var(--font-sans);
  text-align: right;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1;
  letter-spacing: 0em;
}

.bond-steps {
  display: flex;
  flex-direction: column;
  gap: min(30px, 5.7692307692vw);
}
.bond-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: min(130px, 25vw) 1fr;
  align-items: center;
  font-family: var(--font-sans);
}
.bond-steps__item + .bond-steps__item::before {
  content: "";
  position: absolute;
  top: calc(min(25px, 4.8076923077vw) * -1);
  left: 50%;
  width: min(69px, 13.2692307692vw);
  height: min(20px, 3.8461538462vw);
  background: var(--color-basic-soft);
  -webkit-mask: url("../img/icon_triangle.svg") no-repeat center/contain;
  mask: url("../img/icon_triangle.svg") no-repeat center/contain;
  transform: translateX(-50%);
}
.bond-steps__text {
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.625;
  letter-spacing: 0em;
}
.bond-steps__text::before, .bond-steps__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.bond-steps__text::before {
  margin-block-end: calc((1 - 1.625) * 0.5em);
}
.bond-steps__text::after {
  margin-block-start: calc((1 - 1.625) * 0.5em);
}

.bleed-image {
  padding: min(60px, 11.5384615385vw) 0 min(150px, 28.8461538462vw) min(50px, 9.6153846154vw);
}
.bleed-image--basic {
  background: var(--color-basic-bg);
}
.bleed-image--damage {
  background: var(--color-damage-bg-light);
}

.section-visual {
  position: relative;
  aspect-ratio: 540/280;
  background: var(--color-bg-gray);
}
.section-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: min(50px, 9.6153846154vw) min(50px, 9.6153846154vw) 0 0;
  background: rgba(92, 67, 67, 0.2);
}
.section-visual--basic .section-visual__image {
  filter: brightness(1.05) contrast(1.03) saturate(0.77);
}
.section-visual--damage {
  background: var(--color-damage-bg);
}
.section-visual--damage::after {
  background: rgba(134, 179, 143, 0.1);
}
.section-visual--damage .section-visual__image {
  filter: contrast(0.76) saturate(0.87);
}
.section-visual__image {
  width: 100%;
  height: 100%;
  border-radius: min(50px, 9.6153846154vw) min(50px, 9.6153846154vw) 0 0;
  object-fit: cover;
}

.fragrance {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  padding: min(80px, 15.3846153846vw) var(--main-padding);
  background: var(--color-bg-cream);
}
.fragrance--damage {
  background: var(--color-bg-beige);
}
.fragrance::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: min(51px, 9.8076923077vw);
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  background: inherit;
}
.fragrance__slider {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: min(30px, 5.7692307692vw);
}
.fragrance--damage .fragrance__slider {
  gap: min(20px, 3.8461538462vw);
}
.fragrance__track {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: stretch;
}
.fragrance__slide {
  flex: 0 0 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.fragrance__photo {
  position: relative;
  padding-bottom: min(19px, 3.6538461538vw);
}
.fragrance__name {
  position: absolute;
  bottom: min(10px, 1.9230769231vw);
  left: 0;
  height: min(40px, 7.6923076923vw);
  display: flex;
  align-items: center;
  padding-right: min(10px, 1.9230769231vw);
  background: var(--color-bg-cream);
  font-family: var(--font-en);
  font-size: max(14px, min(33px, 6.3461538462vw));
  line-height: 0.9090909091;
  letter-spacing: 0em;
}
.fragrance--damage .fragrance__name {
  background: var(--color-bg-beige);
  font-size: max(14px, min(30px, 5.7692307692vw));
  line-height: 1;
  letter-spacing: 0em;
}
.fragrance__body {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(145px, 27.8846153846vw));
  align-items: start;
  align-content: start;
  gap: min(20px, 3.8461538462vw) min(12px, 2.3076923077vw);
  padding-top: min(20px, 3.8461538462vw);
}
@media screen and (min-width: 768px) {
  .fragrance__body {
    display: flex;
    justify-content: space-between;
    gap: 0;
    padding: 0 min(10px, 1.9230769231vw) 0 0;
  }
}
.fragrance__body--wide-bottles-sp {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(220px, 42.3076923077vw));
}
.fragrance__desc {
  align-self: flex-start;
  min-width: 0;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: min(10px, 1.9230769231vw);
}
@media screen and (min-width: 768px) {
  .fragrance__desc {
    gap: min(20px, 3.8461538462vw);
    padding-block: min(20px, 3.8461538462vw) 0;
  }
}
.fragrance__text {
  text-wrap: balance;
  font-size: max(16px, min(18px, 3.4615384615vw));
  line-height: 1.5555555556;
  letter-spacing: 0em;
}
.fragrance__text::before, .fragrance__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.fragrance__text::before {
  margin-block-end: calc((1 - 1.5555555556) * 0.5em);
}
.fragrance__text::after {
  margin-block-start: calc((1 - 1.5555555556) * 0.5em);
}
@media screen and (min-width: 768px) {
  .fragrance__text {
    text-wrap: wrap;
  }
}
.fragrance__text-break {
  display: none;
}
@media screen and (min-width: 768px) {
  .fragrance__text-break {
    display: revert;
  }
}
.fragrance__products {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1.3571428571;
  letter-spacing: 0em;
}
.fragrance__products::before, .fragrance__products::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.fragrance__products::before {
  margin-block-end: calc((1 - 1.3571428571) * 0.5em);
}
.fragrance__products::after {
  margin-block-start: calc((1 - 1.3571428571) * 0.5em);
}
.fragrance__bottles {
  grid-column: 2;
  grid-row: 1;
  max-width: min(145px, 27.8846153846vw);
  position: relative;
  top: calc(min(60px, 11.5384615385vw) * -1);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: min(5px, 0.9615384615vw);
  flex-shrink: 0;
  transform: translateX(calc(min(10px, 1.9230769231vw) * -1));
}
@media screen and (min-width: 768px) {
  .fragrance__bottles {
    max-width: none;
  }
}
@media screen and (min-width: 768px) {
  .fragrance__bottles {
    position: absolute;
    right: min(10px, 1.9230769231vw);
    top: calc(min(50px, 9.6153846154vw) * -1);
    height: min(158px, 30.3846153846vw);
    transform: none;
  }
}
.fragrance__bottles img {
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
  width: auto;
  filter: drop-shadow(0 calc(min(4px, 0.7692307692vw) * -1) min(12px, 2.3076923077vw) rgba(255, 255, 255, 0.5));
}
.fragrance__bottles--wide-sp {
  max-width: min(220px, 42.3076923077vw);
}
@media screen and (min-width: 768px) {
  .fragrance__bottles--wide-sp {
    max-width: none;
  }
}
.fragrance__variants {
  display: block;
}
@media screen and (min-width: 768px) {
  .fragrance__variants {
    display: inline;
  }
}
.fragrance__variant-break {
  display: none;
}
@media screen and (min-width: 768px) {
  .fragrance__variant-break {
    display: inline;
  }
}
.fragrance__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(24px, 4.6153846154vw);
}
.fragrance__arrow {
  position: relative;
  width: min(32px, 6.1538461538vw);
  height: min(32px, 6.1538461538vw);
  flex-shrink: 0;
}
.fragrance__arrow::before, .fragrance__arrow::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 0.75px);
  left: min(8px, 1.5384615385vw);
  width: min(12px, 2.3076923077vw);
  height: 1.5px;
  background: currentColor;
  transform-origin: right center;
}
.fragrance__arrow::before {
  transform: rotate(45deg);
}
.fragrance__arrow::after {
  transform: rotate(-45deg);
}
.fragrance__arrow--prev {
  transform: scaleX(-1);
}
.fragrance__dots {
  display: flex;
  justify-content: center;
  gap: min(13px, 2.5vw);
}
.fragrance--damage .fragrance__dots .c-dot.is-active {
  background: var(--color-damage-dot);
}

.lineup {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  padding: min(100px, 19.2307692308vw) var(--main-padding) 0;
  background: var(--color-bg-gray);
}
.lineup__head {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
}
.lineup__tag {
  position: relative;
  align-self: flex-start;
  width: min(200px, 38.4615384615vw);
  height: min(35px, 6.7307692308vw);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: min(12.5px, 2.4038461538vw);
  padding-bottom: min(2px, 0.3846153846vw);
  border-radius: min(2px, 0.3846153846vw);
  color: var(--color-white);
  background: var(--color-basic-tag);
  font-weight: 500;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1;
  letter-spacing: 0em;
}
.lineup__tag::before, .lineup__tag::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(25px, 4.8076923077vw);
  height: min(25px, 4.8076923077vw);
  background: inherit;
  border-radius: 50%;
  transform: translateY(-50%);
}
.lineup__tag::before {
  left: calc(min(12.5px, 2.4038461538vw) * -1);
}
.lineup__tag::after {
  right: calc(min(12.5px, 2.4038461538vw) * -1);
}
.lineup--damage .lineup__tag {
  background: var(--color-damage);
}
.lineup__groups {
  display: flex;
  flex-direction: column;
  gap: min(70px, 13.4615384615vw);
}
.lineup--damage .lineup__groups {
  gap: min(60px, 11.5384615385vw);
}
.lineup__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(30px, 5.7692307692vw);
}
@media screen and (min-width: 768px) {
  .lineup__group {
    margin-inline: calc(min(6px, 1.1538461538vw) * -1);
  }
}
.lineup__category {
  text-align: center;
  font-family: var(--font-en);
  font-size: max(14px, min(34px, 6.5384615385vw));
  line-height: 1;
  letter-spacing: 0em;
}
.lineup__products {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(16px, 3.0769230769vw);
}
@media screen and (min-width: 768px) {
  .lineup__products {
    gap: min(30px, 5.7692307692vw);
  }
}
.lineup__products--single {
  grid-template-columns: minmax(0, min(221px, 42.5vw));
  justify-content: center;
}
.lineup__notes {
  font-family: var(--font-sans);
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
.lineup__notes::before, .lineup__notes::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.lineup__notes::before {
  margin-block-end: calc((1 - 1.3333333333) * 0.5em);
}
.lineup__notes::after {
  margin-block-start: calc((1 - 1.3333333333) * 0.5em);
}

.product-card {
  --card-frame: var(--color-gold);
  --card-corner: min(10.6px, 2.0384615385vw);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
  padding: min(32px, 6.1538461538vw) min(12px, 2.3076923077vw) min(40px, 7.6923076923vw);
  outline: 1px solid var(--card-frame);
  outline-offset: calc(min(4px, 0.7692307692vw) * -1);
  background: linear-gradient(var(--card-frame), var(--card-frame)) no-repeat var(--card-corner) 0/calc(100% - var(--card-corner) * 2) 1px, linear-gradient(var(--card-frame), var(--card-frame)) no-repeat var(--card-corner) 100%/calc(100% - var(--card-corner) * 2) 1px, linear-gradient(var(--card-frame), var(--card-frame)) no-repeat 0 var(--card-corner)/1px calc(100% - var(--card-corner) * 2), linear-gradient(var(--card-frame), var(--card-frame)) no-repeat 100% var(--card-corner)/1px calc(100% - var(--card-corner) * 2), radial-gradient(circle at 0 0, transparent calc(var(--card-corner) - 0.5px), var(--card-frame) calc(var(--card-corner) - 0.5px) calc(var(--card-corner) + 0.5px), var(--color-white) calc(var(--card-corner) + 0.5px)) no-repeat 0 0/51% 51%, radial-gradient(circle at 100% 0, transparent calc(var(--card-corner) - 0.5px), var(--card-frame) calc(var(--card-corner) - 0.5px) calc(var(--card-corner) + 0.5px), var(--color-white) calc(var(--card-corner) + 0.5px)) no-repeat 100% 0/51% 51%, radial-gradient(circle at 0 100%, transparent calc(var(--card-corner) - 0.5px), var(--card-frame) calc(var(--card-corner) - 0.5px) calc(var(--card-corner) + 0.5px), var(--color-white) calc(var(--card-corner) + 0.5px)) no-repeat 0 100%/51% 51%, radial-gradient(circle at 100% 100%, transparent calc(var(--card-corner) - 0.5px), var(--card-frame) calc(var(--card-corner) - 0.5px) calc(var(--card-corner) + 0.5px), var(--color-white) calc(var(--card-corner) + 0.5px)) no-repeat 100% 100%/51% 51%;
}
.lineup--damage .product-card {
  --card-frame: var(--color-damage-border);
}
@media screen and (min-width: 768px) {
  .product-card {
    padding-inline: min(30px, 5.7692307692vw);
  }
}
.product-card--new {
  margin-top: min(36px, 6.9230769231vw);
}
.product-card--scalp .product-card__name,
.product-card--scalp .product-card__name-ja {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .product-card--scalp .product-card__name,
  .product-card--scalp .product-card__name-ja {
    max-width: none;
  }
}
.product-card--scalp .product-card__name-ja {
  white-space: normal;
}
@media screen and (min-width: 768px) {
  .product-card--scalp .product-card__name-ja {
    white-space: nowrap;
  }
}
.product-card__new {
  position: absolute;
  bottom: 100%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
  margin-bottom: min(8px, 1.5384615385vw);
  color: var(--color-gold);
  font-family: var(--font-en);
  white-space: nowrap;
  transform: translateX(-50%);
  font-size: max(14px, min(25px, 4.8076923077vw));
  line-height: 1.12;
  letter-spacing: 0em;
}
.product-card__new::before, .product-card__new::after {
  content: "";
  width: min(24px, 4.6153846154vw);
  height: 2px;
  background: currentColor;
  transform: rotate(58deg);
}
.product-card__new::after {
  transform: rotate(-58deg);
}
.product-card__name {
  min-height: min(60px, 11.5384615385vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(8px, 1.5384615385vw);
  color: var(--color-basic-tag);
  font-family: var(--font-en);
  text-align: center;
  overflow-wrap: normal;
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1;
  letter-spacing: 0em;
}
.lineup--damage .product-card__name {
  color: var(--color-damage-accent);
}
.product-card__name-ja {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 500;
  white-space: nowrap;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 0.9375;
  letter-spacing: 0em;
}
.product-card__name-ja small {
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.25;
  letter-spacing: 0em;
}
.product-card__figure {
  width: min(120px, 23.0769230769vw);
  max-width: 100%;
  height: min(134px, 25.7692307692vw);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: min(11px, 2.1153846154vw);
}
.product-card__figure img {
  --image-height: 120;
  width: auto;
  height: min(var(--image-height) * 1px, var(--image-height) / 520 * 100vw);
  filter: drop-shadow(min(2px, 0.3846153846vw) min(2px, 0.3846153846vw) min(4px, 0.7692307692vw) rgba(0, 0, 0, 0.25));
}
.product-card__figure--single {
  align-items: center;
}
.product-card__figure--salon-treatment img {
  transform: translateY(calc(min(10px, 1.9230769231vw) * -1));
}
.product-card__more {
  width: 100%;
  max-width: min(160px, 30.7692307692vw);
  height: min(40px, 7.6923076923vw);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: min(4px, 0.7692307692vw);
  padding-bottom: min(1px, 0.1923076923vw);
  border-radius: min(20px, 3.8461538462vw);
  color: var(--color-white);
  background: var(--color-basic-soft);
  font-family: var(--font-en);
  cursor: pointer;
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1;
  letter-spacing: 0em;
}
.lineup--damage .product-card__more {
  background: var(--color-damage-button);
}
@media (hover) {
  .product-card__more:hover {
    opacity: 0.8;
  }
}

.cta {
  padding: min(100px, 19.2307692308vw) var(--main-padding);
  background: var(--color-bg-gray);
}
.cta__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 min(12px, 2.3076923077vw) min(20px, 3.8461538462vw);
  border-radius: min(10px, 1.9230769231vw);
  color: var(--color-cta-text);
  background: var(--color-white);
  box-shadow: 0 0 min(15px, 2.8846153846vw) #ccc;
}
@media screen and (min-width: 768px) {
  .cta__box {
    padding-inline: min(20px, 3.8461538462vw);
  }
}
.cta__main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(25px, 4.8076923077vw);
  padding: min(40px, 7.6923076923vw) 0 min(20px, 3.8461538462vw);
}
@media screen and (min-width: 768px) {
  .cta__main {
    padding-inline: min(10px, 1.9230769231vw);
  }
}
.cta__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(16px, 3.0769230769vw);
  padding: 0 0 min(25px, 4.8076923077vw);
  border-bottom: 1px solid var(--color-gold);
}
@media screen and (min-width: 768px) {
  .cta__group {
    padding-inline: min(10px, 1.9230769231vw);
  }
}
.cta__group--customer {
  padding-bottom: 0;
  border-bottom: 0;
}
.cta__title {
  font-weight: 700;
  text-align: center;
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1.4583333333;
  letter-spacing: 0em;
}
.cta__group--customer .cta__title {
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1.25;
  letter-spacing: 0em;
}
.cta__or {
  margin-top: calc(min(4px, 0.7692307692vw) * -1);
  color: var(--color-gold);
  font-weight: 700;
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1.0833333333;
  letter-spacing: 0em;
}
.cta__note {
  margin-top: calc(min(4px, 0.7692307692vw) * -1);
  font-weight: 500;
  text-align: center;
  font-size: max(16px, min(17px, 3.2692307692vw));
  line-height: 1.3529411765;
  letter-spacing: 0em;
}
.cta__note::before, .cta__note::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.cta__note::before {
  margin-block-end: calc((1 - 1.3529411765) * 0.5em);
}
.cta__note::after {
  margin-block-start: calc((1 - 1.3529411765) * 0.5em);
}
.cta__caution {
  width: 100%;
  max-width: min(380px, 73.0769230769vw);
  margin-top: min(9px, 1.7307692308vw);
  font-family: var(--font-serif);
  font-size: max(14px, min(13px, 2.5vw));
  line-height: 1.5384615385;
  letter-spacing: 0em;
}
.cta__caution::before, .cta__caution::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.cta__caution::before {
  margin-block-end: calc((1 - 1.5384615385) * 0.5em);
}
.cta__caution::after {
  margin-block-start: calc((1 - 1.5384615385) * 0.5em);
}
.cta__caution li:first-child {
  font-weight: 700;
}
.cta__caution strong {
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .cta__caution strong {
    white-space: nowrap;
  }
}
@media screen and (min-width: 768px) {
  .cta__caution-break {
    display: none;
  }
}
.cta__tel {
  width: 100%;
  max-width: min(421px, 80.9615384615vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(15px, 2.8846153846vw);
  padding: min(20px, 3.8461538462vw) 0;
  border-radius: min(5px, 0.9615384615vw);
  background: var(--color-bg-cream);
}
.cta__tel-title {
  width: min(380px, 73.0769230769vw);
  max-width: calc(100% - min(40px, 7.6923076923vw));
  height: min(50px, 9.6153846154vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  font-weight: 700;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1.625;
  letter-spacing: 0em;
}
.cta__tel-body {
  width: 100%;
  padding: 0 min(26px, 5vw) 0 min(30px, 5.7692307692vw);
}
.cta__tel-number {
  font-weight: 500;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1.625;
  letter-spacing: 0em;
}
.cta__tel-note {
  font-size: max(14px, min(13px, 2.5vw));
  line-height: 1.3076923077;
  letter-spacing: 0em;
}

.voice {
  display: flex;
  flex-direction: column;
  gap: min(40px, 7.6923076923vw);
  padding: min(100px, 19.2307692308vw) 0 min(80px, 15.3846153846vw);
  background: var(--color-bg-beige);
}
.voice__main {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  padding-inline: var(--main-padding);
}
.voice__videos {
  display: flex;
  flex-direction: column;
  gap: min(35px, 6.7307692308vw);
}
.voice__subtitle {
  font-weight: 500;
  font-size: max(14px, min(32px, 6.1538461538vw));
  line-height: 1;
  letter-spacing: 0em;
}
.voice__video {
  position: relative;
  display: block;
  width: min(440px, 84.6153846154vw);
  max-width: 100%;
  margin-inline: auto;
}
.voice__preview {
  position: relative;
  display: block;
  width: 100%;
}
.voice__preview::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100px, 19.2307692308vw);
  aspect-ratio: 146/133;
  background: url("../img/yt_icon.png") center/contain no-repeat;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.voice__preview[hidden] {
  display: none;
}
.voice__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  min-height: 200px;
  border: 0;
}
.voice__player[hidden] {
  display: none;
}
.voice__more {
  position: relative;
  display: flex;
  flex-direction: column;
}
.voice__more.is-revealing .voice__more-summary {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.voice__more-content {
  display: flex;
  flex-direction: column;
  gap: min(35px, 6.7307692308vw);
}
.voice__more-summary {
  position: relative;
  width: min(440px, 84.6153846154vw);
  max-width: 100%;
  display: block;
  margin-inline: auto;
  list-style: none;
  cursor: pointer;
}
.voice__more-summary::-webkit-details-marker {
  display: none;
}
.voice__more-summary[hidden] {
  display: none;
}
@media (hover) {
  .voice__more-summary:hover {
    opacity: 0.8;
  }
}
.voice__more-label {
  display: block;
  padding-top: min(9px, 1.7307692308vw);
  font-weight: 500;
  text-align: center;
  transition: opacity 0.3s ease;
  font-size: max(14px, min(20px, 3.8461538462vw));
  line-height: 1;
  letter-spacing: 0em;
}
.voice__close {
  display: block;
  align-self: center;
  margin: min(25px, 4.8076923077vw) 0 0;
  padding: min(10px, 1.9230769231vw) 0;
  font-weight: 500;
  text-decoration: underline;
  font-size: max(14px, min(18px, 3.4615384615vw));
  line-height: 1;
  letter-spacing: 0em;
}
.voice__more-list {
  display: flex;
  flex-direction: column;
  gap: min(35px, 6.7307692308vw);
}
.voice__slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
}
.voice__viewport {
  width: min(492px, 94.6153846154vw);
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
  padding-inline: min(10px, 1.9230769231vw);
}
@media screen and (min-width: 768px) {
  .voice__viewport {
    gap: min(20px, 3.8461538462vw);
    padding-inline: 0;
  }
}
.voice__track {
  display: flex;
  min-width: 0;
  flex: 1;
  padding: min(12px, 2.3076923077vw);
  margin: calc(min(12px, 2.3076923077vw) * -1);
  overflow: hidden;
}
.voice__arrow {
  position: relative;
  width: min(20px, 3.8461538462vw);
  height: min(20px, 3.8461538462vw);
  flex-shrink: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.voice__arrow::before, .voice__arrow::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 0.75px);
  left: min(5px, 0.9615384615vw);
  width: min(9px, 1.7307692308vw);
  height: 1.5px;
  background: #304c6e;
  transform-origin: right center;
}
.voice__arrow::before {
  transform: rotate(45deg);
}
.voice__arrow::after {
  transform: rotate(-45deg);
}
.voice__arrow--prev {
  transform: scaleX(-1);
}
.voice__dots {
  display: flex;
  justify-content: center;
  gap: min(12px, 2.3076923077vw);
}
.voice__dots .c-dot.is-active {
  background: #7d7d7d;
}

.voice-card {
  flex: 0 0 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: min(16px, 3.0769230769vw);
  min-height: min(140px, 26.9230769231vw);
  padding: min(16px, 3.0769230769vw);
  border-radius: min(10px, 1.9230769231vw);
  background: #f8f7f4;
  box-shadow: min(2px, 0.3846153846vw) min(2px, 0.3846153846vw) min(6px, 1.1538461538vw) rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
  .voice-card {
    gap: min(25px, 4.8076923077vw);
    padding: min(20px, 3.8461538462vw);
  }
}
.voice-card__avatar {
  width: min(60px, 11.5384615385vw);
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .voice-card__avatar {
    width: min(72px, 13.8461538462vw);
  }
}
.voice-card__body {
  display: flex;
  flex-direction: column;
  gap: min(15px, 2.8846153846vw);
}
.voice-card__tag {
  position: relative;
  align-self: flex-start;
  display: flex;
  align-items: center;
  margin-left: min(9px, 1.7307692308vw);
  padding: min(6px, 1.1538461538vw) min(10px, 1.9230769231vw);
  color: var(--color-white);
  background: var(--color-basic-tag);
  font-weight: 700;
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1.2857142857;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .voice-card__tag {
    padding: min(3px, 0.5769230769vw) min(8px, 1.5384615385vw);
  }
}
.voice-card__tag::before, .voice-card__tag::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(18px, 3.4615384615vw);
  height: min(18px, 3.4615384615vw);
  background: inherit;
  border-radius: 50%;
  transform: translateY(-50%);
}
.voice-card__tag::before {
  left: calc(min(9px, 1.7307692308vw) * -1);
}
.voice-card__tag::after {
  right: calc(min(9px, 1.7307692308vw) * -1);
}
.voice-card__tag--damage {
  background: var(--color-damage);
}
.voice-card__text {
  font-family: var(--font-sans);
  font-size: max(15px, min(15px, 2.8846153846vw));
  line-height: 1.6;
  letter-spacing: 0em;
}
.voice-card__text::before, .voice-card__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.voice-card__text::before {
  margin-block-end: calc((1 - 1.6) * 0.5em);
}
.voice-card__text::after {
  margin-block-start: calc((1 - 1.6) * 0.5em);
}
@media screen and (min-width: 768px) {
  .voice-card__text {
    font-size: max(16px, min(16px, 3.0769230769vw));
    line-height: 1.5;
    letter-spacing: 0em;
  }
  .voice-card__text::before, .voice-card__text::after {
    content: "";
    display: block flow;
    inline-size: 0;
    block-size: 1px;
  }
  .voice-card__text::before {
    margin-block-end: calc((1 - 1.5) * 0.5em);
  }
  .voice-card__text::after {
    margin-block-start: calc((1 - 1.5) * 0.5em);
  }
}

.media {
  display: flex;
  flex-direction: column;
  gap: min(50px, 9.6153846154vw);
  padding: min(100px, 19.2307692308vw) var(--main-padding) 0;
  background: var(--color-bg-gray);
}
.media__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
}
.media__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 460/410;
}
.media__magazine {
  position: absolute;
  top: 5.75%;
  left: 0;
  width: 56.51%;
  transform: translateY(calc(min(24px, 4.6153846154vw) * var(--media-progress, 0))) rotate(calc(-5.22deg + var(--media-progress, 0) * 1.5deg));
  filter: drop-shadow(min(10px, 1.9230769231vw) min(16px, 3.0769230769vw) min(12px, 2.3076923077vw) rgba(0, 0, 0, 0.22));
  animation: magazine-float 5s ease-in-out infinite;
}
.media__clip {
  position: absolute;
  top: 19.25%;
  left: 58.62%;
  width: 40.22%;
  transform: rotate(7.16deg);
}
.media__badge {
  position: absolute;
  top: 65.79%;
  left: 73.91%;
  width: min(120px, 23.0769230769vw);
  height: min(120px, 23.0769230769vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-white);
  background: #ed733a;
  font-family: var(--font-sans);
  font-weight: 500;
  text-align: center;
  font-size: max(14px, min(18px, 3.4615384615vw));
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
.media__caption {
  text-align: center;
  font-weight: 500;
  font-size: max(14px, min(22px, 4.2307692308vw));
  line-height: 1.5909090909;
  letter-spacing: 0em;
}
.media__caption-name {
  font-size: max(14px, min(28px, 5.3846153846vw));
  line-height: 1.25;
  letter-spacing: 0em;
}

.volume-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(24px, 4.6153846154vw);
  padding: min(60px, 11.5384615385vw) min(20px, 3.8461538462vw) min(40px, 7.6923076923vw);
  background: var(--color-bg-beige);
}
@media screen and (min-width: 768px) {
  .volume-dialog {
    gap: min(20px, 3.8461538462vw);
    padding: min(100px, 19.2307692308vw) min(40px, 7.6923076923vw) min(70px, 13.4615384615vw);
  }
}
.volume-dialog__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(30px, 5.7692307692vw);
}
.volume-dialog__title {
  width: 100%;
  padding-bottom: min(16px, 3.0769230769vw);
  border-bottom: 2px solid #9f7e50;
  color: #906235;
  font-family: var(--font-serif);
  font-weight: 500;
  text-align: center;
  font-size: max(18px, min(18px, 3.4615384615vw));
  line-height: 1.6666666667;
  letter-spacing: 0em;
}
.volume-dialog__title em {
  font-style: normal;
  font-size: max(20px, min(20px, 3.8461538462vw));
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .volume-dialog__title {
    font-size: max(14px, min(24px, 4.6153846154vw));
    line-height: 1.625;
    letter-spacing: 0em;
  }
  .volume-dialog__title em {
    font-size: max(14px, min(28px, 5.3846153846vw));
    line-height: 1.3928571429;
    letter-spacing: 0em;
  }
}
@media screen and (min-width: 768px) {
  .volume-dialog__title-break {
    display: none;
  }
}
.volume-dialog__hair {
  display: block;
  width: 90%;
  max-width: 240px;
}
@media screen and (min-width: 768px) {
  .volume-dialog__hair {
    width: 100%;
    max-width: min(560px, 107.6923076923vw);
  }
}
.volume-dialog__body {
  display: flex;
  flex-direction: column;
  gap: min(16px, 3.0769230769vw);
  padding: 0 0 min(20px, 3.8461538462vw);
}
@media screen and (min-width: 768px) {
  .volume-dialog__body {
    padding-inline: min(20px, 3.8461538462vw);
  }
}
.volume-dialog__text {
  font-family: var(--font-sans);
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.75;
  letter-spacing: 0em;
}
.volume-dialog__text::before, .volume-dialog__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.volume-dialog__text::before {
  margin-block-end: calc((1 - 1.75) * 0.5em);
}
.volume-dialog__text::after {
  margin-block-start: calc((1 - 1.75) * 0.5em);
}
.volume-dialog__text strong {
  font-weight: 700;
}
.volume-dialog__note {
  font-family: var(--font-sans);
  font-size: max(14px, min(10px, 1.9230769231vw));
  line-height: 1;
  letter-spacing: 0em;
}
.volume-dialog__graphs {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
}
@media screen and (min-width: 768px) {
  .volume-dialog__graphs {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
  }
}
.volume-dialog__graph {
  width: 100%;
  max-width: min(440px, 84.6153846154vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(5px, 0.9615384615vw);
}
.volume-dialog__graph img {
  width: 100%;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .volume-dialog__graph:first-child {
    width: min(340px, 65.3846153846vw);
  }
  .volume-dialog__graph:last-child {
    width: min(360px, 69.2307692308vw);
  }
}
.volume-dialog__graph-title {
  color: var(--color-basic-tag);
  font-family: var(--font-sans);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1.75;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .volume-dialog__graph-title {
    white-space: normal;
  }
}
.volume-dialog__graph-title em {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.volume-dialog__graph-title small {
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 2;
  letter-spacing: 0em;
}
.volume-dialog__em {
  color: var(--color-basic-tag);
  font-style: normal;
  background: linear-gradient(transparent 70%, rgba(130, 75, 84, 0.19) 30%);
}
.volume-dialog__source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-self: flex-start;
  margin-top: min(6px, 1.1538461538vw);
  font-family: var(--font-sans);
  font-size: max(14px, min(10px, 1.9230769231vw));
  line-height: 1.5;
  letter-spacing: 0em;
}
.volume-dialog__source-line {
  white-space: nowrap;
}

.product-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
  padding: min(40px, 7.6923076923vw) min(16px, 3.0769230769vw);
}
@media screen and (min-width: 768px) {
  .product-modal {
    padding: min(50px, 9.6153846154vw) min(20px, 3.8461538462vw);
  }
}
.product-modal__head {
  display: flex;
  flex-direction: column;
  gap: min(5px, 0.9615384615vw);
  text-align: center;
  font-family: var(--font-en);
}
.product-modal__category {
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1.25;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .product-modal__category {
    font-size: max(14px, min(34px, 6.5384615385vw));
    line-height: 1.1176470588;
    letter-spacing: 0em;
  }
}
.product-modal__name {
  color: var(--color-basic);
  font-size: max(14px, min(24px, 4.6153846154vw));
  line-height: 1.25;
  letter-spacing: 0em;
}
.product-modal--damage .product-modal__name {
  color: var(--color-damage-name);
}
@media screen and (min-width: 768px) {
  .product-modal__name {
    font-size: max(14px, min(32px, 6.1538461538vw));
    line-height: 1.1875;
    letter-spacing: 0em;
  }
}
.product-modal__intro {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(10px, 1.9230769231vw);
}
@media screen and (min-width: 768px) {
  .product-modal__intro {
    width: min(380px, 73.0769230769vw);
  }
}
.product-modal__pc-break {
  display: none;
}
@media screen and (min-width: 768px) {
  .product-modal__pc-break {
    display: inline;
  }
}
.product-modal__intro-text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.5;
  letter-spacing: 0em;
}
.product-modal__intro-text::before, .product-modal__intro-text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.product-modal__intro-text::before {
  margin-block-end: calc((1 - 1.5) * 0.5em);
}
.product-modal__intro-text::after {
  margin-block-start: calc((1 - 1.5) * 0.5em);
}
.product-modal__intro-note {
  font-family: var(--font-sans);
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.5;
  letter-spacing: 0em;
}
.product-modal__body {
  width: min(520px, 100vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(5px, 0.9615384615vw);
}
.product-modal__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(16px, 3.0769230769vw);
  padding-block: min(10px, 1.9230769231vw);
  color: var(--color-white);
  background: var(--color-basic);
  font-weight: 500;
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1.2857142857;
  letter-spacing: 0em;
}
.product-modal__tags > span {
  white-space: nowrap;
}
.product-modal--damage .product-modal__tags {
  background: var(--color-damage);
}
@media screen and (min-width: 768px) {
  .product-modal__tags {
    gap: min(30px, 5.7692307692vw);
    font-size: max(14px, min(18px, 3.4615384615vw));
    line-height: 1;
    letter-spacing: 0em;
  }
}
.product-modal__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: min(5px, 0.9615384615vw);
}
@media screen and (min-width: 768px) {
  .product-modal__items {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-modal__items--single {
    grid-template-columns: 1fr;
  }
}
.product-modal__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 3.8461538462vw);
  padding: min(20px, 3.8461538462vw) min(10px, 1.9230769231vw);
  background: #f4f2f2;
}
.product-modal--damage .product-modal__item {
  background: #f5f4ef;
}
.product-modal__figure {
  height: min(150px, 28.8461538462vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-modal__figure img {
  width: auto;
  height: 100%;
}
.product-modal__desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
  text-align: center;
}
.product-modal__item-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 500;
  font-size: max(14px, min(20px, 3.8461538462vw));
  line-height: 1;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .product-modal__items:not(.product-modal__items--single) .product-modal__item-name {
    min-height: min(40px, 7.6923076923vw);
  }
}
.product-modal__item-name small {
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1.25;
  letter-spacing: 0em;
}
.product-modal__item-label {
  width: max-content;
  min-width: min(90px, 17.3076923077vw);
  min-height: min(25px, 4.8076923077vw);
  padding: min(4px, 0.7692307692vw) min(9px, 1.7307692308vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  font-family: var(--font-sans);
  white-space: nowrap;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1;
  letter-spacing: 0em;
}
.product-modal__item-text {
  font-family: var(--font-sans);
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.5;
  letter-spacing: 0em;
}
.product-modal__item-text::before, .product-modal__item-text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.product-modal__item-text::before {
  margin-block-end: calc((1 - 1.5) * 0.5em);
}
.product-modal__item-text::after {
  margin-block-start: calc((1 - 1.5) * 0.5em);
}
.product-modal__item-caution {
  font-family: var(--font-sans);
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 2.1666666667;
  letter-spacing: 0em;
}
.product-modal__sizes {
  display: flex;
  flex-direction: column;
  gap: min(5px, 0.9615384615vw);
}
.product-modal__sizes li {
  display: flex;
  align-items: center;
  gap: min(10px, 1.9230769231vw);
}
.product-modal__size {
  width: min(65px, 12.5vw);
  padding-block: min(2px, 0.3846153846vw) min(4px, 0.7692307692vw);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-basic-tag);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1;
  letter-spacing: 0em;
}
.product-modal--damage .product-modal__size {
  background: var(--color-damage);
}
.product-modal__size-unit {
  transform: translateY(calc(min(2px, 0.3846153846vw) * -1));
}
.product-modal__price {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1;
  letter-spacing: 0em;
}
.product-modal__price small {
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
.product-modal__refill {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1;
  letter-spacing: 0em;
}
.product-modal__item-note {
  font-family: var(--font-sans);
  text-align: left;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.4166666667;
  letter-spacing: 0em;
}

.treatment-steps {
  display: flex;
  flex-direction: column;
  gap: min(5px, 0.9615384615vw);
}
.treatment-steps__item {
  display: flex;
  align-items: center;
  gap: min(16px, 3.0769230769vw);
  padding: min(15px, 2.8846153846vw) min(16px, 3.0769230769vw) min(20px, 3.8461538462vw);
  background: #f5f4ef;
}
@media screen and (min-width: 768px) {
  .treatment-steps__item {
    gap: min(24px, 4.6153846154vw);
    padding-inline: min(50px, 9.6153846154vw);
  }
}
.treatment-steps__visual {
  position: relative;
  width: min(120px, 23.0769230769vw);
  height: min(161px, 30.9615384615vw);
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .treatment-steps__visual {
    width: min(149px, 28.6538461538vw);
  }
}
.treatment-steps__image {
  position: absolute;
  top: min(14px, 2.6923076923vw);
  left: min(44px, 8.4615384615vw);
  width: auto;
  height: min(120px, 23.0769230769vw);
}
@media screen and (min-width: 768px) {
  .treatment-steps__image {
    left: min(62.5px, 12.0192307692vw);
  }
}
.treatment-steps__badge {
  position: absolute;
  top: calc(min(10px, 1.9230769231vw) * -1);
  left: calc(min(4px, 0.7692307692vw) * -1);
  width: min(75px, 14.4230769231vw);
  height: min(75px, 14.4230769231vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-damage-accent);
  border-radius: 50%;
  color: var(--color-damage-accent);
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-en);
  font-size: max(14px, min(18px, 3.4615384615vw));
  line-height: 1.5555555556;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .treatment-steps__badge {
    top: 0;
    left: min(6px, 1.1538461538vw);
  }
}
.treatment-steps__size {
  position: absolute;
  right: min(8.5px, 1.6346153846vw);
  bottom: calc(min(12px, 2.3076923077vw) * -1);
  width: min(69px, 13.2692307692vw);
  min-height: min(22px, 4.2307692308vw);
  padding-block: min(4px, 0.7692307692vw);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-damage);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: max(14px, min(14px, 2.6923076923vw));
  line-height: 1;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .treatment-steps__size {
    right: min(20px, 3.8461538462vw);
    bottom: 0;
  }
}
.treatment-steps__size-unit {
  transform: translateY(calc(min(2px, 0.3846153846vw) * -1));
}
.treatment-steps__body {
  display: flex;
  flex-direction: column;
  gap: min(10px, 1.9230769231vw);
  padding-block: min(18px, 3.4615384615vw);
  min-width: 0;
}
.treatment-steps__name {
  font-weight: 500;
  font-size: max(14px, min(20px, 3.8461538462vw));
  line-height: 1.4;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .treatment-steps__name {
    font-size: max(14px, min(20px, 3.8461538462vw));
    line-height: 1;
    letter-spacing: 0em;
  }
}
.treatment-steps__name-part {
  display: inline-block;
  white-space: nowrap;
}
.treatment-steps__text {
  font-family: var(--font-sans);
  font-size: max(16px, min(16px, 3.0769230769vw));
  line-height: 1.625;
  letter-spacing: 0em;
}
.treatment-steps__text::before, .treatment-steps__text::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.treatment-steps__text::before {
  margin-block-end: calc((1 - 1.625) * 0.5em);
}
.treatment-steps__text::after {
  margin-block-start: calc((1 - 1.625) * 0.5em);
}
.treatment-steps__usage {
  margin-top: min(4px, 0.7692307692vw);
  width: min(171px, 32.8846153846vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1px, 0.1923076923vw);
  border: 1px solid #c4a952;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 500;
}
.treatment-steps__usage-label {
  width: 100%;
  min-height: min(22px, 4.2307692308vw);
  padding: min(4px, 0.7692307692vw) min(6px, 1.1538461538vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: #c4a952;
  font-size: max(14px, min(12px, 2.3076923077vw));
  line-height: 1.5;
  letter-spacing: 0em;
}
.treatment-steps__usage-label-part {
  white-space: nowrap;
}
.treatment-steps__usage-value {
  min-height: min(26px, 5vw);
  padding-block: min(4px, 0.7692307692vw) min(6px, 1.1538461538vw);
  display: flex;
  align-items: center;
  font-size: max(14px, min(16px, 3.0769230769vw));
  line-height: 1;
  letter-spacing: 0em;
}

@keyframes magazine-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 calc(min(10px, 1.9230769231vw) * -1);
  }
}
@keyframes marker-reveal {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

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