/* =========================================================
   となりの専門家 メインスタイル
   -----------------------------------------------------
   デザイントークン(色・フォント)はデザイナー確定値が来たら
   :root の変数を差し替えるだけで全体に反映されます。
   ======================================================= */

:root {
	--green:        #2fb585; /* デザイナー確定メイングリーン */
	--green-dark:   #2e9670;
	--green-pale:   #e4f3eb;
	--cream:        #fbfbfb; /* ベース背景: ほぼ白(カンプ実測 #fbfbfb〜#ffffff) */
	--paper-line:   rgba(0, 0, 0, 0.05); /* 方眼線(ニュートラルグレー) */
	--ink:          #3a3a3a;
	--ink-light:    #777;
	--white:        #fff;
	--radius-l:     24px;
	--radius-m:     14px;
	--radius-s:     8px;
	--font-base:    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
	--font-hand:    "Yomogi", "Zen Maru Gothic", cursive; /* 手書き風(仮) */
	--header-h:     96px;
	--content-w:    1080px;
	--frame-w:      1600px; /* レイアウト全体の最大幅(超ワイド画面対策) */
	--shadow-card:  0 6px 18px rgba(60, 90, 70, 0.10);
}

/* ---------- リセット & ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	overflow-x: clip; /* 右端ブリード配置によるスクロールバー分のはみ出し防止 */
	background-color: var(--cream);
}
body {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 2;
	/* 方眼紙背景はページ全体に適用(セクション単位だと途切れるため)。
	   1pxグラデーション線はズーム倍率によって帯状に消えるため、SVGタイルで描画 */
	background-color: var(--cream);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M27.5 0v28M0 27.5h28' fill='none' stroke='%23000000' stroke-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 28px 28px;
	-webkit-font-smoothing: antialiased;
}
/* TOPはFigmaの1728pxキャンバスを基準に組んでいるため、超横長画面で背景だけが際限なく
   広がらないよう、表示キャンバスを一般的なワイド上限に収める。固定メニューoverlayは
   position:fixedのため従来どおりブラウザ全面を覆う。 */
body.home {
	max-width: 1920px;
	margin-inline: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { opacity: 0.8; }
ul, ol { padding-left: 1.4em; }
figure { margin: 0; }

/* 方眼紙背景: body側に全面適用済みのため、.paper は透過(クラスは互換のため残置) */
.paper {
	background: transparent;
}

/* 手書き風テキスト(画像支給までの代替) */
.hand { font-family: var(--font-hand); }

/* ---------- 汎用パーツ ---------- */
/* ボタン: 明るい緑のフラットなピル(カンプ準拠・立体影なし) */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.85em 2.8em;
	border-radius: 999px;
	background: var(--green);
	color: var(--white);
	font-weight: 700;
	font-size: 1.2rem;
	transition: opacity 0.15s, transform 0.15s;
}
.btn-primary:hover { opacity: 0.85; transform: translateY(1px); }
.btn-primary__arrow {
	display: inline-grid;
	place-items: center;
	width: 1.6em; height: 1.6em;
	line-height: 1; /* 継承した大きな行高で矢印グリフが白丸内で下寄りになるのを防ぎ上下中央に */
	border-radius: 50%;
	background: var(--white);
	color: var(--green);
	font-weight: 700;
}

.tns-pill {
	display: inline-block;
	padding: 0.1em 0.9em;
	margin: 2px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-size: 0.78rem;
	line-height: 1.8;
}
/* 人柄タグ(interview I-2のみ使用): グレー塗り＋緑「#」＋濃色文字・枠なし(design準拠)。
   base .tns-pill は archive/term-pills/tag-search 共有のため触らず、--hash 修飾子で完結させる。 */
.tns-pill--hash {
	background: #f0f0f0;
	border: none;
	color: var(--ink);
	font-size: 0.9rem;
	padding: 0.35em 1.1em;
}
.tns-pill--hash span { color: var(--green); font-weight: 700; } /* 「#」だけ緑 */
/* B-2: I-2(どんな人？)の人柄タグのみ design比に拡大(高さ約60px)。
   base .tns-pill/.tns-pill--hash は他所(archive/term-pills/tag-search等)と共有のため不変のまま、
   .interview-person 配下限定のスコープ修飾で完結させる。
   ※design のピルは角丸長方形(radius≈14px)だが、現行カプセル形状(999px)は今回変更しない(要デザイナー確認)。 */
/* 暫定対応: 固定px(26px/14px 24px)だとframe-wが1600px未満に縮んだ際に相対的に
   過大になり短いタグの組が1行に収まらず折り返る。vw基準のclampで1600px以上は
   従来どおり(26px/14px 24px)を維持しつつ、それ未満は比例縮小(下限16px/9px 15px)。
   ※SP/レスポンシブの全体方針が決まったら再調整前提の応急対応(HANDOFF参照)。 */
.interview-person .tns-pill--hash {
	font-size: clamp(16px, 1.625vw, 26px);
	padding: clamp(9px, 0.875vw, 14px) clamp(15px, 1.5vw, 24px);
	line-height: 1.25;
}

.tns-area-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.1em 0.9em;
	border-radius: 999px;
	background: var(--white);
	border: 1px solid var(--green);
	color: var(--green-dark);
	font-size: 0.78rem;
}
.tns-icon-pin { width: 0.9em; height: 0.9em; fill: var(--green); }

/* セクション見出し */
.section-title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 0.8em;
}
.section-title--dot {
	position: relative;
	padding-left: 1.6em;
}
.section-title--dot::before {
	content: "";
	position: absolute;
	left: 0; top: 0.18em;
	width: 1.1em; height: 1.1em;
	background: var(--green);
	border-radius: 50%;
	/* ギザギザ円(花形)風 */
	clip-path: polygon(50% 0%, 61% 9%, 75% 7%, 81% 19%, 94% 24%, 93% 38%, 100% 50%, 93% 62%, 94% 76%, 81% 81%, 75% 93%, 61% 91%, 50% 100%, 39% 91%, 25% 93%, 19% 81%, 6% 76%, 7% 62%, 0% 50%, 7% 38%, 6% 24%, 19% 19%, 25% 7%, 39% 9%);
}
.section-title--bar {
	border-left: 6px solid var(--green);
	padding-left: 0.6em;
}
/* 濃色テキスト＋左肩に緑の有機ブロブを覗かせる見出し(Aboutページ等)
   ※将来デザイナー支給のブロブSVGが来たら背景画像に差し替え前提。今回はCSSで再現。 */
.section-title--label {
	position: relative;
	z-index: 0; /* ::before(z-index:-1)を見出し内に閉じ、背景の上・テキストの下に置く */
	display: inline-block;
	font-size: 1.3rem;
	/* テキストは濃色(--ink)を継承。ピル背景・白文字は撤去 */
}
.section-title--label::before {
	content: "";
	position: absolute;
	left: -0.3em; top: -0.18em;
	width: 1.95em; height: 1.95em;
	background: rgba(47, 181, 133, 0.55); /* --green(#2fb585)の半透明 */
	border-radius: 62% 38% 55% 45% / 55% 45% 58% 42%; /* 滑らかな有機ブロブ */
	z-index: -1;
}
.section-title--hand { position: relative; }
.section-title__squiggle { width: 120px; margin-top: 8px; }

.u-underline {
	display: inline;
	background: linear-gradient(transparent 88%, var(--ink) 88%);
	font-weight: 700;
}
.u-green { color: var(--green-dark); font-weight: 700; }

/* パンくず */
.tns-breadcrumb { font-size: 0.72rem; color: var(--ink-light); margin-bottom: 2em; }
.tns-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4em; list-style: none; padding: 0; margin: 0; }
.tns-breadcrumb li + li::before { content: "/"; margin-right: 0.4em; color: var(--ink-light); }
.tns-breadcrumb a { color: var(--ink-light); text-decoration: underline; }

/* 手書き矢印(あしらい) */
.doodle-arrow { width: 70px; }

/* =========================================================
   ヘッダー
   ======================================================= */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 50;
	/* ヘッダー内容を frame-w(1600) の枠に収め中央寄せ(コンテンツと同基準)。
	   >1600 でロゴ=枠左上・ハンバーガー=枠右上に揃う。≤1600 は全幅で従来どおり。
	   padding-topはdesign実測(canvas1728基準・ロゴy85)をvw比例(85/1600*100=5.3125vw)で
	   反映(旧24pxは上に寄りすぎていたため引き下げ)。floorは旧値の24pxを維持。 */
	max-width: var(--frame-w);
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: clamp(24px, 5.3125vw, 85px) 28px 24px;
	pointer-events: none;
}
.site-header a, .site-header button { pointer-events: auto; }
/* ロゴ: design実測(canvas1728基準)で697x152・vw係数40.3vw(=697/1728*100、1728px前後で
   実寸に到達)。floorはCowork指定の300px。1440pxで約581px相当になることを確認済み。 */
.site-logo img { width: clamp(300px, 40.3vw, 697px); height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
/* タグライン: design実測(canvas1728・箱寸法整合で確定)で1段目ピル幅390px=font18px×19文字+
   左右padding24px相当(18*19+24*2=390と厳密に一致)。
   ※前回「font約21px」はcopy.svg等の間接換算による誤りだったため破棄し、この箱寸法整合の
   実測を正とする。letter-spacingは0(前回の0.02em=計測時0.42px相当は誤りのため撤去)。
   コンテナはwidth:fit-content(1段目の自然幅に追随)とし、2段目「あの人の物語」の
   margin-leftは1段目の実幅に対する比率として維持(固定pxのコンテナ幅に依存しないため
   font-size変更後も比率がずれない)。 */
.site-tagline {
	position: relative;
	width: fit-content;
	/* ロゴ下端→コピー上端の間隔: 指示値12px(1728時)をdesign-ref/top.jpgで直接ピクセル計測した
	   ところ実際は約38px(ロゴ白ピクセル下端y213・ピル上端y251)だったため、実測値を正として
	   採用(vw係数はロゴ/fontと同じ1728canvas基準: 38/1728*100=2.1991vw)。 */
	margin: clamp(12px, 2.1991vw, 38px) 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}
.site-tagline__chip {
	display: inline-block;
	width: fit-content;
	padding: 0.73em 1.3333em;
	background: rgba(255, 255, 255, 0.85);
	color: var(--ink);
	font-weight: 700;
	font-size: clamp(13px, 1.125vw, 18px);
	letter-spacing: 0;
	line-height: 1.2;
	border-radius: 999px;
	white-space: nowrap;
}
/* 2段目「あの人の物語」: design実測でピル2左端=ピル1左端+310px相当(≒ピル1幅390pxの80%位置、
   310/390=79.4872%)。1段目の実幅に対する比率のため中間幅にも追随。 */
.site-tagline__chip--sub { margin-left: 79.4872%; }

/* design実測(Figma 120x120@1728canvas=6.9444vw、1440pxで100pxのチェックポイント一致)。
   吹き出し等と同じbubble-texture.pngの::afterオーバーレイ(opacity0.55起点)+内側に白dotted円
   (::before・円径の4.17%インセット)。旧来の外周solid白borderは撤去(designは外周なし)。 */
.menu-toggle {
	/* Figma PC: 1728px canvasで120px円を右・上30pxに固定。 */
	position: fixed;
	top: clamp(20px, 1.7361vw, 30px);
	right: clamp(20px, 1.7361vw, 30px);
	z-index: 100;
	width: clamp(60px, 6.9444vw, 120px); height: clamp(60px, 6.9444vw, 120px);
	border: none;
	border-radius: 50%;
	background: var(--green);
	color: var(--white);
	font-family: var(--font-base);
	cursor: pointer;
	display: block;
	padding: 0;
	overflow: hidden;
}
.menu-toggle::before {
	content: "";
	position: absolute;
	inset: 4.17%;
	border: 2px dotted var(--white);
	border-radius: 50%;
	pointer-events: none;
}
.menu-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: url("../img/bubble-texture.png");
	background-size: 250px 250px;
	opacity: 0.55;
	pointer-events: none;
}
.menu-toggle__bars {
	position: absolute;
	left: 33.3333%;
	top: 26.6667%;
	z-index: 1;
	display: block;
	width: 35%;
	height: 25.5769%;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 15.7923%;
	border-radius: 999px;
	background: var(--white);
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0);
	transition: opacity 0.2s, transform 0.25s;
}
/* 手書き風3本(menu-line-a/b.svg)。1本目=line-a、2・3本目=line-bをそのまま/scaleX(-1)反転で
   使い分け、3本の見た目に変化をつける(design実測どおり)。preserveAspectRatio=noneのSVGのため
   aspect-ratioを明示して歪みを防止(check-doodle.svg等と同じ注意点)。 */
.menu-toggle__bar {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 15.7923%;
	transition: transform 0.25s, opacity 0.25s;
}
.menu-toggle__bar:nth-child(1) { top: 0; }
.menu-toggle__bar:nth-child(2) { top: 42.1179%; transform: scaleX(-1); }
.menu-toggle__bar:nth-child(3) { top: 84.2358%; }
.menu-toggle__bar--flip { transform: scaleX(-1); }
.menu-toggle__label {
	position: absolute;
	left: 27.5%;
	top: 61.12%;
	z-index: 1;
	width: 45.8333%;
	font-size: clamp(10px, 1.1574vw, 20px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}
.menu-toggle__label::before { content: "MENU"; }
.menu-toggle.is-open .menu-toggle__bar { opacity: 0; }
.menu-toggle.is-open .menu-toggle__bars::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bars::after { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg); }
.menu-toggle.is-open .menu-toggle__label::before { content: "CLOSE"; }

.global-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(47, 138, 96, 0.96);
	display: grid;
	place-items: center;
}
.global-menu[hidden] { display: none; }
.global-menu__list { list-style: none; padding: 0; margin: 0; text-align: center; }
.global-menu__list a {
	display: block;
	padding: 0.6em 2em;
	color: var(--white);
	font-size: 1.3rem;
	font-weight: 700;
}

/* =========================================================
   TOP: ヒーロー
   ======================================================= */
.hero { position: relative; }
.hero__slide {
	position: relative;
	height: min(86vh, 760px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hero__slide::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.25), transparent 35%);
}
/* FV情報カード: Figma PC card(520×222px / 1728px canvas)を比例配置する。 */
.hero__card {
	--hero-card-unit: clamp(0.625px, 0.0578704vw, 1px);
	position: absolute;
	right: calc(28 * var(--hero-card-unit));
	bottom: calc(50 * var(--hero-card-unit));
	z-index: 2;
	display: block;
	width: calc(520 * var(--hero-card-unit));
	height: calc(222 * var(--hero-card-unit));
	min-width: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.85);
	border-radius: calc(50 * var(--hero-card-unit));
	box-shadow: none;
	color: var(--ink);
}
.hero__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.5);
	pointer-events: none;
}
.hero__card-name,
.hero__card-tags,
.hero__card-area,
.hero__card-check { z-index: 1; }
.hero__card-name {
	position: absolute;
	left: calc(60 * var(--hero-card-unit));
	top: calc(40 * var(--hero-card-unit));
	font-size: calc(26 * var(--hero-card-unit));
	font-weight: 700;
	line-height: normal;
	color: var(--green);
}
.hero__card-tags {
	position: absolute;
	left: calc(60 * var(--hero-card-unit));
	top: calc(98 * var(--hero-card-unit));
	display: flex;
	align-items: center;
	gap: calc(10 * var(--hero-card-unit));
}
.hero__card .tns-pill {
	min-width: calc(100 * var(--hero-card-unit));
	margin: 0;
	padding: calc(10 * var(--hero-card-unit));
	font-size: calc(14 * var(--hero-card-unit));
	line-height: normal;
	text-align: center;
}
.hero__card-area {
	position: absolute;
	left: calc(60 * var(--hero-card-unit));
	top: calc(158 * var(--hero-card-unit));
}
/* エリアは枠線なしの「緑ピン+テキスト」のみ */
.hero__card .tns-area-pill {
	gap: calc(1.5 * var(--hero-card-unit));
	border: none;
	background: transparent;
	padding: 0;
	font-size: calc(16 * var(--hero-card-unit));
	font-weight: 700;
	line-height: normal;
	color: #333;
}
.hero__card .tns-icon-pin {
	width: calc(24 * var(--hero-card-unit));
	height: calc(24 * var(--hero-card-unit));
	fill: #333;
}
/* FVチェック手書き(assets/img/check-doodle.svg): design実測(カード520x222基準)で
   left76.5%/top61.7%・約82x65px、カード右下角に少しはみ出す配置。%指定でカードの
   実サイズ変動(内容量・レスポンシブ)にも追随させる。 */
.hero__card-check { position: absolute; left: 76.54%; top: 61.72%; width: 15.7692%; aspect-ratio: 82 / 64.9811; }

/* ページャーはFV写真内・左下に重ねる配置(design実測: canvas1728・FV高765基準で
   left≈72px=4.1667vw・写真下端から約40px上=bottom:40px、以前の「帯の上」配置から変更)。
   矢印はFigma書き出しpager-arrow.svg(22x18・白抜き線)を<img>で使用、右向きはscaleX(-1)で反転。
   数字/スラッシュはdesignどおり素の白文字(text-shadowなし、可読性は野口さんの目視判断待ち)。 */
