/*
 * 株式会社ウィズラボ トップページ
 *
 * 軸は「試薬(Lab)」と「切れ目(切り拓く)」。
 * 明るい媒質の上に #0073CF の試薬。自分から動くのはフラスコ(flask-field.js)だけにし、
 * 見出しの飾り・ガラス風の板・セクションごとの登場演出は使わない(AI 生成ページの定型を避ける)。
 */

/* ---- tokens(色はすべてここで名前を付けて使う) ---- */
:root {
	--medium: #F3F7FA;      /* 媒質(ガラスと水) */
	--reagent: #0073CF;     /* 試薬(ブランド色) */
	--reagent-hover: #1486E2;
	--reagent-soft: #E1EDF8;
	--reagent-light: #8CC4F2; /* 藍の上で使う試薬色 */
	--ink: #062B55;         /* 深い試薬(本文・濃部) */
	--ink-soft: #3C5878;
	--glass: #CFE0EE;       /* ガラス線 */
	--light: #FFFFFF;
	--danger: #B3261E;
	--danger-light: #FF9E97; /* 藍の上で使う警告色 */
	--danger-text: #FFB4AE;

	/* 半透明の派生色 */
	--medium-veil: color-mix(in srgb, var(--medium) 86%, transparent);
	--medium-halo: color-mix(in srgb, var(--medium) 85%, transparent);
	--ink-veil: color-mix(in srgb, var(--ink) 84%, transparent);
	--on-ink-text: color-mix(in srgb, var(--light) 72%, transparent);
	--on-ink-fill: color-mix(in srgb, var(--light) 6%, transparent);
	--on-ink-fill-focus: color-mix(in srgb, var(--light) 10%, transparent);
	--on-ink-line: color-mix(in srgb, var(--glass) 45%, transparent);
	--on-ink-line-faint: color-mix(in srgb, var(--glass) 16%, transparent);

	--font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--font-en: "Saira", "Zen Kaku Gothic New", sans-serif;

	/* ロゴの W の斜線と同じ傾き(水平から 68 度) */
	--cut-angle: 68deg;
	--gutter: clamp(20px, 5vw, 64px);
	--measure: 38em;
	--header-h: 72px;
	--ease-cut: cubic-bezier(0.16, 1, 0.3, 1);
}

@property --cut {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 140%;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}

body {
	overflow-x: clip;
	margin: 0;
	background: var(--medium);
	color: var(--ink);
	font-family: var(--font-ja);
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.02em;
	font-feature-settings: "palt" 0;
	-webkit-font-smoothing: antialiased;
}

img, video, iframe { display: block; max-width: 100%; }

a { color: var(--reagent); }

