/* ==========================================================================
   BODY MAINTE — base.css
   共通デザインシステム：トークン / リセット / タイポグラフィ / 共通部品
   ブレークポイント：1000px（PC: min-width 1000px / SP: max-width 999px）
   値の出典：Figma「BODY MAINTE - Brand Site | Dev」design (260917)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* color（Figma カラースタイル名を併記） */
  --c-black: #000;            /* black */
  --c-text: #000;             /* 本文もすべて黒 */
  --c-white: #fff;            /* white */
  --c-bg: #e1e6e3;            /* Green pale：ページ背景 */
  --c-lime: #c4fa64;          /* Green Mint：ブランドカラー */
  --c-green-deep: #1b5636;    /* green deep */
  --c-green-light: #6b9a0a;   /* Green light：ヒーローの強調文字 */
  --c-gray-1: #c4c4c4;        /* gray 1 */
  --c-gray-2: #f2f2f2;        /* gray 2：モーダルの表の行背景 */
  --c-gray-3: #929292;        /* gray 3 */
  --c-amber: #edede2;         /* green amber */
  --c-line: #e1e6e3;          /* カード内の罫線は背景色と同じ */
  --c-placeholder: #d9d9d9;   /* 画像プレースホルダー */
  --c-focus: #000;

  /* typography */
  --ff-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --ff-hero: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ff-en: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --fs-base: 1rem;
  --lh-body: 1.5;
  --ls-body: 0.05em;

  /* layout */
  --w-max: 1440px;        /* デザイン幅。これを超えたら中央固定で左右余白が伸びる */
  --w-content: 1180px;    /* TOP の製品カード列など */
  --w-card: 1320px;       /* PRODUCTS / FEATURE の大カード（左右 60px） */
  --w-card-wide: 1380px;  /* TOP SPECIAL カード（左右 30px） */
  --gutter: 40px;
  --header-h: 100px;
  --radius-card: 10px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