.hero__pager {
	position: absolute;
	left: 4.1667vw; bottom: 40px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--white);
	letter-spacing: 0.05em;
}
.hero__nav {
	display: inline-flex;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.hero__nav img { display: block; width: 22px; height: 18px; }
.hero__nav--next img { transform: scaleX(-1); }
.hero__fraction { font-size: 21px; letter-spacing: 0.05em; }
.hero__empty-note { padding: 8rem 2rem; text-align: center; color: var(--ink-light); }

/* =========================================================
   TOP: セクション共通・カルーセル
   ======================================================= */
.home-section { padding: 72px 0 48px; }
.home-section__title { text-align: center; font-size: 1.6rem; margin: 0 0 1.8em; }
/* 見出し混植タイポグラフィ(漢字大・かな小): design-ref/top.jpg実測(漢字ブロック高さ約36-37px・
   「の」約28px・「たち」約32px)。「専門家へのインタビュー」は実測差が1-2pxで計測誤差の範囲
   だったが、野口さんの指示により①②と同じ比率(かな≈78%)を強制適用し統一。base .section-title/
   .home-section__titleは不変、子spanでfont-sizeのみ上書き。 */
.home-section__title .htitle-lg { font-size: clamp(28px, 2.25vw, 36px); }
.home-section__title .htitle-md { font-size: clamp(25px, 2vw, 32px); }
.home-section__title .htitle-sm { font-size: clamp(22px, 1.75vw, 28px); }
/* design実測(Figma node 4144:2132)でletter-spacing +3.4px(40px基準≒0.085em)。TOPの2見出しのみ
   スコープ(base .section-title/.home-section__titleは不変)。本文・タグ・CTA等はdesignもベタ組み
   のため対象外。 */
.home-experts .home-section__title,
.home-interviews .home-section__title { letter-spacing: 0.085em; }
.home-section__empty { text-align: center; color: var(--ink-light); }

/* 専門家・インタビューのセクションは白背景+淡緑の円形あしらい。輪は色・内径が
   ノードごとに異なるため、FigmaのExclude書き出しを個別に使う。 */
.home-experts,
.home-interviews { background: var(--white); position: relative; overflow: hidden; }
.home-experts::before,
.home-experts::after,
.home-interviews::before,
.home-interviews::after { content: ""; position: absolute; pointer-events: none; }
.home-experts::before { left: -140px; top: 80px; width: 400px; height: 400px; background: url("../img/decor-ring-experts-left.svg") no-repeat center / 100% 100%; }
.home-experts::after { right: -150px; top: -320px; width: 550px; height: 550px; background: url("../img/decor-ring-experts-large.svg") no-repeat center / 100% 100%; }
.home-interviews::before {
	left: max(-172px, -9.9537vw);
	top: 0;
	width: clamp(198px, 25.463vw, 440px);
	height: clamp(198px, 25.463vw, 440px);
	background: url("../img/decor-ring-interviews-left.svg") no-repeat center / 100% 100%;
}
.home-interviews::after { right: -110px; bottom: -20px; width: 340px; height: 340px; background: url("../img/decor-ring-interviews-right.svg") no-repeat center / 100% 100%; }
.home-experts__decor-small { display: none; }
.home-section__title,
.carousel { position: relative; z-index: 1; }

.carousel { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 64px; }
.carousel .swiper { padding: 10px 4px 30px; }
/* カルーセル矢印は緑のシェブロンのみ(カンプ準拠) */
.carousel__nav {
	position: absolute;
	top: 38%;
	z-index: 5;
	width: 48px; height: 48px;
	border: none;
	background: transparent;
	color: var(--green);
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
}
.carousel__nav--prev { left: 8px; }
.carousel__nav--next { right: 8px; }

/* 専門家カード */
.expert-card { text-align: center; position: relative; }
.expert-card__link { display: grid; justify-items: center; gap: 8px; color: var(--ink); }
/* 専門家番号は投稿メタの動的テキスト、背景だけをFigma書き出し形状にする。
   Figmaの4カードはA/B/C/Aの3形状(Group346/347/348/349)なので、表示順で3種を循環する。 */
.expert-card__no {
	--expert-badge-image: url("../img/badge-shape-a.png");
	position: absolute;
	left: -4px; top: 9px;
	z-index: 2;
	display: grid; place-items: center;
	width: 93px; height: 93px;
	color: var(--white);
	font-size: 28px;
	font-weight: 700;
}
.expert-card__no::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--expert-badge-image) no-repeat center / contain;
}
.home-experts .swiper-slide:nth-child(4n+2) .expert-card__no,
.card-grid > .expert-card:nth-child(4n+2) .expert-card__no { --expert-badge-image: url("../img/badge-shape-b.png"); }
.home-experts .swiper-slide:nth-child(4n+3) .expert-card__no,
.card-grid > .expert-card:nth-child(4n+3) .expert-card__no { --expert-badge-image: url("../img/badge-shape-c.png"); }
/* 点線円リング: Figma書き出しphoto-ring.svg(320x320・circle r160 stroke#C3C3C3 stroke-width4
   stroke-dasharray"1 14"・丸端ドット状で CSSのborder/outline:dashedでは再現不可のためSVGを
   そのまま使用)。写真円300x300はリングに対して10pxインセット。リング(::before・外側の
   .expert-card__photo)と写真クリップ(内側の.expert-card__photo-inner)を分離し、
   overflow:hiddenがリングを切り取らないようにする。 */
.expert-card__photo {
	position: relative;
	width: 320px; height: 320px;
	display: grid;
	place-items: center;
}
.expert-card__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/photo-ring.svg") no-repeat center / contain;
	pointer-events: none;
}
.expert-card__photo-inner {
	position: relative;
	z-index: 1;
	width: 300px; height: 300px;
	border-radius: 50%;
	overflow: hidden;
}
.expert-card__photo-inner img { width: 100%; height: 100%; object-fit: cover; }
.expert-card__arrow { color: var(--green); font-size: 0.7rem; }
.expert-card__name { font-size: 0.85rem; }
.home-experts .expert-card__name {
	font-size: 18px;
	font-weight: 700;
	line-height: 32px;
}
.expert-card__sign img { max-height: 44px; width: auto; margin: 0 auto; }
.expert-card__sign .hand { font-size: 1.3rem; }
.expert-card__tags { margin-top: 8px; }
/* カード下部の横帯あしらい(Figma書き出しcard-divider.svg・band-edge-a.svgと同型の40x18タイル)。
   design実測(Frame305・タグ行下端→帯の間隔約10px)。装飾のみのためaria-hidden相当に::afterで
   実装しPHP側のマークアップ変更は不要(タグ行の幅にそのまま追随)。 */
.expert-card__tags::after {
	content: "";
	display: block;
	margin-top: 10px;
	height: 18px;
	background: url("../img/card-divider-full.png") center / 100% 100% no-repeat;
}

/* T-017: Figmaの1728px canvasではカード列330px・リング320px。TOPだけframe-w(1600)基準で
   比例縮小し、共有カードを使う専門家一覧の既存寸法には波及させない。カード=20.625vw、
   リング=20vwで10px差を維持し、写真はリングの内側10pxインセット(幅差20px)。
   T-016の六角バッジもリング比(93/320、left -4/320、top 9/320)で追随させる。 */
.home-experts .carousel { max-width: var(--frame-w); }
.home-experts .expert-card {
	width: clamp(220px, 20.625vw, 330px);
	margin-inline: auto;
}
.home-experts .expert-card__photo {
	width: clamp(210px, 20vw, 320px);
	height: auto;
	aspect-ratio: 1;
}
.home-experts .expert-card__photo-inner {
	width: calc(100% - 20px);
	height: calc(100% - 20px);
}
.home-experts .expert-card__no {
	left: -1.25%;
	top: 2.8125%;
	width: 29.0625%;
	height: 29.0625%;
	font-size: clamp(18px, 1.75vw, 28px);
}

/* Figma TOP(1728x4022)のセクション境界・カード座標に合わせるdesktop基準。
   1600px未満は既存のclamp/Swiperレスポンシブを維持し、SPキューへ波及させない。 */
@media (min-width: 1600px) {
	.hero__slide { height: 765px; }

	.home-section__title { height: 48px; line-height: 48px; }
	.home-experts {
		height: 902px;
		padding-top: 102px;
		padding-bottom: 0;
	}
	.home-interviews {
		height: 954px;
		padding-top: 68px;
		padding-bottom: 0;
	}
	.home-experts::before {
		left: -71px;
		top: 69px;
		width: 171px;
		height: 171px;
		background-image: url("../img/decor-ring-experts-left.svg");
	}
	.home-experts::after {
		right: -86px;
		top: -412px;
		width: 602px;
		height: 602px;
		background-image: url("../img/decor-ring-experts-large.svg");
	}
	.home-experts__decor-small {
		display: block;
		position: absolute;
		right: -55px;
		top: 616px;
		width: 127px;
		height: 127px;
		background: url("../img/decor-ring-experts-right.svg") no-repeat center / 100% 100%;
		pointer-events: none;
	}
	.home-interviews::before {
		left: -172px;
		top: 0;
		width: 440px;
		height: 440px;
		background-image: url("../img/decor-ring-interviews-left.svg");
	}
	.home-interviews::after {
		right: -93px;
		top: 646px;
		bottom: auto;
		width: 264px;
		height: 264px;
		background-image: url("../img/decor-ring-interviews-right.svg");
	}
	.home-experts .home-section__title { margin-bottom: 60px; }
	.home-interviews .home-section__title { margin-bottom: 47px; }

	.home-experts .carousel,
	.home-interviews .carousel {
		max-width: var(--frame-w);
		padding-inline: 44px;
	}
	.home-experts .carousel .swiper,
	.home-interviews .carousel .swiper {
		left: 1px;
		padding: 10px 0 30px;
	}
	.home-experts .expert-card__no {
		left: -5px;
		top: 6px;
	}
	.home-experts .swiper-slide:first-child .expert-card__no { left: -7px; }

	.home-experts .expert-card__link { gap: 0; }
	.home-experts .expert-card__arrow {
		margin-top: 36px;
		font-size: 16px;
		line-height: 16px;
	}
	.home-experts .expert-card__name {
		margin-top: -6px;
		height: 32px;
		font-size: 18px;
		line-height: 32px;
	}
	.home-experts .expert-card__sign {
		display: grid;
		place-items: center;
		width: 100%;
		height: 64px;
		margin-top: 10px;
	}
	.home-experts .expert-card__sign img { max-height: 64px; }
	.home-experts .expert-card__tags {
		position: relative;
		min-height: 128px;
		margin-top: 10px;
		padding-bottom: 28px;
	}
	.home-experts .expert-card__tags::after {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		margin-top: 0;
	}

	.home-interviews .interview-card {
		width: 330px;
		margin-inline: auto;
	}
	.home-interviews .interview-card__link { gap: 0; }
	.home-interviews .interview-card__photo {
		width: 320px;
		margin-inline: auto;
		overflow: visible;
	}
	.home-interviews .interview-card__photo img { border-radius: var(--radius-l); }
	.home-interviews .interview-card__area { left: 0; top: -10px; height: 44px; }
	.home-interviews .interview-card__arrow {
		margin-top: 35px;
		font-size: 16px;
		line-height: 16px;
	}
	.home-interviews .interview-card__copy {
		display: grid;
		place-items: center;
		height: 124px;
		margin-top: -6px;
	}
	.home-interviews .interview-card__copy img { max-height: 124px; }
	.home-interviews .interview-card__shop {
		height: 32px;
		margin-top: 10px;
		font-size: 18px;
		line-height: 32px;
	}
	.home-interviews .interview-card__tags {
		min-height: 60px;
		margin-top: 10px;
	}
	.home-experts .tns-pill,
	.home-interviews .tns-pill {
		min-width: 100px;
		padding: 10px;
		font-size: 14px;
		line-height: 18px;
	}
	.home-interviews .interview-card__area .tns-area-pill {
		height: 44px;
		padding: 8px;
		font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
		font-size: 16px;
		line-height: 20px;
	}

}

/* Figma TOP frame(1728px)を中央の座標系として扱う。right基準のままだと超横長時に
   リングだけがコンテンツから離れて画面端へ流れるため、1728px以上では原本x座標を
   セクション中央からの固定オフセットへ変換する。1728px時の見た目は不変。 */
@media (min-width: 1728px) {
	.home-experts::before { left: calc(50% - 935px); }
	.home-experts::after { left: calc(50% + 348px); right: auto; }
	.home-experts__decor-small { left: calc(50% + 792px); right: auto; }
	.home-interviews::before { left: calc(50% - 1036px); }
	.home-interviews::after { left: calc(50% + 693px); right: auto; }
}

/* インタビューカード */
.interview-card { text-align: center; }
.interview-card__link { display: grid; justify-items: center; gap: 8px; color: var(--ink); }
.interview-card__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius-l);
	overflow: hidden;
}
.interview-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.interview-card__area { position: absolute; left: clamp(5px, 0.375vw, 6px); top: clamp(5px, 0.375vw, 6px); z-index: 2; }
/* T-009: Figma原本(タグ_04_地域 4144:1738・158x44)確定仕様。base .tns-area-pill(他ページ共有・
   緑文字/実線border)は不変とし、interview-card配下のみ破線+黒文字にスコープ上書き。
   ピンアイコンは原本レンダリングどおり緑を維持(base継承・変更なし)。既存clamp係数方式(floor≈0.778×max・
   1600px基準)でカード幅の中間値に追随。 */
.interview-card__area .tns-area-pill {
	gap: clamp(1.5px, 0.125vw, 2px); /* アイコン左端→テキスト左端26px(=アイコン24px+gap2px) */
	padding: clamp(8px, 0.625vw, 10px);
	border: 2px dashed #c3c3c3;
	color: #333;
	font-weight: 700;
	font-size: clamp(12px, 1vw, 16px);
}
.interview-card__area .tns-icon-pin { width: clamp(19px, 1.5vw, 24px); height: clamp(19px, 1.5vw, 24px); }
.interview-card__arrow { color: var(--green); font-size: 0.7rem; }
.interview-card__copy .hand { font-size: 1.25rem; line-height: 1.5; }
.interview-card__copy img { max-height: 72px; width: auto; margin: 0 auto; }
.interview-card__shop { font-size: 0.85rem; }

/* PCの中間幅でも158×44@1600の比率で地域ラベルを縮小し、写真左上から少し外へ出す。
   SP(720px以下)は専用Figmaタスクの既存配置を維持する。 */
@media (min-width: 721px) and (max-width: 1599px) {
	.home-interviews .interview-card__area {
		left: 0;
		top: calc(-1 * clamp(8px, 0.625vw, 10px));
		height: clamp(39.6px, 2.75vw, 44px);
	}
	.home-interviews .interview-card__area .tns-area-pill {
		height: clamp(39.6px, 2.75vw, 44px);
		padding: clamp(7.2px, 0.5vw, 8px);
		font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
		line-height: clamp(18px, 1.25vw, 20px);
	}
}

/* =========================================================
   タグ検索帯
   ======================================================= */
/* 帯の周囲はdesignどおり無地の白(bodyの方眼紙が透けないように)。TOP/専門家詳細とも同一design。 */
.tag-search { position: relative; padding: 90px 0 70px; text-align: center; background: var(--white); }
/* 吹き出しはFigma書き出しのベクター形状(bubble-shape.svg・しっぽ付き2連吹き出しの一体型パス、
   viewBox 390x168.006)をmask-imageでクリップして再現する。SVG自体は独自の塗り色を持つが
   (band-edge-a/b.svgと同じ var(--fill-0, ...) 方式でページ側--greenを継承しない)、maskは
   形状(透明度)のみを使うため色は無関係。地色はvar(--green)のベタ塗り+bubble-texture.pngの
   ::afterオーバーレイ(既存の多層構造をそのまま流用)。maskは要素の描画内容全体(子要素・疑似要素
   込み)をまとめてクリップするため、::afterに個別のmask/border-radiusは不要。傾きはSVG形状に
   ベイク済みのためCSS側のrotate()は撤去。幅はdesign実測(387px・1600px枠基準)をfloor/max比
   ≈0.78のclampでフレーム追随。 */
.tag-search__bubble {
	position: absolute;
	left: 6%; top: 0;
	z-index: 3;
	width: clamp(301px, 24.1875vw, 387px);
	aspect-ratio: 390 / 168.006;
	background: var(--green);
	-webkit-mask-image: url("../img/bubble-shape.svg");
	mask-image: url("../img/bubble-shape.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.tag-search__bubble::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1; /* .tag-search__bubbleは既にz-index:3でスタッキングコンテキスト確立済みのため、
		ここでは-1のみで「吹き出し背景の上・文字(.tag-search__bubble-top/-main)の下」に収まる。
		T-015: 同じくノイズ::afterが文字に乗って灰色に見える症状を確認したため同修正。 */
	background: url("../img/bubble-texture.png");
	background-size: 250px 250px;
	opacity: 0.55; /* 0.25はタイルが緑地に沈みざらつきがほぼ不可視だったため引き上げ(Cowork実験済み) */
	pointer-events: none;
}
/* テキストはSVGに含まれないため、design実測(bbox比)の位置に絶対配置で重ねる。フォントサイズは
   既存のclamp値を維持(＃=40px相当・本文=23px相当／タグ=45px相当・から探す=31px相当、
   1600px以上)。 */
.tag-search__bubble-top,
.tag-search__bubble-main {
	position: absolute;
	color: var(--white);
	font-weight: 700;
	white-space: nowrap;
}
.tag-search__bubble-top {
	left: 15%; top: 24%;
	transform: translateY(-50%);
	font-size: clamp(18px, 1.4375vw, 23px);
}
.tag-search__bubble-hash { font-size: clamp(31px, 2.5vw, 40px); }
/* Cowork実測(design比%、シェイプ390x168基準): グリフ左端24.8%・右端91.5%(中心≒58%)・
   垂直中心≒66%。left+widthで実測の左右端そのものを再現しtext-align:centerで中心を合わせる
   (%指定のためシェイプの中間幅変動にも追随)。 */
.tag-search__bubble-main {
	left: 24.8%; width: 66.7%;
	top: 66%;
	text-align: center;
	transform: translateY(-50%);
	font-size: clamp(24px, 1.9375vw, 31px);
}
.tag-search__bubble-tag { font-size: clamp(35px, 2.8125vw, 45px); }

/* 帯本体はFigma書き出しの和紙/布風粒状テクスチャ(band-texture.jpg・250x250タイル・repeat・
   中身はJPEGのため拡張子を.jpgに是正)。高さはtag areaコンポーネント実測(約223px)に合わせ
   min-height指定、内容はflexで縦中央。上下端はレース/ステッチ風の繰り返し装飾ボーダー
   (band-edge-a.svg=上段/band-edge-b.svg=下段の2枚・中身がSVGのため拡張子を.svgに是正。
   旧.png参照ではブラウザが描画せず縁飾りが表示されていなかった)を、ひとつの::before/::after
   に多層background-imageで重ねrepeat-xタイル。下端は同じ::afterをtransform:rotate(180deg)
   で回転配置(design仕様どおり)。旧来の半透明白+cream背景・1px罫線は撤去。 */
.tag-search__band {
	position: relative;
	min-height: 223px;
	display: flex;
	align-items: center;
	background: url("../img/band-texture.jpg") repeat;
	background-size: 250px 250px;
	padding: 28px 0;
	overflow: hidden;
}
.tag-search__band::before,
.tag-search__band::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 30px; /* 上段(band-edge-a)22px + 下段(band-edge-b)8px */
	background-image: url("../img/band-edge-a.svg"), url("../img/band-edge-b.svg");
	background-repeat: repeat-x, repeat-x;
	background-position: top left, bottom left;
	background-size: 40px 22px, 40px 8px;
	pointer-events: none;
}
.tag-search__band::before { top: 0; }
.tag-search__band::after { bottom: 0; transform: rotate(180deg); }
.tag-search__list {
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: clamp(24px, 2.5vw, 40px); /* design比: タグ間40px(1600px以上)、それ未満は比例縮小 */
	padding: 0; margin: 0;
	width: max-content;
	animation: tns-marquee 30s linear infinite;
}
.tag-search__band:hover .tag-search__list { animation-play-state: paused; }
@keyframes tns-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* タグテキスト: design比で「#」40px/タグ名26px相当(1600px以上)。中間幅はピル(B-2)と同じ
   考え方でclampしフレームに追随させる(暫定・SP/レスポンシブフェーズで再調整前提)。 */
.tag-search__item { color: var(--ink); font-weight: 700; font-size: clamp(16px, 1.625vw, 26px); white-space: nowrap; }
/* margin-right: Figmaの34pxは「#左端→タグ名左端」のオフセット(#グリフ幅約25px込み)であり、
   グリフ後ろの純粋な空きではない。空きだけを再現するには34pxそのままだと間延びして
   #が前のタグに付属して見えるため縮小(clamp(5px,0.55vw,9px)・1600px以上で9px)。 */
.tag-search__hash { color: var(--green); margin-right: clamp(5px, 0.55vw, 9px); font-weight: 900; font-size: clamp(24px, 2.5vw, 40px); }
.tag-search__empty { color: var(--ink-light); margin: 0; }