:focus-visible {
	outline: 2px solid var(--reagent);
	outline-offset: 3px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	padding: 8px 16px;
	background: var(--ink);
	color: var(--light);
	text-decoration: none;
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---- フラスコ(ページ背後の WebGL。flask-field.js) ---- */
.flask-field,
.flask-overlay {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: none;
	pointer-events: none;
}

.has-flask-field .flask-field,
.has-flask-field .flask-overlay { display: block; }

/* 動きを減らす設定では、ヒーローの位置に満ちたフラスコの静止画を 1 枚だけ置く */
.is-flask-still .flask-field {
	position: absolute;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	/* 床の色が下のセクションの地色へ継ぎ目なくつながるよう、下端を透かす */
	-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.is-flask-still .flask-overlay { display: none; }

.hero,
main,
.site-footer {
	position: relative;
	z-index: 1;
}

/* お問い合わせの上端は、斜めの断ち切りの代わりにフラスコからあふれた藍の液面が境目になる */
.has-flask-field:not(.is-flask-still) .contact {
	background: transparent;
	clip-path: none;
}

/* ---- 導入のショーリール(このタブで初めて開いた時だけ。flask-field.js が時刻を動かす) ----
   事業実績の 3 件を 1.5 秒ずつ、地色を替えながら切り替える。最後の藍は円に縮んでフラスコの口へ落ちる */
.reel {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 60;
	overflow: hidden;
	background: var(--reagent);
	color: var(--light);
}
/* 最初の描画から覆う(フラスコが描けない時は top.js が is-reel を外す) */
.is-reel .reel { display: block; }
.reel[data-scene="1"] { background: var(--medium); color: var(--ink); }
.reel[data-scene="2"] { background: var(--ink); color: var(--light); }

.reel__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.reel__scene {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: clamp(80px, 17vh, 180px);
	margin: 0;
	visibility: hidden;
	font-size: clamp(40px, 8.2vw, 128px);
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: 0.04em;
	font-feature-settings: "palt" 1;
}
.reel__scene.is-on { visibility: visible; }

/* 行を左から、ロゴの W と同じ傾きの切れ目で開く */
.reel__line {
	--cut: -20%;
	display: block;
	width: fit-content;
	clip-path: polygon(0 0, calc(var(--cut) + 0.42em) 0, var(--cut) 100%, 0 100%);
}

.reel-skip {
	position: fixed;
	right: var(--gutter);
	bottom: clamp(20px, 5vh, 44px);
	z-index: 61;
	padding: 10px 18px;
	background: var(--medium-veil);
	border: 1px solid var(--glass);
	border-radius: 999px;
	color: var(--ink);
	font: 500 13px/1 var(--font-ja);
	letter-spacing: 0.08em;
	cursor: pointer;
}
.reel-skip[hidden] { display: none; }

/* ---- header ---- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	height: var(--header-h);
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.site-header.is-scrolled {
	background: var(--medium); /* 透かすと下を通る文字が重なって見えるので不透明にする */
	box-shadow: 0 1px 0 var(--glass);
}

.site-header.is-dark {
	background: var(--ink-veil);
	box-shadow: 0 1px 0 var(--on-ink-line-faint);
}

.site-header.is-dark .menu-toggle { color: var(--light); }

/* ヘッダー内にリンクが並ぶ広い画面だけ白文字にする(狭い画面のメニューは白いパネルで開くため) */
@media (min-width: 861px) {
	.site-header.is-dark .site-nav__list a { color: var(--light); }
	.site-header.is-dark .site-nav__list a::after { background: var(--reagent-light); }
}

/* ロゴとメニューを左にまとめる(右端に寄せたリンク列は AI 生成ページの定型なので使わない)。
   右側はヒーローの縦組みコピーとフラスコのための余白として空けておく */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(32px, 4.5vw, 72px);
	height: 100%;
	padding: 0 var(--gutter);
}

.site-header__logo img {
	width: 164px;
	height: auto;
}

.site-nav__list {
	display: flex;
	gap: clamp(18px, 2.2vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	white-space: nowrap;
	text-decoration: none;
}

/* 下線も斜めの切れ目で伸びる */
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--reagent);
	clip-path: polygon(0 0, 0 0, -4px 100%, -4px 100%);
	transition: clip-path 0.45s var(--ease-cut);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
	clip-path: polygon(0 0, calc(100% + 4px) 0, 100% 100%, -4px 100%);
}

.menu-toggle {
	display: none;
	margin-left: auto;
	align-items: center;
	gap: 10px;
	padding: 8px 0 8px 8px;
	background: none;
	border: 0;
	color: var(--ink);
	font: 500 14px/1 var(--font-ja);
	cursor: pointer;
}

.menu-toggle__bar {
	position: relative;
	width: 22px;
	height: 12px;
}

