/*
 * Web制作ページ（/hpproduction/、page ID 34）専用CSS
 *
 * 確定済みprototype（Harashina_Web_Project/prototypes/web-production/
 * css/style.css）の正式移植。functions.php側でis_page('hpproduction')
 * 限定enqueueされるため、他ページには一切影響しない
 * （business.css/shop.css/cta.css等、front-page.php専用CSSと同じ方針）。
 *
 * 再利用（redefineしない）:
 *  - 色・フォントファミリー・幅(narrow)・easing・transition-durationは
 *    既存 assets/css/tokens.css の --bg/--bg-alt/--text/--text-muted/
 *    --border-color/--accent/--photo-frame/--font-sans/--font-serif/
 *    --font-mono/--width-narrow/--ease-in/--transition-duration と
 *    完全一致するため、そのままvar()で参照する。
 *  - .js-reveal / .is-visible の基本ルールとreveal-on-scroll自体は
 *    既存の共通基盤（assets/css/motion.css + assets/js/reveal.js）を
 *    そのまま利用し、ここでは再定義しない。
 *
 * ページ固有として追加（.page-hpproduction-mainへスコープ）:
 *  - --width-wide: 1440px（テーマ共通のtokens.css --width-wide:1400pxとは
 *    異なる値のため、共通トークン自体は変更せずこのページ内だけ上書き）
 *  - --edge / --font-hero-en(Inter) / --font-hand(Zen Kurenaido)は
 *    テーマに存在しないため新規定義
 *  - box-sizing/img/buttonの基礎resetは、テーマの共通style.cssに
 *    グローバルなresetが存在しないため（確認済み）、このページ内だけに
 *    スコープして必要最小限を用意する
 */

.page-hpproduction-main{
	--width-wide: 1440px;
	--edge: clamp(1.25rem, 6vw, 6rem);
	/* Hero大見出し「WEB / PRODUCTION」専用（Wの字形検証を経て確定）。 */
	--font-hero-en: "Inter", sans-serif;
	/* Introduction背景の「手書きの迷い」表現専用。Hero・SERVICE GUIDEでは未使用。 */
	--font-hand: "Zen Kurenaido", "Noto Sans JP", sans-serif;
}

.page-hpproduction-main *,
.page-hpproduction-main *::before,
.page-hpproduction-main *::after{ box-sizing: border-box; }

.page-hpproduction-main img{ max-width: 100%; display: block; }

.page-hpproduction-main button{
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.page-hpproduction-main :focus-visible,
.lightbox :focus-visible{
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ============================================================
   共通: eyebrow / 見出し / リンク
============================================================ */

.hero__eyebrow, .intro__eyebrow, .guide__eyebrow{
	font-family: var(--font-mono);
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
}

.intro__eyebrow, .guide__eyebrow{
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	color: var(--accent);
}

/* ============================================================
   HERO
============================================================ */

.hero{
	background: var(--bg);
	padding-block: clamp(4.5rem, 11vw, 7rem) clamp(3rem, 7vw, 5rem);
}

.hero__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 3vw, 1.6rem);
}

.hero__eyebrow{
	display: flex;
	flex-direction: column;
	line-height: 0.94;
	font-weight: 500;
	letter-spacing: 0.01em;
	font-family: var(--font-hero-en);
}

.hero__eyebrow span{
	display: block;
	font-size: clamp(2.4rem, 1.5rem + 7.2vw, 5.6rem);
}

.hero__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.9rem, 1.3rem + 3.4vw, 3.6rem);
	line-height: 1.45;
	margin: 0;
}

.hero__text{
	max-width: 34rem;
}

.hero__lead{
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(1.15rem, 1rem + 1vw, 1.55rem);
	line-height: 1.7;
	margin: 0 0 1.1em;
}

.hero__body{
	font-size: 0.94rem;
	line-height: 2;
	color: var(--text-muted);
	margin: 0;
}

.hero__photo{ margin: 0; }

.hero__photo-frame{
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.hero__photo-frame::before{
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--border-color);
	transform: translate(10px, 10px);
	z-index: 0;
}