@media only screen and (max-width: 999px) {
  :root {
    --fs-base: 0.875rem;
    --gutter: 25px;
    --header-h: 65px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  color: var(--c-text);
  font-family: var(--ff-ja);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, table {
  margin: 0;
}

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

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

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

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

button {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

sup {
  font-size: 0.6em;
  line-height: 1;
  vertical-align: super;
}

small {
  font-size: 0.8em;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--c-lime);
  color: var(--c-black);
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-pc { display: block; }
.u-sp { display: none; }

br.u-pc,
br.u-sp {
  display: inline;
}

br.u-sp {
  display: none;
}

@media only screen and (max-width: 999px) {
  .u-pc { display: none; }
  .u-sp { display: block; }

  br.u-pc {
    display: none;
  }

  br.u-sp {
    display: inline;
  }
}

/* 注釈：13px / 1.57 / 字間なし（SP 12px） */
.u-note {
  font-size: 0.8125rem;
  line-height: 1.57;
  letter-spacing: 0;
}

/* 欧文（Oswald） */
.u-en {
  font-family: var(--ff-en);
}

@media only screen and (max-width: 999px) {
  .u-note {
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.l-wrapper {
  position: relative;
  max-width: var(--w-max);
  margin: 0 auto;
  overflow: clip;
}

.l-inner {
  width: min(100% - var(--gutter) * 2, var(--w-content));
  margin-inline: auto;
}

/* 大カード幅（PC 1320 / SP 355） */
.l-inner--card {
  width: min(100% - 120px, var(--w-card));
}

/* SPECIAL カード幅（PC 1380 / SP 355） */
.l-inner--wide {
  width: min(100% - 60px, var(--w-card-wide));
}

.l-main {
  position: relative;
}

@media only screen and (max-width: 999px) {
  .l-inner--card,
  .l-inner--wide {
    width: min(100% - 20px, var(--w-card));
  }
}

/* --------------------------------------------------------------------------
   5. Skip link
   -------------------------------------------------------------------------- */
.c-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  color: var(--c-white);
  background: var(--c-black);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform 0.2s;
}

.c-skip:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   6. Header
   PC：ロゴ 100×100（黄緑、下角 5px）／ナビは白 40% + ぼかしのピル 50px
   SP：ロゴ 60×60／メニューボタン 46×46（白 40% + ぼかし）
   -------------------------------------------------------------------------- */
/* ロゴとナビ（SP はロゴとメニューボタン）をスクロールに追従させる（PC・SP 共通）。
   sticky で文書の流れに残し、負のマージンで従来どおり本文に重ねる */
.c-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  margin-bottom: calc(var(--header-h) * -1);
  pointer-events: none;
}

.c-header__inner {
  position: relative;
  max-width: var(--w-max);
  height: 100%;
  margin: 0 auto;
}

.c-header__logo {
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: 100px;
  height: 100px;
  pointer-events: auto;
}

.c-header__logo a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--c-lime);
  border-radius: 0 0 5px 5px;
}

.c-header__logo img {
  width: 67px;
  height: auto;
}

.c-header__nav {
  position: absolute;
  top: 25px;
  right: var(--gutter);
  pointer-events: auto;
}

.c-nav__list {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 50px;
  padding: 5px;
  background: rgb(255 255 255 / 40%);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.c-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

/* 区切り線：1px × 30px（背景色と同じ #e1e6e3） */
.c-nav__item--sep::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: 30px;
  margin-right: 20px;
  background: var(--c-line);
}

.c-nav__link {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  font-family: var(--ff-en);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background-color 0.25s;
}

.c-nav__link:hover,
.c-nav__link[aria-current="page"] {
  background: rgb(255 255 255 / 80%);
}

.c-nav__text {
  display: none;
}

.c-nav__cart {
  display: grid;
  place-items: center;
  width: 68px;
  height: 40px;
  background: var(--c-lime);
  border-radius: var(--radius-pill);
  transition: transform 0.25s var(--ease-out);
}

.c-nav__cart:hover {
  transform: scale(1.06);
}

.c-nav__cart svg {
  width: 28px;
  height: 28px;
}

.c-nav__cart-label {
  display: none;
}

.c-nav__chevron {
  display: none;
}

.c-header__toggle {
  display: none;
}

@media only screen and (max-width: 999px) {
  .c-header__logo {
    left: 10px;
    width: 60px;
    height: 60px;
  }

  .c-header__logo img {
    width: 40px;
  }

  /* 展開メニュー上でも左上にTOPへ戻るロゴを表示 */
  .is-nav-open .c-header__logo {
    z-index: 130;
  }

  .c-header__toggle {
    position: absolute;
    top: 10px;
    right: 9px;
    z-index: 130;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: rgb(255 255 255 / 40%);
    border-radius: 50%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: auto;
  }

  /* 3本線：16px / 16px / 10px（右揃え）、太さ 2px、間隔 6px */
  .c-header__toggle-bars {
    position: relative;
    display: block;
    width: 16px;
    height: 14px;
  }

  .c-header__toggle-bars::before,
  .c-header__toggle-bars::after,
  .c-header__toggle-bars span {
    content: "";
    position: absolute;
    right: 0;
    height: 2px;
    background: var(--c-black);
    transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out), width 0.3s, opacity 0.3s;
  }

  .c-header__toggle-bars::before { top: 0; width: 16px; }
  .c-header__toggle-bars span { top: 6px; width: 16px; }
  .c-header__toggle-bars::after { top: 12px; width: 10px; }

  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars::before {
    top: 6px;
    transform: rotate(45deg);
  }

  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars span {
    opacity: 0;
  }

  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars::after {
    top: 6px;
    width: 16px;
    transform: rotate(-45deg);
  }

  /* 展開メニュー：背景 #e1e6e3、ナビ幅 315px */
  .c-header__nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    padding: calc(var(--header-h) + 40px) 30px 40px;
    background: var(--c-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    overflow-y: auto;
  }

  /* 開くときは visibility を即座に切り替え、キーボードで開いた直後に先頭リンクへフォーカスできるようにする */
  .c-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0s;
  }

  .c-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100%, 315px);
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .c-nav__item {
    display: block;
  }

  /* グループ区切り：白 1px 線。項目の行送り 58px、区切りをまたぐ行送り 78px（Figma） */
  .c-nav__item--sep {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--c-white);
  }

  .c-nav__item--sep::before {
    display: none;
  }

  /* 1項目 58px（min-height は下の Unified の .c-nav__link で指定）。
     カレントの白背景（PC と同じピル形）に余白を持たせるため左右 15px はみ出させる */
  .c-nav__link {
    position: relative;
    justify-content: flex-start;
    gap: 10px;
    margin-inline: -15px;
    padding: 0 35px 0 15px;
    font-size: 2.375rem;
    font-weight: 200;
    letter-spacing: -0.01em;
    border-radius: var(--radius-pill);
  }

  .c-nav__link:hover {
    background: none;
    text-decoration: none;
  }

  /* カレント：PC と同じ薄い白を敷く */
  .c-nav__link[aria-current="page"] {
    background: rgb(255 255 255 / 80%);
  }

  /* 和文ラベル：黒ピル 13px / 1.8 / 5%、左右 10px。幅をそろえて右側の列（375px 幅で x194〜310）に右揃え */
  .c-nav__text {
    display: inline-block;
    min-width: 116px;
    margin: 0 15px 0 auto;
    padding: 4px 10px;
    text-align: center;
    color: var(--c-white);
    font-family: var(--ff-ja);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-transform: none;
    background: var(--c-black);
    border-radius: var(--radius-pill);
  }

  /* 右端の矢印（5.3×10.5、線 1.83px） */
  .c-nav__chevron {
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    width: 6px;
    height: 11px;
    transform: translateY(-50%);
  }

  /* ONLINE STORE：315×50 黄緑ピル、Oswald Light 20px */
  .c-nav__item--cart {
    margin-top: 50px;
  }

  .c-nav__cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding: 5px 20px;
    font-family: var(--ff-en);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .c-nav__cart-label {
    display: block;
    flex: 1 1 auto;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   7. Section header（英字見出し 96px + 黒ピルの和文ラベル + 説明）
   PC：見出しの下にラベル（gap 10）、右に説明を下揃え（gap 70）
   SP：ラベルの上、見出し 65px、説明は下に縦積み（gap 25）
   -------------------------------------------------------------------------- */
.c-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 70px;
  row-gap: 20px;
}