.menu-toggle__bar::before,
.menu-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.35s var(--ease-cut), top 0.35s var(--ease-cut);
}
.menu-toggle__bar::before { top: 0; }
.menu-toggle__bar::after { top: 10px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { top: 5px; transform: rotate(var(--cut-angle)); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after { top: 5px; transform: rotate(calc(var(--cut-angle) * -1)); }

/* ---- hero ---- */
.hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
}

.hero__copy {
	position: absolute;
	top: calc(var(--header-h) + clamp(24px, 7vh, 88px));
	right: clamp(28px, 11vw, 190px);
	margin: 0;
	white-space: nowrap;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	color: var(--ink);
	font-size: clamp(40px, min(5.6vw, 8vh), 92px);
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: 0.14em;
	font-feature-settings: "palt" 1;
	/* フラスコの映り込みや刃が文字の下に来ても読めるよう、媒質の色でごく淡く縁取る */
	text-shadow: 0 0 0.35em var(--medium-halo), 0 0 1.2em var(--medium-halo);
}

.hero__line {
	display: block;
}

/* 2 行目は行間を空けたうえで字下げして、刃を入れたような段差を作る(縦書きなので論理プロパティで指定) */
.hero__line + .hero__line {
	margin-block-start: 0.34em;
	padding-inline-start: 1.6em;
}

.hero__toggle {
	position: absolute;
	left: var(--gutter);
	bottom: clamp(20px, 5vh, 44px);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 12px;
	background: var(--medium-veil);
	border: 1px solid var(--glass);
	border-radius: 999px;
	color: var(--ink);
	font: 500 13px/1 var(--font-ja);
	cursor: pointer;
}

/* display 指定が hidden 属性より優先されるため明示する(動きを減らす設定では出さない) */
.hero__toggle[hidden] { display: none; }

.hero__toggle-icon {
	position: relative;
	width: 10px;
	height: 12px;
}
.hero__toggle-icon::before,
.hero__toggle-icon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 3px;
	height: 12px;
	background: currentColor;
}
.hero__toggle-icon::before { left: 0; }
.hero__toggle-icon::after { right: 0; }

.hero__toggle[aria-pressed="true"] .hero__toggle-icon::before {
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}
.hero__toggle[aria-pressed="true"] .hero__toggle-icon::after { display: none; }

/* ---- ヒーローのコピーを斜めの切れ目で開く(ページ内で唯一の登場演出) ---- */
.js .hero__line {
	--cut: -10%;
	/* 縦組みの行を上から、下端を斜めにして切り開く */
	clip-path: polygon(0 0, 100% 0, 100% calc(var(--cut) - 30%), 0 var(--cut));
	transition: --cut 1.4s var(--ease-cut);
}
.js .hero.is-ready .hero__line { --cut: 140%; }
.js .hero.is-ready .hero__line + .hero__line { transition-delay: 0.28s; }
/* フラスコの導入中は flask-field.js が刃と一緒に --cut を毎コマ動かす */
.js .hero.is-driven .hero__line { transition: none; }

/* ---- sections ---- */
.section {
	padding: clamp(88px, 12vw, 168px) var(--gutter) 0;
}

.section__head {
	max-width: 1200px;
	margin: 0 auto clamp(40px, 6vw, 80px);
}

/* 見出しは文字だけ(英語の添え書きや前置きの飾りは付けない) */
.section__title {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	font-feature-settings: "palt" 1;
}

/* ---- achievements ---- */
/* 3 件を同じ重さで並べない。生成AIの 1 件を大きく、残り 2 件は小さく横に並べる */
.works {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 80px);
	max-width: 1200px;
	margin: 0 auto;
}

.work {
	min-width: 0;
}

.work--lead {
	grid-column: 1 / -1;
	padding-bottom: clamp(48px, 6vw, 96px);
	border-bottom: 1px solid var(--glass);
}

