/* ==========================================================================
   hitoe LP — main stylesheet
   モノトーン・余白多め・テキスト主体。差し色は生成り(#EDE8E0)のみ。
   ========================================================================== */

:root {
	--hitoe-ink: #1c1c1c;
	--hitoe-ink-soft: #4a4a4a;
	--hitoe-line: #d9d6d0;
	--hitoe-bg: #ffffff;
	--hitoe-bg-soft: #f7f6f4;
	--hitoe-cream: #ede8e0;
	--hitoe-cream-dark: #cbbfa9;
	--hitoe-accent-text: #7d6a4a; /* 生成り系の差し色だが、文字色としてはコントラスト比4.5:1以上を確保した濃いトーン */
	--hitoe-muted: #6b6b6b;
	--font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
	--font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
	--container: 1080px;

	/* ==== アニメーション トークン（仕様書「アニメーション仕様」実測値） ====
	   共通イージング cubic-bezier(0.445,0.05,0.55,0.95)、基本800ms・遅延400ms。 */
	--hitoe-ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	--hitoe-dur: 800ms;
	--hitoe-dur-slow: 1000ms;
	--hitoe-dur-fast: 300ms;
	--hitoe-delay-base: 400ms;
	--hitoe-stagger: 120ms;
	--hitoe-anim-delay: 0ms; /* data-anim-delay からJSが上書きする */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-jp);
	color: var(--hitoe-ink);
	background: var(--hitoe-bg);
	line-height: 1.9;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: 0.04em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* デモ帯 */
.hitoe-demo-band {
	background: var(--hitoe-ink);
	color: #fff;
	text-align: center;
	font-size: 12px;
	padding: 8px 12px;
	position: relative;
	z-index: 100;
}
.hitoe-demo-band p { margin: 0; letter-spacing: 0.03em; }

/* ヘッダー */
.hitoe-header {
	padding: 20px 24px;
	text-align: center;
	border-bottom: 1px solid var(--hitoe-line);
}
.hitoe-logo {
	font-family: var(--font-mincho);
	font-size: 22px;
	letter-spacing: 0.3em;
	text-decoration: none;
	color: var(--hitoe-ink);
}

/* 本文カラム（.hitoe-main = .hitoe-content）にコンテナクエリの基準を作る。
   2026-09-29 フィードバック対応: PCの2分割レイアウトでは本文カラムの実幅が
   スマホ相当（〜600px）しかないのに、グリッドの折り返しがビューポート幅
   （@media）で判定されていたため、PCの狭いカラムの中で3列・2列のグリッドが
   誤発動して文字が数文字ずつに割れていた。折り返しの基準を「カラム自身の幅」
   （@container）に変える。ビューポート基準の@mediaはもう使わない。 */
.hitoe-content {
	container-type: inline-size;
	container-name: hitoe-col;
}

/* 共通セクション */
.hitoe-section {
	padding: 72px 24px;
	max-width: var(--container);
	margin: 0 auto;
}
/* セクション見出し: 縦書きの英字ラベル「CONCEPT（01）」＋伸びる縦線（仕様書アニメーション仕様3）。
   ⚠️ 2026-09-29 検品フィードバック対応: レーンは本文の「上」ではなく「横」に並べる
   （参考LPと同じ組み方）。こうしないと縦書き文字の高さぶん本文開始前に空白ができる。 */
.hitoe-section__frame {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}
.hitoe-section__label-lane {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-top: 2px;
}
.hitoe-section__label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.hitoe-section__title-v {
	font-family: var(--font-mincho);
	font-size: 14px;
	letter-spacing: 0.3em;
}
.hitoe-section__num-v {
	font-family: var(--font-mincho);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--hitoe-accent-text);
}
.hitoe-section__line {
	width: 1px;
	flex: 1 1 auto;
	min-height: 48px;
	background: var(--hitoe-line);
	transform-origin: top center;
}
.hitoe-section__body { flex: 1 1 auto; min-width: 0; }
/* 互換: 見出しパーツを使わないフォールバックテンプレートが参照する場合用 */
.hitoe-section__num { font-size: 13px; color: var(--hitoe-accent-text); }
.hitoe-section__title { font-family: var(--font-mincho); font-size: 28px; letter-spacing: 0.15em; }

