@charset "UTF-8";
/*
  眼力 トップページ（index.html）の CSS
  PC・SP 共通。スマホを基準に書き、768px 以上で PC の配置に切り替える。
  色・書体はいったんの仮。ブランドカラーが決まったら :root の変数だけを書き換える。
  2026-10-29：パッケージの紫に合わせて、メインの色を紫・マーカーをマリーゴールドの黄に寄せた（まだ仮）。
*/

:root {
    --c-main: #6b4a8b;        /* 仮：メインの色（見出しの帯・ボタン）。パッケージの紫 */
    --c-main-dark: #523470;   /* 仮：ボタンを押したとき */
    --c-accent: #ffe7a3;      /* 仮：マーカー。マリーゴールドの黄 */
    --c-bg: #ffffff;
    --c-bg-sub: #f6f2f9;      /* 仮：区切りの背景 */
    --c-text: #333333;
    --c-text-sub: #666666;
    --c-line: #e4dcea;
    --c-mv-bg: #f5f1f8;       /* ファーストビューの地の色（模様は使わず、ぼかした光を重ねる） */
    --c-mv-ink: #3b2b4a;      /* ファーストビューの文字 */
    --ff-go: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
    --ff-min: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
    --wrap-max: 1520px;
    --gutter: 16px;
    /* ファーストビューより下の文字の大きさ（画面幅に合わせて伸ばす） */
    --fs-title: clamp(30px, 3.6vw, 60px);  /* 節の見出し */
    --fs-vttl: clamp(27px, 3.4vw, 56px);   /* 縦書きの見出し */
    --fs-h3: clamp(23px, 2.5vw, 42px);     /* 小見出し */
    --fs-sub: clamp(16px, 1.5vw, 24px);
    --fs-body: clamp(16px, 1.3vw, 21px);   /* 本文 */
    --sec-y: clamp(64px, 9vw, 150px);      /* 節の上下の余白 */
    --header-h: 101px;  /* スマホは2段（ロゴの段 52px＋メニューの段 49px）。768px 以上は1段で 72px */
}

/* ===== 土台 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-go);
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
.ff-go { font-family: var(--ff-go); }
.ff-min { font-family: var(--ff-min); }

/* ===== ヘッダー ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-mv-bg); /* ファーストビューの地の色とつなげる */
}
.header-inner {
    display: flex;
    flex-wrap: wrap; /* スマホは2段：1段目にロゴとメニュー、2段目に読みもの・ご購入（まるごと青魚のスマホと同じ形） */
    align-items: center;
    max-width: 1440px; /* ファーストビューの幅とそろえ、ロゴと商品名の左端を合わせる */
    margin: 0 auto;
}
.header-logo { display: flex; align-items: center; flex: 1 1 auto; order: 1; min-width: 0; height: 52px; padding-left: var(--gutter); }
.header-logo a { display: block; text-decoration: none; }
/* 仮の文字ロゴ（ロゴ画像が決まったら消す） */
.logo-txt {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--c-mv-ink);
    font-size: 24px;
    font-weight: bold;
    letter-spacing: .08em;
    line-height: 1;
    white-space: nowrap;
}
.logo-txt-en { font-family: var(--ff-go); font-size: 11px; letter-spacing: .2em; }
.headerMenu {
    display: flex;
    flex: 0 0 100%;
    order: 3;
    min-width: 0;
    border-top: 1px solid var(--c-line);
    background: #fff;
}
.headerTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 50%;
    min-width: 0;
    min-height: 48px;
    padding: 8px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}
.headerTitle + .headerTitle { border-left: 1px solid var(--c-line); }
.headerTitle--buy {
    background: var(--c-main);
    color: #fff;
}
/* トップのヘッダー：ロゴとリンクをひとみ手帖（contents/css/techo.css の .head-link）にそろえる */
.site-header--techo .header-logo img { display: block; width: 156px; height: 32px; }
.site-header--techo .headerTitle { color: inherit; font-size: 16px; white-space: nowrap; }
.site-header--techo .headerTitle--buy { color: #fff; }
.site-header--techo .headerTitle:not(.headerTitle--buy):hover { color: var(--c-main); text-decoration: underline; text-underline-offset: 5px; }
.site-header--techo .headerTitle--buy:hover { background: var(--c-main-dark); }

.hamburger {
    order: 2;
    margin-right: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-text);
    cursor: pointer;
}
.hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform .3s, opacity .3s;
}
.hamburger-label { font-size: 9px; line-height: 1; }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.globalMenu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
    visibility: hidden;
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity .25s, transform .25s, visibility .25s;
}
.globalMenu.is-open { visibility: visible; transform: none; opacity: 1; }
.globalMenu-list { padding: 8px var(--gutter) 16px; }
.globalMenu-list > li { border-bottom: 1px solid var(--c-line); }
.globalMenu-list a {
    display: block;
    padding: 12px 4px;
    font-size: 14px;
    text-decoration: none;
}
.accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion .icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}
.accordion[open] .icon { transform: rotate(-135deg); }
.accordion-list { padding: 0 0 8px 12px; }
.accordion-list a { padding: 8px 4px; font-size: 13px; }

