/* ==========================================================================
   Design tokens（Figma「誠メディカル会社サイト / 決定案A｜最終｜PC」より）
   ========================================================================== */
:root {
	--color-ink: #3d332c;
	--color-text: #6f6358;
	--color-mute: #928a7f;
	--color-accent: #a06549;
	--color-line: #e0cdb6;
	--color-pink: #f6e2da;
	--color-base: #fffef8;
	--color-cream: #fef9ec;
	--color-beige: #f5efe5;
	--color-on-accent: #fffbf5;
	--color-white: #fff;

	--font-sans: "Noto Sans JP", sans-serif;
	--font-serif: "Shippori Mincho", serif;

	--ghost-gradient: linear-gradient(90deg, rgba(61, 51, 44, 0) 0%, rgba(61, 51, 44, 0.07) 22%, rgba(61, 51, 44, 0.07) 78%, rgba(61, 51, 44, 0) 100%);
	--gutter: 80px;
	--header-height: 90px;
}

/* 幅 600px 以下では管理バーがページと一緒にスクロールするため、ヘッダーは最上部に固定する */
@media (max-width: 600px) {
	html:root {
		--wp-admin--admin-bar--height: 0px;
	}
}

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

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

/* ページ内リンクの移動先が固定ヘッダーに隠れないようにする（管理バーの指定より優先させる） */
html:root {
	scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
}

body {
	margin: 0;
	color: var(--color-ink);
	background: var(--color-base);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

.sp-only {
	display: none;
}

/* 製品名などを途中で折り返さない */
.nowrap {
	white-space: nowrap;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 紙のテクスチャ（480px タイル）とフィルムノイズ（200px タイル） */
.tex-paper,
.tex-noise {
	position: relative;
	isolation: isolate;
}

.tex-paper::after,
.tex-noise::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
}

.tex-paper::after {
	background: url("../images/texture-paper.png") 0 0 / 480px 480px;
	opacity: 0.7;
}

.tex-noise::after {
	z-index: 1;
	background: url("../images/texture-noise.png") 0 0 / 200px 200px;
	opacity: 0.22;
}

/* ==========================================================================
   トップページのフェードイン（印は functions.php、表示は main.js）
   ========================================================================== */
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
}

