@layer tokens {
  :root {
    --px: clamp(calc(0.533rem / 16), calc(100vw / 1440), calc(1.111rem / 16));
  }
  @media (width<=767.98px) {
    :root {
      --px: clamp(calc(0.821rem / 16), calc(100vw / 390), calc(1.969rem / 16));
    }
  }
  :root {
    --color-primary: #009639;
    --color-primary-dark: #008942;
    --color-green-deep: #007a48;
    --color-heading-deep: #006c34;
    --color-graph: #0ba857;
    --color-accent: #ff005b;
    --color-marker: #fffa64;
    --color-watermark: #53bfc44d;
    --color-text: #222;
    --color-text-sub: #323232;
    --color-white: #fff;
    --color-black: #000;
    --color-border: #d9d9d9;
    --color-bg: #dafcff;
    --color-bg-pale: #f5feff;
    --color-panel: #a0e1e4;
    --color-faq-bg: #95dee0;
    --color-illust-bg: #cafdfd;
    --color-photo-bg: #f0f0f0;
    --color-flow-icon-bg: #f4f8f5;
    --color-line-light: #ffffff80;
    --color-line-gray: #ccc;
    --color-line-mint: #cee1d3;
    --color-line-pale: #cfead5;
    --color-control-border: #dedfdf;
    --color-footer-line: #e3e3e3;
    --color-step-1: var(--color-green-deep);
    --color-step-2: var(--color-primary);
    --color-step-3: #00b846;
    --color-step-4: #51bc33;
    --color-step-5: #92be3f;
    --color-footer-nav: #b6f3f6;
    --color-footer-copyright: #01cad6;
    --color-pagetop: #167554;
    --color-overlay: #2222224d;
    --color-modal-backdrop: #222222a6;
    --color-hint-bg: #0009;
    --font-family:
      'Zen Kaku Gothic New', -apple-system, 'BlinkMacSystemFont', 'Segoe UI',
      'Hiragino Sans', 'Noto Sans JP', sans-serif;
    --font-family-en: 'Poppins', var(--font-family);
    --fs-xs: max(12 * var(--px), 10rem/16);
  }
  @media (width<=767.98px) {
    :root {
      --fs-xs: max(10 * var(--px), 10rem/16);
    }
  }
  :root {
    --fs-s: max(14 * var(--px), 10rem/16);
  }
  @media (width<=767.98px) {
    :root {
      --fs-s: max(12 * var(--px), 10rem/16);
    }
  }
  :root {
    --fs-m: max(16 * var(--px), 10rem/16);
  }
  @media (width<=767.98px) {
    :root {
      --fs-m: calc(14 * var(--px));
    }
  }
  :root {
    --fs-l: calc(24 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --fs-l: calc(18 * var(--px));
    }
  }
  :root {
    --fs-cta: calc(19 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --fs-cta: calc(16 * var(--px));
    }
  }
  :root {
    --fs-xl: calc(40 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --fs-xl: calc(24 * var(--px));
    }
  }
  :root {
    --fs-2xl: calc(48 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --fs-2xl: calc(34 * var(--px));
    }
  }
  :root {
    --fs-watermark: calc(100 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --fs-watermark: calc(56 * var(--px));
    }
  }
  :root {
    --lh-body: 1.8;
    --lh-tight: 1.4;
    --space-m: calc(24 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --space-m: calc(20 * var(--px));
    }
  }
  :root {
    --space-xl: calc(64 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --space-xl: calc(40 * var(--px));
    }
  }
  :root {
    --gutter: calc(50 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --gutter: calc(20 * var(--px));
    }
  }
  :root {
    --container-max: calc(calc(1100 * var(--px)) + var(--gutter) * 2);
    --container-wide: calc(calc(1340 * var(--px)) + var(--gutter) * 2);
    --radius-s: calc(8 * var(--px));
    --radius-m: calc(16 * var(--px));
    --radius-l: calc(30 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --radius-l: calc(20 * var(--px));
    }
  }
  :root {
    --radius-xl: calc(60 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --radius-xl: calc(30 * var(--px));
    }
  }
  :root {
    --radius-pill: calc(30 * var(--px));
    --shadow-panel: 0 calc(4 * var(--px)) calc(22.85 * var(--px)) #0000000f;
    --border-w: calc(1rem / 16);
    --header-h: calc(90 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --header-h: calc(60 * var(--px));
    }
  }
  :root {
    --graph-stroke: calc(28 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --graph-stroke: calc(18 * var(--px));
    }
  }
  :root {
    --faq-collapsed: calc(520 * var(--px));
    --z-fixed-cta: 90;
    --z-header: 100;
    --duration: 0.3s;
    --easing: ease;
    --modal-duration: 0.3s;
    --reveal-duration: 0.8s;
    --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-distance: calc(30 * var(--px));
  }
  @media (width<=767.98px) {
    :root {
      --reveal-distance: calc(20 * var(--px));
    }
  }
}
@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;
  }
  @media (width<=767.98px) {
    html {
      scroll-padding-top: var(--header-h);
    }
  }
  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(--gutter);
    margin-inline: auto;
  }
  .l-container--wide {
    max-width: var(--container-wide);
  }
  .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-section {
    padding-block: calc(40 * var(--px)) calc(160 * var(--px));
    background-color: var(--section-bg, var(--color-bg));
    isolation: isolate;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-section {
      padding-block: calc(40 * var(--px)) calc(120 * var(--px));
    }
  }
  .c-section:after {
    z-index: -1;
    height: calc(222 * var(--px));
    pointer-events: none;
    content: '';
    background-color: var(--section-dots, var(--color-bg));
    mask: url(/products/brand/xylitol/campaign/project/assets/img/common_bg_dots.svg)
      center bottom/calc(2400 * var(--px)) 100% no-repeat;
    position: absolute;
    inset: auto 0 0;
  }
  @media (width<=767.98px) {
    .c-section:after {
      height: calc(111 * var(--px));
      mask-size: calc(1200 * var(--px)) 100%;
    }
  }
  .c-section--trees {
    --section-tree-left: url(/products/brand/xylitol/campaign/project/assets/img/common_bg_tree_left.svg);
    --section-tree-right: url(/products/brand/xylitol/campaign/project/assets/img/common_bg_tree_right.svg);
  }
  .c-section--trees:before {
    z-index: -1;
    height: calc(530 * var(--px));
    pointer-events: none;
    content: '';
    background:
      var(--section-tree-left) left calc(-280 * var(--px))
        bottom/calc(630 * var(--px)) 100% no-repeat,
      var(--section-tree-right) right calc(-280 * var(--px))
        bottom/calc(630 * var(--px)) 100% no-repeat;
    position: absolute;
    inset: auto 0 0;
  }
  .c-section--trees:after {
    z-index: -2;
  }
  @media (width<=767.98px) {
    .c-section--trees:before {
      height: calc(265 * var(--px));
      background-position:
        left calc(-189 * var(--px)) bottom,
        right calc(-191 * var(--px)) bottom;
      background-size:
        calc(315 * var(--px)) 100%,
        calc(315 * var(--px)) 100%;
    }
  }
  .c-section-head {
    gap: calc(24 * var(--px));
    flex-direction: column;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-section-head {
      gap: calc(6 * var(--px));
    }
  }
  .c-section-head__en {
    font-family: var(--font-family-en);
    font-size: var(--fs-watermark);
    color: var(--color-watermark);
    margin-block: -0.15em;
    font-weight: 600;
    line-height: 1;
  }
  @media (width<=767.98px) {
    .c-section-head__en {
      margin-block: 0;
      line-height: 0.95;
    }
  }
  .c-section-head__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-text);
    text-align: center;
  }
  @media (width<=767.98px) {
    .c-section-head__title {
      letter-spacing: -0.02em;
    }
  }
  .c-section-head__em {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    background: linear-gradient(
        transparent calc(100% - calc(26 * var(--px))),
        var(--color-marker) 0,
        var(--color-marker) calc(100% - calc(4 * var(--px))),
        transparent 0
      )
      no-repeat;
    font-style: normal;
  }
  @media (width<=767.98px) {
    .c-section-head__em {
      background: linear-gradient(
          transparent calc(100% - calc(24 * var(--px))),
          var(--color-marker) 0,
          var(--color-marker) calc(100% - calc(4 * var(--px))),
          transparent 0
        )
        no-repeat;
    }
  }
  .c-section-head__em--plain {
    background: 0 0;
  }
  .c-button {
    gap: calc(12 * var(--px));
    padding: calc(16 * var(--px)) calc(24 * var(--px)) calc(16 * var(--px))
      calc(32 * var(--px));
    font-size: var(--fs-cta);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-white);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: opacity var(--duration) var(--easing);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
  }
  .c-button:hover,
  .c-button:focus-visible {
    opacity: 0.8;
  }
  .c-button__icon {
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
    padding: calc(5 * var(--px));
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-radius: calc(4 * var(--px));
    flex-shrink: 0;
    place-items: center;
    display: grid;
  }
  .c-button__icon svg {
    width: 100%;
    height: 100%;
  }
  .c-header {
    z-index: var(--z-header);
    background: var(--color-white);
    border-bottom: var(--border-w) solid var(--color-border);
    position: relative;
  }
  @media (width<=767.98px) {
    .c-header {
      position: sticky;
      top: 0;
    }
  }
  .c-header__inner {
    height: var(--header-h);
    padding-inline: var(--gutter);
    grid-template-columns: auto auto auto;
    grid-template-areas: 'xylitol nav lotte';
    justify-content: space-between;
    align-items: center;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-header__inner {
      column-gap: calc(40 * var(--px));
      grid-template-columns: auto auto 1fr auto;
      grid-template-areas: 'xylitol lotte.toggle';
    }
  }
  .c-header__logos {
    display: contents;
  }
  .c-header__logo {
    display: block;
  }
  .c-header__logo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-header__logo--xylitol {
    width: calc(200 * var(--px));
    grid-area: xylitol;
  }
  @media (width<=767.98px) {
    .c-header__logo--xylitol {
      width: calc(120 * var(--px));
    }
  }
  .c-header__logo--lotte {
    width: calc(100 * var(--px));
    grid-area: lotte;
  }
  @media (width<=767.98px) {
    .c-header__logo--lotte {
      width: calc(64 * var(--px));
    }
  }
  .c-header__toggle {
    display: none;
  }
  @media (width<=767.98px) {
    .c-header__toggle {
      width: calc(40 * var(--px));
      height: calc(40 * var(--px));
      cursor: pointer;
      background: var(--color-primary);
      border-radius: var(--radius-s);
      border: 0;
      grid-area: toggle;
      padding: 0;
      display: block;
      position: relative;
    }
  }
  .c-header__toggle-bar,
  .c-header__toggle-bar:before,
  .c-header__toggle-bar:after {
    width: calc(20 * var(--px));
    height: calc(2 * var(--px));
    background: var(--color-white);
    border-radius: calc(1 * var(--px));
    transition:
      transform var(--duration) var(--easing),
      background-color var(--duration) var(--easing);
    position: absolute;
    left: 50%;
    translate: -50%;
  }
  .c-header__toggle-bar {
    margin-top: calc(-1 * var(--px));
    top: 50%;
  }
  .c-header__toggle-bar:before,
  .c-header__toggle-bar:after {
    content: '';
  }
  .c-header__toggle-bar:before {
    top: calc(-7 * var(--px));
  }
  .c-header__toggle-bar:after {
    top: calc(7 * var(--px));
  }
  .c-header.is-open .c-header__toggle-bar {
    background-color: #0000;
  }
  .c-header.is-open .c-header__toggle-bar:before {
    transform: translateY(calc(7 * var(--px))) rotate(45deg);
  }
  .c-header.is-open .c-header__toggle-bar:after {
    transform: translateY(calc(-7 * var(--px))) rotate(-45deg);
  }
  .c-header__nav {
    grid-area: nav;
  }
  @media (width<=767.98px) {
    .c-header__nav {
      visibility: hidden;
      height: calc(100dvh - var(--header-h));
      overscroll-behavior: contain;
      background: var(--color-overlay);
      opacity: 0;
      transition:
        opacity var(--duration) var(--easing),
        visibility var(--duration) var(--easing);
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
    }
    .c-header.is-open .c-header__nav {
      visibility: visible;
      opacity: 1;
    }
  }
  .c-header__list {
    gap: calc(30 * var(--px));
    align-items: center;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-header__list {
      max-height: 100%;
      padding: calc(32 * var(--px)) calc(26 * var(--px)) calc(40 * var(--px));
      background: var(--color-white);
      border-radius: 0 0 var(--radius-xl) var(--radius-xl);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      overflow-y: auto;
    }
  }
  .c-header__link {
    gap: calc(4 * var(--px));
    padding-block: calc(8 * var(--px));
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-text);
    text-align: center;
    transition: color var(--duration) var(--easing);
    align-items: center;
    text-decoration: none;
    display: flex;
  }
  .c-header__link:hover,
  .c-header__link:focus-visible {
    color: var(--color-primary);
  }
  @media (width<=767.98px) {
    .c-header__link {
      gap: calc(16 * var(--px));
      padding: calc(16 * var(--px)) calc(4 * var(--px));
      font-size: calc(14 * var(--px));
      text-align: left;
      border-bottom: var(--border-w) solid var(--color-border);
    }
    .c-header__link-text {
      flex: 1;
    }
  }
  .c-header__link-icon {
    width: calc(14 * var(--px));
    height: calc(14 * var(--px));
    color: var(--color-primary);
    flex-shrink: 0;
    place-items: center;
    display: grid;
  }
  .c-header__link-icon svg {
    width: 100%;
    height: 100%;
  }
  @media (width<=767.98px) {
    .c-header__link-icon {
      width: calc(24 * var(--px));
      height: calc(24 * var(--px));
      padding: calc(6 * var(--px));
      background: var(--color-white);
      border: var(--border-w) solid var(--color-border);
      border-radius: calc(4 * var(--px));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .c-header__nav,
    .c-header__toggle-bar,
    .c-header__toggle-bar:before,
    .c-header__toggle-bar:after {
      transition: none;
    }
  }
  @media (width<=767.98px) {
    .is-menu-open {
      overflow: hidden;
    }
  }
  .c-mv {
    background: var(--color-bg);
    isolation: isolate;
    position: relative;
    overflow: clip;
  }
  .c-mv:after {
    z-index: -1;
    width: calc(2000 * var(--px));
    height: calc(344 * var(--px));
    pointer-events: none;
    content: '';
    background: url(/products/brand/xylitol/campaign/project/assets/img/mv_bg_dots.svg)
      50%/100% 100% no-repeat;
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50%;
  }
  @media (width<=767.98px) {
    .c-mv:after {
      height: calc(467 * var(--px));
      background-image: url(/products/brand/xylitol/campaign/project/assets/img/mv_bg_dots_sp.svg);
    }
  }
  .c-mv__photos {
    top: calc(30 * var(--px));
    z-index: -1;
    gap: calc(51 * var(--px));
    padding: 0;
    list-style: none;
    display: flex;
    position: absolute;
    left: 50%;
    translate: -50%;
  }
  @media (width<=767.98px) {
    .c-mv__photos {
      top: calc(26 * var(--px));
      gap: calc(20 * var(--px));
    }
  }
  .c-mv__photo {
    --photo-y: 0;
    --photo-rotate: 0deg;
    width: calc(365 * var(--px));
    height: calc(237 * var(--px));
    background: var(--color-photo-bg);
    border-radius: var(--radius-m);
    transform: translateY(var(--photo-y)) rotate(var(--photo-rotate));
    flex-shrink: 0;
    overflow: hidden;
  }
  @media (width<=767.98px) {
    .c-mv__photo {
      width: calc(143 * var(--px));
      height: calc(93 * var(--px));
      border-radius: calc(6 * var(--px));
    }
  }
  .c-mv__photo picture,
  .c-mv__photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }
  .c-mv__photo:first-child {
    --photo-y: calc(24 * var(--px));
    --photo-rotate: -4deg;
  }
  .c-mv__photo:nth-child(2) {
    --photo-rotate: -2deg;
  }
  .c-mv__photo:nth-child(3) {
    --photo-rotate: 2deg;
  }
  .c-mv__photo:nth-child(4) {
    --photo-y: calc(24 * var(--px));
    --photo-rotate: 4deg;
  }
  @media (width<=767.98px) {
    .c-mv__photo:first-child {
      --photo-y: calc(9.5 * var(--px));
      --photo-rotate: -4.26deg;
    }
    .c-mv__photo:nth-child(2) {
      --photo-rotate: -1.92deg;
    }
    .c-mv__photo:nth-child(3) {
      --photo-rotate: 1.92deg;
    }
    .c-mv__photo:nth-child(4) {
      --photo-y: calc(9.5 * var(--px));
      --photo-rotate: 4.26deg;
    }
  }
  .c-mv__inner {
    grid-template: 'product gap-l title gap-r stats' auto 'product gap-l title gap-r cta' 1fr / calc(
        322 * var(--px)
      ) calc(34 * var(--px)) calc(540 * var(--px)) calc(14 * var(--px)) calc(
        350 * var(--px)
      );
    padding: calc(104 * var(--px)) calc(0 * var(--px)) calc(68 * var(--px))
      calc(8 * var(--px));
    justify-content: center;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-mv__inner {
      padding: calc(110 * var(--px)) calc(0 * var(--px)) calc(32 * var(--px));
      grid-template: 'title' 'cta' 'product' 'stats' / auto;
      justify-items: center;
    }
  }
  .c-mv__title {
    z-index: 0;
    width: calc(540 * var(--px));
    min-height: calc(540 * var(--px));
    padding-top: calc(52 * var(--px));
    text-align: center;
    grid-area: title;
    position: relative;
  }
  .c-mv__title:before,
  .c-mv__title:after {
    z-index: -1;
    pointer-events: none;
    content: '';
    background: 50%/100% 100% no-repeat;
    position: absolute;
  }
  .c-mv__title:before {
    top: calc(-49 * var(--px));
    width: calc(646 * var(--px));
    height: calc(646 * var(--px));
    background-image: url(/products/brand/xylitol/campaign/project/assets/img/mv_bg_tooth.svg);
    left: 50%;
    translate: -50%;
  }
  .c-mv__title:after {
    top: calc(4 * var(--px));
    left: calc(5 * var(--px));
    width: calc(415 * var(--px));
    height: calc(532 * var(--px));
    background-image: url(/products/brand/xylitol/campaign/project/assets/img/mv_bg_tooth_line.svg);
  }
  @media (width<=767.98px) {
    .c-mv__title {
      width: calc(369 * var(--px));
      min-height: 0;
      padding-top: calc(28 * var(--px));
    }
    .c-mv__title:before {
      top: calc(-33 * var(--px));
      width: calc(442 * var(--px));
      height: calc(442 * var(--px));
    }
    .c-mv__title:after {
      top: calc(1.5 * var(--px));
      left: calc(4 * var(--px));
      width: calc(281 * var(--px));
      height: calc(360 * var(--px));
    }
  }
  .c-mv__heading {
    width: calc(540 * var(--px));
    margin-inline: auto;
  }
  @media (width<=767.98px) {
    .c-mv__heading {
      width: calc(354 * var(--px));
    }
  }
  .c-mv__heading img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-mv__lead {
    margin-top: calc(-8 * var(--px));
    font-size: var(--fs-m);
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.94;
  }
  @media (width<=767.98px) {
    .c-mv__lead {
      line-height: 1.7;
    }
  }
  .c-mv__cta {
    z-index: 1;
    margin-top: calc(16 * var(--px));
    grid-area: cta;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-mv__cta {
      margin-top: calc(27 * var(--px));
    }
  }
  .c-mv__product {
    width: calc(328 * var(--px));
    height: calc(231 * var(--px));
    margin-top: calc(238 * var(--px));
    translate: calc(-7 * var(--px)) 0;
    grid-area: product;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-mv__product {
      width: calc(226 * var(--px));
      height: calc(159 * var(--px));
      margin-top: calc(18.5 * var(--px));
      translate: none;
    }
  }
  .c-mv__product img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-mv__dispenser {
    top: 0;
    left: calc(169 * var(--px));
    width: calc(159 * var(--px));
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-mv__dispenser {
      left: calc(116.5 * var(--px));
      width: calc(109.5 * var(--px));
    }
  }
  .c-mv__package {
    top: calc(7.5 * var(--px));
    left: calc(7.5 * var(--px));
    width: calc(145 * var(--px));
    position: absolute;
    rotate: -4deg;
  }
  @media (width<=767.98px) {
    .c-mv__package {
      top: calc(5 * var(--px));
      left: calc(5 * var(--px));
      width: calc(100 * var(--px));
    }
  }
  .c-mv__stats {
    gap: calc(6 * var(--px));
    margin-top: calc(257 * var(--px));
    flex-direction: column;
    grid-area: stats;
    align-items: flex-end;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-mv__stats {
      gap: calc(8 * var(--px));
      margin-top: calc(27 * var(--px));
    }
  }
  .c-mv__badges {
    gap: calc(10 * var(--px));
    display: flex;
  }
  .c-mv__badge {
    width: calc(110 * var(--px));
    height: calc(160 * var(--px));
    padding-top: calc(11 * var(--px));
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-radius: calc(240 * var(--px));
    box-shadow: var(--shadow-panel);
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  .c-mv__badge-label {
    gap: calc(8 * var(--px));
    font-size: max(14 * var(--px), 10rem/16);
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    line-height: 1;
    display: flex;
  }
  .c-mv__badge-icon {
    width: calc(50 * var(--px));
    height: calc(50 * var(--px));
    place-items: center;
    display: grid;
  }
  .c-mv__badge-icon img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-mv__badge-value {
    margin-top: calc(10 * var(--px));
    font-size: max(14 * var(--px), 10rem/16);
    white-space: nowrap;
    align-items: flex-end;
    font-weight: 700;
    line-height: 1;
    display: flex;
  }
  .c-mv__badge-num {
    font-family: var(--font-family-en);
    font-size: calc(40 * var(--px));
    letter-spacing: -0.04em;
    font-weight: 600;
    line-height: 0.8;
  }
  .c-mv__badge-num--s {
    font-size: calc(30 * var(--px));
    letter-spacing: -0.08em;
  }
  .c-mv__note {
    font-size: var(--fs-xs);
    color: var(--color-text);
    font-weight: 500;
    line-height: 1;
  }
  @media (width<=767.98px) {
    .c-mv__note {
      font-size: max(12 * var(--px), 10rem/16);
    }
  }
  .c-anchor {
    padding: calc(8 * var(--px)) var(--gutter);
    background: var(--color-primary-dark);
  }
  @media (width<=767.98px) {
    .c-anchor {
      padding: 0;
    }
  }
  .c-anchor__list {
    max-width: calc(1100 * var(--px));
    grid-template-columns: repeat(6, 1fr);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-anchor__list {
      gap: var(--border-w) 0;
      background: var(--color-line-light);
      grid-template-columns: repeat(3, 1fr);
      max-width: none;
    }
  }
  .c-anchor__item {
    background: var(--color-primary-dark);
  }
  @media (width<=767.98px) {
    .c-anchor__item {
      padding-block: calc(4 * var(--px));
    }
  }
  .c-anchor__link {
    height: calc(56 * var(--px));
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-white);
    text-align: center;
    transition: opacity var(--duration) var(--easing);
    place-items: center;
    text-decoration: none;
    display: grid;
  }
  .c-anchor__link:hover,
  .c-anchor__link:focus-visible {
    opacity: 0.7;
  }
  @media (width<=767.98px) {
    .c-anchor__link {
      height: calc(44 * var(--px));
    }
  }
  .c-anchor__item:not(:last-child) .c-anchor__link {
    border-right: var(--border-w) solid var(--color-line-light);
  }
  @media (width<=767.98px) {
    .c-anchor__item:nth-child(3n) .c-anchor__link {
      border-right: 0;
    }
  }
  .c-fixed-cta {
    right: 0;
    bottom: calc(119 * var(--px));
    z-index: var(--z-fixed-cta);
    gap: calc(10 * var(--px));
    padding: calc(16 * var(--px));
    font-size: var(--fs-cta);
    color: var(--color-white);
    white-space: nowrap;
    background: var(--color-accent);
    border-radius: var(--radius-s) 0 0 var(--radius-s);
    writing-mode: vertical-rl;
    transition:
      opacity var(--duration) var(--easing),
      translate var(--duration) var(--easing),
      visibility var(--duration);
    flex-direction: row;
    align-items: center;
    font-weight: 700;
    line-height: 1.05;
    text-decoration: none;
    display: flex;
    position: fixed;
  }
  .c-fixed-cta:hover,
  .c-fixed-cta:focus-visible {
    opacity: 0.8;
  }
  .c-fixed-cta.is-hidden {
    visibility: hidden;
    opacity: 0;
    translate: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .c-fixed-cta {
      transition: none;
    }
  }
  @media (width<=767.98px) {
    .c-fixed-cta {
      bottom: calc(93 * var(--px));
      gap: calc(6 * var(--px));
      padding: calc(8 * var(--px)) calc(10 * var(--px));
      font-size: calc(14 * var(--px));
    }
  }
  .c-fixed-cta__text {
    display: block;
  }
  .c-fixed-cta__icon {
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
    padding: calc(5 * var(--px));
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-radius: calc(4 * var(--px));
    place-items: center;
    display: grid;
  }
  .c-fixed-cta__icon svg {
    width: 100%;
    height: 100%;
  }
  @media (width<=767.98px) {
    .c-fixed-cta__icon {
      width: calc(15 * var(--px));
      height: calc(15 * var(--px));
      padding: calc(4 * var(--px));
    }
  }
  .c-about {
    --section-bg: var(--color-bg-pale);
    padding-block: calc(64 * var(--px)) calc(177 * var(--px));
  }
  @media (width<=767.98px) {
    .c-about {
      padding-block: calc(56 * var(--px)) calc(135 * var(--px));
    }
  }
  .c-about__inner {
    gap: var(--space-xl);
    flex-direction: column;
    display: flex;
  }
  .c-about__read {
    grid-template: 'lead illust' auto 'text illust' 1fr / calc(
        550 * var(--px)
      ) auto;
    gap: calc(32 * var(--px)) calc(54 * var(--px));
    padding-block-start: calc(40 * var(--px));
    display: grid;
  }
  @media (width<=767.98px) {
    .c-about__read {
      row-gap: calc(24 * var(--px));
      grid-template: 'lead' 'illust' 'text'/1fr;
      padding-block-start: calc(16 * var(--px));
    }
  }
  .c-about__lead {
    font-size: calc(32 * var(--px));
    grid-area: lead;
    font-weight: 700;
    line-height: 1.6;
  }
  @media (width<=767.98px) {
    .c-about__lead {
      font-size: calc(22 * var(--px));
    }
  }
  .c-about__lead-em {
    color: var(--color-primary);
  }
  .c-about__text {
    font-size: var(--fs-m);
    grid-area: text;
    font-weight: 700;
    line-height: 2.2;
  }
  .c-about__illust {
    width: calc(454 * var(--px));
    aspect-ratio: 454/376;
    grid-area: illust;
    margin-block-start: calc(-3 * var(--px));
    position: relative;
  }
  @media (width<=767.98px) {
    .c-about__illust {
      width: calc(320 * var(--px));
      justify-self: center;
      margin-block-start: 0;
    }
  }
  .c-about__illust picture {
    display: block;
  }
  .c-about__illust img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-about__kids {
    width: 86.8348%;
    position: absolute;
    top: 32.3564%;
    left: 9.5815%;
  }
  .c-about__habits {
    padding: 0;
    list-style: none;
  }
  .c-about__habit {
    top: var(--habit-y);
    left: var(--habit-x);
    z-index: 1;
    width: 22.0264%;
    position: absolute;
  }
  .c-about__habit--diet {
    --habit-x: 0%;
    --habit-y: 4.52128%;
    --item-x: 17.5%;
    --item-y: 64%;
    --item-w: 59.66%;
    --label-y: 18%;
  }
  .c-about__habit--fluoride {
    --habit-x: 26.2115%;
    --habit-y: 0%;
    --item-x: 24.5%;
    --item-y: 53%;
    --item-w: 48.29%;
    --label-y: 24%;
  }
  .c-about__habit--brush {
    --habit-x: 53.9648%;
    --habit-y: 0%;
    --item-x: 22.5%;
    --item-y: 47%;
    --item-w: 60.91%;
    --label-y: 28%;
  }
  .c-about__habit--checkup {
    --habit-x: 78.0837%;
    --habit-y: 4.52128%;
    --item-x: 13%;
    --item-y: 58%;
    --item-w: 73.76%;
    --label-y: 29%;
  }
  .c-about__habit-item {
    top: var(--item-y);
    left: var(--item-x);
    width: var(--item-w);
    position: absolute;
  }
  .c-about__habit-label {
    top: var(--label-y);
    font-size: calc(20 * var(--px));
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.3;
    position: absolute;
    left: 50%;
    translate: -50%;
  }
  @media (width<=767.98px) {
    .c-about__habit-label {
      font-size: calc(14 * var(--px));
    }
  }
  .c-about__closing {
    font-size: calc(32 * var(--px));
    color: var(--color-primary);
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
  }
  @media (width<=767.98px) {
    .c-about__closing {
      font-size: calc(20 * var(--px));
    }
  }
  .c-about__merit-wrap {
    margin-block: calc(83 * var(--px)) calc(64 * var(--px));
  }
  @media (width<=767.98px) {
    .c-about__merit-wrap {
      margin-block: calc(69 * var(--px)) calc(40 * var(--px));
      padding-inline: 0;
    }
  }
  .c-about-merit {
    gap: calc(56 * var(--px));
    padding: calc(64 * var(--px)) calc(120 * var(--px)) calc(80 * var(--px));
    background: var(--color-panel);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-panel);
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-about-merit {
      gap: calc(40 * var(--px));
      padding: calc(40 * var(--px)) calc(20 * var(--px)) calc(48 * var(--px));
    }
  }
  .c-about-merit__title {
    font-size: calc(30 * var(--px));
    color: var(--color-heading-deep);
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
  }
  @media (width<=767.98px) {
    .c-about-merit__title {
      font-size: calc(22 * var(--px));
    }
  }
  .c-about-merit__list {
    gap: calc(40 * var(--px));
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    padding: 0;
    list-style: none;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-about-merit__list {
      gap: calc(24 * var(--px));
      grid-template-columns: 1fr;
    }
  }
  .c-about-merit__item {
    gap: calc(14 * var(--px));
    flex-direction: column;
    display: flex;
  }
  .c-about-merit__target {
    gap: calc(10 * var(--px));
    font-size: calc(24 * var(--px));
    color: var(--color-text);
    align-items: center;
    padding-inline-start: calc(20 * var(--px));
    font-weight: 900;
    line-height: 1;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-about-merit__target {
      font-size: calc(20 * var(--px));
    }
  }
  .c-about-merit__icon {
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
    color: var(--color-white);
    flex-shrink: 0;
  }
  .c-about-merit__for {
    font-family: var(--font-family-en);
    margin-inline-end: calc(4 * var(--px));
    font-weight: 600;
  }
  .c-about-merit__card {
    gap: calc(24 * var(--px));
    padding: calc(20 * var(--px));
    background: var(--color-primary-dark);
    border-radius: calc(20 * var(--px));
    flex: 1;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-about-merit__card {
      gap: calc(16 * var(--px));
      padding: calc(13 * var(--px));
      border-radius: calc(13 * var(--px));
    }
  }
  .c-about-merit__illust {
    width: calc(190 * var(--px));
    flex-shrink: 0;
    display: block;
  }
  @media (width<=767.98px) {
    .c-about-merit__illust {
      width: calc(125 * var(--px));
    }
  }
  .c-about-merit__illust img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-about-merit__text {
    min-width: 0;
    font-size: var(--fs-m);
    color: var(--color-white);
    flex: 1;
    font-weight: 700;
    line-height: 2;
  }
  @media (width<=767.98px) {
    .c-about-merit__text {
      line-height: 1.8;
    }
  }
  .c-features {
    --section-dots: var(--color-bg-pale);
  }
  .c-features__intro {
    gap: calc(40 * var(--px));
    justify-content: space-between;
    align-items: flex-start;
    margin-block-start: calc(64 * var(--px));
    display: flex;
  }
  @media (width<=767.98px) {
    .c-features__intro {
      gap: calc(24 * var(--px));
      flex-direction: column;
      margin-block-start: calc(56 * var(--px));
    }
  }
  .c-features__intro-text {
    gap: calc(24 * var(--px));
    width: calc(530 * var(--px));
    flex-direction: column;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-features__intro-text {
      gap: calc(20 * var(--px));
      width: 100%;
    }
  }
  .c-features__intro-title {
    font-size: calc(32 * var(--px));
    font-weight: 700;
    line-height: 1.6;
  }
  @media (width<=767.98px) {
    .c-features__intro-title {
      font-size: calc(22 * var(--px));
    }
  }
  .c-features__intro-body {
    font-size: var(--fs-m);
    font-weight: 500;
    line-height: 2.2;
  }
  .c-features__photo {
    width: calc(530 * var(--px));
    border-radius: var(--radius-l);
    flex-shrink: 0;
    overflow: hidden;
  }
  @media (width<=767.98px) {
    .c-features__photo {
      border-radius: calc(13 * var(--px));
      width: 100%;
    }
  }
  .c-features__photo img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
  }
  .c-features__box-wrap {
    margin-block-start: var(--space-xl);
    padding-block-end: calc(40 * var(--px));
  }
  @media (width<=767.98px) {
    .c-features__box-wrap {
      padding-inline: 0;
    }
  }
  .c-features__box {
    min-height: calc(679 * var(--px));
    padding: calc(72 * var(--px)) calc(0 * var(--px)) calc(100 * var(--px))
      calc(120 * var(--px));
    background: var(--color-bg-pale);
    border-radius: var(--radius-xl);
    position: relative;
  }
  @media (width<=767.98px) {
    .c-features__box {
      gap: calc(40 * var(--px));
      min-height: 0;
      padding: calc(40 * var(--px)) calc(20 * var(--px));
      flex-direction: column;
      display: flex;
    }
  }
  .c-features__box-title {
    width: calc(681 * var(--px));
    font-size: calc(30 * var(--px));
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
  }
  @media (width<=767.98px) {
    .c-features__box-title {
      width: 100%;
      font-size: calc(22 * var(--px));
    }
  }
  .c-features__box-em {
    color: var(--color-primary);
  }
  .c-features__product {
    top: calc(151 * var(--px));
    left: calc(825 * var(--px));
    width: calc(486 * var(--px));
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-features__product {
      width: calc(310 * var(--px));
      margin-block-end: calc(-26 * var(--px));
      margin-inline: auto;
      position: static;
    }
  }
  .c-features__product img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-features__points {
    grid-template-columns: repeat(2, calc(330 * var(--px)));
    gap: calc(20 * var(--px)) calc(21 * var(--px));
    width: calc(681 * var(--px));
    margin: calc(40 * var(--px)) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-features__points {
      grid-template-columns: repeat(2, calc(167 * var(--px)));
      gap: calc(14 * var(--px)) 0;
      justify-content: space-between;
      width: 100%;
      margin: 0;
    }
  }
  .c-features__point {
    padding: calc(14 * var(--px)) calc(0 * var(--px)) calc(0 * var(--px))
      calc(14 * var(--px));
    display: flex;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-features__point {
      padding: calc(15 * var(--px)) calc(0 * var(--px)) calc(0 * var(--px))
        calc(15 * var(--px));
    }
    .c-features__point:last-child {
      width: calc(330 * var(--px));
      padding: calc(14 * var(--px)) calc(0 * var(--px)) calc(0 * var(--px))
        calc(14 * var(--px));
      grid-column: 1/-1;
      justify-self: center;
    }
  }
  .c-features__num {
    z-index: 1;
    width: calc(45 * var(--px));
    height: calc(37 * var(--px));
    font-family: var(--font-family-en);
    font-size: calc(20 * var(--px));
    color: var(--color-white);
    background: url(/products/brand/xylitol/campaign/project/assets/img/features_num_bg.svg)
      50% / contain no-repeat;
    place-items: center;
    font-weight: 600;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
  }
  .c-features__card {
    gap: calc(10 * var(--px));
    padding: calc(18 * var(--px));
    text-align: center;
    background: var(--color-white);
    border: calc(2 * var(--px)) solid var(--color-primary-dark);
    border-radius: var(--radius-m);
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-features__card {
      min-height: calc(168 * var(--px));
      padding: calc(16 * var(--px)) calc(10 * var(--px));
    }
    .c-features__point:last-child .c-features__card {
      min-height: 0;
      padding: calc(18 * var(--px));
    }
  }
  .c-features__card-title {
    font-size: max(18 * var(--px), 10rem/16);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-primary-dark);
  }
  @media (width<=767.98px) {
    .c-features__card-title {
      font-size: calc(16 * var(--px));
    }
    .c-features__point:last-child .c-features__card-title {
      font-size: calc(18 * var(--px));
    }
  }
  .c-features__card-text {
    font-size: var(--fs-s);
    font-weight: 500;
    line-height: var(--lh-tight);
  }
  @media (width<=767.98px) {
    .c-features__card-text {
      font-size: calc(14 * var(--px));
    }
  }
  .c-usecase {
    --section-bg: var(--color-bg-pale);
  }
  .c-usecase__lead {
    font-size: var(--fs-m);
    text-align: center;
    margin-block-start: calc(32 * var(--px));
    font-weight: 700;
    line-height: 2.2;
  }
  @media (width<=767.98px) {
    .c-usecase__lead {
      margin-block-start: calc(24 * var(--px));
    }
  }
  .c-usecase__body {
    width: calc(1100 * var(--px));
    height: calc(560 * var(--px));
    margin: calc(64 * var(--px)) auto 0;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-usecase__body {
      gap: calc(16 * var(--px));
      width: auto;
      height: auto;
      flex-direction: column;
      margin-block-start: calc(40 * var(--px));
      display: flex;
    }
    .c-usecase__map-area {
      position: relative;
    }
  }
  .c-usecase__scroller {
    top: 0;
    left: calc(201 * var(--px));
    width: calc(598 * var(--px));
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-usecase__scroller {
      width: auto;
      height: calc(600 * var(--px));
      overscroll-behavior-x: contain;
      background: var(--color-bg-pale);
      padding-block-start: calc(7 * var(--px));
      position: static;
      overflow: auto hidden;
    }
  }
  .c-usecase__map {
    position: relative;
  }
  @media (width<=767.98px) {
    .c-usecase__map {
      width: calc(672 * var(--px));
      padding-inline: calc(20 * var(--px));
    }
  }
  .c-usecase__map img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-usecase__highlight {
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration) var(--easing);
    position: absolute;
    inset: 0;
  }
  @media (width<=767.98px) {
    .c-usecase__highlight {
      inset: 0 calc(20 * var(--px));
    }
  }
  .c-usecase__body:has(
      .c-usecase__map-trigger--ebina:is(:hover, :focus-visible)
    )
    .c-usecase__trigger--ebina,
  .c-usecase__body:has(
      .c-usecase__map-trigger--kagamino:is(:hover, :focus-visible)
    )
    .c-usecase__trigger--kagamino {
    color: var(--color-accent);
  }
  .c-usecase__body:has(
      :is(.c-usecase__trigger--ebina, .c-usecase__map-trigger--ebina):is(
        :hover,
        :focus-visible
      )
    )
    .c-usecase__highlight--ebina,
  .c-usecase__body:has(
      :is(.c-usecase__trigger--kagamino, .c-usecase__map-trigger--kagamino):is(
        :hover,
        :focus-visible
      )
    )
    .c-usecase__highlight--kagamino {
    opacity: 1;
  }
  .c-usecase__map-triggers {
    position: absolute;
    inset: 0;
  }
  @media (width<=767.98px) {
    .c-usecase__map-triggers {
      inset: 0 calc(20 * var(--px));
    }
  }
  .c-usecase__map-trigger {
    top: var(--map-y);
    left: var(--map-x);
    width: var(--map-w);
    height: var(--map-h);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    position: absolute;
  }
  .c-usecase__map-trigger:focus-visible {
    outline: none;
  }
  .c-usecase__legend {
    top: calc(233 * var(--px));
    left: calc(773 * var(--px));
    gap: calc(10 * var(--px));
    width: calc(257 * var(--px));
    height: calc(80 * var(--px));
    background: var(--color-white);
    border: var(--border-w) solid var(--color-border);
    border-radius: calc(20 * var(--px));
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-usecase__legend {
      top: calc(71 * var(--px));
      left: calc(20 * var(--px));
      gap: calc(7 * var(--px));
      width: calc(180 * var(--px));
      height: calc(74 * var(--px));
      align-items: flex-start;
      padding-block-start: calc(17 * var(--px));
    }
  }
  .c-usecase__legend-mark {
    width: calc(27 * var(--px));
    height: calc(22 * var(--px));
    background: var(--color-graph);
    border-radius: var(--radius-s);
    flex-shrink: 0;
  }
  @media (width<=767.98px) {
    .c-usecase__legend-mark {
      border-radius: calc(6 * var(--px));
    }
  }
  .c-usecase__legend-text {
    font-size: var(--fs-s);
    font-weight: 500;
    line-height: var(--lh-tight);
  }
  @media (width<=767.98px) {
    .c-usecase__legend-text {
      font-size: calc(14 * var(--px));
    }
  }
  .c-usecase__hint {
    display: none;
  }
  @media (width<=767.98px) {
    .c-usecase__hint {
      top: calc(235 * var(--px));
      left: calc(130 * var(--px));
      gap: calc(8 * var(--px));
      width: calc(130 * var(--px));
      height: calc(100 * var(--px));
      color: var(--color-white);
      pointer-events: none;
      background: var(--color-hint-bg);
      border-radius: calc(4 * var(--px));
      transition: opacity var(--duration) var(--easing);
      flex-direction: column;
      align-items: center;
      padding-block-start: calc(14 * var(--px));
      display: flex;
      position: absolute;
    }
  }
  .c-usecase__map-area.is-scrolled .c-usecase__hint {
    opacity: 0;
  }
  .c-usecase__hint-icon {
    width: calc(44 * var(--px));
    height: calc(52 * var(--px));
  }
  .c-usecase__hint-text {
    font-size: max(12 * var(--px), 10rem/16);
    font-weight: 500;
    line-height: var(--lh-tight);
  }
  .c-usecase__cases {
    top: calc(60 * var(--px));
    left: calc(201 * var(--px));
    gap: calc(24 * var(--px));
    width: calc(230 * var(--px));
    flex-direction: column;
    display: flex;
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-usecase__cases {
      width: auto;
      padding: calc(0 * var(--px)) calc(20 * var(--px)) calc(24 * var(--px));
      position: static;
    }
  }
  .c-usecase__cases-title {
    font-size: var(--fs-l);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-green-deep);
  }
  @media (width<=767.98px) {
    .c-usecase__cases-title {
      font-size: calc(24 * var(--px));
      text-align: center;
    }
  }
  .c-usecase__list {
    gap: calc(14 * var(--px));
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-usecase__list {
      flex-direction: row;
      justify-content: space-between;
      gap: 0;
    }
  }
  .c-usecase__item {
    border-block-end: var(--border-w) solid var(--color-line-gray);
    padding-block-end: calc(14 * var(--px));
  }
  @media (width<=767.98px) {
    .c-usecase__item {
      width: calc(163 * var(--px));
      border-color: var(--color-line-mint);
    }
  }
  .c-usecase__trigger {
    gap: calc(16 * var(--px));
    width: 100%;
    font-family: inherit;
    font-size: calc(20 * var(--px));
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
    transition: color var(--duration) var(--easing);
    background: 0 0;
    border: 0;
    align-items: center;
    padding: 0;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-usecase__trigger {
      font-size: calc(18 * var(--px));
      color: var(--color-text-sub);
    }
  }
  .c-usecase__trigger:hover,
  .c-usecase__trigger:focus-visible {
    color: var(--color-accent);
    font-weight: 700;
  }
  .c-usecase__trigger-text {
    padding-inline: calc(4 * var(--px));
    flex: 1;
  }
  .c-usecase__trigger-icon {
    width: calc(22 * var(--px));
    flex-shrink: 0;
  }
  .c-usecase__trigger-icon img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-case-modal {
    width: calc(900 * var(--px));
    max-width: calc(100% - var(--gutter) * 2);
    height: min(calc(660 * var(--px)), 100dvh - calc(40 * var(--px)));
    max-height: none;
    color: var(--color-white);
    background: 0 0;
    border: 0;
    padding: 0;
    overflow: visible;
  }
  @media (width<=767.98px) {
    .c-case-modal {
      width: calc(350 * var(--px));
      height: min(calc(648 * var(--px)), 100dvh - calc(132 * var(--px)));
      translate: 0 calc(-30 * var(--px));
    }
  }
  .c-case-modal::backdrop {
    background: var(--color-modal-backdrop);
  }
  .c-case-modal[open] {
    animation: c-case-modal-in var(--modal-duration) var(--easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .c-case-modal[open] {
      animation: none;
    }
  }
  @keyframes c-case-modal-in {
    0% {
      opacity: 0;
      transform: translateY(calc(16 * var(--px)));
    }
  }
  .c-case-modal__card {
    background: var(--color-green-deep);
    border-radius: calc(20 * var(--px));
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .c-case-modal__card:focus {
    outline: none;
  }
  .c-case-modal__label {
    z-index: 1;
    gap: calc(10 * var(--px));
    padding: calc(14 * var(--px)) calc(16 * var(--px));
    font-size: var(--fs-l);
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-radius: calc(20 * var(--px)) 0;
    align-items: flex-end;
    font-weight: 900;
    line-height: 1;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
  }
  @media (width<=767.98px) {
    .c-case-modal__label {
      font-size: calc(24 * var(--px));
    }
  }
  .c-case-modal__label-icon {
    width: calc(20 * var(--px));
  }
  .c-case-modal__label-icon img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-case-modal__close {
    top: calc(14 * var(--px));
    right: calc(14 * var(--px));
    z-index: 1;
    width: calc(48 * var(--px));
    height: calc(48 * var(--px));
    cursor: pointer;
    transition: opacity var(--duration) var(--easing);
    background: 0 0;
    border: 0;
    padding: 0;
    position: absolute;
  }
  .c-case-modal__close:focus-visible {
    opacity: 0.8;
  }
  @media (hover: hover) {
    .c-case-modal__close:hover {
      opacity: 0.8;
    }
  }
  .c-case-modal__close img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-case-modal__body {
    inset: calc(80 * var(--px)) calc(23 * var(--px)) calc(13 * var(--px))
      calc(0 * var(--px));
    gap: calc(56 * var(--px));
    padding-inline: calc(170 * var(--px)) calc(147 * var(--px));
    overscroll-behavior: contain;
    flex-direction: column;
    display: flex;
    position: absolute;
    overflow: hidden auto;
  }
  @media (width<=767.98px) {
    .c-case-modal__body {
      inset: calc(80 * var(--px)) calc(7 * var(--px)) calc(14 * var(--px))
        calc(0 * var(--px));
      padding-inline: calc(20 * var(--px)) calc(7 * var(--px));
    }
  }
  .c-case-modal__body::-webkit-scrollbar {
    width: calc(6 * var(--px));
  }
  .c-case-modal__body::-webkit-scrollbar-track {
    background: var(--color-line-pale);
    border-radius: calc(999 * var(--px));
  }
  .c-case-modal__body::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: calc(999 * var(--px));
  }
  @supports not selector(::-webkit-scrollbar) {
    .c-case-modal__body {
      scrollbar-color: var(--color-primary) var(--color-line-pale);
      scrollbar-width: thin;
    }
  }
  .c-case-modal__article {
    gap: calc(24 * var(--px));
    flex-direction: column;
    display: flex;
  }
  .c-case-modal__photo {
    border-radius: calc(20 * var(--px));
    overflow: hidden;
  }
  @media (width<=767.98px) {
    .c-case-modal__photo {
      border-radius: calc(11 * var(--px));
    }
  }
  .c-case-modal__photo img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
  }
  .c-case-modal__title {
    font-size: var(--fs-l);
    font-weight: 700;
    line-height: 2.2;
  }
  @media (width<=767.98px) {
    .c-case-modal__title {
      font-size: calc(20 * var(--px));
      word-break: keep-all;
      overflow-wrap: anywhere;
      line-height: 1.8;
    }
  }
  .c-case-modal__text {
    font-size: var(--fs-m);
    border-block-end: var(--border-w) solid var(--color-line-pale);
    padding-block-end: calc(56 * var(--px));
    font-weight: 700;
    line-height: 2.2;
  }
  .c-case-modal__others {
    gap: calc(24 * var(--px));
    flex-direction: column;
    padding-block-end: calc(80 * var(--px));
    display: flex;
  }
  @media (width<=767.98px) {
    .c-case-modal__others {
      padding-block-end: calc(32 * var(--px));
    }
  }
  .c-case-modal__others-title {
    font-size: var(--fs-l);
    font-weight: 700;
    line-height: 2.2;
  }
  @media (width<=767.98px) {
    .c-case-modal__others-title {
      font-size: calc(24 * var(--px));
    }
  }
  .c-case-modal__others-list {
    gap: calc(24 * var(--px));
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .c-case-modal__other {
    gap: calc(16 * var(--px));
    width: calc(268 * var(--px));
    height: calc(48 * var(--px));
    padding: calc(0 * var(--px)) calc(16 * var(--px)) calc(0 * var(--px))
      calc(32 * var(--px));
    font-family: inherit;
    font-size: var(--fs-m);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-white);
    text-align: start;
    cursor: pointer;
    background: var(--color-primary);
    border: var(--border-w) solid var(--color-white);
    border-radius: var(--radius-pill);
    transition: opacity var(--duration) var(--easing);
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-case-modal__other {
      font-size: calc(16 * var(--px));
    }
  }
  .c-case-modal__other:focus-visible {
    opacity: 0.8;
  }
  @media (hover: hover) {
    .c-case-modal__other:hover {
      opacity: 0.8;
    }
  }
  .c-case-modal__other-text {
    flex: 1;
  }
  .c-case-modal__other-icon {
    width: calc(24 * var(--px));
    flex-shrink: 0;
  }
  .c-case-modal__other-icon img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-case-modal__nav {
    width: calc(48 * var(--px));
    height: calc(48 * var(--px));
    cursor: pointer;
    transition: opacity var(--duration) var(--easing);
    background: 0 0;
    border: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
  }
  @media (width<=767.98px) {
    .c-case-modal__nav {
      top: calc(100% + calc(12 * var(--px)));
      translate: none;
    }
  }
  .c-case-modal__nav:focus-visible {
    opacity: 0.8;
  }
  @media (hover: hover) {
    .c-case-modal__nav:hover {
      opacity: 0.8;
    }
  }
  .c-case-modal__nav img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-case-modal__nav--prev {
    right: calc(100% + calc(24 * var(--px)));
  }
  @media (width<=767.98px) {
    .c-case-modal__nav--prev {
      right: auto;
      left: calc(50% - calc(60 * var(--px)));
    }
  }
  .c-case-modal__nav--next {
    left: calc(100% + calc(24 * var(--px)));
  }
  @media (width<=767.98px) {
    .c-case-modal__nav--next {
      left: calc(50% + calc(12 * var(--px)));
    }
  }
  .c-voice {
    --section-dots: var(--color-bg-pale);
    --section-tree-left: url(/products/brand/xylitol/campaign/project/assets/img/common_bg_tree_left_02.svg);
    --section-tree-right: url(/products/brand/xylitol/campaign/project/assets/img/common_bg_tree_right_02.svg);
  }
  .c-voice__inner {
    gap: var(--space-xl);
    flex-direction: column;
    display: flex;
  }
  .c-voice__head {
    gap: calc(32 * var(--px));
    flex-direction: column;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-voice__head {
      gap: calc(24 * var(--px));
    }
  }
  .c-voice__lead {
    font-size: var(--fs-m);
    text-align: center;
    font-weight: 700;
    line-height: 2.2;
  }
  .c-voice__body {
    gap: calc(24 * var(--px));
    flex-direction: column;
    display: flex;
  }
  .c-voice__cards {
    gap: calc(40 * var(--px));
    justify-content: space-between;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-voice__cards {
      gap: calc(24 * var(--px));
      flex-direction: column;
    }
  }
  .c-voice__card {
    padding: calc(24 * var(--px));
    background: var(--color-white);
    border: calc(2 * var(--px)) solid var(--color-border);
    border-radius: calc(30 * var(--px));
    flex-direction: column;
    flex: 1;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-voice__card {
      padding: calc(16 * var(--px)) calc(16 * var(--px)) calc(14 * var(--px));
      border-width: var(--border-w);
    }
  }
  .c-voice__card-title {
    gap: calc(16 * var(--px));
    font-family: var(--font-family-en);
    font-size: calc(32 * var(--px));
    color: var(--color-green-deep);
    align-items: center;
    font-weight: 700;
    line-height: 1;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-voice__card-title {
      gap: calc(10 * var(--px));
      font-size: calc(20 * var(--px));
    }
  }
  .c-voice__card-title-jp {
    font-family: var(--font-family);
    font-weight: 900;
  }
  .c-voice__avatar {
    width: calc(90 * var(--px));
    flex-shrink: 0;
  }
  @media (width<=767.98px) {
    .c-voice__avatar {
      width: calc(59 * var(--px));
    }
  }
  .c-voice__avatar img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-voice__graphs {
    gap: calc(24 * var(--px));
    justify-content: center;
    margin-block-start: calc(20 * var(--px));
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-voice__graphs {
      gap: calc(16 * var(--px));
      margin-block-start: calc(13 * var(--px));
    }
  }
  .c-voice__graph {
    gap: calc(10 * var(--px));
    width: calc(224 * var(--px));
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-voice__graph {
      width: calc(148 * var(--px));
    }
  }
  .c-voice__label {
    min-height: calc(46 * var(--px));
    font-size: var(--fs-m);
    text-align: center;
    place-items: center;
    font-weight: 700;
    line-height: 1.45;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-voice__label {
      min-height: calc(30 * var(--px));
      line-height: 1.2;
    }
  }
  .c-voice__ring {
    width: calc(200 * var(--px));
    aspect-ratio: 1;
    place-items: center;
    display: grid;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-voice__ring {
      width: calc(132 * var(--px));
    }
  }
  .c-voice__ring:before {
    content: '';
    background: conic-gradient(
      var(--color-graph) calc(var(--value) * 1%),
      var(--color-line-pale) 0
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--graph-stroke)),
      #000 calc(100% - var(--graph-stroke) + 0.5px)
    );
    border-radius: 50%;
    position: absolute;
    inset: 0;
  }
  .c-voice__value {
    font-family: var(--font-family-en);
    font-size: calc(48 * var(--px));
    color: var(--color-green-deep);
    padding-block-start: calc(6 * var(--px));
    font-weight: 700;
    line-height: 1;
    position: relative;
  }
  @media (width<=767.98px) {
    .c-voice__value {
      font-size: calc(31.7 * var(--px));
      padding-block-start: calc(4 * var(--px));
    }
  }
  .c-voice__unit {
    font-size: calc(26 * var(--px));
    margin-inline-start: calc(2 * var(--px));
  }
  @media (width<=767.98px) {
    .c-voice__unit {
      font-size: calc(17 * var(--px));
    }
  }
  .c-voice__answer {
    min-height: calc(70 * var(--px));
    font-size: calc(24 * var(--px));
    color: var(--color-green-deep);
    text-align: center;
    font-weight: 900;
    line-height: 1.45;
  }
  @media (width<=767.98px) {
    .c-voice__answer {
      min-height: calc(46 * var(--px));
      font-size: calc(16 * var(--px));
      margin-block-start: calc(-4 * var(--px));
    }
  }
  .c-voice__quote {
    display: inline-block;
    position: relative;
  }
  .c-voice__bracket {
    font-size: calc(30 * var(--px));
    line-height: 1;
    position: absolute;
  }
  @media (width<=767.98px) {
    .c-voice__bracket {
      font-size: calc(20 * var(--px));
    }
  }
  .c-voice__bracket--open {
    top: calc(-2 * var(--px));
    right: calc(100% + calc(2 * var(--px)));
  }
  @media (width<=767.98px) {
    .c-voice__bracket--open {
      top: calc(-1 * var(--px));
      right: calc(100% + calc(3 * var(--px)));
    }
  }
  .c-voice__bracket--close {
    bottom: calc(3 * var(--px));
    left: 100%;
  }
  @media (width<=767.98px) {
    .c-voice__bracket--close {
      bottom: calc(2 * var(--px));
    }
  }
  .c-voice__source {
    font-size: var(--fs-s);
    align-self: flex-end;
    margin-block-start: calc(32 * var(--px));
    font-weight: 500;
    line-height: 1;
  }
  @media (width<=767.98px) {
    .c-voice__source {
      margin-block-start: calc(18 * var(--px));
    }
  }
  .c-voice__note {
    font-size: var(--fs-s);
    font-weight: 500;
    line-height: var(--lh-body);
  }
  @media (width<=767.98px) {
    .c-voice__note {
      font-size: calc(14 * var(--px));
    }
  }
  .c-expert {
    gap: calc(24 * var(--px));
    padding: calc(64 * var(--px)) calc(40 * var(--px));
    margin-block: calc(40 * var(--px));
    background: var(--color-panel);
    border-radius: calc(30 * var(--px));
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-expert {
      gap: calc(20 * var(--px));
      padding: calc(24 * var(--px)) calc(24 * var(--px)) calc(40 * var(--px));
      flex-direction: column;
    }
  }
  .c-expert__photo {
    width: calc(240 * var(--px));
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
  }
  @media (width<=767.98px) {
    .c-expert__photo {
      width: calc(180 * var(--px));
    }
  }
  .c-expert__photo img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
  }
  .c-expert__body {
    gap: calc(24 * var(--px));
    flex-direction: column;
    flex: 1;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-expert__body {
      gap: calc(20 * var(--px));
    }
  }
  .c-expert__head {
    gap: calc(8 * var(--px));
    color: var(--color-heading-deep);
    flex-direction: column;
    display: flex;
  }
  .c-expert__label {
    font-family: var(--font-family-en);
    font-size: max(14 * var(--px), 10rem/16);
    font-weight: 600;
    line-height: 1.5;
  }
  .c-expert__name {
    font-weight: 700;
    line-height: 1.45;
  }
  .c-expert__org {
    font-size: calc(20 * var(--px));
    display: block;
  }
  @media (width<=767.98px) {
    .c-expert__org {
      font-size: calc(16 * var(--px));
    }
  }
  .c-expert__person {
    font-size: calc(32 * var(--px));
    display: block;
  }
  @media (width<=767.98px) {
    .c-expert__person {
      font-size: calc(24 * var(--px));
    }
  }
  .c-expert__title {
    font-size: var(--fs-l);
    margin-inline-start: 0.25em;
  }
  .c-expert__text {
    font-size: var(--fs-m);
    font-weight: 500;
    line-height: var(--lh-body);
  }
  .c-flow {
    --section-bg: var(--color-bg-pale);
    --flow-gap: calc(25 * var(--px));
  }
  .c-flow__inner {
    gap: var(--space-xl);
    flex-direction: column;
    display: flex;
  }
  .c-flow__head {
    gap: calc(32 * var(--px));
    flex-direction: column;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-flow__head {
      gap: calc(24 * var(--px));
    }
  }
  .c-flow__lead {
    font-size: var(--fs-m);
    text-align: center;
    font-weight: 700;
    line-height: 2.2;
  }
  @media (width<=767.98px) {
    .c-flow__scroller {
      padding-inline: var(--gutter);
      margin-inline: calc(var(--gutter) * -1);
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      overflow-x: auto;
    }
  }
  .c-flow.is-enhanced .c-flow__scroller {
    scrollbar-width: none;
  }
  .c-flow.is-enhanced .c-flow__scroller::-webkit-scrollbar {
    display: none;
  }
  .c-flow__list {
    gap: var(--flow-gap);
    justify-content: center;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-flow__list {
      justify-content: flex-start;
      width: max-content;
    }
  }
  .c-flow__item {
    --step-color: var(--color-step-1);
    gap: calc(16 * var(--px));
    width: calc(200 * var(--px));
    scroll-snap-align: start;
    flex-direction: column;
    align-items: center;
    display: flex;
    position: relative;
  }
  .c-flow__item:nth-child(2) {
    --step-color: var(--color-step-2);
  }
  .c-flow__item:nth-child(3) {
    --step-color: var(--color-step-3);
  }
  .c-flow__item:nth-child(4) {
    --step-color: var(--color-step-4);
  }
  .c-flow__item:nth-child(5) {
    --step-color: var(--color-step-5);
  }
  .c-flow__item:not(:last-child):before {
    top: calc(17 * var(--px));
    width: calc(100% + var(--flow-gap));
    height: calc(2 * var(--px));
    content: '';
    background: var(--step-color);
    position: absolute;
    left: 50%;
  }
  .c-flow__num {
    width: calc(44 * var(--px));
    height: calc(36 * var(--px));
    font-family: var(--font-family-en);
    font-size: calc(20 * var(--px));
    color: var(--color-white);
    letter-spacing: 0.04em;
    background: var(--step-color);
    border-radius: 50%;
    place-items: center;
    font-weight: 600;
    line-height: 1;
    display: grid;
    position: relative;
  }
  .c-flow__card {
    gap: calc(16 * var(--px));
    width: 100%;
    padding: calc(20 * var(--px)) calc(16 * var(--px));
    background: var(--color-white);
    border: calc(2 * var(--px)) solid var(--step-color);
    border-radius: calc(20 * var(--px));
    flex-direction: column;
    flex: 1;
    display: flex;
  }
  .c-flow__title {
    font-size: max(18 * var(--px), 10rem/16);
    color: var(--color-primary-dark);
    text-align: center;
    font-weight: 700;
    line-height: 1.45;
  }
  .c-flow__illust {
    height: calc(100 * var(--px));
    background: var(--color-flow-icon-bg);
    border-radius: calc(20 * var(--px));
    overflow: hidden;
  }
  .c-flow__illust img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }
  .c-flow__text {
    min-height: calc(66 * var(--px));
    font-size: var(--fs-s);
    font-weight: 500;
    line-height: 1.6;
  }
  .c-flow__controls {
    display: none;
  }
  @media (width<=767.98px) {
    .c-flow__controls:not([hidden]) {
      gap: calc(27 * var(--px));
      align-items: center;
      margin-block-start: calc(-16 * var(--px));
      display: flex;
    }
  }
  .c-flow__bar {
    height: calc(6 * var(--px));
    background: var(--color-line-pale);
    border-radius: 999px;
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  .c-flow__bar-thumb {
    inset-block: 0;
    left: calc(var(--progress, 0) * 80%);
    background: var(--color-primary);
    border-radius: inherit;
    width: 20%;
    position: absolute;
  }
  .c-flow__buttons {
    gap: calc(8 * var(--px));
    flex-shrink: 0;
    display: flex;
  }
  .c-flow__button {
    width: calc(44 * var(--px));
    height: calc(44 * var(--px));
    color: var(--color-primary);
    cursor: pointer;
    background: var(--color-white);
    border: var(--border-w) solid var(--color-control-border);
    border-radius: var(--radius-s);
    transition: opacity var(--duration) var(--easing);
    place-items: center;
    padding: 0;
    display: grid;
  }
  .c-flow__button:disabled {
    cursor: default;
    opacity: 0.4;
  }
  .c-flow__button--prev .c-flow__button-icon {
    transform: scaleX(-1);
  }
  .c-flow__button-icon {
    width: calc(10 * var(--px));
    height: calc(16 * var(--px));
    fill: none;
  }
  .c-faq {
    --faq-duration: 0.4s;
    --faq-easing: cubic-bezier(0.4, 0, 0.2, 1);
    padding-inline: var(--gutter);
  }
  @media (width<=767.98px) {
    .c-faq {
      padding-inline: 0;
    }
  }
  .c-faq__inner {
    gap: calc(40 * var(--px));
    max-width: calc(1340 * var(--px));
    padding: calc(64 * var(--px)) calc(120 * var(--px)) calc(80 * var(--px));
    background: var(--color-faq-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-panel);
    flex-direction: column;
    margin-inline: auto;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-faq__inner {
      padding: calc(56 * var(--px)) calc(20 * var(--px)) calc(40 * var(--px));
    }
  }
  .c-faq__head {
    position: relative;
  }
  .c-faq__head .c-section-head__en {
    margin-block: 0;
    position: absolute;
    inset: 0 auto auto 0;
  }
  @media (width<=767.98px) {
    .c-faq__head .c-section-head__en {
      inset: calc(9 * var(--px)) auto auto calc(-4 * var(--px));
      font-size: calc(60 * var(--px));
      transform: translateY(-100%);
    }
  }
  .c-faq__head .c-section-head__title {
    position: relative;
  }
  .c-faq__body {
    position: relative;
    overflow: hidden;
  }
  .c-faq__body.is-collapsed {
    max-height: var(--faq-collapsed);
  }
  .c-faq__body.is-collapsed:after {
    height: calc(40 * var(--px));
    pointer-events: none;
    content: '';
    background: linear-gradient(transparent, var(--color-faq-bg));
    position: absolute;
    inset: auto 0 0;
  }
  .c-faq__columns {
    gap: calc(40 * var(--px));
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    display: grid;
  }
  @media (width<=767.98px) {
    .c-faq__columns {
      gap: calc(14 * var(--px));
      grid-template-columns: 1fr;
    }
  }
  .c-faq__column {
    gap: calc(20 * var(--px));
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-faq__column {
      gap: calc(14 * var(--px));
    }
  }
  .c-faq__item {
    background: var(--color-white);
    border-radius: var(--radius-m);
  }
  .c-faq__question {
    gap: calc(14 * var(--px));
    padding: calc(20 * var(--px)) calc(16 * var(--px));
    font-size: max(18 * var(--px), 10rem/16);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-primary-dark);
    cursor: pointer;
    transition: padding-block-end var(--faq-duration) var(--faq-easing);
    align-items: center;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-faq__question {
      font-size: calc(16 * var(--px));
    }
  }
  .c-faq__question::-webkit-details-marker {
    display: none;
  }
  .c-faq__q {
    width: calc(18 * var(--px));
    font-family: var(--font-family-en);
    font-size: calc(22 * var(--px));
    letter-spacing: 0.04em;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
  }
  .c-faq__question-text {
    flex: 1;
  }
  .c-faq__icon {
    width: calc(24 * var(--px));
    height: calc(24 * var(--px));
    transition: transform var(--faq-duration) var(--faq-easing);
    flex-shrink: 0;
  }
  .c-faq__icon img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .c-faq__item[open]:not(.is-closing) .c-faq__question {
    padding-block-end: calc(14 * var(--px));
  }
  .c-faq__item[open]:not(.is-closing) .c-faq__icon {
    transform: rotate(180deg);
  }
  .c-faq__answer {
    overflow: hidden;
  }
  .c-faq__answer-text {
    margin: calc(0 * var(--px)) calc(51 * var(--px)) calc(20 * var(--px));
    font-size: var(--fs-m);
    font-weight: 500;
    line-height: var(--lh-body);
    color: var(--color-text-sub);
    border-top: var(--border-w) solid var(--color-border);
    padding-block-start: calc(16 * var(--px));
  }
  @media (width<=767.98px) {
    .c-faq__answer-text {
      margin: calc(0 * var(--px)) calc(16 * var(--px)) calc(20 * var(--px));
    }
  }
  .c-faq__more {
    gap: calc(12 * var(--px));
    height: calc(48 * var(--px));
    padding: calc(16 * var(--px)) calc(24 * var(--px)) calc(16 * var(--px))
      calc(32 * var(--px));
    font: inherit;
    font-size: calc(19 * var(--px));
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-white);
    cursor: pointer;
    background: var(--color-primary-dark);
    border-radius: var(--radius-pill);
    border: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    display: none;
  }
  @media (width<=767.98px) {
    .c-faq__more {
      display: inline-flex;
    }
  }
  .c-faq__more[hidden] {
    display: none;
  }
  .c-faq__more-icon {
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
    transition: transform var(--faq-duration) var(--faq-easing);
    flex-shrink: 0;
  }
  .c-faq__more-icon img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .c-faq__more[aria-expanded='true'] .c-faq__more-icon {
    transform: rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .c-faq__question,
    .c-faq__icon,
    .c-faq__more-icon {
      transition: none;
    }
  }
  .c-contact {
    background: url(/products/brand/xylitol/campaign/project/assets/img/contact_bg_arc.svg)
      center top calc(76 * var(--px)) / calc(2809 * var(--px))
      calc(2236 * var(--px)) no-repeat;
    padding-block-start: calc(120 * var(--px));
  }
  @media (width<=767.98px) {
    .c-contact {
      background-position: center top calc(36 * var(--px));
      background-size: calc(2813 * var(--px)) calc(2236 * var(--px));
      padding-block-start: calc(80 * var(--px));
    }
  }
  .c-contact__inner {
    gap: calc(40 * var(--px));
    padding-block: calc(80 * var(--px));
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-contact__inner {
      gap: calc(24 * var(--px));
      padding-block: calc(40 * var(--px));
      align-items: stretch;
    }
  }
  .c-contact__intro {
    gap: calc(32 * var(--px));
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-contact__intro {
      gap: calc(24 * var(--px));
    }
  }
  .c-contact__head {
    align-items: center;
  }
  @media (width<=767.98px) {
    .c-contact__head {
      gap: calc(10 * var(--px));
    }
    .c-contact__head .c-section-head__en {
      font-size: calc(48 * var(--px));
    }
    .c-contact__head .c-section-head__title {
      line-height: 1.3;
    }
  }
  .c-contact__sep {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
  }
  .c-contact__lead {
    font-size: var(--fs-m);
    text-align: center;
    font-weight: 700;
    line-height: 2.2;
  }
  .c-contact__targets {
    gap: calc(16 * var(--px));
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-contact__targets {
      gap: calc(8 * var(--px));
    }
  }
  .c-contact__target {
    padding: calc(8 * var(--px)) calc(32 * var(--px));
    font-size: max(18 * var(--px), 10rem/16);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-primary-dark);
    background: var(--color-white);
    border: var(--border-w) solid var(--color-primary-dark);
    border-radius: var(--radius-pill);
    transition: opacity var(--duration) var(--easing);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-contact__target {
      width: calc(160 * var(--px));
      padding: calc(8 * var(--px)) calc(24 * var(--px));
      font-size: max(12 * var(--px), 10rem/16);
      white-space: nowrap;
    }
  }
  .c-contact__target[href]:hover,
  .c-contact__target[href]:focus-visible {
    opacity: 0.7;
  }
  .c-contact__tel {
    gap: calc(64 * var(--px));
    width: 100%;
    padding: calc(40 * var(--px));
    background: var(--color-white);
    border: calc(2rem / 16) solid var(--color-primary-dark);
    border-radius: var(--radius-l);
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-contact__tel {
      gap: calc(12 * var(--px));
      padding: calc(24 * var(--px));
      flex-direction: column;
      align-items: center;
    }
  }
  .c-contact__tel-main {
    gap: calc(16 * var(--px));
    flex-direction: column;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-contact__tel-main {
      align-items: center;
    }
  }
  .c-contact__tel-title {
    font-size: var(--fs-l);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.5;
  }
  @media (width<=767.98px) {
    .c-contact__tel-title {
      line-height: var(--lh-tight);
      text-align: center;
    }
  }
  .c-contact__tel-number {
    gap: calc(16 * var(--px));
    font-family: var(--font-family-en);
    font-size: calc(40 * var(--px));
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-primary);
    align-items: center;
    text-decoration: none;
    display: inline-flex;
  }
  @media (width<=767.98px) {
    .c-contact__tel-number {
      font-size: calc(28 * var(--px));
    }
    .c-contact__tel-number--text {
      display: none;
    }
  }
  .c-contact__tel-number--link {
    display: none;
  }
  @media (width<=767.98px) {
    .c-contact__tel-number--link {
      display: inline-flex;
    }
  }
  .c-contact__tel-icon {
    width: calc(32 * var(--px));
    height: calc(32 * var(--px));
    fill: none;
    flex-shrink: 0;
  }
  .c-contact__tel-info {
    flex-direction: column;
    line-height: 2.2;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-contact__tel-info {
      align-items: center;
    }
  }
  .c-contact__tel-company {
    font-size: max(18 * var(--px), 10rem/16);
    font-weight: 700;
  }
  @media (width<=767.98px) {
    .c-contact__tel-company {
      font-size: calc(14 * var(--px));
    }
  }
  .c-contact__tel-hours {
    gap: calc(8 * var(--px));
    align-items: flex-start;
    display: flex;
  }
  .c-contact__tel-hours dt {
    font-size: var(--fs-m);
    font-weight: 700;
  }
  .c-contact__tel-hours dd {
    flex-direction: column;
    display: flex;
  }
  .c-contact__tel-time {
    font-family: var(--font-family-en);
    font-size: var(--fs-l);
    padding-inline-start: calc(8 * var(--px));
    font-weight: 700;
    line-height: 1.5;
  }
  @media (width<=767.98px) {
    .c-contact__tel-time {
      font-size: calc(20 * var(--px));
    }
  }
  .c-contact__tel-note {
    font-size: var(--fs-s);
    font-weight: 500;
    line-height: var(--lh-tight);
  }
  .c-footer__main {
    background: var(--color-white);
    border-top: var(--border-w) solid var(--color-footer-line);
    position: relative;
  }
  .c-footer__bar {
    min-height: calc(124 * var(--px));
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-footer__bar {
      gap: calc(38 * var(--px));
      min-height: calc(172 * var(--px));
      padding-block: calc(24 * var(--px)) calc(32 * var(--px));
      flex-direction: column;
      justify-content: flex-start;
    }
  }
  .c-footer__logo {
    width: calc(233 * var(--px));
    transition: opacity var(--duration) var(--easing);
    display: block;
  }
  .c-footer__logo:hover,
  .c-footer__logo:focus-visible {
    opacity: 0.7;
  }
  @media (width<=767.98px) {
    .c-footer__logo {
      width: calc(180 * var(--px));
    }
  }
  .c-footer__logo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .c-footer__sns {
    gap: calc(24 * var(--px));
    margin: 0 calc(55 * var(--px)) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-footer__sns {
      margin: 0;
    }
  }
  .c-footer__sns-link {
    width: calc(40 * var(--px));
    height: calc(40 * var(--px));
    transition: opacity var(--duration) var(--easing);
    display: block;
  }
  .c-footer__sns-link:hover,
  .c-footer__sns-link:focus-visible {
    opacity: 0.7;
  }
  .c-footer__sns-link img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .c-footer__pagetop {
    right: calc(49 * var(--px));
    bottom: calc(40 * var(--px));
    z-index: var(--z-fixed-cta);
    font-family: var(--font-family-en);
    font-size: var(--fs-m);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--color-pagetop);
    transition:
      opacity var(--duration) var(--easing),
      visibility var(--duration);
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    display: flex;
    position: fixed;
  }
  .c-footer__pagetop:hover,
  .c-footer__pagetop:focus-visible {
    opacity: 0.7;
  }
  .c-footer__pagetop.is-hidden {
    visibility: hidden;
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .c-footer__pagetop {
      transition: none;
    }
  }
  @media (width<=767.98px) {
    .c-footer__pagetop {
      right: calc(21 * var(--px));
      bottom: calc(16 * var(--px));
    }
  }
  .c-footer__pagetop-icon {
    width: calc(45 * var(--px));
    height: calc(45 * var(--px));
  }
  .c-footer__pagetop-icon img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .c-footer__nav {
    padding: calc(48 * var(--px)) var(--gutter) calc(39 * var(--px));
    background: var(--color-footer-nav);
  }
  @media (width<=767.98px) {
    .c-footer__nav {
      padding-block: calc(60 * var(--px)) calc(40 * var(--px));
    }
  }
  .c-footer__list {
    gap: calc(10 * var(--px)) calc(40 * var(--px));
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    list-style: none;
    display: flex;
  }
  @media (width<=767.98px) {
    .c-footer__list {
      gap: calc(16 * var(--px));
      flex-direction: column;
      align-items: center;
    }
  }
  .c-footer__list > li {
    display: flex;
  }
  .c-footer__link {
    gap: calc(10 * var(--px));
    font-size: max(12 * var(--px), 10rem/16);
    color: var(--color-black);
    align-items: center;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    display: inline-flex;
  }
  .c-footer__link:hover,
  .c-footer__link:focus-visible {
    text-decoration: underline;
  }
  .c-footer__link svg {
    width: calc(4 * var(--px));
    height: calc(8 * var(--px));
    fill: none;
  }
  @media (width<=767.98px) {
    .c-footer__link svg {
      width: calc(3 * var(--px));
      height: calc(6 * var(--px));
    }
  }
  .c-footer__copyright {
    padding: calc(6 * var(--px)) var(--gutter) calc(8 * var(--px));
    font-size: var(--fs-xs);
    color: var(--color-black);
    text-align: center;
    background: var(--color-footer-copyright);
    font-weight: 400;
    line-height: 1.5;
  }
}
@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;
    }
  }
  @media screen and (prefers-reduced-motion: no-preference) {
    .is-reveal-ready [data-reveal] {
      opacity: 0;
      translate: 0 var(--reveal-distance);
    }
    .is-reveal-ready [data-reveal].is-visible {
      opacity: 1;
      transition:
        opacity var(--reveal-duration) var(--reveal-easing)
          var(--reveal-delay, 0s),
        translate var(--reveal-duration) var(--reveal-easing)
          var(--reveal-delay, 0s);
      translate: none;
    }
  }
}