/* =========================================================
   kawahara theme - main.css  (TOPPAGE / PC)
   Figmaデザイン「天竺鼠-川原様」PC版の再現
   ========================================================= */

/* ---------- リセット ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 横スクロール禁止（100vwフルブリードやはみ出し演出ぶんを吸収） */
	overflow-x: hidden; /* clip未対応ブラウザ向けフォールバック */
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-ja);
	font-weight: 500;
	line-height: 1.9;
	color: var(--ink);
	background-color: var(--paper);
	overflow-x: hidden;
	overflow-x: clip;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, dl, dd, figure { margin: 0; }
button { font: inherit; cursor: pointer; }
/* 押せる要素は全て pointer（リンク・ボタン・フォームのラベル等）。無効化されたものは通常カーソル */
a[href],
button,
[role="button"],
label[for],
.jr-form__agree,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
select,
summary { cursor: pointer; }
button:disabled,
[aria-disabled="true"],
.link-card.is-soon { cursor: default; }

/* クリック可能な要素にポインターカーソルを付与（未指定箇所の補完） */
a[href],
button,
label,
summary,
[role="button"],
[onclick],
.nav-overlay,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
input[type="image"],
select {
	cursor: pointer;
}

/* ---------- デザイントークン ---------- */
:root {
	--wine: #7a3e62;
	--green: #9fc388;
	--ink: #111111;
	--paper: #ffffff;
	--grid: rgba(122, 62, 98, 0.75); /* 方眼線はワイン色（Figma: #7a3e62 の1px線、実測相当の濃度） */
	--line: #111111;

	--font-en: "Playfair Display", "Noto Serif JP", serif;
	--font-ja: "Noto Serif JP", "Hiragino Mincho ProN", serif;

	--content: 1700px;
}

/* デザインはコンテンツ幅≒画面の91%（左右4.5%余白）。狭い中央寄せをやめ広く取る */
.container {
	width: 91%;
	max-width: var(--content);
	margin-left: auto;  /* margin-inline 未対応ブラウザ向けフォールバック（中央寄せが効かず左寄せになるのを防ぐ） */
	margin-right: auto;
	margin-inline: auto;
}
.container--narrow { width: 91%; max-width: 920px; }

/* 共通セクション見出し（INFO's / SNS's など） */
.sec-head { text-align: center; margin-bottom: 54px; }
.sec-head--left { text-align: left; display: flex; justify-content: flex-start; }
.sec-head__en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 52px;
	letter-spacing: .02em;
	line-height: 1;
}
.sec-head__ja {
	font-size: 18px;
	letter-spacing: .35em;
	color: var(--wine);
	margin-top: 14px;
}
/* LINK PAGE's（Figma）: ワインバーを背面に敷き、その裏を通す形で白箱＋ラベルを乗せる。
   白箱はバーより高く（Figma 箱157 / バー90）、上下に食み出す。バーは箱の左に少し食み出し
   右はラベルの先まで伸びる。PC/SP共通デザイン。 */
.sec-head__bar {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 18px;                  /* 箱とラベルの間（ここにワインが覗く） */
	padding: 0 22px 0 16px;     /* 左=箱の左へワイン食み出し / 右=ラベルの先へワイン食み出し */
	isolation: isolate;
}
.sec-head__bar::before {        /* 背面ワインバー */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 60%;                /* 箱より低い＝箱が上下へ食み出す */
	transform: translateY(-50%);
	background: var(--wine);
	z-index: 0;
}
.sec-head--left .sec-head__en {
	position: relative;
	z-index: 2;                 /* ワインバーの上 */
	background: #fff;           /* Figma: 白箱 */
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 12px 28px;         /* バーより高くするため縦paddingを厚めに */
	font-size: 40px;
}
.sec-head--left .sec-head__ja {
	position: relative;
	z-index: 1;                 /* ワインバーの上・文字はバーに乗る */
	margin: 0;
	color: #fff;
	letter-spacing: .35em;
	white-space: nowrap;
}

/* =========================================================
   LOADING（白背景＋中央プログレスバー＋跳ね回る顔）
   ========================================================= */
.loading {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0; /* inset 未対応ブラウザ向けフォールバック */
	inset: 0;
	background: #fff;
	z-index: 9999;
	overflow: hidden;
	opacity: 1;
	transition: opacity .5s ease;
}
.loading.is-done { opacity: 0; pointer-events: none; }
body.is-loading { overflow: hidden; }

/* 跳ね回るナスの顔とサングラス（JSがtransformで動かす） */
.loading__face {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
	z-index: 1;
}
.loading__face--1 { width: 120px; }
.loading__face--2 { width: 64px; }  /* サングラス: ナスの幅の約53%＝重なったときにナスの顔にちょうど掛かる大きさ（SPも同じ比率） */

/* 中央: loading....＋プログレスバー（顔より前面） */
.loading__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 2;
}
.loading__text { margin-bottom: 14px; }
.loading__text-svg { display: inline-block; height: 16px; width: auto; fill: var(--ink); }
.loading__bar {
	width: min(320px, 70vw);
	height: 14px;
	border: 1px solid var(--line);
	background: #fff;
}
.loading__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ink);
	transition: width .25s ease;
}

@media (max-width: 768px) {
	.loading__face--1 { width: 84px; }
	.loading__face--2 { width: 45px; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
	position: relative;
	background: var(--paper);
	z-index: 10;
}
.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 0 24px;
	border-bottom: 1px solid var(--line);
}

/* 左：日付＋カウンター */
.site-header__meta {
	position: absolute;
	left: 90px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 18px;
}
.date-block {
	font-family: var(--font-en);
	line-height: 1;
	text-align: left;
}
.date-block__year { display: block; font-size: 30px; letter-spacing: .04em; }
.date-block__month { display: block; font-size: 22px; }
.counter {
	border-left: 1px solid var(--line);
	padding-left: 18px;
	display: grid;
	gap: 10px;
}
.counter__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	letter-spacing: .12em;
}
.counter__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 28px;
	padding: 0 8px;
	border: 1px solid var(--line);
	font-family: var(--font-en);
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* 中央：名前 */
.site-header__logo {
	font-family: var(--font-en);
	font-size: 34px;
	font-weight: 500;
	letter-spacing: .04em;
}

/* 右：お仕事依頼パネル */
.job-tab {
	position: absolute;
	top: 0;
	right: 70px;
	width: fit-content;
	background: var(--green);
	border: 1px solid var(--line);
	padding: 18px 16px 16px;
	text-align: center;
	color: #1d1d1d;
}
.job-tab__title {
	font-family: var(--font-en);
	font-size: 26px;
	line-height: 1.05;
	margin-bottom: 12px;
	white-space: nowrap;
}
.job-tab__btn {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 10px 6px;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .04em;
}

/* グローバルナビ */
.global-nav { border-bottom: 1px solid var(--line); }
.global-nav__list {
	display: flex;
	justify-content: center;
	gap: 56px;
	padding: 20px 0;
	font-size: 17px;
	letter-spacing: .12em;
}
.global-nav__list a { transition: color .2s; }
.global-nav__list a:hover { color: var(--wine); }

/* =========================================================
   HERO
   ========================================================= */