/* ===== ファーストビュー =====
   写真・文字の位置は .mv-stage に対する％で置く（.mv-stage は縦横比を固定しているので、画面幅が変わっても配置が崩れない）。
   スマホを基準にし、768px 以上で横長の配置に切り替える。
   ⚠人物は右を向いてスマホを見ているので、パッケージは必ず人物の右（目線の先）に置く。人物の右下（スマホ）に商品を重ねない */
.main-visual {
    position: relative;
    overflow: hidden;
    padding-bottom: 16px;
    /* 模様は使わず、薄いラベンダーの地に大きくぼかした光を置く（目が疲れないように、色の差はごく弱く） */
    background-color: var(--c-mv-bg);
    background-image:
        radial-gradient(ellipse 60% 45% at 12% 18%, rgba(205, 184, 228, .55), transparent 70%),
        radial-gradient(ellipse 50% 40% at 88% 78%, rgba(255, 221, 160, .45), transparent 70%),
        radial-gradient(ellipse 45% 35% at 62% 8%, rgba(255, 255, 255, .85), transparent 70%);
}
.mv-stage {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    aspect-ratio: 375 / 770; /* 縦書きの列の下から人物を始め、その下に商品と注記を置く */
}
.mv-photo { position: absolute; }
/* 丸みのある不定形に切り抜く（border-radius の縦横を別々に指定する） */
.mv-clip {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.mv-clip img { width: 100%; height: 100%; object-fit: cover; }

.mv-photo--person { top: 41%; left: 2%; width: 70%; aspect-ratio: 1 / 1.08; }
.mv-photo--person .mv-clip { border-radius: 52% 48% 44% 56% / 46% 50% 50% 54%; }
.mv-photo--person img { object-position: 50% 18%; }

.mv-photo--flower { top: 3%; right: 5%; width: 30%; aspect-ratio: 1; }
.mv-photo--flower .mv-clip { border-radius: 58% 42% 48% 52% / 46% 54% 46% 54%; }
/* 360px 未満は縦書きの列が花に届くので、花を小さくする */
@media (max-width: 359px) {
    .mv-photo--flower { right: 3%; width: 25%; }
    .mv-photo--person { top: 46%; }  /* 縦書きの列が画面幅の割に長いので、人物を下げる */
}

.mv-photo--item { top: 70%; right: 1%; width: 46%; aspect-ratio: 1 / 1.05; }
.mv-photo--item .mv-clip { border-radius: 45% 55% 52% 48% / 54% 48% 52% 46%; background: #fff; box-shadow: 0 10px 30px rgba(59, 43, 74, .1); }
/* パッケージは枠いっぱいに大きく見せる */
.mv-pack { position: absolute; top: 5%; left: 25%; width: 56%; filter: drop-shadow(0 6px 10px rgba(59, 43, 74, .18)); }
.mv-pack img, .mv-tsubu img { display: block; width: 100%; height: auto; }
/* カプセルは実物の長径約1cm（パッケージの高さ16cmの約1/16）。大きく見せると誤認されるので、
   ECの商品ページと同じく淡い黄色の円に入れ、パッケージの高さの約1/10に抑える */
.mv-tsubu { position: absolute; bottom: 6%; left: 0; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff6be; box-shadow: 0 4px 10px rgba(59, 43, 74, .14); }
.mv-tsubu img { width: 62%; filter: drop-shadow(0 2px 3px rgba(59, 43, 74, .25)); }
/* <source> も display:block のグリッドの行になり、画像が下にずれるので、行を作らせない */
.mv-tsubu source { display: none; }

/* 写真の上の縁に沿わせた一文 */
.mv-curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.mv-curve text {
    fill: var(--c-mv-ink);
    font-family: var(--ff-min);
    font-size: 5.4px;
    font-weight: 600;
    letter-spacing: .6px;
}
/* 480〜767px は人物の枠が大きくなるぶん、縁の一文を小さめにする（基本の指定より後に置く） */
@media (min-width: 480px) and (max-width: 767px) {
    .mv-curve text { font-size: 4.4px; }
}

/* 縦書きの商品名：右の列から .mv-tag → .mv-sub → .mv-name → .mv-lead の順に並ぶ */
.mv-copy {
    position: absolute;
    top: 2%;
    left: 4%;
    color: var(--c-mv-ink);
    writing-mode: vertical-rl;
    line-height: 1.5;
}
.mv-copy > * + * { margin-block-start: 10px; } /* 列の間は文字の大きさに関係なく一定にする（em だと商品名の前後だけ広がる） */
.mv-tag {
    inline-size: fit-content; /* 縦書きの行は一番長い行の長さまで伸びるので、札は文字の長さにとどめる */
    padding: .5em .2em;
    border-radius: 999px;
    background: var(--c-main);
    color: #fff;
    font-size: 13px;
    letter-spacing: .2em;
}
.mv-sub { font-size: 15px; letter-spacing: .12em; }
.mv-name {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: .12em;
    line-height: 1.1;
}
.mv-name-en { margin-block-start: .3em; font-size: .34em; letter-spacing: .1em; }
.mv-lead { font-size: 14px; letter-spacing: .1em; }
.mv-lead span { display: block; }
.mv-lead span + span { margin-block-start: .3em; }
.mv-lead sup { font-size: .7em; }

/* 注記：スマホはファーストビューの下端、768px 以上は右下 */
.mv-note {
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    left: var(--gutter);
    color: var(--c-text-sub);
    font-size: 11px;
    line-height: 1.6;
}

/* スマホの余白を詰める。縦書きの列は文字の大きさ（px）で高さが決まるので、％で置くと幅が広いほど人物との間が空く。
   人物の上端を px で固定し、その下は画面幅（vw）で積む。人物の高さ＝70vw×1.08、商品は人物の高さの79%の位置から */
@media (max-width: 767px) {
    .mv-stage { --mv-person-top: max(288px, calc(246px + 10vw)); aspect-ratio: auto; height: calc(var(--mv-person-top) + 108vw + 8px); }
    .mv-copy { top: 15px; }
    .mv-photo--person { top: var(--mv-person-top); }
    .mv-photo--item { top: calc(var(--mv-person-top) + 59.7vw); }
    /* 花は縦書きの列の右に、列の高さの中央へ大きく置く */
    .mv-photo--flower { top: calc(132px - min(20vw, 110px)); right: 3%; width: min(40vw, calc(97% - 205px), 220px); }
    /* 注記は人物の下・商品の左の空きへ */
    .mv-note { right: auto; bottom: 8px; width: calc(53% - var(--gutter) - 8px); }
}

/* このページの目次（メニューバー）。紫の地に白い文字 */
.mv-nav {
    position: relative;
    z-index: 2;
    margin: 12px var(--gutter) 0;
    overflow-x: auto;
    border-radius: 999px;
    background: var(--c-main);
    box-shadow: 0 4px 16px rgba(59, 43, 74, .2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mv-nav::-webkit-scrollbar { display: none; }
.mv-nav ul { display: flex; align-items: center; gap: 2px; width: max-content; padding: 6px; }
.mv-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s;
}
.mv-nav a:hover, .mv-nav a.is-current { background: rgba(255, 255, 255, .18); }
.mv-nav-buy { font-weight: bold; }
.mv-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -10px -4px 0;
    border-radius: 50%;
    background: #fff;
    color: var(--c-main);
}
/* スマホは「ご購入はこちら」を外し、残り4項目を横にすべらせずに見せる。
   購入はヘッダー（固定）と、FV を過ぎてから出るフローティングにある */
@media (max-width: 767px) {
    .mv-nav-buy-item, .mv-nav-reading-item { display: none; }
    .mv-nav ul { width: auto; min-width: max-content; }
    .mv-nav li { flex: 1 1 auto; }
    .mv-nav a { display: flex; justify-content: center; padding: 8px clamp(6px, 2.5vw, 16px); }
}

/* 固定ヘッダーの下に見出しが隠れないように、目次から飛んだ先をずらす */
section[id] { scroll-margin-top: var(--header-h); }

/* ===== 共通の枠・見出し =====
   ファーストビューより下は、文字も画像も画面幅に合わせて大きくする（:root の --fs-*）。
   余白を広く取り、丸みのある不定形の枠（.blob）と縦書きの見出し（.v-ttl）で見せる */
.wrap {
    max-width: var(--wrap-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.section-01, .section-02 { padding: var(--sec-y) 0; }
/* 背景の色を画面の端まで伸ばす（中身の幅は .wrap のまま） */
.section-band {
    background: var(--c-bg-sub);
    box-shadow: 0 0 0 100vmax var(--c-bg-sub);
    clip-path: inset(0 -100vmax);
}
.sub-title { font-size: var(--fs-sub); color: var(--c-text-sub); }
/* 見出しの最後の行に1文字だけ残らないように、行の長さをそろえる */
.sub-title, .sec-ttl h2, .story-ttl, .story-turn, .solution-lead, .craft-ttl, .card2-ttl, .offer-lead { text-wrap: balance; }
.sec-ttl { margin-bottom: clamp(40px, 6vw, 96px); color: var(--c-mv-ink); text-align: center; }
.sec-ttl h2 { font-size: var(--fs-title); font-weight: 500; letter-spacing: .12em; line-height: 1.4; }
.sec-en {
    display: inline-flex;
    align-items: center;
    gap: .8em;
    margin-top: .6em;
    color: var(--c-text-sub);
    font-size: clamp(13px, 1vw, 16px);
    letter-spacing: .14em;
}
.sec-en::before {
    content: "";
    width: 1.1em;
    height: 1.1em;
    border-radius: 45% 55% 52% 48% / 54% 48% 52% 46%;
    background: var(--c-accent);
}
/* 縦書きの大きな見出し。行ごとに <span> で区切ると列が分かれる */
.v-ttl {
    width: fit-content;
    color: var(--c-mv-ink);
    font-size: var(--fs-vttl);
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.5;
    text-align: start;
    writing-mode: vertical-rl;
}
.v-ttl > span { display: block; }
/* 縦書きの中の半角数字は、<span class="tcy"> で囲んで縦向きにする（そのままだと横に寝る） */
.tcy { text-combine-upright: all; }
.description { font-size: var(--fs-body); line-height: 1.95; }
.anno-txt { margin-top: 8px; color: var(--c-text-sub); font-size: clamp(12px, .95vw, 14px); line-height: 1.7; }

/* 丸みのある不定形の枠（写真・差し込み枠の共通） */
.blob {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}
.blob--a { border-radius: 47% 53% 44% 56% / 52% 46% 54% 48%; }
.blob--b { border-radius: 54% 46% 52% 48% / 46% 54% 46% 54%; }
.blob--c { border-radius: 44% 56% 48% 52% / 56% 44% 56% 44%; }
.blob img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* グラフなど、切り抜くと読めなくなるものは角丸の四角 */
.media-plain { overflow: hidden; aspect-ratio: 4 / 3; border-radius: clamp(24px, 3vw, 48px); background: var(--c-bg-sub); }
.chart { display: block; width: 100%; height: auto; font-family: var(--ff-go); }
.story-media.media-plain { width: 100%; } /* グラフは文字が読めるよう、スマホでも幅いっぱいに置く */
/* スマホはグラフ全体が縮むので、文字だけ大きくする（画面上で約15px） */
@media (max-width: 767px) {
    .chart text { font-size: 28px; }
}

/* マーカー（画面に入ったら左から引く） */
.marker {
    background: linear-gradient(transparent 60%, var(--c-accent) 60%) no-repeat;
    background-size: 0 100%;
    transition: background-size 1.2s ease;
}
.marker.is-active { background-size: 100% 100%; }

/* フェードイン（画面に入ったら表示） */
.fadein { opacity: 0; transform: translateY(16px); transition: opacity .8s, transform .8s; }
.fadein.is-active { opacity: 1; transform: none; }

/* ===== 商品の紹介 ===== */
.section-01 { text-align: center; }
.sec01-ttl {
    margin: 8px 0 clamp(40px, 6vw, 96px);
    color: var(--c-mv-ink);
    font-size: clamp(64px, 8vw, 128px);
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.2;
}
.card { display: flex; flex-direction: column; gap: 32px; text-align: left; }
.card .v-ttl { align-self: flex-end; margin-right: 6%; }
.card-picture { position: relative; width: 92%; margin-bottom: 8%; }
.card-pack { position: absolute; right: -6%; bottom: -8%; width: 42%; filter: drop-shadow(0 10px 18px rgba(59, 43, 74, .25)); }
.card-pack img { width: 100%; height: auto; }
.card-content { display: flex; flex-direction: column; gap: 24px; }
.card-lead { color: var(--c-mv-ink); font-size: clamp(20px, 2vw, 32px); line-height: 1.8; }

/* 機能性表示食品の表示事項 */
.fnc-notice {
    margin-top: clamp(48px, 6vw, 96px);
    padding: clamp(20px, 3vw, 48px);
    border: 1px solid var(--c-line);
    border-radius: clamp(16px, 2vw, 32px);
    text-align: left;
}
.fnc-notice-ttl { font-size: clamp(15px, 1.2vw, 19px); font-weight: bold; }

/* ===== 問題提起 ===== */
.story-sec { padding-bottom: 0; }
.story-wrap > .v-ttl { margin: 0 8% clamp(40px, 6vw, 72px) auto; }
.story { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 136px); }
.story-item { display: flex; flex-direction: column; gap: 24px; }
.story-media { width: 90%; }
.story-item:nth-child(even) .story-media { margin-left: auto; }
.story-ttl { margin-bottom: .7em; color: var(--c-mv-ink); font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
/* スマホ：縦書きの見出しと図を縦に積むと大きな余白ができるので、左に図・右に見出しの横並びにする */
@media (max-width: 767px) {
    .card, .story-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
    .card .v-ttl, .story-wrap > .v-ttl { grid-column: 2; grid-row: 1; margin: 0; font-size: min(5.6vw, 36px); }
    .card-picture { grid-column: 1; grid-row: 1; width: 100%; }
    .card-pack { right: 0; } /* 見出しの列にかからないように */
    .card-content { grid-column: 1 / -1; }
    /* 問題提起は、最初の項目の図だけを見出しの横に置く（HTML の順は PC と共通のまま） */
    .story, .story-item:first-child { display: contents; }
    .story-item:first-child > .story-media { grid-column: 1; grid-row: 1; width: 100%; }
    .story-item:first-child > .story-txt { grid-column: 1 / -1; margin-top: 24px; }
    .story-item:not(:first-child) { grid-column: 1 / -1; margin-top: 64px; }
}
.story-turn {
    margin: var(--sec-y) 0;
    color: var(--c-mv-ink);
    font-size: var(--fs-title);
    letter-spacing: .08em;
    line-height: 1.6;
    text-align: center;
}
.solution { padding: var(--sec-y) 0; color: var(--c-mv-ink); text-align: center; }
.solution-lead { font-size: var(--fs-h3); line-height: 1.6; }
.solution-name {
    margin: 4px 0 clamp(32px, 4vw, 64px);
    font-size: clamp(72px, 10vw, 160px);
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.2;
}
.solution-media { width: min(90%, 720px); margin: 0 auto; }
/* 研究レビューの採用論文のグラフ。注記はグラフと同じ枠の中に、読める大きさで置く */
.evidence {
    max-width: 860px;
    margin: clamp(48px, 6vw, 96px) auto 0;
    padding: clamp(20px, 3.4vw, 56px) clamp(14px, 3.4vw, 56px);
    border-radius: clamp(20px, 3vw, 48px);
    background: #fff;
    text-align: left;
}
.evidence-ttl { font-size: var(--fs-h3); line-height: 1.5; text-align: center; }
.evidence-sub { margin-bottom: 16px; color: var(--c-text-sub); font-size: clamp(14px, 1.1vw, 17px); text-align: center; }
.evidence-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin: 12px 0 20px; color: var(--c-text); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.5; }
.evidence-legend li { display: flex; align-items: center; gap: 8px; }
.evidence-key { flex: 0 0 auto; width: 22px; height: 4px; border-radius: 2px; }
.evidence-note { margin-top: 8px; color: var(--c-text); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.8; }

/* ===== 商品の特徴 ===== */
/* 線だけの不定形の丸を少しずつ重ねて並べる */
.feature-list { display: flex; flex-direction: column; }
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 84%;
    min-width: 0;
    aspect-ratio: 1;
    padding: 8%;
    border: 1px solid var(--c-main);
    border-radius: 47% 53% 46% 54% / 52% 47% 53% 48%;
    color: var(--c-mv-ink);
    text-align: center;
}
.feature-item + .feature-item { margin-top: -8%; }
.feature-item:nth-child(even) { align-self: flex-end; border-radius: 53% 47% 54% 46% / 47% 53% 47% 53%; }
.feature-num { color: var(--c-main); font-size: clamp(44px, 5vw, 84px); line-height: 1.2; letter-spacing: .02em; }
.feature-txt { min-width: 0; margin-top: .3em; font-size: clamp(21px, 2.05vw, 34px); line-height: 1.45; }
.feature-sub { display: block; margin-bottom: 8px; color: var(--c-text-sub); font-size: clamp(14px, 1.1vw, 18px); }

/* ===== こだわり ===== */
.craft { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 136px); }
.craft-item { display: flex; flex-direction: column; gap: 24px; }
.craft-media { width: 90%; }
.craft-item:nth-child(even) .craft-media { margin-left: auto; }
.craft-body h3 { margin-bottom: .7em; font-weight: 500; }
.craft-num {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 18px;
    border-radius: 999px;
    background: var(--c-main);
    color: #fff;
    font-size: clamp(13px, 1.1vw, 17px);
}
.craft-ttl { display: block; color: var(--c-mv-ink); font-size: var(--fs-h3); line-height: 1.5; letter-spacing: .04em; }

.quality { margin-top: clamp(64px, 8vw, 120px); text-align: center; }
.quality-ttl { margin-bottom: 1.2em; color: var(--c-mv-ink); font-size: var(--fs-h3); font-weight: 500; }
.quality-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quality-notes { margin-top: 24px; text-align: left; }
.quality-mark { display: block; width: clamp(88px, 11vw, 170px); margin: 0 auto 8px; }
.quality-mark img { width: 100%; height: auto; }

/* ===== 読みもの ===== */
.contents {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(20px, 3vw, 48px);
    border: 1px solid var(--c-line);
    border-radius: clamp(20px, 3vw, 48px);
    text-decoration: none;
}
.contents-media { overflow: hidden; border-radius: clamp(14px, 2vw, 32px); }
.contents-media img { width: 100%; }
.pagetitle .heading { margin-bottom: .4em; color: var(--c-mv-ink); font-family: var(--ff-min); font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; }

/* ===== 口コミ ===== */
.review-list { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 32px); }
.review_box {
    min-width: 0;
    padding: clamp(24px, 2.8vw, 48px);
    border-radius: clamp(20px, 2.4vw, 40px);
    background: var(--c-bg-sub);
}
.reviewer { color: var(--c-text-sub); font-size: clamp(13px, 1vw, 16px); }
.review_star { margin: 6px 0 12px; color: #f2b01e; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: 2px; }
.review_txt { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.9; }

/* ===== 締め・購入 ===== */
.closing { display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 4vw, 64px); }
.card2 { width: 100%; color: var(--c-mv-ink); text-align: center; }
.card2-ttl { margin-bottom: .8em; font-size: var(--fs-title); font-weight: 500; letter-spacing: .08em; line-height: 1.5; }
.nb { display: inline-block; } /* 語の途中で行が割れないように */
.card2-txt { font-size: var(--fs-body); line-height: 1.95; }
.item { width: 100%; max-width: 960px; }
.item a { display: block; text-decoration: none; }
/* 締めのバナー：写真の左の空いた所に、実物のパッケージと価格を重ねる */
.item-bnr { position: relative; overflow: hidden; border-radius: clamp(16px, 3vw, 48px); color: var(--c-mv-ink); }
.item-bnr > picture img { width: 100%; }
.item-offer {
    position: absolute;
    top: 50%;
    left: 4%;
    display: flex;
    align-items: center;
    gap: 3%;
    width: 46%;
    transform: translateY(-50%);
}
.item-pack { flex: 0 0 38%; filter: drop-shadow(0 6px 10px rgba(59, 43, 74, .25)); }
.item-pack img { width: 100%; height: auto; }
.item-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.item-price-label { font-size: clamp(11px, 1.5vw, 22px); font-weight: bold; }
.item-price-yen { color: var(--c-main); font-size: clamp(25px, 5vw, 64px); font-weight: bold; line-height: 1.15; }
.item-price-yen small { font-size: .45em; }
.item-price-ship { font-size: clamp(10px, 1.3vw, 19px); }
.buy-link { display: block; width: 100%; max-width: 560px; text-decoration: none; }

