@charset "UTF-8";

/* ========================================================
                      * Font *
===========================================================
  英数字：AlrightSans（ユーザー支給のセルフホストフォント / font/ に配置）
  日本語：モリサワ Web フォント 游ゴシック（読み込みは HTML の <link>）
========================================================= */
@font-face {
  font-family: "AlrightSans";
  src: url("../font/AlrightSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "AlrightSans";
  src: url("../font/AlrightSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* ========================================================
                      * Variable *
===========================================================
  単位システム（coding-guidelines.md 1章参照）
  - SP特化型部分       : calc(N * var(--rem))      ※Nはデザインの値（単位なし）
  - PC左右カラム       : calc(N * var(--rem-pc))   ※Nは PC1440 デザイン上の値
  - line-height        : 単位なし
  - letter-spacing     : em

  本案件は SP特化型（SP393 のデザインを PC では中央 500px に配置）。
========================================================= */
:root {
  --pw: 1440; /* PCデザイン幅 */
  --sw: 393; /* SPアートボード幅 */
  --artboard-pw: 500; /* PC上でSPレイアウトを表示する幅 */
  --artboard-sw: 393; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  /* SP をベースに定義（768px 以下）。
     整数 px の min/max ペアだと 768.x px で変数が未定義になり --rem が壊れるため、
     SP をデフォルト値として持たせ、PC のみ min-width で上書きする。 */
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
  --header-height: 0px;
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

/* デザイン実寸（1440px）以上では拡大を止める（coding-guidelines 1-3） */
@media (min-width: 1441px) {
  :root {
    --variable: 1px;
  }
}

[id] {
  scroll-margin-top: var(--header-height);
}


/* ========================================================
                      * Design Token *
========================================================= */
.p-feature {
  --base-font-color: #000;
  --color-mint: #74bdac;
  --color-mint-light: #b9eade;
  --color-mint-pale: #d5ece6;
  --color-orange: #ee7551;
  --color-kraft-pc: #e0d5c9;
  --color-ink: #231815;
  --color-pc-bg: #e6eeeb;

  --font-jp-stack: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, sans-serif;
  --font-regular: "MFW-YuGoPr6N-Regular", var(--font-jp-stack);
  --font-medium: "MFW-YuGoPr6N-Medium", var(--font-jp-stack);
  --font-demi: "MFW-YuGoPr6N-Demi", var(--font-jp-stack);
  --font-bold: "MFW-YuGoPr6N-Bold", var(--font-jp-stack);

  --lp-font-ja: var(--font-medium);
  --lp-font-en: "AlrightSans", var(--font-medium);

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: 0;
}

/* ========================================================
                      * Reset (LPスコープ内) *
===========================================================
  全ブランド共通で使う .lp_contents スコープ内リセット。
  :where() で詳細度を上げずに閉じ込める。原則ここは変更しない。
========================================================= */

#Wrap {
  width: 100%;
}

.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: "palt";
  }

  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, sub, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & sup {
    top: 0;
    font-size: 1em;
    vertical-align: baseline;
  }

  & sub {
    bottom: 0;
    font-size: .62em;
    vertical-align: baseline;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================================================
                      * 字送り（本案件固有） *
===========================================================
  本案件のデザイン（Figma）は日本語をベタ組み（文字詰めなし）で組んでいるため、
  共通リセットの font-feature-settings: "palt" を LP スコープ内で無効化し、
  1行あたりの文字数・折り返し位置をデザインに合わせる。
  （palt が効いた状態では 1文字あたり約0.94em に詰まり、デザインより
    1行に2文字ほど多く入ってしまう）
========================================================= */
.lp_contents.p-feature * {
  font-feature-settings: normal;
}

/* ========================================================
                      * Utility *
===========================================================
  u-d-lg : PC(769px以上)のみ表示 / u-d-md : SP(768px以下)のみ表示
========================================================= */
.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }
}

/* ========================================================
                      * Layout *
===========================================================
  SP特化型：SPレイアウトを PC でも使用し、中央に 500px 幅で配置。
  左右の余りにロゴ・2商品ナビを常時追従（fixed）で置く。
========================================================= */
.lp_contents {
  background: #fff;
  /* .layout-kraft の width:100vw がスクロールバー幅分はみ出すのを抑止する。
     overflow-x: hidden はスクロールコンテナ化するため clip を使う。 */
  overflow-x: clip;

  @media (min-width: 769px) {
    display: flex;
    background: var(--color-pc-bg);
  }

  & .layout-mobile-first {
    position: relative;
    z-index: 1;
    width: calc(393 * var(--rem));
    margin-inline: auto;
    background: #fff;
  }
}

/* ---- PC左右の追従エリア ---- */
.lp_contents {
  & .layout-side {
    /* position: fixed; */
    /* top: 50%; */
    /* translate: 0 -50%; */
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
    height: 100vh;
  }

  & .layout-side--logo {
    /* 1441px 以上で拡大が止まるため、左右カラムは中央基準で配置する（1440px では従来と同値） */
    /* left: calc(50% - 583 * var(--rem-pc)); */
    /* width: calc(221 * var(--rem-pc)); */
    & img {
      width: calc(221 * var(--rem-pc));
      margin-left: calc(25 * var(--rem-pc));
    }
  }

  & .layout-side--nav {
    /* left: calc(50% + 386 * var(--rem-pc)); */
    /* width: calc(206 * var(--rem-pc)); */
    /* height: calc(583.25 * var(--rem-pc)); */
    order: 3;
    padding-bottom: calc(21 * var(--rem-pc));
  }

  & .layout-side__item {
    /* position: absolute; */
    /* left: 0; */
    /* width: 100%; */

    /* &:first-child {
      top: 0;
    } */

    &:last-child {
      /* top: calc(348.87 * var(--rem-pc)); */
      margin-top: calc(99 * var(--rem-pc));
      margin-left: calc(5 * var(--rem-pc));
    }
  }

  & .layout-side__figure {
    position: relative;
    display: block;
    margin-bottom: calc(13 * var(--rem-pc));
  }

  & .layout-side__figure--mouthwash {
    height: calc(181.15 * var(--rem-pc));
    margin-left: calc(-2 * var(--rem-pc));
  }

  & .layout-side__figure--toothbrush {
    height: calc(154.65 * var(--rem-pc));
    margin-left: calc(5 * var(--rem-pc));
    margin-bottom: calc(15 * var(--rem-pc));
  }

  & .layout-side__img {
    position: absolute;
  }

  & .layout-side__img--bottle {
    left: 0;
    top: 0;
    width: calc(78.5 * var(--rem-pc));
  }

  & .layout-side__img--pack {
    left: calc(121 * var(--rem-pc));
    top: calc(22 * var(--rem-pc));
    width: calc(84.889 * var(--rem-pc));
  }

  & .layout-side__img--stick {
    left: calc(99 * var(--rem-pc));
    top: calc(10 * var(--rem-pc));
    width: calc(127 * var(--rem-pc));
    opacity: 0;
  }

  & .layout-side__brushes {
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    display: block;
    width: 100%;
    height: 100%;

    & img {
      position: absolute;
      top: 0;
    }
  }

  /* 通常表示の5本（11.23幅・45間隔） */
  & .layout-side__brushes--default img {
    width: calc(11.23 * var(--rem-pc));

    &:nth-child(1) { left: 0; }
    &:nth-child(2) { left: calc(45 * var(--rem-pc)); }
    &:nth-child(3) { left: calc(90 * var(--rem-pc)); }
    &:nth-child(4) { left: calc(135 * var(--rem-pc)); }
    &:nth-child(5) { left: calc(180 * var(--rem-pc)); }
  }

  /* ホバー時に差し替わる別アングルの5本（15.1幅） */
  & .layout-side__brushes--hover {
    opacity: 0;

    & img {
      width: calc(15.1 * var(--rem-pc));

      &:nth-child(1) { left: 0; }
      &:nth-child(2) { left: calc(44.9 * var(--rem-pc)); }
      &:nth-child(3) { left: calc(89.7 * var(--rem-pc)); }
      &:nth-child(4) { left: calc(134.8 * var(--rem-pc)); }
      &:nth-child(5) { left: calc(179.4 * var(--rem-pc)); }
    }
  }

  & .layout-side__en,
  & .layout-side__ja {
    /* position: absolute; */
    /* left: calc(6 * var(--rem-pc)); */
    display: block;
    white-space: nowrap;
  }

  & .layout-side__en {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(25.5 * var(--rem-pc));
    line-height: 1.6;
    letter-spacing: .07em;
  }

  & .layout-side__ja {
    margin-top: calc(-7 * var(--rem-pc));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(16 * var(--rem-pc));
    line-height: 1.6;
    letter-spacing: .08em;
  }

  & .layout-side__item:first-child .layout-side__en {
    top: calc(187.5 * var(--rem-pc));
    margin-left: calc(4 * var(--rem-pc));
  }
  & .layout-side__item:first-child .layout-side__ja {
    top: calc(222.5 * var(--rem-pc));
    margin-left: calc(4 * var(--rem));
  }
  & .layout-side__item:last-child .layout-side__en {
    top: calc(166 * var(--rem-pc));
    margin-left: calc(4 * var(--rem-pc));
  }
  & .layout-side__item:last-child .layout-side__ja {
    top: calc(201 * var(--rem-pc));
    margin-left: calc(4 * var(--rem-pc));
  }

  & .layout-side__img,
  & .layout-side__brushes {
    transition: opacity .4s var(--transition-timing);
  }

  /* マウスオーバーで画像を差し替える（Figma指示） */
  @media (any-hover: hover) {
    & .layout-side__item:hover {
      opacity: 1;

      & .layout-side__img--pack { opacity: 0; }
      & .layout-side__img--stick { opacity: 1; }
      & .layout-side__brushes--default { opacity: 0; }
      & .layout-side__brushes--hover { opacity: 1; }
    }
  }
}

/* ---- クラフト紙の背景（PCでは全幅の薄いベージュ＋中央カラムだけ濃いクラフト） ---- */
.lp_contents {
  /* PC の左右に広がる帯。デザインは中央より薄いほぼ無地のベージュ（実測 #e0d5c9 / 標準偏差2.2） */
  & .layout-kraft {
      background: url(../img/bg_kraft2.jpg) center top;
      background-size: auto auto;

    @media (min-width: 769px) {
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }
  }

  /* 中央カラム（SPレイアウト部）は濃いクラフト紙のテクスチャ */
  & .layout-kraft__inner {
    background: url(../img/bg_kraft.jpg) repeat-y center top;
    background-size: 100% auto;

    @media (min-width: 769px) {
      width: calc(393 * var(--rem));
      margin-inline: auto;
    }
  }
}

/* ---- 背景のフェード（PCのみ） ----
  中央カラムはそのままで、後ろに広がる大きい背景だけをスクロールで切り替える。
    .layout-kraft : --color-pc-bg → クラフト色  /  .project-qa : クラフト色 → --color-pc-bg
  疑似要素に「切り替え前の色」を敷き、その opacity（--bg-fade-veil）を
  script.js の bgFade() が 1 → 0 で書き込む（animation-timeline は Firefox 非対応）。
  範囲は下の2値＝要素の上端が画面下端に触れた位置からのスクロール量。差が小さいほど速い。 */
.lp_contents {
  & .layout-kraft,
  & .project-qa {
    /* 疑似要素の位置基準。z-index は付けない（-1 の意図が変わる） */
    position: relative;
  }

  /* isolation は覆いを「帯の背景より前面／中央カラムより背面」に置くため */
  & .layout-kraft {
    --bg-fade-from: 50vh;
    /* 上端が画面上端に届くまで（100vh）にすると見出しを見ている間ずっと
       覆いの緑が残るため、上端が画面の上 1/4 に来る位置で終わらせる */
    --bg-fade-to: 75vh;
    isolation: isolate;
  }

  /* Q&A は帯より短いスクロール量（35vh 分）で完了させる */
  & .project-qa {
    --bg-fade-from: 50vh;
    --bg-fade-to: 85vh;
  }

  @media (min-width: 769px) {
    & .layout-kraft::before,
    & .project-qa::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      opacity: var(--bg-fade-veil, 0); /* JS 未実行時は 0＝切り替え後の色 */
    }

    /* 手前のセクションの地色で覆ってから外す（クラフトを入れると下地と同じで変化しない） */
    & .layout-kraft::before {
      background: var(--color-pc-bg);
    }

    /* 上の帯と同じ色で覆う。幅500なので帯と同じく 100vw に広げる */
    & .project-qa::before {
      inset: 0 calc(50% - 50vw);
      background: url(../img/bg_kraft2.jpg) repeat-x center top;
      background-size: auto auto;
    }
  }
}