.c-sec-head__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* 全ページ共通：黒い和文ラベル → 英字大見出し。 */
.c-sec-head__title > .c-tag {
  order: 0;
}

.c-sec-head__title > .c-en-title {
  order: 1;
}

.c-tag {
  display: inline-block;
  height: 29px;
  padding: 0 15px;
  color: var(--c-white);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8125rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
  background: var(--c-black);
  border-radius: var(--radius-pill);
}

.c-tag--outline {
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-black);
}

.c-en-title {
  font-family: var(--ff-en);
  font-size: 6rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.c-sec-head__lead {
  max-width: 520px;
  font-size: 1.375rem;
  line-height: 1.57;
  letter-spacing: 0.05em;
}

.c-sec-head__lead .u-note {
  display: block;
  margin-top: 10px;
}

@media only screen and (max-width: 999px) {
  .c-sec-head {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 25px;
  }

  .c-sec-head__title .c-tag {
    order: 0;
  }

  .c-tag {
    height: 26px;
    font-size: 0.875rem;
    line-height: 1.625rem;
  }

  .c-en-title {
    font-size: 4.0625rem;
  }

  .c-sec-head__lead {
    max-width: none;
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .c-sec-head__lead .u-note {
    margin-top: 5px;
  }
}

/* --------------------------------------------------------------------------
   8. Buttons（200×60、白、黒 1px 枠、ピル、右に黒丸 40px の矢印）
   -------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 200px;
  height: 60px;
  padding: 10px 10px 10px 25px;
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.05em;
  background: var(--c-white);
  border: 1px solid var(--c-black);
  border-radius: var(--radius-pill);
  transition: background-color 0.25s;
}

.c-btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--c-bg);
  background: var(--c-black);
  border-radius: 50%;
}

/* 矢印：6×13、線 2px */
.c-btn__icon svg {
  width: 8px;
  height: 15px;
}

.c-btn--plus .c-btn__icon svg {
  width: 15px;
  height: 15px;
}

.c-btn:hover {
  background: var(--c-lime);
}

/* 丸アイコンのみ（製品名の横の矢印） */
.c-circle-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--c-bg);
  background: var(--c-black);
  border-radius: 50%;
  vertical-align: middle;
}