.btn-maru {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(16px, 1.5vw, 24px) 32px;
    border: 0;
    border-radius: 999px;
    background: var(--c-main);
    color: #fff;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s;
}
.btn-maru:hover { background: var(--c-main-dark); }

/* ===== 定期コースのご案内（申込みの枠） ===== */
.offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.4vw, 40px);
    padding: clamp(28px, 5vw, 88px) clamp(16px, 5vw, 88px);
    border: 2px solid var(--c-main);
    border-radius: clamp(24px, 3vw, 48px);
}
.offer-lead { color: var(--c-mv-ink); font-size: var(--fs-h3); line-height: 1.5; text-align: center; }
.offer-price { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 820px; }
.offer-row {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 32px);
    min-width: 0;
    padding: clamp(16px, 2vw, 32px) clamp(16px, 2.6vw, 44px);
    border-radius: clamp(14px, 1.6vw, 24px);
    background: var(--c-bg-sub);
}
.offer-row dt { flex: 0 0 5.5em; font-size: clamp(15px, 1.35vw, 22px); font-weight: bold; }
.offer-row dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; margin: 0; }
.offer-off {
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--c-main);
    color: #fff;
    font-size: clamp(13px, 1.15vw, 18px);
    font-weight: bold;
}
.offer-yen { font-size: clamp(28px, 3vw, 50px); font-weight: bold; line-height: 1.2; }
.offer-yen small { font-size: clamp(12px, 1vw, 16px); font-weight: normal; }
.offer-ship { color: var(--c-main); font-size: clamp(14px, 1.25vw, 20px); font-weight: bold; }
.offer-row--first { background: var(--c-accent); }
.offer-row--first .offer-yen { font-size: clamp(40px, 5.2vw, 88px); }
.offer .anno-txt { margin-top: 0; text-align: center; }
.offer .buy-link { margin: 4px auto 0; }
.offer-terms {
    width: 100%;
    max-width: 960px;
    padding: clamp(16px, 2.6vw, 44px);
    border: 1px solid var(--c-line);
    border-radius: clamp(14px, 1.6vw, 24px);
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.8;
}
.offer-terms-ttl { margin-bottom: 8px; font-size: clamp(16px, 1.35vw, 21px); }
.offer-terms li { position: relative; padding-left: 1em; }
.offer-terms li::before { content: "・"; position: absolute; left: 0; }
.closing > .anno-txt { margin-top: -12px; max-width: 640px; text-align: center; }
/* 機能性表示食品の表示事項の続き（ページ末の注釈） */
.fnc-foot { width: 100%; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--c-line); text-align: left; }