.hero__photo-frame img{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

/* ---- Hero: 読み込み時の入場motion（scroll trigger不要、CSSのみ） ---- */

.hero__eyebrow{ opacity: 0; transform: translateY(14px); animation: hero-rise 0.8s var(--ease-in) 0.22s forwards; }
.hero__heading{ opacity: 0; transform: translateY(14px); animation: hero-rise 0.8s var(--ease-in) 0.42s forwards; }
.hero__text{ opacity: 0; transform: translateY(14px); animation: hero-rise 0.8s var(--ease-in) 0.6s forwards; }
.hero__photo-frame{ clip-path: inset(0 0 0 100%); animation: hero-photo 1s var(--ease-in) 0.5s forwards; }
.hero__photo-frame::before{ opacity: 0; animation: hero-frame-in 0.6s var(--ease-in) 1.15s forwards; }

@keyframes hero-rise{
	from{ opacity: 0; transform: translateY(14px); }
	to{ opacity: 1; transform: translateY(0); }
}
@keyframes hero-photo{
	from{ clip-path: inset(0 0 0 100%); }
	to{ clip-path: inset(0 0 0 0%); }
}
@keyframes hero-frame-in{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

@media (min-width: 960px){
	.hero__inner{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.75rem);
		row-gap: clamp(0.9rem, 1.6vw, 1.3rem);
		align-items: start;
	}
	.hero__eyebrow{ grid-column: 1 / 8; grid-row: 2; }
	.hero__heading{ grid-column: 1 / 8; grid-row: 3; }
	.hero__text{ grid-column: 1 / 7; grid-row: 4; }
	.hero__photo{ grid-column: 8 / 13; grid-row: 1 / 5; align-self: stretch; }
	.hero__photo-frame{ height: 100%; aspect-ratio: auto; }
}

/* ============================================================
   INTRODUCTION
    Heroと同じ--bg（背景色を変えない）で連続した体験に見せる。
   section冒頭に細い縦線を置き、Introductionの視覚的な起点とする。

   2レイヤー構成:
   - BACKGROUND（.intro__murmurs）: 手書き風フォント(Zen Kurenaido)で
     「まだ言葉になっていない困りごと」が、現れて・ゆらいで・消える。
     5個は同時に全部出さず、時間差でゆるく入れ替わる（1〜2個が重なる
     瞬間はある）。aria-hiddenの装飾レイヤーで、伝えるべき内容は
     foreground（見出し・本文）がそのまま担う。
   - FOREGROUND（.intro__answer）: 整ったserif/sansで、安定して読める
     「原科からの答え」。背景のゆらぎとは別のtransition（一度だけ静かに
     fade+translate-inして、その後は動かさない）。

   .intro__stage自体は.js-revealクラスを持たず、専用の小さなJS
   （assets/js/page-web-production.js）でIntersectionObserverにより
   .is-visibleを付与する（.intro__answerはjs-revealで共通reveal.jsが
   処理する、別トリガー）。
============================================================ */

.intro{
	background: var(--bg);
	padding-block: clamp(1rem, 4vw, 2rem) clamp(4rem, 9vw, 6.5rem);
	overflow-x: hidden;
}

.intro__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
}

.intro__inner::before{
	content: "";
	display: block;
	width: 1px;
	height: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--border-color);
	margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

.intro__eyebrow{ margin-bottom: clamp(1.2rem, 4vw, 1.8rem); }

.intro__stage{
	position: relative;
	min-height: clamp(420px, 44vw, 620px);
}

/* ---- BACKGROUND: 手書きの迷い ---- */

.intro__murmurs{
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	pointer-events: none;
}

.intro__murmur{
	position: absolute;
	margin: 0;
	white-space: nowrap;
	font-family: var(--font-hand);
	font-weight: 400;
	color: var(--text);
	opacity: 0;
	line-height: 1.5;
	letter-spacing: 0.01em;
	will-change: opacity, transform, filter;
}

.intro__stage.is-visible .intro__murmur{
	animation-name: murmur-drift;
	animation-timing-function: var(--ease-in);
	animation-iteration-count: infinite;
	animation-duration: var(--m-dur, 8.5s);
	animation-delay: var(--m-delay, 0s);
}

/* opacity 0→1→0だけでなく、blur・微小translate・微小scale・微小回転が
   常に少しずつ変化し続けることで「輪郭が定まらない」ゆらぎを作る。
   ピーク中（12%〜60%）も一定値で止めず、複数の中間点で揺らしている。 */
@keyframes murmur-drift{
	0%   { opacity: 0;                              filter: blur(3px);   transform: translate(0, 7px)     scale(0.965) rotate(var(--m-rot, -0.6deg)); }
	14%  { opacity: var(--m-peak, 0.55);            filter: blur(0.5px); transform: translate(1px, 0)      scale(1)     rotate(0deg); }
	30%  { opacity: var(--m-peak, 0.55);            filter: blur(0px);   transform: translate(-1px, 1px)   scale(1.008) rotate(calc(var(--m-rot, -0.6deg) * -0.4)); }
	46%  { opacity: calc(var(--m-peak, 0.55)*0.82); filter: blur(0.9px); transform: translate(1px, -1px)    scale(0.995) rotate(calc(var(--m-rot, -0.6deg) * 0.5)); }
	62%  { opacity: var(--m-peak, 0.55);            filter: blur(0.3px); transform: translate(0, 0)        scale(1.003) rotate(0deg); }
	82%  { opacity: calc(var(--m-peak, 0.55)*0.35); filter: blur(2.2px); transform: translate(-1px, 3px)    scale(0.985) rotate(var(--m-rot, -0.6deg)); }
	100% { opacity: 0;                              filter: blur(3.4px); transform: translate(0, 6px)      scale(0.97)  rotate(0deg); }
}

/* 個別: mobile / tablet（<960px）。大・中・小をつけ、時間差で入れ替わる。
   モバイルは前景（見出し・本文・強調文）がstageの全高をほぼ占有し、
   横方向の「開いた列」も確保できないため、desktopより控えめな
   peak opacityにして、どの瞬間でも前景の可読性を邪魔しないようにする。
   murmur--1のみ見出しの直後に重ねる「最初の思考」として残す。 */