.hero { overflow: hidden; padding-top: 24px; position: relative; z-index: 2; } /* 下のセクションより前面に */
.hero__inner {
	/* 位置基準は hero 側に持たせる（写真の負マージンでタイトルが引き上げられないように） */
	position: static;
	width: 91%;
	max-width: var(--content);
	margin: 0 auto;
}
/* 横たわり写真（透過切り抜き）を前面に置き、巨大タイトルはその背面に回り込ませる */
/* 画面幅100%で、コンテナ余白を打ち消して画面端いっぱいに（フルブリード） */
.hero__photo {
	width: 130vw;                        /* 画面幅を超える特大サイズで縦の領域も大きく */
	/* 画像左に約11.5%(275/2400)の透明余白があるぶん、その分だけ余分に左へ寄せて人物を左端寄りに */
	margin-left: calc(50% - 64vw);       /* =50%-50vw(左端固定) からさらに約14vw左へ（余白11.5%×130vw相当） */
	margin-top: -9vw;                    /* 写真を上げて人物の位置をさらに上へ（PC） */
	position: relative;
	z-index: 2;
	/* 右側のはみ出しは html/body の overflow-x: clip が吸収（横スクロールは発生しない） */
}
.hero__photo img { width: 100%; display: block; }
.hero__title {
	position: absolute;
	top: 52px;            /* ナビ下からの上余白（hero基準なので安定） */
	left: 50%;
	transform: translateX(-50%);
	width: 91%;
	max-width: var(--content);
	z-index: 1;           /* 写真より後ろ */
	margin: 0;
	line-height: 0;
}
.hero__title-svg {
	display: block;
	width: 100%;
	height: auto;
	fill: var(--ink);
}

/* アウトライン文字（Airy Restoration）SVGのサイズ指定 */
.sec-head__svg { display: inline-block; height: 46px; width: auto; vertical-align: bottom; }
.sec-head--left .sec-head__svg { height: 38px; vertical-align: middle; }
.site-header__logo-svg { display: inline-block; height: 33px; width: auto; vertical-align: middle; } /* 新ロゴ(365x43)は j の下端まで含むため、文字の高さが旧ロゴ(26px)と揃う値 */
.job-tab__title-svg { display: block; height: 50px; width: auto; margin: 0 auto; }
.info-card__label svg { display: inline-block; height: 22px; width: auto; vertical-align: middle; }
.site-footer__title-svg { display: block; height: 40px; width: auto; margin: 0 auto; }

/* =========================================================
   PROFILE
   ========================================================= */
.profile {
	padding: 0;
	border-top: 1px solid var(--line);
	margin-top: -4vw; /* ヒーローの人物写真が少しかぶさるように上へ */
}
.profile__inner {
	display: grid;
	grid-template-columns: 35% 48%;
	justify-content: space-between;
	align-items: start;
}
/* PCではトラックを無効化し、写真をそのままグリッド要素にする（SPでのみpin用トラックとして機能） */
.profile__photo-track { display: contents; }
.profile__photo img {
	width: 100%;
	display: block;
	border-right: 1px solid var(--line);
	padding-right: 16px;
	margin-right: 16px;
}
/* PC/タブレット: 右の本文が長いので、写真は本文を読み終わるまで画面内に固定し（sticky）、
   本文の終わりに達したら一緒に上へ流れてはける。グリッドの align-items:start が前提
   （stretch だと写真が行いっぱいに伸びて固定されない）。SP（768px以下）は別途 sticky＋拡大演出を持つ。 */
@media (min-width: 769px) {
	.profile__photo {
		position: sticky;
		top: 24px;
	}
	/* 写真右の縦線は写真の枠ではなく、カラムの全高に引く。写真の枠だと固定中は
	   写真の上端(画面上から24px)で線が切れ、上の横線とつながらなくなるため。
	   位置は1列目(35%)の右端の1px＝旧 border-right と同じ場所 */
	.profile__inner { position: relative; }
	.profile__inner::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(35% - 1px);
		border-left: 1px solid var(--line);
		pointer-events: none;
	}
	.profile__photo img { border-right-color: transparent; } /* 線は上の ::before が担当（幅は従来どおり確保） */
	/* 画面の高さが写真より低い場合は縮めて、固定中も全身が見えるようにする */
	.profile__photo img {
		max-height: calc(100vh - 48px);
		object-fit: contain;
		object-position: top left;
	}
}
.profile__heading {
	font-family: var(--font-ja); /* FigmaはNoto Serif HK（英字含む全体） */
	font-weight: 500;
	font-size: 32px;          /* 「Tenjiku Kawahara とは？」の基準サイズ */
	line-height: 1.3;
	letter-spacing: .03em;
	margin-bottom: 26px;
}
.profile__heading-sub {
	display: block;
	font-family: var(--font-ja);
	font-size: 2em;           /* = 64px（基準32pxの2倍）。「の監督」を大きく */
	line-height: 1.1;
	margin-bottom: 6px;
}
.profile__heading-ja { font-family: var(--font-ja); }
.profile__body {
	padding: 128px 0 0;
}
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin-bottom: 28px;
}
.tags li {
	border: 1px solid var(--line);
	padding: 0 16px;
	height: 46px;
	line-height: 43px;
	font-size: 15px;
	letter-spacing: .08em;
	border-radius: 23px;
}
.profile__text {
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: .02em;
	padding-bottom: 16px; /* 長文の下に余白（次のアドバイス欄との間隔） */
}

/* =========================================================
   ADVICE BAR（デザイン上の「運勢バー」の位置に「今日の人生アドバイス」を出す）
   ========================================================= */