.js-reveal [data-reveal].is-inview {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Parts
   ========================================================================== */
.rule {
	display: block;
	width: 36px;
	height: 2px;
	background: var(--color-accent);
}

.rule--light {
	width: 40px;
	height: 1px;
	background: var(--color-line);
}

.rule--bold {
	width: 40px;
	height: 2px;
	background: var(--color-text);
}

.rule--thin {
	width: 40px;
	height: 2px;
}

.section-label {
	color: var(--color-text);
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.12em;
}

.eyebrow {
	color: var(--color-text);
	font-size: 11px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.26em;
}

.eyebrow--small {
	font-size: 9px;
	letter-spacing: 0.24em;
}

.heading-serif {
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

.body-text {
	color: var(--color-text);
	font-size: 15px;
	line-height: 2.2;
}

.body-text--center {
	text-align: center;
}

.label {
	display: inline-block;
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 2px;
	background: var(--color-pink);
	color: var(--color-text);
	font-size: 10px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.01em;
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border: 1px solid var(--color-ink);
	border-radius: 4px;
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}

.button:hover {
	background: var(--color-ink);
	color: var(--color-white);
}

.button__icon {
	letter-spacing: 0;
	transition: transform 0.2s;
}

.button:hover .button__icon {
	transform: translateX(3px);
}

.button--accent {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-on-accent);
}

.button--accent:hover {
	border-color: #8a5139;
	background: #8a5139;
	color: var(--color-on-accent);
}

.button--accent .button__icon,
.button--accent:hover .button__icon {
	transform: none;
}

/* サービスサイト公開前：押せないボタン・リンクと「近日公開」の印 */
.button.is-disabled {
	cursor: default;
	opacity: 0.5;
}

.button--accent.is-disabled:hover {
	border-color: var(--color-accent);
	background: var(--color-accent);
}

.is-disabled {
	cursor: default;
}

.service-soon {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.button .service-soon {
	margin-left: 0;
}

.button--small {
	gap: 8px;
	padding: 11px 20px;
	border: 0;
	font-size: 13px;
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.01em;
}

.text-link:hover span {
	transform: translateX(3px);
}

.text-link span {
	transition: transform 0.2s;
}

/* 背景の大きな透かし文字 */
.ghost-text {
	position: absolute;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
	background: var(--ghost-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--font-serif);
	line-height: normal;
	white-space: pre;
	pointer-events: none;
	user-select: none;
}

/* 横に流れ続ける透かし文字（THOUGHTS / Day 360° / VISION） */
.ghost-text--marquee {
	left: 0;
	transform: none;
	background: none;
	color: rgba(61, 51, 44, 0.07);
}

.ghost-text__track {
	display: inline-flex;
	animation: makotomedical-marquee var(--marquee-duration, 60s) linear infinite;
}

@keyframes makotomedical-marquee {
	to {
		transform: translateX(-50%);
	}
}

/*
 * 回り続ける円の模様。
 * 線に「濃い先頭 → だんだん薄くなる尾」の濃淡をつけ、先頭が進行方向を向くように回す。
 * マスクは要素と一緒に回るので、濃い先頭が円周を追いかけるように動いて見える。
 */
.is-rotating,
.is-shaded {
	--ring-mask: conic-gradient(rgba(0, 0, 0, 0.06) 0deg, rgba(0, 0, 0, 0.06) 40deg, #000 348deg, rgba(0, 0, 0, 0.06) 360deg);
	-webkit-mask-image: var(--ring-mask);
	mask-image: var(--ring-mask);
}

.is-rotating,
.badge-360__orbit {
	animation: makotomedical-rotate var(--rotate-duration, 50s) linear infinite;
}

/* 逆回転は濃淡の向きも反転させ、先頭が進行方向（反時計回り）に来るようにする */
.is-rotating--reverse {
	--rotate-duration: 40s;
	--ring-mask: conic-gradient(rgba(0, 0, 0, 0.06) 0deg, #000 12deg, rgba(0, 0, 0, 0.06) 320deg, rgba(0, 0, 0, 0.06) 360deg);
	animation-direction: reverse;
}

@keyframes makotomedical-rotate {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ghost-text__track,
	.is-rotating,
	.badge-360__orbit {
		animation: none;
	}
}

/* ==========================================================================
   ローディング（template-parts/loader.php。印は functions.php、閉じる処理は main.js）
   Figma「SPEC｜モーション指定」準拠：イージングは quint、装飾の描画は 1400ms、文字は 16px の fade up。
   円弧（1px の真円・同心円 2 本）が 12 時から 1 周して「ゼロ」を描き、
   VISION のミッション行と同じく罫が 0 → 40px で描かれてからミッションが浮かぶ
   ========================================================================== */
.loader {
	--loader-ease: cubic-bezier(0.22, 1, 0.36, 1);
	display: none;
}

/* 印が付いている間だけ表示。main.js が動かなかったときも 8 秒で消えるようにしておく */
html.is-loading .loader,
.loader.is-leaving {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: var(--color-base);
}

html.is-loading .loader {
	animation: makotomedical-loader-fallback 0.8s ease 8s forwards;
}

.loader.is-leaving {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.8s var(--loader-ease),
		visibility 0s linear 0.8s;
}

.loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.loader__mark {
	position: relative;
	width: 150px;
	height: 150px;
}

.loader__rings,
.loader__ring {
	position: absolute;
	overflow: visible;
}

.loader__rings {
	inset: 0;
	width: 100%;
	height: 100%;
	/* 円の始まりを 12 時の位置にする */
	transform: rotate(-90deg);
}

/* 線は約 1px（あしらいの型「円弧」。viewBox 200 を 150px で表示するため 1.4 ≒ 1px） */
.loader__track,
.loader__arc,
.loader__ring circle {
	fill: none;
	stroke-width: 1.4;
}

.loader__track {
	stroke: var(--color-line);
	opacity: 0;
	animation: makotomedical-loader-fade 0.8s var(--loader-ease) forwards;
}

.loader__arc {
	stroke: var(--color-accent);
	/* 円周（2π × 99） */
	stroke-dasharray: 622.1;
	stroke-dashoffset: 622.1;
	animation: makotomedical-loader-draw 1.4s var(--loader-ease) 0.2s forwards;
}

/* 弧の先頭を走る点（バッジ「360° FOR YOURSELF」の点と同じ） */
.loader__head {
	fill: var(--color-accent);
	transform-box: view-box;
	transform-origin: 50% 50%;
	opacity: 0;
	animation:
		makotomedical-loader-fade 0.3s var(--loader-ease) 0.2s forwards,
		makotomedical-loader-orbit 1.4s var(--loader-ease) 0.2s forwards;
}

/* 内側の円は 360° バッジと同じ線色に濃淡をつけ、トップの円模様と同じくゆっくり逆回転させる */
.loader__ring {
	--rotate-duration: 14s;
	inset: 15%;
	width: 70%;
	height: 70%;
	opacity: 0;
	animation:
		makotomedical-rotate var(--rotate-duration) linear infinite reverse,
		makotomedical-loader-fade 1.2s var(--loader-ease) 0.4s forwards;
}

.loader__ring circle {
	stroke: var(--color-line);
}

/* VISION のミッション行と同じ：罫が描かれてからミッションが浮かぶ */
.loader__rule {
	display: block;
	width: 40px;
	height: 1px;
	margin-top: 44px;
	background: var(--color-accent);
	transform: scaleX(0);
	animation: makotomedical-loader-rule 0.6s var(--loader-ease) 1.4s forwards;
}

.loader__mission {
	margin-top: 28px;
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.02em;
	opacity: 0;
	transform: translateY(16px);
	animation: makotomedical-loader-rise 0.7s var(--loader-ease) 1.9s forwards;
}

/* 社名（欧文）は字間を少し広げる */
.loader__mission[lang="en"] {
	letter-spacing: 0.08em;
}

@media (max-width: 767px) {
	.loader__mark {
		width: 120px;
		height: 120px;
	}

	.loader__rule {
		margin-top: 36px;
	}

	/* VISION のミッション行（SP）と同じ */
	.loader__mission {
		margin-top: 24px;
		color: var(--color-text);
		font-size: 17px;
	}
}

@keyframes makotomedical-loader-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes makotomedical-loader-orbit {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(1turn);
	}
}

@keyframes makotomedical-loader-rule {
	to {
		transform: none;
	}
}

@keyframes makotomedical-loader-fade {
	to {
		opacity: 1;
	}
}

@keyframes makotomedical-loader-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes makotomedical-loader-fallback {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* 動きを減らす設定：すべての動きを止め、最終状態をすぐに表示する */
@media (prefers-reduced-motion: reduce) {
	.loader__track,
	.loader__arc,
	.loader__head,
	.loader__ring,
	.loader__rule,
	.loader__mission {
		animation: none;
		opacity: 1;
		transform: none;
		stroke-dashoffset: 0;
	}

	.loader__head {
		display: none;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
/* スクロールしても画面上部に固定する（ログイン中は管理バーの下に置く） */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	padding: 0 var(--gutter);
	background: var(--color-base);
}

.site-header__logo {
	display: block;
}

.site-header__logo img {
	display: block;
	width: 189px;
	height: 27px;
}

.site-header__menu {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
}

.global-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.global-nav__list {
	display: flex;
	gap: 40px;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.global-nav__list a {
	transition: color 0.2s;
}

/* ハンバーガーメニューのときだけ出す項目 */
.global-nav__list--drawer {
	display: none;
}

.global-nav__list a:hover,
.global-nav__list .current-menu-item a {
	color: var(--color-accent);
}

.site-header__toggle {
	display: none;
}

/* ==========================================================================
   Front: Hero
   ========================================================================== */
.hero {
	position: relative;
	height: 810px;
	border: 16px solid var(--color-white);
}

.hero__visual {
	position: absolute;
	inset: 0;
}

.hero__visual picture {
	display: contents;
}

.hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__card {
	position: absolute;
	top: 189px;
	/* 1440px 幅のデザインの位置（左 104px）より外へは広がらないよう、中央からの距離で止める */
	left: max(104px, calc(50% - 600px));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	width: 520px;
	padding: 56px;
	/* 写真の明るい部分に溶け込まないよう外枠をつける */
	border: 1px solid var(--color-line);
	border-radius: 4px;
	background: rgba(255, 254, 248, 0.96);
}

.hero__title {
	font-family: var(--font-serif);
	font-size: 46px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.02em;
}

.hero__lead {
	color: var(--color-text);
	font-size: 15px;
	line-height: 2.05;
}

/* ==========================================================================
   Front: 私たちの思い
   ========================================================================== */
.thoughts {
	position: relative;
	z-index: 0;
	display: grid;
	grid-template-columns: 600px 452px;
	grid-template-rows: 1fr auto auto 1fr;
	justify-content: center;
	column-gap: 112px;
	padding: 140px 136px;
	/* 横だけ切る。下にはみ出した透かし文字は、次の Day360 のパネルに重なった部分だけ隠れる */
	overflow-x: clip;
	overflow-y: visible;
}

.ghost-text--thoughts {
	--marquee-duration: 70s;
	top: 644px;
	font-size: 150px;
	letter-spacing: 0.1em;
}

.thoughts__head,
.thoughts__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	grid-column: 1;
}

.thoughts__head {
	grid-row: 2;
}

.thoughts__text {
	grid-row: 3;
	margin-top: 30px;
}

.thoughts__mission {
	font-family: var(--font-serif);
	font-size: 30px;
	line-height: 1.65;
	letter-spacing: 0.03em;
}

.tagline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-top: 18px;
}

.tagline__text {
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.04em;
}

.thoughts__frame {
	position: relative;
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	padding: 30px 30px 24px;
	background: var(--color-pink);
}

.thoughts__photo {
	position: relative;
	width: 392px;
	height: 460px;
	overflow: hidden;
}

.thoughts__photo > img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thoughts__photo-overlay {
	position: absolute;
	top: -96px;
	left: 0;
	width: 452px;
	max-width: none;
	height: 569px;
	object-fit: cover;
	object-position: bottom;
	z-index: 2;
	pointer-events: none;
}

.badge-360 {
	position: absolute;
	top: 410px;
	left: -64px;
	z-index: 2;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: var(--color-beige);
	overflow: hidden;
	text-align: center;
}

.badge-360 img {
	position: absolute;
	max-width: none;
}

/* 円と弧・点をまとめて回す（文字は回さない） */
.badge-360__orbit {
	--rotate-duration: 24s;
	position: absolute;
	inset: 0;
}

.badge-360__ring {
	inset: 8.18%;
	width: 83.64%;
	height: 83.64%;
}

.badge-360__arc {
	top: 8.18%;
	left: 50%;
	width: 41.82%;
	height: 41.82%;
}

.badge-360__dot {
	top: 48.18%;
	left: 90%;
	width: 3.64%;
	height: 3.64%;
}

.badge-360__inner {
	inset: 20.91%;
	width: 58.18%;
	height: 58.18%;
}

.badge-360__num {
	position: absolute;
	top: 34%;
	left: 0;
	right: 0;
	color: var(--color-accent);
	font-family: var(--font-serif);
	font-size: 26px;
	line-height: normal;
}

.badge-360__sub {
	position: absolute;
	top: 62%;
	left: 0;
	right: 0;
	color: var(--color-text);
	font-size: 8px;
	line-height: normal;
}

/* ==========================================================================
   Front: Day360
   ========================================================================== */
.day360 {
	padding: 0 var(--gutter);
}

.day360__panel {
	display: grid;
	grid-template-columns: 500px 560px;
	grid-template-rows: 1fr auto auto 1fr;
	column-gap: 96px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 110px 96px;
	border-radius: 4px;
	background: var(--color-pink);
	overflow: hidden;
}

.day360__panel > .ghost-text {
	z-index: 0;
}

.ghost-text--day360 {
	--marquee-duration: 80s;
	top: 643px;
	font-size: 200px;
	letter-spacing: 0.02em;
}

.day360__frame {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
	padding: 30px 30px 24px;
	background: var(--color-cream);
}

.day360__photo {
	position: relative;
	width: 440px;
	height: 352px;
	overflow: hidden;
}

.day360__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.day360__head,
.day360__text {
	position: relative;
	z-index: 1;
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.day360__head {
	grid-row: 2;
}

.day360__text {
	grid-row: 3;
	margin-top: 30px;
}

.day360__title {
	font-family: var(--font-serif);
	font-size: 36px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   Front: 委託（BML）
   ========================================================================== */
.bml {
	position: relative;
	z-index: 0;
	padding: 140px var(--gutter);
	background: var(--color-base);
	/* 横だけ切る。円はセクションの上にはみ出し、Day360 の区画にまたがって見える */
	overflow-x: clip;
	overflow-y: visible;
}

.bml__arc {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.bml__arc img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.bml__arc--small {
	top: 30px;
	left: -380px;
	width: 600px;
	height: 600px;
}

.bml__arc--large {
	top: -90px;
	left: -500px;
	width: 840px;
	height: 840px;
}

.bml__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	max-width: 1000px;
	margin: 0 auto;
}

.section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}

.section-heading__title {
	font-family: var(--font-serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

/* 検査の実施体制（図版） */
.flow {
	position: relative;
	width: 1000px;
	height: 300px;
}

.flow__swap,
.flow__connector,
.flow__owner {
	display: none;
}

.flow__text {
	display: contents;
}

.flow__lane {
	position: absolute;
	left: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 56px;
	text-align: center;
	line-height: normal;
	white-space: nowrap;
}

.flow__lane--own {
	top: 37px;
}

.flow__lane--lab {
	top: 181px;
}

.flow__lane img {
	width: 42px;
	height: 42px;
}

.flow__lane-name {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.flow__lane-sub {
	color: var(--color-text);
	font-size: 9px;
	letter-spacing: 0.04em;
}

.flow__axis {
	position: absolute;
	top: 150px;
	left: 130px;
	width: 830px;
	height: 1px;
	background: var(--color-line);
}

.flow__step {
	position: absolute;
	top: 15px;
	width: 210px;
}

.flow__step--01 {
	left: 115px;
}

.flow__step--02 {
	left: 330px;
}

.flow__step--03 {
	left: 565px;
}

.flow__step--04 {
	left: 775px;
}

.flow__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	height: 109px;
	padding: 17px 19px; /* Figma の線は内側なので、枠線 1px 分を差し引く */
	border: 1px solid var(--color-line);
	border-radius: 2px;
	background: var(--color-white);
}

.flow__step--lab .flow__card {
	position: relative;
	top: 161px;
}

.flow__num {
	color: var(--color-text);
	font-size: 11px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.1em;
}

.flow__label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.02em;
}

.flow__drop {
	position: absolute;
	top: 109px;
	left: 105px;
	width: 1px;
	height: 26px;
	background: var(--color-line);
}

.flow__step--lab .flow__drop {
	top: 135px;
}

.flow__node {
	position: absolute;
	top: 130.5px;
	left: 100.5px;
	width: 9px;
	height: 9px;
}

.spec {
	display: flex;
	width: 100%;
	border-top: 1px solid var(--color-line);
	text-align: center;
}

.spec__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 28px;
	font-weight: 500;
}

.spec dt {
	color: var(--color-text);
	font-size: 11px;
	line-height: normal;
	letter-spacing: 0.2em;
}

.spec dd {
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0.01em;
}

.spec__note {
	display: block;
	margin-top: 4px;
	color: var(--color-mute);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   Front: VISION
   ========================================================================== */
.vision {
	position: relative;
	z-index: 0;
	padding: 140px var(--gutter);
	overflow: hidden;
}

.vision__bg {
	position: absolute;
	inset: 0;
	z-index: -4;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vision::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, rgba(255, 254, 248, 0.8) 0%, rgba(255, 254, 248, 0.93) 45%, rgba(255, 254, 248, 0.95) 100%);
}

.vision.tex-noise::after {
	z-index: -3;
}

.ghost-text--vision {
	--marquee-duration: 70s;
	top: 434px;
	font-size: 210px;
	letter-spacing: 0.14em;
}

.vision__ring,
.vision__dot {
	position: absolute;
	z-index: -1;
	max-width: none;
	pointer-events: none;
}

.vision__ring-sp {
	display: none;
}

.vision__ring--outer {
	top: -170px;
	right: -410px;
	width: 760px;
	height: 760px;
}

.vision__ring--inner {
	top: -50px;
	right: -290px;
	width: 520px;
	height: 520px;
}

.vision__dot {
	top: 206px;
	right: -33px;
	width: 7px;
	height: 7px;
}

.vision__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.vision__inner .rule {
	width: 40px;
	height: 1px;
}

.vision__label {
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.34em;
}

.vision__title {
	font-family: var(--font-serif);
	font-size: 46px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.02em;
}

.vision__mission {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   Front: 新着情報 / お問い合わせ
   ========================================================================== */
.news-contact {
	padding: 140px var(--gutter);
	background: var(--color-base);
}

.news-contact__inner {
	display: flex;
	align-items: center;
	gap: 72px;
	max-width: 1120px;
	margin: 0 auto;
}

.news-contact__news {
	display: flex;
	flex: 0 1 628px;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	min-width: 0;
}

.news-list {
	width: 100%;
	border-top: 1px solid var(--color-line);
}

.news-list__item {
	border-bottom: 1px solid var(--color-line);
	background: var(--color-white);
}

.news-list__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 16px;
}

.news-list__date {
	flex-shrink: 0;
	color: var(--color-text);
	font-size: 12px;
	font-weight: 500;
	line-height: normal;
}

.news-list__title {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.9;
	transition: color 0.2s;
}

.news-list__link:hover .news-list__title {
	color: var(--color-accent);
}

.news-list__empty {
	width: 100%;
	padding: 18px 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	color: var(--color-text);
	font-size: 14px;
}

.contact-card {
	position: relative;
	display: flex;
	flex: 0 0 420px;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 44px;
	border-radius: 3px;
	background: var(--color-pink);
	overflow: hidden;
}

.contact-card__text {
	color: var(--color-text);
	font-size: 14px;
	line-height: 1.9;
}

.contact-card .button {
	position: relative;
	z-index: 1;
}

.contact-card__arc {
	position: absolute;
	top: 170px;
	left: 260px;
	width: 300px;
	height: 300px;
	pointer-events: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	position: relative;
	padding: 96px var(--gutter) 56px;
	border-top: 1px solid var(--color-line);
	background: var(--color-base);
	overflow: hidden;
}

.site-footer__symbol {
	position: absolute;
	top: -61px;
	right: -100px;
	z-index: -1;
	width: 380px;
	height: 380px;
	pointer-events: none;
}

.site-footer__symbol img,
.contact-card__arc img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
	max-width: 1120px;
	margin: 0 auto;
}

.site-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--color-line);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.site-footer__brand a {
	display: block;
}

.site-footer__brand img {
	display: block;
	width: 203px;
	height: 29px;
}

.site-footer__tagline {
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: 12px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.04em;
}

.site-footer__nav {
	display: flex;
	gap: 72px;
	white-space: nowrap;
}

.footer-nav {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.footer-nav__heading {
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.02em;
}

.footer-nav__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--color-text);
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.01em;
}

.footer-nav__list a:hover {
	color: var(--color-accent);
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: var(--color-text);
	font-size: 12px;
	line-height: normal;
}

.site-footer__mission {
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   エディタ本文（記事・固定ページ）
   ========================================================================== */
.entry-content {
	color: var(--color-ink);
	font-size: 15px;
	line-height: 2.1;
}

.entry-content > * + * {
	margin-top: 1.6em;
}

.entry-content h2 {
	margin-top: 2.4em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
}

.entry-content h3 {
	margin-top: 2em;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.entry-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}


/* ==========================================================================
   Responsive
   PC（1440px）と SP（375px）は Figma のデザイン通り。その間は縮めて並べ替える。
   ========================================================================== */
@media (max-width: 1280px) {
	.thoughts {
		grid-template-columns: minmax(0, 600px) 452px;
		column-gap: 64px;
		padding-inline: var(--gutter);
	}

	.day360__panel {
		grid-template-columns: 500px minmax(0, 560px);
		justify-content: center;
		column-gap: 56px;
		padding-inline: 56px;
	}
}

@media (max-width: 1120px) {
	:root {
		--gutter: 40px;
	}

	/* ヘッダー：メニューボタンに切り替え */
	.site-header__toggle {
		position: relative;
		z-index: 2;
		display: block;
		width: 44px;
		height: 44px;
		margin-right: -11px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.site-header__toggle-bar,
	.site-header__toggle-bar::before,
	.site-header__toggle-bar::after {
		position: absolute;
		left: 11px;
		width: 22px;
		height: 1.5px;
		background: var(--color-ink);
		transition: transform 0.2s, background-color 0.2s;
	}

	.site-header__toggle-bar {
		top: 21.25px;
	}

	.site-header__toggle-bar::before,
	.site-header__toggle-bar::after {
		content: "";
		left: 0;
	}

	.site-header__toggle-bar::before {
		top: -7.5px;
	}

	.site-header__toggle-bar::after {
		top: 7.5px;
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar {
		background: transparent;
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before {
		transform: translateY(7.5px) rotate(45deg);
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after {
		transform: translateY(-7.5px) rotate(-45deg);
	}

	.site-header__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 8px var(--gutter) 32px;
		border-bottom: 1px solid var(--color-line);
		background: var(--color-base);
		/* 画面より長いときはメニューの中だけスクロールさせる */
		max-height: calc(100vh - var(--header-height) - var(--wp-admin--admin-bar--height, 0px));
		max-height: calc(100dvh - var(--header-height) - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-header.is-open .site-header__menu {
		display: flex;
	}

	.global-nav {
		display: block;
	}

	.global-nav__list {
		flex-direction: column;
		gap: 0;
		font-size: 15px;
	}

	.global-nav__list--drawer {
		display: flex;
	}

	.global-nav__list a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--color-line);
	}

	.site-header__menu .button {
		justify-content: center;
		padding-block: 15px;
		font-size: 15px;
	}

	/* ヒーロー */
	.hero {
		height: auto;
		min-height: 640px;
		display: flex;
		align-items: center;
		padding: 64px 40px;
	}

	.hero__card {
		position: relative;
		top: auto;
		left: auto;
	}

	/* 2カラム → 1カラム（SP と同じ順番：見出し → 写真 → 本文） */
	.thoughts,
	.day360__panel {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.thoughts__head,
	.thoughts__text,
	.day360__head,
	.day360__text {
		width: 100%;
		max-width: 600px;
		margin-top: 0;
	}

	.thoughts {
		gap: 48px;
		padding-block: 100px 180px;
	}

	.ghost-text--thoughts {
		top: auto;
		bottom: -60px;
	}

	.day360__panel {
		gap: 48px;
		padding: 80px 40px 120px;
	}

	.ghost-text--day360 {
		top: auto;
		bottom: -70px;
	}

	/* 検査の実施体制：縦のフロー図に切り替え */
	.flow {
		width: 100%;
		max-width: 480px;
		height: auto;
		padding: 24px 20px;
		border-radius: 3px;
	}

	.flow__legend {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 28px;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid var(--color-line);
	}

	.flow__lane {
		position: static;
	}

	.flow__lane img {
		width: 38px;
		height: 38px;
	}

	.flow__swap {
		display: block;
		color: var(--color-text);
		font-size: 16px;
		line-height: normal;
	}

	.flow__axis,
	.flow__drop,
	.flow__node {
		display: none;
	}

	.flow__step {
		position: static;
		width: auto;
	}

	.flow__connector {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 8px 0;
	}

	.flow__connector::before {
		content: "";
		width: 1px;
		height: 14px;
		background: var(--color-line);
	}

	.flow__connector-label {
		color: var(--color-text);
		font-size: 10px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0.06em;
	}

	.flow__card,
	.flow__step--lab .flow__card {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		height: auto;
		padding: 16px 18px;
	}

	.flow__text {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 5px;
		min-width: 0;
	}

	.flow__num {
		font-size: 10px;
	}

	.flow__owner {
		display: inline;
	}

	.flow__label {
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.01em;
	}

	.news-contact__inner {
		flex-direction: column;
		gap: 56px;
	}

	.news-contact__news,
	.contact-card {
		flex: none;
		width: 100%;
	}

	.site-footer__top {
		flex-direction: column;
	}

	.site-footer__nav {
		flex-wrap: wrap;
		gap: 40px;
	}
}

/* SP（Figma「決定案A｜最終｜SP」375px） */
@media (max-width: 767px) {
	:root {
		--gutter: 24px;
	}

	.sp-only {
		display: inline;
	}

	.pc-only {
		display: none;
	}

	.body-text {
		font-size: 15px;
		line-height: 2.1;
	}

	/* ヘッダー */
	:root {
		--header-height: 60px;
	}

	.site-header__logo img {
		width: 147px;
		height: 21px;
	}

	/* ヒーロー */
	/* 写真の下にカードを並べる（重ねない） */
	.hero {
		display: block;
		min-height: 0;
		padding: 440px 0 0;
		border: 0;
	}

	.hero__visual {
		height: 440px;
		border: 8px solid var(--color-white);
	}

	.hero__card {
		align-items: center;
		border: 0;
		gap: 22px;
		width: 340px;
		max-width: calc(100% - 24px);
		margin: 0 auto;
		padding: 34px 26px;
	}

	.hero__title {
		width: 100%;
		font-size: 30px;
		line-height: 1.62;
	}

	.hero__lead {
		width: 100%;
		font-size: 14px;
		line-height: 2;
	}

	.hero__card .button {
		justify-content: center;
		width: 100%;
	}

	.button {
		gap: 8px;
		padding: 17px 20px;
		font-size: 15px;
	}

	/* 私たちの思い */
	.thoughts {
		align-items: flex-start;
		gap: 24px;
		padding: 64px var(--gutter) 96px;
	}

	.thoughts__head,
	.thoughts__text {
		gap: 24px;
	}

	.thoughts .rule,
	.day360 .rule {
		width: 32px;
	}

	.section-label {
		font-size: 13px;
		line-height: 1.6;
	}

	.thoughts__mission {
		font-size: 22px;
	}

	.thoughts__frame {
		width: 100%;
		padding: 20px;
	}

	.thoughts__photo {
		width: 100%;
		height: 320px;
	}

	.thoughts__photo-overlay {
		top: 0;
		width: 100%;
		height: 100%;
	}

	.badge-360 {
		top: 282px;
		left: -14px;
		width: 104px;
		height: 104px;
	}

	.badge-360__num {
		top: 38.46%;
		font-size: 17px;
	}

	.badge-360__sub {
		display: none;
	}

	.tagline .rule--light {
		width: 32px;
	}

	.eyebrow {
		font-size: 10px;
	}

	.tagline__text {
		font-size: 14px;
	}

	.ghost-text--thoughts {
		bottom: -18px;
		font-size: 44px;
	}

	/* Day360 */
	.day360 {
		padding: 0 16px;
	}

	.day360__panel {
		align-items: flex-start;
		gap: 24px;
		padding: 56px 20px 72px;
	}

	.day360__head {
		gap: 24px;
	}

	.day360__title {
		font-size: 26px;
		line-height: 1.6;
	}

	.day360__frame {
		width: 100%;
		gap: 12px;
		padding: 20px 20px 14px;
	}

	.day360__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 4;
	}

	.day360__text {
		gap: 32px;
	}

	.button-group {
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}

	.button-group .button {
		justify-content: center;
		width: 100%;
	}

	.ghost-text--day360 {
		bottom: -20px;
		font-size: 54px;
	}

	/* BML */
	.bml {
		padding: 96px var(--gutter);
	}

	/* Figma の SP にはないが、PC と同じく左端に同心円を置く */
	.bml__arc--small {
		top: 40px;
		left: -170px;
		width: 280px;
		height: 280px;
	}

	.bml__arc--large {
		top: -16px;
		left: -226px;
		width: 392px;
		height: 392px;
	}

	.bml .body-text--center {
		text-align: left;
	}

	.flow__num,
	.flow__label {
		line-height: 1.2;
	}

	.bml__inner {
		gap: 20px;
	}

	.section-heading {
		gap: 20px;
	}

	.section-heading__title {
		font-size: 23px;
		line-height: 1.7;
	}

	.flow {
		max-width: none;
	}

	.spec {
		flex-direction: column;
		margin-top: 12px;
	}

	.spec__item {
		gap: 6px;
		padding: 16px 0;
		border-bottom: 1px solid var(--color-line);
	}

	.spec dt {
		font-size: 10px;
	}

	.spec dd {
		font-size: 14px;
		line-height: normal;
	}

	.spec__note {
		margin-top: 3px;
		font-size: 10px;
	}

	/* VISION */
	.vision {
		padding: 96px var(--gutter);
	}

	.vision__inner {
		gap: 22px;
	}

	.vision__label {
		font-size: 11px;
	}

	.vision__title {
		font-size: 26px;
		line-height: 1.55;
	}

	.vision__inner .rule {
		width: 32px;
	}

	.vision .body-text {
		font-size: 13px;
	}

	.vision__mission {
		color: var(--color-text);
		font-size: 17px;
	}

	.ghost-text--vision {
		top: auto;
		bottom: -43px;
		font-size: 92px;
	}

	.vision__ring,
	.vision__dot {
		display: none;
	}

	.vision__ring-sp {
		display: block;
		position: absolute;
		z-index: -1;
		max-width: none;
		pointer-events: none;
	}

	.vision__ring-sp--small {
		top: -40px;
		right: -225px;
		width: 280px;
		height: 280px;
	}

	/* 見出しの「な」にかからないよう、中心はそのままで 420px → 344px に縮める */
	.vision__ring-sp--large {
		top: -72px;
		right: -257px;
		width: 344px;
		height: 344px;
	}

	/* 新着情報 / お問い合わせ */
	.news-contact {
		padding: 96px var(--gutter);
	}

	.news-contact__inner {
		gap: 46px;
	}

	.news-contact__news {
		gap: 0;
	}

	.heading-serif {
		font-size: 24px;
	}

	.news-contact__news > .heading-serif {
		padding-bottom: 18px;
	}

	.news-list__link {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 16px 14px;
	}

	.news-list__date {
		font-size: 11px;
	}

	.label {
		padding-inline: 10px;
	}

	.news-list__title {
		flex-basis: 100%;
		line-height: 1.7;
	}

	.news-contact .text-link {
		padding-top: 20px;
		border-bottom-color: var(--color-line);
		font-size: 13px;
		line-height: normal;
	}

	.contact-card {
		gap: 16px;
		padding: 34px 26px;
		border-radius: 0;
	}

	.contact-card::after {
		background-size: 80px 80px;
	}

	.contact-card .button {
		justify-content: center;
		width: 100%;
	}

	.contact-card__arc {
		top: 120px;
		left: 170px;
		width: 240px;
		height: 240px;
	}

	/* フッター */
	.site-footer {
		padding: 72px var(--gutter) 48px;
	}

	.site-footer__symbol {
		top: -31px;
		right: -65px;
		width: 190px;
		height: 190px;
	}

	.site-footer__inner,
	.site-footer__top {
		gap: 0;
	}

	.site-footer__top {
		padding-bottom: 0;
	}

	.site-footer__brand {
		gap: 20px;
		padding-bottom: 40px;
	}

	.site-footer__brand img {
		width: 161px;
		height: 23px;
	}

	.site-footer__tagline {
		font-size: 13px;
	}

	.site-footer__nav {
		flex-direction: column;
		gap: 26px;
		padding-bottom: 40px;
	}

	.footer-nav,
	.footer-nav__list {
		gap: 14px;
	}

	.footer-nav__heading {
		font-size: 12px;
	}

	.footer-nav__list {
		font-size: 13px;
		line-height: normal;
	}

	.site-footer__bottom {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 10px;
		padding-top: 28px;
		font-size: 11px;
	}

	.site-footer__mission {
		font-size: 12px;
	}

}