/* design比: CTAは帯下端に半分重なる配置。transform:translateY(-50%)は自身の高さの半分ぶん
   引き上げるため、ボタンの高さが変わっても常に「中心=帯下端」を保てる(margin-topの固定px
   指定だと高さ変更時にズレる)。 */
.tag-search__cta { margin-top: 0; transform: translateY(-50%); }
/* CTAサイズをdesign比に拡大。base .btn-primary(共有クラス・他ページ多数で使用)は直接変更せず、
   .tag-search__cta 配下スコープでfont-sizeのみ上書き(padding/矢印は.btn-primary側がem単位の
   ため連動して拡大)。 */
.tag-search__cta .btn-primary { font-size: clamp(18px, 1.5vw, 24px); }
/* CTA文言の混植タイポグラフィ(漢字大・かな小)はTOP限定(design実測: 自分/近所/探す=42px・
   の/から=32px、文字色#fdfdfd)。他テンプレート(専門家詳細/一覧等)にも .tag-search__cta は
   共有表示されるため、body.home でスコープしTOP以外は上記の既存サイズ(18-24px)のまま不変。
   spanの出力もfront-page.php側でのみ行う(parts/tag-search.phpは無変更)。floor/vw係数は
   既存clamp方式(floor≈0.778×max)。 */
.home .tag-search__cta .btn-primary {
	font-size: clamp(33px, 2.625vw, 42px);
	color: #fdfdfd;
	/* T-018: Figma tag area 4150:5025のCTAは1728px時110px高。継承line-height:2で
	   84pxを占めるため、縦paddingだけを0.31em(各約13px)に詰めて110pxへ合わせる。 */
	padding-block: 0.31em;
}
.home .tag-search__cta .btn-primary .cta-mix-lg { font-size: clamp(33px, 2.625vw, 42px); }
.home .tag-search__cta .btn-primary .cta-mix-sm { font-size: clamp(25px, 2vw, 32px); }
/* 混植spanが5個(cta-mix-lg/sm)+矢印=計6個のflexアイテムになったため、base .btn-primary の
   gap:0.9emが単語間にも入り「自分　の　近所　から　探す」のように間延びしていた(Cowork実測)。
   スコープでgap:0にしベタ組みに戻し、矢印との間隔だけmargin-leftで約34px相当(0.81em@42px)を
   個別に確保する。 */
.home .tag-search__cta .btn-primary { gap: 0; }
.home .tag-search__cta .btn-primary .btn-primary__arrow { margin-left: 0.81em; }
/* CTAノイズ: Figma書き出しのnoise.pngを::afterで重ねる。base .btn-primaryは
   直接変更せず.tag-search__cta配下でposition:relativeを付与しoverlayのみ追加。ボタン色は
   現状の--greenのまま(#2fb585への変更はデザイナー確認待ちのため今回は行わない)。 */
/* z-index:0でスタッキングコンテキストを確立(position:relativeのみではz-index:autoの子と
   非配置コンテンツ(生テキスト等)の重なり順があいまいなため)。これにより::afterのz-index:-1が
   「このボタン自身の背景の上・通常コンテンツ(文字/矢印)の下」に確実に収まる。 */
.tag-search__cta .btn-primary { position: relative; z-index: 0; }
.tag-search__cta .btn-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/noise.png");
	background-size: cover;
	opacity: 0.35; /* 0.15は緑地に沈みざらつきがほぼ不可視だったため引き上げ(Cowork実験済み・吹き出しと同傾向) */
	border-radius: inherit;
	pointer-events: none;
}

/* =========================================================
   TOP: Aboutティザー
   ======================================================= */
.home-about { position: relative; padding: 60px 24px 110px; }
/* Aboutティザーの波線をFigma書き出しabout-loop.svg(1209x279・一筆書きループ曲線・薄グレー
   #E5E5E5)に差し替え。design実測(canvas1728)でx106-1306(=left6.1343%・width69.4444%)、
   セクション上端から133pxの位置。.home-about__inner(テキスト側)より前にDOM配置することで
   z-index指定なしに「背後」を実現(z-index:autoは書字順で決まるため)。%基準で中間幅追随。
   旧.home-about__squiggle(squiggle.svg)はこのセクションでは撤去、single-expert.phpの
   .section-title__squiggleは別クラス・別用途のため無変更。 */
.home-about__loop {
	position: absolute;
	left: 6.1343%; top: 133px;
	width: 69.4444%;
	height: auto;
	pointer-events: none;
}
.home-about__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.home-about__title {
	font-size: 1.35rem;
	border-left: 6px solid var(--green);
	padding-left: 0.7em;
	margin: 0 0 1.2em;
}
.home-about__text {
	margin: 0;
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	font-size: clamp(16px, 1.5046vw, 26px);
	font-weight: 700;
	line-height: clamp(32px, 3.2407vw, 56px);
	color: #333;
}
.home-about__circle {
	position: absolute;
	/* T-023: Figmaの親Group374(340.202×304.541px)を正とする。中央Ellipseだけを基準にした
	   T-019の250px真円CSSは撤去し、かすれリング・円周文字・矢印を含む原本レンダーへ差し替え。 */
	left: calc(23vw + 380px);
	right: auto;
	bottom: -40px;
	transform: translateX(-50%);
	width: clamp(240px, 19.6876vw, 340.202px);
	height: auto;
	aspect-ratio: 340.202 / 304.541;
	display: block;
	line-height: 0;
}
.home-about__circle-image { width: 100%; height: 100%; }

/* =========================================================
   フッター
   ======================================================= */
/* フッターは緑地+「ノイズ2」オーバーレイの多層構造(Figma裏付け)。noise.pngを::beforeで
   重ね(緑地の上・コンテンツの下)、.site-footer__inner(唯一の直接子・全コンテンツを内包)に
   z-index:1を与えて粒がテキスト/白カードに乗らないようにする。全テンプレ共通(footer.php)。 */
.site-footer { position: relative; background: var(--green); color: var(--white); padding: 56px 24px; }
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/noise.png");
	background-size: cover;
	opacity: 0.25;
	pointer-events: none;
	z-index: 0;
}
.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--content-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1.5fr 1fr;
	gap: 40px;
	align-items: center;
}
.site-footer__logo img { width: 240px; }
.site-footer__tagline { font-size: 0.85rem; line-height: 1.9; }
.site-footer__nav { display: flex; gap: 14px; }
.footer-nav-btn {
	flex: 1;
	aspect-ratio: 15 / 11; /* Figma実測180×132(@1728)の比率。footer幅はcontent-w(1080)上限で頭打ちのためvw追随ではなくaspect-ratioで比率のみ追随 */
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 6px;
	padding: 10px 8px;
	background: var(--white);
	border-radius: var(--radius-m);
	color: var(--green-dark);
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.35;
}
.footer-nav-btn__icon { width: 26px; height: 26px; color: var(--green); }
.site-footer__sub { display: grid; gap: 12px; justify-items: start; }
.site-footer__sns { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0; }
.site-footer__sns svg { width: 24px; height: 24px; color: var(--white); }
.site-footer__sns a { color: var(--white); }
.site-footer__privacy { color: var(--white); font-size: 0.8rem; text-decoration: underline; }
.site-footer__copy { font-size: 0.75rem; margin: 0; opacity: 0.85; }

/* TOP desktop後半は、上の共通定義より後でFigmaの絶対座標へ合わせる。 */
@media (min-width: 1600px) {
	.tag-search {
		padding-top: 98px;
		padding-bottom: 0;
	}
	.tag-search__cta {
		margin-bottom: -20px;
		transform: translateY(-18.1818%);
	}
	.home-about {
		height: 640px;
		padding: 264px 24px 0;
	}
	.home-about__loop { top: 273px; }
	.home-about__inner { max-width: 1128px; }
	.home-about__title {
		font-size: 34px;
		line-height: 48px;
		margin-bottom: 40px;
	}
	.home-about__text {
		width: 636px;
		height: 164px;
		margin-left: 64px;
		font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
		font-size: 26px;
		font-weight: 700;
		line-height: 56px;
		color: #333;
	}
	.home-about__circle {
		left: calc(23.4vw + 564px);
		top: 18px;
		bottom: auto;
	}
	.site-footer {
		min-height: 350px;
		display: flex;
		align-items: center;
	}
	.site-footer__inner { width: 100%; }
}

@media (min-width: 1728px) {
	.home-about__circle { left: 969.101px; }
}

/* =========================================================
   専門家詳細
   ======================================================= */
.expert-hero {
	position: relative;
	/* 高さは幅に比例させ、ワイド画面で上下(顔・左下の手書きコピー)が切れるのを防ぐ(方針2)。
	   縦をより多く見せるため 50vw(crop≈2.0〜2.12:1)／640pxを下限に／画面高の84%を上限に
	   (ビューポートより高くしない)。background-position は顔(上)とコピー(下)の中点=center が最適で据え置き。 */
	height: min(84vh, max(640px, 50vw));
	background-size: cover;
	background-position: center;
}
.expert-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.3), transparent 40%);
}
.expert-hero__card {
	position: absolute;
	right: 4%; bottom: 10%;
	z-index: 2;
	display: grid;
	gap: 6px;
	padding: 18px 22px;
	min-width: 250px;
	background: rgba(255, 252, 244, 0.95);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-card);
}
.expert-hero__card-name { font-weight: 700; color: var(--green-dark); }
.expert-hero__card-check { position: absolute; right: 14px; bottom: 8px; color: var(--ink-light); font-size: 0.85rem; }
img.expert-hero__card-check { width: auto; height: auto; max-width: 72px; max-height: 40px; }

.expert-body { padding: 48px 24px 80px; }
.expert-body > * { max-width: var(--content-w); margin-left: auto; margin-right: auto; }

.expert-lead { margin-bottom: 40px; }

.expert-intro {
	position: relative;
	display: grid;
	/* 写真=左端ブリード / テキスト=細めで中央右にまとめる非対称レイアウト(design expert.jpg S-2)。
	   写真右端≈48% / テキスト左端≈57% / テキスト右端=content右端 になるよう
	   テキストカラムを細く・間の余白を広く取る(写真だけ左へブリード、テキストは間延びさせない)。 */
	grid-template-columns: 1fr 0.85fr;
	gap: 120px;
	align-items: start;
	margin-bottom: 80px;
}
/* 導入写真はページ左端まで全ブリード(design expert.jpg S-2)。
   --bleed = 写真左端→ページ左端の実ガター。
   .expert-intro は .expert-body(左padding 24px)内で content幅に中央寄せされるため、
   実ガターは「24px(=body左padding)」を下限に、広幅では (100vw - content幅)/2 になる。
   margin-left:-bleed と width:+bleed を相殺させ、左端は x=0 に到達／右端はカラム内に固定。
   →右へは原理的にはみ出さず横スクロールは出ない。左への数px超過(スクロールバー分)は不可視で無害。 */
.expert-intro__photo {
	--bleed: max(24px, (100vw - var(--content-w)) / 2);
	margin-left: calc(-1 * var(--bleed));
	width: calc(100% + var(--bleed));
}
.expert-intro__photo img { width: 100%; border-radius: 0 var(--radius-m) var(--radius-m) 0; } /* 左角は角なし・右のみ角丸(全ブリード) */
.expert-intro__title { font-size: 1.2rem; }
.expert-intro__arrow { position: absolute; right: 10%; bottom: -60px; transform: rotate(70deg); }

.expert-features { margin-bottom: 60px; }
.expert-feature {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
	margin: 48px 0;
}
.expert-feature.is-reverse { direction: rtl; }
.expert-feature.is-reverse > * { direction: ltr; }
.expert-feature__photo img { border-radius: var(--radius-m); }
.expert-feature__title { font-size: 1.1rem; }

/* インタビュー導線: 上下に罫線(カンプ準拠) */
.expert-interview-link {
	text-align: center;
	margin: 56px auto;
	border-top: 1px solid rgba(0, 0, 0, 0.45);
	border-bottom: 1px solid rgba(0, 0, 0, 0.45);
	padding: 0.7em 0;
}
.expert-interview-link a { font-weight: 700; color: var(--ink); }
.expert-interview-link a span { color: var(--green); font-size: 0.8em; }

/* コメント: 見出し(左) + カード3枚(右)の横並び(カンプ準拠)
   方眼紙はコメントセクションの上端で終わり、以降は白地(margin-top分だけ方眼の帯が残る) */