.intro__murmur--1{ /* 大・左上: 何を載せればいい？ */
	top: 1%; left: 1%;
	font-size: clamp(1.7rem, 7.4vw, 2.05rem);
	--m-peak: 0.4; --m-dur: 8.5s; --m-delay: 0s; --m-rot: -0.7deg;
}
.intro__murmur--2{ /* 中・右寄り: どんなサイトが必要？ */
	top: 12%; left: 46%;
	font-size: clamp(1.25rem, 5.4vw, 1.5rem);
	--m-peak: 0.34; --m-dur: 9.5s; --m-delay: 1s; --m-rot: 0.6deg;
}
.intro__murmur--3{ /* 小・本文の間: 何から始めればいい？ */
	top: 58%; left: 3%;
	font-size: clamp(1.05rem, 4.4vw, 1.25rem);
	--m-peak: 0.26; --m-dur: 10.5s; --m-delay: 2s; --m-rot: -0.5deg;
}
.intro__murmur--4{ /* 小: スマホでも見やすくしたい */
	top: 62%; left: 58%;
	font-size: clamp(1.05rem, 4.2vw, 1.2rem);
	--m-peak: 0.24; --m-dur: 9s; --m-delay: 3s; --m-rot: 0.5deg;
}
.intro__murmur--5{ /* 中: 公開したあと、どうする？（罫線より上、リード本文あたり） */
	top: 40%; left: 60%;
	font-size: clamp(1.2rem, 5.2vw, 1.4rem);
	--m-peak: 0.3; --m-dur: 9.8s; --m-delay: 4s; --m-rot: -0.4deg;
}

/* ---- FOREGROUND: 原科の答え（安定・整った書体） ---- */

.intro__answer{
	position: relative;
	z-index: 2;
	max-width: var(--width-narrow);
	padding-top: clamp(0.5rem, 3vw, 1.5rem);
}

.intro__heading{
	margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
	font-family: var(--font-serif);
	font-weight: 800;
	font-size: clamp(2.1rem, 1.5rem + 4.4vw, 3rem);
	line-height: 1.4;
	max-width: 15em;
	text-wrap: balance;
	line-break: strict;
	color: var(--text);
}

.intro__lead{
	margin: 0 0 clamp(1.8rem, 4.5vw, 2.6rem);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
	line-height: 1.9;
	color: var(--text);
}

.intro__emphasis-block{
	padding-top: clamp(1rem, 2.5vw, 1.4rem);
	border-top: 1px solid var(--border-color);
}

.intro__emphasis{
	margin: 0 0 0.6em;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	letter-spacing: 0.02em;
	color: var(--text);
}

.intro__note{
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--text-muted);
}

/* foreground自体の初回登場は静かに一度だけ（.js-revealを再利用）。
   表示後は背景と違い一切動かさない。 */
.intro__answer.js-reveal{ transition-duration: 0.9s; }

@media (min-width: 960px){
	.intro__inner{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.75rem);
	}
	.intro__inner::before{ grid-column: 1 / 2; }
	.intro__eyebrow{ grid-column: 1 / 8; }
	.intro__stage{ grid-column: 1 / 13; min-height: clamp(480px, 38vw, 680px); }

	.intro__answer{ max-width: none; }
	.intro__heading{ max-width: none; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem); }
	.intro__lead, .intro__emphasis-block{ max-width: var(--width-narrow); }

	/* 個別: desktop（>=960px）。断片はさらに大きく、時間差もやや長く。
	   PCでは横方向の余裕を使い、右側だけに集めない。murmur--1は
	   見出しの真裏に重ねる「答えの元になった最初の思考」として意図的に
	   残す。murmur--3/4は大きく左へ寄せ、リード本文の後ろまで薄く
	   重なることを許容（前景はopaque・z-index上位のため可読性は保たれる）。
	   murmur--5も右端で切れる配置をやめ、内側へ寄せている。
	   4個の左端（76/34/12/55%）は互いに揃えていない。 */
	.intro__murmur--1{ top: 3%;  left: 3%;  font-size: clamp(2.4rem, 1.3rem + 2.8vw, 3.6rem); --m-peak: 0.4; }
	.intro__murmur--2{ top: 16%; left: 76%; font-size: clamp(1.6rem, 0.95rem + 1.6vw, 2.2rem); }
	.intro__murmur--5{ top: 22%; left: 42%; font-size: clamp(1.9rem, 1.1rem + 2.1vw, 2.7rem); }
	.intro__murmur--3{ top: 55%; left: 12%; font-size: clamp(1.4rem, 0.85rem + 1.3vw, 1.9rem); }
	.intro__murmur--4{ top: 78%; left: 34%; font-size: clamp(1.3rem, 0.8rem + 1.1vw, 1.7rem); }
}

/* ============================================================
   SERVICE GUIDE（A4チラシ）
   ここだけ --bg-alt に切り替え、gradient transitionで
   Introductionからなだらかに繋ぐ（サイト全体の背景切替パターンを踏襲）。
============================================================ */

.guide{
	--transition-h: clamp(3.5rem, 8vw, 6rem);
	position: relative;
	background: var(--bg-alt);
	padding-block: 0 clamp(4.5rem, 10vw, 7.5rem);
}

.guide::before{
	content: "";
	display: block;
	height: var(--transition-h);
	background: linear-gradient(to bottom, var(--bg), var(--bg-alt));
}

.guide__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	padding-top: clamp(1.5rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 6vw, 3rem);
}

.guide__text{ max-width: 34rem; }

.guide__eyebrow{ margin-bottom: 1rem; }

.guide__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.6;
	margin: 0 0 1.1em;
	max-width: 12em;
}
/* 「ホームページづくりの、」の途中で折り返らないよう固定する。
   幅の狭い列（1124px等）でも改行位置が崩れないための最小限の指定。 */
.guide__heading-line{ white-space: nowrap; }

.guide__lead{
	font-size: 1rem;
	line-height: 1.95;
	color: var(--text-muted);
	margin: 0 0 1.4em;
}

.guide__note{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	margin: 0 0 1.6em;
}