/* ===== フローティングバナー ===== */
/* ⚠iOS Safari で fixed 要素のタップが落ちないよう、opacity を繰り返す点滅アニメは付けない（まるごと青魚の 2026-09-18 の不具合） */
.floating {
    position: fixed;
    right: 0;
    bottom: 12px;
    left: 0;
    z-index: 90;
    width: calc(100% - var(--gutter) * 2);
    max-width: 480px;
    margin: 0 auto;
    visibility: hidden;
    transform: translateY(calc(100% + 24px));
    transition: transform .3s, visibility .3s;
}
.floating.active { visibility: visible; transform: none; }
.floating a { display: block; text-decoration: none; }
/* 画像ができるまでの文字のバナー */
.floating .floating-bnr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(59, 43, 74, .25);
    border: 2px solid var(--c-main);
}
.floating-price { min-width: 0; font-size: 22px; font-weight: bold; line-height: 1.2; color: var(--c-text); }
.floating-price small { font-size: 11px; font-weight: normal; }
.floating-label { display: block; font-size: 11px; font-weight: bold; color: var(--c-main); }
.floating-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--c-main);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}

/* ===== フッター ===== */
.site-footer {
    margin-top: 40px;
    padding: 32px var(--gutter) 96px; /* 下はフローティングバナーと重ならないように空ける */
    background: var(--c-bg-sub);
    text-align: center;
}
.footer-inner { max-width: var(--wrap-max); margin: 0 auto; }
.footer-logo { display: block; width: 180px; margin: 0 auto; }
.footer-logo img { width: 100%; height: auto; }
.footermenu { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.footermenu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.footermenu a { font-size: 13px; text-decoration: none; }
.copyRight { margin-top: 16px; font-size: 11px; color: var(--c-text-sub); }

/* ===== PC（768px 以上） ===== */
@media (min-width: 768px) {
    :root { --gutter: clamp(24px, 4vw, 64px); --header-h: 72px; }

    /* ヘッダーは1段：ロゴ → 読みもの・ご購入 → メニュー */
    .header-inner { flex-wrap: nowrap; gap: 8px; height: var(--header-h); padding: 0 var(--gutter); }
    .header-logo { flex: 0 1 140px; height: auto; margin-right: auto; padding-left: 0; }
    .headerMenu { flex: 0 1 auto; order: 2; gap: 6px; border-top: 0; background: none; }
    .headerTitle { flex: none; min-height: 0; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
    .headerTitle + .headerTitle { border-left: 0; }
    .headerTitle--buy { border-radius: 999px; }
    .site-header--techo .header-logo { flex-basis: 156px; }
    .site-header--techo .headerMenu { align-items: center; gap: 12px; }
    .site-header--techo .headerTitle { min-width: 148px; min-height: 48px; padding: 0 22px; border-radius: 24px; background: #fffefc; font-size: 17px; }
    .site-header--techo .headerTitle--buy { background: var(--c-main); }
    .site-header--techo .headerTitle--buy:hover { background: var(--c-main-dark); }
    .hamburger { order: 3; margin-right: 0; }

    .globalMenu { left: auto; width: 360px; border-left: 1px solid var(--c-line); }

    /* ファーストビュー：左に縦書きの商品名、中央に人物を大きく、右にパッケージ（目線の先）、右上に花。目次は下端の左（1024px 以上） */
    .main-visual { padding-bottom: 0; }
    .mv-stage { aspect-ratio: 1440 / 820; } /* 1440×900 の画面で、ヘッダーを除いた高さに収まる */
    .mv-photo--person { top: 10%; left: 25%; width: 43%; } /* 上の縁の一文がヘッダーに隠れない高さ */
    .mv-photo--flower { top: 3%; right: 4%; width: 12%; }
    .mv-photo--item { top: 27%; right: 2%; width: 28%; }
    .mv-curve text { font-size: 3.3px; letter-spacing: .5px; }
    .mv-copy { top: 6%; left: 4%; }
    .mv-copy > * + * { margin-block-start: clamp(12px, 1.2vw, 18px); }
    .mv-tag { font-size: clamp(14px, 1.2vw, 18px); }
    .mv-sub { font-size: clamp(16px, 1.5vw, 22px); }
    .mv-name { font-size: clamp(56px, 5.6vw, 84px); }
    .mv-lead { font-size: clamp(15px, 1.45vw, 21px); }
    .mv-note { right: 3%; bottom: 3%; left: auto; width: 25%; font-size: 12px; }
    .mv-nav a { padding: 10px 20px; font-size: 16px; }

    /* 商品の紹介：縦書きの見出し → 大きな写真 → 本文 */
    .card { display: grid; grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
    .card .v-ttl { align-self: center; margin-right: 0; font-size: clamp(24px, 2.7vw, 46px); }
    .card-picture { width: 100%; margin-bottom: 0; }

    /* 問題提起：左に縦書きの見出しを置いたまま、画像と本文を左右交互に並べる */
    .story-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(24px, 4vw, 72px); }
    .story-wrap > .v-ttl { position: sticky; top: calc(var(--header-h) + 24px); margin: 0; }
    .story-item, .craft-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(32px, 5vw, 88px); }
    .story-item:nth-child(even) .story-media, .craft-item:nth-child(even) .craft-media { order: 2; margin-left: 0; }
    .story-media, .craft-media { width: 100%; }

    /* 特徴：768〜1023px は2列、1024px 以上は4列（下の @media）。互い違いにずらして重ねる */
    .feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 8%; }
    .feature-item { width: 104%; margin: 0 -2%; padding: 7%; }
    .feature-item + .feature-item { margin-top: 0; }
    .feature-item:nth-child(even) { transform: translateY(16%); }

    .quality-list { gap: 32px; max-width: 880px; margin: 0 auto; }

    .contents { flex-direction: row; align-items: center; gap: clamp(24px, 3vw, 56px); }
    .contents-media { flex: 0 0 46%; min-width: 0; }
    .pagetitle { flex: 1 1 auto; min-width: 0; }
    .contents .btn-maru { flex: 0 0 auto; width: auto; }

    .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1024px 以上は、目次をファーストビューの下端の左に浮かせる（それ未満はスマホと同じく写真の下に置く） */
@media (min-width: 1024px) {
    .mv-nav {
        position: absolute;
        bottom: 3%;
        left: 4%;
        max-width: calc(100% - var(--gutter) * 2);
        margin: 0;
    }
}

/* 768〜1023px は、縦書きの列の幅が画面幅の割に広いので、ファーストビューを縦に伸ばし、人物とパッケージを右へ寄せる */
@media (min-width: 768px) and (max-width: 1023px) {
    .mv-stage { aspect-ratio: 1440 / 900; }
    .mv-photo--person { top: 11%; left: 32%; width: 39%; }
    .mv-photo--item { top: 34%; right: 2%; width: 28%; }
    .mv-note { width: 28%; }
    .mv-curve text { font-size: 4.6px; }
}

@media (min-width: 1024px) {
    .feature-list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 7%; }
    .feature-item { width: 110%; margin: 0 -5%; }
    .feature-item:nth-child(even) { transform: translateY(26%); }
}

@media (min-width: 1280px) {
    .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}