.expert-comments { padding: 80px 24px; margin-top: 140px; background: var(--white); }
.expert-comments__inner {
	max-width: var(--content-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 36px;
	align-items: start;
}
.expert-comments .section-title--hand { font-size: 1.35rem; margin: 48px 0 0; }
.expert-comments__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* コメントは白カードではなく点線区切りで分ける(design・現物確認済み)。
   地は白(セクション)のまま、肩書/名前を点線で上下に挟み、末尾も点線で区切る。 */
.comment-card {
	padding: 56px 18px 24px;
	position: relative;
	margin-top: 50px;
	border-bottom: 1px dotted rgba(0,0,0,0.18); /* カード末尾の区切り(点線) */
}
.comment-card__photo {
	position: absolute;
	top: -44px; left: 50%;
	transform: translateX(-50%);
	width: 88px; height: 88px;
	border-radius: 50%;
	overflow: hidden;
	outline: 2px dotted var(--ink-light); /* サイト共通の点線円フォトフレーム意匠に統一(カンプ準拠) */
	outline-offset: 5px;
}
.comment-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.comment-card__role { text-align: center; color: var(--green-dark); font-size: 0.82rem; font-weight: 700; margin: 0 0 1.2em; line-height: 1.6; padding: 0.9em 0; border-top: 1px dotted rgba(0,0,0,0.18); border-bottom: 1px dotted rgba(0,0,0,0.18); } /* 肩書/名前を点線で上下に挟む(カンプ準拠) */
/* 肩書は「店舗名 ｜ 名前」を同一1行・全体緑(design)。区切りは薄い縦棒。 */
.comment-card__name { color: var(--green-dark); white-space: nowrap; font-size: 0.88em; } /* 名前は店舗名より少し小さく(design階層≒0.88)・途中で折り返さない */
.comment-card__name::before { content: "｜"; margin: 0 0.3em; color: rgba(0,0,0,0.25); font-weight: 400; } /* 区切り前後は詰める(design準拠で1行に収める) */
.comment-card__text { font-size: 0.88rem; margin: 0; }

/* はじめましての方へ: 白カードは撤去し、上段=見出し(左・背後に淡緑の吹き出しブロブ)|dl(右)、
   下段=CTA+TEL 中央のレイアウト。背景はデザイナー支給の背景イラスト/テクスチャ素材待ちのため
   現状はプレーン(地のまま)。※以前の #eff3ea 薄緑帯は誤りで撤回(背景は単色緑ではない)。 */
.expert-first { position: relative; padding: 56px 24px 60px; background: var(--white); }
.expert-first__box {
	max-width: 860px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"title list"
		"cta   cta"
		"tel   tel";
	column-gap: 48px;
	row-gap: 28px;
	align-items: start;
}
/* 見出し「はじめまして/の方へ」: 左寄せ2行＋背後に淡緑ブロブ(将来SVG支給前提でCSS仮再現・about C-4と同運用) */
.expert-first__title {
	grid-area: title;
	position: relative;
	z-index: 0;
	align-self: center;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.7;
	margin: 0;
	padding: 0.15em 0.25em;
	white-space: nowrap;
}
.expert-first__title::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -0.7em -1.1em -1.0em -0.9em;
	background: #e8f0d6;
	border-radius: 58% 42% 52% 48% / 60% 45% 55% 40%;
}
.expert-first__list { grid-area: list; text-align: left; margin: 0; }
.expert-first__cta { grid-area: cta; text-align: center; margin: 12px 0 0; }
.expert-first__tel { grid-area: tel; }
.expert-first__list > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px dotted rgba(0,0,0,0.15); }
.expert-first__list dt { background: #f4f4f4; color: var(--ink); font-weight: 700; font-size: 0.85rem; border-radius: var(--radius-s); display: grid; place-items: center; padding: 4px; } /* ラベルはグレー背景+濃色文字(S-6店舗情報と統一・カンプ準拠) */
.expert-first__list dd { margin: 0; font-size: 0.92rem; }
.expert-first__tel { font-size: 0.85rem; color: var(--ink-light); }
.expert-first__tel a { color: var(--ink); font-weight: 700; }
.expert-first__arrow { position: absolute; right: 33%; bottom: -10px; transform: rotate(60deg); } /* design準拠で中央寄り(中心≒65%) */

/* 店舗情報(コメント以降は白地) */
.expert-info { padding: 70px 24px 90px; background: var(--white); }
.expert-info > * { max-width: var(--content-w); margin-left: auto; margin-right: auto; }
.expert-info__map { margin: 28px auto; border-radius: var(--radius-m); overflow: hidden; }
.expert-info__map iframe { width: 100%; height: 420px; border: 0; display: block; }
.expert-info__row {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 40px;
	align-items: start;
	margin: 32px auto;
}
.expert-info__photo img { border-radius: var(--radius-m); }
/* 店舗情報テーブル: グレーの角丸ラベル+太めドット区切り(カンプ準拠) */
.expert-info__list { margin: 0; }
.expert-info__list > div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px dotted rgba(0,0,0,0.15); align-items: center; } /* 区切りは細い点線(S-5 はじめまして と統一・design準拠) */
.expert-info__list dt { background: #f4f4f4; color: var(--ink); font-weight: 700; font-size: 0.9rem; border-radius: 6px; text-align: center; padding: 8px; }
.expert-info__list dd { margin: 0; font-size: 0.95rem; }
.expert-info__list dd a { color: var(--ink); text-decoration: underline; }
.expert-info__sns { display: flex; gap: 14px; align-items: center; }
.expert-info__sns svg { width: 22px; height: 22px; color: var(--ink); }
.expert-info__cta { text-align: center; margin: 40px auto 8px; }
/* TEL: グレーピルの「TEL」+太字の電話番号(カンプ準拠) */
.expert-info__tel,
.expert-first__tel { text-align: center; font-size: 0.85rem; color: var(--ink); }
.expert-info__tel span,
.expert-first__tel span { display: inline-block; background: #e3e3e3; border-radius: 999px; padding: 1px 14px; font-size: 0.72rem; margin-right: 8px; }
.expert-info__tel a,
.expert-first__tel a { color: var(--ink); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; }

/* 編集部メッセージ: 白カードではなく方眼紙パネルに直置き(カンプ準拠) */
.editor-message {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 44px;
	align-items: start;
	background-color: var(--cream);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M27.5 0v28M0 27.5h28' fill='none' stroke='%23000000' stroke-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 28px 28px;
	padding: 64px 64px 56px;
	margin: 0 auto; /* 独立セクション化に伴い content幅中央寄せを再付与(旧: .expert-info > * から継承) */
	max-width: var(--content-w);
	border-radius: var(--radius-l); /* design準拠のパネル角丸 */
}
/* 編集部メッセージの独立セクション(design準拠で S-6 の外)。地は白でS-6と連続。
   editor有り時のみ S-6 の下余白を詰め、S-7上の余白を旧構造(56px)と一致させる。 */
.editor-message-section { background: var(--white); padding: 0 24px 90px; }
.expert-info:has(+ .editor-message-section) { padding-bottom: 42px; }
.editor-message__photo { position: relative; }
.editor-message__photo img {
	width: 195px; height: 195px;
	object-fit: cover;
	/* 多角形ブロブ型(近似)。正式形状はデザイナー素材待ち */
	clip-path: polygon(30% 2%, 76% 0%, 100% 26%, 98% 74%, 72% 100%, 24% 98%, 0% 72%, 2% 28%);
}
.editor-message__label {
	position: absolute;
	top: -16px; left: -4px;
	z-index: 2;
	transform: rotate(-9deg);
	color: var(--ink);
	font-size: 0.95rem;
}
.editor-message__title {
	display: table;
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 8px;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 2px;
}
.editor-message__writer {
	display: table;
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 1.6em;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 2px;
}
.editor-message__text { font-size: 0.95rem; margin: 0; }
.editor-message__link { text-align: right; margin: 1.6em 0 0; }
.editor-message__link a { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.editor-message__arrow {
	display: inline-grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 2px solid var(--green);
	border-radius: 50%;
	color: var(--green);
	font-weight: 700;
}

/* =========================================================
   インタビュー記事
   ======================================================= */
/* FV写真カラムは最大580pxにキャップ(大画面で巨大化させない)
   FV全体も --frame-w で上限を設け、超ワイド画面では中央寄せ */
.interview-hero { display: grid; grid-template-columns: 45% 1fr; column-gap: 8%; align-items: stretch; max-width: var(--frame-w); margin: 0 auto; } /* 写真≒45%+gap8%(design比)。行高はパネルが決め、写真はstretchで釣り合わせる */
.interview-hero__photo {
	position: relative;
	/* 左ブリードは frame-w 基準。hero が max-width:frame-w(1600) で中央寄せのため、写真左端は
	   ≤1600 でビューポート左端／>1600 で frame 左端に自然に揃う(サイトの枠と一致)。
	   100vw で画面端まで引き伸ばすと超ワイドで写真だけ枠を越え過剰トリミングになるため、追加ブリードはしない。 */
}
/* FV写真: デザイン案準拠の縦長サイズ(パネル全高に引き伸ばさない) */
/* imgは絶対配置でトラック計算に寄与させない → 行高はパネルの中身が決める。
   写真セル(stretch)がその行高になり、imgがinset:0で埋める。高さは幅(vw)非依存でズーム追従。 */
.interview-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 手書き矢印: 写真の下から「どんな人？」セクションへ向ける */
/* 矢印は写真下(次セクションへ)。絶対配置にして写真セルの高さに影響させない */
/* 手描き矢印: designは下・左向き。プレースホルダ arrow-doodle.svg が逆向きのため scaleX(-1) で暫定反転
   (正しい向きの矢印svgが来たら scaleX(-1) を外して差し替え=素材待ちリスト参照)。 */
.interview-hero__arrow { position: absolute; left: 24%; top: 100%; margin-top: 44px; width: 80px; transform: scaleX(-1) rotate(15deg); }
.interview-hero__panel { padding: 110px 7% 48px; }
.interview-hero__title { margin: 0 0 40px; }

/* 手書きタイトルの吹き出し(薄緑・左下にしっぽ) */
.interview-hero__bubble {
	position: relative;
	display: block;
	background: #eaf0db; /* 吹き出しの薄緑(仮) */
	border-radius: 40px;
	padding: 24px 48px; /* design比: 縦paddingを縮小しタイトル画像を目立たせる(旧44px) */
	text-align: center;
}
.interview-hero__bubble::after {
	content: "";
	position: absolute;
	left: 14%;
	bottom: -22px;
	width: 34px; height: 34px;
	background: #eaf0db;
	clip-path: polygon(0 0, 100% 0, 22% 100%);
}
.interview-hero__bubble img { width: 100%; height: auto; display: block; margin: 0 auto; } /* design比: コンテンツ幅いっぱいに表示(旧max-width:520px) */
.interview-hero__bubble .hand { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.9; color: var(--ink); }

/* アバター + 店名 + 署名 */
.interview-hero__profile { display: flex; gap: 24px; align-items: center; }
.interview-hero__avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; outline: 3px dotted var(--green); outline-offset: 5px; margin: 5px; }
.interview-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.interview-hero__shop { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; }
.interview-hero__shop a { color: var(--ink); }
.interview-hero__sign { margin: 0; }
.interview-hero__sign img { max-height: 44px; width: auto; }
.interview-hero__sign .hand { font-size: 1.4rem; }

/* プロフィール文(アバター行の下・全幅) */
.interview-hero__bio { font-size: 0.9rem; color: var(--ink); line-height: 2.2; margin: 24px 0 0; }

/* I-1ヒーロー→I-2の上下間隔は design比(≒hero高の1/3・原本291px@1728canvas)。手描き矢印が余白に収まる。
   幅比例(≒16vw)＋上下限クランプ。 */
.interview-body { padding: clamp(80px, 16vw, 230px) 24px 90px; }
.interview-body > * { max-width: 860px; margin-left: auto; margin-right: auto; }

/* I-2(どんな人？)は entry-content 系の860px中央カラムから独立させ、frame-w(1600)基準の
   2カラムに再構成(B-1)。見出しブロブ左端がframe左端+86pxになるようセクション全体を左padding。
   interview-body の左右24pxパディングは維持したまま(他セクションと共通の余白)、
   frame-wを超えるワイド画面でだけ頭打ち=他サイトのframe-w基準と同じ考え方。 */
.interview-person { max-width: var(--frame-w); margin: 0 auto 64px; padding-left: 86px; }
/* 見出しを左カラム内(写真の左)に構造として組み込む(design比)。旧実装は見出しがグリッド外の
   全幅行だったため、1600px未満で「見出しが写真の上」に来てしまい、margin-top:-128pxの
   引き上げhackで無理に位置調整していた(見出しと写真の衝突リスクの根本原因)。
   grid-template-areas で「title photo」上段・「tags photo」下段の2行構成にし、写真は
   右カラム全体(2行分)を占有。見出し・タグ・写真とも常にrow1(=写真の上端)基準で配置されるため、
   引き上げhackは不要になり撤去。タグ列 35%→40%(design比frame1600時600px相当)は維持。 */
.interview-person__row {
	display: grid;
	grid-template-columns: 40% 1fr;
	grid-template-areas: "title photo" "tags photo";
	column-gap: 80px;
	align-items: start;
}
.interview-person__title { grid-area: title; }
/* 見出しフォントをdesign比(frame1600時35px相当)に拡大。base .section-title(24px)は
   他8テンプレ共有のため不変厳守、.interview-person配下限定のスコープ修飾で完結させる。 */
.interview-person .section-title { font-size: clamp(24px, 2.2vw, 35px); } /* 35/1600=2.2vw */
/* 見出しテキスト開始位置をdesign比(写真上端=row1最上部から約70px下)まで下げる。
   dotの::beforeはh2自身のpadding-boxを基準に絶対配置されるため、margin-topでh2ボックス
   全体を押し下げることでdot+テキストの位置関係を保つ(padding-topだとdotだけ取り残される)。
   1600px以上で70px固定、それ未満はフレームに追随してclamp(24px,4.4vw,70px)で比例縮小。 */
.interview-person__title { margin-top: clamp(24px, 4.4vw, 70px); }
@media (min-width: 1600px) {
	.interview-person__title { margin-top: 70px; }
}
.interview-person__tags { grid-area: tags; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
/* 写真はセクション右端からさらに画面端まで伸ばすブリード配置(見える左角のみ丸める)。
   --bleed = interview-bodyの左右24pxガター分。frame-w+48px(=ambient gutter込みの頭打ち幅)を
   超えたワイド画面ではガターがそのまま残る(frame-w標準=これ以上は伸ばさない)ので0にクランプ。 */
.interview-person__photo {
	grid-area: photo;
	--bleed: min(24px, max(0px, (var(--frame-w) + 48px) - 100vw));
	margin-right: calc(-1 * var(--bleed));
	overflow: hidden;
	border-radius: var(--radius-l) 0 0 var(--radius-l); /* 左のみ角丸(design比・wrapper側でclip) */
}
.interview-person__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 900 / 717; /* design比(frame1600時の実測900×717px相当) */
	object-fit: cover;
}

.interview-video { margin: 56px auto; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; }
.interview-video iframe { width: 100%; height: 100%; border: 0; }

.interview-shop-link { text-align: center; margin: 56px auto 0; }

/* =========================================================
   記事本文(entry-content) — H1〜H6 / リスト / 引用 など
   ======================================================= */
.entry-content { font-size: 0.95rem; display: flow-root; }
.entry-content > * { margin-top: 1.6em; margin-bottom: 1.6em; }
/* 画像の回り込み(カンプの本文レイアウト用) */
.entry-content .alignleft { float: left; margin: 0.4em 1.6em 1em 0; max-width: 46%; }
.entry-content .alignright { float: right; margin: 0.4em 0 1em 1.6em; max-width: 46%; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content a { text-decoration: underline; }
.entry-content img { border-radius: var(--radius-m); }

.entry-content h1 {
	font-size: 1.4rem;
	line-height: 1.7;
	padding-left: 1.5em;
	position: relative;
	margin-top: 2.4em;
}
.entry-content h1::before {
	content: "";
	position: absolute;
	left: 0; top: 0.25em;
	width: 1em; height: 1em;
	background: var(--green);
	border-radius: 50%;
	clip-path: polygon(50% 0%, 61% 9%, 75% 7%, 81% 19%, 94% 24%, 93% 38%, 100% 50%, 93% 62%, 94% 76%, 81% 81%, 75% 93%, 61% 91%, 50% 100%, 39% 91%, 25% 93%, 19% 81%, 6% 76%, 7% 62%, 0% 50%, 7% 38%, 6% 24%, 19% 19%, 25% 7%, 39% 9%);
}
.entry-content h2 {
	font-size: 1.25rem;
	background: #f4f4f4; /* ラベルグレー(S-5/S-6 dt と統一・design採取。旧#efece1ベージュはC-5で発見の色ズレ) */
	padding: 0.5em 0.9em;
	border-radius: var(--radius-s);
	margin-top: 2.4em;
}
.entry-content h3 {
	font-size: 1.15rem;
	border-left: 5px solid var(--green);
	padding-left: 0.7em;
	margin-top: 2.2em;
}
.entry-content h4 {
	font-size: 1.05rem;
	border-bottom: 2px solid var(--green-pale);
	padding-bottom: 0.3em;
}
.entry-content h5 {
	font-size: 1rem;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: var(--radius-s);
	padding: 0.4em 0.9em;
}
.entry-content h6 {
	font-size: 0.95rem;
	color: var(--green-dark);
}
.entry-content h6::before { content: "●"; color: var(--green); margin-right: 0.4em; font-size: 0.7em; vertical-align: 0.15em; }

.entry-content blockquote {
	background: #eff9f6; /* design採取のより淡いミント(--green-pale#e4f3ebより淡い)。変数は他所で使用中のため個別上書き */
	border-radius: var(--radius-m);
	padding: 1.4em 1.8em;
	margin-left: 0;
	margin-right: 0;
	font-size: 0.92rem;
	position: relative;
}
.entry-content ul li::marker { color: var(--green); }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th, .entry-content td { border: 1px solid rgba(0,0,0,0.15); padding: 0.6em 1em; font-size: 0.9rem; }
.entry-content th { background: var(--green-pale); }

/* インタビュー記事本文をdesign(Figma)寸法に合わせる。.single-interview .entry-content 限定
   スコープで完結させ、グローバル .entry-content(about/page.php含む)・about側の既存上書きには
   一切触れない(about側はC系で目視合格済みのため非波及必須)。
   カラム幅: 860px→1100px(design実測x314–1414とほぼ一致)。max-widthは値そのものが
   「狭い画面では縮み、広い画面では上限で頭打ち」というフレーム追随特性を内包するため、
   clampを使わずそのままの指定で中間幅にも自然に追随する。
   文字サイズはFigmaコンポーネント名に基づく確定値(H1 40/H2 36/H3 34/H4 28/H5 26/H6 20目安、
   本文・引用・リストは18px文章)を基準に、1600px以上でその値・それ未満はvw比例のclampで
   縮小(floor/max比は本文の例clamp(14px,1.125vw,18px)に合わせ約0.78で統一)。 */
.single-interview .entry-content {
	max-width: 1100px;
}
.single-interview .entry-content h1 { font-size: clamp(31px, 2.5vw, 40px); }
.single-interview .entry-content h2 { font-size: clamp(28px, 2.25vw, 36px); }
.single-interview .entry-content h3 { font-size: clamp(26px, 2.125vw, 34px); }
.single-interview .entry-content h4 { font-size: clamp(22px, 1.75vw, 28px); }
.single-interview .entry-content h5 { font-size: clamp(20px, 1.625vw, 26px); } /* 「26px見出し」 */
.single-interview .entry-content h6 { font-size: clamp(16px, 1.25vw, 20px); } /* H6相当は小さめ目安・目視で微調整可 */
/* 本文/引用/リストは共通で「18px文章」コンポーネント。本文・引用は行送り44px(≒2.4倍・
   デザイン意図のゆったり組み)、リストのみ行送り31px(≒1.72倍・Figmaインスタンス配置ピッチ)。 */
.single-interview .entry-content p,
.single-interview .entry-content li,
.single-interview .entry-content blockquote {
	font-size: clamp(14px, 1.125vw, 18px);
}
.single-interview .entry-content p { line-height: 2.4; }
.single-interview .entry-content blockquote { line-height: 2.4; }
.single-interview .entry-content ul,
.single-interview .entry-content ol {
	line-height: 1.72;
}

/* 会話(インタビュー)風: 太字段落を質問スタイルに */
.entry-content p strong:first-child { color: var(--green-dark); }

/* =========================================================
   Aboutページ
   ======================================================= */
.about-page {
	display: grid;
	grid-template-columns: min(50vw, 864px) min(50vw, 864px);
	align-items: start;
	max-width: 1728px;
	min-height: min(172.453704vw, 2980px);
	margin-inline: auto;
	font-family: "Zen Kaku Gothic New", sans-serif;
	color: #333;
}
.about-page__photos {
	display: block;
	min-height: min(172.453704vw, 2980px);
}
.about-page__photos > .swiper-wrapper {
	display: block;
	height: auto;
}
.about-page__photos .swiper-slide { width: 100%; }
.about-page__photos figure {
	width: 100%;
	height: min(64.525463vw, 1115px);
	overflow: hidden;
}
.about-page__photos figure img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.about-page__content {
	position: relative;
	min-height: min(172.453704vw, 2980px);
	padding: 0;
}
.about-page .section-title--label {
	position: absolute;
	top: min(11.111111vw, 192px);
	left: min(6.134259vw, 106px);
	z-index: 0;
	width: min(25.05787vw, 433px);
	margin: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(2.314815vw, 40px);
	font-weight: 700;
	line-height: min(3.645833vw, 63px);
	letter-spacing: min(0.208333vw, 3.6px);
	white-space: nowrap;
	color: #333;
}
.about-page .section-title--label::before {
	left: max(-2.662037vw, -46px);
	top: max(-1.446759vw, -25px);
	width: min(5.324074vw, 92px);
	height: min(5.439815vw, 94px);
	background: url("../img/about/title-blob.png") center / contain no-repeat;
	border-radius: 0;
}
.about-page .tns-breadcrumb {
	position: absolute;
	top: min(16.087963vw, 278px);
	left: min(6.134259vw, 106px);
	margin: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(0.810185vw, 14px);
	font-weight: 400;
	line-height: normal;
	color: #333;
}
.about-page .tns-breadcrumb a,
.about-page .tns-breadcrumb li + li::before { color: #333; }

.about-page .entry-content {
	position: relative;
	width: min(38.773148vw, 670px);
	margin: min(28.819444vw, 498px) 0 0 min(5.729167vw, 99px);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(1.041667vw, 18px);
	font-weight: 500;
	line-height: min(2.777778vw, 48px);
	letter-spacing: max(-0.03125vw, -0.54px);
	color: #333;
}
.about-page .entry-content h2.u-underline {
	position: absolute;
	top: 0;
	left: min(0.405093vw, 7px);
	width: min(27.719907vw, 479px);
	height: min(8.564815vw, 148px);
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(1.967593vw, 34px);
	font-weight: 700;
	line-height: min(4.282407vw, 74px);
	letter-spacing: min(0.059028vw, 1.02px);
	text-decoration-line: underline;
	text-decoration-thickness: min(0.173611vw, 3px);
	text-underline-offset: min(0.405093vw, 7px);
	text-decoration-skip-ink: none;
	color: #333;
}
.about-page .entry-content > p {
	margin: 0;
	font-size: min(1.041667vw, 18px);
	font-weight: 500;
	line-height: min(2.777778vw, 48px);
	letter-spacing: max(-0.03125vw, -0.54px);
	color: #333;
}
.about-page .entry-content > p:nth-of-type(-n+4) {
	position: absolute;
	left: min(2.719907vw, 47px);
	width: min(38.078704vw, 658px);
}
.about-page .entry-content > p:nth-of-type(1) { top: min(10.87963vw, 188px); }
.about-page .entry-content > p:nth-of-type(2) {
	top: min(20.949074vw, 362px);
	font-size: min(1.157407vw, 20px);
	font-weight: 700;
	letter-spacing: max(-0.034722vw, -0.6px);
	color: #2fb585;
}
.about-page .entry-content > p:nth-of-type(3) { top: min(28.240741vw, 488px); }
.about-page .entry-content > p:nth-of-type(4) { top: min(38.310185vw, 662px); }
.about-page .entry-content h3 {
	width: min(37.384259vw, 646px);
	height: min(3.472222vw, 60px);
	margin: min(50.231481vw, 868px) 0 min(1.62037vw, 28px);
	padding: 0 0 0 min(0.810185vw, 14px);
	border-left: min(0.347222vw, 6px) solid #2fb585;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(1.967593vw, 34px);
	font-weight: 700;
	line-height: min(3.472222vw, 60px);
	letter-spacing: 0;
	color: #333;
}
.about-page .entry-content figure.alignleft {
	float: left;
	width: min(15.162037vw, 262px);
	height: min(15.914352vw, 275px);
	margin: 0 min(1.388889vw, 24px) 0 0;
	overflow: hidden;
	border-radius: min(1.157407vw, 20px);
}
.about-page .entry-content figure.alignleft img {
	content: url("../img/about/editor.jpg");
	width: 180.153%;
	height: 114.545%;
	max-width: none;
	object-fit: cover;
	transform: translate(-22.458%, -0.952%);
	border-radius: 0;
}
.about-page .entry-content > p:nth-of-type(5),
.about-page .entry-content > p:nth-of-type(6),
.about-page .entry-content .about-page__contact {
	font-size: min(0.925926vw, 16px);
	font-weight: 500;
	line-height: min(2.199074vw, 38px);
	letter-spacing: max(-0.027778vw, -0.48px);
}
.about-page .entry-content > p:nth-of-type(5) { margin-top: min(2.430556vw, 42px); }
.about-page .entry-content > p:nth-of-type(6) { margin-top: 0; }
.about-page .entry-content .about-page__contact {
	clear: both;
	width: 100%;
	margin-top: min(2.314815vw, 40px);
}
.about-page .entry-content .about-page__contact a {
	font-weight: 700;
	color: #2fb585;
}
.about-page__sign {
	clear: both;
	width: min(12.615741vw, 218px);
	height: min(1.967593vw, 34px);
	margin: min(2.546296vw, 44px) min(5.613426vw, 97px) 0 auto;
}
.about-page__sign img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

/* プロジェクトメンバー(とはページ) */
.about-page .project-members {
	width: min(38.773148vw, 670px);
	margin: min(6.944444vw, 120px) 0 0 min(5.729167vw, 99px);
	clear: both;
}
.about-page .project-members .section-title--bar {
	width: min(37.384259vw, 646px);
	height: min(3.472222vw, 60px);
	margin: 0 0 min(1.62037vw, 28px);
	padding: 0 0 0 min(0.810185vw, 14px);
	border-left: min(0.347222vw, 6px) solid #2fb585;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(1.967593vw, 34px);
	font-weight: 700;
	line-height: min(3.472222vw, 60px);
	color: #333;
}
.about-page .project-member { margin-top: 0; }
.about-page .project-member + .project-member { margin-top: min(2.314815vw, 40px); }
.about-page .project-member__role,
.about-page .project-member__name {
	margin: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(1.62037vw, 28px);
	font-weight: 700;
	line-height: min(2.430556vw, 42px);
	letter-spacing: min(0.048611vw, 0.84px);
	color: #333;
}
.about-page .project-member__name {
	height: min(2.951389vw, 51px);
	padding: 0 0 min(0.347222vw, 6px);
	border-bottom: min(0.173611vw, 3px) dotted #2fb585;
}
.about-page .project-member__body {
	display: grid;
	grid-template-columns: min(15.162037vw, 262px) min(22.106481vw, 382px);
	gap: min(1.388889vw, 24px);
	align-items: start;
	min-height: min(10.99537vw, 190px);
	margin-top: min(1.736111vw, 30px);
}
.about-page .project-member__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: min(15.162037vw, 262px);
	height: min(8.043981vw, 139px);
	overflow: hidden;
	background: #fff;
	border: 1px solid #a7a7a7;
	color: #333;
	font-size: min(1.157407vw, 20px);
	font-weight: 700;
}
.about-page .project-member__logo img {
	width: auto;
	height: auto;
	max-width: calc(100% - 40px);
	max-height: calc(100% - 24px);
	object-fit: contain;
}
.about-page .project-member__text {
	margin: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: min(0.925926vw, 16px);
	font-weight: 500;
	line-height: min(2.199074vw, 38px);
	letter-spacing: max(-0.027778vw, -0.48px);
	color: #333;
}
.page-template-about .site-footer { min-height: min(20.25463vw, 350px); }

/* =========================================================
   アーカイブ・一覧
   ======================================================= */
.archive-page { padding: 140px 24px 90px; }
.archive-page > * { max-width: var(--content-w); margin-left: auto; margin-right: auto; }
.archive-filter { margin-bottom: 28px; }
.archive-filter__title { font-size: 1rem; color: var(--green-dark); margin: 0 0 0.4em; }
.archive-filter__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 40px 28px;
	margin-top: 48px;
}
.pagination { margin-top: 48px; text-align: center; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--shadow-card);
}
.pagination .page-numbers.current { background: var(--green); color: var(--white); }

/* 専門家・インタビュー一覧 / 検索結果
   Figma「06-検索結果_ワイヤー01」(1728px)の1200px幅・500×333px横長カードを基準にする。
   TOPカルーセル用カードには触れず、投稿タイプのアーカイブだけで完結させる。 */
body:is(.post-type-archive-expert, .post-type-archive-interview) {
	background-color: #fff;
	background-image: none;
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	color: #333;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .site-header {
	width: min(100%, 1728px);
	max-width: 1728px;
	height: 130px;
	padding: 33px 50px 0 34px;
	align-items: flex-start;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .site-header__brand {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .site-logo img {
	width: 210px;
	height: auto;
	filter: brightness(0) opacity(0.8);
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .site-tagline {
	flex-direction: row;
	align-items: center;
	gap: 0;
	margin: 0;
	padding-top: 1px;
	color: #333;
	white-space: nowrap;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .site-tagline__chip {
	padding: 0;
	background: transparent;
	color: #333;
	font-size: 12px;
	line-height: 26px;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .site-tagline__chip:first-child::after {
	content: "｜";
	margin-inline: 0.6em;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .site-tagline__chip--sub { margin-left: 0; }
body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle {
	top: 50px;
	right: max(50px, calc((100vw - 1728px) / 2 + 50px));
	width: 80px;
	height: 80px;
	padding: 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	display: grid;
	place-items: center;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle::before,
body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle::after { display: none; }
body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle__bars {
	position: relative;
	left: auto;
	top: auto;
	display: grid;
	width: auto;
	height: auto;
	gap: 6px;
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle__bar {
	position: static;
	width: 35px;
	height: auto;
	aspect-ratio: 42 / 4.84615;
	filter: brightness(0);
}
body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle__label { display: none; }

.expert-results {
	width: min(100%, 1728px);
	margin-inline: auto;
	padding: 116px 24px 120px;
}
.expert-results__header {
	width: min(100%, 1528px);
	margin-inline: auto;
}
.expert-results__header .tns-breadcrumb {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 20px;
	color: #333;
}
.expert-results__header .tns-breadcrumb a,
.expert-results__header .tns-breadcrumb li + li::before { color: #333; }
.expert-results__title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: 0;
	color: #333;
}
.expert-results__list {
	display: grid;
	gap: 50px;
	width: min(100%, 1200px);
	margin: 98px auto 0;
}
.expert-result {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6.6fr);
	gap: 40px;
	min-width: 0;
}
.expert-result__visual {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 500 / 333;
	overflow: hidden;
	background: #a7a7a7;
}
.expert-result__image-link,
.expert-result__image {
	display: block;
	width: 100%;
	height: 100%;
}
.expert-result__image { object-fit: cover; }
.expert-result__visual > .tns-area-pill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 44px;
	padding: 8px 10px;
	border: 2px dashed #c3c3c3;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}
.expert-result__visual > .tns-area-pill .tns-icon-pin {
	width: 24px;
	height: 24px;
	fill: var(--green);
}
.expert-result__content {
	min-width: 0;
	padding-top: 0;
}
.expert-result__content .expert-result__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 40px;
}
.expert-result__title a { color: #333; }
.expert-result__copy {
	display: -webkit-box;
	margin: 20px 0 0;
	overflow: hidden;
	color: #333;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.expert-result__copy a { color: #333; }
.expert-result__intro {
	display: -webkit-box;
	margin: 20px 0 0;
	overflow: hidden;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
.expert-results > .pagination { margin-top: 80px; }
.expert-results > .pagination .nav-links { gap: 10px; }
.expert-results > .pagination .page-numbers {
	min-width: 30px;
	width: 30px;
	height: 30px;
	border-radius: 0;
	background: #afafaf;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	box-shadow: none;
}
.expert-results > .pagination .page-numbers.current { background: #4e4e4e; }
.expert-results__empty {
	width: min(100%, 1200px);
	margin: 98px auto 0;
	font-size: 18px;
}

.post-list { display: grid; gap: 0; }
.post-list__item a { display: flex; gap: 1.5em; padding: 1em 0; border-bottom: 1px dashed rgba(0,0,0,0.2); color: var(--ink); align-items: baseline; }
.post-list__item time { color: var(--ink-light); font-size: 0.85rem; flex-shrink: 0; }
.post-list__item h2 { font-size: 1rem; margin: 0; }

/* =========================================================
   レスポンシブ
   ======================================================= */
@media (max-width: 960px) {
	body:is(.post-type-archive-expert, .post-type-archive-interview) .site-header {
		height: 112px;
		padding: 24px 24px 0;
	}
	body:is(.post-type-archive-expert, .post-type-archive-interview) .site-logo img { width: 190px; }
	body:is(.post-type-archive-expert, .post-type-archive-interview) .site-tagline { display: none; }
	body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle {
		top: 20px;
		right: 20px;
		width: 64px;
		height: 64px;
		border-radius: 16px;
	}
	.expert-results { padding: 96px 24px 90px; }
	.expert-results__header { width: min(100%, 1200px); }
	.expert-results__title { font-size: 30px; line-height: 44px; }
	.expert-results__list {
		width: min(100%, 1200px);
		gap: 48px;
		margin-top: 64px;
	}
	.expert-result { gap: 28px; }
	.expert-result__visual {
		width: 100%;
		height: auto;
		aspect-ratio: 500 / 333;
	}
	.expert-result__content .expert-result__title { font-size: 22px; line-height: 36px; }
	.expert-result__copy {
		margin-top: 16px;
		font-size: 18px;
		line-height: 28px;
	}
	.expert-result__intro {
		margin-top: 14px;
		font-size: 15px;
		line-height: 26px;
		-webkit-line-clamp: 3;
	}

	.site-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.site-footer__sub { justify-items: center; }
	.interview-hero { grid-template-columns: 1fr; align-items: start; } /* stack時は行高が写真を決めるので高さをaspectに戻す */
	.interview-hero__img { position: static; height: auto; aspect-ratio: 7 / 9; }
	.interview-hero__arrow { position: static; margin: 20px 0 0 16%; } /* stackでは通常フローで写真下に */
	.interview-hero__panel { padding-top: 48px; }
	.about-page {
		display: block;
		width: 100%;
		max-width: none;
		min-width: 0;
		min-height: 0;
		overflow-x: clip;
	}
	.about-page__photos {
		display: block;
		width: 100%;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
	}
	.about-page__photos > .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.about-page__photos figure {
		height: auto;
		min-width: 0;
		aspect-ratio: 3 / 4;
	}
	.about-page__content {
		width: 100%;
		min-width: 0;
		min-height: 0;
		padding: 64px 6%;
	}
	.about-page .section-title--label {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		font-size: clamp(28px, 4vw, 36px);
		line-height: 1.6;
		letter-spacing: 0.06em;
		white-space: normal;
	}
	.about-page .section-title--label::before {
		left: -0.8em;
		top: -0.4em;
		width: 2.35em;
		height: 2.4em;
	}
	.about-page .tns-breadcrumb {
		position: static;
		margin: 18px 0 0;
		font-size: 14px;
	}
	.about-page .entry-content {
		position: relative;
		width: auto;
		min-width: 0;
		margin: 56px 0 0;
		font-size: 16px;
		line-height: 2.2;
		letter-spacing: -0.02em;
		overflow-wrap: anywhere;
	}
	.about-page .entry-content h2.u-underline {
		position: static;
		width: auto;
		height: auto;
		font-size: clamp(26px, 3.5vw, 32px);
		line-height: 2;
		letter-spacing: 0.03em;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}
	.about-page .entry-content > p,
	.about-page .entry-content > p:nth-of-type(-n+4) {
		position: static;
		width: auto;
		margin-top: 28px;
		font-size: 16px;
		line-height: 2.2;
		letter-spacing: -0.02em;
	}
	.about-page .entry-content > p:nth-of-type(2) { font-size: 17px; }
	.about-page .entry-content h3 {
		width: auto;
		height: auto;
		margin: 72px 0 32px;
		padding-left: 14px;
		border-left-width: 6px;
		font-size: clamp(26px, 3.5vw, 32px);
		line-height: 1.5;
	}
	.about-page .entry-content figure.alignleft {
		width: min(38vw, 262px);
		height: auto;
		aspect-ratio: 262 / 275;
		margin: 0 24px 16px 0;
		border-radius: 20px;
	}
	.about-page .entry-content > p:nth-of-type(5),
	.about-page .entry-content > p:nth-of-type(6),
	.about-page .entry-content .about-page__contact {
		font-size: 16px;
		line-height: 2.2;
		letter-spacing: -0.02em;
	}
	.about-page .entry-content > p:nth-of-type(5) { margin-top: 0; }
	.about-page .entry-content .about-page__contact { margin-top: 40px; }
	.about-page__sign {
		width: 218px;
		height: 34px;
		max-width: 100%;
		margin: 30px 0 0 auto;
	}
	.about-page .project-members {
		width: auto;
		margin: 131px 0 0;
	}
	.about-page .project-members .section-title--bar {
		width: auto;
		height: auto;
		margin-bottom: 36px;
		padding-left: 14px;
		border-left-width: 6px;
		font-size: clamp(26px, 3.5vw, 32px);
		line-height: 1.5;
	}
	.about-page .project-member + .project-member { margin-top: 56px; }
	.about-page .project-member__role,
	.about-page .project-member__name {
		font-size: clamp(22px, 3vw, 27px);
		line-height: 1.7;
		letter-spacing: 0.03em;
	}
	.about-page .project-member__name {
		height: auto;
		padding-bottom: 10px;
		border-bottom-width: 3px;
	}
	.about-page .project-member__body {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 28px;
	}
	.about-page .project-member__logo {
		width: 262px;
		height: 139px;
		max-width: 100%;
		margin-inline: auto;
		font-size: 18px;
	}
	.about-page .project-member__text {
		font-size: 16px;
		line-height: 2.2;
		letter-spacing: -0.02em;
	}
	.expert-comments__inner { grid-template-columns: 1fr; }
	.expert-comments .section-title--hand { margin-top: 0; }
	.expert-comments__grid { grid-template-columns: 1fr; max-width: 480px; }
}

@media (max-width: 720px) {
	:root { --header-h: 72px; }
	body { font-size: 15px; }
	.menu-toggle {
		top: clamp(14px, 3.8168vw, 16px);
		right: clamp(10px, 2.5445vw, 11px);
		width: clamp(38px, 10.1781vw, 42px);
		height: clamp(38px, 10.1781vw, 42px);
	}
	.menu-toggle::before { border-width: 1px; }
	.menu-toggle__label { font-size: clamp(6.33px, 1.696vw, 7px); }
	body.home .home-interviews::before {
		left: max(-99px, -25.1908vw);
		top: 0;
		width: min(50.3817vw, 198px);
		height: min(50.3817vw, 198px);
	}
	.site-header { padding: 16px; }
	body:is(.post-type-archive-expert, .post-type-archive-interview) .site-header {
		height: 96px;
		padding: 20px;
	}
	body:is(.post-type-archive-expert, .post-type-archive-interview) .site-logo img { width: 170px; }
	body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle {
		top: 16px;
		right: 16px;
		width: 56px;
		height: 56px;
		border-radius: 14px;
	}
	body:is(.post-type-archive-expert, .post-type-archive-interview) .menu-toggle__bar { width: 28px; }
	.expert-results { padding: 88px 20px 72px; }
	.expert-results__header .tns-breadcrumb {
		margin-bottom: 16px;
		font-size: 12px;
		line-height: 18px;
	}
	.expert-results__title { font-size: 26px; line-height: 40px; }
	.expert-results__list { gap: 56px; margin-top: 40px; }
	.expert-result__visual { aspect-ratio: 500 / 333; }
	.expert-result__visual > .tns-area-pill {
		height: 36px;
		padding: 5px 8px;
		font-size: 13px;
		line-height: 22px;
	}
	.expert-result__visual > .tns-area-pill .tns-icon-pin { width: 20px; height: 20px; }
	.expert-result__content .expert-result__title {
		font-size: 21px;
		line-height: 34px;
	}
	.expert-result__copy {
		margin-top: 12px;
		font-size: 17px;
		line-height: 27px;
	}
	.expert-result__intro {
		margin-top: 12px;
		font-size: 15px;
		line-height: 26px;
		-webkit-line-clamp: 4;
	}
	.expert-results > .pagination { margin-top: 56px; }

	/* About SP: Figma 393×507pxのヒーロー写真を1枚ずつ横スワイプ表示する。 */
	.about-page__photos {
		height: min(129.0076vw, 507px);
		aspect-ratio: auto;
	}
	.about-page__photos > .swiper-wrapper {
		display: flex;
		height: 100%;
	}
	.about-page__photos figure {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		flex-shrink: 0;
	}

	.hero__slide { height: 70vh; }
	.hero__card { right: 4%; left: 4%; bottom: 10%; min-width: 0; }

	/* T-101: TOP SPのヘッダー＋FV。Figma「トップ_デザイン_SP01」393px幅を基準に、
	   共通ヘッダーの他テンプレートへ波及させないようbody.home配下だけで上書きする。 */
	body.home .site-header {
		height: 172px;
		padding: 0;
	}
	body.home .site-header__brand {
		position: absolute;
		top: 10.1781vw;
		left: 5.3435vw;
	}
	body.home .site-logo img {
		width: 79.3893vw;
		max-width: none;
	}
	body.home .site-tagline {
		width: 58.0153vw;
		margin: 1.7812vw 0 0 -0.2545vw;
		gap: 2px;
	}
	body.home .site-tagline__chip {
		padding: 0.6727em 0.8636em;
		font-size: 11px;
		line-height: 1.2;
	}
	body.home .site-tagline__chip--sub { margin-left: 62.72%; }
	body.home .hero__slide {
		height: 142.7481vw;
		min-height: 535px;
		max-height: 591px;
		background-size: auto 100%;
		background-position: center top;
	}
	body.home .hero__slide::after {
		background: linear-gradient(24deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 60%);
	}
	body.home .hero__card {
		left: 5.0891vw;
		right: auto;
		bottom: 13.9949vw;
		width: 89.8219vw;
		height: 35.6234vw;
		min-width: 0;
		min-height: 133px;
		max-height: 147px;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 23px 20px 20px;
		background: rgba(255,255,255,.85);
		border-radius: 30px;
		box-shadow: none;
	}
	body.home .hero__card::before { display: none; }
	body.home .hero__card-name,
	body.home .hero__card-tags,
	body.home .hero__card-area {
		position: relative;
		left: auto;
		top: auto;
	}
	body.home .hero__card-name {
		order: 1;
		font-size: 18px;
		line-height: 26px;
	}
	body.home .hero__card-area {
		order: 2;
		height: 24px;
		line-height: 24px;
	}
	body.home .hero__card-tags {
		order: 3;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 27px;
		line-height: 27px;
	}
	body.home .hero__card .tns-area-pill {
		gap: 1px;
		font-size: 14px;
		line-height: 20px;
	}
	body.home .hero__card .tns-icon-pin {
		width: 24px;
		height: 24px;
	}
	body.home .hero__card .tns-pill {
		margin: 0;
		padding: 5px 10px;
		font-size: 12px;
		line-height: 15px;
	}
	body.home .hero__card-check {
		left: 83.0028%;
		top: 62.8571%;
		width: 11.3314%;
	}
	body.home .hero__pager {
		left: 5.0891vw;
		bottom: 5.0891vw;
		width: 20.3562vw;
		height: 15px;
		justify-content: space-between;
		gap: 0;
		line-height: 15px;
	}
	body.home .hero__nav img {
		width: 16px;
		height: 13px;
	}
	body.home .hero__fraction {
		font-size: 13px;
		line-height: 15px;
		letter-spacing: 0;
	}

	/* T-102: TOP専門家をSPでは2列×2行のSwiperグリッドにする。393px基準で
	   card=160px / ring=150px / photo=140px、横13px・行ピッチ377px。 */
	body.home .home-experts {
		padding-top: min(15.2672vw, 60px);
		padding-bottom: min(12.2137vw, 48px);
	}
	body.home .home-experts::before {
		left: max(-9.1603vw, -36px);
		top: min(12.4682vw, 49px);
		width: min(23.1552vw, 91px);
		height: min(23.1552vw, 91px);
	}
	body.home .home-experts::after {
		left: min(53.4351vw, 210px);
		right: auto;
		top: max(-43.7659vw, -172px);
		width: min(73.028vw, 287px);
		height: min(73.028vw, 287px);
	}
	body.home .home-experts .home-section__title {
		width: min(91.8575vw, 361px);
		height: 35px;
		margin: 0 auto min(7.6336vw, 30px);
		font-size: 0;
		line-height: 35px;
		white-space: nowrap;
	}
	body.home .home-experts .home-section__title .htitle-lg {
		font-size: 24px;
		line-height: 35px;
	}
	body.home .home-experts .home-section__title .htitle-md,
	body.home .home-experts .home-section__title .htitle-sm {
		font-size: 21px;
		line-height: 35px;
	}
	body.home .home-experts .carousel {
		width: 100%;
		max-width: none;
		padding: 0;
	}
	body.home .home-experts .carousel .swiper {
		left: 0;
		width: min(84.7328vw, 333px);
		height: min(198.7277vw, 781px);
		margin-inline: auto;
		padding: min(2.5445vw, 10px) 0 min(7.6336vw, 30px);
	}
	body.home .home-experts .expert-card {
		width: min(40.7125vw, 160px);
		margin-inline: auto;
	}
	body.home .home-experts .expert-card__link {
		gap: 3px;
	}
	body.home .home-experts .expert-card__photo {
		width: min(38.1679vw, 150px);
		aspect-ratio: 1;
	}
	body.home .home-experts .expert-card__photo-inner {
		width: calc(100% - 10px);
		height: calc(100% - 10px);
	}
	body.home .home-experts .expert-card__no {
		left: -3.3333%;
		top: 0;
		width: 33.3333%;
		height: 33.3333%;
		font-size: 16px;
		line-height: 32px;
	}
	body.home .home-experts .expert-card__arrow {
		width: 15px;
		height: 12px;
		margin-top: 7px;
		font-size: 15px;
		line-height: 12px;
	}
	body.home .home-experts .expert-card__name {
		display: grid;
		place-items: center;
		width: 100%;
		height: 36px;
		font-size: 13px;
		font-weight: 700;
		line-height: 19px;
	}
	body.home .home-experts .expert-card__sign {
		display: grid;
		place-items: center;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}
	body.home .home-experts .expert-card__sign img {
		width: auto;
		max-width: 100%;
		max-height: 41px;
	}
	body.home .home-experts .expert-card__sign .hand {
		font-size: 20px;
		line-height: 41px;
		white-space: nowrap;
	}
	body.home .home-experts .expert-card__tags {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		width: 100%;
		margin-top: 3px;
		padding-bottom: 25px;
	}
	body.home .home-experts .expert-card__tags .tns-pill {
		min-width: 70px;
		max-width: 100%;
		margin: 0;
		padding: 4px 10px;
		font-size: 11px;
		line-height: 14px;
	}
	body.home .home-experts .expert-card__tags::after {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 12px;
		margin-top: 0;
		background-image: url("../img/card-divider-full-sp.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.carousel { padding: 0 16px; }
	.carousel__nav { display: none; }

	.expert-intro,
	.expert-feature,
	.expert-feature.is-reverse,
	.expert-info__row,
	.interview-person__row { grid-template-columns: 1fr; gap: 24px; direction: ltr; }
	.interview-person { padding-left: 0; } /* frame-w基準の左86pxインデントはスタック時は不要 */
	/* 1カラム縦積み時は grid-template-areas も1カラム分に再定義(列数不一致で無効化されるのを防ぐ)。
	   見出しのmargin-top(70px系)もスタック時は上と重ならないよう0にリセット。 */
	.interview-person__row { grid-template-areas: "title" "tags" "photo"; }
	.interview-person__title { margin-top: 0; }

	/* はじめまして: 狭幅は縦積み(見出し→dl→CTA→TEL)・中央寄せ */
	.expert-first__box { grid-template-columns: 1fr; grid-template-areas: "title" "list" "cta" "tel"; row-gap: 20px; justify-items: center; }
	.expert-first__title { white-space: normal; text-align: center; }
	.expert-first__list { width: 100%; }
	.expert-first__list > div,
	.expert-info__list > div { grid-template-columns: 1fr; gap: 6px; }

	.editor-message { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px; justify-items: center; }
	.editor-message__body { width: 100%; }
	.tag-search__bubble { position: relative; left: 0; top: 0; margin: 0 auto 24px; width: min(280px, 70vw); }
	/* モバイルはFigmaスタンプ画像を通常フローへ戻し、中央配置して横スクロールを防ぐ。 */
	.home-about__circle { position: relative; left: auto; right: auto; bottom: auto; transform: none; margin: 32px auto 0; }
	.site-footer__nav { width: 100%; }
	/* TOP限定CTA混植(cta-mix-lg/sm): gap:0(T-001でbase側にスコープ済み)は継承されるため
	   ここでの再指定は不要。padding(2.8em)込みで390px等では依然幅超過するため、font-sizeのみ
	   ≤720pxでvw比例に縮小。 */
	.home .tag-search__cta .btn-primary,
	.home .tag-search__cta .btn-primary .cta-mix-lg { font-size: clamp(14px, 5.6vw, 33px); }
	.home .tag-search__cta .btn-primary .cta-mix-sm { font-size: clamp(11px, 4.25vw, 25px); }
}

/* =========================================================
   専門家詳細 — Figma再同期（T-026）
   PC: 4010:1159 / 1728×8819、SP: 4215:10903 / 393×10638。
   グローバルトークンを変更せず、文字組みと座標系をsingle-expert内へ限定する。
   ======================================================= */
body.single-expert {
	--expert-green: #2fb585;
	--expert-ink: #333;
	--expert-unit: clamp(0.78px, 0.05787037vw, 1px);
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	color: var(--expert-ink);
	overflow-x: clip;
}

body.single-expert .expert-hero {
	height: calc(765 * var(--expert-unit));
	min-height: 0;
	max-height: none;
	background-position: center;
	background-repeat: no-repeat;
}
body.single-expert .expert-hero__card {
	right: calc(28 * var(--expert-unit));
	bottom: calc(50 * var(--expert-unit));
	width: calc(520 * var(--expert-unit));
	min-width: 0;
	min-height: calc(222 * var(--expert-unit));
	gap: calc(8 * var(--expert-unit));
	padding: calc(36 * var(--expert-unit)) calc(42 * var(--expert-unit));
	border-radius: calc(24 * var(--expert-unit));
}
body.single-expert .expert-hero__card-name { font-size: calc(24 * var(--expert-unit)); }
body.single-expert .expert-hero__card .tns-pill,
body.single-expert .expert-hero__card .tns-area-pill { font-size: calc(16 * var(--expert-unit)); }
body.single-expert img.expert-hero__card-check {
	right: auto;
	bottom: auto;
	left: 76.5%;
	top: 61.7%;
	width: calc(82 * var(--expert-unit));
	height: auto;
	max-width: none;
	max-height: none;
	aspect-ratio: 82 / 64.9811;
}

body.single-expert .expert-body {
	padding: calc(18 * var(--expert-unit)) 0 calc(70 * var(--expert-unit));
}
body.single-expert .expert-body > * { max-width: none; }
body.single-expert .expert-body > .tns-breadcrumb {
	width: calc(1548 * var(--expert-unit));
	margin-inline: auto;
	font-size: calc(14 * var(--expert-unit));
	line-height: calc(20 * var(--expert-unit));
}
body.single-expert .expert-lead {
	width: calc(1528 * var(--expert-unit));
	margin: calc(86 * var(--expert-unit)) auto 0;
}
body.single-expert .expert-lead .section-title,
body.single-expert .expert-info > .section-title {
	font-size: calc(40 * var(--expert-unit));
	font-weight: 700;
	line-height: calc(63 * var(--expert-unit));
	letter-spacing: -0.03em;
	color: var(--expert-ink);
	margin: 0;
}
body.single-expert .expert-info > .section-title { margin-inline: auto; }
body.single-expert .section-title--dot {
	min-height: calc(83 * var(--expert-unit));
	padding-top: calc(20 * var(--expert-unit));
	padding-left: calc(41 * var(--expert-unit));
}
body.single-expert .section-title--dot::before {
	top: 0;
	width: calc(70 * var(--expert-unit));
	height: calc(70 * var(--expert-unit));
	transform: translate(calc(-29 * var(--expert-unit)), calc(-1 * var(--expert-unit)));
	background: var(--expert-green);
}

body.single-expert .expert-intro {
	width: min(100%, calc(1728 * var(--expert-unit)));
	grid-template-columns: calc(900 * var(--expert-unit)) minmax(0, 1fr);
	gap: calc(80 * var(--expert-unit));
	margin: calc(57 * var(--expert-unit)) auto calc(128 * var(--expert-unit));
	align-items: start;
}
body.single-expert .expert-intro__photo {
	width: calc(900 * var(--expert-unit));
	height: calc(718 * var(--expert-unit));
	margin: 0;
	overflow: hidden;
	border-radius: 0 calc(96 * var(--expert-unit)) calc(96 * var(--expert-unit)) 0;
}
body.single-expert .expert-intro__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
body.single-expert .expert-intro__text {
	width: calc(484 * var(--expert-unit));
	margin-top: calc(94 * var(--expert-unit));
}
body.single-expert .expert-intro__title,
body.single-expert .expert-feature__title {
	display: inline;
	font-weight: 700;
	color: var(--expert-ink);
	letter-spacing: 0.03em;
	background-position: left bottom;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
body.single-expert .expert-intro__title {
	font-size: calc(34 * var(--expert-unit));
	line-height: calc(63 * var(--expert-unit));
}
body.single-expert .expert-intro__text p,
body.single-expert .expert-feature__text p,
body.single-expert .comment-card__text,
body.single-expert .editor-message__text {
	font-size: calc(18 * var(--expert-unit));
	font-weight: 500;
	line-height: calc(44 * var(--expert-unit));
	letter-spacing: -0.03em;
	color: var(--expert-ink);
}
body.single-expert .expert-intro__text p { margin: calc(40 * var(--expert-unit)) 0 0; }
body.single-expert .expert-intro__arrow {
	right: calc(112 * var(--expert-unit));
	bottom: calc(-94 * var(--expert-unit));
	width: calc(90 * var(--expert-unit));
}

body.single-expert .expert-features {
	width: calc(1200 * var(--expert-unit));
	margin: 0 auto;
}
body.single-expert .expert-features > .section-title--bar {
	height: calc(60 * var(--expert-unit));
	margin: 0;
	padding-left: calc(14 * var(--expert-unit));
	border-left: calc(6 * var(--expert-unit)) solid var(--expert-green);
	font-size: calc(34 * var(--expert-unit));
	font-weight: 700;
	line-height: calc(60 * var(--expert-unit));
	color: var(--expert-ink);
}
body.single-expert .expert-feature {
	grid-template-columns: calc(450 * var(--expert-unit)) calc(690 * var(--expert-unit));
	gap: calc(60 * var(--expert-unit));
	min-height: calc(420 * var(--expert-unit));
	margin: calc(75 * var(--expert-unit)) 0 0;
	align-items: start;
}
body.single-expert .expert-feature + .expert-feature { margin-top: calc(102 * var(--expert-unit)); }
body.single-expert .expert-feature__text { padding-top: calc(20 * var(--expert-unit)); }
body.single-expert .expert-feature__title {
	font-size: calc(24 * var(--expert-unit));
	line-height: calc(63 * var(--expert-unit));
}
body.single-expert .expert-feature__text p { margin: calc(30 * var(--expert-unit)) 0 0; }
body.single-expert .expert-feature__photo,
body.single-expert .expert-feature__photo img {
	width: calc(690 * var(--expert-unit));
	height: calc(420 * var(--expert-unit));
}
body.single-expert .expert-feature__photo { overflow: hidden; border-radius: calc(72 * var(--expert-unit)); }
body.single-expert .expert-feature__photo img { object-fit: cover; border-radius: inherit; }

body.single-expert .expert-interview-link {
	width: calc(600 * var(--expert-unit));
	height: calc(100 * var(--expert-unit));
	margin: calc(70 * var(--expert-unit)) auto 0;
	padding: 0;
	display: grid;
	place-items: center;
	border-color: var(--expert-ink);
}
body.single-expert .expert-interview-link a {
	font-size: calc(20 * var(--expert-unit));
	line-height: 1.4;
}

body.single-expert .expert-video {
	position: relative;
	width: calc(1200 * var(--expert-unit));
	height: calc(670 * var(--expert-unit));
	max-width: none;
	padding: 0;
	margin: 0 auto;
	overflow: visible;
	background: #ddd;
	border-radius: calc(72 * var(--expert-unit));
}
body.single-expert .expert-video__poster {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: #ddd;
	border-radius: inherit;
	cursor: pointer;
}
body.single-expert .expert-video__thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
body.single-expert .expert-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(91 * var(--expert-unit));
	height: calc(64 * var(--expert-unit));
	transform: translate(-50%, -50%);
}
body.single-expert .expert-video__play img { width: 100%; height: 100%; }
body.single-expert .expert-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}
body.single-expert .expert-video__arrow {
	position: absolute;
	left: calc(80 * var(--expert-unit));
	bottom: calc(-154 * var(--expert-unit));
	width: calc(95 * var(--expert-unit));
}

body.single-expert .expert-comments {
	margin-top: calc(140 * var(--expert-unit));
	padding: calc(190 * var(--expert-unit)) 0 calc(140 * var(--expert-unit));
	background: var(--white);
}
body.single-expert .expert-comments__inner {
	width: calc(1548 * var(--expert-unit));
	max-width: none;
	grid-template-columns: calc(315 * var(--expert-unit)) minmax(0, 1fr);
	gap: calc(40 * var(--expert-unit));
}
body.single-expert .expert-comments .section-title--hand {
	margin: calc(13 * var(--expert-unit)) 0 0;
	font-family: inherit;
	font-size: calc(40 * var(--expert-unit));
	font-weight: 700;
	line-height: calc(63 * var(--expert-unit));
	letter-spacing: -0.03em;
	color: var(--expert-ink);
}
body.single-expert .expert-comments .section-title__squiggle { margin-top: calc(18 * var(--expert-unit)); }
body.single-expert .expert-comments__grid {
	grid-template-columns: repeat(3, calc(371 * var(--expert-unit)));
	gap: calc(40 * var(--expert-unit));
}
body.single-expert .comment-card {
	min-height: calc(534 * var(--expert-unit));
	margin: 0;
	padding: calc(166 * var(--expert-unit)) calc(20 * var(--expert-unit)) calc(24 * var(--expert-unit));
}
body.single-expert .comment-card__photo {
	top: 0;
	width: calc(140 * var(--expert-unit));
	height: calc(140 * var(--expert-unit));
	outline-width: calc(3 * var(--expert-unit));
	outline-offset: calc(8 * var(--expert-unit));
}
body.single-expert .comment-card__role {
	font-size: calc(18 * var(--expert-unit));
	line-height: calc(34 * var(--expert-unit));
	margin: 0 0 calc(22 * var(--expert-unit));
	padding: calc(16 * var(--expert-unit)) 0;
}
body.single-expert .comment-card__name { font-size: calc(16 * var(--expert-unit)); }
body.single-expert .comment-card__text { margin: 0; }

body.single-expert .expert-first {
	height: calc(690 * var(--expert-unit));
	padding: calc(99 * var(--expert-unit)) 0 0;
	background: var(--white);
	overflow: visible;
	z-index: 1;
}
body.single-expert .expert-first::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(28 * var(--expert-unit));
	width: calc(1286 * var(--expert-unit));
	height: calc(662 * var(--expert-unit));
	transform: translateX(-50%);
	background-color: #faf8f2;
	background-image: url("../img/bubble-texture.png");
	background-repeat: repeat;
	background-size: calc(250 * var(--expert-unit)) calc(250 * var(--expert-unit));
	background-blend-mode: multiply;
	clip-path: polygon(0 10%, 26% 0, 100% 10%, 100% 100%, 0 94%);
}
body.single-expert .expert-first__box {
	position: relative;
	width: calc(1064 * var(--expert-unit));
	max-width: none;
	grid-template-columns: calc(276 * var(--expert-unit)) calc(759 * var(--expert-unit));
	grid-template-areas: "title list" "cta cta" "tel tel";
	column-gap: calc(29 * var(--expert-unit));
	row-gap: 0;
}
body.single-expert .expert-first__title {
	align-self: start;
	justify-self: start;
	left: calc(-18 * var(--expert-unit));
	width: calc(270 * var(--expert-unit));
	min-height: calc(102 * var(--expert-unit));
	margin-top: calc(-7 * var(--expert-unit));
	font-size: calc(40 * var(--expert-unit));
	font-weight: 700;
	line-height: calc(51 * var(--expert-unit));
	letter-spacing: -0.03em;
	text-align: center;
	padding: 0;
}
body.single-expert .expert-first__title::before {
	inset: auto;
	top: calc(-92 * var(--expert-unit));
	left: 0;
	width: calc(270 * var(--expert-unit));
	height: calc(252 * var(--expert-unit));
	background-color: #e8f0d6;
	background-image: url("../img/bubble-texture.png");
	background-size: calc(250 * var(--expert-unit)) calc(250 * var(--expert-unit));
	background-blend-mode: multiply;
	border-radius: 53% 47% 50% 50% / 49% 52% 48% 51%;
}
body.single-expert .expert-first__title::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(-69 * var(--expert-unit));
	z-index: -1;
	width: calc(70 * var(--expert-unit));
	height: calc(50 * var(--expert-unit));
	background-color: #e8f0d6;
	background-image: url("../img/bubble-texture.png");
	background-size: calc(250 * var(--expert-unit)) calc(250 * var(--expert-unit));
	background-blend-mode: multiply;
	clip-path: polygon(0 0, 100% 100%, 16% 76%);
}
body.single-expert .expert-first__list {
	position: relative;
	left: calc(19 * var(--expert-unit));
	width: calc(759 * var(--expert-unit));
}
body.single-expert .expert-first__list > div {
	grid-template-columns: calc(140 * var(--expert-unit)) calc(600 * var(--expert-unit));
	gap: calc(19 * var(--expert-unit));
	min-height: 0;
	padding: 0 0 calc(17 * var(--expert-unit));
	margin-bottom: calc(20 * var(--expert-unit));
	border-bottom: calc(4 * var(--expert-unit)) dashed #cfcfcf;
	align-items: stretch;
}
body.single-expert .expert-first__list dt,
body.single-expert .expert-info__list dt {
	display: grid;
	place-items: center;
	padding: calc(14 * var(--expert-unit)) calc(25 * var(--expert-unit));
	border-radius: 0;
	background: #efefef;
	font-size: calc(20 * var(--expert-unit));
	font-weight: 700;
	line-height: calc(48 * var(--expert-unit));
	letter-spacing: -0.03em;
}
body.single-expert .expert-first__list dd,
body.single-expert .expert-info__list dd {
	align-self: center;
	font-size: calc(20 * var(--expert-unit));
	font-weight: 500;
	line-height: calc(48 * var(--expert-unit));
	letter-spacing: -0.03em;
}
body.single-expert .expert-first__list dt {
	min-height: calc(50 * var(--expert-unit));
	padding: 0 calc(25 * var(--expert-unit));
}
body.single-expert .expert-first__list dd { line-height: calc(38 * var(--expert-unit)); }
body.single-expert .expert-first__list > div:nth-child(1) dd,
body.single-expert .expert-first__list > div:nth-child(3) dd { min-height: calc(76 * var(--expert-unit)); }
body.single-expert .expert-first__cta { margin: calc(59 * var(--expert-unit)) 0 0; }
body.single-expert .expert-first__cta .btn-primary,
body.single-expert .expert-info__cta .btn-primary {
	justify-content: center;
	width: calc(483 * var(--expert-unit));
	height: calc(80 * var(--expert-unit));
	padding: 0 calc(42 * var(--expert-unit));
	background: var(--expert-green);
	font-size: calc(34 * var(--expert-unit));
	line-height: calc(44 * var(--expert-unit));
}
body.single-expert .expert-first__tel,
body.single-expert .expert-info__tel { margin: 0; }
body.single-expert .expert-first__tel { margin-top: calc(16 * var(--expert-unit)); }
body.single-expert .expert-info__tel { margin-inline: auto; }
body.single-expert .expert-first__arrow {
	left: calc(50% + (197 * var(--expert-unit)));
	right: auto;
	bottom: calc(-151 * var(--expert-unit));
	z-index: 2;
	width: calc(160 * var(--expert-unit));
	transform: scaleX(-1);
}

body.single-expert .expert-info {
	padding: calc(277 * var(--expert-unit)) 0 calc(100 * var(--expert-unit));
	background: var(--white);
}
body.single-expert .expert-info > * { width: calc(1200 * var(--expert-unit)); max-width: none; }
body.single-expert .expert-info__map {
	height: calc(540 * var(--expert-unit));
	margin: calc(38 * var(--expert-unit)) auto 0;
	border: calc(6 * var(--expert-unit)) solid #dfdcdc;
	border-radius: calc(50 * var(--expert-unit));
}
body.single-expert .expert-info__map iframe { height: 100%; }
body.single-expert .expert-info__row {
	grid-template-columns: calc(390 * var(--expert-unit)) calc(759 * var(--expert-unit));
	gap: calc(54 * var(--expert-unit));
	margin: calc(50 * var(--expert-unit)) auto 0;
}
body.single-expert .expert-info__photo,
body.single-expert .expert-info__photo img {
	width: calc(390 * var(--expert-unit));
	height: calc(370 * var(--expert-unit));
}
body.single-expert .expert-info__photo { overflow: hidden; border-radius: calc(50 * var(--expert-unit)); }
body.single-expert .expert-info__photo img { object-fit: cover; border-radius: inherit; }
body.single-expert .expert-info__list { width: calc(759 * var(--expert-unit)); }
body.single-expert .expert-info__list > div {
	grid-template-columns: calc(140 * var(--expert-unit)) calc(600 * var(--expert-unit));
	gap: calc(19 * var(--expert-unit));
	min-height: calc(64 * var(--expert-unit));
	padding: 0 0 calc(15 * var(--expert-unit));
	margin-bottom: calc(12 * var(--expert-unit));
	border-bottom: calc(4 * var(--expert-unit)) dashed #cfcfcf;
}
body.single-expert .expert-info__list dt {
	padding: 0 calc(12 * var(--expert-unit));
}
body.single-expert .expert-info__list dd a { font-size: calc(16 * var(--expert-unit)); letter-spacing: .03em; }
body.single-expert .expert-info__sns { gap: calc(10 * var(--expert-unit)); }
body.single-expert .expert-info__sns svg { width: calc(30 * var(--expert-unit)); height: calc(30 * var(--expert-unit)); }
body.single-expert .expert-info__cta { margin: calc(50 * var(--expert-unit)) auto calc(16 * var(--expert-unit)); }
body.single-expert .expert-info__tel a,
body.single-expert .expert-first__tel a { font-size: calc(22 * var(--expert-unit)); }
body.single-expert .expert-info__tel span,
body.single-expert .expert-first__tel span { font-size: calc(14 * var(--expert-unit)); }

body.single-expert .editor-message-section {
	padding: 0 0 calc(140 * var(--expert-unit));
	background: var(--white);
}
body.single-expert .expert-info:has(+ .editor-message-section) { padding-bottom: calc(130 * var(--expert-unit)); }
body.single-expert .editor-message {
	width: calc(1000 * var(--expert-unit));
	height: calc(484 * var(--expert-unit));
	max-width: none;
	grid-template-columns: calc(260 * var(--expert-unit)) minmax(0, 1fr);
	gap: calc(62 * var(--expert-unit));
	padding: calc(60 * var(--expert-unit));
	background-color: #fbfbfb;
	background-size: calc(28 * var(--expert-unit)) calc(28 * var(--expert-unit));
	border-radius: calc(50 * var(--expert-unit));
}
body.single-expert .editor-message__photo img {
	width: calc(260 * var(--expert-unit));
	height: calc(220 * var(--expert-unit));
	clip-path: polygon(18% 4%, 78% 0%, 100% 25%, 95% 80%, 66% 100%, 8% 87%, 0 35%);
}
body.single-expert .editor-message__label {
	top: calc(-12 * var(--expert-unit));
	left: calc(22 * var(--expert-unit));
	font-family: inherit;
	font-size: calc(16 * var(--expert-unit));
	font-weight: 500;
	line-height: calc(38 * var(--expert-unit));
	letter-spacing: -0.03em;
}
body.single-expert .editor-message__title {
	font-size: calc(24 * var(--expert-unit));
	line-height: calc(63 * var(--expert-unit));
	letter-spacing: .03em;
	margin: 0 0 calc(20 * var(--expert-unit));
}
body.single-expert .editor-message__writer {
	font-size: calc(18 * var(--expert-unit));
	line-height: calc(63 * var(--expert-unit));
	letter-spacing: .03em;
	margin: 0 0 calc(20 * var(--expert-unit));
}
body.single-expert .editor-message__link { margin: calc(24 * var(--expert-unit)) 0 0; }
body.single-expert .editor-message__link a { font-size: calc(20 * var(--expert-unit)); }
body.single-expert .editor-message__arrow { width: calc(48 * var(--expert-unit)); height: calc(48 * var(--expert-unit)); }

@media (min-width: 1600px) {
	body.single-expert .tag-search {
		padding-top: 62px;
		padding-bottom: 167px;
	}
	body.single-expert .tag-search__band { min-height: 292px; }
	body.single-expert .tag-search__cta { transform: translateY(calc(-50% + 2px)); }
	body.single-expert .tag-search__cta .btn-primary {
		justify-content: center;
		width: 660px;
		height: 110px;
		padding: 0;
		gap: 34px;
		font-size: 42px;
	}
}

@media (max-width: 720px) {
	body.single-expert { --expert-unit: 1px; }
	body.single-expert .expert-hero {
		height: 561px;
		background-size: auto 561px;
		background-position: center top;
	}
	body.single-expert .expert-hero__card {
		right: 18px;
		bottom: 28px;
		width: 220px;
		min-height: 112px;
		padding: 16px 18px;
		border-radius: 16px;
	}
	body.single-expert .expert-hero__card-name { font-size: 15px; }
	body.single-expert .expert-hero__card .tns-pill,
	body.single-expert .expert-hero__card .tns-area-pill { font-size: 11px; }
	body.single-expert img.expert-hero__card-check {
		left: auto;
		right: 19.93px;
		top: 62.8571%;
		width: 40.381px;
	}
	body.single-expert .expert-body { padding: 18px 0 70px; }
	body.single-expert .expert-body > .tns-breadcrumb { width: 353px; max-width: calc(100% - 40px); font-size: 14px; line-height: 20px; }
	body.single-expert .expert-lead { width: 351px; max-width: calc(100% - 42px); margin-top: 104px; }
	body.single-expert .expert-lead .section-title,
	body.single-expert .expert-info > .section-title {
		font-size: 28px;
		line-height: 43px;
		letter-spacing: -.03em;
	}
	body.single-expert .section-title--dot { min-height: 0; padding-top: 28px; padding-left: 30px; }
	body.single-expert .section-title--dot::before { width: 48px; height: 48px; transform: translate(-20px,-2px); }
	body.single-expert .expert-intro {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr;
		gap: 0;
		margin: 27px 0 163px;
	}
	body.single-expert .expert-intro__photo {
		width: 363px;
		height: 281px;
		border-radius: 0 44px 44px 0;
	}
	body.single-expert .expert-intro__text { width: 333px; margin: 50px auto 0; }
	body.single-expert .expert-intro__title {
		font-size: 24px;
		line-height: 57px;
		letter-spacing: .03em;
	}
	body.single-expert .expert-intro__text p,
	body.single-expert .expert-feature__text p,
	body.single-expert .comment-card__text,
	body.single-expert .editor-message__text {
		font-size: 18px;
		font-weight: 500;
		line-height: 44px;
		letter-spacing: -.03em;
	}
	body.single-expert .expert-intro__text p { margin-top: 38px; min-height: 616px; }
	body.single-expert .expert-intro__arrow { right: 42px; bottom: -104px; width: 76px; }
	body.single-expert .expert-features { width: 100%; }
	body.single-expert .expert-features > .section-title--bar {
		width: 349px;
		height: auto;
		margin-left: 30px;
		padding-left: 14px;
		border-left-width: 6px;
		font-size: 26px;
		line-height: 41px;
	}
	body.single-expert .expert-feature,
	body.single-expert .expert-feature.is-reverse {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
		margin: 50px 0 0;
		direction: ltr;
	}
	body.single-expert .expert-feature + .expert-feature { margin-top: 91px; }
	body.single-expert .expert-feature__text { width: 337px; margin: 0 auto; padding: 0; }
	body.single-expert .expert-feature__title { font-size: 24px; line-height: 57px; letter-spacing: .03em; }
	body.single-expert .expert-feature__text p { margin-top: 28px; min-height: 352px; }
	body.single-expert .expert-feature + .expert-feature .expert-feature__text p { min-height: 176px; }
	body.single-expert .expert-feature__photo,
	body.single-expert .expert-feature__photo img {
		width: 300px;
		height: 183px;
	}
	body.single-expert .expert-feature__photo { order: 2; margin: 30px auto 0; border-radius: 36px; }
	body.single-expert .expert-interview-link {
		width: 330px;
		height: 100px;
		margin-top: 58px;
	}
	body.single-expert .expert-interview-link a { font-size: 20px; }
	body.single-expert .expert-video { width: 360px; height: 201px; border-radius: 36px; }
	body.single-expert .expert-video__play { width: 55px; height: 39px; }
	body.single-expert .expert-video__arrow { left: 20px; bottom: -110px; width: 70px; }
	body.single-expert .expert-comments { margin-top: 170px; padding: 0; }
	body.single-expert .expert-comments__inner {
		display: block;
		width: 100%;
	}
	body.single-expert .expert-comments .section-title--hand {
		width: 333px;
		margin: 0 auto 78px;
		font-size: 28px;
		line-height: 43px;
		letter-spacing: -.03em;
	}
	body.single-expert .expert-comments__grid { display: grid; width: 293px; grid-template-columns: 293px; gap: 37px; margin: 0 auto; }
	body.single-expert .comment-card {
		min-height: 635px;
		padding: 169px 0 24px;
	}
	body.single-expert .comment-card__photo { width: 140px; height: 140px; }
	body.single-expert .comment-card__role { font-size: 18px; line-height: 34px; }
	body.single-expert .comment-card__name { display: block; font-size: 16px; }
	body.single-expert .comment-card__name::before { content: ""; margin: 0; }
	body.single-expert .expert-first {
		height: 1065px;
		padding: 55px 0 0;
	}
	body.single-expert .expert-first::before {
		top: 0;
		width: 353px;
		height: 1030px;
		background-size: 250px 250px;
		clip-path: polygon(0 7%, 30% 0, 100% 8%, 100% 100%, 0 94%);
	}
	body.single-expert .expert-first__box {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas: "title" "list" "cta" "tel";
		row-gap: 0;
	}
	body.single-expert .expert-first__title {
		left: 0;
		width: 173px;
		min-height: 78px;
		margin-top: 0;
		font-size: 28px;
		line-height: 39px;
		letter-spacing: -.03em;
		text-align: center;
		justify-self: center;
		white-space: nowrap;
	}
	body.single-expert .expert-first__title::before {
		top: -60px;
		left: 0;
		width: 173px;
		height: 165px;
		background-size: 250px 250px;
	}
	body.single-expert .expert-first__title::after {
		right: -1px;
		bottom: -35px;
		width: 46px;
		height: 34px;
		background-size: 250px 250px;
	}
	body.single-expert .expert-first__list { left: 0; width: 313px; margin: 82px auto 0; }
	body.single-expert .expert-first__list > div,
	body.single-expert .expert-info__list > div {
		display: grid;
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 0 0 20px;
		margin-bottom: 20px;
		border-bottom-width: 4px;
	}
	body.single-expert .expert-first__list dt,
	body.single-expert .expert-info__list dt {
		justify-self: stretch;
		padding: 0;
		font-size: 20px;
		line-height: 48px;
	}
	body.single-expert .expert-first__list > div { padding-bottom: 17px; }
	body.single-expert .expert-first__list dt {
		min-height: 42px;
		line-height: 42px;
	}
	body.single-expert .expert-first__list dd,
	body.single-expert .expert-info__list dd {
		font-size: 20px;
		line-height: 38px;
	}
	body.single-expert .expert-first__list > div:nth-child(1) dd { min-height: 114px; }
	body.single-expert .expert-first__list > div:nth-child(2) dd { min-height: 38px; }
	body.single-expert .expert-first__list > div:nth-child(3) dd { min-height: 152px; }
	body.single-expert .expert-first__cta { margin-top: 40px; }
	body.single-expert .expert-first__cta .btn-primary,
	body.single-expert .expert-info__cta .btn-primary {
		width: 300px;
		height: 50px;
		padding: 0;
		font-size: 18px;
		line-height: 1;
	}
	body.single-expert .expert-first__tel { margin-top: 16px; }
	body.single-expert .expert-first__arrow {
		left: auto;
		right: 44px;
		bottom: -33px;
		width: 80px;
		transform: scaleX(-1);
	}
	body.single-expert .expert-info {
		padding: 71px 0 102px;
	}
	body.single-expert .expert-info > * { width: 353px; max-width: calc(100% - 40px); }
	body.single-expert .expert-info > .section-title { width: 353px; max-width: 100%; }
	body.single-expert .expert-info__map {
		width: 341px;
		height: 308px;
		margin-top: 38px;
		border-width: 6px;
		border-radius: 30px;
	}
	body.single-expert .expert-info__row {
		display: flex;
		flex-direction: column;
		gap: 42px;
		width: 353px;
		margin-top: 42px;
	}
	body.single-expert .expert-info__photo { display: none; }
	body.single-expert .expert-info__photo,
	body.single-expert .expert-info__photo img { width: 341px; height: 240px; }
	body.single-expert .expert-info__photo { margin-inline: auto; border-radius: 30px; }
	body.single-expert .expert-info__list { width: 353px; }
	body.single-expert .expert-info__list dd a { font-size: 16px; }
	body.single-expert .expert-info__cta { margin-top: 0; }
	body.single-expert .expert-info__tel { margin-top: 14px; }
	body.single-expert .editor-message-section { padding: 0 0 10px; }
	body.single-expert .expert-info:has(+ .editor-message-section) { padding-bottom: 83px; }
	body.single-expert .editor-message {
		width: 353px;
		height: 832px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		padding: 40px 20px;
		border-radius: 30px;
	}
	body.single-expert .editor-message__photo img { width: 220px; height: 190px; }
	body.single-expert .editor-message__label { top: -2px; left: 64px; font-size: 16px; line-height: 38px; }
	body.single-expert .editor-message__body { margin-top: 38px; }
	body.single-expert .editor-message__title { font-size: 24px; line-height: 63px; letter-spacing: .03em; margin-bottom: 0; }
	body.single-expert .editor-message__writer { font-size: 18px; line-height: 63px; letter-spacing: .03em; margin-bottom: 0; }
	body.single-expert .editor-message__text { min-height: 352px; margin-top: 0; }
	body.single-expert .editor-message__link { margin-top: 28px; text-align: center; }
	body.single-expert .editor-message__link a { font-size: 20px; }
	body.single-expert .editor-message__arrow { width: 48px; height: 48px; }
	body.single-expert .tag-search { padding-bottom: 85px; }
	body.single-expert .tag-search__bubble {
		width: 240px;
		margin: 0 0 -8px 20px;
	}
	body.single-expert .tag-search__band { min-height: 134px; }
	body.single-expert .tag-search__cta .btn-primary {
		justify-content: center;
		width: 300px;
		height: 50px;
		padding: 0;
		font-size: 18px;
		line-height: 1;
	}
	body.single-expert .site-footer { padding-block: 40px; }
}

/* 600px以下でのみ検索結果カードを縦積みにする。
   601〜720pxはFigmaの横長カード構成を縮小して維持する。 */
@media (max-width: 600px) {
	.expert-result { display: block; }
	.expert-result__content { padding-top: 20px; }
}

/* =========================================================
   インタビュー詳細 — Figma再同期（2026-07-27）
   PC: 4132:4217 / 1728×8353、SP: 4241:13873 / 393×10632。
   既存の共有entry-contentやボタンへ波及させずsingle-interview内で完結する。
   ======================================================= */
body.single-interview {
	--interview-green: #2fb585;
	--interview-ink: #333;
	--interview-unit: clamp(.78px, .05787037vw, 1px);
	overflow-x: clip;
}
body.single-interview .interview-single {
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	color: var(--interview-ink);
	overflow-x: clip;
}
body.single-interview .interview-page-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
body.single-interview .site-footer {
	--green: var(--interview-green);
	--green-dark: var(--interview-green);
	background: var(--interview-green);
}

/* I-1: PCヒーロー。1728px時に左写真864×911、右パネル864px。 */
body.single-interview .interview-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	align-items: stretch;
	width: min(100%, 1728px);
	max-width: 1728px;
	height: calc(911 * var(--interview-unit));
	margin-inline: auto;
}
body.single-interview .interview-hero__photo {
	position: relative;
	min-width: 0;
	overflow: hidden;
}
body.single-interview .interview-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.single-interview .interview-hero__panel {
	min-width: 0;
	padding: calc(150 * var(--interview-unit)) calc(132 * var(--interview-unit)) 0;
}
body.single-interview .interview-hero .tns-breadcrumb {
	margin: 0;
	color: var(--interview-ink);
	font-size: calc(14 * var(--interview-unit));
	line-height: calc(20 * var(--interview-unit));
}
body.single-interview .interview-hero .tns-breadcrumb a,
body.single-interview .interview-hero .tns-breadcrumb li + li::before {
	color: var(--interview-ink);
}
body.single-interview .interview-hero__title {
	margin: calc(58 * var(--interview-unit)) 0 0;
}
body.single-interview .interview-hero__bubble {
	display: grid;
	place-items: center;
	width: 100%;
	height: calc(269 * var(--interview-unit));
	min-height: 0;
	padding: calc(39 * var(--interview-unit)) calc(25 * var(--interview-unit));
	border-radius: calc(46 * var(--interview-unit));
	background: #eaf0db;
}
body.single-interview .interview-hero__bubble::after {
	left: calc(109 * var(--interview-unit));
	bottom: calc(-54 * var(--interview-unit));
	width: calc(55 * var(--interview-unit));
	height: calc(54 * var(--interview-unit));
	background: #eaf0db;
	clip-path: polygon(0 0, 100% 0, 45% 100%);
}
body.single-interview .interview-hero__bubble img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
body.single-interview .interview-hero__bubble .hand {
	font-size: calc(34 * var(--interview-unit));
	line-height: 1.75;
}
body.single-interview .interview-hero__profile {
	gap: calc(20 * var(--interview-unit));
	margin-top: calc(69 * var(--interview-unit));
}
body.single-interview .interview-hero__avatar {
	width: calc(120 * var(--interview-unit));
	height: calc(120 * var(--interview-unit));
	margin: 0;
	outline-width: calc(3 * var(--interview-unit));
	outline-offset: calc(-4 * var(--interview-unit));
}
body.single-interview .interview-hero__shop {
	margin-bottom: calc(4 * var(--interview-unit));
	font-size: calc(24 * var(--interview-unit));
	line-height: calc(38 * var(--interview-unit));
}
body.single-interview .interview-hero__sign img {
	max-height: calc(50 * var(--interview-unit));
}
body.single-interview .interview-hero__sign .hand {
	font-size: calc(28 * var(--interview-unit));
}
body.single-interview .interview-hero__bio {
	margin: calc(21 * var(--interview-unit)) 0 0;
	font-size: calc(16 * var(--interview-unit));
	font-weight: 500;
	line-height: calc(38 * var(--interview-unit));
}
body.single-interview .interview-hero__arrow {
	position: absolute;
	z-index: 1;
	top: calc(945 * var(--interview-unit));
	left: calc(230 * var(--interview-unit));
	width: calc(112 * var(--interview-unit));
	height: calc(156 * var(--interview-unit));
	margin: 0;
	object-fit: contain;
	transform: scaleX(-1);
}

/* I-2: 人物写真は右端まで900×718、左に見出しと590pxのタグ列。 */
body.single-interview .interview-body {
	padding: calc(220 * var(--interview-unit)) 24px 90px;
}
body.single-interview .interview-body > * {
	max-width: 1000px;
}
body.single-interview .interview-person {
	width: calc(100% + 48px);
	max-width: 1728px;
	height: calc(718 * var(--interview-unit));
	margin: 0 -24px calc(44 * var(--interview-unit));
	padding: 0 0 0 calc(150 * var(--interview-unit));
}
body.single-interview .interview-person__row {
	position: relative;
	display: block;
	height: 100%;
}
body.single-interview .interview-person__title {
	position: absolute;
	top: calc(55 * var(--interview-unit));
	left: 0;
	width: calc(590 * var(--interview-unit));
	margin: 0;
	padding-left: calc(30 * var(--interview-unit));
	font-size: calc(35 * var(--interview-unit));
	line-height: calc(55 * var(--interview-unit));
	letter-spacing: -.03em;
	z-index: 0;
}
body.single-interview .interview-person__title::before,
body.single-interview .entry-content h1::before {
	width: calc(70 * var(--interview-unit));
	height: calc(70 * var(--interview-unit));
	top: 0;
	left: 0;
	border-radius: 0;
	background: url("../img/interview-heading-blob.svg") center / contain no-repeat;
	clip-path: none;
	z-index: -1;
}
body.single-interview .interview-person__tags {
	position: absolute;
	top: calc(185 * var(--interview-unit));
	left: 0;
	width: calc(590 * var(--interview-unit));
	gap: calc(20 * var(--interview-unit));
}
body.single-interview .interview-person .tns-pill--hash {
	margin: 0;
	font-size: calc(26 * var(--interview-unit));
	line-height: calc(33 * var(--interview-unit));
	padding: calc(15 * var(--interview-unit)) calc(20 * var(--interview-unit));
	border-radius: 999px;
}
body.single-interview .interview-person__photo {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(900 * var(--interview-unit));
	height: calc(718 * var(--interview-unit));
	margin: 0;
	border-radius: calc(30 * var(--interview-unit)) 0 0 calc(30 * var(--interview-unit));
}
body.single-interview .interview-person__photo img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* I-3: 記事本文。PCカラム1100pxとFigmaの見出し階層を維持する。 */
body.single-interview .entry-content {
	max-width: 1100px;
	color: var(--interview-ink);
}
body.single-interview .entry-content h1 {
	position: relative;
	z-index: 0;
	padding-left: 30px;
	font-size: 40px;
	line-height: 70px;
	letter-spacing: -.03em;
}
body.single-interview .entry-content h2 {
	font-size: 36px;
	line-height: 1.9;
}
body.single-interview .entry-content h3 {
	border-left-color: var(--interview-green);
	font-size: 34px;
	line-height: 1.55;
}
body.single-interview .entry-content h4 {
	border-bottom-color: #73c5a8;
	font-size: 28px;
	line-height: 1.65;
}
body.single-interview .entry-content h5 {
	border-color: #73c5a8;
	font-size: 26px;
	line-height: 1.5;
}
body.single-interview .entry-content h6 {
	color: var(--interview-ink);
	font-size: 20px;
	line-height: 1.55;
}
body.single-interview .entry-content h6::before,
body.single-interview .entry-content ul li::marker {
	color: var(--interview-green);
}
body.single-interview .entry-content p,
body.single-interview .entry-content li,
body.single-interview .entry-content blockquote {
	font-size: 18px;
	font-weight: 500;
}
body.single-interview .entry-content p,
body.single-interview .entry-content blockquote {
	line-height: 44px;
}

/* 引用は本文カラムより左右50pxずつ広げ、右下に出典種別を表示する。 */
body.single-interview .entry-content blockquote {
	width: min(1200px, calc(100vw - 48px));
	max-width: none;
	margin-left: 50%;
	margin-right: 0;
	padding: 50px 50px 62px;
	border-radius: 50px;
	background: #ecf9f5;
	transform: translateX(-50%);
}
body.single-interview .entry-content blockquote::after {
	content: "引用";
	position: absolute;
	right: 50px;
	bottom: 28px;
	color: #858585;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
}

/* I-4: 動画はFigmaのサムネイル状態を初期表示し、クリック後にiframeへ置換する。 */
body.single-interview .interview-video {
	position: relative;
	width: min(100%, 1000px);
	max-width: 1000px;
	aspect-ratio: 1000 / 553;
	margin: 80px auto 0;
	border-radius: 0;
	background: #ddd;
}
body.single-interview .interview-video__poster {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: #ddd;
	cursor: pointer;
}
body.single-interview .interview-video__thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.single-interview .interview-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 91px;
	height: 64px;
	transform: translate(-50%, -50%);
}
body.single-interview .interview-video__play img {
	width: 100%;
	height: 100%;
}
body.single-interview .interview-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* I-5: 店舗導線。PC 800×80、SP 300×60。 */
body.single-interview .interview-shop-link {
	width: min(100%, 800px);
	max-width: 800px;
	margin: 50px auto 0;
}
body.single-interview .interview-shop-link .btn-primary {
	position: relative;
	isolation: isolate;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 80px;
	padding: 0 41px;
	overflow: hidden;
	border-radius: 100px;
	background: var(--interview-green);
	color: #fdfdfd;
	font-size: 30px;
	line-height: 44px;
}
body.single-interview .interview-shop-link .btn-primary::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: url("../img/noise.png") center / cover;
	opacity: .25;
	pointer-events: none;
}
body.single-interview .interview-shop-link__label {
	display: block;
	flex: 0 0 660px;
	text-align: right;
	white-space: nowrap;
}
body.single-interview .interview-shop-link .btn-primary__arrow {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin-left: 0;
	background: transparent;
}
body.single-interview .interview-shop-link .btn-primary__arrow img {
	width: 100%;
	height: 100%;
}

/* 1280px未満はSPと同じ情報順へ切り替え、タブレットでは幅だけ流動化する。
   PC人物紹介の590pxタグ列と900px写真が重ならない最小幅を境界にする。 */
@media (max-width: 1279px) {
	body.single-interview .interview-hero {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
	}
	body.single-interview .interview-hero__photo {
		order: 1;
		width: 100%;
		aspect-ratio: 393 / 320;
	}
	body.single-interview .interview-hero__img {
		position: absolute;
		height: 100%;
		aspect-ratio: auto;
	}
	body.single-interview .interview-hero__panel {
		order: 2;
		width: 100%;
		padding: 20px 30px 0;
	}
	body.single-interview .interview-hero__arrow {
		position: static;
		order: 3;
		width: 56px;
		height: 78px;
		margin: 30px 0 30px 50px;
		transform: scaleX(-1);
	}
	body.single-interview .interview-body {
		padding: 0 30px 90px;
	}
	body.single-interview .interview-person {
		width: calc(100% + 30px);
		height: auto;
		margin: 0 -30px 64px 0;
		padding: 0;
	}
	body.single-interview .interview-person__row {
		display: flex;
		flex-direction: column;
		height: auto;
		gap: 0;
	}
	body.single-interview .interview-person__photo {
		position: relative;
		order: 1;
		width: 100%;
		height: auto;
		margin-left: 0;
		aspect-ratio: 363 / 290;
		border-radius: 30px 0 0 30px;
	}
	body.single-interview .interview-person__title {
		position: relative;
		order: 2;
		top: auto;
		left: auto;
		width: calc(100% - 30px);
		margin: 50px 0 0;
		padding-left: 30px;
		font-size: 28px;
		line-height: 43px;
	}
	body.single-interview .interview-person__tags {
		position: relative;
		order: 3;
		top: auto;
		left: auto;
		width: calc(100% - 30px);
		margin: 61px 0 0;
		gap: 10px;
	}
	body.single-interview .entry-content {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 720px) {
	/* Figma SPヘッダー: logo 312×67 / copy 228×58 / menu 40×40。 */
	body.single-interview .site-header {
		height: 172px;
		padding: 0;
	}
	body.single-interview .site-header__brand {
		position: absolute;
		top: 10.1781vw;
		left: 5.3435vw;
	}
	body.single-interview .site-logo img {
		width: 79.3893vw;
		max-width: none;
	}
	body.single-interview .site-tagline {
		width: 58.0153vw;
		margin: 1.7812vw 0 0 -0.2545vw;
		gap: 2px;
	}
	body.single-interview .site-tagline__chip {
		padding: .6727em .8636em;
		font-size: 11px;
		line-height: 1.2;
	}
	body.single-interview .site-tagline__chip--sub {
		margin-left: 62.72%;
	}
	body.single-interview .interview-hero__panel {
		padding: 20px 20px 0;
	}
	body.single-interview .interview-hero .tns-breadcrumb {
		font-size: 14px;
		line-height: 20px;
	}
	body.single-interview .interview-hero__title {
		margin: 34px 1px 0;
	}
	body.single-interview .interview-hero__bubble {
		width: 100%;
		height: 157px;
		padding: 24px 25px;
		border-radius: 30px;
	}
	body.single-interview .interview-hero__bubble::after {
		left: 58px;
		bottom: -32px;
		width: 38px;
		height: 32px;
	}
	body.single-interview .interview-hero__bubble .hand {
		font-size: 24px;
		line-height: 1.7;
	}
	body.single-interview .interview-hero__profile {
		gap: 20px;
		margin: 60px 1px 0;
	}
	body.single-interview .interview-hero__avatar {
		width: 100px;
		height: 100px;
		outline-width: 3px;
		outline-offset: -4px;
	}
	body.single-interview .interview-hero__shop {
		font-size: 18px;
		line-height: 28px;
	}
	body.single-interview .interview-hero__sign img { max-height: 42px; }
	body.single-interview .interview-hero__sign .hand { font-size: 24px; }
	body.single-interview .interview-hero__bio {
		margin-top: 20px;
		font-size: 16px;
		line-height: 38px;
	}
	body.single-interview .interview-body {
		padding: 0 30px 90px;
	}
	body.single-interview .interview-person .tns-pill--hash {
		font-size: 16px;
		line-height: 24px;
		padding: 10px 15px;
		border-radius: 999px;
	}
	body.single-interview .interview-person__title::before,
	body.single-interview .entry-content h1::before {
		width: 70px;
		height: 70px;
	}
	body.single-interview .entry-content h1 {
		padding-left: 30px;
		font-size: 28px;
		line-height: 43px;
	}
	body.single-interview .entry-content h2 {
		padding: 14px 25px;
		font-size: 28px;
		line-height: 43px;
	}
	body.single-interview .entry-content h3 {
		border-left-width: 6px;
		padding-left: 14px;
		font-size: 24px;
		line-height: 38px;
	}
	body.single-interview .entry-content h4 {
		font-size: 22px;
		line-height: 34px;
	}
	body.single-interview .entry-content h5 {
		padding: 20px 15px;
		font-size: 20px;
		line-height: 33px;
	}
	body.single-interview .entry-content h6 {
		font-size: 20px;
		line-height: 31px;
	}
	body.single-interview .entry-content p,
	body.single-interview .entry-content li,
	body.single-interview .entry-content blockquote {
		font-size: 18px;
	}
	body.single-interview .entry-content p,
	body.single-interview .entry-content blockquote {
		line-height: 44px;
	}
	body.single-interview .entry-content ul,
	body.single-interview .entry-content ol {
		line-height: 31px;
	}
	body.single-interview .entry-content blockquote {
		width: 100%;
		margin-left: 0;
		padding: 30px 30px 52px;
		border-radius: 50px;
		transform: none;
	}
	body.single-interview .entry-content blockquote::after {
		right: 30px;
		bottom: 27px;
		font-size: 16px;
	}
	body.single-interview .interview-video {
		width: 100%;
		aspect-ratio: 333 / 184.149;
		margin-top: 80px;
	}
	body.single-interview .interview-video__play {
		width: 30px;
		height: 21px;
	}
	body.single-interview .interview-shop-link {
		width: 300px;
		margin-top: 31px;
	}
	body.single-interview .interview-shop-link .btn-primary {
		gap: 10px;
		width: 300px;
		height: 60px;
		padding: 0 33px;
		font-size: 16px;
		line-height: 24px;
		text-align: left;
	}
	body.single-interview .interview-shop-link__label {
		display: flex;
		flex: 0 0 210px;
		flex-direction: column;
		text-align: left;
		white-space: normal;
	}
	body.single-interview .interview-shop-link .btn-primary__arrow {
		width: 30px;
		height: 30px;
		margin-left: 0;
	}
	body.single-interview .site-footer {
		padding-block: 40px;
	}
}

/* =========================================================
   Interview story rows — editorial three-column experiment
   ======================================================= */
body.single-interview .entry-content:has(> .interview-story-row) {
	max-width: 1280px;
}

body.single-interview .entry-content > .interview-story-row {
	margin: clamp(110px, 10vw, 170px) auto;
	padding: 0;
}

body.single-interview .entry-content > .interview-story-row > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(360px, 1.35fr) minmax(320px, 1fr) minmax(150px, .42fr);
	grid-template-areas: "image copy heading";
	align-items: start;
	gap: clamp(28px, 3.2vw, 52px);
}

body.single-interview .entry-content > .interview-story-row:nth-child(even) > .wp-block-group__inner-container {
	grid-template-columns: minmax(150px, .42fr) minmax(320px, 1fr) minmax(360px, 1.35fr);
	grid-template-areas: "heading copy image";
}

body.single-interview .interview-story-row > .wp-block-group__inner-container > h2 {
	grid-area: heading;
	justify-self: center;
	width: 100%;
	height: clamp(460px, 43vw, 620px);
	min-height: 0;
	max-height: 620px;
	margin: 0;
	padding: 8px 18px;
	border-right: 12px solid var(--interview-green);
	border-radius: 0;
	background: transparent;
	font-size: clamp(28px, 2.2vw, 34px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	overflow-wrap: anywhere;
	writing-mode: vertical-rl;
}

body.single-interview .entry-content > .interview-story-row:nth-child(even) > .wp-block-group__inner-container > h2 {
	border-right: 0;
	border-left: 12px solid var(--interview-green);
}

body.single-interview .interview-story-copy {
	grid-area: copy;
	align-self: center;
	margin: 0;
}

body.single-interview .interview-story-copy > .wp-block-group__inner-container > p {
	margin: 0 0 1.65em;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 2.05;
}

body.single-interview .interview-story-copy > .wp-block-group__inner-container > p:last-child {
	margin-bottom: 0;
}

body.single-interview .interview-story-row > .wp-block-group__inner-container > .wp-block-image {
	grid-area: image;
	align-self: center;
	width: 100%;
	height: clamp(460px, 43vw, 620px);
	margin: 0;
	overflow: hidden;
	border-radius: 36px;
}

body.single-interview .interview-story-row > .wp-block-group__inner-container > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 960px) {
	body.single-interview .entry-content:has(> .interview-story-row) {
		max-width: 100%;
	}

	body.single-interview .entry-content > .interview-story-row,
	body.single-interview .entry-content > .interview-story-row:nth-child(even) {
		margin: 84px 0;
		padding-top: 42px;
		border-top: 1px dashed rgba(51, 51, 51, .24);
	}

	body.single-interview .entry-content > .interview-story-row > .wp-block-group__inner-container,
	body.single-interview .entry-content > .interview-story-row:nth-child(even) > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"copy";
		gap: 36px;
		position: relative;
	}

	body.single-interview .entry-content > .interview-story-row:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	body.single-interview .interview-story-row > .wp-block-group__inner-container > h2,
	body.single-interview .entry-content > .interview-story-row:nth-child(even) > .wp-block-group__inner-container > h2 {
		grid-area: media;
		align-self: center;
		justify-self: end;
		width: 104px;
		height: 300px;
		min-height: 0;
		max-height: 300px;
		margin: 0;
		padding: 12px 11px;
		border: 0;
		border-right: 8px solid var(--interview-green);
		border-radius: 0;
		background: rgba(251, 251, 251, .92);
		font-size: clamp(22px, 6.36vw, 25px);
		line-height: 1.35;
		letter-spacing: .05em;
		writing-mode: vertical-rl;
		z-index: 2;
	}

	body.single-interview .entry-content > .interview-story-row:nth-child(even) > .wp-block-group__inner-container > h2 {
		justify-self: start;
		border-right: 0;
		border-left: 8px solid var(--interview-green);
	}

	body.single-interview .interview-story-copy > .wp-block-group__inner-container > p {
		font-size: 18px;
		line-height: 2.35;
	}

	body.single-interview .interview-story-row > .wp-block-group__inner-container > .wp-block-image {
		grid-area: media;
		justify-self: start;
		width: calc(100% - 76px);
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 24px;
	}

	body.single-interview .entry-content > .interview-story-row:nth-child(even) > .wp-block-group__inner-container > .wp-block-image {
		justify-self: end;
	}
}