:root {
	--c-brand: #E15E06;
	--c-red:   #C0392B;

	--c-ink:   color-mix(in srgb, #000 96%, var(--c-brand));
	--c-paper: color-mix(in srgb, #fff 98%, var(--c-brand));
	--c-gray-0: var(--c-paper);
	--c-gray-1: color-mix(in srgb, var(--c-ink) 6%,  var(--c-paper));
	--c-gray-2: color-mix(in srgb, var(--c-ink) 12%, var(--c-paper));
	--c-gray-3: color-mix(in srgb, var(--c-ink) 24%, var(--c-paper));
	--c-gray-4: color-mix(in srgb, var(--c-ink) 42%, var(--c-paper));
	--c-gray-5: color-mix(in srgb, var(--c-ink) 62%, var(--c-paper));
	--c-gray-6: color-mix(in srgb, var(--c-ink) 82%, var(--c-paper));
	--c-gray-7: var(--c-ink);

	/* Semantic */
	--color-bg:            var(--c-paper);
	--color-surface:       var(--c-gray-1);
	--color-border:        var(--c-gray-3);
	--color-border-subtle: var(--c-gray-2);
	--color-text:          var(--c-gray-7);
	--color-text-sub:      color-mix(in srgb, var(--color-text) 60%, var(--c-paper));
	--color-text-mute:     color-mix(in srgb, var(--color-text) 38%, var(--c-paper));
	--color-cta:           var(--c-brand);
	--color-cta-ink:       color-mix(in srgb, var(--c-brand) 76%, var(--c-ink));
	--color-on-accent:  #fff;
	--color-error:      var(--c-red);
	--color-focus-ring: color-mix(in srgb, var(--color-cta) 40%, transparent);
	--color-overlay:    color-mix(in srgb, var(--color-text) 48%, transparent);

	/* Spacing */
	--space-unit: 4px;
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
	--space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
	--space-20: 80px; --space-24: 96px;

	/* Typography */
	--font-base:    "Noto Sans JP", sans-serif;
	--font-heading: "Noto Serif JP", serif;
	--font-mono:    "DM Mono", ui-monospace, Menlo, Consolas, monospace;
	--fs-10: 10px; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
	--fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-28: 28px; --fs-30: 30px;
	--fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-h5: 18px;
	--fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

	/* Radius */
	--radius-sm: 4px;
	--radius-lg: 8px;

	/* Aspect ratio */
	--aspect-3-2: 3 / 2;
	--aspect-4-3: 4 / 3;
	--aspect-16-9: 16 / 9;

	/* Shadow */
	--shadow-sm: 0 2px 8px  color-mix(in srgb, var(--c-ink) 8%,  transparent);
	--shadow-md: 0 4px 16px color-mix(in srgb, var(--c-ink) 10%, transparent);
	--shadow-lg: 0 8px 32px color-mix(in srgb, var(--c-ink) 12%, transparent);

	/* Breakpoints */
	--bp-sm: 640px;
	--bp-md: 768px;
	--bp-lg: 1024px;

	/* Motion（ホバー等の即時フィードバック用） */

	/* Motion（スクロール出現アニメーション用）
	   ここを触ればサイト全体の出現アニメーションが変わる。詳細は下部の実装ブロック参照。
	   変数は略記、クラスは完全形（このサイトの既存の慣習に合わせている）。 */

}

/* ==========================================================================
   ツアー／ノート 共通コンポーネント
   ワイヤーフレーム 素材/ONE DROP-claudeデザインの枠案/ に準拠。
   ========================================================================== */


/* ==========================================================================
   スクロール出現アニメーション

   値の調整は :root の --anim-* だけ。ここのルールは触らなくてよい。

   ■ 固定ページ側「追加CSSクラス」に打つクラス
     基底（必須）… ta-animation
       これ自体は見た目を変えない。「この要素を監視せよ」というJSへの指示。
       単体で書いても何も起きない（＝書き忘れてもコンテンツは壊れない）。

     種類（必須。基底と併記する）
       ta-animation--fade-up  … フェードインアップ（基本。ほとんどこれ）
       ta-animation--blur     … ブラー抜け → 合焦（画像用。1セクション1枚まで）
       ta-animation--wipe     … 左から右へ現れる（見出し用。1〜2行のものだけ）

     例) <div class="ta-animation ta-animation--fade-up">

     親に付ける … ta-animation-stagger
       子の ta-animation が順番に出る。横並びのカードなど「同時に発火して
       しまう」ものに使う。

     Snow Monkey セクションのルートに付ける … js-animation-header
       自動生成される見出し（アイコン／タイトル／リード）を出現させる。
       .smb-section__header には追加CSSクラスを付けられないため、JSがこれを
       読んで見出しへ ta-animation ta-animation--section-header を付与する。

   ■ クラスの役割分担
     ta-animation / --*      … CSSが見た目を持つ（人が書く）
     ta-animation-stagger    … 同上（親に人が書く）
     js-animation-header     … JSが読むためのフック。見た目を持たない（人が書く）
     js-animation-ready      … JSが動いた印。<html> にJSが付ける
     is-inview / is-done     … 状態（JSが付け、CSSが見た目を変える）
                               FLOCSS/SMACSS の原則どおり、is-* 単体にルールは
                               持たせず必ず元のクラスと併記する。

   ■ 仕組み
     JS が <html> に js-animation-ready を付けたときだけ初期状態が効く。
     JSが落ちてもコンテンツは必ず見える。発火は IntersectionObserver（ライブラリ不使用）。
     終了後に is-done が付き、blur / mask の合成レイヤーを解放する（iOS対策の要）。

   ■ 注意
     ホバーで transform を動かす要素（.ta-card 等）に直接付けないこと。
     ラッパーを1枚かぶせて、そちらに付ける（.ta-card-list__item がその例）。
   ========================================================================== */

/* --- 基底：見た目は持たず、トランジションの設定だけを与える --------------- */
.js-animation-ready .ta-animation {
	transition-property: opacity, transform, filter,
		-webkit-mask-position, mask-position;
	transition-duration: var(--anim-dur);
	transition-timing-function: var(--anim-ease);
	transition-delay: var(--anim-delay);
}

/* --- 種類1：フェードインアップ ------------------------------------------- */
.js-animation-ready .ta-animation--fade-up {
	opacity: 0;
	transform: translate3d(0, var(--anim-dist), 0);
}
.js-animation-ready .ta-animation--fade-up.is-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* --- 種類2：ブラー → 表示（画像用） -------------------------------------- */
.js-animation-ready .ta-animation--blur {
	opacity: 0;
	filter: blur(var(--anim-blur));
	transform: scale(var(--anim-scale));   /* ぼかしの縁切れを隠す微ズーム */

	transition-duration: var(--anim-dur-slow);
	transition-timing-function: var(--anim-ease-blur);

	/* iOS対策：事前にレイヤーを確定させてから filter を動かす */
	will-change: filter, opacity, transform;
	backface-visibility: hidden;
}
.js-animation-ready .ta-animation--blur.is-inview {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}
/* iOS対策の要：終わったら合成レイヤーを手放す。
   これが無いと blur(0) のレイヤーが残り、以後スクロール全体が重くなる。 */
.js-animation-ready .ta-animation--blur.is-done {
	filter: none;
	will-change: auto;
	backface-visibility: visible;
}

/* --- 種類3：左 → 右へ現れる（見出し用） ----------------------------------
   マスクのグラデーションを横に流す。境界がぼけるので「霧が晴れる」ように見える。
   文字を1字ずつ分割していないので、選択・コピー・読み上げ・SEOに影響しない。 */
.js-animation-ready .ta-animation--wipe,
.js-animation-ready .ta-animation--section-header .smb-section__title {
	-webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 66% 100%);
	        mask-image: linear-gradient(90deg, #000 0 34%, transparent 66% 100%);
	-webkit-mask-size: 300% 100%;
	        mask-size: 300% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;   /* 右端＝透明側を見せている＝隠れている */
	        mask-position: 100% 0;

	transition-property: -webkit-mask-position, mask-position;
	transition-duration: var(--anim-dur-slow);
	transition-timing-function: var(--anim-ease);
}
.js-animation-ready .ta-animation--wipe.is-inview,
.js-animation-ready .ta-animation--section-header.is-inview .smb-section__title {
	-webkit-mask-position: 0 0;      /* 左端＝不透明側 */
	        mask-position: 0 0;
}
.js-animation-ready .ta-animation--wipe {
	will-change: -webkit-mask-position, mask-position;
}
.js-animation-ready .ta-animation--wipe.is-done {
	-webkit-mask-image: none;
	        mask-image: none;
	will-change: auto;
}

/* --- 種類4：Snow Monkey セクション見出し（複合） --------------------------
   見出しブロック全体がフェードアップし、タイトルにワイプが重なる。
   このクラスは人が書くのではなく、js-animation-header を読んだJSが付ける。

   タイトルのワイプは is-done でマスクを解除しない。is-done は「観測している
   要素（＝見出しブロック全体）」の transitionend で付くが、そちらは --anim-dur、
   タイトルのワイプは --anim-dur-slow で終わる時刻が違うため、解除するとワイプが
   途中で切れて文字が飛び出す。短いテキストなので will-change も持たせない。 */
.js-animation-ready .ta-animation--section-header {
	opacity: 0;
	transform: translate3d(0, var(--anim-dist), 0);
}
.js-animation-ready .ta-animation--section-header.is-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.js-animation-ready .ta-animation--section-header .smb-section__lede-wrapper {
	opacity: 0;
	transition: opacity var(--anim-dur) var(--anim-ease) var(--anim-step);
}
.js-animation-ready .ta-animation--section-header.is-inview .smb-section__lede-wrapper {
	opacity: 1;
}

/* --- stagger（子要素を順番に） -------------------------------------------- */
.ta-animation-stagger > .ta-animation:nth-child(1) { --anim-delay: 0ms; }
.ta-animation-stagger > .ta-animation:nth-child(2) { --anim-delay: calc(var(--anim-step) * 1); }
.ta-animation-stagger > .ta-animation:nth-child(3) { --anim-delay: calc(var(--anim-step) * 2); }
.ta-animation-stagger > .ta-animation:nth-child(4) { --anim-delay: calc(var(--anim-step) * 3); }
.ta-animation-stagger > .ta-animation:nth-child(5) { --anim-delay: calc(var(--anim-step) * 4); }
.ta-animation-stagger > .ta-animation:nth-child(6) { --anim-delay: calc(var(--anim-step) * 5); }
/* 7枚目以降は6段目と同時。枚数に比例して総時間が伸びるのを防ぐ。 */
.ta-animation-stagger > .ta-animation:nth-child(n+7) { --anim-delay: calc(var(--anim-step) * 5); }

/* --- カードリスト ---------------------------------------------------------
   .ta-card はホバーで transform を動かすので、出現アニメーションは
   1枚かぶせたラッパー（.ta-card-list__item）側で行う。 */
.ta-card-list__item {
	display: flex;
}
.ta-card-list__item > .ta-card {
	flex: 1;
}

/* --- 視差効果を減らす設定の端末では一切動かさない ------------------------- */
@media (prefers-reduced-motion: reduce) {
	.js-animation-ready .ta-animation,
	.js-animation-ready .ta-animation--fade-up,
	.js-animation-ready .ta-animation--blur,
	.js-animation-ready .ta-animation--wipe,
	.js-animation-ready .ta-animation--section-header,
	.js-animation-ready .ta-animation--section-header .smb-section__title,
	.js-animation-ready .ta-animation--section-header .smb-section__lede-wrapper {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		-webkit-mask-image: none !important;
		        mask-image: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}