.guide__link{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: 0.88rem;
	letter-spacing: 0.03em;
	color: var(--text);
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--text);
	transition: color var(--transition-duration) var(--ease-in), border-color var(--transition-duration) var(--ease-in);
}
.guide__link:hover, .guide__link:focus-visible{
	color: var(--accent);
	border-color: var(--accent);
}
.guide__link-arrow{ display: inline-block; transition: transform 0.35s var(--ease-in); }
.guide__link:hover .guide__link-arrow, .guide__link:focus-visible .guide__link-arrow{ transform: translateX(4px); }

/* ---- チラシ visual ----
   「PDFを中央に貼っただけ」に見せないため、mat/枠のような
   カード風の囲みは使わず、紙自体に薄いborder＋やわらかく拡散した
   shadowだけを与える（「紙がそこに置かれている」程度の軽い立体感）。
   幅は列幅いっぱい（%指定ではなくwidth:100%）まで自然に使い、
   デスクトップだけmax-widthで上限を設ける。 */
.guide__visual{ display: flex; justify-content: center; }

.guide__flyer-trigger{
	position: relative;
	display: block;
	width: 100%;
	transition: transform 0.5s var(--ease-in);
}
/* background・box-shadowはtrigger（未clip）ではなく、clip-pathが
   かかっているimg自身に持たせる。こうすることでreveal前は
   「何もないSERVICE GUIDE背景」がそのまま見え、背景・影も画像の
   出現に合わせて一緒にクリップされながら現れる。 */
.guide__flyer-trigger img{
	display: block;
	width: 100%;
	height: auto;
	background: var(--bg);
	border: 1px solid var(--border-color);
	box-shadow: 0 30px 60px -38px rgba(26, 29, 33, 0.3), 0 10px 22px -16px rgba(26, 29, 33, 0.2);
}

.guide__flyer-trigger:hover,
.guide__flyer-trigger:focus-visible{
	transform: translateY(-4px);
}
.guide__flyer-trigger:hover img,
.guide__flyer-trigger:focus-visible img{
	box-shadow: 0 38px 70px -34px rgba(26, 29, 33, 0.34), 0 12px 26px -16px rgba(26, 29, 33, 0.22);
}

.guide__flyer-hint{
	position: absolute;
	right: clamp(0.8rem, 2vw, 1.2rem);
	bottom: clamp(0.8rem, 2vw, 1.2rem);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border-color);
	padding: 0.35em 0.7em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--transition-duration) var(--ease-in), transform var(--transition-duration) var(--ease-in);
}
.guide__flyer-trigger:hover .guide__flyer-hint,
.guide__flyer-trigger:focus-visible .guide__flyer-hint{
	opacity: 1;
	transform: translateY(0);
}

/* tablet幅（縦積みのままだが列幅が広い）でA4比率がそのまま伸び切ると
   縦に間延びするため、600px以上だけ上限を設ける。390pxは列幅＝
   viewport幅に近く、上限なしのまま「余白を取りすぎない」表示にする。 */
@media (min-width: 600px){
	.guide__flyer-trigger{ max-width: 30rem; }
}

/* ---- 静かな入場motion（チラシのみ、上からのclip revealを付加） ---- */
.guide__visual.js-reveal{
	transition: opacity 1s var(--ease-in), transform 1s var(--ease-in);
}
.guide__visual .guide__flyer-trigger img{
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.8s var(--ease-in) 0.15s, box-shadow 0.5s var(--ease-in);
}
.guide__visual:not(.is-visible) .guide__flyer-trigger img{
	clip-path: inset(0 0 100% 0);
}

@media (min-width: 960px){
	.guide__inner{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.75rem);
		align-items: start;
	}
	/* 非対称: チラシは列上端に揃え、テキストは少し下げて始める
	   （2列が単純に横並びした構図に見えないようにする）。 */
	.guide__text{ grid-column: 1 / 6; padding-top: clamp(1.5rem, 5vw, 4rem); }
	.guide__visual{ grid-column: 6 / 13; justify-content: flex-end; }
	.guide__flyer-trigger{ max-width: clamp(20rem, 34vw, 34rem); }
}

/* ============================================================
   SERVICE
   「ホームページ制作で、できること。」を、カードUIではなく
   エディトリアルな一覧（番号・英字ラベル・日本語名・補足文・細い罫線）
   として構成する。列幅は12colグリッドで非対称にし、単純な
   「同じカードが5枚並ぶ」印象を避ける。
============================================================ */

.service{
	background: var(--bg-alt);
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.service__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
}

.service__head{ max-width: 34rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.service__eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}

.service__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.6;
	margin: 0;
	max-width: 14ch;
}

.service__list{
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border-color);
}

.service__item{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-block: clamp(1.6rem, 5vw, 2.2rem);
	border-bottom: 1px solid var(--border-color);
}

/* 行ごとにわずかな時間差でfade+translateする（.js-revealを共用、
   delayだけ.service__item:nth-childで少しずつずらす）。 */
.service__item.js-reveal{ transition-delay: 0s; }
.service__item.js-reveal:nth-child(2){ transition-delay: 0.1s; }
.service__item.js-reveal:nth-child(3){ transition-delay: 0.2s; }
.service__item.js-reveal:nth-child(4){ transition-delay: 0.3s; }

.service__index{
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
	color: var(--text-muted);
	line-height: 1;
	transition: color var(--transition-duration) var(--ease-in);
}

.service__label{
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	text-transform: uppercase;
}

.service__name{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
	color: var(--text);
	line-height: 1.5;
	transition: transform var(--transition-duration) var(--ease-in);
}

.service__rule{
	display: none;
}