.c-circle-icon svg {
  width: 8px;
  height: 15px;
}

@media only screen and (max-width: 999px) {
  .c-btn {
    height: 59px;
    padding: 12px 12px 12px 22px;
    font-size: 0.9375rem;
  }

  .c-btn__icon {
    width: 35px;
    height: 35px;
  }

  .c-circle-icon {
    width: 35px;
    height: 35px;
  }
}

/* --------------------------------------------------------------------------
   9. Labels / pills（成分ラベル、風味、注記枠、箸書きリスト）
   -------------------------------------------------------------------------- */

/* 成分ピル：110×50、黄緑／白+黄緑 2px 枠。和文 Medium 17px、英数 Oswald 17px */
.c-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 110px;
  height: 50px;
  padding: 0 14px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-radius: var(--radius-pill);
}

.c-pill .u-en {
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* 単位「g」：Oswald は二階建て字形のため和文書体の一階建て字形で表示 */
.c-pill__unit {
  margin-left: -0.05em;
  font-weight: 500;
}

.c-pill--lime {
  background: var(--c-lime);
}

.c-pill--outline {
  background: var(--c-white);
  border: 2px solid var(--c-lime);
}

/* 風味タグ：高さ 29px、黒 1px 枠 */
.c-flavor {
  display: inline-block;
  height: 29px;
  padding: 0 15px;
  font-size: 1rem;
  line-height: 1.6875rem;
  letter-spacing: 0;
  border: 1px solid var(--c-black);
  border-radius: var(--radius-pill);
}

/* 注記枠：黒 1px 枠、13px */
.c-boxnote {
  display: inline-block;
  padding: 2px 5px;
  font-size: 0.8125rem;
  line-height: 1.57;
  letter-spacing: 0;
  border: 1px solid var(--c-black);
}

/* 成分の組み合わせ表示：[乳酸菌B240] 体調管理を + [電解質] こだわりの… */
.c-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.c-formula__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.c-formula__desc {
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.c-formula__plus {
  font-family: var(--ff-en);
  font-size: 3.75rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* 箸書きリスト（黄緑ドット 10px） */
.c-dotlist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-dotlist li {
  position: relative;
  padding-left: 20px;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-dotlist li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--c-lime);
  border-radius: 50%;
}

@media only screen and (max-width: 999px) {
  .c-pill {
    font-size: 1rem;
  }

  .c-flavor {
    height: 25px;
    padding: 0 10px;
    font-size: 0.875rem;
    line-height: 1.4375rem;
  }

  .c-boxnote {
    font-size: 0.75rem;
  }

  .c-formula__desc {
    font-size: 0.8125rem;
  }

  .c-formula__plus {
    font-size: 2.1875rem;
  }

  .c-dotlist {
    gap: 8px;
  }

  .c-dotlist li {
    padding-left: 14px;
    font-size: 0.875rem;
  }

  .c-dotlist li::before {
    top: 0.5em;
    width: 7px;
    height: 7px;
  }
}

/* --------------------------------------------------------------------------
   10. Card（白、角丸 10px）
   -------------------------------------------------------------------------- */
.c-card {
  background: var(--c-white);
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------------------
   11. Decorative leaves（散らした茶葉の写真。装飾のため alt=""）
   -------------------------------------------------------------------------- */
.c-leaf {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.c-leaf img {
  width: 100%;
}

/* --------------------------------------------------------------------------
   12. AskDoctors
   -------------------------------------------------------------------------- */
.c-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.c-ask__mark {
  flex: 0 0 auto;
  width: 110px;
}

.c-ask__body {
  flex: 1 1 0;
}

.c-ask__title {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.57;
  letter-spacing: 0.05em;
}

.c-ask__notes {
  flex: 0 0 100%;
  margin-top: -20px;
  padding-left: 140px;
  letter-spacing: 0.05em;
}

@media only screen and (max-width: 999px) {
  .c-ask {
    flex-wrap: wrap;
    gap: 15px;
  }

  .c-ask__mark {
    width: 90px;
  }

  .c-ask__body {
    flex: 1 1 0;
  }

  .c-ask__title {
    font-size: 1.125rem;
    line-height: 1.6;
    letter-spacing: 0;
  }

  .c-ask__notes {
    margin-top: 0;
    padding-left: 0;
    text-align: justify;
  }
}

/* --------------------------------------------------------------------------
   13. Link tiles（PRODUCT / 公式通販サイト）
   白カード 960px（pad 50/60/30）、タイル 400×400 角丸 10px、gap 40
   -------------------------------------------------------------------------- */
.c-links {
  width: min(100% - var(--gutter) * 2, 960px);
  margin: 0 auto;
  padding: 50px 60px 30px;
}

.c-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: 40px;
}

.c-tile {
  display: block;
}

.c-tile__visual {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, rgb(240 240 240 / 30%) 0%, rgb(225 230 227 / 70%) 100%) var(--c-white);
  border-radius: var(--radius-card);
}

.c-tile__visual img {
  position: absolute;
  width: auto;
}

/* 1枚画像のタイル：地・製品・影などをデザインから1枚の画像に書き出したもの
   （通販 Figma 6447:20912／FEATURE の製品情報 6447:21744／SP の企業インタビュー 6447:24336） */
.c-tile__visual--shop {
  background: var(--c-lime);
}

.c-tile__visual--shop img,
.c-tile__visual--image img {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* FEATURE タイル：背景色の地に茶葉、円形の顕微鏡写真（70%）、製品 */
.c-tile__visual--feature {
  background: var(--c-bg);
}

.c-tile__leaves {
  top: 0;
  left: -8%;
  height: 100%;
}

.c-tile__circle {
  top: 12%;
  left: 18.75%;
  width: 62.5%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.7;
}

.c-tile__label {
  display: block;
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

@media only screen and (max-width: 999px) {
  .c-links {
    width: min(100% - 20px, 960px);
    padding: 15px;
  }

  .c-links__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* --------------------------------------------------------------------------
   14. Page top（40×60 の黒ピル、矢印は背景色）
   -------------------------------------------------------------------------- */
/* 追従範囲はフッターの上まで（--pagetop-lift は common.js がフッターの見えている高さを設定）。
   位置は Figma どおり 下 10px・右 PC 20px / SP 10px（フッターの上の帯 70px ＝ ボタン 60px ＋ 下 10px） */
.c-pagetop {
  position: fixed;
  right: 20px;
  bottom: calc(10px + var(--pagetop-lift, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 40px;
  height: 60px;
  color: var(--c-bg);
  background: var(--c-black);
  border-radius: var(--radius-pill);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease-out);
}

.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* メニューを開いている間は隠す（TOP など .l-wrapper が重なりの基準になるページでメニューの上に出るため）。
   開いた瞬間に消す（transition が効くと約0.3秒見えたままになるため）。閉じたときは通常の transition で戻る */
.is-nav-open .c-pagetop {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.c-pagetop svg {
  width: 16px;
  height: 18px;
}

@media only screen and (max-width: 999px) {
  .c-pagetop {
    right: 10px;
  }
}

/* --------------------------------------------------------------------------
   15. Footer wrapper（本体は共通フッター /bdm/footer/css/footer.css）
   -------------------------------------------------------------------------- */
.l-footer {
  position: relative;
  z-index: 1;
}

/* 本文の字間（body の letter-spacing）を共通フッターに継承させない。
   SP の「個人情報の取り扱いについて」（10px×13字）が 130px の枠内で改行されるのを防ぐ */
.footer {
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   16. Reveal animation（スクロール時のフェードイン）
   -------------------------------------------------------------------------- */
.js-reveal.is-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js-reveal {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Unified: text expansion without clipping; 1000px remains the sole layout breakpoint. */
.c-tag, .c-flavor, .c-pill, .c-btn { height: auto; }
.c-tag { min-height: 29px; line-height: 1.8; white-space: normal; }
.c-flavor { min-height: 29px; line-height: 1.7; }
.c-pill { min-height: 50px; line-height: 1.5; white-space: normal; }
.c-btn { min-height: 60px; line-height: 1.5; }
.c-formula__item { min-width: 0; }
.c-formula__desc { white-space: normal; }
.c-links { position: relative; z-index: 1; }
.c-sec-head__lead { overflow-wrap: anywhere; }
.c-sec-head__lead .u-note { display: block; margin-top: 10px; }
@media only screen and (max-width: 999px) {
  .c-nav__list { max-width: 100%; }
  .c-nav__link { height: auto; min-height: 58px; flex-wrap: wrap; }
  .c-tag, .c-flavor { min-height: 25px; }
  .c-btn { min-width: 0; min-height: 59px; }
}

.u-keep { display: inline-block; }



/* Long labels may wrap when the reader enlarges their default font. */
.c-sec-head__title { min-width: 0; max-width: 100%; }
.c-en-title { max-width: 100%; overflow-wrap: anywhere; }
.c-sec-head { min-width: 0; }
.c-sec-head__lead { min-width: 0; max-width: 100%; }
@media only screen and (max-width: 999px) {
  .c-nav__en { min-width: 0; overflow-wrap: anywhere; }
  .c-nav__link { overflow-wrap: anywhere; }
}


/* SVG logos keep their original proportions inside constrained mobile rows. */
.p-product__name img, .p-lineup__name img, .p-detail__name img { object-fit: contain; }

/* PC ingredient rows: Figma 2479:18806 / 18847, 2484:6801 / 6825.
   Keep each badge beside its two-line description; scale within narrower PCs. */
@media only screen and (min-width: 1000px) {
  .c-btn {
    padding-block: 9px;
  }

  .c-formula:is(.p-product__formula, .p-lineup__formula) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.694444cqw, 10px);
    padding: 10px;
  }

  .c-formula:is(.p-product__formula, .p-lineup__formula) .c-formula__item {
    flex-direction: row;
    align-items: center;
    gap: clamp(6px, 0.694444cqw, 10px);
    text-align: left;
  }

  .c-formula:is(.p-product__formula, .p-lineup__formula) .c-formula__desc {
    font-size: clamp(0.6875rem, 1.041667cqw, 0.9375rem);
    white-space: nowrap;
  }

  .c-formula:is(.p-product__formula, .p-lineup__formula) .c-pill {
    flex: 0 0 auto;
    min-width: clamp(76px, 7.638889cqw, 110px);
    height: 50px;
    padding-inline: clamp(5px, 0.694444cqw, 10px);
    font-size: clamp(0.75rem, 1.180556cqw, 1.0625rem);
  }

  .c-formula:is(.p-product__formula, .p-lineup__formula) .c-formula__plus {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(2.625rem, 4.166667cqw, 3.75rem);
  }
}