.advice {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.advice .container {
	display: flex;
	align-items: stretch; /* 本文が複数行になっても、ラベル右の区切り線をバーの高さいっぱいに */
	padding: 0;
	margin: 0;
}
.advice__label {
	flex: none;
	width: auto;
	padding: 16px; /* 本文と同じ上余白＝ラベルと本文の1行目がそろう */
	font-size: 17px;
	letter-spacing: .2em;
	border-right: 1px solid var(--line);
	margin-right: 24px;
}
/* 「設定 → 今日の人生アドバイス」からランダムで1つ（main.js が入れる）。改行はそのまま表示 */
.advice__body {
	min-width: 0;
	max-width: 44em; /* 画面が広くても1行が長くなりすぎないように */
	padding: 17px 16px 17px 0;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: .08em;
	color: var(--wine);
	white-space: pre-wrap; /* 改行も半角スペースの字下げ・連続も入力どおりに（行末の空白は保存時に除いている） */
	overflow-wrap: anywhere; /* 「wwww…」やURLなど切れ目のない英数字でもはみ出さない */
}

/* =========================================================
   INFO'S
   ========================================================= */
.info {
	padding: 90px 0 0;
	position: relative;
	/* 写真の高さ = 写真下端の横線の位置（同じ値を使い、写真が線までぴったり埋まるようにする）。
	   カラム幅( min(91vw,1700px)/4 ) ÷ アスペクト比0.94。
	   写真の幅はカードの縦線1px（右端のカードは2px）やスクロールバーの分だけ列幅より狭く、
	   比率で高さを決めると線との間に隙間ができるため、高さはこの値で固定する */
	--info-photo-h: min(24.202vw, 452px);
}
.info__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}
/* Figmaの表組み風罫線: 写真上端(::before)・写真下端(::after)の横線を画面端まで伸ばす */
.info__grid::before,
.info__grid::after {
	content: "";
	position: absolute;
	left: calc(50% - 50vw);
	width: 100vw;
	border-top: 1px solid var(--line);
	pointer-events: none;
}
.info__grid::before { top: 0; }
/* 写真下端（写真の高さと同じ値） */
.info__grid::after { top: var(--info-photo-h); }
/* カード下端の横線（全幅）。bottom = .info の padding-bottom に合わせる */
.info::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 1px solid var(--line);
	pointer-events: none;
}
.info-card {
	text-align: center;
	padding-bottom: 26px;
	/* カード間の縦罫線（写真からラベル下端まで貫通） */
	border-left: 1px solid var(--line);
}
.info-card:last-child { border-right: 1px solid var(--line); }
.info-card__thumb { position: relative; }
.info-card__thumb img {
	width: 100%;
	height: var(--info-photo-h);
	aspect-ratio: 0.94 / 1; /* SPは高さを auto に戻してこの比率で表示 */
	object-fit: cover;
	display: block;
}
.info-card__more {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 18px;
	font-size: 13px;
	letter-spacing: .1em;
	box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.info-card__caption {
	font-size: 13px;
	line-height: 1.7;
	margin: 18px 14px 16px;
	min-height: 3em;
}
.info-card__label {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 26px;
	border: 1px solid var(--line);
	display: inline-block;
	padding: 4px 22px;
	background: #fff;
}

/* =========================================================
   LINK PAGE'S
   ========================================================= */
.links {
	padding: 70px 0 100px;
	/* 方眼紙のグリッド背景はこのセクションのみ */
	background-image:
		linear-gradient(to right, var(--grid) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
	background-size: 46px 46px; /* Figmaのマス目間隔（69px/2121幅）を1440px基準に換算 */
	background-position: left bottom; /* 下端を基準にタイル配置＝一番下のマスが欠けず綺麗に収まる */
	border-bottom: 1px solid var(--grid); /* 方眼の一番下を閉じる線 */
	border-top: 1px solid var(--grid);    /* 上端も閉じる（下基準タイルのため上は端数マスになる） */
}
/* くるくる回る顔アイコンの独立セクション（Figma Group 60） */
.links__icons {
	width: 91%;
	max-width: var(--content);
	margin-left: auto;  /* margin-inline 未対応ブラウザ向けフォールバック（中央寄せが効かず左寄せになるのを防ぐ） */
	margin-right: auto;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center; /* PCでも画面中央に（コンテナ自体が中央寄せなので＝全画面幅の中央） */
	/* 回転すると各アイコンが左右に16〜18pxずつはみ出すため、その分を上乗せした間隔 */
	gap: 32px;
	/* 回転で角がはみ出す分も含め、セクション内に収める（下要素と重ねない） */
	padding: 20px 0;
}
.spin-icon {
	height: 72px;
	width: auto;
	transform-origin: 50% 50%;
	animation: spin-rotate 9s linear infinite;
}
.spin-icon:nth-child(1) { animation-duration: 8s; }
.spin-icon:nth-child(2) { animation-duration: 11s; animation-direction: reverse; }
.spin-icon:nth-child(3) { animation-duration: 9.5s; }
@keyframes spin-rotate {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.spin-icon { animation: none; }
}

.links__grid {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	margin-top: 40px;
}
/* カード本体（白カード・顔・縦書きラベル）は1枚のPNGに書き出し済み。傾きも画像に含む */
.link-card {
	display: block;
	width: 27%;   /* Figma準拠: 各カード≒画面の1/4強 */
	/* 常時ふわふわ上下に浮遊。カードごとに位相をずらす */
	animation: link-float 3.2s ease-in-out infinite;
}
/* Figmaのように隣のカードと重ねて距離を詰める */
.link-card:not(:first-child) { margin-left: -3.5%; }
.link-card:nth-child(1) { animation-delay: 0s; }
.link-card:nth-child(2) { animation-delay: -.8s; }
.link-card:nth-child(3) { animation-delay: -1.6s; }
.link-card:nth-child(4) { animation-delay: -2.4s; }
.link-card:nth-child(even) { margin-top: 46px; }
/* 重なりのz順（右のカードほど手前）でドロップシャドウが自然に見えるように */
.link-card:nth-child(1) { z-index: 1; }
.link-card:nth-child(2) { z-index: 2; }
.link-card:nth-child(3) { z-index: 3; }
.link-card:nth-child(4) { z-index: 4; }
.link-card { position: relative; }
.link-card img {
	width: 100%;
	display: block;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18));
}
/* カーソルを当てたら、その位置で浮遊を止める（リンク有効なカードのみ） */
.link-card:hover { animation-play-state: paused; }

/* coming soon のカード（リンク未公開）は押しても何も起きないよう、ポインター操作を完全に無効化 */
.link-card.is-soon {
	pointer-events: none;
	cursor: default;
}

/* リンク先公開までの仮表示。カード全体を紫の半透明で覆い、中央に白の太字を重ねる。
   カードPNGは傾き＋透過余白込みなので、同じPNGをマスクにして不透明部分（カードの形）
   だけをオーバーレイする（--card-img は front-page.php がインラインで指定） */
.link-card.is-soon::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0; /* inset 未対応ブラウザ向けフォールバック */
	inset: 0;
	background: var(--wine);
	opacity: .55;
	-webkit-mask-image: var(--card-img);
	mask-image: var(--card-img);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	z-index: 0;
	pointer-events: none;
}
.link-card__soon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;          /* オーバーレイより前面 */
	font-family: var(--font-en);
	font-weight: 700;
	color: #fff;
	/* カード幅(27%)内に1行で収まる上限。改行・はみ出しをさせない */
	font-size: clamp(14px, 2vw, 28px);
	white-space: nowrap;
	letter-spacing: .04em;
	pointer-events: none; /* クリックはリンク側に通す */
}

@keyframes link-float {
	0%   { transform: translateY(-9px); }
	50%  { transform: translateY(9px); }
	100% { transform: translateY(-9px); }
}

/* モーション軽減設定では浮遊を無効化 */
@media (prefers-reduced-motion: reduce) {
	.link-card { animation: none; }
}

/* =========================================================
   GALLERY / ACCESS
   ========================================================= */
.gallery { padding: 70px 0 100px; }
/* 見出し・本文・GALLERYバーをFigmaの座標で重ねるため、ここを配置基準にする。
   .gallery__left より写真の方が背が高いので、この高さ＝写真の高さになる。 */
.gallery__inner {
	position: relative;
	display: grid;
	grid-template-columns: 300px 1fr 9.4%; /* 3列目=GALLERYバー幅（Figma 176/1873） */
	gap: 48px;
	align-items: start;
}
.gallery__subimgs {
	display: flex;
	gap: 14px;
	margin-bottom: 30px;
}
.gallery__subimgs img { width: 50%; object-fit: cover; border: 1px solid var(--line); }

.access__title {
	font-family: var(--font-en);
	font-size: 30px;
	letter-spacing: .12em;
	margin-bottom: 16px;
	border: 1px solid var(--line); /* Figma: 黒枠の白箱 */
	padding: 10px 0;
	text-align: center;
}
.access__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.access__list li {
	display: flex;
	align-items: center;
	gap: 12px;
}
.access__label {
	flex: none;
	border: 1px solid var(--line);
	border-radius: 999px; /* Figma: 角丸ピル */
	padding: 6px 20px;
	font-size: 14px;
	white-space: nowrap;
}
.access__detail {
	font-size: 12px;
	line-height: 1.6;
	color: #333;
}
.access__note {
	font-size: 11px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 18px;
}
.access__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 624 / 242; /* Figmaの地図枠と同比率 */
	border: 1px solid var(--line);
}

/* 左カラム（サブ写真・ACCESS）との間隔をgapぶんに追加で広げる。
   position は付けない（見出し・本文は .gallery__inner を基準に配置するため）。 */