.service__desc{
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.9;
	color: var(--text-muted);
	max-width: 28rem;
}

@media (min-width: 960px){
	.service__item{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.75rem);
		align-items: baseline;
		gap: 0;
	}
	.service__index{ grid-column: 1 / 2; align-self: start; }
	.service__label{
		grid-column: 2 / 4;
		align-self: start;
		padding-top: 0.5em;
	}
	.service__name{
		grid-column: 4 / 8;
		position: relative;
		width: fit-content;
	}
	.service__rule{
		display: block;
		grid-column: 4 / 8;
		grid-row: 2;
		width: clamp(2rem, 4vw, 3rem);
		height: 1px;
		background: var(--text);
		margin-top: 0.6em;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.4s var(--ease-in);
	}
	.service__desc{ grid-column: 8 / 13; }

	.service__item:hover .service__index,
	.service__item:focus-within .service__index{
		color: var(--accent);
	}
	.service__item:hover .service__name,
	.service__item:focus-within .service__name{
		transform: translateX(6px);
	}
	.service__item:hover .service__rule,
	.service__item:focus-within .service__rule{
		transform: scaleX(1);
	}
}

/* ============================================================
   SAMPLE SITES
   「実績」ではなく「制作サンプル」であることをeyebrowとは別に
   明示する。3点は均等カードにせず、画像サイズ・左右位置・
   captionの位置関係を1点ずつ変えた誌面のような構成にする。
   背景はSERVICE（--bg-alt）からvar(--bg)へ切り替え、境目は
   このセクション側だけのgradientで自然に繋ぐ（SERVICE側は無変更）。
============================================================ */

.samples{
	position: relative;
	background: var(--bg);
	padding-block: 0 clamp(4rem, 9vw, 7rem);
}
.samples::before{
	content: "";
	display: block;
	height: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
}

.samples__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	padding-top: clamp(2rem, 5vw, 3rem);
}

.samples__head{ max-width: 34rem; margin-bottom: clamp(3rem, 7vw, 5rem); }

.samples__eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}

.samples__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.6;
	margin: 0 0 1em;
	max-width: 16em;
}
/* 「デザインのかたちを、」が途中で折り返らないよう固定（ch単位だと
   CJKで幅が不足するため、行内はnowrapで明示的に管理している）。 */
.samples__heading-line{ white-space: nowrap; }

.samples__tag{
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	padding: 0.4em 0.8em;
	margin: 0;
}

.samples__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(3.5rem, 9vw, 6.5rem);
}

.samples__item{
	display: flex;
	flex-direction: column;
	gap: clamp(0.8rem, 2vw, 1.2rem);
}
.samples__item.js-reveal{ transform: translateY(28px); transition-duration: 1s; }
.samples__item.js-reveal:nth-child(2){ transition-delay: 0.15s; }
.samples__item.js-reveal:nth-child(3){ transition-delay: 0.3s; }

.samples__figure{
	display: block;
	position: relative;
	/* 01/02/03すべて一律87%に縮小。figure（キャプチャコンテナ）自体を
	   縮めることで、03のaspect-ratio/overflow:hiddenクロップや
	   hintの位置はそのまま比例して小さくなる（個別調整は不要）。
	   各itemに割り当てたgrid-column（非対称配置）自体は変更していない。 */
	max-width: 87%;
}
.samples__figure img{
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border-color);
}

/* 03（建設会社）だけ: 元画像ファイル上端・下端に既存の緑色破損帯が
   あるため、ファイルは無加工のまま、表示側のcropで隠す。
   01/02の height:auto（無クロップ）は変更していない。

   01/02と同じ比率（1536/1022）のfigureをoverflow:hiddenの
   窓とし、中のimgを136.3%（=1536/1127.3）へ均一に拡大して中央寄せで
   配置する「2軸クロップ」。これにより上下・左右を均等に
   実測破損分＋安全マージン相当（元画像基準で上下・左右とも約13.3%）
   だけ切り取り、破損帯を隠したまま01/02と同じ見た目比率に揃えている。
   margin-top/bottomの%はCSS仕様上「要素の幅」基準で解決されるため、
   縦横で数値が異なる（横-18.15% / 縦-12%）。

   03のgrid-columnは01と同じ共通ルール（1/8）に統一したため、
   .samples__figureのmax-width:87%がそのまま01と同じ実寸に揃う。 */
.samples__item--c .samples__figure{
	aspect-ratio: 1536 / 1022;
	overflow: hidden;
	border: 1px solid var(--border-color);
}
.samples__item--c .samples__figure img{
	width: 136.3%;
	max-width: none;
	height: auto;
	margin: -12% -18.15%;
	border: none;
}

.samples__hint{
	position: absolute;
	right: clamp(0.8rem, 2vw, 1.2rem);
	bottom: clamp(0.8rem, 2vw, 1.2rem);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border-color);
	padding: 0.35em 0.7em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--transition-duration) var(--ease-in), transform var(--transition-duration) var(--ease-in);
}
.samples__figure:hover .samples__hint,
.samples__figure:focus-visible .samples__hint{
	opacity: 1;
	transform: translateY(0);
}

.samples__caption{
	display: flex;
	align-items: baseline;
	gap: 0.9em;
}
.samples__index{
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--text-muted);
	line-height: 1;
}
.samples__label{
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.samples__name{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--text);
}