/* 見出しと要点は文節の切れ目で折り返し、行の長さもそろえる(未対応のブラウザでは通常の折り返し) */
.work__title,
.work__catch {
	word-break: auto-phrase;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.work__title {
	margin: 0 0 0.7em;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: 0.04em;
	font-feature-settings: "palt" 1;
}

.work--lead .work__title {
	max-width: 14em;
	margin-bottom: 0.6em;
	font-size: clamp(34px, 5vw, 68px);
	line-height: 1.3;
}

/* 主役の説明は見出しの左端からずらし、右寄りに置いて軸を崩す */
.work--lead .work__body {
	max-width: 36em;
	margin-left: auto;
	margin-right: clamp(0px, 6vw, 96px);
}

.work__catch {
	margin: 0 0 0.9em;
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
	color: var(--reagent);
	font-feature-settings: "palt" 1;
}

.work--lead .work__catch {
	font-size: clamp(18px, 1.8vw, 22px);
}

.work__text {
	max-width: var(--measure);
	margin: 0;
	color: var(--ink-soft);
}

/* ---- company ---- */
.profile {
	max-width: 1200px;
	margin: 0 auto;
	border-top: 1px solid var(--glass);
}

.profile__row {
	display: grid;
	grid-template-columns: minmax(7em, 2fr) minmax(0, 10fr);
	gap: 16px 32px;
	padding: clamp(20px, 2.4vw, 32px) 0;
	border-bottom: 1px solid var(--glass);
}

.profile__term {
	color: var(--ink-soft);
	font-weight: 500;
}

.profile__desc {
	margin: 0;
	font-weight: 500;
}

.business {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr));
	gap: 10px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.business li {
	position: relative;
	padding-left: 1.3em;
}

/* ロゴのフラスコの中の四角 */
.business li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.78em;
	width: 7px;
	height: 5px;
	background: var(--reagent);
}

/* ---- announcements ---- */
.news {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--glass);
}

.news__item {
	display: grid;
	grid-template-columns: minmax(9em, 2fr) minmax(0, 10fr);
	gap: 8px 32px;
	padding: clamp(24px, 3vw, 40px) 0;
	border-bottom: 1px solid var(--glass);
}

.news__date {
	color: var(--ink-soft);
	font-family: var(--font-en);
	font-weight: 500;
	white-space: nowrap;
}

.news__title {
	margin: 0 0 0.6em;
	font-size: clamp(18px, 1.7vw, 21px);
	font-weight: 700;
	line-height: 1.6;
	font-feature-settings: "palt" 1;
}

.news__text {
	max-width: var(--measure);
	margin: 0 0 1.2em;
	color: var(--ink-soft);
}

.news__text strong { color: var(--ink); }

.news__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 700;
	text-underline-offset: 0.3em;
}

.news__link::before {
	content: "PDF";
	padding: 3px 6px 2px;
	background: var(--reagent);
	color: var(--light);
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
}

/* ---- location ---- */
.place {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	align-items: end;
	gap: clamp(28px, 5vw, 80px);
	max-width: 1200px;
	margin: 0 auto;
}

