@layer tokens {
  :root {
    --ratio-fluid: 1;
    --ratio: 1;
    --ratio-base: 1440;
    --ratio-min: 0.533;
    --ratio-max: 1.111;
  }
  @media (width<=767.98px) {
    :root {
      --ratio-base: 390;
      --ratio-min: 0.821;
      --ratio-max: 1.969;
    }
  }
  @supports (width: calc(tan(atan2(100vw, 1px)) * 1px)) {
    :root {
      --ratio-fluid: clamp(0.533, tan(atan2(100vw, 1px)) / 1440, 1.111);
    }
    @media (width<=767.98px) {
      :root {
        --ratio-fluid: clamp(0.821, tan(atan2(100vw, 1px)) / 390, 1.969);
      }
    }
  }
  :root {
    --ratio: var(--ratio-fluid);
    --color-primary: #009639;
    --color-primary-bright: #00a33e;
    --color-primary-dark: #167554;
    --color-primary-mid: #008532;
    --color-primary-panel: #008942;
    --color-primary-deep: #006c34;
    --color-accent: #ff005b;
    --color-accent-light: #ffb2cd;
    --color-lotte-red: #d50012;
    --color-text: #000;
    --color-white: #fff;
    --color-bg: #ecfdf0;
    --color-bg-mint: #ebfff0;
    --color-bg-mint-cool: #ebfffa;
    --color-mint: #9effc2;
    --color-mint-light: #b1f9cc;
    --color-mint-line: #9fedbc;
    --color-mint-border: #d2f6e6;
    --color-mint-pale: #e3ffee;
    --color-lime: #d0ff9d;
    --color-shadow: #b2d9ce;
    --gradient-bg: linear-gradient(180deg, #ecfdf0 0%, #caf8d5 100%);
    --gradient-bg-cool: linear-gradient(180deg, #ecf8fd 0%, #cff3ed 100%);
    --gradient-card: linear-gradient(180deg, #fff 0%, #ebfff0 100%);
    --gradient-primary: linear-gradient(180deg, #009639 0%, #167554 100%);
    --gradient-primary-text: linear-gradient(
      90deg,
      #167554 0%,
      #00a33e 50%,
      #167554 100%
    );
    --font-family:
      'Zen Kaku Gothic New', -apple-system, 'BlinkMacSystemFont', 'Segoe UI',
      'Hiragino Sans', 'Noto Sans JP', sans-serif;
    --font-family-rounded: 'Zen Maru Gothic', var(--font-family);
    --font-family-en: 'Poppins', var(--font-family);
    --fs-xs: calc(var(--ratio) * 0.75rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-xs: calc(var(--ratio) * 0.625rem);
    }
  }
  :root {
    --fs-s: calc(var(--ratio) * 0.875rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-s: calc(var(--ratio) * 0.75rem);
    }
  }
  :root {
    --fs-m: calc(var(--ratio) * 1rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-m: calc(var(--ratio) * 0.875rem);
    }
  }
  :root {
    --fs-lead: calc(var(--ratio) * 1.125rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-lead: calc(var(--ratio) * 1rem);
    }
  }
  :root {
    --fs-l: calc(var(--ratio) * 1.5rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-l: calc(var(--ratio) * 1.125rem);
    }
  }
  :root {
    --fs-xl: calc(var(--ratio) * 2rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-xl: calc(var(--ratio) * 1.375rem);
    }
  }
  :root {
    --fs-2xl: calc(var(--ratio) * 2.625rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-2xl: calc(var(--ratio) * 1.75rem);
    }
  }
  :root {
    --fs-3xl: calc(var(--ratio) * 3rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-3xl: calc(var(--ratio) * 2rem);
    }
  }
  :root {
    --fs-4xl: calc(var(--ratio) * 3.5rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-4xl: calc(var(--ratio) * 2.25rem);
    }
  }
  :root {
    --fs-en: calc(var(--ratio) * 1.125rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-en: calc(var(--ratio) * 0.75rem);
    }
  }
  :root {
    --fs-en-s: calc(var(--ratio) * 1rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-en-s: calc(var(--ratio) * 0.75rem);
    }
  }
  :root {
    --fs-en-xl: calc(var(--ratio) * 2.625rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-en-xl: calc(var(--ratio) * 1.75rem);
    }
  }
  :root {
    --fs-watermark: calc(var(--ratio) * 7.875rem);
  }
  @media (width<=767.98px) {
    :root {
      --fs-watermark: calc(var(--ratio) * 3.75rem);
    }
  }
  :root {
    --lh-body: 1.5;
    --lh-tight: 1.3;
    --lh-loose: 2.7;
    --space-2xs: calc(var(--ratio) * 0.25rem);
    --space-xs: calc(var(--ratio) * 0.5rem);
    --space-s: calc(var(--ratio) * 0.75rem);
  }
  @media (width<=767.98px) {
    :root {
      --space-s: calc(var(--ratio) * 0.625rem);
    }
  }
  :root {
    --space-m: calc(var(--ratio) * 1rem);
  }
  @media (width<=767.98px) {
    :root {
      --space-m: calc(var(--ratio) * 1.25rem);
    }
  }
  :root {
    --space-l: calc(var(--ratio) * 1.5rem);
    --space-xl: calc(var(--ratio) * 2.5rem);
  }
  @media (width<=767.98px) {
    :root {
      --space-xl: calc(var(--ratio) * 2rem);
    }
  }
  :root {
    --space-2xl: calc(var(--ratio) * 3.75rem);
  }
  @media (width<=767.98px) {
    :root {
      --space-2xl: calc(var(--ratio) * 2.5rem);
    }
  }
  :root {
    --space-3xl: calc(var(--ratio) * 6.875rem);
  }
  @media (width<=767.98px) {
    :root {
      --space-3xl: calc(var(--ratio) * 3.75rem);
    }
  }
  :root {
    --container-max: calc(calc(var(--ratio) * 68.75rem) + var(--space-m) * 2);
    --container-narrow: calc(
      calc(var(--ratio) * 56.25rem) + var(--space-m) * 2
    );
    --design-width: calc(var(--ratio) * 90rem);
    --radius-s: calc(var(--ratio) * 0.5rem);
  }
  @media (width<=767.98px) {
    :root {
      --radius-s: calc(var(--ratio) * 0.375rem);
    }
  }
  :root {
    --radius-m: calc(var(--ratio) * 1.25rem);
  }
  @media (width<=767.98px) {
    :root {
      --radius-m: calc(var(--ratio) * 0.8125rem);
    }
  }
  :root {
    --radius-l: calc(var(--ratio) * 1.875rem);
  }
  @media (width<=767.98px) {
    :root {
      --radius-l: calc(var(--ratio) * 1.25rem);
    }
  }
  :root {
    --radius-xl: calc(var(--ratio) * 3.125rem);
  }
  @media (width<=767.98px) {
    :root {
      --radius-xl: calc(var(--ratio) * 2.0625rem);
    }
  }
  :root {
    --border-w: 0.125rem;
    --fade-duration: 0.7s;
    --fade-easing: ease;
    --fade-delay: 0s;
  }
}
@layer base {
  *,
  :before,
  :after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl,
  dd,
  pre,
  figure,
  blockquote {
    margin: 0;
  }
  body {
    min-height: 100svh;
    font-family: var(--font-family);
    font-size: var(--fs-m);
    color: var(--color-text);
    background-color: var(--color-bg);
    flex-direction: column;
    line-height: 1.6;
    display: flex;
  }
  main {
    flex: 1;
  }
  a {
    color: var(--color-primary);
    text-decoration: none;
  }
  img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
  }
}
@layer layout {
  .l-container {
    max-width: var(--container-max);
    padding-inline: var(--space-m);
    margin-inline: auto;
  }
  .l-container--narrow {
    max-width: var(--container-narrow);
  }
  .l-stack > * + * {
    margin-block-start: var(--stack-gap, var(--space-m));
  }
  .l-cluster {
    gap: var(--cluster-gap, var(--space-m));
    flex-wrap: wrap;
    align-items: center;
    display: flex;
  }
  .l-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--grid-min, 280px), 100%), 1fr)
    );
    gap: var(--grid-gap, var(--space-xl));
    display: grid;
  }
  .l-grid--cols {
    grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
  }
}
@layer components {
  .c-header {
    top: calc(var(--ratio) * 1.75rem);
    left: calc(var(--ratio) * 2.25rem);
    z-index: 10;
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-header {
      top: calc(var(--ratio) * 1.25rem);
      left: calc(var(--ratio) * 1.25rem);
    }
  }
  .c-header__logo {
    width: calc(var(--ratio) * 6.25rem);
    display: block;
  }
  .c-header__logo img {
    width: 100%;
    height: auto;
  }
  .c-clover {
    width: calc(var(--ratio) * 38.5rem);
    height: calc(var(--ratio) * 35.625rem);
    position: relative;
  }
  .c-clover .c-clover__stage {
    transform: scale(0.8247);
  }
  @media (width<=767.98px) {
    .c-clover {
      width: calc(var(--ratio) * 21.7125rem);
      height: calc(var(--ratio) * 20.0875rem);
    }
    .c-clover .c-clover__stage {
      transform: scale(0.465);
    }
  }
  .c-clover__stage {
    width: calc(var(--ratio) * 46.6875rem);
    height: calc(var(--ratio) * 43.1875rem);
    transform-origin: 0 0;
    position: absolute;
    inset: 0;
  }
  .c-clover__body {
    top: 0;
    left: calc(var(--ratio) * 2.9375rem);
    width: calc(var(--ratio) * 43.75rem);
    filter: drop-shadow(0 0 calc(var(--ratio) * 0.875rem) var(--color-shadow));
    position: absolute;
  }
  .c-clover__body img {
    width: 100%;
    height: auto;
  }
  .c-clover__labels {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .c-clover__label {
    width: calc(var(--ratio) * 16.25rem);
    font-size: calc(var(--ratio) * 2.70938rem);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-white);
    text-align: center;
    position: absolute;
    transform: translate(-50%);
  }
  .c-clover__label--brush {
    top: calc(var(--ratio) * 8.9375rem);
    left: calc(var(--ratio) * 12.5438rem);
  }
  .c-clover__label--diet {
    top: calc(var(--ratio) * 7.1875rem);
    left: calc(var(--ratio) * 28.15rem);
  }
  .c-clover__label--fluoride {
    top: calc(var(--ratio) * 23.625rem);
    left: calc(var(--ratio) * 12.5438rem);
  }
  .c-clover__label--checkup {
    top: calc(var(--ratio) * 23.625rem);
    left: calc(var(--ratio) * 28.1375rem);
  }
  .c-clover__ribbon {
    top: calc(var(--ratio) * 34.625rem);
    left: calc(var(--ratio) * 27.0938rem);
    width: calc(var(--ratio) * 18.375rem);
    height: calc(var(--ratio) * 7.125rem);
    font-family: var(--font-family);
    fill: var(--color-white);
    font-size: 46px;
    font-weight: 900;
    position: absolute;
    overflow: visible;
  }
  .c-clover__illust {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }
  .c-clover__illust img {
    width: 100%;
    height: auto;
  }
  .c-clover__illust--cup {
    top: calc(var(--ratio) * 26.175rem);
    left: calc(var(--ratio) * 2.26875rem);
    width: calc(var(--ratio) * 7.0625rem);
    height: calc(var(--ratio) * 9.04375rem);
  }
  .c-clover__illust--cup img {
    width: calc(var(--ratio) * 4.49375rem);
    transform: rotate(-21.22deg);
  }
  .c-clover__illust--meal {
    top: calc(var(--ratio) * 24.5rem);
    left: calc(var(--ratio) * 30.9375rem);
    width: calc(var(--ratio) * 11.65rem);
    height: calc(var(--ratio) * 13.2813rem);
  }
  .c-clover__illust--meal img {
    width: calc(var(--ratio) * 7.75rem);
    transform: rotate(24.59deg);
  }
  .c-clover__illust--paste {
    top: calc(var(--ratio) * 0.6875rem);
    left: calc(var(--ratio) * -0.1875rem);
    width: calc(var(--ratio) * 9.375rem);
    height: calc(var(--ratio) * 12.9375rem);
  }
  .c-clover__illust--tools {
    top: calc(var(--ratio) * 5.8625rem);
    left: calc(var(--ratio) * 33.5875rem);
    width: calc(var(--ratio) * 11.6625rem);
    height: calc(var(--ratio) * 13.975rem);
  }
  .c-clover__illust--tools img {
    width: calc(var(--ratio) * 8.825rem);
    transform: rotate(15.06deg);
  }
  .c-kv__inner {
    max-width: var(--design-width);
    padding: calc(var(--ratio) * 3rem) calc(var(--ratio) * 3.375rem) 0
      calc(var(--ratio) * 6.6875rem);
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-inline: auto;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-kv__inner {
      gap: calc(var(--ratio) * 1.25rem);
      padding: calc(var(--ratio) * 5.375rem) 0 0;
      flex-direction: column;
    }
  }
  .c-kv__inner > * {
    flex-shrink: 0;
  }
  .c-kv__title {
    width: calc(var(--ratio) * 34.75rem);
    height: auto;
    margin-top: calc(var(--ratio) * 8.625rem);
    animation: kv-in var(--fade-duration) var(--fade-easing) var(--fade-delay)
      both;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-kv__title {
      width: calc(var(--ratio) * 20.8125rem);
      margin: 0 0 0 calc(var(--ratio) * 2.125rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .c-kv__title {
      animation: none;
    }
  }
  @keyframes kv-in {
    0% {
      opacity: 0;
      transform: translateY(calc(var(--ratio) * 1.5rem));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .c-kv__heading img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-kv__clover {
    z-index: 1;
    width: calc(var(--ratio) * 38.5rem);
    height: calc(var(--ratio) * 35.625rem);
    margin-top: calc(var(--ratio) * 3.75rem);
    animation: kv-in var(--fade-duration) var(--fade-easing) var(--fade-delay)
      both;
    position: relative;
  }
  @media (prefers-reduced-motion: reduce) {
    .c-kv__clover {
      animation: none;
    }
  }
  @media (width<=767.98px) {
    .c-kv__clover {
      width: calc(var(--ratio) * 21.7125rem);
      height: calc(var(--ratio) * 20.0875rem);
      margin-top: 0;
      margin-left: calc(var(--ratio) * 1.96875rem);
    }
  }
  .c-kv__clover > .c-clover {
    transform-origin: 0 0;
    will-change: transform;
  }
  .c-intro {
    padding-top: calc(var(--ratio) * 8.5rem);
  }
  @media (width<=767.98px) {
    .c-intro {
      padding-top: calc(var(--ratio) * 1.0625rem);
    }
  }
  .c-intro__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-intro__inner {
      flex-direction: column;
    }
  }
  .c-intro__inner > * {
    flex-shrink: 0;
  }
  .c-intro__text {
    width: calc(var(--ratio) * 30.375rem);
    font-size: calc(var(--ratio) * 1.125rem);
    font-weight: 700;
    line-height: var(--lh-loose);
    white-space: nowrap;
  }
  @media (width<=767.98px) {
    .c-intro__text {
      width: 100%;
      font-size: calc(var(--ratio) * 1rem);
      letter-spacing: -0.02em;
      line-height: 2.3;
    }
  }
  .c-intro__text p + p {
    margin-top: calc(var(--ratio) * 3.0375rem);
  }
  @media (width<=767.98px) {
    .c-intro__text p + p {
      margin-top: calc(var(--ratio) * 2.3rem);
    }
  }
  .c-intro__text > p {
    opacity: 0;
    transform: translateY(calc(var(--ratio) * 1.5rem));
    transition:
      opacity var(--fade-duration) var(--fade-easing),
      transform var(--fade-duration) var(--fade-easing);
    transition-delay: var(--fade-delay);
  }
  @media (prefers-reduced-motion: reduce) {
    .c-intro__text > p {
      transition: none;
      transform: none;
    }
  }
  .c-intro__text > p + p {
    transition-delay: calc(var(--fade-delay) + 0.3s);
  }
  .c-intro__text.is-visible > p {
    opacity: 1;
    transform: none;
  }
  .c-intro__clover {
    width: calc(var(--ratio) * 38.5rem);
    height: calc(var(--ratio) * 35.625rem);
    margin-right: calc(var(--ratio) * -3.875rem);
  }
  @media (width<=767.98px) {
    .c-intro__clover {
      display: none;
    }
  }
  .c-intro__em {
    color: var(--color-accent);
    font-style: normal;
  }
  .c-intro__em--primary {
    color: var(--color-primary);
    font-weight: 900;
  }
  .c-about {
    padding-top: calc(var(--ratio) * 6.375rem);
    padding-bottom: calc(var(--ratio) * 7.5rem);
  }
  @media (width<=767.98px) {
    .c-about {
      padding-top: calc(var(--ratio) * 5rem);
      padding-bottom: calc(var(--ratio) * 6.25rem);
    }
  }
  .c-about__card {
    min-height: calc(var(--ratio) * 40.625rem);
    padding: calc(var(--ratio) * 3.625rem) calc(var(--ratio) * 3.75rem)
      calc(var(--ratio) * 3.625rem) calc(var(--ratio) * 3.625rem);
    background: var(--color-white);
    border: var(--border-w) solid var(--color-mint-border);
    border-radius: var(--radius-l);
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .c-about__card[data-fade] {
    opacity: 0;
    transform: translateY(calc(var(--ratio) * 1.5rem));
    transition:
      opacity var(--fade-duration) var(--fade-easing),
      transform var(--fade-duration) var(--fade-easing);
    transition-delay: var(--fade-delay);
  }
  @media (prefers-reduced-motion: reduce) {
    .c-about__card[data-fade] {
      transition: none;
      transform: none;
    }
  }
  .c-about__card.is-visible {
    opacity: 1;
    transform: none;
  }
  @media (width<=767.98px) {
    .c-about__card {
      min-height: 0;
      padding: calc(var(--ratio) * 1.75rem) calc(var(--ratio) * 1.125rem)
        calc(var(--ratio) * 1.375rem);
      flex-direction: column;
    }
  }
  .c-about__watermark {
    top: calc(var(--ratio) * -2.3125rem);
    left: calc(var(--ratio) * -0.125rem);
    font-family: var(--font-family-en);
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-about__watermark {
      top: calc(var(--ratio) * -1.1875rem);
    }
  }
  .c-about__watermark {
    font-size: var(--fs-watermark);
    color: var(--color-mint-pale);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 600;
    line-height: 1.4;
  }
  .c-about__body {
    width: calc(var(--ratio) * 36.25rem);
    position: relative;
  }
  @media (width<=767.98px) {
    .c-about__body {
      width: 100%;
    }
  }
  .c-about__title {
    padding-left: calc(var(--ratio) * 0.125rem);
    margin-bottom: calc(var(--ratio) * 2.5rem);
    font-size: var(--fs-2xl);
  }
  @media (width<=767.98px) {
    .c-about__title {
      margin-bottom: calc(var(--ratio) * 1.25rem);
      padding-left: 0;
    }
  }
  .c-about__title {
    font-weight: 700;
    line-height: var(--lh-body);
  }
  .c-about__title-em {
    font-size: var(--fs-4xl);
    color: var(--color-primary);
  }
  .c-about__title-tight {
    letter-spacing: -0.2em;
  }
  .c-about__point + .c-about__point {
    margin-top: calc(var(--ratio) * 3rem);
  }
  @media (width<=767.98px) {
    .c-about__point + .c-about__point {
      margin-top: calc(var(--ratio) * 2rem);
    }
  }
  .c-about__point-title {
    margin-bottom: calc(var(--ratio) * 1.125rem);
    font-size: var(--fs-xl);
  }
  @media (width<=767.98px) {
    .c-about__point-title {
      margin-bottom: calc(var(--ratio) * 0.625rem);
    }
  }
  .c-about__point-title {
    font-weight: 700;
    line-height: var(--lh-body);
  }
  .c-about__point-text {
    font-size: var(--fs-m);
    font-weight: 500;
    line-height: var(--lh-body);
  }
  .c-about__em {
    color: var(--color-accent);
    font-style: normal;
  }
  .c-about__figure {
    width: calc(var(--ratio) * 22.5rem);
    height: calc(var(--ratio) * 33.125rem);
    background: var(--color-mint);
    border: calc(var(--ratio) * 0.1125rem) solid var(--color-white);
    border-radius: calc(var(--ratio) * 1.125rem);
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
  }
  @media (width<=767.98px) {
    .c-about__figure {
      width: calc(var(--ratio) * 19.375rem);
      height: calc(var(--ratio) * 28.5rem);
      margin: calc(var(--ratio) * 2rem) auto 0;
      border-width: calc(var(--ratio) * 0.0975rem);
      border-radius: calc(var(--ratio) * 0.975rem);
    }
  }
  .c-about__figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .c-section-head {
    gap: calc(var(--ratio) * 0.125rem);
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }
  .c-section-head__badge {
    width: calc(var(--ratio) * 8.375rem);
    display: block;
  }
  @media (width<=767.98px) {
    .c-section-head__badge {
      width: calc(var(--ratio) * 5.5625rem);
    }
  }
  .c-section-head__badge img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-section-head__title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  @media (width<=767.98px) {
    .c-section-head__title {
      font-size: calc(var(--ratio) * 1.75rem);
    }
  }
  .c-section-head__em {
    color: var(--color-primary);
  }
  @media (width<=767.98px) {
    .c-section-head__em {
      font-size: calc(var(--ratio) * 2rem);
    }
    .c-section-head__line {
      display: block;
    }
  }
  .c-section-head[data-fade] .c-section-head__em {
    top: calc(var(--ratio) * 1.5rem);
    opacity: 0;
    transition:
      opacity var(--fade-duration) var(--fade-easing),
      top var(--fade-duration) var(--fade-easing);
    transition-delay: var(--fade-delay);
    position: relative;
  }
  @media (width<=767.98px) {
    .c-section-head[data-fade] .c-section-head__em {
      opacity: 1;
      transition: none;
      top: 0;
    }
    .c-section-head[data-fade] .c-section-head__line {
      opacity: 0;
      transform: translateY(calc(var(--ratio) * 1.5rem));
      transition:
        opacity var(--fade-duration) var(--fade-easing),
        transform var(--fade-duration) var(--fade-easing);
    }
    .c-section-head[data-fade] .c-section-head__line:first-of-type {
      transition-delay: calc(var(--fade-delay) + 0s);
    }
    .c-section-head[data-fade] .c-section-head__line:nth-of-type(2) {
      transition-delay: calc(var(--fade-delay) + 0.2s);
    }
    .c-section-head[data-fade] .c-section-head__line:nth-of-type(3) {
      transition-delay: calc(var(--fade-delay) + 0.4s);
    }
    .c-section-head[data-fade] .c-section-head__line:nth-of-type(4) {
      transition-delay: calc(var(--fade-delay) + 0.6s);
    }
    .c-section-head[data-fade] .c-section-head__badge {
      --badge-delay: calc(var(--fade-delay) + 0.6s + 0.4s);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .c-section-head[data-fade] .c-section-head__em,
    .c-section-head[data-fade] .c-section-head__line {
      transition: none;
      top: 0;
      transform: none;
    }
  }
  .c-section-head[data-fade].is-visible .c-section-head__em,
  .c-section-head[data-fade].is-visible .c-section-head__line {
    opacity: 1;
    top: 0;
    transform: none;
  }
  [data-fade] .c-section-head__badge {
    --badge-delay: calc(var(--fade-delay) + 0.4s);
    opacity: 0;
    transform-origin: 17% 100%;
    transition:
      opacity 0.2s ease var(--badge-delay),
      transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--badge-delay);
    transform: scale(0.6);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-fade] .c-section-head__badge {
      transition: none;
      transform: none;
    }
  }
  .is-visible .c-section-head__badge {
    opacity: 1;
    transform: none;
  }
  .c-section-head--inverse .c-section-head__title {
    color: var(--color-white);
  }
  .c-toggle {
    gap: calc(var(--ratio) * 1.25rem);
    font-family: inherit;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: var(--lh-body);
    color: var(--color-text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }
  @media (width<=767.98px) {
    .c-toggle {
      gap: calc(var(--ratio) * 0.625rem);
    }
  }
  .c-toggle__icon {
    width: calc(var(--ratio) * 2.5rem);
    height: calc(var(--ratio) * 2.5rem);
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--radius-s);
    place-items: center;
    transition: opacity 0.2s;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-toggle__icon {
      width: calc(var(--ratio) * 2rem);
      height: calc(var(--ratio) * 2rem);
    }
  }
  .c-toggle__icon svg {
    width: calc(var(--ratio) * 0.45625rem);
    height: calc(var(--ratio) * 0.75rem);
    fill: none;
    transition: transform 0.25s;
    transform: rotate(90deg);
  }
  @media (width<=767.98px) {
    .c-toggle__icon svg {
      width: calc(var(--ratio) * 0.3625rem);
      height: calc(var(--ratio) * 0.6rem);
    }
  }
  .c-toggle[aria-expanded='true'] .c-toggle__icon svg {
    transform: rotate(-90deg);
  }
  .c-toggle:hover .c-toggle__icon,
  .c-toggle:focus-visible .c-toggle__icon {
    opacity: 0.8;
  }
  .c-toggle__label--close,
  .c-toggle[aria-expanded='true'] .c-toggle__label--open {
    display: none;
  }
  .c-toggle[aria-expanded='true'] .c-toggle__label--close {
    display: inline;
  }
  .c-features {
    padding-top: calc(var(--ratio) * 7.5rem);
    padding-bottom: calc(var(--ratio) * 7.5rem);
    background: linear-gradient(
      180deg,
      var(--color-white) 0%,
      var(--color-bg-mint) 100%
    );
    position: relative;
  }
  @media (width<=767.98px) {
    .c-features {
      padding-top: calc(var(--ratio) * 6.25rem);
      padding-bottom: calc(var(--ratio) * 6.25rem);
    }
  }
  .c-features__deco {
    top: calc(var(--ratio) * 4.5625rem);
    left: calc(var(--ratio) * 6.875rem);
    width: calc(var(--ratio) * 12.75rem);
    pointer-events: none;
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-features__deco {
      top: calc(var(--ratio) * 4.375rem);
      left: calc(var(--ratio) * -0.625rem);
      width: calc(var(--ratio) * 7.625rem);
    }
  }
  .c-features__deco img {
    width: 100%;
    height: auto;
  }
  .c-features__head {
    position: relative;
  }
  .c-features__head + .c-point {
    margin-top: calc(var(--ratio) * 6.25rem);
  }
  @media (width<=767.98px) {
    .c-features__head + .c-point {
      margin-top: calc(var(--ratio) * 4rem);
    }
  }
  .c-point + .c-point {
    margin-top: calc(var(--ratio) * 7.5rem);
  }
  @media (width<=767.98px) {
    .c-point + .c-point {
      margin-top: calc(var(--ratio) * 3.75rem);
    }
  }
  .c-point {
    --point-closed: calc(var(--ratio) * 20rem);
    flex-direction: column;
    align-items: flex-end;
    display: flex;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-point {
      --point-closed: calc(var(--ratio) * 16.25rem);
    }
    .c-point--second {
      --point-closed: calc(var(--ratio) * 29.375rem);
    }
    .c-point--third {
      --point-closed: calc(var(--ratio) * 31.25rem);
    }
  }
  .c-point__quote {
    top: calc(var(--ratio) * -7.5rem);
    left: calc(var(--ratio) * -2.5rem);
    z-index: 0;
    font-size: calc(var(--ratio) * 12.5rem);
    color: var(--color-white);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 500;
    line-height: 1.4;
    position: absolute;
  }
  .c-point__quote--right {
    left: calc(var(--ratio) * 33.125rem);
  }
  .c-point--first .c-point__quote {
    color: var(--color-bg-mint-cool);
  }
  @media (width<=767.98px) {
    .c-point__quote {
      top: calc(var(--ratio) * -4.375rem);
      left: calc(var(--ratio) * -1.25rem);
      font-size: calc(var(--ratio) * 7.5rem);
    }
    .c-point__quote--right {
      left: calc(var(--ratio) * -1.25rem);
    }
  }
  .c-point__head {
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: flex;
    position: relative;
  }
  .c-point__head--narrow {
    width: calc(var(--ratio) * 33.125rem);
  }
  @media (width<=767.98px) {
    .c-point__head--narrow {
      width: 100%;
    }
    .c-point__head {
      order: -2;
    }
  }
  .c-point__label {
    font-family: var(--font-family-en);
    font-size: var(--fs-en-s);
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.4;
  }
  .c-point__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-point__em {
    color: var(--color-accent);
    font-style: normal;
  }
  .c-point__lead,
  .c-point__text {
    font-size: var(--fs-m);
    font-weight: 500;
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-point__lead {
    margin-top: calc(var(--ratio) * 1.125rem);
  }
  .c-point__head[data-fade] > .c-point__label,
  .c-point__head[data-fade] > .c-point__title,
  .c-point__head[data-fade] > .c-point__lead {
    opacity: 0;
    transform: translateY(calc(var(--ratio) * 1.5rem));
    transition:
      opacity var(--fade-duration) var(--fade-easing),
      transform var(--fade-duration) var(--fade-easing);
    transition-delay: var(--fade-delay);
  }
  @media (prefers-reduced-motion: reduce) {
    .c-point__head[data-fade] > .c-point__label,
    .c-point__head[data-fade] > .c-point__title,
    .c-point__head[data-fade] > .c-point__lead {
      transition: none;
      transform: none;
    }
  }
  .c-point__head[data-fade] > .c-point__title {
    transition-delay: calc(var(--fade-delay) + 0.2s);
  }
  .c-point__head[data-fade] > .c-point__lead {
    transition-delay: calc(var(--fade-delay) + 0.4s);
  }
  .c-point__head[data-fade].is-visible > .c-point__label,
  .c-point__head[data-fade].is-visible > .c-point__title,
  .c-point__head[data-fade].is-visible > .c-point__lead {
    opacity: 1;
    transform: none;
  }
  .c-point__head + .c-point__body {
    margin-top: calc(var(--ratio) * 2.5rem);
  }
  @media (width<=767.98px) {
    .c-point__head + .c-point__body {
      margin-top: calc(var(--ratio) * 1.25rem);
    }
  }
  .c-point__body {
    width: 100%;
    max-height: var(--point-closed);
    mask-image: linear-gradient(
      #000 calc(100% - calc(var(--ratio) * 3.75rem)),
      transparent
    );
    transition: mask-size 0.3s;
    position: relative;
    overflow: clip;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
  .c-point.is-open .c-point__body {
    max-height: none;
  }
  .c-point.is-open .c-point__body,
  .c-point.is-animating .c-point__body {
    mask-size: 100% calc(100% + calc(var(--ratio) * 3.75rem));
  }
  .c-point.is-animating .c-point__body {
    max-height: none;
  }
  .c-point__grid {
    grid-template-columns: calc(var(--ratio) * 33.125rem) calc(
        var(--ratio) * 33.125rem
      );
    gap: calc(var(--ratio) * 1.875rem) calc(var(--ratio) * 2.5rem);
    align-items: start;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-point__grid {
      gap: calc(var(--ratio) * 1.25rem);
      flex-direction: column;
      display: flex;
    }
  }
  .c-point__col {
    gap: calc(var(--ratio) * 1.875rem);
    flex-direction: column;
    min-width: 0;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-point__col {
      display: contents;
    }
  }
  .c-point__col--text {
    gap: calc(var(--ratio) * 2.5rem);
  }
  .c-point__sub {
    gap: calc(var(--ratio) * 1.125rem);
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-point__sub {
      gap: calc(var(--ratio) * 0.625rem);
    }
  }
  .c-point__sub[data-fade] {
    opacity: 0;
    transform: translateY(calc(var(--ratio) * 1.5rem));
    transition:
      opacity var(--fade-duration) var(--fade-easing),
      transform var(--fade-duration) var(--fade-easing);
    transition-delay: var(--fade-delay);
  }
  @media (prefers-reduced-motion: reduce) {
    .c-point__sub[data-fade] {
      transition: none;
      transform: none;
    }
  }
  .c-point__sub[data-fade].is-visible {
    opacity: 1;
    transform: none;
  }
  .c-point__sub-title {
    padding-left: calc(var(--ratio) * 1.125rem);
    font-size: var(--fs-l);
    font-weight: 700;
    line-height: var(--lh-body);
    color: var(--color-text);
    position: relative;
  }
  .c-point__sub-title:before {
    top: calc(var(--ratio) * 0.875rem);
    width: calc(var(--ratio) * 0.5rem);
    height: calc(var(--ratio) * 0.5rem);
    content: '';
    background: var(--color-primary);
    border-radius: 50%;
    position: absolute;
    left: 0;
  }
  @media (width<=767.98px) {
    .c-point__sub-title {
      padding-left: calc(var(--ratio) * 0.75rem);
    }
    .c-point__sub-title:before {
      top: calc(var(--ratio) * 0.65625rem);
      width: calc(var(--ratio) * 0.375rem);
      height: calc(var(--ratio) * 0.375rem);
    }
  }
  .c-point__text p + p {
    margin-top: 0;
  }
  .c-point__list {
    padding-left: calc(var(--ratio) * 1rem);
    margin: calc(var(--ratio) * 1.5rem) 0;
    list-style: none;
  }
  .c-point__list > li {
    position: relative;
  }
  .c-point__list > li:before {
    top: calc((1em * var(--lh-body) - calc(var(--ratio) * 0.375rem)) / 2);
    left: calc(var(--ratio) * -0.75rem);
    width: calc(var(--ratio) * 0.25rem);
    height: calc(var(--ratio) * 0.25rem);
    content: '';
    background: currentColor;
    border-radius: 50%;
    position: absolute;
  }
  .c-point__figure {
    width: calc(var(--ratio) * 33.125rem);
    height: calc(var(--ratio) * 18.75rem);
    background: var(--color-mint);
    border: var(--border-w) solid var(--color-white);
    border-radius: var(--radius-m);
    background-clip: padding-box;
    overflow: hidden;
  }
  @media (width<=767.98px) {
    .c-point__figure {
      width: 100%;
      height: calc(var(--ratio) * 12.375rem);
      border-width: calc(var(--ratio) * 0.0825rem);
      border-radius: calc(var(--ratio) * 0.825rem);
      order: -1;
    }
  }
  .c-point__figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .c-point__graph {
    width: calc(var(--ratio) * 33.125rem);
  }
  @media (width<=767.98px) {
    .c-point__graph {
      order: 1;
      width: 100%;
    }
  }
  .c-point__graph img {
    width: 100%;
    height: auto;
  }
  .c-point__refs {
    gap: calc(var(--ratio) * 0.625rem);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: var(--lh-body);
    color: var(--color-text);
    align-items: flex-start;
    display: flex;
  }
  .c-point__refs-label {
    flex: none;
  }
  .c-point__refs-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (width<=767.98px) {
    .c-point__refs-list {
      gap: calc(var(--ratio) * 0.5rem);
      width: calc(var(--ratio) * 18.75rem);
      flex-direction: column;
      display: flex;
    }
  }
  .c-point__toggle {
    margin-top: calc(var(--ratio) * 1.25rem);
    transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @media (width<=767.98px) {
    .c-point__toggle {
      align-self: center;
    }
  }
  .c-point.is-open .c-point__toggle {
    margin-top: calc(var(--ratio) * 2.5rem);
  }
  @media (width<=767.98px) {
    .c-point.is-open .c-point__toggle {
      margin-top: calc(var(--ratio) * 1.25rem);
    }
  }
  .c-lottie {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .c-lottie__poster,
  .c-lottie__layer {
    display: block;
    position: absolute;
    inset: 0;
  }
  .c-lottie__layer--loop {
    visibility: hidden;
  }
  .c-lottie__layer svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .c-lottie.is-ready .c-lottie__poster,
  .c-lottie.is-loop .c-lottie__layer--intro {
    visibility: hidden;
  }
  .c-lottie.is-loop .c-lottie__layer--loop {
    visibility: visible;
  }
  .c-history {
    padding-bottom: calc(var(--ratio) * 5rem);
    background: var(--color-bg-mint);
  }
  @media (width<=767.98px) {
    .c-history {
      padding-bottom: calc(var(--ratio) * 2.5rem);
    }
  }
  .c-history__panel {
    width: calc(100% - calc(var(--ratio) * 5rem));
    max-width: calc(var(--ratio) * 85rem);
    min-height: calc(var(--ratio) * 61.4375rem);
    padding: calc(var(--ratio) * 7.5rem) 0;
    background: var(--color-primary-panel)
      url(/corporate/xylitol/assets/img/history_bg_pc.svg) center/100% 100%
      no-repeat;
    border-radius: calc(var(--ratio) * 3.75rem);
    margin-inline: auto;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-history__panel {
      width: calc(100% - calc(var(--ratio) * 2.5rem));
      min-height: 0;
      padding: calc(var(--ratio) * 6.25rem) 0;
      background-color: var(--color-primary-mid);
      border-radius: calc(var(--ratio) * 2.5rem);
      background-image: url(/corporate/xylitol/assets/img/history_bg_sp.svg);
      background-size: 100% 100%;
    }
  }
  .c-history__deco {
    top: calc(var(--ratio) * 4.5625rem);
    left: calc(var(--ratio) * 4.375rem);
    width: calc(var(--ratio) * 12.75rem);
    pointer-events: none;
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-history__deco {
      display: none;
    }
  }
  .c-history__deco img {
    width: 100%;
    height: auto;
  }
  .c-history__head {
    position: relative;
  }
  .c-history__panel[data-fade] .c-section-head__title,
  .c-history__panel[data-fade] .c-history__timeline {
    opacity: 0;
    transform: translateY(calc(var(--ratio) * 1.5rem));
    transition:
      opacity var(--fade-duration) var(--fade-easing),
      transform var(--fade-duration) var(--fade-easing);
    transition-delay: var(--fade-delay);
  }
  @media (prefers-reduced-motion: reduce) {
    .c-history__panel[data-fade] .c-section-head__title,
    .c-history__panel[data-fade] .c-history__timeline {
      transition: none;
      transform: none;
    }
  }
  .c-history__panel[data-fade] .c-history__timeline {
    transition-delay: calc(
      var(--fade-delay) + var(--fade-duration) * 0.7 + 0.4s
    );
  }
  .c-history__panel[data-fade].is-visible .c-section-head__title,
  .c-history__panel[data-fade].is-visible .c-history__timeline {
    opacity: 1;
    transform: none;
  }
  .c-history__timeline {
    height: calc(var(--ratio) * 33.3125rem);
    margin: calc(var(--ratio) * 5.75rem) 0 0;
    padding: 0;
    list-style: none;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-history__timeline {
      gap: calc(var(--ratio) * 0.875rem);
      height: auto;
      padding-left: calc(var(--ratio) * 2.5625rem);
      margin: calc(var(--ratio) * 3.75rem) 0 calc(var(--ratio) * 3.125rem);
      flex-direction: column;
      display: flex;
    }
  }
  .c-history__timeline:before,
  .c-history__timeline:after {
    width: calc(var(--ratio) * 0.1875rem);
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  .c-history__timeline:before {
    height: calc(var(--ratio) * 30.1875rem);
    background: var(--color-white);
    top: 0;
  }
  @media (width<=767.98px) {
    .c-history__timeline:before {
      left: calc(var(--ratio) * 0.4375rem);
      height: 100%;
      transform: none;
    }
  }
  .c-history__timeline:after {
    top: calc(var(--ratio) * 30.1875rem);
    height: calc(var(--ratio) * 3.125rem);
  }
  @media (width<=767.98px) {
    .c-history__timeline:after {
      top: 100%;
      left: calc(var(--ratio) * 0.4375rem);
      transform: none;
    }
  }
  .c-history__timeline:after {
    background: repeating-linear-gradient(
      180deg,
      var(--color-white) 0 calc(var(--ratio) * 0.25rem),
      transparent calc(var(--ratio) * 0.25rem) calc(var(--ratio) * 0.5rem)
    );
  }
  .c-history__item {
    gap: calc(var(--ratio) * 1.25rem);
    width: calc(var(--ratio) * 29.125rem);
    padding: calc(var(--ratio) * 0.75rem) calc(var(--ratio) * 1.25rem);
    background: var(--color-white);
    border-radius: var(--radius-m);
    align-items: center;
    display: flex;
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-history__item {
      gap: calc(var(--ratio) * 0.25rem);
      width: 100%;
      padding: calc(var(--ratio) * 0.625rem) calc(var(--ratio) * 0.875rem);
      border-radius: calc(var(--ratio) * 0.8125rem);
      flex-direction: column;
      align-items: flex-start;
      position: relative;
    }
  }
  .c-history__item:before,
  .c-history__item:after {
    content: '';
    position: absolute;
  }
  .c-history__item:before {
    top: calc(var(--ratio) * 2.5625rem);
    width: calc(var(--ratio) * 5.25rem);
    height: calc(var(--ratio) * 0.125rem);
    background: var(--color-white);
  }
  @media (width<=767.98px) {
    .c-history__item:before {
      top: calc(var(--ratio) * 2.8125rem);
      right: auto;
      left: calc(var(--ratio) * -1.875rem);
      width: calc(var(--ratio) * 1.875rem);
    }
  }
  .c-history__item:after {
    top: calc(var(--ratio) * 2rem);
    width: calc(var(--ratio) * 1.25rem);
    height: calc(var(--ratio) * 1.25rem);
    background: var(--color-white);
    border-radius: 50%;
  }
  @media (width<=767.98px) {
    .c-history__item:after {
      top: calc(var(--ratio) * 2.375rem);
      right: auto;
      left: calc(var(--ratio) * -2.5625rem);
      width: calc(var(--ratio) * 0.875rem);
      height: calc(var(--ratio) * 0.875rem);
    }
  }
  .c-history__item:nth-child(odd) {
    left: 0;
  }
  .c-history__item:nth-child(odd):before {
    right: calc(var(--ratio) * -5.25rem);
  }
  .c-history__item:nth-child(odd):after {
    right: calc(var(--ratio) * -5.875rem);
  }
  .c-history__item:nth-child(2n) {
    right: 0;
  }
  .c-history__item:nth-child(2n):before {
    left: calc(var(--ratio) * -5.25rem);
  }
  .c-history__item:nth-child(2n):after {
    left: calc(var(--ratio) * -5.875rem);
  }
  .c-history__item:first-child {
    top: calc(var(--ratio) * 0rem);
  }
  .c-history__item:nth-child(2) {
    top: calc(var(--ratio) * 4.1875rem);
  }
  .c-history__item:nth-child(3) {
    top: calc(var(--ratio) * 8.375rem);
  }
  .c-history__item:nth-child(4) {
    top: calc(var(--ratio) * 12.5625rem);
  }
  .c-history__item:nth-child(5) {
    top: calc(var(--ratio) * 16.75rem);
  }
  .c-history__item:nth-child(6) {
    top: calc(var(--ratio) * 20.9375rem);
  }
  @media (width<=767.98px) {
    .c-history__item:nth-child(n) {
      top: auto;
      left: auto;
      right: auto;
    }
    .c-history__item:nth-child(n):before {
      top: calc(var(--ratio) * 2.8125rem);
      right: auto;
      left: calc(var(--ratio) * -1.875rem);
    }
    .c-history__item:nth-child(n):after {
      top: calc(var(--ratio) * 2.375rem);
      right: auto;
      left: calc(var(--ratio) * -2.5625rem);
    }
  }
  .c-history__year {
    gap: calc(var(--ratio) * 0.375rem);
    width: calc(var(--ratio) * 7.6875rem);
    font-family: var(--font-family-en);
    font-size: var(--fs-en-xl);
    color: var(--color-primary);
    flex: none;
    align-items: baseline;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-history__year {
      width: auto;
    }
  }
  .c-history__year small {
    font-family: var(--font-family);
    font-size: calc(var(--ratio) * 1.625rem);
  }
  @media (width<=767.98px) {
    .c-history__year small {
      font-size: calc(var(--ratio) * 0.875rem);
    }
  }
  .c-history__year small {
    font-weight: 700;
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-history__text {
    width: calc(var(--ratio) * 17.6875rem);
  }
  @media (width<=767.98px) {
    .c-history__text {
      width: 100%;
    }
  }
  .c-history__text {
    font-size: var(--fs-m);
    font-weight: 500;
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-history__em {
    color: var(--color-accent);
    font-style: normal;
    font-weight: 700;
  }
  .c-history__link {
    color: inherit;
    white-space: nowrap;
    text-decoration: underline;
  }
  .c-history__link svg {
    width: calc(var(--ratio) * 0.75rem);
    height: calc(var(--ratio) * 0.59375rem);
    margin-left: calc(var(--ratio) * 0.375rem);
    vertical-align: middle;
    fill: none;
  }
  .c-bnr {
    padding: calc(var(--ratio) * 5rem) 0;
    background: var(--color-white);
    position: relative;
  }
  @media (width<=767.98px) {
    .c-bnr {
      padding: calc(var(--ratio) * 2.5rem) 0 calc(var(--ratio) * 0.625rem);
    }
  }
  .c-bnr__inner {
    position: relative;
  }
  .c-bnr__link {
    width: calc(var(--ratio) * 33.75rem);
    margin-inline: auto;
    transition: opacity 0.2s;
    display: block;
  }
  @media (width<=767.98px) {
    .c-bnr__link {
      width: 100%;
    }
  }
  .c-bnr__link:hover,
  .c-bnr__link:focus-visible {
    opacity: 0.8;
  }
  .c-bnr__link img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-bnr__note {
    padding-right: calc(var(--ratio) * 6.25rem);
    margin-top: calc(var(--ratio) * 1.25rem);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--color-text);
    text-align: right;
  }
  @media (width<=767.98px) {
    .c-bnr__note {
      text-align: left;
      text-indent: -1em;
      padding-left: 1em;
      padding-right: 0;
    }
  }
  .c-bnr__top-slot {
    top: calc(var(--ratio) * 9.625rem);
    right: calc(var(--ratio) * -4.0625rem);
    width: calc(var(--ratio) * 2.8125rem);
    height: calc(var(--ratio) * 4.1875rem);
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-bnr__top-slot {
      margin: calc(var(--ratio) * 0.625rem) auto 0;
      position: static;
    }
  }
  .c-bnr__top {
    width: calc(var(--ratio) * 2.8125rem);
    font-family: var(--font-family-en);
    font-size: var(--fs-en-s);
    color: var(--color-primary-dark);
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
      opacity 0.3s,
      visibility 0.3s;
    display: flex;
  }
  .c-bnr__top.is-hidden {
    visibility: hidden;
    opacity: 0;
  }
  .c-bnr__top.is-fixed {
    bottom: calc(var(--ratio) * 2.5rem);
    z-index: 10;
    position: fixed;
  }
  @media (width<=767.98px) {
    .c-bnr__top.is-fixed {
      right: calc(var(--ratio) * 1rem);
      bottom: calc(var(--ratio) * 1rem);
    }
  }
  .c-bnr__top-icon {
    width: calc(var(--ratio) * 2.8125rem);
    height: calc(var(--ratio) * 2.8125rem);
    color: var(--color-primary);
    place-items: center;
    display: grid;
    position: relative;
  }
  .c-bnr__top-icon > picture,
  .c-bnr__top-icon > picture img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  .c-bnr__top-icon > svg:last-child {
    width: calc(var(--ratio) * 0.9375rem);
    height: calc(var(--ratio) * 0.625rem);
    margin-top: calc(var(--ratio) * -0.25rem);
    fill: none;
    position: relative;
    transform: rotate(-90deg);
  }
  .c-footer {
    background: var(--color-mint-light);
  }
  .c-footer__nav {
    padding: calc(var(--ratio) * 3rem) var(--space-m)
      calc(var(--ratio) * 2.4375rem);
  }
  @media (width<=767.98px) {
    .c-footer__nav {
      padding: calc(var(--ratio) * 2.5rem) var(--space-m)
        calc(var(--ratio) * 2.5rem);
    }
  }
  .c-footer__list {
    gap: calc(var(--ratio) * 0.625rem) calc(var(--ratio) * 2.5rem);
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-footer__list {
      gap: calc(var(--ratio) * 1rem);
      flex-direction: column;
      align-items: center;
    }
  }
  .c-footer__list > li {
    display: flex;
  }
  .c-footer__link {
    gap: calc(var(--ratio) * 0.625rem);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: var(--lh-body);
    color: var(--color-text);
    align-items: center;
    text-decoration: none;
    display: inline-flex;
  }
  .c-footer__link:hover,
  .c-footer__link:focus-visible {
    text-decoration: underline;
  }
  .c-footer__link svg {
    width: calc(var(--ratio) * 0.25rem);
    height: calc(var(--ratio) * 0.5rem);
    fill: none;
  }
  @media (width<=767.98px) {
    .c-footer__link svg {
      width: calc(var(--ratio) * 0.1875rem);
      height: calc(var(--ratio) * 0.375rem);
    }
  }
  .c-footer__copyright {
    padding: calc(var(--ratio) * 0.375rem) var(--space-m)
      calc(var(--ratio) * 0.5rem);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--color-white);
    text-align: center;
    background: var(--color-primary-mid);
  }
  .c-opening {
    background-color: var(--color-bg);
    background-image:
      url(/corporate/xylitol/assets/img/common_bg_pc.svg), var(--gradient-bg);
    background-repeat: repeat-y, no-repeat;
    background-position:
      center calc(var(--ratio) * -16.75rem),
      0 0;
    background-size:
      calc(var(--ratio) * 125rem) calc(var(--ratio) * 19.0625rem),
      100% 100%;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-opening {
      background-image:
        url(/corporate/xylitol/assets/img/common_bg_sp.svg), var(--gradient-bg);
      background-position:
        center calc(var(--ratio) * -5rem),
        0 0;
      background-size:
        calc(var(--ratio) * 62.5rem) calc(var(--ratio) * 10.1563rem),
        100% 100%;
    }
  }
}
@layer utilities {
  .u-visually-hidden {
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .u-sp-only {
    display: none;
  }
  @media (width<=767.98px) {
    .u-sp-only {
      display: revert;
    }
    .u-pc-only {
      display: none;
    }
  }
}