@media (min-width: 960px){
	.samples__item{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.75rem);
		align-items: start;
	}

	/* 共通ルール（01・03はこのまま、02だけ左右反転で上書き）:
	   画像7列＋キャプション5列＝12列。両者の間に空き列を挟まず
	   隣接させ、間隔は常にcolumn-gap1つ分だけにする。縦位置も
	   align-self:startで統一。 */
	.samples__figure{ grid-row: 1; grid-column: 1 / 8; justify-self: end; }
	.samples__caption{
		grid-row: 1;
		grid-column: 8 / 13;
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		gap: 0.5em;
		margin-left: 0;
	}

	/* 02だけキャプション左・画像右に反転。列数配分（7列／5列／
	   隙間なし）は共通ルールのまま、開始・終了列を入れ替える。 */
	.samples__item--b .samples__figure{ grid-column: 6 / 13; justify-self: start; }
	.samples__item--b .samples__caption{ grid-column: 1 / 6; align-items: flex-end; }
}

/* ============================================================
   PRICE
   カードを並べる構成ではなく、SERVICEと同系統の罫線＋
   タイポグラフィの一覧にする。
   背景はSAMPLE SITES（var(--bg)）からvar(--bg-alt)へ切り替え、
   境目はこのセクション側だけのgradientで自然に繋ぐ（GUIDE/SAMPLES
   と同じ背景切替パターンを踏襲、SAMPLE SITES側は無変更）。
============================================================ */

.price{
	position: relative;
	background: var(--bg-alt);
	padding-block: 0 clamp(3.5rem, 9vw, 6.5rem);
}
.price::before{
	content: "";
	display: block;
	height: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(to bottom, var(--bg), var(--bg-alt));
}

.price__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	padding-top: clamp(2rem, 5vw, 3rem);
}

.price__head{ max-width: 34rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.price__eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}

.price__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.6;
	margin: 0 0 1.2em;
	white-space: nowrap;
}

.price__lead{
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--text-muted);
}

.price__list{
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--width-narrow);
	border-top: 1px solid var(--border-color);
}

.price__item{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-block: clamp(1.8rem, 5vw, 2.4rem);
	border-bottom: 1px solid var(--border-color);
}

.price__item.js-reveal{ transition-delay: 0s; }
.price__item.js-reveal:nth-child(2){ transition-delay: 0.1s; }
.price__item.js-reveal:nth-child(3){ transition-delay: 0.2s; }

.price__index{
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
	color: var(--text-muted);
	line-height: 1;
}

.price__plan{
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.price__label{
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	text-transform: uppercase;
}

.price__name{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	color: var(--text);
	line-height: 1.4;
}

.price__amount{
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
	line-height: 1.2;
	color: var(--text);
}

.price__unit{
	display: inline-block;
	margin-left: 0.4em;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 0.5em;
	color: var(--text-muted);
}

.price__scope{
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.9;
	color: var(--text-muted);
}

.price__notes{
	margin-top: clamp(2rem, 5vw, 3rem);
	max-width: var(--width-narrow);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	border-top: 1px solid var(--border-color);
	padding-top: clamp(1.75rem, 4.5vw, 2.5rem);
}

.price__note{
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.price__note-label{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	color: var(--text-muted);
	text-transform: uppercase;
}

.price__note-value{
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
	line-height: 1.5;
	color: var(--text);
}

@media (min-width: 960px){
	.price__item{
		display: flex;
		flex-direction: row;
		align-items: baseline;
		flex-wrap: wrap;
		column-gap: 1.5rem;
		row-gap: 0.5rem;
	}
	.price__index{ flex: 0 0 2.6rem; }
	.price__plan{ flex: 0 0 8.5rem; align-self: start; padding-top: 0.35em; }
	.price__amount{ flex: 0 0 auto; }
	.price__scope{ flex: 1 1 12rem; }
}

/* ============================================================
   FLOW
   8工程をカード化せず、SERVICE/PRICEと同系統の罫線＋
   タイポグラフィの一覧にする。各itemにborder-left＋border-bottomを
   付け、工程ごとのまとまり（グループ感）を出す。01の上だけは
   横線を置かず、01→02の間から区切る。04・07の直前だけ
   margin-topを広げてリズムに緩急をつけている。
   背景はPRICE（var(--bg-alt)）からvar(--bg)へ切り替え、境目は
   GUIDE/SAMPLES/PRICEと同じgradientパターンで自然に繋ぐ
   （PRICE側は無変更）。
============================================================ */

.flow{
	position: relative;
	background: var(--bg);
	padding-block: 0 clamp(4rem, 9vw, 7rem);
}
.flow::before{
	content: "";
	display: block;
	height: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
}

.flow__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	padding-top: clamp(2rem, 5vw, 3rem);
}

.flow__head{ max-width: 34rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.flow__eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}

.flow__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.6;
	margin: 0;
}

.flow__list{
	list-style: none;
	margin: 0;
	padding: 0;
}

.flow__item{
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.6rem, 4.5vw, 2.1rem) 0 clamp(1.6rem, 4.5vw, 2.1rem) clamp(1.25rem, 4vw, 1.75rem);
	border-bottom: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
}

.flow__item--turn{ margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.flow__item.js-reveal{ transition-delay: 0s; }
.flow__item.js-reveal:nth-child(2){ transition-delay: 0.05s; }
.flow__item.js-reveal:nth-child(3){ transition-delay: 0.1s; }
.flow__item.js-reveal:nth-child(4){ transition-delay: 0.15s; }
.flow__item.js-reveal:nth-child(5){ transition-delay: 0.2s; }
.flow__item.js-reveal:nth-child(6){ transition-delay: 0.25s; }
.flow__item.js-reveal:nth-child(7){ transition-delay: 0.3s; }
.flow__item.js-reveal:nth-child(8){ transition-delay: 0.35s; }

.flow__index{
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.15rem);
	color: var(--text-muted);
	line-height: 1;
}