.gallery__center { text-align: center; margin-left: 32px; }
.gallery__main { position: relative; }
.gallery__main > img { width: 100%; display: block; border: 1px solid var(--line); }
.gallery__heading {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line); /* Figma: 黒枠の白箱 */
	font-size: 20px;
	letter-spacing: .12em;
	padding: 14px 20px;
	/* 改行させず、箱の幅は内容に合わせて自由に */
	white-space: nowrap;
	width: fit-content;
	max-width: none;
	margin: 20px auto 0;
}
.gallery__text {
	font-size: 13px;
	line-height: 1.9;
	padding: 16px 24px;
	background: #fff;
	border: 1px solid var(--line); /* Figma: 黒枠の白箱 */
	/* 固定幅にせず内容に合わせる。箱は中央寄せ・中の文章は左揃え */
	width: fit-content;
	max-width: 100%;
	margin: 16px auto 0;
	text-align: left;
}
/* GALLERY: Figmaでは緑地＋黒枠のボックスに黒文字が乗る（文字だけの緑ではない） */
.gallery__vertical {
	justify-self: center;
	margin: 0;
	background: var(--green);
	border: 1px solid var(--line);
	padding: 16px 12px;
	line-height: 0;
}
.gallery__vertical-svg {
	display: block;
	margin-left: auto;  /* margin-inline 未対応ブラウザ向けフォールバック（中央寄せが効かず左寄せになるのを防ぐ） */
	margin-right: auto;
	margin-inline: auto;
	width: 47px;       /* アウトラインSVG（縦組み 47x460） */
	height: auto;
	fill: var(--ink);  /* Figma: 文字は黒 */
}

/* Figmaの重ね配置（見出し・本文が写真の下部に重なり、右へはみ出してGALLERYバーの上に乗る）。
   写真が左カラムより高い幅でしか成立しないため（1280px未満だと左カラムが勝ち、
   .gallery__inner の高さ＝写真の高さ という縦位置の前提が崩れる）PC幅限定。
   左右＝コンテンツ幅基準（Figma 1873px）／上下＝写真の高さ基準（Figma 989px）。 */
@media (min-width: 1280px) {
	.gallery__heading,
	.gallery__text {
		position: absolute;
		z-index: 3;    /* 緑のGALLERYバー(z-index:1)より前面 */
		margin: 0;
	}
	.gallery__heading {
		/* 改行させず内容に合わせて自由な長さに。右端を基準に左へ伸ばす
		   （Figma同様、右へ少しはみ出してGALLERYバーに乗る。画面外には出ない） */
		left: auto;
		right: -2.6%;  /* Figmaの右はみ出し量（1873px中 +48px 相当） */
		width: max-content;
		white-space: nowrap;
		top: 73.31%;   /* Figma  725/989  */
		/* Figmaの見出しは箱幅の約9割を占める。箱がコンテンツ幅追従なので文字も追従させる
		   （Figma 36px / コンテンツ1873px = 1.92% → コンテナ91vw換算で1.75vw、上限は1700px時の33px） */
		font-size: min(1.75vw, 33px);
		line-height: 1.9; /* Figma 69/36 */
		padding: 11px 20px;
	}
	.gallery__text {
		left: 49.92%;  /* Figma  935/1873 */
		width: max-content; /* 固定幅をやめ内容に合わせる（左右paddingは維持） */
		max-width: 48%;     /* 文言が長くなった場合の保険（超えたら折り返し） */
		top: 85.84%;   /* Figma  849/989  */
		line-height: 2.06;
		padding: 15px 24px;
		text-align: left;
	}
	.gallery__vertical {
		position: absolute;
		right: 0;
		width: 9.4%;    /* Figma  176/1873 */
		top: 8.7%;      /* Figma   86/989  */
		height: 85.14%; /* Figma  842/989  */
		padding: 0;
		z-index: 1;
	}
	.gallery__vertical-svg {
		position: absolute;
		top: 11.05%;    /* Figma 93/842 — 文字は箱の上寄り */
		height: 57.36%; /* Figma 483/842 */
		left: 50%;
		transform: translateX(-50%);
		width: auto;
	}
}

/* =========================================================
   SNS'S
   ========================================================= */
.sns { padding: 90px 0; }
.sns__list {
	display: flex;
	justify-content: center;
	gap: 36px;
}
.sns__list a {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink);
	transition: background .2s, color .2s;
}
.sns__list a:hover { background: var(--wine); color: #fff; }
/* アイコンはFigmaから書き出したもの。幅は円(105px)に対する比率で指定しSPの小さい円にも追従させる。
   note と X はFigma上がラスター画像のためPNG、Instagram と YouTube はベクターなのでインラインSVG。 */
.sns__icon { display: block; height: auto; }
.sns__icon--note  { width: 81%; }   /* Figma 85/105 */
.sns__icon--insta { width: 56.2%; } /* Figma 59/105 */
.sns__icon--yt    { width: 52.4%; } /* Figma 55/105 */
.sns__icon--x     { width: 38.1%; } /* Figma 40/105 */
/* SVGはFigmaが stroke="#1E1E1E" を直書きするので、CSSで currentColor に上書きしてホバー色に追従させる */
.sns__list svg.sns__icon { fill: none; }
.sns__list svg.sns__icon path { stroke: currentColor; }
/* PNGは色を変えられないので、ホバー時だけ白へ反転させて他のアイコンと揃える */
.sns__list a:hover .sns__icon--note,
.sns__list a:hover .sns__icon--x { filter: brightness(0) invert(1); }

/* =========================================================
   YOUTUBE
   ========================================================= */
/* 切り替えアニメーションで中身が左右にはみ出す分を切る（画面が狭いと横スクロールが出るため）。
   clip なら hidden と違い縦方向は visible のままにでき、上にはみ出す YOUTUBE タグを切らずに済む。 */
.youtube { padding: 0 0 110px; overflow-x: clip; }
.youtube__inner {
	display: grid;
	grid-template-columns: 230px minmax(0, 640px) 230px;
	gap: 24px;
	align-items: start;
	justify-content: center;
}
.youtube__main { position: relative; }
.youtube__tag {
	position: absolute;
	top: -22px;
	left: 30px;
	background: var(--wine);
	color: #fff;
	font-family: var(--font-en);
	letter-spacing: .3em;
	padding: 10px 30px;
	border-radius: 999px;
	z-index: 2;
}
.yt-player {
	position: relative;
	background: var(--green);
	padding: 40px 30px 30px;
}
.yt-player img { width: 100%; display: block; border: 1px solid var(--line); }
.yt-player__play {
	position: absolute;
	top: calc(50% + 5px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 86px;
	height: 86px;
	border-radius: 50%;
	border: 3px solid #fff;
	background: transparent;
}
.yt-player__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 16px 0 16px 26px;
	border-color: transparent transparent transparent #fff;
}
.yt-player__time {
	position: absolute;
	right: 44px;
	bottom: 42px;
	background: rgba(0,0,0,.8);
	color: #fff;
	font-size: 13px;
	padding: 2px 6px;
	border-radius: 3px;
}
.youtube__desc { border: 1px solid var(--line); border-top: none; }
.youtube__desc h3 {
	font-size: 17px;
	letter-spacing: .04em;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	font-weight: 700;
}
.youtube__desc p {
	font-size: 13px;
	line-height: 1.9;
	padding: 14px 16px;
}

.youtube__side { font-size: 12px; }
.youtube__side--prev { margin-top: 120px; }
.youtube__side--next { margin-top: 120px; }
.yt-thumb {
	border: 1px solid var(--line);
	padding: 8px;
	background: #fff;
}
.yt-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.yt-thumb__title { font-size: 12px; line-height: 1.5; margin-top: 8px; font-weight: 700; }
.yt-thumb__meta { font-size: 11px; color: #666; margin-top: 4px; }
.youtube__next {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--font-en);
	font-size: 24px;
}
/* 動画を登録すると Next は button になる（未登録時の静的フォールバックは a のまま） */
button.youtube__next {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}
/* 説明文はoEmbedから取れないため、動画登録時はタイトルのみ（h3の下線が二重にならないよう消す） */
.youtube__desc--title-only h3 { border-bottom: none; }
/* サムネイルは maxresdefault(16:9) と hqdefault(4:3・上下に黒帯) が混在するので比率を揃える */
.youtube[data-yt-videos] .yt-player img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
}
.youtube[data-yt-videos] .yt-thumb { cursor: pointer; }
/* 再生ボタンを押したときだけ iframe を差し込む */
.yt-player.is-playing img { display: none; }
.yt-player iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--line);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
	background: var(--wine);
	color: #fff;
	padding: 70px 0 50px;
	margin-top: 40px;
}
.site-footer__inner {
	max-width: var(--content);
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}
.site-footer__blob {
	display: inline-block;
	background: #fff;
	color: var(--ink);
	border-radius: 80px;
	padding: 34px 90px 30px;
	margin-bottom: 55px;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.site-footer__blob:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.site-footer__title {
	display: block;
	font-family: var(--font-en);
	font-size: 46px;
	line-height: 1;
}
.site-footer__lead {
	display: block;
	font-size: 14px;
	letter-spacing: .1em;
	margin-top: 12px;
}
.footer-nav__main {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	font-size: 16px;
	letter-spacing: .1em;
	margin-bottom: 26px;
}
.footer-nav__sub {
	display: flex;
	justify-content: center;
	gap: 50px;
	font-size: 15px;
	color: var(--green);
	margin-bottom: 60px;
}
.footer-nav__main a:hover,
.footer-nav__sub a:hover { opacity: .7; }

/* 会社情報（規約リンクの下・コピーライトの上）。
   フッターは中央揃えだが、この塊だけは幅を絞って左揃えにしないと項目が読み取りにくい。 */
.footer-company {
	max-width: 620px;
	margin: 0 auto 44px;
	padding-top: 34px;
	border-top: 1px solid rgba(255, 255, 255, .3);
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 12px 30px;
	text-align: left;
	font-size: 12px;
	line-height: 1.8;
}
.footer-company dt {
	white-space: nowrap;
	letter-spacing: .12em;
	opacity: .75; /* 緑はフッターではリンク色なので、ラベルには使わない */
}
.footer-company dd { margin: 0; }
.site-footer__copy {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: .2em;
	opacity: .7;
}

/* =========================================================
   下層ページ共通
   ========================================================= */
.page-en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 60px;
	text-align: center;
	line-height: 1;
}
.page-head { text-align: center; margin: 70px 0 60px; }
.page-head__ja {
	font-size: 26px;
	letter-spacing: .2em;
	margin-top: 18px;
}