/* ==========================================================================
   スクロール連動アニメーション（data-anim属性）
   JSが動かない場合は常に全文表示（noscript/JS失敗時のフォールバック）。
   html.js が付いたとき（header.phpのインラインscript）だけ、JS制御の
   IntersectionObserverで .is-in が付き、初めて動き出す。
   動かすプロパティは opacity・transform・filter・clip-path のみ（CLS対策）。
   ========================================================================== */
html.js [data-anim] {
	transition-timing-function: var(--hitoe-ease);
	transition-delay: var(--hitoe-anim-delay, 0ms);
}

html.js [data-anim="fade-up"],
html.js [data-anim="fade-up-sm"] {
	transition-property: opacity, transform;
	transition-duration: var(--hitoe-dur);
}
html.js [data-anim="fade-up"] { opacity: 0; transform: translateY(20px); }
html.js [data-anim="fade-up-sm"] { opacity: 0; transform: translateY(12px); }
html.js [data-anim="fade-up"].is-in,
html.js [data-anim="fade-up-sm"].is-in { opacity: 1; transform: translateY(0); }

html.js [data-anim="blur"] {
	transition-property: opacity, filter;
	transition-duration: var(--hitoe-dur-slow);
	opacity: 0;
	filter: blur(20px);
}
html.js [data-anim="blur"].is-in { opacity: 1; filter: blur(0); }

/* セクション見出しの線は縦（左端のレーンを本文の高さぶん下に伸びる）。transform-originは
   本文と同じ .hitoe-section__line 側の宣言（top center）を使う。 */
