@charset "UTF-8";
/* =========================================================
   Ramen Total Solutions Corporate - main.css
   デザイン基準幅：1440px（コンテンツ幅 1280px）
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
	/* 指定カラー */
	--c-cream: #f4efe6;
	--c-gold: #af860a;
	--c-ink: #191817;
	--c-red: #a21d2c;
	--c-green: #314a45;
	--c-black: #171716;
	--c-navy: #0d2024;
	--c-white: #fff;

	/* 派生色（指定カラーから生成） */
	--c-cream-light: color-mix(in srgb, var(--c-cream) 55%, #fff);
	--c-text: var(--c-black);
	--c-text-sub: color-mix(in srgb, var(--c-black) 62%, #fff);
	--c-border: color-mix(in srgb, var(--c-cream) 55%, #b9b1a2);
	--c-gold-soft: color-mix(in srgb, var(--c-gold) 70%, #fff);

	/* Fonts */
	--f-sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
	--f-en: "Cormorant Garamond", "Noto Serif JP", serif;

	--container: 1280px;
	--gutter: clamp(20px, 5.5vw, 80px);
	--header-h: 96px;
	--radius: 8px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 15px;
	line-height: 1.8;
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt" 0;
	overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[id] { scroll-margin-top: 80px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	padding: 10px 16px; background: var(--c-red); color: #fff; border-radius: 4px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- Common parts ---------- */
.arrow { display: inline-block; color: var(--c-gold-soft); font-weight: 400; }

.label-sans {
	font-family: var(--f-sans);
	font-size: 12px; letter-spacing: .04em; font-weight: 500;
	color: var(--c-red);
}
.label-serif {
	font-family: var(--f-en);
	font-size: 16px; letter-spacing: .04em; font-weight: 500;
	color: var(--c-gold);
	line-height: 1.2;
}
.label-serif--red { color: var(--c-red); font-size: 15px; }
.label-serif--lg { font-size: clamp(22px, 2vw, 29px); }
.label-line {
	display: flex; align-items: center; gap: 10px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
}
.label-line::before { content: ""; width: 28px; height: 1px; background: var(--c-gold); }
.label-line--gold { color: var(--c-gold-soft); }
.label-line--red { color: var(--c-red); }

.btn-red {
	display: inline-flex; align-items: center; justify-content: space-between;
	width: 248px; max-width: 100%; height: 56px; padding: 0 26px 0 24px;
	background: var(--c-red); color: #fff; border-radius: 3px;
	font-size: 13px; font-weight: 700; letter-spacing: .05em;
	transition: background-color .3s var(--ease);
}
.btn-red .arrow { transition: transform .3s var(--ease); }
.btn-red:hover { background: color-mix(in srgb, var(--c-red) 82%, #000); }
.btn-red:hover .arrow { transform: translate(3px, -3px); }

/* 画像枠（差し替え前の読み込み失敗時にも枠が見えるように背景色を付与） */
.hero__bg, .about__img, .biz__img, .cycle__photo, .philosophy__img, .news-card__img, .rep__photo {
	background-color: #d8d0c1;
}

/* fade-in */
.js .js-fade { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .js-fade.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .js-fade { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--c-ink); color: #fff;
	transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-overlay { position: fixed; left: 0; right: 0; background: transparent; }
.site-header.is-overlay.is-scrolled,
.site-header.is-menu-open { background: color-mix(in srgb, var(--c-ink) 94%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.admin-bar .site-header.is-overlay { top: 32px; }

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: var(--header-h);
	padding-inline: var(--gutter);
	transition: height .35s var(--ease);
}
.is-scrolled .site-header__inner { height: 76px; }

.site-logo { display: flex; align-items: center; gap: 12px; }
.site-logo__mark { width: 54px; height: auto; }
.site-logo__text {
	font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
	color: var(--c-gold-soft); white-space: nowrap;
}

.global-nav { display: flex; align-items: center; gap: 32px; }
.global-nav__list { display: flex; gap: 34px; }
.global-nav__list a {
	position: relative; font-size: 13px; font-weight: 500; letter-spacing: .04em;
}
.global-nav__list a::after {
	content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px;
	background: var(--c-gold-soft); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease);
}
.global-nav__list a:hover::after { transform: scaleX(1); }

.btn-header {
	display: inline-flex; align-items: center; gap: 18px;
	height: 56px; padding: 0 26px;
	background: var(--c-red); color: #fff; border-radius: 3px;
	font-size: 13px; font-weight: 700; letter-spacing: .04em;
	transition: background-color .3s var(--ease);
}
.btn-header:hover { background: color-mix(in srgb, var(--c-red) 82%, #000); }

.menu-toggle { display: none; }
.sp-only { display: none; }

@media (max-width: 1080px) {
	:root { --header-h: 72px; }
	.is-scrolled .site-header__inner { height: 64px; }
	.site-logo { gap: 10px; }
	.site-logo__mark { width: 54px; }
	.site-logo__text { font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: .02em; color: #FBCA4D; white-space: normal; }
	.sp-only { display: inline; }

	/* SP：ハンバーガー（赤の角丸ボタン） */
	.menu-toggle {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		width: 44px; height: 44px; padding: 0; position: relative; z-index: 2;
		background: var(--c-red); border-radius: 3px;
	}
	.menu-toggle__bar { display: block; width: 13px; height: 2px; background: #fff; border-radius: 1px; }

	.global-nav { display: none; }
	body.is-menu-locked { overflow: hidden; }

	/* SPメニュー */
	.sp-menu {
		display: block; position: fixed; inset: 0; z-index: 200;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		background: #fff; color: var(--c-ink);
		padding: env(safe-area-inset-top, 0px) 0 calc(40px + env(safe-area-inset-bottom, 0px));
		opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
	}
	.is-menu-open .sp-menu { opacity: 1; visibility: visible; }
	/* ヘッダー（閉じた状態）と同じ高さ・余白にして、ロゴとボタンの位置を揃える */
	.sp-menu__head {
		display: flex; align-items: center; justify-content: space-between;
		height: var(--header-h); padding-inline: var(--gutter);
		transition: height .35s var(--ease);
	}
	.is-scrolled .sp-menu__head { height: 64px; }
	.sp-menu__logo { display: flex; align-items: center; gap: 10px; }
	.sp-menu__logo img { width: 54px; height: auto; }
	.sp-menu__logo span {
		font-family: var(--f-sans); font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: .02em;
		color: #e0b83a;
	}
	.sp-menu__close {
		display: grid; place-items: center; flex: none;
		width: 44px; height: 44px;
		background: var(--c-red); color: #fff; border-radius: 3px;
	}
	.sp-menu__body { padding: 0 var(--gutter); }
	.sp-menu__label {
		margin-top: 6px;
		font-family: var(--f-en); font-size: 12px; letter-spacing: .04em; line-height: 1.5; color: var(--c-ink);
	}
	.sp-menu__label span { display: block; font-family: var(--f-sans); font-size: 10px; letter-spacing: .02em; }
	.sp-menu__list { margin-top: 16px; }
	.sp-menu__list li { border-bottom: 1px solid var(--c-navy); }
	.sp-menu__list a { display: flex; align-items: baseline; gap: 12px; padding: 13px 0 14px; }
	.sp-menu__en { font-family: var(--f-en); font-size: 20px; line-height: 1.3; letter-spacing: .01em; }
	.sp-menu__ja { font-size: 10px; letter-spacing: .04em; }
	.sp-menu__arrow { margin-left: auto; align-self: center; font-size: 16px; color: var(--c-gold); }
	.sp-menu__label--biz { margin-top: 22px; color: var(--c-text-sub); font-size: 11px; }
	.sp-menu__biz { margin-top: 8px; }
	.sp-menu__biz a, .sp-menu__nolink { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
	.sp-menu__biz a::before, .sp-menu__nolink::before { content: ""; width: 4px; height: 4px; margin-right: 6px; border-radius: 50%; background: var(--c-gold); flex: none; }
	.sp-menu__biz-en { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
	.sp-menu__biz-ja { font-size: 9.5px; }
	.sp-menu__biz .sp-menu__arrow { font-size: 11px; }
	.sp-menu__contact {
		display: flex; align-items: center; justify-content: space-between;
		margin-top: 28px; padding: 12px 20px 12px 18px;
		background: var(--c-red); color: #fff; border-radius: 10px;
	}
	.sp-menu__contact-en { display: block; font-family: var(--f-en); font-size: 18px; letter-spacing: .03em; line-height: 1.3; }
	.sp-menu__contact-ja { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .04em; }
	.sp-menu__contact .sp-menu__arrow { color: #e0b83a; font-size: 20px; }
}
.sp-menu { display: none; }
@media (max-width: 1080px) { .sp-menu { display: block; } }
@media (max-width: 782px) {
	.admin-bar .site-header.is-overlay { top: 46px; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
	position: relative; overflow: hidden;
	min-height: 100svh; max-height: 1100px;
	display: flex; align-items: center;
	color: #fff; background: var(--c-black);
}
@supports not (min-height: 100svh) { .hero { min-height: 100vh; } }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(23,23,22,.62) 0%, rgba(23,23,22,.28) 55%, rgba(23,23,22,.12) 100%),
		linear-gradient(0deg, rgba(23,23,22,.35), rgba(23,23,22,0) 40%);
}
.hero__inner { position: relative; padding-top: calc(var(--header-h) + 60px); padding-bottom: 120px; }
.hero__en {
	font-family: var(--f-serif);
	font-size: clamp(22px, 2.7vw, 39px); line-height: 1.34; letter-spacing: .12em; font-weight: 400;
	color: var(--c-gold-soft);
}
.hero__title {
	margin-top: clamp(28px, 3.8vw, 54px);
	font-family: var(--f-serif); font-weight: 500;
	font-size: clamp(44px, 6.3vw, 92px); line-height: 1.2; letter-spacing: .01em;
}
.hero__lead { margin-top: clamp(28px, 3.8vw, 52px); font-size: clamp(13.5px, 1.1vw, 15.5px); line-height: 2; letter-spacing: .04em; }
.hero__scroll {
	position: absolute; left: var(--gutter); bottom: 54px;
	font-size: 10.5px; letter-spacing: .05em; color: var(--c-gold-soft);
}
@media (min-width: 1440px) { .hero__scroll { left: calc((100% - var(--container)) / 2); } }

/* =========================================================
   About
   ========================================================= */
.about { padding: 96px 0 96px; background: #fff; }
.about__inner { position: relative; display: grid; grid-template-columns: 1fr; }
.about__box {
	position: relative; z-index: 1;
	grid-area: 1 / 1;
	align-self: center;
	width: 56.25%; /* 720 / 1280 */
	padding: clamp(32px, 4.4vw, 56px);
	background: var(--c-cream);
}
.about__label { font-family: var(--f-en); font-size: 17px; letter-spacing: .03em; color: var(--c-gold); }
.about__title {
	margin-top: 22px;
	font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(30px, 3.2vw, 46px); line-height: 1.3; letter-spacing: .01em;
}
.about__title-ja { font-size: 1em; }
.about__text { margin-top: 30px; max-width: 500px; font-size: 14.5px; line-height: 2.07; letter-spacing: .02em; }
.about__img {
	grid-area: 1 / 1; justify-self: end;
	width: 46.875%; /* 600 / 1280 */
	aspect-ratio: 600 / 680;
	border-radius: var(--radius); overflow: hidden;
}
.about__img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
	.about { padding: 64px 0; }
	.about__inner { display: flex; flex-direction: column-reverse; }
	.about__img { width: 100%; aspect-ratio: 1 / 1; }
	.about__box { width: calc(100% - 24px); margin: -48px auto 0 0; } /* 画像の左端に揃える */
}

/* =========================================================
   Businesses
   ========================================================= */
.business { padding: 120px 0 150px; background: var(--c-cream-light); }
.business__title {
	margin-top: 18px;
	font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(28px, 3.1vw, 45px); line-height: 1.4; letter-spacing: .02em;
	word-break: keep-all; overflow-wrap: anywhere;
}
.business__lead { margin-top: 10px; font-size: 14px; color: var(--c-text-sub); letter-spacing: .03em; word-break: keep-all; overflow-wrap: anywhere; }
.business__list { margin-top: 66px; border-top: 1px solid var(--c-border); }

.biz {
	display: grid;
	grid-template-columns: 520fr 65fr 695fr;
	grid-template-areas: "body . img";
	align-items: start;
	padding: 30px 0;
	border-bottom: 1px solid var(--c-border);
}
.biz:last-child { border-bottom: 0; }
.biz--reverse { grid-template-columns: 695fr 65fr 520fr; grid-template-areas: "img . body"; }
.biz__body { grid-area: body; padding-top: 6px; }
.biz__img {
	grid-area: img; position: relative;
	aspect-ratio: 695 / 418;
	border-radius: var(--radius); overflow: hidden;
	box-shadow: 0 18px 30px -18px rgba(23,23,22,.28);
}
.biz__img img { width: 100%; height: 100%; object-fit: cover; }
/* 画像上のアクセントライン */
.biz__img::before, .biz__img::after { content: ""; position: absolute; left: 24px; height: 2px; z-index: 1; }
.biz__img::before { top: 24px; width: 88px; background: var(--c-gold); }
.biz__img::after { bottom: 30px; width: 120px; background: var(--c-red); opacity: .55; height: 1px; }

.biz__num { font-size: 13px; color: var(--c-red); letter-spacing: .04em; }
.biz__name {
	margin-top: 14px;
	font-family: var(--f-serif); font-weight: 400; color: var(--c-red);
	font-size: clamp(22px, 2vw, 28px); line-height: 1.4;
}
.biz__catch { margin-top: 18px; font-size: clamp(16px, 1.35vw, 19px); font-weight: 700; letter-spacing: .06em; }
.biz__text { margin-top: 22px; font-size: 13.5px; line-height: 1.86; color: var(--c-text-sub); letter-spacing: .03em; }
.biz__foot { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.biz__tags { font-size: 11.5px; font-weight: 700; color: var(--c-text-sub); letter-spacing: .02em; }

@media (max-width: 900px) {
	.business { padding: 80px 0 90px; }
	.business__list { margin-top: 44px; }
	.biz, .biz--reverse {
		grid-template-columns: 1fr;
		grid-template-areas: "img" "body";
		gap: 28px; padding: 36px 0;
	}
	.biz__foot { flex-direction: column; align-items: flex-start; }
	.biz__num, .biz__tags { display: none; } /* SPでは番号・補足テキストを非表示 */
	.biz__name { margin-top: 0; }
	.biz__foot { margin-top: 24px; }
	.btn-red { width: 100%; }
}

/* =========================================================
   Business cycle
   ========================================================= */
.cycle { padding: 60px 0 130px; background: var(--c-cream-light); }
.cycle__head { text-align: center; }
.cycle__title {
	margin-top: 14px;
	font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(24px, 2.8vw, 40px); line-height: 1.5; letter-spacing: .02em;
	word-break: keep-all; overflow-wrap: anywhere;
}
.cycle__diagram {
	position: relative; margin: 40px auto 0;
	max-width: var(--container);
	aspect-ratio: 1280 / 960;
	container-type: inline-size;
}
.cycle__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cycle__lines .l-dash { fill: none; stroke: #d8d2c6; stroke-width: 1.2; stroke-dasharray: 8 7; }
.cycle__lines .l-dash--faint { stroke: #e4dfd5; }
.cycle__lines .l-halo { fill: color-mix(in srgb, var(--c-cream) 80%, #fff); stroke: color-mix(in srgb, var(--c-gold) 18%, #fff); stroke-width: 1; }
.cycle__lines .l-thin { stroke: color-mix(in srgb, var(--c-gold) 38%, #fff); stroke-width: 1.3; }
.cycle__lines .l-thin--faint { stroke: color-mix(in srgb, var(--c-gold) 22%, #fff); }
.cycle__lines .l-bold { stroke: color-mix(in srgb, var(--c-gold) 80%, #fff); stroke-width: 2.6; }
.cycle__lines .l-dot { fill: color-mix(in srgb, var(--c-gold) 80%, #fff); }

.cycle__center {
	position: absolute; left: 50%; top: 48.96%; /* 470 / 960 */
	width: 18.44cqw; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--c-border); border-radius: 50%;
	text-align: center;
}
.cycle__center-title {
	font-family: var(--f-en); font-weight: 500;
	font-size: 2.1cqw; line-height: 1.55; letter-spacing: .02em;
}
.cycle__center-sub { position: relative; margin-top: 1.9cqw; font-size: max(10px, .82cqw); color: var(--c-text-sub); }
.cycle__center-sub::before {
	content: ""; position: absolute; left: 50%; top: -1cqw;
	width: 3.8cqw; height: 2px; background: var(--c-gold-soft); transform: translateX(-50%);
}

.cycle__node {
	position: absolute; left: var(--x); top: var(--y);
	width: 14.06cqw; /* 180 / 1280 */
	transform: translate(-50%, -7.03cqw);
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cycle__photo {
	display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
	border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-border);
}
.cycle__photo img { width: 100%; height: 100%; object-fit: cover; }
.cycle__en {
	margin-top: .9cqw;
	font-family: var(--f-en); font-weight: 500; color: var(--c-red);
	font-size: max(11px, 1.25cqw); letter-spacing: .16em;
}
.cycle__ja { margin-top: .3cqw; font-family: var(--f-serif); font-size: max(13px, 1.36cqw); white-space: nowrap; }
.cycle__node--learn .cycle__en, .cycle__node--learn .cycle__ja { transform: translateX(7cqw); }

/* サイクル図（画像） */
.cycle__figure { margin: 40px auto 0; max-width: 1280px; }
.cycle__figure img { width: 100%; height: auto; }
@media (min-width: 768px) { .cycle__figure img { mix-blend-mode: multiply; } } /* PC画像の白背景をセクション背景になじませる */
@media (max-width: 767px) { .cycle__figure { margin-top: 28px; } }

/* サイクル図 拡大ボタン・モーダル（SPのみ） */
.cycle__zoom { display: none; }
.cycle-modal { display: none; }
@media (max-width: 767px) {
	.cycle__zoom {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		width: fit-content; height: 48px; margin: 20px auto 0; padding: 0 24px 0 20px;
		background: #fff; border: 1px solid #e6e0d6; border-radius: 999px;
		box-shadow: 0 2px 6px rgba(23,23,22,.08);
		font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink);
		transition: box-shadow .2s, transform .2s;
	}
	.cycle__zoom svg { color: var(--c-red); flex: none; }
	.cycle__zoom:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(23,23,22,.08); }
	.cycle-modal[open] {
		display: flex; flex-direction: column;
		position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
		margin: 0; padding: 0; border: 0;
		background: var(--c-cream-light); color: var(--c-text);
	}
	.cycle-modal::backdrop { background: rgba(23,23,22,.6); }
	.cycle-modal__bar {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 16px;
		border-bottom: 1px solid var(--c-border);
	}
	.cycle-modal__hint { font-size: 12px; color: var(--c-text-sub); }
	.cycle-modal__close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--c-ink); }
	.cycle-modal__scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; }
	.cycle-modal__scroll img { width: 230vw; max-width: none; height: auto; flex: none; }
	body.is-modal-open { overflow: hidden; }
}

.cycle__caption {
	margin-top: 60px; text-align: center;
	font-size: 14px; line-height: 2.1; letter-spacing: .06em; color: var(--c-text-sub);
	word-break: keep-all; overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.cycle { padding: 20px 0 80px; }
	.cycle__diagram { aspect-ratio: auto; container-type: normal; margin-top: 36px; }
	.cycle__lines { display: none; }
	.cycle__center {
		position: relative; left: auto; top: auto; transform: none;
		width: 200px; margin: 0 auto;
		box-shadow: 0 0 0 26px color-mix(in srgb, var(--c-cream) 80%, #fff);
	}
	.cycle__center-title { font-size: 19px; }
	.cycle__center-sub { margin-top: 18px; font-size: 10.5px; }
	.cycle__center-sub::before { top: -10px; width: 44px; }
	.cycle__nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; margin-top: 56px; }
	.cycle__node { position: static; width: auto; transform: none; }
	.cycle__photo { width: min(140px, 100%); }
	.cycle__en { margin-top: 12px; font-size: 12px; }
	.cycle__ja { margin-top: 2px; font-size: 14px; }
	.cycle__node--learn .cycle__en, .cycle__node--learn .cycle__ja { transform: none; }
	.cycle__caption { margin-top: 44px; font-size: 13px; }
}

/* =========================================================
   Experience
   ========================================================= */
.experience { padding: 120px 0 120px; background: #fff; }
.experience__title {
	margin-top: 6px;
	font-family: var(--f-serif); font-weight: 400; color: var(--c-red);
	font-size: clamp(30px, 2.9vw, 42px); letter-spacing: .12em; line-height: 1.4;
}
.stats { display: grid; gap: 16px; }
.stats--row1 { margin-top: 82px; grid-template-columns: repeat(3, 288fr) 336fr; }
.stats--row2 { margin-top: 32px; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 134px; padding: 20px 12px;
	border: 1px solid var(--c-border); border-radius: 6px; background: #fff;
	text-align: center;
}
.stat__num {
	font-family: "Inter", "Noto Sans JP", sans-serif; font-weight: 700;
	font-size: clamp(32px, 3.1vw, 45px); line-height: 1.1; color: var(--c-red); letter-spacing: .01em;
}
.stat__label { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--c-text-sub); letter-spacing: .02em; }
.stat__label::before { content: "— "; font-weight: 400; margin-right: .5em; }
.stats__text { align-self: center; padding-left: 32px; font-size: 16px; line-height: 2.25; color: var(--c-text-sub); letter-spacing: .04em; }

@media (max-width: 1000px) {
	.stats--row1 { grid-template-columns: repeat(3, 1fr); }
	.stats__text { grid-column: 1 / -1; order: -1; padding-left: 0; margin-bottom: 16px; }
	.stats--row2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	/* SP：EXPERIENCE を「私たちの実績」と同じサイズ・色に */
	.experience__head .label-serif { font-size: clamp(30px, 2.9vw, 42px); color: var(--c-red); }
	/* SP：実績カードを3カラム */
	.stats--row1, .stats--row2 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.stats--row2 { margin-top: 8px; }
	.stat { min-height: 96px; padding: 14px 4px; }
	.stat__num { font-size: clamp(17px, 5.2vw, 24px); }
	.stat__label { margin-top: 8px; font-size: 10.5px; line-height: 1.5; }
	.stat__label::before { content: none; }
}
@media (max-width: 600px) {
	.experience { padding: 80px 0; }
	.stats--row1 { margin-top: 40px; }
	.stats__text { font-size: 14px; line-height: 2; }
}

/* =========================================================
   Origin / Philosophy
   ========================================================= */
.philosophy { padding: 100px 0 100px; background: var(--c-cream); }
.philosophy__title {
	margin-top: 22px;
	font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(26px, 2.8vw, 40px); line-height: 1.5; letter-spacing: .04em;
}
.philosophy__body {
	margin-top: 70px;
	display: grid; grid-template-columns: 720fr 70fr 490fr; align-items: start;
}
.philosophy__imgs { grid-column: 1; display: grid; grid-template-columns: 450fr 256fr; gap: 14px; align-items: start; }
.philosophy__img { overflow: hidden; }
.philosophy__img img { width: 100%; height: 100%; object-fit: cover; }
.philosophy__img--main { aspect-ratio: 450 / 560; }
.philosophy__img--sub { aspect-ratio: 256 / 410; }
.philosophy__text { grid-column: 3; margin-top: -60px; }
.philosophy__en {
	font-family: var(--f-en); font-weight: 500; color: var(--c-red);
	font-size: clamp(40px, 4vw, 58px); line-height: 1.02; letter-spacing: .01em;
}
.philosophy__sub { margin-top: 30px; font-family: var(--f-serif); font-weight: 400; font-size: 26px; letter-spacing: .04em; }
.philosophy__message {
	margin-top: 28px;
	font-family: var(--f-serif); font-size: clamp(15px, 1.2vw, 17.5px); line-height: 2.35; letter-spacing: .04em;
}

@media (max-width: 960px) {
	.philosophy { padding: 80px 0; }
	.philosophy__body { grid-template-columns: 1fr; gap: 56px; margin-top: 40px; }
	.philosophy__imgs, .philosophy__text { grid-column: 1; }
	.philosophy__text { margin-top: 0; }
}

/* =========================================================
   News
   ========================================================= */
.news { padding: 110px 0 100px; background: #fff; }
.news__head { position: relative; }
.news__title {
	margin-top: 10px;
	font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(34px, 3.3vw, 48px); line-height: 1.3; letter-spacing: .08em;
}
.news__more { display: inline-block; margin-top: 8px; font-size: 12px; letter-spacing: .04em; transition: color .3s; }
.news__more:hover { color: var(--c-red); }
.news__list { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.news-card { display: block; }
.news-card__img { aspect-ratio: 300 / 263; border-radius: 12px; overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-tag {
	display: inline-block; margin-top: 18px; padding: 5px 12px 4px; border-radius: 3px;
	font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.5;
	background: var(--c-ink); color: #fff;
}
.news-tag--school { background: var(--c-red); }
.news-tag--labo { background: var(--c-gold); }
.news-tag--build { background: var(--c-ink); }
.news-tag--global { background: var(--c-green); }
.news-card__date { display: block; margin-top: 16px; font-size: 11px; color: var(--c-red); letter-spacing: .02em; }
.news-card__title {
	margin-top: 14px;
	font-family: var(--f-serif); font-size: 17.5px; line-height: 1.66; letter-spacing: .02em;
	transition: color .3s;
}
.news-card:hover .news-card__title { color: var(--c-red); }

@media (max-width: 1000px) { .news__list { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } }
@media (max-width: 560px) {
	.news { padding: 80px 0; }
	.news__more { position: absolute; right: 0; bottom: 6px; }
	.news__list { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
}

/* =========================================================
   Representative
   ========================================================= */
.rep { padding: 100px 0 100px; background: var(--c-ink); color: #fff; }
.rep__inner { display: grid; grid-template-columns: 500fr 72fr 708fr; align-items: start; }
.rep__photo {
	grid-column: 1; position: relative;
	aspect-ratio: 500 / 690; overflow: hidden;
}
.rep__photo img { width: 100%; height: 100%; object-fit: cover; }
.rep__caption {
	position: absolute; left: 24px; right: 24px; bottom: 22px;
	font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff;
}
.rep__photo::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
	background: linear-gradient(0deg, rgba(23,23,22,.55), rgba(23,23,22,0));
}
.rep__caption { z-index: 1; }
.rep__body { grid-column: 3; }
.rep__title {
	margin-top: 26px; padding-bottom: 30px;
	font-family: var(--f-serif); font-weight: 600;
	font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12; letter-spacing: .02em;
	border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 75%, transparent);
}
.rep__text { margin-top: 36px; font-size: 14.5px; line-height: 2; letter-spacing: .04em; color: rgba(255,255,255,.88); }
.rep__text p + p { margin-top: 1.95em; }
.rep__sign {
	margin-top: 36px; padding-top: 34px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
	border-top: 1px solid rgba(255,255,255,.14);
}
.rep__role { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .04em; }
.rep__name { margin-top: 6px; font-family: var(--f-serif); font-size: 28px; letter-spacing: .04em; line-height: 1.4; }
.rep__name-en { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--c-gold-soft); padding-bottom: 4px; }

@media (max-width: 900px) {
	.rep { padding: 80px 0; }
	.rep__inner { grid-template-columns: 1fr; gap: 48px; }
	.rep__photo, .rep__body { grid-column: 1; }
	.rep__photo { position: relative; top: auto; max-width: 480px; }
	.rep__text { font-size: 14px; }
}

/* SP：代表メッセージ */
@media (max-width: 767px) {
	.rep__photo { aspect-ratio: auto; overflow: visible; background: none; }
	.rep__photo::after { content: none; }
	.rep__photo img { aspect-ratio: 500 / 690; background: #d8d0c1; }
	.rep__caption {
		position: static; margin-top: 14px;
		font-weight: 400; color: #C59A27;
	}
	.rep__body > .label-line { display: none; }
	.rep__title { margin-top: 0; }
	.rep__sign { flex-direction: column; align-items: flex-start; gap: 6px; }
	.rep__sign > div { display: flex; align-items: baseline; gap: .6em; }
	.rep__role, .rep__name {
		margin-top: 0;
		font-family: var(--f-serif); font-size: 24px; line-height: 1.4; letter-spacing: .04em;
		color: #fff;
	}
	.rep__name-en { padding-bottom: 0; margin-top: 14px; } /* gap 6px + 14px = 上に20px */
}

/* =========================================================
   Company
   ========================================================= */
.company { padding: 100px 0 124px; background: var(--c-cream-light); }
.company__title {
	margin-top: 16px;
	font-family: var(--f-sans); font-weight: 700;
	font-size: clamp(32px, 3.1vw, 44px); line-height: 1.3; letter-spacing: .02em;
}
.company__table {
	margin-top: 44px; background: #fff;
	border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
	box-shadow: 0 10px 24px -14px rgba(23,23,22,.18);
}
.company__row {
	display: grid; grid-template-columns: 252px 1fr; align-items: baseline;
	padding: 24px 32px 25px;
	border-bottom: 1px solid var(--c-border);
}
.company__row:last-child { border-bottom: 0; }
.company__row dt {
	position: relative; padding-left: 18px;
	font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
.company__row dt::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 3px; height: 1.3em; background: var(--c-red); border-radius: 1px;
}
.company__row dd { font-size: 15px; line-height: 1.85; letter-spacing: .02em; }

@media (max-width: 700px) {
	.company { padding: 80px 0; }
	.company__row { grid-template-columns: 1fr; gap: 8px; padding: 20px 20px; }
	.company__row dd { font-size: 14px; padding-left: 18px; }
}

/* SP：COMPANY 見出しの線を非表示・会社概要テーブルの調整 */
@media (max-width: 767px) {
	.company__head .label-line::before { content: none; }
	.company__title { font-family: var(--f-serif); font-weight: 500; }
	.company__row { grid-template-columns: 1fr; gap: 6px; padding: 20px 20px; }
	.company__row dt { padding-left: 0; font-size: 13px; color: #A21D2C; }
	.company__row dt::before { content: none; }
	.company__row dd { padding-left: 0; font-size: 14px; }
}

/* =========================================================
   CTA
   ========================================================= */
.cta { padding: 96px 0 104px; background: var(--c-red); color: #fff; }
.cta__inner { display: grid; grid-template-columns: 1fr 450px; gap: 60px; align-items: start; }
.cta__title {
	font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(34px, 3.8vw, 54px); line-height: 1.3; letter-spacing: .02em;
	padding-top: 14px;
	word-break: keep-all; overflow-wrap: anywhere;
}
.cta__lead { margin-top: 38px; font-size: 14.5px; line-height: 2.07; letter-spacing: .04em; }
.cta__actions { display: flex; flex-direction: column; gap: 26px; }
.cta-tel {
	display: flex; align-items: center; gap: 14px;
	height: 76px; padding: 0 24px;
	background: #fff; color: var(--c-red); border-radius: 8px;
	transition: transform .3s var(--ease);
}
.cta-tel__icon { flex: none; }
.cta-tel__num { display: block; font-family: "Inter", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: .01em; color: color-mix(in srgb, var(--c-red) 80%, #000); }
.cta-tel__hours { display: block; margin-top: 4px; font-size: 11px; color: var(--c-text-sub); }
.cta-mail {
	display: flex; align-items: center; justify-content: space-between;
	height: 56px; padding: 0 24px;
	background: #fff; color: var(--c-ink); border-radius: 3px;
	font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.cta-mail .arrow { color: var(--c-red); transition: transform .3s var(--ease); }
.cta-mail:hover .arrow { transform: translate(3px, -3px); }
.cta-tel:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
	.cta { padding: 72px 0 80px; }
	.cta__inner { grid-template-columns: 1fr; gap: 40px; }
	.cta__lead { margin-top: 24px; font-size: 14px; }
	.cta__actions { gap: 16px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { padding: 64px 0 20px; background: #0D2024; color: #fff; }
.site-footer__top { display: grid; grid-template-columns: 1fr auto; gap: 40px; }
.site-footer__logo { width: 54px; }
.site-footer__name {
	margin-top: 22px;
	font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(22px, 2.3vw, 33px); line-height: 1.25; letter-spacing: .01em;
}
.site-footer__sub {
	display: inline-block; margin-top: 16px; padding-bottom: 10px;
	font-size: 10px; letter-spacing: .02em; color: var(--c-gold-soft);
	border-bottom: 1px solid var(--c-gold);
}
.site-footer__desc { margin-top: 14px; max-width: 360px; font-size: 12.5px; line-height: 1.85; color: rgba(255,255,255,.8); }
.site-footer__address { margin-top: 14px; font-size: 11px; color: rgba(255,255,255,.5); }
.site-footer__navs { display: grid; grid-template-columns: 250px 190px; padding-top: 4px; }
.footer-nav__title { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--c-gold-soft); }
.footer-nav__list { margin-top: 14px; display: grid; gap: 6px; }
.footer-nav__list a, .footer-nav__nolink { font-size: 13px; font-weight: 500; letter-spacing: .02em; transition: color .3s; }
.footer-nav__list a:hover { color: var(--c-gold-soft); }
.footer-nav__list .arrow { color: #fff; font-size: 11px; margin-left: 2px; }
.site-footer__bottom {
	margin-top: 56px; padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--c-gold) 80%, transparent);
	font-size: 10px; line-height: 1.3; letter-spacing: .02em; color: rgba(255,255,255,.55);
}
.site-footer__privacy { display: inline-block; margin-top: 2px; transition: color .3s; }
.site-footer__privacy:hover { color: #fff; }

@media (max-width: 900px) {
	.site-footer__top { grid-template-columns: 1fr; gap: 48px; }
	.site-footer__navs { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* SP：CTA・フッター */
@media (max-width: 767px) {
	.cta__title { white-space: nowrap; font-size: min(7.4vw, 34px); letter-spacing: 0; }
	.cta__title wbr { display: none; }
	.cta-tel__icon { display: none; }
	.site-footer__navs { grid-template-columns: 1fr; gap: 36px; }
}

/* =========================================================
   下層ページ（index.php）
   ========================================================= */
.page-main { padding: 80px 0 120px; }
.entry { max-width: 820px; margin-inline: auto; }
.entry__head .news-tag { margin-top: 0; margin-right: 12px; }
.entry__head .news-card__date { display: inline-block; margin-top: 0; }
.entry__title { margin-top: 18px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.5; }
.entry__thumb { margin-top: 36px; border-radius: 12px; overflow: hidden; }
.entry__content { margin-top: 40px; line-height: 2; }
.entry__content > * + * { margin-top: 1.4em; }
.entry__content a { color: var(--c-red); text-decoration: underline; }
.entry__back { margin-top: 64px; font-size: 13px; }
/* =========================================================
   最新情報 一覧（/news/）
   PC：3列 ／ スマホ（767px以下）：1列
   ========================================================= */
.news__list--archive { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; margin-top: 56px; }
@media (max-width: 1000px) { .news__list--archive { grid-template-columns: repeat(3, 1fr); gap: 44px 20px; } }
@media (max-width: 767px)  { .news__list--archive { grid-template-columns: 1fr; gap: 44px; margin-top: 36px; } }
.news-archive__empty { margin-top: 48px; }

/* ページネーション（the_posts_pagination の出力） */
.pagination { margin-top: 80px; }
.pagination .nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--c-border); border-radius: 3px; background: #fff;
	font-family: var(--f-sans); font-size: 14px; letter-spacing: .02em; line-height: 1;
	color: var(--c-black); transition: border-color .3s, color .3s;
}
.pagination a.page-numbers:hover { border-color: var(--c-red); color: var(--c-red); }
.pagination .page-numbers.current { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.pagination .page-numbers.dots { min-width: 20px; padding: 0; border-color: transparent; background: none; }
.pagination .prev.page-numbers,
.pagination .next.page-numbers { padding: 0 16px; }
@media (max-width: 767px) {
	.pagination { margin-top: 56px; }
	.pagination .nav-links { gap: 6px; }
	.pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 10px; font-size: 13px; }
	.pagination .prev.page-numbers,
	.pagination .next.page-numbers { padding: 0 12px; }
}

/* =========================================================
   お問い合わせ（page-contact.php / page-thanks.php）
   ========================================================= */
.contact { max-width: 820px; }
.contact__head .entry__title { margin-top: 10px; }
.contact__lead { margin-top: 24px; font-size: 14.5px; line-height: 2; }
.contact__note { margin-top: 20px; font-size: 12.5px; color: var(--c-text-sub); }
.contact__back { margin-top: 48px; }

.contact__tel {
	margin-top: 40px; padding: 24px 28px;
	background: var(--c-cream-light); border-radius: var(--radius);
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px;
}
.contact__tel-label { font-size: 13px; font-weight: 700; }
.contact__tel-num { font-family: "Inter", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--c-red); }
.contact__tel-hours { font-size: 12px; color: var(--c-text-sub); }

/* フォーム本体（Contact Form 7） */
.contact-form { margin-top: 56px; }
.cf-row {
	display: grid; grid-template-columns: 220px 1fr; gap: 12px 32px;
	padding: 24px 0; border-top: 1px solid var(--c-border);
}
.cf-table { border-bottom: 1px solid var(--c-border); }
.cf-label { display: flex; align-items: center; gap: 10px; padding-top: 12px; align-self: start; font-size: 14px; font-weight: 700; line-height: 1.5; }
.cf-req, .cf-opt {
	flex: none; padding: 3px 8px; border-radius: 2px;
	font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: .04em;
}
.cf-req { background: var(--c-red); color: #fff; }
.cf-opt { background: var(--c-cream); color: var(--c-text-sub); }
.cf-hint { margin-top: 6px; font-size: 12px; color: var(--c-text-sub); }

.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
	width: 100%; padding: 12px 16px;
	border: 1px solid var(--c-border); border-radius: 3px; background: #fff;
	font: inherit; font-size: 16px; line-height: 1.6; color: var(--c-text);
	transition: border-color .3s, box-shadow .3s;
}
.contact-form textarea { min-height: 220px; resize: vertical; }
.contact-form select {
	appearance: none; padding-right: 44px; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23af860a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.contact-form ::placeholder { color: #aaa49a; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none; border-color: var(--c-gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 18%, transparent);
}
.contact-form .wpcf7-not-valid { border-color: var(--c-red); }
.contact-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; color: var(--c-red); }

/* 同意・送信 */
.cf-agree { margin-top: 40px; text-align: center; font-size: 14px; }
.cf-agree .wpcf7-list-item { margin: 0; }
.cf-agree label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.cf-agree input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-red); }
.cf-agree a { color: var(--c-red); text-decoration: underline; }
.cf-submit { margin-top: 32px; text-align: center; }
.contact-form .wpcf7-submit {
	width: 320px; max-width: 100%; height: 60px;
	border: 0; border-radius: 3px; background: var(--c-red); color: #fff;
	font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .08em;
	cursor: pointer; transition: background-color .3s var(--ease), opacity .3s;
}
.contact-form .wpcf7-submit:hover { background: color-mix(in srgb, var(--c-red) 82%, #000); }
.contact-form .wpcf7-submit:disabled { opacity: .4; cursor: not-allowed; }
.contact-form .wpcf7-spinner { display: block; margin: 16px auto 0; }

/* 送信結果メッセージ */
.contact-form .wpcf7 form .wpcf7-response-output {
	margin: 32px 0 0; padding: 14px 18px; border-width: 1px; border-radius: 3px;
	font-size: 13.5px; text-align: center;
}
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.failed .wpcf7-response-output { border-color: var(--c-red); color: var(--c-red); }

@media (max-width: 767px) {
	.contact__tel { padding: 20px; }
	.contact-form { margin-top: 40px; }
	.cf-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
	.cf-label { padding-top: 0; }
	.cf-agree { text-align: left; }
	.contact-form .wpcf7-submit { width: 100%; }
}