/* ---------- 404 / 401 ---------- */
.error-page { padding: 90px 0 130px; text-align: center; }
.error-page__code {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 150px;
	line-height: 1;
	color: var(--wine);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .02em;
}
.error-page__zero { position: relative; display: inline-block; }
.error-page__zero img {
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: .42em;
	height: .6em;
	object-fit: cover;
	object-position: top center;
	border-radius: 50%;
}
.error-page__title {
	font-family: var(--font-en);
	font-size: 64px;
	color: var(--wine);
	margin-top: 10px;
}
.error-page__msg {
	font-size: 26px;
	color: var(--wine);
	margin-top: 30px;
}
.error-page__back {
	display: inline-block;
	margin-top: 50px;
	border: 1px solid var(--line);
	padding: 18px 70px;
	font-size: 22px;
	font-weight: 700;
	transition: background .2s, color .2s;
}
.error-page__back:hover { background: var(--ink); color: #fff; }

/* ---------- THANK YOU ---------- */
.thankyou { padding: 100px 0 130px; text-align: center; }
.thankyou__en { color: var(--wine); }
.thankyou__lead {
	font-size: 34px;
	font-weight: 700;
	color: var(--wine);
	margin: 50px 0 40px;
}
.thankyou__msg { font-size: 16px; line-height: 2.2; }

/* ---------- JOB REQUEST フォーム ---------- */
.job-request { padding: 0 0 120px; }
.job-request .page-head__ja { font-size: 30px; font-weight: 700; }
.job-request__lead { margin: 0 auto 60px; font-size: 16px; line-height: 2; }
.job-request__lead p { margin-bottom: 18px; }

.jr-form { max-width: 760px; margin: 0 auto; }
.jr-form__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: center;
	gap: 20px;
	margin-bottom: 22px;
}
.jr-form__row--top { align-items: start; }
.jr-form__row label {
	font-size: 16px;
	letter-spacing: .08em;
}
.jr-form__row input,
.jr-form__row textarea {
	width: 100%;
	border: 1px solid var(--line);
	padding: 12px 14px;
	font: inherit;
	background: #fff;
}
.jr-form__row textarea { resize: vertical; }
.jr-form__agree {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 40px 0 30px;
	font-size: 15px;
}
.jr-form__agree a { text-decoration: underline; }
.jr-form__send {
	display: block;
	margin: 0 auto;
	background: var(--wine);
	color: #fff;
	border: none;
	font-family: var(--font-en);
	font-size: 30px;
	letter-spacing: .2em;
	padding: 16px 90px;
	border-radius: 999px;
	transition: opacity .2s;
}
.jr-form__send:hover { opacity: .85; }

/* Contact Form 7 が足す要素の調整（静的フォームだった頃と同じ見た目に保つ）
   入力欄を包む span は display:contents にして、入力欄を行のグリッドに直接並べる。
   エラー文は入力欄の下の段（右列）に出し、ラベルの縦位置は入力欄に揃えたままにする */
.jr-form__row .wpcf7-form-control-wrap { display: contents; }
.jr-form__row .wpcf7-not-valid-tip {
	grid-column: 2;
	margin-top: -14px;
	color: var(--wine);
	font-size: 13px;
	letter-spacing: .04em;
}
.jr-form__row .wpcf7-not-valid { border-color: var(--wine); }
.jr-form__agree .wpcf7-form-control-wrap,
.jr-form__agree .wpcf7-form-control,
.jr-form__agree .wpcf7-list-item { display: flex; margin: 0; }
.jr-form__agree .wpcf7-not-valid-tip { display: none; } /* 同意は下のメッセージ欄で知らせる */
.jr-form__send:disabled,
.jr-form__send:disabled:hover { opacity: .45; }
.jr-form.submitting .jr-form__send { opacity: .6; pointer-events: none; }
.job-request .wpcf7 form.jr-form .wpcf7-response-output {
	margin: 28px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--wine);
	color: var(--wine);
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
}
.job-request .wpcf7 form.jr-form.sent .wpcf7-response-output { display: none; } /* 送信完了ページへ移動するので出さない */

/* ボット除けの欄（人には見せない） */
.jr-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* プラグインが無効の間の案内 */
.jr-form-notice {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 24px;
	border: 1px solid var(--line);
	text-align: center;
	font-size: 16px;
	line-height: 2;
}
.jr-form-notice__admin { margin-top: 12px; font-size: 14px; color: var(--wine); }