.flow__body{
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.flow__title{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	color: var(--text);
	line-height: 1.4;
	margin: 0;
}

.flow__desc{
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.9;
	color: var(--text-muted);
	max-width: 34rem;
}

.flow__desc strong{
	font-weight: 700;
	color: var(--text);
}

@media (min-width: 960px){
	.flow__item{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1rem, 2vw, 1.5rem);
		align-items: baseline;
		gap: 0;
	}
	.flow__index{ grid-column: 1 / 2; align-self: start; }
	.flow__body{ display: contents; }
	.flow__title{ grid-column: 2 / 4; align-self: start; }
	.flow__desc{ grid-column: 5 / 12; max-width: 30rem; }
}

/* ============================================================
   AFTER SUPPORT
   PRICE/FLOWと同じ「全幅の縦リスト」構成を三度繰り返さないよう、
   SERVICE GUIDEと同系統の非対称2カラム（見出し・導入文／項目）に
   変える。項目内の01/02/03は小さな添え字扱いにとどめ、価格も
   PRICEの主役価格より控えめなサイズにする（カード化しない）。
   背景はFLOW（var(--bg)）からvar(--bg-alt)へ切り替え、境目は
   GUIDE/SAMPLES/PRICE/FLOWと同じgradientパターンで自然に繋ぐ
   （FLOW側は無変更）。
============================================================ */

.support{
	position: relative;
	background: var(--bg-alt);
	padding-block: 0 clamp(4rem, 9vw, 7rem);
}
.support::before{
	content: "";
	display: block;
	height: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(to bottom, var(--bg), var(--bg-alt));
}

.support__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	padding-top: clamp(2rem, 5vw, 3rem);
}

.support__intro{
	max-width: 30rem;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.support__eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}

.support__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.6;
	margin: 0 0 1.2em;
	max-width: 16em;
}

.support__heading-line{ white-space: nowrap; }

.support__lead{
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--text-muted);
}

.support__list{
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border-color);
}

.support__item{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-block: clamp(1.6rem, 4.5vw, 2.1rem);
	border-bottom: 1px solid var(--border-color);
}

.support__item.js-reveal{ transition-delay: 0s; }
.support__item.js-reveal:nth-child(2){ transition-delay: 0.1s; }
.support__item.js-reveal:nth-child(3){ transition-delay: 0.2s; }

.support__item-head{
	display: flex;
	align-items: baseline;
	gap: 0.75em;
}

.support__index{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.support__name{
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	color: var(--text);
	line-height: 1.4;
}

.support__price{
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
	line-height: 1.2;
	color: var(--text);
}

.support__unit{
	margin-left: 0.15em;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 0.5em;
	color: var(--text-muted);
}

.support__desc{
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.9;
	color: var(--text-muted);
	max-width: 30rem;
}

.support__note{
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	line-height: 1.8;
	color: var(--text-muted);
	opacity: 0.85;
	max-width: 30rem;
}

@media (min-width: 960px){
	.support__inner{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.75rem);
		align-items: start;
	}
	.support__intro{ grid-column: 1 / 6; max-width: none; margin-bottom: 0; }
	.support__list{ grid-column: 6 / 13; padding-top: clamp(1.5rem, 4vw, 3rem); }
}

/* ============================================================
   FOR YOSAKOI TEAMS
   専用ページへの「入口」。「文字を主役、写真を添える」非対称
   レイアウトにする。GUIDE/AFTER SUPPORTの単純な50:50の2カラムは
   コピーせず、テキスト列（1/8）を写真列（9/13）より広く取る。
   写真はaspect-ratio 3/2・max-width 22remに縮小し、セクションの
   主役ではなく編集レイアウト内の一要素として扱う。object-position
   でステージ設備より人物側を優先表示（元画像は無加工）。モバイルは
   DOM順のまま見出し・本文・リンク→写真の順に縦積みする。カード・
   アイコン・強い背景色は使わない。背景はAFTER SUPPORT（var(--bg-alt)）から
   var(--bg)へ切り替え、境目はGUIDE以降と同じgradientパターンで
   自然に繋ぐ（AFTER SUPPORT側は無変更）。
============================================================ */

.yosakoi{
	position: relative;
	background: var(--bg);
	padding-block: 0 clamp(4.5rem, 10vw, 7.5rem);
}
.yosakoi::before{
	content: "";
	display: block;
	height: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
}

.yosakoi__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	padding-top: clamp(2rem, 5vw, 3rem);
}

.yosakoi__text{ max-width: 30rem; }

.yosakoi__head{ margin-bottom: clamp(1.5rem, 4vw, 2rem); }

.yosakoi__eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}

.yosakoi__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.6;
	margin: 0;
	max-width: 16em;
}

.yosakoi__heading-line{ white-space: nowrap; }

.yosakoi__photo{
	margin: clamp(2rem, 6vw, 3rem) 0 0;
	max-width: 22rem;
	border: 1px solid var(--border-color);
}

.yosakoi__photo img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 80%;
}

.yosakoi__foot{ max-width: none; }

.yosakoi__lead{
	margin: 0 0 1.4em;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--text-muted);
}

.yosakoi__link{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1rem;
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--text);
	padding-bottom: 0.2em;
	transition: color var(--transition-duration) var(--ease-in), border-color var(--transition-duration) var(--ease-in);
}

