@charset "UTF-8";
/* =====================================================
   水素サプリページ（NMN配合）
   Figma: PC-水素の杜-水素サプリ (227:3646) / 1280 幅基準
   ヒーロー・購入ボタン・注記・よくある質問・締めの共通部分は lp.css
   ===================================================== */

/* セクション見出し（36px・中央）の共通指定。 */
.supp-worries__title,
.supp-why__title,
.supp-compare__title {
  text-align: center;
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.5;
}

/* =====================================================
   ヒーロー（書体とトリミングのみ。骨組みは lp.css）
   ===================================================== */
.supplement .lp-hero__bg { object-position: 76% 50%; }
.supplement .lp-hero__copy { margin-top: 231px; }
.supp-hero__eyebrow {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.6;
}
.supp-hero__title {
  margin-top: 10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300; /* FOT-DNP 秀英角ゴ銀 L の代替（h1 は .lp h2, .lp h3 の指定外） */
  font-size: 48px;
  letter-spacing: 7.2px;
  line-height: 1.5;
  white-space: nowrap;
}
.supplement .lp-hero__badges { margin-top: 24px; }
/* 「NMN1日あたり 280ml~ 560ml」は 3 段を 22px 送りで詰めて組む。 */
.supp-badge__xs {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.supp-badge__amount {
  font-family: 'Forum', serif;
  font-size: 24px;
  line-height: 22px;
}

/* =====================================================
   最近こんな変化、感じていませんか？
   ===================================================== */
.supp-worries {
  padding-top: 110px;
  color: #fff;
}
/* 吹き出し 320 × 143 を 2 列に置き、2 段目を右へ 96px ずらして
   デザインの散らした配置にする（全体 766px 幅で中央）。 */
.supp-worries__list {
  display: grid;
  grid-template-columns: repeat(2, 320px);
  column-gap: 30px;
  row-gap: 25px;
  width: 766px;
  max-width: 100%;
  margin: 49px auto 0;
}
.supp-bubble {
  position: relative;
  height: 143px;
  padding-bottom: 13px; /* しっぽの半円（13px）を除いた 130px の中で縦中央 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url('../supp-bubble-left.svg') no-repeat 0 0 / 100% 100%;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1.6;
}
.supp-bubble.is-tail-right { background-image: url('../supp-bubble-right.svg'); }
/* しっぽの先の小さな丸（白 30%、吹き出しの 4px 下）。 */
.supp-bubble::after {
  content: "";
  position: absolute;
  top: 147px;
  left: 56px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.supp-bubble.is-tail-right::after { left: 242px; }
.supp-bubble:nth-child(1) { margin-top: 31px; }
.supp-bubble:nth-child(3) { margin-top: 32px; }
.supp-bubble:nth-child(n + 3) { transform: translateX(96px); }
.supp-worries__message {
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin-top: 56px;
  text-align: center;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 3.9px;
  line-height: 1.8;
}
@media (max-width: 1023px) {
  /* 狭い画面ではずらしをやめ、縦 1 列に積む。 */
  .supp-worries__list {
    grid-template-columns: minmax(0, 320px);
    justify-content: center;
    row-gap: 20px;
  }
  .supp-bubble:nth-child(n) {
    margin-top: 0;
    transform: none;
  }
}

/* =====================================================
   NMNとは？
   ===================================================== */
.supp-nmn {
  padding: 60px 40px 0;
  color: #fff;
  text-align: center;
}
/* 白 20% 塗り＋白 1px 枠の 1120px の箱。 */
.supp-nmn__box {
  padding: 31px 39px 58px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
}
.supp-nmn__title {
  font-size: 28px;
  letter-spacing: 4.2px;
  line-height: 1.5;
}
.supp-nmn__body {
  margin-top: 17px;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.6;
}
.supp-nmn__sub {
  margin-top: 26px;
  font-size: 18px;
  letter-spacing: 2.7px;
  line-height: 1.5;
}
/* 役割 3 つ：Forum の大きな番号の下半分に白 55% の帯が重なる。 */
.supp-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: center;
  gap: 40px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}
.supp-role { display: grid; }
.supp-role > * { grid-area: 1 / 1; }
.supp-role__name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  margin-top: 29px;
  padding: 6px 8px 0;
  background: rgba(255, 255, 255, 0.55);
  color: #3c3c3c;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1.8px;
  line-height: 1.6;
}
.supp-role__no {
  position: relative; /* 帯より手前に出す */
  align-self: start;
  justify-self: center;
  font-family: 'Forum', serif;
  font-size: 48px;
  line-height: 1.13;
}
@media (max-width: 1023px) {
  .supp-nmn { padding-left: 0; padding-right: 0; }
  .supp-roles { grid-template-columns: minmax(0, 320px); row-gap: 20px; }
}

/* =====================================================
   なぜ、水素サプリNMN配合なのか
   ===================================================== */
.supp-why {
  padding-top: 180px;
  color: #fff;
  text-align: center;
}
.supp-why__body {
  max-width: 1120px;
  margin: 30px auto 0;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 2.3;
}
/* 330px の円 2 つを × でつなぐ（円と × の間は 30px）。 */
.supp-why__pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 41px;
}
.supp-why__cross {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.supp-circle {
  flex-shrink: 0;
  width: 330px;
  height: 330px;
  padding-top: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  line-height: 1.5;
}
/* NMN は黄、水素は青の放射グラデーション（中心 → 外周）。 */
.supp-circle.is-nmn { background: radial-gradient(circle closest-side, #ecce49 0%, #e1bf25 70%, #c9a400 100%); }
.supp-circle.is-h2 { background: radial-gradient(circle closest-side, #54cce7 0%, #09a2c4 70%, #029dbf 100%); }
.supp-circle__label {
  font-size: 20px;
  letter-spacing: 3px;
}
.supp-circle__text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  letter-spacing: 3.6px;
}
.supp-why__message {
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin-top: 30px;
  font-weight: 300;
  font-size: 30px;
  letter-spacing: 4.5px;
  line-height: 1.8;
}

/* =====================================================
   NMN配合量・品質 5 つの特徴
   ===================================================== */
.supp-features {
  padding-top: 180px;
  color: #fff;
}
.supp-features__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 20px;
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.5;
}
.supp-features__main {
  font-size: 46px;
  letter-spacing: 6.9px;
}
/* 製品写真のまわりに 170px の円 5 つを弧状に並べる。
   デザインの 726 × 541px の配置を % に置き換え、幅に合わせて縮むようにしている
   （円・写真の位置は装飾的な重ね合わせなので絶対配置）。 */
.supp-features__figure {
  position: relative;
  width: 726px;
  max-width: 100%;
  aspect-ratio: 726 / 541;
  margin: 68px auto 0;
}
.supp-features__product {
  position: absolute;
  left: 37.6%;
  top: 0;
  width: 23.7%;
  height: auto;
}
.supp-feature {
  position: absolute;
  width: 23.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 18px;
  letter-spacing: 2.7px;
  line-height: 1.5;
}
.supp-feature:nth-child(1) { left: 0;     top: 11.6%; }
.supp-feature:nth-child(2) { left: 6.9%;  top: 50.6%; }
.supp-feature:nth-child(3) { left: 38.3%; top: 68.6%; }
.supp-feature:nth-child(4) { left: 69.8%; top: 50.6%; }
.supp-feature:nth-child(5) { left: 76.6%; top: 11.6%; }

/* =====================================================
   比較項目
   ===================================================== */
.supp-compare {
  padding-top: 180px;
  color: #fff;
}
.supp-compare__title { margin-bottom: 30px; }
/* 表は 804px 相当。画面が狭いときは表だけ横スクロールさせる。 */
.supp-compare__scroll {
  max-width: 804px;
  margin: 0 auto;
  overflow-x: auto;
}
/* セル同士の 2px の隙間は border-spacing で作り、外周の 2px は負マージンで相殺する
   （フレスカページの比較表と同じ作り）。 */
.supp-table {
  width: 100%;
  min-width: 804px;
  border-collapse: separate;
  border-spacing: 2px;
  margin: -2px;
  table-layout: fixed;
  color: #fff;
}
/* 見出し列 160px / 自社・他社 320px ずつ。 */
.supp-table__col-label { width: 20%; }
.supp-table th,
.supp-table td {
  padding: 17px 8px;
  text-align: center;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.2);
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.8px;
  line-height: 1.6;
}
/* 見出し行・見出し列は白 30%、自社列（NMN×水素サプリ）は茶色で強調する。 */
.supp-table thead th,
.supp-table thead td,
.supp-table tbody th { background: rgba(255, 255, 255, 0.3); }
.supp-table thead th.is-own { background: rgba(169, 132, 94, 0.5); }
.supp-table tbody td.is-own { background: rgba(169, 132, 94, 0.4); }
.supp-table thead th,
.supp-table tbody th {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
}
.supp-table thead th { padding: 5px 8px; }
.supp-table tbody th { line-height: 1.5; }
/* 自社列の見出しは製品写真（21 × 39）＋名前。 */
.supp-table__product {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  white-space: nowrap;
}
.supp-table__product img {
  width: 21px;
  height: 39px;
  object-fit: contain;
}

/* =====================================================
   締め（骨組みは lp.css）
   ===================================================== */
/* 写真は左に製品、右にコピー。デザインのコピーは x=716（コンテナから 676px 内側）。
   padding の % はグリッド領域（セクション全幅 1280px）が基準なので 676 / 1280 = 52.8%。 */
.supplement .lp-closing__bg { object-position: 44% 50%; }
.supplement .lp-closing__copy { padding: 69px 0 60px 52.8%; }
.supplement .lp-closing__name { margin-top: 28px; }
@media (max-width: 1023px) {
  .supplement .lp-closing__copy { padding-left: 40%; }
}

/* =====================================================
   レスポンシブ
   - max-width: 767px … Figma「SP-水素の杜-水素サプリ」(238:4041 / 375px) の実寸。
   ※ lp-hero / lp-faq / lp-closing / lp-cta は入浴剤・FAQ・お問い合わせページと
     共通のため、SP 指定はすべて .supplement に限定して他ページに波及させない。
   ===================================================== */
@media (max-width: 767px) {

  /* 本文幅はセクション側の padding: 0 20px（＝ 375 - 40 = 335px）で作る。 */
  .supplement .l-container {
    width: 100%;
    max-width: none;
  }
  .supp-worries__title,
  .supp-why__title,
  .supp-compare__title {
    font-size: 26px;
    letter-spacing: 2.6px;
  }

  /* --- ヒーロー --- */
  /* SP はコピーを写真に重ねず、写真（555px）の下端に 99px かぶせて置く。 */
  .supplement .lp-hero {
    display: block;
    min-height: 0;
    margin-top: -94px;
    overflow: visible;
  }
  .supplement .lp-hero__bg {
    height: 555px;
    object-position: 37% 50%;
  }
  .supplement .lp-hero__veil { display: none; }
  .supplement .lp-hero__copy {
    /* grid → block に戻したので、grid 用の配置指定も解除する。 */
    justify-self: stretch;
    align-self: auto;
    width: auto;
    margin: -99px 0 0;
  }
  .supp-hero__eyebrow {
    margin-left: 18px;
    font-size: 16px;
    letter-spacing: 2.4px;
    line-height: 1.7;
  }
  .supp-hero__title {
    margin: 2px 0 0 17px;
    font-size: 32px;
    letter-spacing: 4.8px;
    line-height: 1.2;
  }
  /* 丸バッジは 107px × 3 ＋ 隙間 7px × 2 = 335px でちょうど本文幅に収まる。 */
  .supplement .lp-hero__badges {
    gap: 7px;
    margin: 17px 0 0 20px;
  }
  .supplement .lp-badge { width: 107px; height: 107px; }
  .supplement .lp-badge__sm { font-size: 15px; letter-spacing: 2.25px; }
  .supp-badge__xs { font-size: 11px; letter-spacing: 0.5px; }
  .supp-badge__amount { font-size: 20px; line-height: 18px; }
  .supplement .lp-badge__unit { font-size: 12.8px; }
  /* 購入ボタンと注記は 280px で中央に置く。 */
  .supplement .lp-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .supplement .lp-cta .lp-note { max-width: 280px; }
  .supplement .lp-hero .lp-cta { margin: 38px 0 0; }

  /* --- 最近こんな変化、感じていませんか？ --- */
  .supp-worries { padding: 110px 20px 0; }
  /* 吹き出し（253 × 113px）を 1 列で左右交互に置く。
     並び順は .is-tail-* ではなく奇数・偶数で決める（デザインのジグザグに合わせる）。 */
  .supp-worries__list {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    row-gap: 0;
    column-gap: 0;
    margin-top: 36px;
  }
  .supp-bubble:nth-child(n) {
    height: 126px;
    margin-top: 0;
    transform: none;
    padding: 0 82px 13px 0;
    background-image: url('../supp-bubble-left.svg');
    background-size: 253px 113px;
    background-position: 0 0;
    font-size: 15.8px;
    letter-spacing: 2.37px;
  }
  .supp-bubble:nth-child(even) {
    padding: 0 0 13px 82px;
    background-image: url('../supp-bubble-right.svg');
    background-position: 100% 0;
  }
  /* しっぽの先の小さな丸。 */
  .supp-bubble:nth-child(n)::after {
    top: 116px;
    left: 44px;
    width: 9.5px;
    height: 9.5px;
  }
  .supp-bubble:nth-child(even)::after { left: auto; right: 52px; }
  .supp-worries__message {
    margin-top: 36px;
    font-size: 18px;
    letter-spacing: 2.7px;
    line-height: 2;
  }

  /* --- NMNとは？ --- */
  .supp-nmn { padding: 36px 20px 0; }
  .supp-nmn__box { padding: 30px 20px; }
  .supp-nmn__title { font-size: 20px; letter-spacing: 3px; }
  .supp-nmn__body {
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }
  .supp-nmn__sub {
    margin-top: 30px;
    font-size: 14px;
    letter-spacing: 2.1px;
  }
  .supp-roles {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    margin-top: 10px;
  }
  .supp-role__name {
    min-height: 64px;
    margin-top: 29px;
    font-size: 16px;
    letter-spacing: 1.6px;
  }

  /* --- なぜ、水素サプリNMN配合なのか --- */
  .supp-why { padding: 100px 20px 0; }
  .supp-why__body {
    margin-top: 36px;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 2.2;
    text-align: left;
  }
  /* 円は横並びのまま 141.73px に縮める（× を挟んで左右 12.9px）。 */
  .supp-why__pair {
    flex-direction: row;
    gap: 12.9px;
    margin-top: 36px;
  }
  .supp-circle {
    width: 141.73px;
    height: 141.73px;
    padding-top: 41px;
    gap: 2.5px;
  }
  .supp-circle__label { font-size: 16px; letter-spacing: 2.4px; }
  .supp-circle__text { font-size: 12px; letter-spacing: 1.8px; }
  .supp-why__cross { width: 25.77px; height: 25.77px; }
  .supp-why__message {
    margin-top: 36px;
    font-size: 18px;
    letter-spacing: 2.7px;
    line-height: 2;
  }

  /* --- NMN配合量・品質 5 つの特徴 --- */
  /* 弧状の配置はデザインどおり SP でも維持する（比率が PC と同じなので
     コンテナ幅を 100% にするだけで縮む）。文字サイズだけ落とす。 */
  .supp-features { padding: 100px 20px 0; }
  .supp-features__title {
    flex-direction: column;
    /* 縦積みにすると PC 用の align-items: baseline が横方向の揃えになるため、
       中央寄せに上書きする。 */
    align-items: center;
    gap: 0;
    font-size: 26px;
    letter-spacing: 2.6px;
  }
  .supp-features__main { font-size: 26px; letter-spacing: 2.6px; }
  .supp-features__figure { margin-top: 36px; }
  .supp-feature { font-size: 10px; letter-spacing: 1.5px; }
  /* 1 つ目だけ 4 行入るので一段小さく。 */
  .supp-feature:nth-child(1) { font-size: 8.3px; letter-spacing: 1.25px; }

  /* --- 比較項目 --- */
  /* SP は 335px に収まる寸法なので横スクロールは不要。 */
  .supp-compare { padding: 100px 20px 0; }
  .supp-compare__title { margin-bottom: 36px; }
  .supp-compare__scroll { overflow-x: visible; }
  .supp-table { min-width: 0; }
  .supp-table__col-label { width: 22.8%; }
  .supp-table th,
  .supp-table td {
    padding: 6px 4px;
    font-size: 12px;
    letter-spacing: 0.6px;
  }
  .supp-table thead th,
  .supp-table tbody th { font-size: 12px; letter-spacing: 1.8px; }
  .supp-table__product { gap: 6px; }

  /* --- よくある質問 --- */
  .supplement .lp-faq { padding: 100px 20px 140px; }
  .supplement .lp-faq .lp-split {
    flex-direction: column;
    gap: 36px;
    padding: 0;
  }
  .supplement .lp-faq .lp-split__title {
    width: auto;
    text-align: center;
    font-size: 26px;
    letter-spacing: 2.6px;
    line-height: 1.5;
  }
  .supplement .lp-faq .lp-split__list { gap: 20px; margin-top: 0; }
  .supplement .lp-faq__q {
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    font-size: 14px;
    letter-spacing: 2.1px;
  }
  .supplement .lp-faq__toggle { margin-top: 3px; }
  .supplement .lp-faq__a {
    margin-top: -20px;
    padding: 0 20px 20px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  /* --- 締め --- */
  /* SP は写真にコピーを重ねず、写真（392px）の下に置く。 */
  .supplement .lp-closing {
    display: block;
    min-height: 0;
  }
  .supplement .lp-closing__bg {
    height: 392px;
    object-position: 18% 50%;
  }
  .supplement .lp-closing__copy {
    width: 100%;
    max-width: none;
    padding: 32px 20px 62px;
  }
  .supplement .lp-closing__message {
    gap: 15px;
    font-size: 16px;
    letter-spacing: 2.4px;
    line-height: 1.8;
  }
  .supplement .lp-closing__name {
    margin-top: 20px;
    font-size: 24px;
    letter-spacing: 3.6px;
  }
  .supplement .lp-closing .lp-cta { margin-top: 60px; }
}