html.js [data-anim="line"] {
	transition-property: transform;
	transition-duration: var(--hitoe-dur-slow);
	transform: scaleY(0);
}
html.js [data-anim="line"].is-in { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
	html.js [data-anim] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* 画像・プレースホルダ */
.hitoe-img { width: 100%; height: auto; border-radius: 2px; }
.hitoe-img--placeholder {
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, #e7e5e1, #e7e5e1 10px, #efeeea 10px, #efeeea 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hitoe-muted);
	font-size: 13px;
}

/* ボタン */
.hitoe-btn {
	display: inline-block;
	padding: 16px 40px;
	border: 1px solid var(--hitoe-ink);
	color: var(--hitoe-ink);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.2em;
	background: transparent;
	transition: background var(--hitoe-dur-fast) var(--hitoe-ease), color var(--hitoe-dur-fast) var(--hitoe-ease);
}
.hitoe-btn--primary { background: var(--hitoe-ink); color: #fff; }
.hitoe-btn--primary:hover { background: #000; }
.hitoe-btn--block { display: block; text-align: center; width: 100%; }

/* FV: 商品写真をフルブリードで敷く。
   ⚠️ 2026-09-29 検品フィードバック対応: コピーを画像に重ねない組み方に変更。
   縦書きキャッチだけを画像の右上（実際の写真でボトルが写っていない側）に重ね、
   サブコピー・価格・購入ボタンは画像の「外」（.hitoe-fv__info の生成りの帯）に出す。
   これなら写真の内容やボトルの位置が変わっても文字が絶対にボトルへかからない。 */
.hitoe-fv {
	max-width: none;
	padding: 0;
}
.hitoe-fv__media { position: relative; background: var(--hitoe-bg-soft); line-height: 0; overflow: hidden; }
.hitoe-fv__media .hitoe-img,
.hitoe-fv__media picture,
.hitoe-fv__media img { width: 100%; height: auto; border-radius: 0; display: block; }
.hitoe-fv__media .hitoe-img--placeholder { aspect-ratio: 1122 / 1402; }

/* オープニング1: FV画像はぼかし+わずかな拡大(1.06→1)から現れる。opacityは動かさない（LCP対策）。 */
.hitoe-fv__media img {
	will-change: filter, transform;
	animation: hitoeFvImageIn 600ms var(--hitoe-ease) both;
}
@keyframes hitoeFvImageIn {
	from { filter: blur(8px); transform: scale(1.06); }
	to { filter: blur(0); transform: scale(1); }
}

/* 縦書きキャッチのみ、画像の右上に小さく重ねる（サブ/価格/ボタンは重ねない） */
.hitoe-fv__overlay {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 62%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	padding: 8% 6% 0 0;
	color: var(--hitoe-ink);
}

/* サブコピー・価格・購入ボタン: 画像の外の生成りの帯。ボトルとは絶対に重ならない。 */
.hitoe-fv__info {
	background: var(--hitoe-cream);
	text-align: center;
	padding: 28px 24px 32px;
}

/* オープニング2〜4: キャッチ→ブランド名/価格→ボタンの順に、少しずつ遅らせて現れる。
   .hitoe-fv__open は共通の「上から10pxで降りる」ベース。個別クラスで遅延だけ変える。 */
.hitoe-fv__open {
	animation: hitoeFvDropIn var(--hitoe-dur) var(--hitoe-ease) both;
}
@keyframes hitoeFvDropIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}
.hitoe-fv__open--eyebrow { animation-delay: 500ms; }
.hitoe-fv__catch-line { animation-delay: calc(900ms + var(--hitoe-open-i, 0) * 140ms); }
.hitoe-fv__open--sub { animation-delay: 1300ms; }
.hitoe-fv__open--price { animation-delay: 1500ms; }
.hitoe-fv__open--btn { animation-delay: 1700ms; }

.hitoe-eyebrow {
	font-family: var(--font-mincho);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--hitoe-ink-soft);
	margin-bottom: 12px;
	display: inline-block;
}
/* キャッチコピーは縦書き（仕様書アニメーション仕様1）。複数行は右→左に列が並ぶ。 */
.hitoe-fv__catch {
	display: flex;
	flex-direction: row-reverse;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: var(--font-mincho);
	font-size: 20px;
	line-height: 1.7;
	letter-spacing: 0.06em;
	margin: 0;
}
.hitoe-fv__catch-line { display: inline-block; }
.hitoe-fv__sub { font-size: 13px; color: var(--hitoe-ink-soft); margin-bottom: 12px; }
.hitoe-fv__price { font-size: 16px; letter-spacing: 0.08em; margin-bottom: 18px; }
.hitoe-fv__info .hitoe-btn { padding: 13px 32px; font-size: 12px; }

@media (min-width: 480px) {
	.hitoe-eyebrow { font-size: 12px; }
	.hitoe-fv__catch { font-size: 24px; }
}

/* PC（1024px以上）: FVは画面の高さいっぱい（ヘッダー分を差し引く）。
   画像は object-fit:cover で敷き詰め、キャッチは同じく右上のみ。
   サブ/価格/ボタンは画像の下の生成りの帯（.hitoe-fv__info）に、Aと同じ組み方で出す。 */
@media (min-width: 1024px) {
	.hitoe-fv__media {
		height: calc(100svh - var(--hitoe-header-h, 96px));
		min-height: 420px;
	}
	/* ⚠️ 2026-09-29 再検品対応: img{height:100%} だけでは効かない。
	   height:100% は「直接の親の高さが確定していること」が条件で、間に挟まる
	   .hitoe-fv__media > picture が height:auto（既定のベースルール）のままだと
	   img の親（picture）の高さが不確定になり、height:100% は無視されて
	   width:100%とimgの縦横比から計算した高さ（この画像なら約338px）に落ちてしまう
	   （fv_image_sp を設定しているため <picture> 経由になり、pictureを挟まない
	   ケースより症状が出やすい）。picture にも明示的に高さ100%を通す。 */
	.hitoe-fv__media picture {
		display: block;
		height: 100%;
	}
	/* ⚠️ 実際の<img>には .hitoe-img クラスも付いており、ベースの
	   `.hitoe-fv__media .hitoe-img { height:auto }`（クラス2つ＝詳細度2,0）のほうが
	   `.hitoe-fv__media img`（クラス1つ＋要素1つ＝詳細度1,1）より詳細度が高く、
	   後ろに書いても負けて100%が反映されなかった（実測して発覚）。
	   同じ詳細度（.hitoe-img で揃える）にして、ソース順で勝たせる。 */
	.hitoe-fv__media .hitoe-img,
	.hitoe-fv__media img {
		height: 100%;
		object-fit: cover;
		object-position: 25% center;
	}
	.hitoe-eyebrow { font-size: 13px; }
	.hitoe-fv__catch { font-size: 30px; }
	.hitoe-fv__overlay { padding: 8% 8% 0 0; }
	.hitoe-fv__sub { font-size: 14px; }
	.hitoe-fv__price { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.hitoe-fv__media img,
	.hitoe-fv__open,
	.hitoe-fv__catch-line { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* CONCEPT */
.hitoe-concept__inner { display: grid; gap: 32px; }
.hitoe-concept__lead {
	font-family: var(--font-mincho);
	font-size: 24px;
	letter-spacing: 0.1em;
	margin-bottom: 24px;
}
.hitoe-concept__text p { margin-bottom: 1.4em; color: var(--hitoe-ink-soft); font-size: 15px; }
.hitoe-concept__text p:last-child { margin-bottom: 0; }

@container hitoe-col (min-width: 700px) {
	.hitoe-concept__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
}

/* SCENE: 横にゆっくり流れ続けるカルーセル（仕様書アニメーション仕様6）。
   要素を複製してCSSアニメーションでtranslateXし続け、-50%地点でつなぎ目なくループする。
   ホバー・フォーカス・タップ（.is-paused）で止まる。JSなしでも横スクロールで全件読める。 */
.hitoe-scene__carousel {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.hitoe-scene__track {
	display: flex;
	gap: 24px;
	width: max-content;
}
.hitoe-scene__item {
	width: 260px;
	flex: none;
}
.hitoe-scene__title { font-size: 16px; margin: 20px 0 8px; letter-spacing: 0.08em; }
.hitoe-scene__text { font-size: 14px; color: var(--hitoe-ink-soft); }

@container hitoe-col (min-width: 700px) {
	.hitoe-scene__item { width: 300px; }
}

/* 流れるアニメーションはJSがあり、かつ動きを減らす設定でないときだけ（main.jsが.is-carouselを付ける）。
   JSなし/JS無効時は素直な横スクロールのカードリストとして機能する。 */
html.js .hitoe-scene__carousel.is-carousel {
	overflow-x: hidden;
}
html.js .hitoe-scene__carousel.is-carousel .hitoe-scene__track {
	animation: hitoeSceneMarquee 34s linear infinite;
}
html.js .hitoe-scene__carousel.is-carousel.is-paused .hitoe-scene__track {
	animation-play-state: paused;
}
@keyframes hitoeSceneMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	html.js .hitoe-scene__carousel.is-carousel { overflow-x: auto; }
	html.js .hitoe-scene__carousel.is-carousel .hitoe-scene__track { animation: none; }
}

/* FEATURE */
.hitoe-feature__list { display: grid; gap: 56px; }
.hitoe-feature__item { display: grid; gap: 24px; align-items: center; }
.hitoe-feature__number {
	font-family: var(--font-mincho);
	font-size: 13px;
	color: var(--hitoe-accent-text);
	letter-spacing: 0.2em;
	margin-bottom: 8px;
}
.hitoe-feature__title { font-size: 19px; margin-bottom: 12px; letter-spacing: 0.08em; }
.hitoe-feature__text { font-size: 14px; color: var(--hitoe-ink-soft); }

@container hitoe-col (min-width: 700px) {
	.hitoe-feature__item { grid-template-columns: 1fr 1fr; gap: 32px; }
	.hitoe-feature__item:nth-child(even) .hitoe-feature__media { order: 2; }
}

/* HOW TO USE */
.hitoe-howto__list { display: grid; gap: 40px; counter-reset: none; }
.hitoe-howto__item { text-align: center; padding: 32px 20px; background: var(--hitoe-bg-soft); }
.hitoe-howto__step {
	font-family: var(--font-mincho);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--hitoe-accent-text);
	margin-bottom: 12px;
}
.hitoe-howto__title { font-size: 17px; margin-bottom: 10px; }
.hitoe-howto__text { font-size: 14px; color: var(--hitoe-ink-soft); }

@container hitoe-col (min-width: 700px) {
	.hitoe-howto__list { grid-template-columns: repeat(3, 1fr); }
}

/* PRODUCT */
.hitoe-product { background: var(--hitoe-cream); }
.hitoe-product__inner { display: grid; gap: 32px; }
.hitoe-product__name { font-family: var(--font-mincho); font-size: 22px; margin-bottom: 12px; }
.hitoe-product__price { font-size: 17px; margin-bottom: 24px; letter-spacing: 0.05em; }
.hitoe-product__spec { margin-bottom: 20px; font-size: 13px; }
.hitoe-product__spec th, .hitoe-product__spec td {
	text-align: left;
	padding: 10px 0;
	border-bottom: 1px solid var(--hitoe-cream-dark);
	font-weight: 400;
}
.hitoe-product__spec th { width: 30%; color: var(--hitoe-ink-soft); }
.hitoe-product__ingredients { margin-bottom: 24px; font-size: 13px; color: var(--hitoe-ink-soft); }
.hitoe-product__ingredients summary { cursor: pointer; color: var(--hitoe-ink); margin-bottom: 8px; }

@container hitoe-col (min-width: 700px) {
	.hitoe-product__inner { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
}

/* VOICE */
.hitoe-voice__list { display: grid; gap: 28px; }
.hitoe-voice__item { padding: 28px; border: 1px solid var(--hitoe-line); }
.hitoe-voice__meta { font-size: 12px; letter-spacing: 0.1em; color: var(--hitoe-accent-text); margin-bottom: 12px; }
.hitoe-voice__text { font-size: 14px; color: var(--hitoe-ink-soft); }
.hitoe-voice__disclaimer { display: block; margin-top: 24px; font-size: 11px; color: var(--hitoe-muted); text-align: center; }

@container hitoe-col (min-width: 700px) {
	.hitoe-voice__list { grid-template-columns: repeat(3, 1fr); }
}

/* FAQ: 高さがなめらかに開閉し、＋が－に回る（仕様書アニメーション仕様8）。
   PCでは見出しが sticky（top:100px）で残る。 */
.hitoe-faq__list { max-width: 720px; margin: 0 auto; display: grid; gap: 1px; background: var(--hitoe-line); }
.hitoe-faq__item { background: #fff; padding: 20px 24px; }
.hitoe-faq__item summary {
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	display: flex;
	gap: 12px;
	align-items: center;
	position: relative;
	padding-right: 32px;
}
.hitoe-faq__item summary::-webkit-details-marker { display: none; }
.hitoe-faq__q-text { flex: 1; }
.hitoe-faq__panel p { margin: 14px 0 0; font-size: 14px; color: var(--hitoe-ink-soft); display: flex; gap: 12px; }
.hitoe-faq__q, .hitoe-faq__a {
	font-family: var(--font-mincho);
	color: var(--hitoe-accent-text);
	flex: none;
}
/* ＋/－ アイコン: 横棒は常に表示、縦棒だけ回転させて重ねると－に見える */
.hitoe-faq__icon { position: absolute; right: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; flex: none; }
.hitoe-faq__icon::before,
.hitoe-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--hitoe-ink);
	transform: translate(-50%, -50%);
}
.hitoe-faq__icon::before { width: 16px; height: 1px; }
.hitoe-faq__icon::after {
	width: 1px;
	height: 16px;
	transition: transform var(--hitoe-dur-fast) var(--hitoe-ease);
}
.hitoe-faq__item[open] .hitoe-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* JSがある場合だけ height をアニメーションさせる（main.jsが .hitoe-faq--enhanced を付与）。
   JSなし/動きを減らす設定では details/summary のネイティブな開閉のまま（即時・全文読める）。 */
.hitoe-faq__panel { overflow: hidden; }
html.js .hitoe-faq--enhanced > .hitoe-faq__panel {
	transition: height var(--hitoe-dur) var(--hitoe-ease);
}

@media (min-width: 1024px) {
	#faq .hitoe-section__label-lane {
		position: sticky;
		top: 100px;
		align-self: flex-start;
		z-index: 5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hitoe-faq__icon::after { transition: none !important; }
	html.js .hitoe-faq--enhanced > .hitoe-faq__panel { transition: none !important; }
}

/* フッター */
.hitoe-footer {
	background: var(--hitoe-ink);
	color: #eee;
	text-align: center;
	padding: 56px 24px 40px;
}
.hitoe-footer__logo { font-family: var(--font-mincho); font-size: 20px; letter-spacing: 0.3em; margin-bottom: 12px; }
.hitoe-footer__catch { font-size: 13px; color: #bbb; margin-bottom: 24px; }
.hitoe-footer__sns { display: flex; justify-content: center; gap: 24px; margin-bottom: 24px; font-size: 13px; }
.hitoe-footer__sns a { text-decoration: none; color: #eee; }
.hitoe-footer__note { font-size: 11px; color: #999; margin-bottom: 12px; }
.hitoe-footer__copy { font-size: 11px; color: #999; }

/* 追従CTA: 参考LPと同じく右下の「小さな」ボタン。画面下いっぱいの帯にはしない
   （FVのボタンと二重に見えるうえ本文を隠してしまうため。2026-09-29 検品フィードバック対応）。
   オープニング後（約2.5秒）に出る。PRODUCTセクションが見えている間は隠す（仕様書アニメーション仕様9）。 */
.hitoe-sticky-cta {
	position: fixed;
	left: auto;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	width: auto;
	background: var(--hitoe-ink);
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	padding: 4px;
	display: flex;
	align-items: center;
	gap: 0;
	transform: translateY(16px) scale(0.92);
	opacity: 0;
	transition: transform var(--hitoe-dur-fast) var(--hitoe-ease), opacity var(--hitoe-dur-fast) var(--hitoe-ease);
	z-index: 200;
	pointer-events: none;
}
.hitoe-sticky-cta.is-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.hitoe-sticky-cta.is-visible.is-hidden-product { transform: translateY(16px) scale(0.92); opacity: 0; pointer-events: none; }
/* 文言（sticky_text）はSCFでは編集できるが、コンパクトなボタンの見た目を保つため非表示にする。
   購入の目的はボタン自体の文言（sticky_button_text）で伝わる。 */
.hitoe-sticky-cta__text { display: none; }
.hitoe-sticky-cta .hitoe-btn {
	border: none;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 12px;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.hitoe-sticky-cta { display: none; }
}

/* フォールバックテンプレート */
.hitoe-main--fallback { max-width: 720px; margin: 0 auto; padding: 48px 24px; }

/* ==========================================================================
   画像リビール: 幕が開くように現れ、中の画像は1.1→1に縮む（仕様書アニメーション仕様5）
   ========================================================================== */
.hitoe-reveal {
	position: relative;
	display: block;
	overflow: hidden;
}
html.js .hitoe-reveal img {
	transform: scale(1.12);
	opacity: 0;
	transition: transform var(--hitoe-dur-slow) var(--hitoe-ease), opacity var(--hitoe-dur-slow) var(--hitoe-ease);
	transition-delay: var(--hitoe-anim-delay, 0ms);
}
html.js .hitoe-reveal::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hitoe-bg-soft);
	transform: scaleX(1);
	transform-origin: right center;
	z-index: 2;
	transition: transform var(--hitoe-dur-slow) var(--hitoe-ease);
	transition-delay: var(--hitoe-anim-delay, 0ms);
}
html.js .hitoe-reveal.is-in img { transform: scale(1); opacity: 1; }
html.js .hitoe-reveal.is-in::before { transform: scaleX(0); }

/* PCのみ: 写真はゆっくり拡大（仕様書アニメーション仕様11） */
@media (hover: hover) and (min-width: 1024px) {
	.hitoe-reveal img { transition-property: transform, opacity; }
	.hitoe-reveal:hover img { transform: scale(1.04); transition-duration: 1200ms; }
	html.js .hitoe-reveal.is-in:hover img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	html.js .hitoe-reveal img,
	html.js .hitoe-reveal::before { transition: none !important; }
}

/* ==========================================================================
   PC（1024px以上）の2分割レイアウト: 左=固定ビジュアル+CONTENTS目次、右=本文カラム
   （仕様書アニメーション仕様2）。1023px以下は .hitoe-pc-visual を隠し、今までどおりの1カラム。
   ========================================================================== */
.hitoe-pc-visual { display: none; }

@media (min-width: 1024px) {
	.hitoe-layout {
		display: flex;
		/* align-items: stretch（既定）のままにする。.hitoe-pc-visual のフレックスアイテムの
		   高さを .hitoe-content（本文カラム）と同じ高さまで伸ばさないと、
		   position:sticky が本文の途中で「固定できる余地」を失って早々に消えてしまう。 */
	}
	/* 写真を主役にする（2026-09-29 フィードバック対応）: 左は写真を全高で敷き、
	   CONTENTSは写真の下に重ねる細いオーバーレイにする（下1/3を目次で占有して
	   写真が途切れて見える問題を解消）。可読性のため薄いグラデーションを敷く。 */
	.hitoe-pc-visual {
		display: block;
		position: sticky;
		top: 0;
		align-self: flex-start;
		height: 100vh;
		flex: 1 1 auto;
		min-width: 0;
		background: var(--hitoe-bg-soft);
	}
	.hitoe-pc-visual__stage {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}
	.hitoe-pc-visual__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 900ms var(--hitoe-ease);
	}
	.hitoe-pc-visual__img.is-active { opacity: 1; }
	/* 写真ごとに主役（ボトル・手元）の位置が違うので、object-positionを個別に指定する
	   （2026-09-29 再検品対応: fv_productは左から約25%にボトルがあり、center指定だと
	   左端で半分切れていた）。値は images_src の元画像を目視して決めた。 */
	.hitoe-pc-visual__img[data-visual-img="fv"] { object-position: 25% 45%; }
	.hitoe-pc-visual__img[data-visual-img="concept"] { object-position: 42% 45%; }
	.hitoe-pc-visual__img[data-visual-img="scene"] { object-position: 58% 48%; }
	.hitoe-pc-visual__img[data-visual-img="feature"] { object-position: 50% 50%; }
	.hitoe-pc-visual__img[data-visual-img="product"] { object-position: 50% 55%; }

	/* CONTENTS目次: 明るい写真の上でも文字が読めるよう、下地をほぼ不透明にする
	   （2026-09-29 再検品対応: 薄いグラデーションだけでは明るい写真でコントラスト比
	   4.5:1を満たせなかった）。上端だけ短くフェードさせ、実際に文字が乗る範囲は
	   ほぼベタ塗りにして、写真の明暗によらずコントラストを一定に保つ。 */
	.hitoe-pc-visual__toc {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 64px 32px 28px;
		background: linear-gradient(
			to bottom,
			rgba(15, 15, 15, 0) 0%,
			rgba(15, 15, 15, 0.55) 14%,
			rgba(15, 15, 15, 0.88) 32%,
			rgba(15, 15, 15, 0.88) 100%
		);
	}
	.hitoe-pc-visual__toc ol { display: grid; gap: 10px; }
	.hitoe-pc-visual__toc a {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		text-decoration: none;
		font-size: 12px;
		letter-spacing: 0.12em;
		color: rgba(255, 255, 255, 0.88);
		padding: 2px 0;
		transition: color var(--hitoe-dur-fast) var(--hitoe-ease);
	}
	.hitoe-pc-visual__toc-num { color: rgba(255, 255, 255, 0.75); font-family: var(--font-mincho); }
	.hitoe-pc-visual__toc a:hover,
	.hitoe-pc-visual__toc a.is-current { color: #fff; }
	.hitoe-pc-visual__toc a.is-current .hitoe-pc-visual__toc-label { text-decoration: underline; text-underline-offset: 4px; }

	.hitoe-content {
		flex: 0 0 auto;
		width: clamp(480px, 46vw, 600px);
		max-width: 600px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hitoe-pc-visual__img { transition: none !important; }
}

/* ==========================================================================
   ハンバーガーメニュー（1023px以下）: 項目が順に出る（仕様書アニメーション仕様10）
   ========================================================================== */
.hitoe-header__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.hitoe-menu-btn {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--hitoe-ink);
	padding: 8px;
}
/* ヘッダーのハンバーガーはPCでは不要（CONTENTS目次が常時見えているため）。
   このルールは上の .hitoe-menu-btn { display:flex; } より「後ろ」に書くこと。
   詳細度が同じ場合はソース順（後勝ち）でカスケードが決まるため、前に書くと
   ここでのdisplay:noneが負けて1024px以上でもボタンが出てしまう（実際に起きた事故）。 */
@media (min-width: 1024px) {
	.hitoe-menu-btn { display: none; }
}
.hitoe-menu-btn__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.hitoe-menu-btn__bars span {
	display: block;
	height: 1px;
	background: var(--hitoe-ink);
	transition: transform var(--hitoe-dur-fast) var(--hitoe-ease), opacity var(--hitoe-dur-fast) var(--hitoe-ease);
}
.hitoe-menu-btn__label { font-size: 10px; letter-spacing: 0.15em; }
.hitoe-menu-btn[aria-expanded="true"] .hitoe-menu-btn__bars span:first-child { transform: translateY(2.5px) rotate(45deg); }
.hitoe-menu-btn[aria-expanded="true"] .hitoe-menu-btn__bars span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

.hitoe-menu {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--hitoe-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--hitoe-dur) var(--hitoe-ease), visibility 0s linear var(--hitoe-dur);
}
.hitoe-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--hitoe-dur) var(--hitoe-ease), visibility 0s linear 0s;
}
/* JSが無いとハンバーガーは開閉できない（クリックしても何も起きない死んだボタンになる）ため、
   html.js が付かない（main.jsが動いていない）ときはボタンごと出さない。ナビはスクロールで足りる。 */
html:not(.js) .hitoe-menu-btn,
html:not(.js) .hitoe-menu { display: none; }
.hitoe-menu__list { display: grid; gap: 22px; text-align: center; }
.hitoe-menu__item {
	opacity: 0;
	transform: translateY(14px);
}
.hitoe-menu.is-open .hitoe-menu__item {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--hitoe-dur) var(--hitoe-ease), transform var(--hitoe-dur) var(--hitoe-ease);
	transition-delay: calc(var(--hitoe-menu-i, 0) * var(--hitoe-stagger));
}
.hitoe-menu__link { display: flex; align-items: baseline; justify-content: center; gap: 14px; text-decoration: none; color: var(--hitoe-ink); }
.hitoe-menu__num { font-family: var(--font-mincho); font-size: 12px; color: var(--hitoe-accent-text); }
.hitoe-menu__label { font-family: var(--font-mincho); font-size: 22px; letter-spacing: 0.15em; }

@media (prefers-reduced-motion: reduce) {
	.hitoe-menu,
	.hitoe-menu__item,
	.hitoe-menu-btn__bars span { transition: none !important; }
}