/* ============================================================
   theme-yoshihara / main.css
   設計原則: タイポ主役 / モノトーン＋差し色1色 / 余白を贅沢に
            / 物語順 / 控えめなスクロール演出
   配色確定 2026-05-18
   ============================================================ */

:root {
	--c-bg:        #FFFFFF;   /* ベース背景 */
	--c-text:      #3C413B;   /* 基調テキスト（ロゴタイプ墨色） */
	--c-accent:    #3D5A40;   /* 差し色：ディープフォレスト */
	--c-accent-h:  #5E8A57;   /* ホバー/補助：セージ */
	--c-surface:   #F5F7F4;   /* ライト面 */
	--c-line:      #E2E6E0;   /* 罫・境界 */

	--maxw: 1120px;
	--maxw-narrow: 760px;
	--gut: clamp(20px, 5vw, 48px);
	--sec-y: clamp(88px, 16vw, 208px);   /* 余白重視：セクション間を一段ゆったり */

	/* 文字間（Figma準拠の2値システム）：和文＝0.05em／ラテン＝0。
	   役割別変数は和文テキスト想定なので全て和文値に集約。ラテン要素は --ls-latin を使う。 */
	--ls-jp:      .05em;
	--ls-latin:   0;
	--ls-display: var(--ls-jp);   /* HERO等の特大表示（和文） */
	--ls-head:    var(--ls-jp);   /* 見出し h1–h3（和文サブ見出し） */
	--ls-lead:    var(--ls-jp);   /* リード・ステートメント（和文） */
	--ls-body:    var(--ls-jp);   /* 本文（和文） */

	/* Figma準拠フォント：和文＝Zen Kaku Gothic New（本文400/見出し500）。 */
	--ff: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
	/* ラテン/タイトル＝Jost（原則大文字・字間0）。Futura等は補助フォールバック。
	   日本語字はグリフフォールバックで自動的に --ff（Zen Kaku）へ。 */
	--ff-title: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--ff);
	color: var(--c-text);
	background: var(--c-bg);
	font-weight: 400;            /* Figma準拠：本文＝Zen Kaku Gothic New Regular(400) */
	line-height: 1.9;            /* Figma準拠：和文本文 ≒ 1.9 */
	letter-spacing: var(--ls-body);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-accent); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--c-accent-h); }

/* Figma準拠：和文見出し＝Zen Kaku Gothic New Medium(500)、行間≒1.5、字間.05em。ボールド無し */
h1, h2, h3 { line-height: 1.5; font-weight: 500; letter-spacing: var(--ls-head); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.container.narrow { max-width: var(--maxw-narrow); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--c-accent); color: #fff; padding: 8px 14px; z-index: 999; }

/* --- ボタン --- */
.btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 2px;
	font-size: .92rem;
	letter-spacing: .06em;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: var(--c-accent-h); color: #fff; }
.btn--ghost { border: 1px solid var(--c-text); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

.link-arrow { font-size: .95rem; letter-spacing: .04em; }
.link-arrow::after { content: " →"; }

/* --- ヘッダー（参考Figma翻案 2026-05-18 改訂2：全幅・固定・HERO映像にオーバーレイ）
   既定=固定ソリッド（下層ページ＆スクロール後）。home の最上部のみ透明で映像に重ねる。 --- */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	background: rgba(255,255,255,.96);
	border-bottom: 1px solid var(--c-line);
	transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,.05); }
/* 全幅活用：ヘッダー内はコンテナ幅で絞らず、画面端まで＋左右パディング */
.site-header .container { max-width: none; padding-inline: clamp(20px, 4vw, 60px); }