.yosakoi__link-arrow{ display: inline-block; transition: transform 0.35s var(--ease-in); }

.yosakoi__link:hover,
.yosakoi__link:focus-visible{
	color: var(--accent);
	border-color: var(--accent);
}
.yosakoi__link:hover .yosakoi__link-arrow,
.yosakoi__link:focus-visible .yosakoi__link-arrow{
	transform: translateX(4px);
}

@media (min-width: 960px){
	.yosakoi__inner{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.75rem);
		align-items: start;
	}
	.yosakoi__text{ grid-column: 1 / 8; max-width: none; }
	.yosakoi__photo{
		grid-column: 9 / 13;
		max-width: none;
		margin-top: clamp(0.5rem, 2vw, 1.5rem);
	}
}

/* ============================================================
   CONTACT
   ページ最終のCTA。カード・強い背景色・塗りつぶしボタンは使わず、
   中央寄せの単一カラムで静かに締める。見出しを主役にし、本文は
   控えめに、リンクはGUIDE/FOR YOSAKOI TEAMSと同じ「文字リンク＋
   矢印＋細い下線」パターンを踏襲（新しい装飾は増やさない）。
   背景はFOR YOSAKOI TEAMS（var(--bg)）からvar(--bg-alt)へ切り替え、
   境目は既存と同じgradientパターンで自然に繋ぐ（YOSAKOI側は無変更）。
   下方向の余白を広めに取り、この先のFooterへ自然に繋がるようにする。
============================================================ */

.contact{
	position: relative;
	background: var(--bg-alt);
	padding-block: 0 clamp(5rem, 11vw, 8rem);
}
.contact::before{
	content: "";
	display: block;
	height: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(to bottom, var(--bg), var(--bg-alt));
}

.contact__inner{
	max-width: var(--width-wide);
	margin: 0 auto;
	padding-inline: var(--edge);
	padding-top: clamp(2rem, 5vw, 3rem);
	text-align: center;
}

.contact__eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1.25rem;
}

.contact__heading{
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem);
	line-height: 1.5;
	margin: 0 auto;
	max-width: 18em;
}

.contact__heading-line{ white-space: nowrap; }

.contact__lead{
	margin: clamp(1.5rem, 4vw, 2rem) auto 0;
	max-width: 30rem;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--text-muted);
}

.contact__link{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: clamp(2rem, 5vw, 3rem);
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--text);
	padding-bottom: 0.25em;
	transition: color var(--transition-duration) var(--ease-in), border-color var(--transition-duration) var(--ease-in);
}

.contact__link-arrow{ display: inline-block; transition: transform 0.35s var(--ease-in); }

.contact__link:hover,
.contact__link:focus-visible{
	color: var(--accent);
	border-color: var(--accent);
}
.contact__link:hover .contact__link-arrow,
.contact__link:focus-visible .contact__link-arrow{
	transform: translateX(4px);
}

/* ============================================================
   Lightbox（チラシ拡大）
   <dialog>はbody直下に置く（.page-hpproduction-mainの外）ため、
   スコープに依存しない独立したルールにしている。
============================================================ */

.lightbox{
	border: 0;
	padding: 0;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	background: transparent;
	margin: 0;
}

.lightbox::backdrop{
	background: color-mix(in srgb, var(--text) 82%, transparent);
}

.lightbox[open]{
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox__viewport{
	max-width: min(92vw, 60rem);
	max-height: 90vh;
	overflow: auto;
	touch-action: pinch-zoom;
	-webkit-overflow-scrolling: touch;
}

.lightbox__image{
	display: block;
	width: 100%;
	height: auto;
	background: var(--bg);
}

.lightbox__close{
	position: fixed;
	top: clamp(1rem, 3vw, 1.75rem);
	right: clamp(1rem, 3vw, 1.75rem);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: #222;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	padding: 0.5em 0.9em;
	transition: opacity var(--transition-duration) var(--ease-in);
}
.lightbox__close:hover, .lightbox__close:focus-visible{ opacity: 0.7; }

/* ============================================================
   prefers-reduced-motion
   .js-reveal自体のreduced-motion対応は共通のassets/css/motion.cssで
   既に行われているため、ここではそれ以外（Heroの独自animation、
   Introduction背景のゆらぎ、チラシのclip-path reveal、SERVICE/
   SAMPLE SITESのhover transition）だけを対象にする。
============================================================ */

@media (prefers-reduced-motion: reduce){
	.hero__eyebrow, .hero__heading, .hero__text,
	.hero__photo-frame, .hero__photo-frame::before{
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	/* ゆらぎ・漂い・反復animationを停止。背景文字を全部消すのではなく、
	   1〜2個だけを低opacityの静止テキストとして残し、デザインとして
	   成立させる（前景は常にopacity 1で最初から明確に表示）。 */
	.intro__murmur{ animation: none !important; filter: none !important; transform: none !important; }
	.intro__murmur--2, .intro__murmur--3, .intro__murmur--4{ display: none !important; }
	.intro__murmur--1, .intro__murmur--5{ opacity: 0.22 !important; }

	.guide__flyer-trigger,
	.guide__flyer-trigger:hover,
	.guide__flyer-trigger:focus-visible{
		transform: none !important;
		transition: none !important;
	}
	.guide__flyer-trigger img{
		clip-path: none !important;
		transition: none !important;
	}

	.service__index,
	.service__name,
	.service__rule{
		transition: none !important;
	}

	.samples__hint{
		transition: none !important;
	}
}