/* ---------- 規約系（PRIVACY / TERMS） ---------- */
.legal { padding: 0 0 120px; }
.legal__box {
	border: 1px solid var(--line);
	padding: 60px 64px;
	background: rgba(255, 255, 255, .85);
}
.legal__intro { font-size: 15px; line-height: 2; margin-bottom: 36px; }
.legal__heading {
	font-size: 18px;
	font-weight: 700;
	margin: 30px 0 10px;
}
.legal__box p { font-size: 15px; line-height: 2; }
.legal__list { margin: 6px 0 0; padding-left: 1.2em; }
.legal__list li {
	list-style: disc;
	font-size: 15px;
	line-height: 2;
	margin-left: .3em;
}
.legal__fields { margin-top: 36px; color: #555; }
.legal__fields a { text-decoration: underline; text-underline-offset: .2em; }
.legal__fields a:hover { color: var(--wine); }

/* ---------- INFO（最新情報）ページ ---------- */
.info-page { padding: 0 0 120px; }
.info-page .sec-head { margin: 70px 0 40px; }
.info-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 70px;
}
.info-tabs__item {
	border: 1px solid var(--line);
	border-left: none;
	text-align: center;
}
.info-tabs__item:first-child { border-left: 1px solid var(--line); }
.info-tabs__item a {
	display: block;
	padding: 22px 0;
	font-family: var(--font-en);
	font-size: 24px;
	letter-spacing: .12em;
}
.info-tabs__item.is-active { background: var(--wine); }
.info-tabs__item.is-active a { color: #fff; }

.info-page__featured { text-align: center; margin-bottom: 80px; }
.info-page__caption { font-size: 15px; margin: 18px 0 26px; }
.info-page__hero img { width: 100%; max-height: 520px; object-fit: cover; }

.article-list { display: grid; gap: 60px; }
.article {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 30px;
	align-items: start;
}
.article__thumb img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid #eee;
}
.article__date {
	font-size: 14px;
	font-weight: 700;
	color: #9a7b46;
	margin-bottom: 8px;
}
.article__title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.article__excerpt { font-size: 13px; line-height: 1.9; color: #444; }
.article__more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 16px;
	font-family: var(--font-en);
	font-size: 18px;
	letter-spacing: .1em;
}
.article__more-line { width: 40px; height: 1px; background: var(--ink); }