/* home 最上部（未スクロール）＝背景なし・映像の上に白文字でオーバーレイ */
body.home .site-header { background: transparent; border-color: transparent; }
body.home .site-header .global-nav__list a,
body.home .site-header .site-header__logo-text,
body.home .site-header .lang-switch__item { color: #fff; }
body.home .site-header .lang-switch__item.is-current { color: #fff; opacity: 1; }
body.home .site-header .custom-logo { filter: brightness(0) invert(1); }
body.home .site-header .nav-toggle span { background: #fff; }
/* home でも下へスクロールしたら白背景にフェード（可読性確保） */
body.home .site-header.is-scrolled { background: rgba(255,255,255,.96); border-color: var(--c-line); }
body.home .site-header.is-scrolled .global-nav__list a,
body.home .site-header.is-scrolled .site-header__logo-text { color: var(--c-text); }
body.home .site-header.is-scrolled .lang-switch__item { color: var(--c-text); opacity: .55; }
body.home .site-header.is-scrolled .lang-switch__item.is-current { color: var(--c-accent); opacity: 1; }
body.home .site-header.is-scrolled .custom-logo { filter: none; }
body.home .site-header.is-scrolled .nav-toggle span { background: var(--c-text); }

/* 固定ヘッダー分のオフセット：下層ページは先頭が隠れないよう確保（home はHERO全面に重ねるため不要） */
body:not(.home) .site-main { padding-top: 76px; }

/* LP内アンカー（#about 等）へのスムーススクロール＋固定ヘッダー分の着地オフセット */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lp-section[id] { scroll-margin-top: 84px; }

/* --- About 編集レイアウト（参考 axis-ov-films / Figma選択を翻案 2026-05-18）
   写真・映像を非対称に散らし、横／下に説明テキストを置く余白主体の構成。 --- */
.about-ed__grid {
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: clamp(24px, 4vw, 56px) clamp(16px, 2vw, 28px);
	align-items: start; margin-top: clamp(24px, 4vw, 48px);
}
.about-ed__media { margin: 0; }
/* About 写真：各写真を上下左右からフェードイン＋スライドで登場（reveal と連動）2026-05-23 */
.about-ed { overflow: hidden; }
.about-ed__media.reveal { transition: opacity .8s ease, transform .85s cubic-bezier(.22,.61,.36,1); }
.about-ed__media--lg.reveal { transform: translateX(-44px); }   /* 左から */
.about-ed__media--sm.reveal { transform: translateY(52px); }    /* 下から */
.about-ed__media--3.reveal  { transform: translateX(44px); }    /* 右から */
.about-ed__media--4.reveal  { transform: translateY(-52px); }   /* 上から */
.about-ed__media--lg.reveal.is-in,
.about-ed__media--sm.reveal.is-in,
.about-ed__media--3.reveal.is-in,
.about-ed__media--4.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.about-ed__media--lg.reveal, .about-ed__media--sm.reveal,
	.about-ed__media--3.reveal, .about-ed__media--4.reveal { transform: none; transition: none; }
}
.about-ed__media--lg { grid-column: 6 / 13; }
.about-ed__lead { grid-column: 1 / 6; align-self: end; padding-bottom: clamp(16px, 4vw, 56px); }
/* 下段は写真3枚（縦長）を非対称に散らす編集レイアウト。 */
.about-ed__media--sm { grid-column: 1 / 5; margin-top: clamp(24px, 6vw, 72px); }
.about-ed__media--3 { grid-column: 5 / 9; margin-top: clamp(8px, 2vw, 24px); }
.about-ed__media--4 { grid-column: 9 / 13; margin-top: clamp(28px, 7vw, 88px); }
.about-ed__ph {
	display: block; width: 100%; border-radius: 3px;
	background:
		radial-gradient(120% 90% at 74% 10%, rgba(94,138,87,.30), transparent 58%),
		linear-gradient(158deg, #2B3A2C 0%, #3C413B 56%, #1F221E 100%);
}
.about-ed__media--lg .about-ed__ph { aspect-ratio: 16 / 10; }
.about-ed__media--sm .about-ed__ph,
.about-ed__media--3 .about-ed__ph,
.about-ed__media--4 .about-ed__ph { aspect-ratio: 4 / 5; }
.about-ed__media img { display: block; width: 100%; border-radius: 3px; object-fit: cover; }
.about-ed__media--lg img { aspect-ratio: 16 / 10; }
.about-ed__media--sm img,
.about-ed__media--3 img,
.about-ed__media--4 img { aspect-ratio: 4 / 5; }
.about-ed__cap {
	margin-top: 12px; font-size: .76rem; letter-spacing: .08em;
	color: var(--c-accent); opacity: .85;
}
.about-ed__statement {
	margin: 0; font-weight: 500;
	font-size: clamp(1.2rem, 2.7vw, 1.8rem); line-height: 2.05; letter-spacing: .04em;
}
@media (max-width: 820px) {
	.about-ed__grid { grid-template-columns: 1fr; gap: clamp(20px, 6vw, 36px); }
	.about-ed__media--lg, .about-ed__lead, .about-ed__media--sm,
	.about-ed__media--3, .about-ed__media--4 {
		grid-column: 1 / -1; margin-top: 0; padding-bottom: 0;
	}
	.about-ed__media--sm, .about-ed__media--3, .about-ed__media--4 { max-width: 72%; }
	/* 縦積みでも左右に振ってリズムを出す */
	.about-ed__media--3 { margin-left: auto; }
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.site-header__brand { display: flex; align-items: center; }   /* ロゴは左端（flex先頭） */
.site-header__logo-text { font-weight: 500; color: var(--c-text); letter-spacing: .04em; }
.custom-logo { max-height: 64px; width: auto; }   /* ロゴを2段階拡大（44→64px） */

.global-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.global-nav__list { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.global-nav__list a {
	position: relative; color: var(--c-text); font-family: var(--ff-title);
	font-size: .85rem; font-weight: 400; letter-spacing: var(--ls-latin); text-transform: uppercase;
}
.global-nav__list a:hover { color: var(--c-accent); }
/* 各項目の極小アクティブドット（既定は非表示／hover・現在地で表示） */
.global-nav__list a::after {
	content: ""; position: absolute; left: 50%; bottom: -10px;
	width: 3px; height: 3px; border-radius: 50%;
	background: var(--c-accent); transform: translateX(-50%);
	opacity: 0; transition: opacity .2s ease;
}
.global-nav__list a:hover::after,
.global-nav__list .current-menu-item > a::after,
.global-nav__list a[aria-current]::after { opacity: 1; }
/* CONTACT はピル型（参考の角丸ボタンを翻案・色はブランドaccent） */
.global-nav__contact { border-radius: 999px; padding: 11px 24px; }
.global-nav__contact::after { content: none; }

.lang-switch { display: flex; gap: 8px; font-size: .82rem; }
.lang-switch__item { color: var(--c-text); opacity: .55; }
.lang-switch__item.is-current { opacity: 1; font-weight: 500; color: var(--c-accent); }

.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; background: var(--c-text); transition: .25s; }

/* --- HERO（折衷：全幅ビジュアル＋強いタイポ 2026-05-18改訂） --- */
.hero {
	padding: clamp(110px, 22vw, 240px) 0 clamp(90px, 16vw, 170px);
	background: var(--c-bg);
}
.hero__copy {
	font-size: clamp(2.1rem, 7vw, 5rem);
	margin: 0 0 .6em;
	letter-spacing: var(--ls-display);
}
.hero__sub { max-width: 46em; color: var(--c-text); opacity: .8; margin: 0; }
.hero__scroll {
	display: inline-block; margin-top: clamp(40px, 8vw, 90px);
	font-family: var(--ff-title); font-size: .72rem; letter-spacing: var(--ls-latin); opacity: .5;
}

/* --- HERO スクロール誘導（参考 Figma選択 / lifense.jp）：中央下部・下へ流れる縦線 --- */
.hero__scrolldown {
	position: absolute; left: 50%; bottom: 0;   /* セクション下端に接する（参考 lifense.jp 同様） */
	transform: translateX(-50%); z-index: 3;
	display: flex; flex-direction: column; align-items: center;
	pointer-events: none; color: #fff;
}
.hero__scrolldown-label {
	font-family: var(--ff-title); font-size: .66rem; letter-spacing: .12em;
	text-transform: uppercase; opacity: .85;
}
.hero__scrolldown-line {
	position: relative; overflow: hidden;
	width: 1px; height: clamp(48px, 7vw, 72px);
	margin-top: 14px; background: rgba(255,255,255,.2);
}
.hero__scrolldown-line::after {
	content: ""; position: absolute; left: 0; top: 0;
	width: 1px; height: 100%; background: #fff;
	animation: hero-scrolldown 2.2s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes hero-scrolldown {
	0%   { transform: translateY(-100%); }
	55%  { transform: translateY(100%); }
	100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__scrolldown-line::after { animation: none; transform: none; opacity: .6; }
}

/* 全幅ビジュアル版 HERO */
.hero--visual {
	position: relative;
	min-height: 100vh;          /* ファーストビューで画面いっぱい */
	min-height: 100svh;         /* モバイルのアドレスバー考慮（対応ブラウザ優先） */
	display: flex;
	align-items: flex-end;
	padding: 0 0 clamp(56px, 10vw, 110px);
	background: var(--c-text);
	overflow: hidden;
}
.hero__media {
	position: absolute; inset: 0;
	/* 〔要素材〕実映像/写真メインビジュアルに差し替え。仮：ブランド配色のシネマティック面 */
	background:
		radial-gradient(120% 90% at 78% 8%, rgba(94,138,87,.34), transparent 58%),
		linear-gradient(158deg, #2B3A2C 0%, #3C413B 56%, #1F221E 100%);
}
.hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
/* 低速・データ節約・モーション抑制時は動画を出さず仮/ポスター面を見せる */
@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
}
.hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.40) 100%);
}
.hero__inner { position: relative; z-index: 2; color: #fff; }
.hero--visual .hero__copy {
	font-size: clamp(2.3rem, 7.4vw, 5.2rem);
	margin: 0 0 .55em; letter-spacing: var(--ls-display); color: #fff;
}
.hero--visual .hero__copy::after {
	content: ""; display: block; width: 64px; height: 3px;
	background: var(--c-accent-h); margin-top: .5em;
}
.hero--visual .hero__sub { max-width: 44em; color: #fff; opacity: .9; margin: 0; }
.hero--visual .hero__scroll { opacity: .7; color: #fff; margin-top: clamp(28px, 6vw, 56px); }

/* --- セクション共通 --- */
.section { padding-block: var(--sec-y); }
.section--value, .section--cta { background: var(--c-surface); }
.section__title {
	font-family: var(--ff-title);   /* Jost */
	font-weight: 400;               /* Figma準拠：ラテン見出し＝Jost Regular。ボールド無し */
	text-transform: uppercase;      /* ラテンは原則大文字（和文字には影響なし） */
	font-size: clamp(1.4rem, 3.4vw, 2.1rem);
	margin: 0 0 clamp(28px, 5vw, 56px);
	letter-spacing: var(--ls-latin);  /* Figma準拠：ラテン字間 0 */
}
.section__title::after {
	content: ""; display: block; width: 40px; height: 2px;
	background: var(--c-accent); margin-top: 18px;
}
.section__more { margin-top: clamp(28px, 5vw, 52px); }
.lead { font-size: clamp(1.1rem, 2.6vw, 1.6rem); line-height: 1.95; letter-spacing: var(--ls-lead); margin: 0; max-width: 30em; }
.placeholder { color: var(--c-text); opacity: .55; }
.note { color: var(--c-accent-h); font-size: .85em; }

/* --- REELS（自社SNS・参考取材カード横スクロールを翻案 2026-05-18） --- */
.section--reels { background: var(--c-bg); overflow: hidden; }
.reels-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 5vw, 56px); }
.reels-head__lead { opacity: .82; }
.reels-head__lead p { margin: 0; }
.reels-head__catch { font-weight: 500; margin: 0 0 .4em; color: var(--c-accent); letter-spacing: .06em; }
.reels-head__cta { margin: clamp(18px, 3vw, 26px) 0 0 !important; }
/* 総フォロワー数バッジ（「茨城県をゆく」の実績訴求）2026-05-23 */
.reels-followers { margin: clamp(10px, 2vw, 16px) 0 0; }
.reels-followers__num {
	display: inline-block; font-family: var(--ff-title);
	font-size: clamp(.92rem, 1.4vw, 1.08rem); letter-spacing: .06em; line-height: 1;
	color: var(--c-accent); padding: 8px 14px;
	border: 1px solid var(--c-accent); border-radius: 999px;
}
@media (min-width: 860px) {
	.reels-head { grid-template-columns: auto 1fr; align-items: end; gap: 48px; }
	.reels-head .section__title { margin-bottom: 0; }
}
/* 左へ無限に流れるマーキー（参考サイト手法を翻案）。常時流れ続ける（ホバー/フォーカスで止めない）。
   動画はホバー時にJS（main.js）でミュート再生。reduced-motion では複製を出さず手動スクロールに退避。 */
.reels-marquee { overflow: hidden; }
.reels-track {
	display: flex; width: max-content;
	padding-block: 4px clamp(22px, 4vw, 38px);
	animation: reels-scroll var(--reels-dur, 46s) linear infinite;
	will-change: transform;
}
.reels-dup { display: contents; }
/* ホバー/フォーカスでも一時停止しない＝ギャラリーは常時流れ続ける。
   （以前の animation-play-state: paused は廃止。ホバー動画再生はJSで継続）2026-05-23 */
@keyframes reels-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.reel-card {
	flex: 0 0 auto; width: clamp(190px, 21vw, 248px);
	margin-right: clamp(14px, 2vw, 24px);
	color: var(--c-text);
}
.reel-card__media {
	display: block; position: relative; width: 100%;
	aspect-ratio: 9 / 16; overflow: hidden; border-radius: 3px; background: var(--c-text);
}
.reel-card__ph {
	position: absolute; inset: 0;
	background:
		radial-gradient(120% 80% at 70% 12%, rgba(94,138,87,.40), transparent 58%),
		linear-gradient(160deg, #2B3A2C 0%, #3C413B 58%, #1F221E 100%);
}
.reel-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-card__badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	font-family: var(--ff-title); font-size: .64rem; letter-spacing: var(--ls-latin); color: #fff;
	background: rgba(0,0,0,.42); padding: 4px 9px; border-radius: 2px;
}
.reel-card__media::after {
	content: "▶"; position: absolute; inset: 0; margin: auto;
	width: 1.4em; height: 1.4em; display: grid; place-items: center;
	color: #fff; font-size: 1.3rem; opacity: .82;
	transition: opacity .3s ease, transform .3s ease;
}
.reel-card.is-playing .reel-card__media::after { opacity: 0; transform: scale(.6); }
.reel-card__cap { display: block; margin-top: 14px; }
.reel-card__city { display: inline-block; font-size: .78rem; color: var(--c-accent); letter-spacing: .08em; margin-bottom: 4px; }
.reel-card__text { display: block; font-size: .9rem; opacity: .72; line-height: 1.7; }
.reel-card:hover .reel-card__city { color: var(--c-accent-h); }
.reels-cta { text-align: center; margin: clamp(8px, 2vw, 20px) 0 0; }
.reels-cta__link {
	display: inline-block; padding: 14px 8px;
	border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
	font-size: .95rem; letter-spacing: .04em; color: var(--c-text);
}
.reels-cta__link::after { content: " →"; color: var(--c-accent); }
.reels-cta__link:hover { color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
	.reels-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.reels-track { animation: none; }
	.reels-dup { display: none; }   /* 静止時は複製を出さず1セットだけ手動スクロール */
	.reel-card__media::after { display: none; }
}

/* --- カスタムカーソル（参考 forestdali.co.jp 翻案 2026-05-18 改訂）
   マウスを追尾するリング。クリック可能要素上で拡大。
   ネイティブカーソルは隠さず併存（リング＝装飾レイヤー、実カーソルはそのまま）。
   タッチ/粗ポインタ/reduced-motion では無効（リング非表示・通常カーソルのみ）。 --- */
.cursor-ring {
	position: fixed; top: 0; left: 0; z-index: 9999;
	width: 34px; height: 34px; margin: -17px 0 0 -17px;
	border: 1px solid var(--c-accent); border-radius: 50%;
	pointer-events: none; opacity: 0;
	transition: opacity .25s ease, width .22s ease, height .22s ease,
	            margin .22s ease, background-color .22s ease, border-color .22s ease;
	will-change: transform;
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hover {
	width: 62px; height: 62px; margin: -31px 0 0 -31px;
	background: rgba(61,90,64,.12); border-color: var(--c-accent-h);
}
.cursor-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
/* 濃色エリア（フッター/HERO/リール面）上では白に切替＝同系色で埋もれない */
.cursor-ring.on-dark { border-color: #fff; }
.cursor-ring.on-dark.is-hover { background: rgba(255,255,255,.16); border-color: #fff; }
/* ネイティブカーソルは隠さない（cursor:none 指定を撤去）＝実カーソルとリングが併存 */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	.cursor-ring { display: none; }
}

/* --- SERVICE（TOP） --- */
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--c-line); border-block: 1px solid var(--c-line); }
.service-list__item {
	position: relative; overflow: hidden;
	background: var(--c-bg); padding: clamp(24px, 4vw, 40px);
	transition: color .35s ease;
}
.service-list__bg {
	position: absolute; inset: 0; z-index: 0;
	opacity: 0; transform: scale(1.03);
	transition: opacity .45s ease, transform .7s ease;
	/* 〔要素材〕未指定時のブランドのシネマ面。実メディア到着で img/video に差替 */
	background:
		radial-gradient(120% 90% at 76% 12%, rgba(94,138,87,.30), transparent 58%),
		linear-gradient(158deg, #2B3A2C 0%, #3C413B 56%, #1F221E 100%);
}
.service-list__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15,18,15,.55), rgba(15,18,15,.78));
}
.service-list__bg .service-row__img,
.service-list__bg .service-row__video,
.service-list__bg img, .service-list__bg video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.service-list__item:hover .service-list__bg,
.service-list__item:focus-within .service-list__bg { opacity: 1; transform: scale(1); }
.service-list__item h3 { position: relative; z-index: 1; margin: 0 0 .4em; font-size: 1.15rem; }
.service-list__item p { position: relative; z-index: 1; margin: 0; opacity: .75; transition: opacity .35s ease; }
.service-list__item:hover, .service-list__item:focus-within { color: #fff; }
.service-list__item:hover p, .service-list__item:focus-within p { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
	.service-list__bg { transition: opacity .15s ease; transform: none; }
	.service-list__item:hover .service-list__bg, .service-list__item:focus-within .service-list__bg { transform: none; }
}
@media (min-width: 760px) { .service-list { grid-template-columns: repeat(5, 1fr); } }

/* --- SERVICE 詳細（各領域：ホバーで関連実績メディアを背景に 2026-05-18） --- */
.service-row {
	position: relative; overflow: hidden;
	display: flex; gap: clamp(16px, 4vw, 48px);
	padding: clamp(36px, 6vw, 64px) clamp(18px, 3vw, 44px);
	border-bottom: 1px solid var(--c-line);
	transition: color .35s ease;
}
.service-row__bg {
	position: absolute; inset: 0; z-index: 0;
	opacity: 0; transform: scale(1.02);
	transition: opacity .45s ease, transform .7s ease;
	/* 〔要素材〕未指定時のブランドのシネマ面。実メディア到着で img/video に差替 */
	background:
		radial-gradient(120% 90% at 78% 12%, rgba(94,138,87,.30), transparent 58%),
		linear-gradient(158deg, #2B3A2C 0%, #3C413B 56%, #1F221E 100%);
}
.service-row__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(15,18,15,.80), rgba(15,18,15,.48));
}
.service-row__img, .service-row__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.service-row:hover .service-row__bg,
.service-row:focus-within .service-row__bg { opacity: 1; transform: scale(1); }
.service-row__no {
	position: relative; z-index: 1;
	font-size: clamp(1.6rem, 5vw, 3rem); color: var(--c-accent);
	opacity: .35; font-weight: 500;
	transition: color .35s ease, opacity .35s ease;
}
.service-row__body { position: relative; z-index: 1; }
.service-row__body h2 { margin: 0 0 .5em; }
.service-row__issue { font-size: 1.15rem; margin: 0 0 .6em; }
.service-row__desc { opacity: .75; margin: 0 0 1em; transition: opacity .35s ease; }
.service-row:hover, .service-row:focus-within { color: #fff; }
.service-row:hover .service-row__no,
.service-row:focus-within .service-row__no { color: #fff; opacity: .9; }
.service-row:hover .service-row__desc,
.service-row:focus-within .service-row__desc { opacity: .92; }
.service-row:hover .link-arrow,
.service-row:focus-within .link-arrow { color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.service-row__bg { transition: opacity .15s ease; transform: none; }
	.service-row:hover .service-row__bg, .service-row:focus-within .service-row__bg { transform: none; }
}

/* --- WORKS --- */
.works-grid { display: grid; gap: clamp(16px, 3vw, 32px); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.works-grid__item { color: var(--c-text); display: block; }
.works-grid__item img, .works-grid__noimg { aspect-ratio: 4/3; width: 100%; object-fit: cover; background: var(--c-surface); }
.works-grid__cat { display: inline-block; margin-top: 14px; font-size: .78rem; color: var(--c-accent); letter-spacing: .08em; }
.works-grid__title { display: block; margin-top: 4px; font-weight: 500; }
.works-grid__item:hover img { opacity: .85; }

.works-filter { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: clamp(28px, 5vw, 52px); }
.works-filter__item { color: var(--c-text); opacity: .6; font-size: .9rem; }
.works-filter__item.is-current, .works-filter__item:hover { opacity: 1; color: var(--c-accent); }

/* --- WORKS ギャラリー（TOP・参考PHOTO GALLERY翻案 2026-05-18） --- */
.works-lead { font-size: clamp(1.05rem, 2.4vw, 1.4rem); opacity: .8; margin: 0 0 clamp(28px, 5vw, 52px); }
.works-gallery { display: grid; gap: clamp(12px, 2.4vw, 26px); grid-template-columns: repeat(2, 1fr); }
.works-gallery__item { position: relative; display: block; color: var(--c-text); overflow: hidden; }
.works-gallery__item .wg-media,
.works-gallery__noimg {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	background: var(--c-surface); display: block;
	transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.works-gallery__item:hover .wg-media { transform: scale(1.045); }
.works-gallery__item--feature { grid-column: 1 / -1; }
.works-gallery__item--feature .wg-media,
.works-gallery__item--feature .works-gallery__noimg { aspect-ratio: 21 / 9; }
.works-gallery__cap { display: flex; gap: 14px; align-items: baseline; margin-top: 14px; }
.works-gallery__cat { font-size: .76rem; color: var(--c-accent); letter-spacing: .08em; white-space: nowrap; }
.works-gallery__title { font-weight: 500; }
@media (max-width: 760px) {
	.works-gallery { grid-template-columns: 1fr; }
	.works-gallery__item--feature .wg-media,
	.works-gallery__item--feature .works-gallery__noimg { aspect-ratio: 16 / 9; }
}

/* --- GROUP（アドアーチグループ：本部概要流用＋拠点マップ模式図 2026-05-18） --- */
.group__catch { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 500; letter-spacing: .04em; margin: 0 0 clamp(28px, 5vw, 52px); }
.group__catch span { display: block; font-family: var(--ff-title); font-size: .62em; color: var(--c-accent); letter-spacing: var(--ls-latin); margin-top: .5em; font-weight: 400; }
.group__grid { display: grid; gap: clamp(28px, 5vw, 56px); }
.group__body p { margin: 0 0 1.3em; }
.group__svc { list-style: none; padding: 0; margin: 0 0 1.8em; display: grid; gap: 11px; }
.group__svc li { position: relative; padding-left: 1.3em; font-size: .95rem; opacity: .82; }
.group__svc li::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.group__links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.group__map { margin: 0; }
.group__map-cap { margin: 14px 0 0; text-align: center; }
@media (min-width: 880px) {
	.group__grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
}
/* 拠点マップ＝背景画像なし。拠点ピンの配置だけで日本列島の位置関係を表す模式図
   （北海道＝右上 → 九州・沖縄＝左下）。台紙は薄いドットグリッドのみ。
   ピン座標は実測の都道府県位置なので、点の散らばりがそのまま日本の形になる。 */
.locmap {
	position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 3;
	margin-inline: auto; border: 1px solid var(--c-line); border-radius: 6px;
	background-color: var(--c-surface);
	background-image: radial-gradient(rgba(60,65,59,.06) 1.5px, transparent 1.5px);
	background-size: 24px 24px;
	overflow: hidden;
}
/* 統計ラベルは地図が空いている左上に置く（右上は北海道のドットと重なるため）。 */
.locmap__stat { position: absolute; top: 14px; left: 18px; text-align: left; line-height: 1.05; }
.locmap__stat strong { display: block; font-size: clamp(2rem, 5vw, 3.2rem); color: var(--c-accent); }
.locmap__stat span { font-family: var(--ff-title); font-size: .68rem; letter-spacing: var(--ls-latin); opacity: .6; }
.locmap__pin {
	position: absolute; width: 10px; height: 10px; border-radius: 50%;
	background: var(--c-accent-h); transform: translate(-50%, -50%);
	z-index: 1; transition: transform .2s ease, background-color .2s ease;
}
.locmap__pin:hover, .locmap__pin:focus-visible {
	z-index: 5; outline: none;
	transform: translate(-50%, -50%) scale(1.5); background: var(--c-accent);
}
@keyframes loc-pulse {
	0% { transform: scale(.5); opacity: .55; }
	70% { opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
/* 茨城＝本拠のみパルスで強調。他拠点は静的ピン＋ラベル */
.locmap__pin--home { width: 16px; height: 16px; background: var(--c-accent); z-index: 3; }
.locmap__pin--home::after {
	content: ""; position: absolute; inset: -7px; border-radius: 50%;
	border: 1px solid var(--c-accent); opacity: .5;
	animation: loc-pulse 2.8s ease-out infinite;
}
/* 通常ラベルは既定で非表示→ホバー/フォーカスで表示（22拠点の重なり回避）。
   本拠（茨城）のみ常時表示＋強調。全県はキャプションにもテキスト掲載。 */
.locmap__label {
	position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
	white-space: nowrap; font-size: .62rem; letter-spacing: .04em; color: var(--c-text);
	background: var(--c-bg); padding: 1px 6px; border: 1px solid var(--c-line); border-radius: 3px;
	opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 6;
}
.locmap__pin:hover .locmap__label,
.locmap__pin:focus-visible .locmap__label { opacity: 1; }
.locmap__pin--home .locmap__label {
	font-size: .68rem; font-weight: 500; opacity: 1;
	color: #fff; background: var(--c-accent); border-color: var(--c-accent);
}
.locmap__todo {
	position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
	width: max-content; max-width: 88%; text-align: center;
	font-size: .72rem; line-height: 1.7; color: var(--c-text); opacity: .6;
}
@media (prefers-reduced-motion: reduce) { .locmap__pin--home::after { animation: none; } }

/* --- アドアーチ制作実績 流れるギャラリー（左へ無限・ホバーでも停止しない 2026-05-19）
   keyframes は REELS の reels-scroll を共有。:hover の一時停止は付けない。 --- */
.group__works-h {
	font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: .1em;
	margin: clamp(44px, 7vw, 76px) 0 clamp(16px, 3vw, 26px);
}
.group__works-h span {
	display: block; font-size: .62em; color: var(--c-accent);
	letter-spacing: .2em; margin-top: .5em; font-weight: 400;
}
.wmq { overflow: hidden; }
.wmq__track {
	display: flex; width: max-content;
	padding-block: 4px clamp(20px, 3vw, 32px);
	animation: reels-scroll var(--wmq-dur, 52s) linear infinite;
	will-change: transform;
}
.wcard {
	flex: 0 0 auto; width: clamp(240px, 26vw, 340px);
	margin-right: clamp(14px, 2vw, 26px); color: var(--c-text);
}
.wcard__media {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
	overflow: hidden; border-radius: 3px; background: var(--c-text);
}
.wcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.wcard:hover .wcard__img { transform: scale(1.04); }
.wcard__ph {
	position: absolute; inset: 0;
	background:
		radial-gradient(120% 90% at 74% 12%, rgba(94,138,87,.30), transparent 58%),
		linear-gradient(158deg, #2B3A2C 0%, #3C413B 56%, #1F221E 100%);
}
.wcard__cat {
	position: absolute; left: 10px; top: 10px; z-index: 1;
	font-size: .62rem; letter-spacing: .14em; color: #fff;
	background: rgba(0,0,0,.42); padding: 3px 8px; border-radius: 2px;
}
.wcard__view {
	position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
	font-size: .72rem; letter-spacing: .18em; color: #fff;
	opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.wcard:hover .wcard__view, .wcard:focus-visible .wcard__view { opacity: .95; transform: none; }
.wcard__title { display: block; margin-top: 12px; font-size: .92rem; line-height: 1.65; }
.wcard:hover .wcard__title { color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
	.wmq { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.wmq__track { animation: none; }
	.wmq .reels-dup { display: none; }
}

/* --- MEMBER（メンバー紹介 2026-05-19） --- */
/* メンバー数（1〜4）に応じて中央寄せで折り返す。 */
.member {
	list-style: none; margin: clamp(28px, 5vw, 56px) auto 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: clamp(28px, 5vw, 56px); max-width: 1040px;
}
.member__item { flex: 0 1 220px; text-align: center; }
@media (max-width: 480px) { .member__item { flex-basis: 60%; } }
.member__photo { margin: 0; }
.member__photo img, .member__ph {
	display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px;
}
.member__ph {
	background:
		radial-gradient(120% 90% at 72% 12%, rgba(94,138,87,.28), transparent 58%),
		linear-gradient(158deg, #2B3A2C 0%, #3C413B 56%, #1F221E 100%);
}
.member__role {
	margin: clamp(16px, 2.6vw, 24px) 0 .3em; font-size: .76rem;
	letter-spacing: var(--ls-head); color: var(--c-accent);
}
.member__name {
	margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	font-weight: 500; letter-spacing: var(--ls-lead);
}
.member__roman {
	margin: .5em 0 0; font-family: var(--ff-title);
	font-size: .74rem; letter-spacing: var(--ls-latin);
	text-transform: uppercase; color: var(--c-text); opacity: .55;
}

/* --- 強み数値（旧・未使用：将来サブページ用に温存） --- */
.stats { list-style: none; display: grid; gap: 24px; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.stats strong { display: block; font-size: clamp(2rem, 6vw, 3.4rem); color: var(--c-accent); }
.stats span { font-size: .85rem; opacity: .7; }

/* --- About 3本柱 --- */
.pillars { list-style: none; counter-reset: none; padding: 0; margin: 0; display: grid; gap: clamp(28px, 5vw, 56px); }
.pillars__no { font-size: 1.6rem; color: var(--c-accent); opacity: .4; font-weight: 500; }
.pillars h3 { margin: .3em 0; }
.pillars p { margin: 0; opacity: .78; }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

/* --- メッセージ / blockquote --- */
.message { border-left: 3px solid var(--c-accent); margin: 0; padding: 8px 0 8px 28px; }
.message cite { display: block; margin-top: 16px; font-style: normal; opacity: .65; font-size: .9rem; }

/* --- Company テーブル --- */
.company-table { width: 100%; border-collapse: collapse; }
.company-table th, .company-table td { text-align: left; padding: 18px 12px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.company-table th { width: 28%; font-weight: 500; }
.map-placeholder { aspect-ratio: 16/7; background: var(--c-surface); display: grid; place-items: center; color: var(--c-text); opacity: .5; }

/* --- 進め方フロー（旧・未使用：将来サブページ用に温存） --- */
.flow { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.flow li { background: var(--c-surface); padding: 12px 22px; font-size: .92rem; position: relative; }
.flow li:not(:last-child)::after { content: "→"; margin-left: 18px; color: var(--c-accent); }

/* --- WORKFLOW（参考Figma選択を翻案 2026-05-18：円形ステップ＋連番＋和英＋説明） --- */
/* 上セクションと余白を空ける（他セクションと同じ縦リズム） */
.workflow-section { margin-top: var(--sec-y); }

@property --wf-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.workflow {
	--wf-r: clamp(78px, 9vw, 104px);   /* 円の半径＝コネクタ丸の周回半径と共有 */
	list-style: none; margin: clamp(28px, 5vw, 56px) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 22px);
}
.workflow__step {
	display: flex; flex-direction: column; align-items: center;
	text-align: center; position: relative;
}
.workflow__circle {
	position: relative;
	width: calc(var(--wf-r) * 2); max-width: 100%; aspect-ratio: 1 / 1;
	border: 1px solid var(--c-line); border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .35em; padding: 1.2em;
	transition: background-color .3s ease;
}
.workflow__step:hover .workflow__circle { background: var(--c-surface); }
/* ホバー：円線を accent が一周描くアニメ（conic を細リングにマスク） */
.workflow__circle::before {
	content: ""; position: absolute; inset: -1px; border-radius: 50%;
	padding: 2px; pointer-events: none; opacity: 0;
	background: conic-gradient(from 90deg, var(--c-accent) var(--wf-ang, 0deg), transparent 0deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
.workflow__step:hover .workflow__circle::before {
	opacity: 1; animation: wf-trace .9s ease forwards;
}
@keyframes wf-trace { from { --wf-ang: 0deg; } to { --wf-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
	.workflow__step:hover .workflow__circle::before { animation: none; opacity: 1; --wf-ang: 360deg; }
	.workflow__step:hover .workflow__circle::after { animation: none; } /* 丸は静止位置のまま */
}
.workflow__no { font-family: var(--ff-title); font-size: .76rem; letter-spacing: var(--ls-latin); color: var(--c-accent); opacity: .75; }
.workflow__name { font-size: clamp(1rem, 1.4vw, 1.18rem); font-weight: 500; letter-spacing: .08em; }
.workflow__en { font-family: var(--ff-title); font-size: .7rem; letter-spacing: var(--ls-latin); color: var(--c-accent); }
.workflow__desc { margin: clamp(16px, 2.5vw, 26px) 0 0; font-size: .85rem; line-height: 1.95; opacity: .72; max-width: 17em; }
/* 周回丸：全ステップ（運用＝最終円も含む）に付与。円の中心から半径 --wf-r 外へ
   置き、--wf-ang で円周上を周回。静止時は --wf-ang:0deg＝右端3時。
   ホバー時はトレース(::before)と同じ wf-trace を共有し、線と一緒に一周する。 */
.workflow__step .workflow__circle::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
	background: var(--c-accent); z-index: 2; pointer-events: none;
	transform: rotate(var(--wf-ang, 0deg)) translateX(var(--wf-r));
}
.workflow__step:hover .workflow__circle::after {
	animation: wf-trace .9s ease forwards;
}
@media (max-width: 860px) {
	.workflow { grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 5vw, 40px); }
	.workflow__circle { max-width: 200px; }
	.workflow__step .workflow__circle::after { display: none; }
}
@media (max-width: 480px) {
	.workflow { grid-template-columns: 1fr; }
}

/* --- 記事リスト --- */
.article-list, .news-list { list-style: none; padding: 0; margin: 0; }
.article-list__item { padding-block: clamp(22px, 4vw, 36px); border-bottom: 1px solid var(--c-line); }
.article-list__item time, .news-list__item time { font-size: .82rem; opacity: .6; letter-spacing: .04em; }
.article-list__cat, .single-post__cat { display: inline-block; margin-left: 12px; font-size: .78rem; color: var(--c-accent); }
.article-list__title { display: block; margin: .4em 0; font-size: 1.15rem; font-weight: 500; color: var(--c-text); }
.article-list__title:hover { color: var(--c-accent); }
.article-list__excerpt { margin: 0; opacity: .7; font-size: .95rem; }
.news-list__item { display: flex; gap: 18px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--c-line); }

.cat-switch { display: flex; gap: 20px; margin-bottom: clamp(24px, 5vw, 44px); }
.cat-switch a { color: var(--c-text); opacity: .6; font-size: .92rem; }
.cat-switch a:hover { opacity: 1; color: var(--c-accent); }

/* --- 単記事 / prose --- */
.page-hero { padding-block: clamp(70px, 12vw, 140px) clamp(40px, 7vw, 80px); border-bottom: 1px solid var(--c-line); }
.page-hero__title { font-size: clamp(1.8rem, 6vw, 3.4rem); margin: 0; }
.page-hero__lead { margin: .8em 0 0; opacity: .75; }
.single-work__kv img, .single-work__kv-noimg { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--c-surface); }
.single-work__title, .single-post__title { font-size: clamp(1.6rem, 5vw, 2.6rem); margin: clamp(28px,5vw,52px) 0 .6em; }
.single-work__meta { display: flex; gap: 36px; margin: 0 0 clamp(28px,5vw,48px); padding: 0; }
.single-work__meta dt { font-size: .76rem; opacity: .55; }
.single-work__meta dd { margin: 4px 0 0; font-weight: 500; }
.single-post__header { padding-top: clamp(60px, 10vw, 110px); }
.single-post__meta { display: flex; gap: 12px; align-items: baseline; }
.prose { line-height: 2; }
.prose h2 { margin: 2em 0 .8em; font-size: 1.4rem; }
.prose h3 { margin: 1.6em 0 .6em; }
.prose p { margin: 0 0 1.5em; }
.prose img { margin: 1.5em auto; }

/* --- CTA --- */
.cta__lead { font-size: clamp(1.3rem, 3.4vw, 2rem); margin: 0 0 1.4em; }
.cta__buttons { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Contact フォーム --- */
.cform { display: grid; gap: 22px; max-width: 620px; }
.cform label { display: grid; gap: 8px; font-size: .9rem; }
.cform input, .cform select, .cform textarea {
	font: inherit; padding: 12px 14px; border: 1px solid var(--c-line);
	border-radius: 2px; background: var(--c-bg); color: var(--c-text);
}
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.cform__note { font-size: .82rem; color: var(--c-accent-h); margin: 0; }
.contact-direct { margin-top: clamp(40px, 7vw, 72px); }

/* CF7 出力を .cform デザインに合わせる（LP #contact / contactページ共通） */
.contact-form .wpcf7-form { display: grid; gap: 22px; max-width: 620px; }
.contact-form .wpcf7-form p { margin: 0; display: grid; gap: 8px; }
.contact-form .wpcf7-form label { display: grid; gap: 8px; font-size: .9rem; }
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form select,
.contact-form .wpcf7-form textarea {
	font: inherit; padding: 12px 14px; border: 1px solid var(--c-line);
	border-radius: 2px; background: var(--c-bg); color: var(--c-text); width: 100%;
}
.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form select:focus,
.contact-form .wpcf7-form textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.contact-form .wpcf7-form .wpcf7-submit {
	font: inherit; cursor: pointer; padding: 14px 32px; border: 0;
	background: var(--c-accent); color: #fff; border-radius: 2px; justify-self: start;
}
.contact-form .wpcf7-form .wpcf7-submit:hover { background: var(--c-accent-h); }
.contact-form .wpcf7-spinner { margin: 0 0 0 8px; }
.contact-form .wpcf7-form .wpcf7-response-output { margin: 8px 0 0; padding: 10px 14px; border-radius: 2px; font-size: .85rem; }

/* --- ページネーション --- */
.pagination { margin-top: clamp(40px, 7vw, 72px); }
.pagination .page-numbers { padding: 8px 14px; color: var(--c-text); }
.pagination .current { background: var(--c-accent); color: #fff; }

/* --- NOTES（Column 編集的見せ方・参考NOTES翻案 2026-05-18） --- */
.section--notes { background: var(--c-surface); }
.notes-lead { font-size: clamp(1.05rem, 2.4vw, 1.35rem); opacity: .8; margin: 0 0 clamp(28px, 5vw, 56px); max-width: 32em; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--c-line); border-block: 1px solid var(--c-line); }
.notes__item { background: var(--c-bg); }
.notes__link { display: block; height: 100%; color: var(--c-text); padding: clamp(26px, 4vw, 44px); }
.notes__no { display: block; font-family: var(--ff-title); font-size: .78rem; letter-spacing: var(--ls-latin); color: var(--c-accent); opacity: .7; }
.notes__cat { display: inline-block; margin-top: 20px; font-family: var(--ff-title); font-size: .74rem; letter-spacing: var(--ls-latin); color: var(--c-accent); text-transform: uppercase; }
.notes__title { font-size: clamp(1.1rem, 1.7vw, 1.32rem); margin: .5em 0 .7em; line-height: 1.65; }
.notes__excerpt { margin: 0 0 1.5em; opacity: .72; font-size: .95rem; }
.notes__date { font-size: .78rem; opacity: .55; letter-spacing: .04em; }
.notes__link:hover .notes__title { color: var(--c-accent); }
@media (min-width: 760px) { .notes { grid-template-columns: repeat(3, 1fr); } }

/* --- リッチフッター（参考翻案 2026-05-18） --- */
.site-footer { border-top: 3px solid var(--c-accent); background: var(--c-text); color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--c-accent-h); }
.site-footer__top { display: grid; gap: clamp(40px, 7vw, 72px); padding-block: clamp(56px, 9vw, 104px); }
.site-footer__name { font-weight: 500; font-size: 1.05rem; margin: 0; letter-spacing: .04em; }
.site-footer__tagline { font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 500; margin: .7em 0 .45em; letter-spacing: .03em; }
.site-footer__statement { margin: 0; opacity: .6; font-size: .9rem; max-width: 30em; }
.site-footer__cols { display: grid; gap: 36px 28px; grid-template-columns: repeat(2, 1fr); }
.site-footer__h { font-family: var(--ff-title); font-size: .74rem; letter-spacing: var(--ls-latin); text-transform: uppercase; opacity: .55; margin: 0 0 1.3em; font-weight: 400; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; font-size: .92rem; }
.site-footer__addr { font-style: normal; display: grid; gap: 8px; font-size: .92rem; opacity: .82; margin: 0 0 22px; }
.site-footer__pending { opacity: .5; font-size: .85rem; }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; font-size: .9rem; }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.12); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 24px; }
.site-footer__copy { margin: 0; font-family: var(--ff-title); font-size: .74rem; letter-spacing: var(--ls-latin); opacity: .5; }
.site-footer__totop { font-size: .8rem; letter-spacing: .08em; opacity: .7; }
.site-footer__totop:hover { opacity: 1; }
/* フッターSNS：サービス名＋フォロワー数 2026-05-23 */
.site-footer__sns-count { opacity: .62; font-size: .82em; }
.site-footer__sns-count::before { content: "・"; opacity: .6; margin: 0 .1em; }
@media (min-width: 760px) {
	.site-footer__top { grid-template-columns: 1.3fr 2fr; align-items: start; }
	.site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --- スクロール演出（控えめ：fade + わずかに上方向） --- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* --- レスポンシブ：ナビ --- */
@media (max-width: 900px) {
	.nav-toggle { display: block; }
	.global-nav {
		position: fixed; inset: 76px 0 auto 0;
		flex-direction: column; align-items: flex-start;
		gap: 20px; padding: 32px var(--gut);
		background: var(--c-bg); border-bottom: 1px solid var(--c-line);
		transform: translateY(-120%); transition: transform .3s ease;
		max-height: calc(100vh - 76px); overflow-y: auto;
	}
	.global-nav.is-open { transform: none; }
	.global-nav__list { flex-direction: column; gap: 18px; }
	.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}