.place__address {
	font-size: clamp(20px, 2.1vw, 28px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.04em;
	font-feature-settings: "palt" 1;
}

.place__zip {
	display: block;
	color: var(--ink-soft);
	font-family: var(--font-en);
	font-size: 0.62em;
	font-weight: 500;
}

.place__map {
	aspect-ratio: 16 / 10;
	background: var(--reagent-soft);
}

.place__map iframe {
	width: 100%;
	height: 100%;
	filter: grayscale(1) contrast(1.02) brightness(1.03);
}

/* ---- contact ---- */
.contact {
	margin-top: clamp(88px, 12vw, 168px);
	padding-bottom: clamp(88px, 12vw, 160px);
	background: var(--ink);
	color: var(--light);
	/* 上端も切れ目の角度で断つ */
	clip-path: polygon(0 clamp(40px, 6vw, 96px), 100% 0, 100% 100%, 0 100%);
}


.contact-form {
	max-width: 760px;
	margin: 0 auto;
}

.info-message {
	margin: 0 0 32px;
	padding: 14px 18px;
	border-left: 3px solid var(--reagent-light);
	background: var(--on-ink-fill);
	font-weight: 500;
}
.info-message--error { border-left-color: var(--danger-light); }

.form-group { margin-bottom: 28px; }

.floating-label {
	position: relative;
}

.floating-label input,
.floating-label textarea {
	width: 100%;
	padding: 26px 16px 10px;
	background: var(--on-ink-fill);
	border: 0;
	border-bottom: 1px solid var(--on-ink-line);
	border-radius: 0;
	color: var(--light);
	font: 500 16px/1.7 var(--font-ja);
	transition: border-color 0.3s ease, background-color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.floating-label textarea {
	min-height: 180px;
	resize: vertical;
}

.floating-label input:focus,
.floating-label textarea:focus {
	outline: none;
	background: var(--on-ink-fill-focus);
	border-bottom-color: var(--reagent-light);
	box-shadow: 0 2px 0 0 var(--reagent-light);
}

.floating-label label {
	position: absolute;
	top: 18px;
	left: 16px;
	color: var(--on-ink-text);
	font-size: 16px;
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform 0.3s var(--ease-cut), color 0.3s ease;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label {
	color: var(--reagent-light);
	transform: translateY(-12px) scale(0.75);
}

.required { color: var(--reagent-light); }

.floating-label [aria-invalid="true"] { border-bottom-color: var(--danger-light); }

.error-message {
	display: block;
	margin-top: 8px;
	color: var(--danger-text);
	font-size: 14px;
	font-weight: 500;
}

.confirm-label {
	color: var(--on-ink-text);
	font-size: 13px;
}

.confirm-value {
	padding: 4px 0 18px;
	border-bottom: 1px solid var(--on-ink-line);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	margin-top: 12px;
	padding: 18px 40px;
	background: var(--reagent);
	border: 0;
	color: var(--light);
	font: 700 16px/1 var(--font-ja);
	letter-spacing: 0.12em;
	cursor: pointer;
	/* ボタンの両端もロゴの斜線 */
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
	transition: background-color 0.3s ease;
}

.button:hover { background: var(--reagent-hover); }

.button:focus-visible {
	outline: 2px solid var(--reagent-light);
	outline-offset: 4px;
	clip-path: none;
}

.button--ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--reagent-light);
	clip-path: none;
}

/* ---- footer ---- */
.site-footer {
	background: var(--ink);
	color: var(--on-ink-text);
	border-top: 1px solid var(--on-ink-line-faint);
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px var(--gutter);
}

.site-footer__logo {
	width: 120px;
	height: auto;
}

.site-footer__copy {
	margin: 0;
	font-family: var(--font-en);
	letter-spacing: 0.04em;
}

/* ---- responsive ---- */
@media (max-width: 860px) {
	:root { --header-h: 60px; }

	.site-header__logo img { width: 128px; }

	.menu-toggle { display: inline-flex; }

	.site-nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		background: var(--medium);
		box-shadow: 0 1px 0 var(--glass);
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		visibility: hidden;
		transition: clip-path 0.5s var(--ease-cut), visibility 0s linear 0.5s;
	}

	.site-nav.is-open {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		visibility: visible;
		transition: clip-path 0.5s var(--ease-cut), visibility 0s;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0;
		padding: 8px var(--gutter) 20px;
	}

	.site-nav__list a {
		display: block;
		padding: 14px 0;
		font-size: 18px;
		border-bottom: 1px solid var(--glass);
	}

	.site-nav__list a::after { display: none; }

	.works { grid-template-columns: minmax(0, 1fr); }
	.work--lead .work__body { margin-right: 0; }

	.profile__row,
	.news__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.place { grid-template-columns: minmax(0, 1fr); }

	.place__map { aspect-ratio: 4 / 3; }
}

@media (max-aspect-ratio: 4/5) {
	.hero__copy {
		top: calc(var(--header-h) + 20px);
		right: 20px;
		font-size: clamp(34px, 10.5vw, 64px);
	}
}

@media (max-width: 480px) {
	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.button { width: 100%; }
}

/* ---- 動きを減らす設定 ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

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

	.js .hero__line { --cut: 140%; clip-path: none; }
}