.info-pager {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 70px;
	font-family: var(--font-en);
}
.info-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border: 1px solid var(--line);
	font-size: 16px;
}
.info-pager .page-numbers.current { background: var(--wine); color: #fff; border-color: var(--wine); }
.info-pager a.page-numbers:hover { background: var(--ink); color: #fff; }
.info-empty { text-align: center; color: #888; padding: 60px 0; }

/* ---------- 投稿（INFO記事）詳細 ---------- */
.single-info { padding: 80px 0 120px; }
.single-info__head { text-align: center; margin-bottom: 40px; }
.single-info__cat {
	display: inline-block;
	background: var(--wine);
	color: #fff;
	font-family: var(--font-en);
	letter-spacing: .15em;
	padding: 4px 22px;
	font-size: 16px;
	margin-bottom: 18px;
}
.single-info__date { font-size: 14px; color: #9a7b46; font-weight: 700; margin-bottom: 12px; }
.single-info__title { font-size: 28px; font-weight: 700; line-height: 1.6; }
.single-info__thumb { margin: 0 0 40px; }
.single-info__thumb img { width: 100%; max-height: 540px; object-fit: cover; }
.single-info__body { font-size: 16px; line-height: 2.1; }
.single-info__body p { margin-bottom: 1.6em; }
.single-info__nav { margin-top: 60px; text-align: center; }
.single-info__back {
	display: inline-block;
	border: 1px solid var(--line);
	padding: 14px 50px;
	font-size: 15px;
	transition: background .2s, color .2s;
}
.single-info__back:hover { background: var(--ink); color: #fff; }

/* =========================================================
   汎用フォールバック（index.php 用）
   ========================================================= */
.content-area { max-width: var(--content); margin: 60px auto; padding: 0 24px; }
.placeholder { min-height: 50vh; display: flex; align-items: center; justify-content: center; color: #999; }

/* =========================================================
   ハンバーガーメニュー（基本: PCでは非表示）
   ========================================================= */
.nav-toggle { display: none; }
.nav-overlay {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0; /* inset 未対応ブラウザ向けフォールバック */
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 40;
}
.global-nav__cta { display: none; }
.counter--nav { display: none; } /* ドロワー内のカウンターはSPのみ */

/* =========================================================
   レスポンシブ : タブレット (~1024px)
   ========================================================= */
@media (max-width: 1024px) {
	:root { --content: 100%; }
	.hero__title { font-size: 13vw; }
	.global-nav__list { gap: 32px; }
	.youtube__inner { grid-template-columns: 200px minmax(0, 1fr) 200px; }
}

/* =========================================================
   レスポンシブ : スマートフォン (~768px)
   ========================================================= */
@media (max-width: 768px) {
	.container { padding-left: 18px; padding-right: 18px; padding-inline: 18px; }

	/* ---- ヘッダー ---- */
	.site-header__bar { min-height: 64px; justify-content: flex-start; padding: 0 18px; }
	.site-header__meta { display: none; }
	.job-tab { display: none; }
	.site-header__logo { font-size: 22px; }
	.site-header__logo-svg { height: 22px; } /* SPはロゴを小さめに（旧17px相当） */

	/* SPはヘッダーを常時固定（main.js が is-fixed を付与し、fixed分のbody上余白も補正） */
	.site-header.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 30;
	}

	.nav-toggle {
		position: absolute;
		top: 50%;
		right: 14px;
		transform: translateY(-50%);
		width: 46px;
		height: 46px;
		padding: 12px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		border: none;
		background: transparent;
		z-index: 60;
	}
	.nav-toggle span {
		display: block;
		height: 2px;
		width: 100%;
		background: var(--ink);
		transition: transform .3s, opacity .3s;
	}
	body.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	body.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	body.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	.global-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(82vw, 320px);
		background: #fff;
		border-left: 1px solid var(--line);
		border-bottom: none;
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 50;
		padding: 84px 0 40px;
		overflow-y: auto;
	}
	body.is-nav-open .global-nav { transform: translateX(0); }
	body.is-nav-open .nav-overlay { display: block; }
	/* ドロワー(z50)と×ボタン(z60)はヘッダー内部にあり、ヘッダーのスタッキング
	   コンテキスト(z30)に閉じ込められて暗幕(z40)の下に沈む。ナビ開放中だけ
	   ヘッダーごと暗幕より前面へ引き上げ、ナビを一番手前にする */
	body.is-nav-open .site-header { z-index: 70; }

	/* ドロワー先頭のカウンター（ヘッダー左のカウンターはSPで隠しているため） */
	.counter--nav {
		display: grid;
		gap: 10px;
		padding: 0 26px 20px;
		border-left: none;
		border-bottom: 1px solid #eee;
	}
	/* 320px幅の端末でもラベルが折り返さないよう、狭い画面では文字を少し縮める */
	.counter--nav .counter__row { justify-content: space-between; font-size: min(14px, 3.75vw); letter-spacing: .06em; }
	.counter--nav dt { white-space: nowrap; }

	.global-nav__list { flex-direction: column; gap: 0; padding: 0; font-size: 16px; }
	.global-nav__list li { border-bottom: 1px solid #eee; }
	.global-nav__list a { display: block; padding: 17px 26px; letter-spacing: .08em; }
	.global-nav__cta { display: block; margin-top: 16px; padding: 0 20px; border-bottom: none !important; }
	.global-nav__cta a {
		background: var(--green);
		color: #1d1d1d;
		text-align: center;
		border-radius: 999px;
		padding: 14px 16px;
		font-size: 14px;
	}

	/* ---- ヒーロー（SPはスクロール連動ズームアウト） ----
	   最初は顔のクローズアップ。下へスクロールするほど写真が縮小し、
	   全身が写り切ってから通常スクロールで上へ流れる。
	   .hero__inner を縦長トラックにして .hero__photo を sticky で固定し、
	   スクロール量を main.js が --hero-scale（拡大率）に変換する。 */
	.hero { padding-top: 8px; overflow: visible; } /* overflow:hiddenだと子のstickyが効かないので解除 */
	.hero__inner {
		width: 100%;
		max-width: none;
		padding: 0;
		height: 240vh;        /* ズームアウトに使うスクロール距離（pin区間） */
		position: relative;
	}
	.hero__photo {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100vh;        /* svh非対応ブラウザ向けフォールバック */
		height: 100svh;       /* pin中はビューポート高でトリミング枠に */
		margin: 0;
		overflow: hidden;
		display: grid;
		place-items: start start;   /* 画像は左上寄せ（左端を見切れさせない） */
		/* 背景は透明にする。人物PNGは切り抜きなので、背面(z-index:1)に重ねた
		   プロフィール写真が人物の後ろから透けて見える */
		background: transparent;
	}
	.hero__photo img {
		width: 100%;
		max-width: none;
		margin: -18vw 0 0; /* 人物の開始位置を上へ（画像上端は透明余白帯なので切れても見えない） */
		/* 既定は左側の拡大表示。JSが --hero-scale を 1 まで下げて全身を出す。
		   translateX(-11.46%)=画像左の透明余白(275/2400)ぶん。scaleの後に掛かるので
		   拡大率に追従し、どの段階でも人物が左端に寄る（全身表示時のみ右に余白ぶんの隙間が出る）。 */
		/* --hero-shift: スクロール開始から右へスライドしてはけていくぶん（main.jsが設定）。
		   倍率は2.2で固定（縮小演出なし） */
		transform: translateX(var(--hero-shift, 0px)) scale(var(--hero-scale, 2.2)) translateX(-11.46%);
		transform-origin: 0 0;      /* 左上を基準に拡大・縮小（左端は常に見切れない） */
		will-change: transform;
	}
	/* タイトルは画面幅いっぱいの等倍。sticky で固定ヘッダー下に留め、写真の縮小中は位置固定。
	   縮小しきったら --title-shift（main.jsが設定）で上へ流して自然に画面外へ退場 */
	.hero__title {
		position: sticky;
		top: 72px;            /* 固定ヘッダー(64px)のすぐ下 */
		left: auto;
		z-index: 1;           /* 人物の背面（PCと同じ前後関係） */
		width: 100%;
		max-width: none;
		padding: 8px 12px 0;
		margin: 0;
		transform: translateY(var(--title-shift, 0px));
		will-change: transform;
	}
	/* モーション削減・PC幅では is-static でズームを止め、全身を静止表示（下は切れない）。
	   sticky/ビューポート高も解除して余白を残さない */
	.hero__photo.is-static { position: static; height: auto; }
	.hero__photo.is-static img { transform: none; }

	/* ---- プロフィール ---- */
	/* ヒーロー(z-index:2)の「背面」(z-index:1)に引き上げて重ねる。
	   ヒーローのクロップ枠は透明（下記）なので、縮んでいく人物の後ろから
	   次のセクションの写真が育ちながら現れて見える。引き上げ量=被せ量（お好みで調整可）。 */
	.profile {
		padding: 30px 0 60px;
		position: relative;
		z-index: 1;
		margin-top: -110vh;    /* svh非対応フォールバック */
		margin-top: -110svh;   /* ヒーローpin末尾に重ねる被せ量 */
		border-top: none;      /* SPはトップ（ヒーロー）直下の線を消す */
	}
	.profile__inner { grid-template-columns: 1fr; gap: 26px; }
	/* SP: 写真を画面中央でpinし、スクロールに応じて拡大→解放して本文と一緒に流れる。
	   track の高さ（pin距離）と写真の top（中央合わせ）は main.js が設定する。 */
	.profile__photo-track { display: block; position: relative; }
	.profile__photo {
		position: sticky;
		top: 15vh;            /* JSが中央に再設定。フォールバックで概ね中央 */
		max-width: 260px;
		margin: 0 auto;
		transform: scale(var(--profile-scale, .15)); /* 既定=開始倍率（JS実行前の一瞬に大きく出ないように） */
		transform-origin: 50% 50%;
		will-change: transform;
		z-index: 3;
	}
	/* PC用のカラム区切り線（写真右の縦線）は1カラムでは不要 */
	.profile__photo img { border-right: none; padding-right: 0; margin-right: 0; }
	/* reduced-motion・PC幅では pin/拡大を止めて通常表示 */
	.profile__photo.is-static { position: static; transform: none; }
	/* PC用の上余白128pxは1カラムでは過大 */
	.profile__body { padding: 12px 0 0; }
	/* 「Tenjiku Kawahara とは？」が1行に収まるよう縮小（小型端末では vw で追従、最大23px） */
	.profile__heading { font-size: min(23px, 6.2vw); text-align: center; }
	.tags { justify-content: center; }
	.profile__text { font-size: 14px; }

	/* ---- アドバイス欄（SPは縦並び：ラベルの下に本文） ---- */
	.advice .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%; /* PC用の margin:0 で左寄りになるのを打ち消し全幅で中央に */
	}
	.advice__label {
		font-size: 15px;
		letter-spacing: .12em;
		text-align: center;
		border-right: none;  /* PC用の縦区切り線は不要 */
		margin-right: 0;
		padding: 14px 0 6px;
	}
	/* 本文は中央に置いた箱の中で左揃え（短い1行なら中央に見え、複数行でも行頭がそろって読みやすい） */
	.advice__body {
		max-width: 100%;
		font-size: 14px;
		line-height: 1.9;
		letter-spacing: .06em;
		text-align: left;
		padding: 0 20px 16px;
	}

	/* ---- 共通セクション見出し（SVGアウトライン見出しのサイズ調整） ---- */
	.sec-head { margin-bottom: 36px; }
	.sec-head__en { font-size: 38px; }
	.sec-head__ja { font-size: 15px; letter-spacing: .2em; }
	.sec-head__svg { height: 34px; }
	/* 白箱＋背面ワインバー（PCと同じ構造）を画面中央に。サイズだけ絞る */
	.sec-head--left { justify-content: center; }
	.sec-head__bar { gap: 12px; padding: 0 16px 0 12px; }
	.sec-head--left .sec-head__en { font-size: 24px; padding: 9px 16px; }
	.sec-head--left .sec-head__svg { height: 22px; }
	.sec-head--left .sec-head__ja { font-size: 12px; letter-spacing: .14em; }

	/* ---- INFO's ---- */
	.info { padding: 56px 0; }
	/* 4列前提の全幅罫線は無効化し、各カードを四辺の枠で囲んで間隔を空ける */
	.info::after,
	.info__grid::before,
	.info__grid::after { content: none; }
	.info__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 12px;
	}
	.info-card {
		border: 1px solid var(--line);
		padding: 10px 10px 16px;
	}
	.info-card__thumb img { height: auto; border: none; } /* 2列表示は横線がないので比率どおり。枠はカード側が担当 */
	.info-card__caption { min-height: 0; font-size: 12px; margin: 12px 6px 10px; }
	.info-card__label { font-size: 20px; padding: 3px 16px; }

	/* ---- LINK PAGE's ---- */
	.links { padding: 50px 0 70px; background-size: 32px 32px; } /* 方眼もモバイル向けに縮小 */
	.links__grid { flex-wrap: wrap; gap: 18px; }
	/* 見た目の上下余白を均等に。上はINFO側padding-bottom(56)が下のLINK側(50)より大きい分＋
	   アイコン画像の上余白ぶん、padding-topを詰めて相殺する（実測 上69/下62px → 揃える） */
	.links__icons { padding: 13px 0 20px; gap: 40px; justify-content: center; }
	.spin-icon { height: 54px; }
	.link-card { width: 44%; margin-top: 0 !important; margin-left: 0 !important; }
	/* SPはカード幅44%基準でラベルを再調整（1行のままカード内に収める） */
	.link-card__soon { font-size: min(18px, 4.8vw); }

	/* ---- ギャラリー（SPは写真を最上部に。見出し・本文は写真に重ねる） ---- */
	.gallery { padding: 50px 0 70px; }
	.gallery__inner {
		display: flex;          /* gridをやめて素直な縦積みに */
		flex-direction: column;
		gap: 28px;
		width: 100%;
	}
	/* grid/flexの子が中身の最小幅で膨らんで右にはみ出すのを防ぐ */
	.gallery__left,
	.gallery__center { min-width: 0; width: 100%; }
	.gallery__center {
		order: -1;             /* 写真を一番上へ */
		margin-left: 0;        /* 1カラムではPC用の追加余白は不要 */
		position: relative;    /* 見出し・本文の重ね基準 */
	}
	/* 2枚の幅をgapぶん差し引いて、他の全幅要素（ACCESS・地図・写真）と左右端を揃える */
	.gallery__subimgs img { width: calc(50% - 7px); min-width: 0; }
	.access__list li { width: auto; }
	/* SPは横長だと地図が低く見づらいので縦を大きめに */
	.access__map iframe { aspect-ratio: 4 / 3; }
	/* 見出し・本文は重ねず、写真のすぐ下にくっつけて配置 */
	.gallery__heading,
	.gallery__text {
		position: static;
		transform: none;
		width: 100%;
		max-width: 100%;
		margin: 0;
		border-top: none;   /* 上の要素と線を共有して隙間なく連結 */
	}
	.gallery__heading {
		font-size: min(14px, 3.4vw);
		padding: 10px 12px;
		letter-spacing: .06em;
		text-align: center;
	}
	.gallery__text {
		font-size: min(12px, 3vw);
		line-height: 1.8;
		padding: 10px 12px;
	}
	/* 縦書きGALLERYは写真の右端に重ねる */
	.gallery__inner { position: relative; }
	.gallery__vertical {
		position: absolute;
		top: 14px;
		right: 18px;   /* 写真の右端に合わせる */
		z-index: 4;
		padding: 12px 7px;
	}
	.gallery__vertical-svg { width: 28px; }

	/* ---- SNS's ---- */
	.sns { padding: 56px 0; }
	.sns__list { gap: 16px; }
	.sns__list a { width: 62px; height: 62px; }

	/* ---- YOUTUBE（SPはメイン動画1つだけ表示） ---- */
	.youtube { padding: 0 0 70px; }
	.youtube__inner { grid-template-columns: 1fr; gap: 0; }
	.youtube__main { order: -1; }
	.youtube__tag { left: 50%; transform: translateX(-50%); }
	/* サイドのサムネは非表示。ただし Next → リンクは残す */
	.youtube__side--prev { display: none; }
	.youtube__side--next {
		display: block;
		/* .container の左右padding(18px)を右だけ打ち消し、Nextを画面右端いっぱいに寄せる */
		margin: 0 -18px 0 0;
		max-width: none;
	}
	.youtube__side--next .yt-thumb { display: none; }
	/* margin-left:auto は button 版（display:blockでも幅が内容に縮み左に寄る）を右へ押し出すため。
	   全幅になる a 版には text-align:right が効く（margin-left:auto は無害） */
	.youtube__next { display: block; text-align: right; margin-top: 18px; margin-left: auto; }

	/* ---- フッター ---- */
	.site-footer { padding: 50px 0 40px; }
	.site-footer__blob { padding: 24px 28px 20px; }
	.site-footer__title { font-size: 30px; }
	.site-footer__title-svg { height: auto; width: 76%; } /* ブロブ幅に収める */
	.site-footer__lead { font-size: 12px; }
	.footer-nav__main { gap: 14px 22px; font-size: 14px; margin-bottom: 22px; }
	.footer-nav__sub { flex-direction: column; gap: 12px; align-items: center; margin-bottom: 40px; }
	/* 2カラムだと住所などで値の幅が潰れるため、ラベルの下に値を積む */
	.footer-company {
		grid-template-columns: 1fr;
		gap: 0;
		padding-top: 28px;
		margin-bottom: 34px;
	}
	.footer-company dt { margin-top: 14px; }
	.footer-company dt:first-child { margin-top: 0; }

	/* ---- 下層ページ共通 ---- */
	.page-en { font-size: 38px; }
	.page-head { margin: 44px 0 40px; }
	.page-head__ja { font-size: 20px; }

	/* 404 */
	.error-page { padding: 56px 0 80px; }
	.error-page__code { font-size: 88px; }
	.error-page__title { font-size: 40px; }
	.error-page__msg { font-size: 17px; margin-top: 22px; }
	.error-page__back { font-size: 18px; padding: 14px 48px; margin-top: 36px; }

	/* THANK YOU */
	.thankyou { padding: 60px 0 80px; }
	.thankyou__lead { font-size: 24px; margin: 34px 0 28px; }
	.thankyou__msg { font-size: 14px; }

	/* お仕事依頼フォーム */
	.job-request .page-head__ja { font-size: 22px; }
	.job-request__lead { font-size: 14px; }
	.jr-form__row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
	.jr-form__row .wpcf7-not-valid-tip { grid-column: auto; margin-top: -2px; }
	.jr-form__send { font-size: 24px; padding: 14px 60px; }

	/* 規約系 */
	.legal__box { padding: 32px 22px; }
	.legal__intro,
	.legal__box p,
	.legal__list li { font-size: 14px; }

	/* INFO（投稿一覧） */
	.info-page__hero img { max-height: 340px; }
	.info-tabs { margin-bottom: 50px; }
	.info-tabs__item a { padding: 16px 0; font-size: 17px; letter-spacing: .06em; }
	.article-list { gap: 40px; }
	.article { grid-template-columns: 70px 1fr; gap: 18px; }
	.article__thumb img { width: 70px; height: 70px; }
	.article__title { font-size: 17px; }

	/* 投稿詳細 */
	.single-info { padding: 50px 0 80px; }
	.single-info__title { font-size: 22px; }
	.single-info__body { font-size: 15px; }
}

/* =========================================================
   レスポンシブ : 小型スマートフォン (~430px)
   ========================================================= */
@media (max-width: 430px) {
	/* 横1本の見出しが320px級でも収まるようさらに縮小 */
	.sec-head--left .sec-head__svg { height: 19px; }
	.sec-head--left .sec-head__en { padding: 8px 13px; }
	.sec-head--left .sec-head__ja { font-size: 11px; }
	.sec-head__bar { gap: 10px; padding: 0 13px 0 10px; }

	/* 1列でも各カードの四辺枠＋間隔で統一 */
	.info__grid { grid-template-columns: 1fr; gap: 20px; }
	.link-card { width: 47%; } /* スマホでも2列でPCの並び感を保つ */
	.info-tabs__item a { font-size: 14px; }
	.sec-head__en { font-size: 32px; }
	.error-page__code { font-size: 72px; }
}