/* ========================================================
                      * Animation *
===========================================================
  .js-intersection : スクロールで表示領域に入ったら is-active が付く
  .js-pop          : アイコン・吹き出しをポップさせる
  .js-flash        : パッと表示させる
  .js-handwrite    : 手書き風の下線を左から右へ描く
========================================================= */
.lp_contents {
  & .fade {
    opacity: 0;
    /* translate: 0 calc(30 * var(--rem)); */
    transition: opacity .8s var(--transition-timing), translate .8s var(--transition-timing);

    &.is-active {
      opacity: 1;
      /* translate: 0 0; */
    }
  }

  & .js-pop {
    opacity: 0;

    &.is-active {
      animation: pop 0.8s ease-out forwards;
    }
  }

  & .js-flash {
    opacity: 0;
    scale: .9;
    transition: scale .2s ease-out, opacity .2s ease-out;

    &.is-active {
      opacity: 1;
      scale: 1;
    }
  }

  & .js-handwrite {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s cubic-bezier(0.65, 0, 0.35, 1) .2s;

    &.is-active {
      clip-path: inset(0 0 0 0);
    }
  }

  .mask-text {
    mask-image: linear-gradient(to right, #000 0%, #000 20%, transparent 65%);
    mask-size: 300% 100%;
    mask-position: 100% 0;
    transition: mask 2.5s ease-out;
    &.is-active {
      mask-position: 0 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents :where(.js-intersection, .js-pop, .js-flash, .js-handwrite) {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    clip-path: none;
    transition: none;
  }
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: var(--scale, scale(1.196027));
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================================
                      * Component : Button *
========================================================= */
.lp_contents {
  & .component-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    padding-bottom: calc(2 * var(--rem));
    border-radius: 9999px;
    background: var(--color-mint);
    font-family: var(--font-bold);
    font-weight: 700;
    color: #fff;
    text-align: center;
  }

  & .component-btn--mint,
  & .component-btn--black {
    width: calc(280.969 * var(--rem));
    height: calc(45.872 * var(--rem));
    font-size: calc(22.117 * var(--rem));
  }

  & .component-btn--black {
    background: #000;
  }

  & .component-btn--buy {
    width: calc(165.724 * var(--rem));
    height: calc(45.717 * var(--rem));
    padding-top: calc(8 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(29.389 * var(--rem));
    letter-spacing: .15em;
    text-indent: .15em;
  }

  & .component-btn__arrow {
    position: absolute;
    right: calc(21.3 * var(--rem));
    top: 50%;
    width: calc(12.287 * var(--rem));
    margin-top: calc(-1 * var(--rem));
    translate: 0 -50%;
  }
}

/* ========================================================
                      * Component : Seal（黒丸バッジ） *
========================================================= */
.lp_contents {
  & .component-seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(140 * var(--rem));
    height: calc(140 * var(--rem));
    padding-top: calc(22.4 * var(--rem));
    border-radius: 50%;
    background: #000;
    color: #fff;
    text-align: center;
  }

  & .component-seal__row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: calc(120.5 * var(--rem));
    padding-bottom: calc(3.1 * var(--rem));
    border-bottom: calc(1.2 * var(--rem)) solid #fff;
  }

  & .component-seal__small {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(19.515 * var(--rem));
    line-height: 1;
  }

  & .component-seal__figure {
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(45 * var(--rem));
    line-height: 1;
  }

  & .component-seal__main {
    margin-top: calc(2.2 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(22.626 * var(--rem));
    line-height: 1.33;
    letter-spacing: -.05em;
  }

  & .component-seal__en {
    font-family: var(--lp-font-en);
    font-weight: 500;
    letter-spacing: 0;
  }

  & .component-seal__sub {
    margin-top: calc(3.6 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(15.084 * var(--rem));
    line-height: 1.33;
  }

  & .component-seal--co2 .component-seal__main + .component-seal__main {
    margin-top: 0;
  }
}

/* ========================================================
                      * Mainvisual *
========================================================= */
.lp_contents {
  & .project-mainvisual {
    position: relative;
  }

  & .project-mainvisual__title {
    position: absolute;
    left: calc(23 * var(--rem));
    top: calc(31 * var(--rem));
    z-index: 1;
  }

  & .project-mainvisual__title-en {
    display: block;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(41 * var(--rem));
    line-height: 1.11;
    letter-spacing: .05em;
  }

  & .project-mainvisual__title-ja {
    display: block;
    margin-top: calc(8 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(11 * var(--rem));
    line-height: 1.11;
    transition-delay: .9s;
  }

  & .project-mainvisual__release {
    position: absolute;
    left: calc(291.1 * var(--rem));
    top: calc(33.5 * var(--rem));
    z-index: 3;
    width: calc(77.1 * var(--rem));
  }

  & .project-mainvisual__new {
    position: absolute;
    left: calc(291.1 * var(--rem));
    top: calc(52.4 * var(--rem));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(78.6 * var(--rem));
    height: calc(78.6 * var(--rem));
    border-radius: 50%;
    background: var(--color-orange);
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(21.9 * var(--rem));
    line-height: 1;
    letter-spacing: -.04em;
    color: #fff;
  }

  /* KVテキストの動き（読み込み時に順次フェードイン） */
  /* & .project-mainvisual__title, */
  & .project-mainvisual__release,
  & .project-mainvisual__new {
    opacity: 0;
    /* translate: 0 calc(10 * var(--rem)); */
    transition: opacity 1s var(--transition-timing), translate 1s var(--transition-timing);
  }

  .project-mainvisual__title-en {
    .--1 {
      transition-delay: .5s;
    }
    .--2 {
      transition-delay: .7s;
    }
  }

  .js-mv.is-active {
    .project-mainvisual__title-en {
      .--1,
      .--2 {
        mask-position: 0 0;
      }
    }
    .project-mainvisual__title-ja {
      mask-position: 0 0;
    }
  }

  /* & .js-mv.is-active .project-mainvisual__title {
    opacity: 1;
    translate: 0 0;
    transition-delay: .3s;
  } */
  & .js-mv.is-active .project-mainvisual__release {
    opacity: 1;
    /* translate: 0 0; */
    transition-delay: 1.7s;
  }
  & .js-mv.is-active .project-mainvisual__new {
    opacity: 1;
    /* translate: 0 0; */
    transition-delay: 1.7s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .project-mainvisual :where(.project-mainvisual__title, .project-mainvisual__release, .project-mainvisual__new) {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* ========================================================
                      * Lead *
========================================================= */
.lp_contents {
  & .project-lead {
    padding: calc(45 * var(--rem)) 0 calc(41 * var(--rem));
    background: var(--color-mint-light);
    text-align: center;
  }

  & .project-lead__text {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(21 * var(--rem));
    line-height: 1.667;
    letter-spacing: .08em;
  }

  & .project-lead__text + .project-lead__text {
    margin-top: calc(35 * var(--rem));
  }

  /* 順番にフェードイン（Figma指示） */
  & .project-lead__text:nth-child(2).js-intersection {
    transition-delay: .25s;
  }
}

/* ========================================================
                      * Nav（2商品） *
========================================================= */
.lp_contents {
  & .project-nav {
    padding: calc(33 * var(--rem)) 0 calc(44 * var(--rem));
  }

  & .project-nav__list {
    display: flex;
    justify-content: center;
    gap: calc(17 * var(--rem));
  }

  & .project-nav__item {
    width: calc(165 * var(--rem));
  }

  /* マウスウォッシュ→歯ブラシの順でふわっと表示（Figma指示） */
  & .project-nav__item:nth-child(2).js-intersection {
    transition-delay: .5s;
  }

  & .project-nav__en {
    display: block;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.6;
    letter-spacing: .07em;
    text-align: center;
    text-indent: .07em;
  }

  & .project-nav__ja {
    display: block;
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(15 * var(--rem));
    line-height: 1.6;
    letter-spacing: .08em;
    text-align: center;
    text-indent: .08em;
  }

  & .project-nav__thumb {
    position: relative;
    display: block;
    width: calc(165 * var(--rem));
    height: calc(165 * var(--rem));
    margin-top: calc(11 * var(--rem));
    background: var(--color-mint-light);
    border-radius: calc(17 * var(--rem));
    overflow: hidden;

    & img {
      position: absolute;
    }
  }

  & .project-nav__thumb-bottle {
    left: calc(15 * var(--rem));
    top: calc(16 * var(--rem));
    width: calc(57.464 * var(--rem));
  }

  & .project-nav__thumb-pack {
    left: calc(84.8 * var(--rem));
    top: calc(29 * var(--rem));
    width: calc(64.3 * var(--rem));
  }

  & .project-nav__thumb--toothbrush img {
    top: calc(18 * var(--rem));
    width: calc(18.13 * var(--rem));

    &:nth-child(1) { left: calc(17 * var(--rem)); }
    &:nth-child(2) { left: calc(45.1 * var(--rem)); }
    &:nth-child(3) { left: calc(73.2 * var(--rem)); }
    &:nth-child(4) { left: calc(101.4 * var(--rem)); }
    &:nth-child(5) { left: calc(129.5 * var(--rem)); }
  }

  & .project-nav__btn {
    margin-top: calc(47.1 * var(--rem));
  }
}

/* ========================================================
                      * Mouthwash 見出し *
========================================================= */
.lp_contents {
  & .project-mouthwash__head {
    position: relative;
    padding: calc(22 * var(--rem)) 0 calc(25 * var(--rem));
    background: var(--color-mint);
    color: #fff;
    text-align: center;
  }

  & .project-mouthwash__ttl-en {
    display: block;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(42 * var(--rem));
    line-height: 1.6;
    letter-spacing: .05em;
    text-indent: .026em;
  }

  & .project-mouthwash__ttl-line {
    position: absolute;
    left: calc(42 * var(--rem));
    top: calc(72 * var(--rem));
    width: calc(304 * var(--rem));

    & img {
      width: 100% !important;
    }
  }

  & .project-mouthwash__ttl-ja {
    display: block;
    margin-top: calc(16.8 * var(--rem));
    margin-left: .08em;
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(34 * var(--rem));
    line-height: 1.294;
    letter-spacing: .08em;

    & sup {
      display: inline-block;
      margin-top: calc(2 * var(--rem));
      font-size: calc(12 * var(--rem));
      vertical-align: top;
    }
  }

  & .project-mouthwash__note {
    margin-top: calc(24 * var(--rem));
    padding: 0 calc(22 * var(--rem)) 0 calc(23 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(11 * var(--rem));
    line-height: 1.3;
    text-align: left;
  }
}

/* ========================================================
                      * Section : POINT *
========================================================= */
.lp_contents {
  & .section-point {
    position: relative;
  }

  /* デザインは写真上端を 566px グリッドで固定しているため、本文の行数差を余白で吸収する */
  & .section-point + .section-point {
    margin-top: calc(31 * var(--rem));
  }

  & .section-point + .section-point + .section-point {
    margin-top: calc(53 * var(--rem));
  }

  & .section-point__num {
    position: absolute;
    left: calc(31 * var(--rem));
    top: calc(27 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(16.9 * var(--rem));
    width: calc(73 * var(--rem));
    height: calc(73 * var(--rem));
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: calc(3 * var(--rem)) calc(3 * var(--rem)) calc(1 * var(--rem)) rgb(0 0 0 / .22);
    color: #fff;
  }

  & .section-point__num-label {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    text-indent: .05em;
  }

  & .section-point__num-figure {
    margin-top: calc(-2 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(36 * var(--rem));
    line-height: 1;
    letter-spacing: 0;
  }

  & .section-point__ttl {
    margin-top: calc(17 * var(--rem));
    /* padding: 0 calc(15 * var(--rem)); */
    padding-left: calc(17 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
    letter-spacing: -.01em;
  }

  & .section-point__text {
    margin-top: calc(11 * var(--rem));
    padding: 0 calc(16 * var(--rem)) 0 calc(15 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.3;
  }

  /* 2つめ・3つめの POINT はデザイン上の左右インセットが異なる */
  & .section-point + .section-point {
    & .section-point__ttl { padding-left: calc(28 * var(--rem)); }
    & .section-point__text { padding: 0 calc(24 * var(--rem)) 0 calc(30 * var(--rem)); }
  }

  & .section-point + .section-point + .section-point {
    & .section-point__ttl {
      padding-left: calc(24 * var(--rem));
      letter-spacing: .06em;
    }
    & .section-point__text { padding: 0 calc(9 * var(--rem)) 0 calc(25 * var(--rem)); }
  }

  .section-point--3 {
    .section-point__num {
      top: calc(24 * var(--rem));
    }
  }

  & .section-point__note {
    padding-inline: calc(30 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(12 * var(--rem));
    line-height: 1.3;

    & sup {
      display: inline-block;
      font-size: 1.1em;
      translate: 0 calc(-2 * var(--rem));
    }
  }
}

/* ========================================================
                      * Stick（持ち運びに便利なスティックタイプ） *
========================================================= */
.lp_contents {
  & .project-stick {
    position: relative;
    margin-top: calc(25 * var(--rem));
  }

  & .project-stick__marks {
    width: calc(293.8 * var(--rem));
    margin-inline: auto;
  }

  & .project-stick__ttl {
    margin-top: calc(10 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(21 * var(--rem));
    line-height: 1.6;
    text-align: center;
  }

  & .project-stick__balloon {
    --scale: scale(1.13636);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(280.72 * var(--rem));
    height: calc(47.52 * var(--rem));
    margin: calc(13.4 * var(--rem)) auto 0;
    padding-bottom: calc(3 * var(--rem));
    border-radius: calc(14.96 * var(--rem));
    background: var(--color-mint);
    box-shadow: 0 calc(3.52 * var(--rem)) calc(3.52 * var(--rem)) rgb(0 0 0 / .25);

    /* 吹き出しのしっぽ */
    &::after {
      content: "";
      position: absolute;
      left: calc(190.12 * var(--rem));
      top: calc(34.32 * var(--rem));
      width: calc(30.8 * var(--rem));
      height: calc(29.68 * var(--rem));
      background: var(--color-mint);
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='21' viewBox='-0.5 -0.5 24 22' preserveAspectRatio='none'><path fill='%23000' d='M13.773 19.659c-1.008 1.797-3.595 1.797-4.604 0L.342 3.932C-.646 2.172.626 0 2.644 0h17.655c2.018 0 3.29 2.172 2.302 3.932z'/></svg>") no-repeat center / 100% 100%;
      /* clip-path: polygon(0 0, 100% 0, 42% 100%); */
    }
  }

  & .project-stick__balloon-text {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(18.48 * var(--rem));
    line-height: 1.2;
    letter-spacing: -.06em;
    color: #fff;
  }

  & .project-stick__img--main {
    position: relative;
    z-index: 1;
    width: calc(333 * var(--rem));
    margin: calc(-18.52 * var(--rem)) auto 0;
    border-radius: calc(30 * var(--rem));
    overflow: hidden;
  }

  & .project-stick__img--sub {
    position: absolute;
    left: calc(7 * var(--rem));
    top: calc(352 * var(--rem));
    z-index: 3;
    width: calc(172 * var(--rem));
    border-radius: 50%;
    overflow: hidden;
    box-shadow: calc(3 * var(--rem)) calc(3 * var(--rem)) calc(1 * var(--rem)) rgb(0 0 0 / .25);
  }

  & .project-stick__text {
    margin-top: calc(44 * var(--rem));
    padding: 0 calc(19 * var(--rem)) 0 calc(27 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.3;
  }
}

/* ========================================================
                      * Dentist（歯科医推奨コメント） *
========================================================= */
.lp_contents {
  & .project-dentist {
    position: relative;
    margin-top: calc(24 * var(--rem));
    padding: calc(22 * var(--rem)) 0 calc(25 * var(--rem));
    background: var(--color-mint);
    color: #fff;
    text-align: center;
  }

  & .project-dentist__ttl-en {
    display: block;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(30 * var(--rem));
    line-height: 1.4;
    text-indent: calc(-5 * var(--rem));
  }

  & .project-dentist__ttl-ja {
    display: block;
    margin-top: calc(-3 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(17 * var(--rem));
    line-height: 1.53;
    letter-spacing: .3em;
    text-indent: .3em;
  }

  & .project-dentist__img {
    margin-top: calc(24 * var(--rem));
  }

  & .project-dentist__balloon {
    position: absolute;
    left: calc(18 * var(--rem));
    top: calc(417 * var(--rem));
    width: calc(356 * var(--rem));
    min-height: calc(287 * var(--rem));
    padding: calc(46 * var(--rem)) calc(25 * var(--rem)) calc(0 * var(--rem)) calc(22 * var(--rem));
    border-radius: calc(8 * var(--rem));
    background: url(../img/bg_balloon.png) no-repeat;
    background-size: 100%;
    /*box-shadow: 0 calc(4 * var(--rem)) calc(7.8 * var(--rem)) rgb(0 0 0 / .25);*/
    color: #000;
    text-align: left;

    /* 吹き出しのしっぽ：本体の上に出て、頂点は右上（デザイン実測 x76〜110 / 高さ27） */
    /*
    &::before {
      content: "";
      position: absolute;
      left: calc(43 * var(--rem));
      top: calc(-27 * var(--rem));
      width: calc(39 * var(--rem));
      height: calc(40 * var(--rem));
      background: rgb(255 255 255 / .9);
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='37' height='36' viewBox='-1 -1 39 38' preserveAspectRatio='none'><path fill='%23000' d='M32.598 0l-31.04 27.533c-2.79 2.476-1.242 7.545 2.305 7.545h25.943c1.767 0 3.292-1.401 3.654-3.358l5.096-27.533c.713-3.856-3.218-6.618-5.958-4.187z'/></svg>") no-repeat center / 100% 100%;

      clip-path: xywh(0 0 100% calc(27 * var(--rem)));
      box-shadow: 0 calc(4 * var(--rem)) calc(7.8 * var(--rem)) rgb(0 0 0 / .25);
    }
      */

    & .txt_sm {
      text-indent: calc(-15 * var(--rem));
      font-size: 0.85em;
      display: inline-block;
      line-height: 1.2;
      padding-top: calc(6 * var(--rem));
      padding-left: calc(16 * var(--rem));
    }
  }

  & .project-dentist__comment {
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(17 * var(--rem));
    line-height: 1.3;
    letter-spacing: -.04em;
  }

  & .project-dentist__profile {
    padding: calc(37 * var(--rem)) calc(31 * var(--rem)) 0;
  }

  & .project-dentist__name {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
    letter-spacing: .07em;
  }

  & .project-dentist__role {
    display: block;
    font-size: calc(18 * var(--rem));
    line-height: 1.4;
  }

  & .project-dentist__career {
    margin-top: calc(13 * var(--rem));
    padding-top: calc(17 * var(--rem));
    border-top: calc(1.5 * var(--rem)) dotted rgb(255 255 255 / .85);
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(15 * var(--rem));
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
  }
}

/* ========================================================
                      * Mouthwash Lineup *
========================================================= */
.lp_contents {
  & .project-lineup {
    padding: calc(27 * var(--rem)) 0 calc(55.3 * var(--rem));
    background: var(--color-mint-pale);
    text-align: center;
  }

  & .project-lineup__ttl {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(30 * var(--rem));
    line-height: 1.6;
  }

  & .section-item + .section-item {
    margin-top: calc(55.3 * var(--rem));
  }

  & .section-item__visual {
    position: relative;
    height: calc(315 * var(--rem));
    margin-top: calc(44 * var(--rem));
  }

  & .section-item__img {
    position: absolute;
  }

  & .section-item__img--bottle {
    left: calc(134 * var(--rem));
    top: calc(27 * var(--rem));
    width: calc(125 * var(--rem));
  }

  /* icn_badge_circle.svg は viewBox 116 のうち円が 0〜113（残り3pxは影のオフセット分）。
     幅を 113 にすると円の実描画径が 110 になってしまうため 116 を指定する（円の左端 252 は変わらない）。 */
  & .section-item__badge {
    position: absolute;
    left: calc(252 * var(--rem));
    top: 0;
    z-index: 1;
    width: calc(113 * var(--rem));
    aspect-ratio: 1;
    background: var(--color-mint);
    border-radius: 50%;
    box-shadow: calc(3 * var(--rem)) calc(3 * var(--rem)) 0 rgb(0 0 0 / .3);
  }

  .section-item--stick .section-item__badge {
    top: calc(-10 * var(--rem));
  }

  /* バッジ内の文字サイズはデザインで1文字ずつ組まれている（キャプチャの字面高から逆算）。
     AlrightSans は数字の字面が大文字より低いため（fz比 数字 0.589 / 大文字 0.725）、
     同じ見た目の高さでも数字と mL で font-size が変わる。
       バッジ1「450mL」: 450 の字面高 21.3（→fz36）／L 16（→fz22）
       バッジ2「12mL×4」: 12 の字面高 22.5（→fz38）／L 22（→fz30）／4 27（→fz36）
     ※バッジ2 だけ mL が大きく組まれているのはデザインどおり。 */
  & .section-item__badge-text {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    translate: 0 -50%;
    margin-top: calc(8 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(25 * var(--rem));
    line-height: 1.35;
    color: #fff;
  }

  & .section-item__badge-num {
    font-size: calc(31 * var(--rem));
    font-variant-numeric: lining-nums;
  }

  /* バッジ1 は1行組み。デザインでは字面の中心が円の中心より 5px 上にある */
  & .section-item__badge-text--single {
    line-height: 1;
    translate: 0 calc(-50% - 6.8 * var(--rem));
  }

  /* スティック（12mL×4）は mL・×4 ともバッジ1より大きい。
     1行の中に 3種の font-size が混在するため、line-height を倍率で1つ指定すると
     いちばん大きい文字（38）のラインボックスが行送りを支配して 48px まで広がる。
     デザイン実測の行送り 35 に合わせ、font-size ごとに実効 35px になる倍率を当てる。 */
  & .section-item--stick .section-item__badge-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: calc(5 * var(--rem));
    font-size: calc(31 * var(--rem));
    line-height: 1;
  }

  & .section-item--stick .section-item__badge-num {
    font-size: calc(31 * var(--rem));
    line-height: 1;
  }

  & .section-item__badge-sub {
    margin-top: calc(-6 * var(--rem));
    font-size: calc(37 * var(--rem));
    line-height: 1;
  }

  & .section-item--stick .section-item__visual {
    height: calc(305 * var(--rem));
    margin-top: 0;
  }

  & .section-item__img--pack {
    left: calc(70 * var(--rem));
    top: calc(53 * var(--rem));
    width: calc(135 * var(--rem));
  }

  & .section-item__img--stick {
    left: calc(239 * var(--rem));
    top: calc(67 * var(--rem));
    width: calc(73 * var(--rem));
  }

  & .section-item__name {
    margin-top: calc(23 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: 1.4;
  }

  & .section-item--stick .section-item__name {
    margin-top: calc(23 * var(--rem));
    line-height: 1.55;
  }

  & .section-item__volume {
    margin-top: calc(6 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(24 * var(--rem));
    line-height: 1.2;
    font-variant-numeric: lining-nums;
    text-indent: calc(4 * var(--rem));
  }

  & .section-item__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: calc(9.2 * var(--rem));
    margin-left: calc(4 * var(--rem));
    text-indent: calc(-4 * var(--rem));
    font-variant-numeric: lining-nums;
  }

  & .section-item--stick .section-item__price {
    margin-top: calc(15 * var(--rem));
    margin-left: calc(17 * var(--rem));
  }

  & .section-item__price-figure {
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(30 * var(--rem));
    line-height: 1.2;
  }

  & .section-item__price-tax {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    line-height: 1.4;
  }

  & .section-item__btn {
    margin-top: calc(17 * var(--rem));
  }

  & .section-item--stick .section-item__btn {
    margin-top: calc(16 * var(--rem));
  }
}

/* ========================================================
                      * Toothbrush 見出し *
========================================================= */
.lp_contents {
  & .project-toothbrush__head {
    position: relative;
    padding-top: calc(25 * var(--rem));
    text-align: center;
  }

  & .project-toothbrush__ttl-sub {
    display: block;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(28.102 * var(--rem));
    line-height: 1.28;
  }

  & .project-toothbrush__ttl-en {
    display: block;
    margin-top: calc(-4 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(42 * var(--rem));
    line-height: 1.6;
    letter-spacing: .04em;
    text-indent: .04em;
  }

  & .project-toothbrush__ttl-line {
    position: absolute;
    left: calc(40 * var(--rem));
    top: calc(110 * var(--rem));
    width: calc(314.8 * var(--rem));

    & img {
      width: 100% !important;
    }
  }

  & .project-toothbrush__ttl-ja {
    display: block;
    margin-top: calc(16.8 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(16.317 * var(--rem));
    line-height: 1.6;
  }

  & .project-toothbrush__photo {
    margin-top: calc(16 * var(--rem));
  }

  & .project-colorlineup + .project-toothbrush__photo {
    margin-top: 0;
  }
}

/* ========================================================
                      * COLOR LINEUP *
===========================================================
  スクロールで表示領域に入ったら上から順に歯ブラシが右から入り、
  動きに合わせて色名が表示される（Figma指示）。
========================================================= */
.lp_contents {
  & .project-colorlineup {
    position: relative;
    height: calc(619 * var(--rem));
    margin-top: calc(22 * var(--rem));
    padding-top: calc(47.5 * var(--rem));
    background: #fff;
    overflow: hidden;
  }

  /* デザイン実測：字面高 28（C）／11字の字形幅合計 231／字間 平均6.8。
     41.5＋字間0 だと総幅は近いが「字が大きく字間が詰まった別の組み方」になるため、
     字面と字間の両方を実測に合わせる。text-indent は末尾の letter-spacing 分の中央寄せ補正。 */
  & .project-colorlineup__ttl {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(37.5 * var(--rem));
    line-height: 1.2;
    letter-spacing: .085em;
    text-indent: .085em;
    text-align: center;
  }

  & .project-colorlineup__item {
    position: absolute;
    left: 0;
    width: 100%;

    &:nth-child(1) { top: calc(117.4 * var(--rem)); }
    &:nth-child(2) { top: calc(209.45 * var(--rem)); }
    &:nth-child(3) { top: calc(301.5 * var(--rem)); }
    &:nth-child(4) { top: calc(393.55 * var(--rem)); }
    &:nth-child(5) { top: calc(485.6 * var(--rem)); }
  }

  & .project-colorlineup__label {
    display: block;
    margin-left: calc(37.5 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(25 * var(--rem));
    line-height: 1.2;
  }

  & .project-colorlineup__img {
    display: block;
    width: calc(509 * var(--rem));
    margin: calc(2.9 * var(--rem)) 0 0 calc(33 * var(--rem));
  }

  & .project-colorlineup__item--grn .project-colorlineup__label { color: #5a847b; }
  & .project-colorlineup__item--blu .project-colorlineup__label { color: #4a7b9c; }
  & .project-colorlineup__item--wht .project-colorlineup__label { color: #000; }
  & .project-colorlineup__item--red .project-colorlineup__label { color: #84524a; }
  & .project-colorlineup__item--nvy .project-colorlineup__label { color: #292931; }

  & .project-colorlineup__label,
  & .project-colorlineup__img {
    opacity: 0;
    transition: opacity .9s ease-out, translate 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  & .project-colorlineup__img {
    translate: calc(120 * var(--rem)) 0;
  }

  & .js-colorlineup.is-active .project-colorlineup__label,
  & .js-colorlineup.is-active .project-colorlineup__img {
    opacity: 1;
    translate: 0 0;
  }

  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(1) .project-colorlineup__img { transition-delay: 0s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(1) .project-colorlineup__label { transition-delay: .3s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(2) .project-colorlineup__img { transition-delay: .28s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(2) .project-colorlineup__label { transition-delay: .58s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(3) .project-colorlineup__img { transition-delay: .56s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(3) .project-colorlineup__label { transition-delay: .86s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(4) .project-colorlineup__img { transition-delay: .84s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(4) .project-colorlineup__label { transition-delay: 1.14s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(5) .project-colorlineup__img { transition-delay: 1.12s; }
  & .js-colorlineup.is-active .project-colorlineup__item:nth-child(5) .project-colorlineup__label { transition-delay: 1.42s; }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .project-colorlineup :where(.project-colorlineup__label, .project-colorlineup__img) {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* ========================================================
                      * Section : Feature（黒帯の特徴） *
========================================================= */
.lp_contents {
  & .section-feature {
    margin-top: calc(15 * var(--rem));
    overflow: hidden;
  }

  & .section-feature__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(360 * var(--rem));
    height: calc(43 * var(--rem));
    margin-inline: auto;
    background: #000;
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(23 * var(--rem));
    line-height: 1.5;
    color: #fff;
    text-align: center;
  }

  & .section-feature__text {
    margin-top: calc(10 * var(--rem));
    padding: 0 calc(12 * var(--rem)) 0 calc(21 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    letter-spacing: -.03em;
  }

  & .section-feature__figure {
    width: calc(373 * var(--rem));
    margin: calc(13 * var(--rem)) 0 0 calc(20 * var(--rem));

    /* 図解は Figma 上で乗算合成されており、白い面・線は下地（クラフト紙）を透かす意図。
       translate を伴うアニメーションはスタッキングコンテキストを作って合成を分離するため、
       この要素だけ opacity のみの .js-flash を使う。 */
    & img {
      mix-blend-mode: multiply;
    }
  }

  & .section-feature + .project-toothbrush__photo {
    margin-top: calc(40 * var(--rem));
  }

  .section-feature--durable {
    margin-top: calc(16 * var(--rem));

    .section-feature__text {
      letter-spacing: 0;
    }
  }

  /* 2つめ以降の黒帯は文字サイズが小さい（1行に収める） */
  & .section-feature--durable .section-feature__ttl {
    font-size: calc(20.8 * var(--rem));
    letter-spacing: -.05em;
    white-space: nowrap;
  }

  & .section-feature--rice .section-feature__ttl {
    font-size: calc(22 * var(--rem));
    letter-spacing: -.05em;
    white-space: nowrap;
  }

  & .section-feature--rice {
    margin-top: calc(43 * var(--rem));
  }

  & .section-feature__lead {
    margin-top: calc(10 * var(--rem));
    padding: 0 calc(16 * var(--rem)) 0 calc(21 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
    letter-spacing: .06em;

    .bracket {
      margin-inline: calc(-4 * var(--rem));
    }
  }
}

/* ========================================================
                      * Rice（お米由来の3ステップ + CO2） *
========================================================= */
.lp_contents {
  & .project-rice__list {
    margin-top: calc(21 * var(--rem));
    padding-inline: calc(27 * var(--rem));
  }

  & .project-rice__item {
    position: relative;
    /* デザイン実測（4本すべて同値）：太さ2／ダッシュ3.75＋隙間5.22（ピッチ8.97）。
       border の dashed はブラウザが刻みを倍細かく描いてしまい（実測 76本 vs デザイン 39本）
       ほぼ実線に見えるため、Q&A の区切り線と同じ grad 方式に置き換えた。
       幅は親の padding-inline 27 に従う 339（デザインは x27〜369 の 343。padding を非対称に
       すると .project-rice__text の折り返しが変わるため、右端 4px の差は許容）。 */
    padding-top: calc(1.5 * var(--rem));
    background-image: repeating-linear-gradient(to right,
      var(--color-ink) 0 calc(3.75 * var(--rem)),
      transparent calc(3.75 * var(--rem)) calc(8.97 * var(--rem)));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% calc(2 * var(--rem));

    &:nth-child(1) { height: calc(223.9 * var(--rem)); }
    &:nth-child(2) { height: calc(224 * var(--rem)); }
    &:nth-child(3) { height: calc(224 * var(--rem)); }
    &:nth-child(4) { height: calc(208.1 * var(--rem)); }
  }

  & .project-rice__num {
    position: absolute;
    left: 0;
  }

  & .project-rice__item:nth-child(1) .project-rice__num { top: calc(20 * var(--rem)); width: calc(61.2 * var(--rem)); }
  & .project-rice__item:nth-child(2) .project-rice__num { top: calc(22 * var(--rem)); width: calc(69.9 * var(--rem)); }
  & .project-rice__item:nth-child(3) .project-rice__num { top: calc(23 * var(--rem)); width: calc(67 * var(--rem)); }

  & .project-rice__ttl {
    position: absolute;
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: 1.222;
    letter-spacing: .06em;
  }

  & .project-rice__item:nth-child(1) .project-rice__ttl { left: calc(63 * var(--rem)); top: calc(27 * var(--rem)); }
  & .project-rice__item:nth-child(2) .project-rice__ttl { left: calc(71 * var(--rem)); top: calc(20 * var(--rem)); }
  & .project-rice__item:nth-child(3) .project-rice__ttl { left: calc(71 * var(--rem)); top: calc(21 * var(--rem)); width: calc(257 * var(--rem)); }

  & .project-rice__illust {
    position: absolute;
  }

  & .project-rice__illust--old { left: calc(60 * var(--rem)); top: calc(93.2 * var(--rem)); width: calc(92 * var(--rem)); }
  & .project-rice__illust--broken { left: calc(69 * var(--rem)); top: calc(78 * var(--rem)); width: calc(200.7 * var(--rem)); }
  & .project-rice__illust--brush { left: calc(99.2 * var(--rem)); top: calc(73 * var(--rem)); width: calc(143.2 * var(--rem)); }
  & .project-rice__illust--co2 { left: calc(28.6 * var(--rem)); top: calc(69.8 * var(--rem)); width: calc(120.7 * var(--rem)); }

  & .project-rice__item .component-seal {
    position: absolute;
  }

  & .project-rice__item:nth-child(1) .component-seal {
    left: calc(182.47 * var(--rem));
    top: calc(68 * var(--rem));
    padding: 0;
    background: none;
  }
  & .project-rice__item--co2 .component-seal {
    left: calc(181.47 * var(--rem));
    top: calc(69.1 * var(--rem));
    padding: 0;
    background: none;
  }

  & .project-rice__co2-ttl {
    position: absolute;
    left: calc(11 * var(--rem));
    top: calc(14.1 * var(--rem));
    width: calc(309 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(24 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;

    .project-rice__en sub {
      vertical-align: baseline;
    }

    .num {
      font-size: calc(38 * var(--rem));
      line-height: 1;
      letter-spacing: -.05em;
    }
  }

  & .project-rice__en sub,
  & .section-feature__lead sub,
  & .component-seal__en sub,
  & .project-rice__text sub {
    vertical-align: calc(-1 * var(--rem));
  }

  /* デザイン実測：英数字の字面高 24（日本語 22 は一致）／和欧の境界の空きは 5〜7px。
     29＋余白なしだと字面高 21・行の ink 幅 280（デザイン 308）で 9% 縮んで見える。 */
  & .project-rice__en {
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(33 * var(--rem));
    letter-spacing: 0;
    margin-inline: calc(2.5 * var(--rem));
  }

  .project-rice__en--2 {
    margin-right: calc(5 * var(--rem));
  }

  & .project-rice__text {
    margin-top: calc(26 * var(--rem));
    padding: 0 calc(8 * var(--rem)) 0 calc(23 * var(--rem));
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(16.889 * var(--rem));
    line-height: 1.539;
    letter-spacing: -.03em;

    .bracket {
      margin-inline: calc(-7 * var(--rem));
    }
  }

  & .section-feature--rice + .project-toothbrush__photo {
    margin-top: calc(42 * var(--rem));
  }
}

/* ========================================================
                      * Section : Item（トゥースブラシ購入） *
========================================================= */
.lp_contents {
  & .section-item--toothbrush {
    margin-top: calc(31 * var(--rem));
    padding-bottom: calc(67.1 * var(--rem));
    text-align: center;
  }

  & .section-item--toothbrush .section-item__name {
    margin-top: 0;
    font-size: calc(24 * var(--rem));
    letter-spacing: .08em;
  }

  & .section-item--toothbrush .section-item__price {
    margin-top: calc(8.4 * var(--rem));
    margin-left: calc(13 * var(--rem));
  }

  & .section-item--toothbrush .section-item__btn {
    margin-top: calc(27 * var(--rem));
  }

  & .section-item--toothbrush .section-item__all {
    margin-top: calc(54.3 * var(--rem));
  }
}

/* ========================================================
                      * Q&A（アコーディオン） *
========================================================= */
.lp_contents {
  & .project-qa {
    /* デザイン実測：見出し「Q&A」の字面上端が背景先頭から 59、点線1本目が 359 */
    padding-top: calc(56 * var(--rem));
    background: var(--color-mint-pale);
    text-align: center;
  }

  & .project-qa__ttl-en {
    display: block;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(72 * var(--rem));
    line-height: 1;
    /* デザイン実測：Q〜A の字面幅 171（Q-& 隙間23／&-A 隙間14）。
       letter-spacing は最後の A の後ろにも入るため、同値の text-indent で中央寄せを戻す。 */
    letter-spacing: .26em;
    text-indent: .26em;
  }

  /* デザインでは「&」だけ小さく組まれている。
     実測：グリフ高 35（Q は 52）／ベースラインは Q・A と揃う。
     &-A の隙間 14 を作るため letter-spacing は & 側で個別に持たせる。 */
  & .project-qa__amp {
    font-size: .6875em;
    letter-spacing: .248em;
    vertical-align: baseline;
  }

  & .project-qa__ttl-ja {
    display: block;
    margin-top: calc(-1.3 * var(--rem));
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(27 * var(--rem));
    line-height: 1.6;
    letter-spacing: .05em;
    text-indent: .05em;
  }

  & .project-qa__list {
    margin-top: calc(14.9 * var(--rem));
    padding-bottom: calc(14.75 * var(--rem));
  }

  & .project-qa__item {
    position: relative;
  }

  /* 2件目以降の上に区切り線。デザイン実測（5本すべて同値）：
       太さ3 ／ x26.5〜366.5（幅340）／ ダッシュ5.9＋隙間6.03（ピッチ11.93）で29本 ／ #74bdac
     border の dashed はブラウザ依存のパターンになるため grad で描く。
     padding-top 14.75 は項目ピッチ 189.75（= 14.75 + trigger 175）を作るための値。 */
  & .project-qa__item + .project-qa__item {
    padding-top: calc(14.75 * var(--rem));
    background-image: repeating-linear-gradient(to right,
      var(--color-mint) 0 calc(5.9 * var(--rem)),
      transparent calc(5.9 * var(--rem)) calc(11.93 * var(--rem)));
    background-repeat: no-repeat;
    background-position: calc(26.5 * var(--rem)) 0;
    background-size: calc(340 * var(--rem)) calc(3 * var(--rem));
  }

  /* A の丸（.project-qa__mark--a）は trigger の外＝dt 直下にあるため、ここに基準を作る。
     これが無いと基準が .project-qa__item になり、2件目以降は上の padding-top 14.75 の分だけ
     A の丸が上にずれて Q の吹き出しに接触する。 */
  & .project-qa__q {
    position: relative;
  }

  & .project-qa__trigger:focus-visible {
    outline: calc(2 * var(--rem)) solid #000;
    outline-offset: calc(2 * var(--rem));
  }

  & .project-qa__trigger {
    position: relative;
    display: block;
    width: 100%;
    height: calc(175 * var(--rem));
  }

  & .project-qa__mark {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(61 * var(--rem));
    height: calc(61 * var(--rem));
    border-radius: 50%;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(33.733 * var(--rem));
    line-height: 1;
    letter-spacing: .25em;
    text-indent: .25em;
  }

  /* Q の丸は吹き出しのしっぽ付き（SVG） */
  /* デザイン実測：外径 66.38（＝SVG の viewBox。白の内径 61 が実測と一致）／中心 x45・
     文字中心は丸の中心より 1px 下。Figma の Ellipse 63.6 は stroke 中心基準の値。 */
  & .project-qa__mark--q {
    left: calc(12.8 * var(--rem));
    top: calc(-1.2 * var(--rem));
    z-index: 1;
    width: calc(66.38 * var(--rem));
    height: calc(66.38 * var(--rem));
    /* border-box なので padding-top の半分だけ字面が下がる。
       デザインは字面中心が丸の中心より 1px 下（flex center のままだと 3px 上に出る）。 */
    padding-top: calc(8 * var(--rem));
    font-size: calc(33.73 * var(--rem));   /* 実測：丸内の Q は字面高 23 */
    border-radius: 0;
    background: url(../img/icn_bubble_q.svg) no-repeat center center / 100% 100%;
    color: var(--color-mint);
  }

  /* Aの丸は開いたときだけ表示（回答ボックスの右上に重なる）。
     デザイン実測（SP_2.jpg＝全開フレーム）：丸の直径60・中心(347.5, 345)、
     字面高23で丸の中心より1px下、しっぽは Q のしっぽの鏡像（先端 320,372＝円周から約10px 外）。
     clip-path の三角では形が合わないため、icn_bubble_q.svg の path を左右反転して
     mint 塗りにした icn_bubble_a.svg に置き換えた。
     要素 62.52 に対し円が 60（＝60 * 66.3798 / 63.7096）。 */
  & .project-qa__mark--a {
    left: calc(316.24 * var(--rem));
    top: calc(128.94 * var(--rem));
    z-index: 2;
    width: calc(62.52 * var(--rem));
    height: calc(62.52 * var(--rem));
    padding-top: calc(8 * var(--rem));
    border-radius: 0;
    background: url(../img/icn_bubble_a.svg) no-repeat center center / 100% 100%;
    color: #fff;
    /* font-size は共通の 33.733 のまま（A は Q よりグリフが低く、これで字面高 23 になる） */
    opacity: 0;
    transition: opacity .3s ease-out;
  }

  & .project-qa__item.is-open .project-qa__mark--a {
    opacity: 1;
  }

  & .project-qa__bubble {
    transition: opacity ease-in-out 0.4s;
    position: absolute;
    left: calc(30 * var(--rem));
    top: calc(46 * var(--rem));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(333 * var(--rem));
    min-height: calc(72 * var(--rem));   /* デザイン実測：高さ72（231〜302） */
    padding: calc(6 * var(--rem)) calc(10 * var(--rem));
    border-radius: calc(17 * var(--rem));
    background: var(--color-mint);
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: calc(21 * var(--rem));
    line-height: 1.286;
    color: #fff;
  }

  & .project-qa__bubble:hover {
    opacity: 0.7;
  }

  & .project-qa__arrow {
    position: absolute;
    left: 50%;
    top: calc(139 * var(--rem));   /* デザイン実測：三角の上端が項目上端から 154（= 14.75 + 139） */
    width: calc(31.05 * var(--rem));
    translate: -50% 0;

    & img {
      rotate: 180deg;
    }
  }

  & .project-qa__a-inner {
    width: calc(336 * var(--rem));
    margin-bottom: calc(28 * var(--rem));
    margin-inline: auto;
    padding: calc(24 * var(--rem)) calc(15 * var(--rem)) calc(21 * var(--rem)) calc(20 * var(--rem));
    border: calc(3 * var(--rem)) solid var(--color-mint);
    border-radius: calc(17 * var(--rem));
    background: #fff;
  }

  & .project-qa__text {
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: calc(18 * var(--rem));
    line-height: 1.3;
    text-align: left;
  }
}

/* ========================================================
                      * Accordion *
===========================================================
  script.js の accordion() と対。
  .js-accordion--body には .accordion__body を併記して使う
  （.js-* にスタイルを当てない規約のため）。
========================================================= */
.lp_contents {
  & .accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
}