/* ============================================================
   PAGE: 会社案内 (About) — 固有スタイル（自己完結・ライト）
   共通土台は page-base.css。ここには About だけのレイアウトを書く。
   ============================================================ */

/* gold を green に転用（motto の罫線で使用）*/
.page-template-page-about {
	--gold:   #007d6e;
	--gold-2: #007d6e;
	/* 余白は画面幅の4vw基準（ほぼ画面いっぱい）。コンテンツ幅2000pxを超えたら頭打ち。 */
	--about-pad: max(4vw, calc((100vw - 2000px) / 2));
}

/* ════════════════════════════════════════
   HERO — mockup準拠（左コピー＋右 写真/Founded）
   ════════════════════════════════════════ */
#sec_head.about-hero {
	display: block;
	position: relative;
	width: 100vw; left: 50%; transform: translateX(-50%);
	margin-top: 96px;                 /* 固定ヘッダー分のクリアランス */
	min-height: 58vh;
	padding: clamp(40px, 6vh, 72px) 0 clamp(40px, 5vh, 64px);
	border-bottom: 0.5px solid var(--line-2);
	background: transparent;
	background-image: none !important;
	overflow: hidden;
	align-items: initial;
}
.about-hero .ph-bg::after {
	/* 下端フェードを弱めに（写真とのコントラスト確保）*/
	background: linear-gradient(to bottom, rgba(245,244,240,0) 55%, rgba(245,244,240,0.5) 100%);
}
.about-hero-inner {
	position: relative; z-index: 2;
	width: 100%; margin: 0 auto;
	padding: 0 var(--about-pad);
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
	min-height: inherit;
}

/* ── 左：コピー ── */
.about-hero .ph-eyebrow { margin-bottom: 22px; }
.about-hero-title {
	font-family: var(--font-serif);
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 500; color: var(--text);
	line-height: 1.15; letter-spacing: 0.03em;
	margin: 0 0 22px;
}
.about-hero-catch {
	font-family: var(--font-serif);
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 400; color: var(--green);
	line-height: 1.6; letter-spacing: 0.03em;
	margin: 0 0 22px;
}
.about-hero-desc {
	font-size: 16px; color: var(--text-2);
	line-height: 2.0; font-weight: 300;
	margin: 0 0 36px; max-width: 30em;
}
.about-hero-scroll {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	width: fit-content;
}
.about-hero-scroll-ring {
	width: 46px; height: 46px; border-radius: 50%;
	border: 0.5px solid var(--line-2); position: relative;
}
.about-hero-scroll-ring::after {
	content: ''; position: absolute; left: 50%; top: 50%;
	width: 1px; height: 12px; background: var(--green);
	transform: translate(-50%, -50%);
	animation: aboutScrollDot 1.8s ease-in-out infinite;
}
@keyframes aboutScrollDot {
	0%, 100% { opacity: .2; transform: translate(-50%, -9px); }
	50%      { opacity: 1;  transform: translate(-50%, 3px); }
}
.about-hero-scroll-text {
	font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--text-3);
}

/* ── 右：写真（フェードで背景に溶け込ませる）＋Foundedカード ── */
.about-hero-media { position: relative; }
.about-hero-photo {
	aspect-ratio: 16 / 11;
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%),
	                     linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, #000 62%, transparent 100%),
	            linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-composite: intersect;
}
.about-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-hero-founded {
	position: absolute; left: 0; bottom: 6%;
	background: transparent;
	padding: 0;
	display: flex; flex-direction: column;
}
.about-hero-founded-label {
	font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--green); font-weight: 700; margin-bottom: 6px;
}
.about-hero-founded-year {
	font-family: var(--font-serif);
	font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; color: var(--text);
	line-height: 1;
	text-shadow: 0 2px 16px rgba(245,244,240,0.9), 0 0 30px rgba(245,244,240,0.7);
}
.about-hero-founded-year span { font-size: 0.42em; margin-left: 4px; color: var(--text-2); }
.about-hero-founded-note {
	font-size: 12px; color: var(--text-3); margin-top: 6px; letter-spacing: 0.04em;
	text-shadow: 0 2px 12px rgba(245,244,240,0.9);
}

/* ── 入場アニメ ── */
.about-hero-copy > * { opacity: 0; animation: phFadeUp .9s ease forwards; }
.about-hero .ph-eyebrow  { animation-delay: .10s; }
.about-hero-title        { animation-delay: .20s; }
.about-hero-catch        { animation-delay: .34s; }
.about-hero-desc         { animation-delay: .48s; }
.about-hero-scroll       { animation-delay: .62s; }
.about-hero-media { opacity: 0; animation: phFadeUp 1s .3s ease forwards; }

/* ── レスポンシブ ── */
@media (max-width: 900px) {
	#sec_head.about-hero { min-height: auto; margin-top: 64px; padding: 40px 0 56px; }
	.about-hero-inner { grid-template-columns: 1fr; gap: 44px; }
}

/* ── LAYOUT（サイドナビ廃止・単一カラム・大胆な余白）── */
#sec_about { position: relative; z-index: 1; }
.about-content {
	width: 100%;
	margin: 0 auto;
	padding: 120px var(--about-pad) 160px;
}
.about-section {
	position: relative;
	padding: 140px 0;
	border-bottom: 0.5px solid var(--line);
}
.about-section:first-child { padding-top: 0; }
#message.about-section {
	padding-top: 0;
}
#message.about-section::before {
	content: none;
}
.about-section:last-child  { border-bottom: none; }

/* 消えたサイドナビの番号を、各セクションの背景ゴースト数字として復活 */
.about-section::before {
	content: attr(data-num);
	position: absolute; top: 24px; left: 0; z-index: 0;
	font-family: var(--font-serif); font-size: clamp(90px, 11vw, 180px);
	font-weight: 300; font-style: italic;
	color: rgba(0,125,110,0.05);
	line-height: 1; letter-spacing: -0.02em;
	pointer-events: none; user-select: none;
}
.about-section > * { position: relative; z-index: 1; }

/* ── 写真×テキストの分割セクション（経営理念・登録許可）── */
.about-split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(56px, 7vw, 120px);
	align-items: center;
}
.about-split--reverse { grid-template-columns: 1.1fr 0.9fr; }
.about-split-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.about-split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-split-body { max-width: 460px; }
.about-split-body .sec-title { margin-bottom: 26px; }

/* ── 社是（左：ダークパネル／右：写真。明確な2分割で意味を持たせる）──
   ※ 100vw はみ出しはスクロールバー分の誤差でズレやすいため使わない。
      他セクションと同じ .about-content 内に収めて確実に位置を揃える。 */
.about-motto-band {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	height: 52vh;
	margin: 140px 0;
	border-radius: 0;
	overflow: hidden;
}
.about-motto-band-panel {
	display: flex; flex-direction: column; justify-content: center;
	background: #12211d;
	padding: 64px clamp(32px, 6vw, 96px);
	min-height: 100%;
}
.about-motto-band-photo { position: relative; overflow: hidden; min-height: 100%; }
.about-motto-band-photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 継ぎ目を写真側からパネル色へ溶け込ませる */
.about-motto-band-photo::before {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to right, #12211d 0%, rgba(18,33,29,0) 14%);
	pointer-events: none;
}
.sec-eyebrow--light { color: #9adcc9; }
.sec-eyebrow--light::before { background: #9adcc9; }
.sec-title--light { color: #fff; }
.about-motto-band .motto-main {
	font-family: var(--font-serif);
	font-size: clamp(36px, 3.6vw, 52px); font-weight: 400; color: #fff;
	letter-spacing: 0.16em; line-height: 1.2; margin: 16px 0 12px;
}
.about-motto-band .motto-kana {
	font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.14em; margin-bottom: 20px;
}
.about-motto-band .motto-desc {
	font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.9;
	border-left: 0.5px solid rgba(255,255,255,0.35); padding-left: 16px;
	max-width: 400px;
}

/* ── 会社概要（表＋写真アクセント。表が伸びすぎないよう中央寄せ）── */
.about-outline {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: clamp(56px, 7vw, 112px);
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}
.about-outline-side { position: sticky; top: 110px; }
.about-outline-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: 32px;
}
.about-outline-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-outline-quote {
	font-family: var(--font-serif);
	font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; color: var(--text);
	line-height: 1.7; letter-spacing: 0.03em;
	border-left: 0.5px solid var(--green); padding-left: 18px;
}

/* ── 支店・営業所 / 啓発活動（表・本文＋右にジグザグ写真）──
   隣の表と同じ高さまで列を伸ばし（align-items:stretch）、
   space-evenly で上下の余白も含めて均等に3枚を配置する。 */
.about-office {
	display: grid;
	grid-template-columns: 1fr 620px;
	gap: clamp(48px, 6vw, 88px);
	align-items: stretch;
}
#office.about-office .about-office-main {
	padding-left: clamp(112px, 8vw, 180px);
}
.about-zigzag {
	display: flex; flex-direction: column;
	justify-content: space-evenly;
	height: 100%;
}
.about-zigzag-item {
	width: 90%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.about-zigzag-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 左右ジグザグ：奇数=左寄せ、偶数=右寄せ */
.about-zigzag-item:nth-child(odd)  { margin-right: auto; }
.about-zigzag-item:nth-child(even) { margin-left: auto; }

/* ── 啓発活動：3枚を斜めに連ねるエディトリアルコラージュ ── */
.about-activity-collage {
	position: relative;
	width: min(44vw, 760px);
	height: clamp(570px, 42vw, 700px);
	margin-left: clamp(-42px, -2.2vw, -20px);
	align-self: start;
}
.about-activity-collage > div {
	position: absolute;
	overflow: hidden;
	background: rgba(19, 42, 38, .04);
	box-shadow: 0 18px 48px rgba(18, 31, 27, .1);
	isolation: isolate;
}
.about-activity-collage > div::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, .42);
	pointer-events: none;
}
.about-activity-collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.about-activity-collage > div:hover img { transform: scale(1.025); }
.about-activity-collage__button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}
.about-activity-collage__button:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 4px;
}
.activity-gallery-empty {
	margin: 0;
	padding: 32px 0;
	color: var(--text-3);
	font-size: 13px;
}
.about-activity-collage-a {
	z-index: 3;
	top: 0;
	right: 0;
	width: 45%;
	aspect-ratio: 16 / 10;
}
.about-activity-collage-b {
	z-index: 2;
	top: 20%;
	left: 3%;
	width: 78%;
	aspect-ratio: 16 / 10;
}
.about-activity-collage-c {
	z-index: 4;
	left: 0;
	bottom: 0;
	width: 49%;
	aspect-ratio: 16 / 10;
}
.about-activity-collage::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 13%;
	right: -4%;
	width: 42%;
	height: 1px;
	background: linear-gradient(90deg, rgba(0, 125, 110, 0), rgba(0, 125, 110, .32));
	transform: rotate(-8deg);
	transform-origin: right center;
}

/* ── MESSAGE ── */
.msg-imgs {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	margin-bottom: clamp(96px, 8vw, 150px);
}
.message-number {
	position: relative;
	z-index: 0;
	margin: 0 0 -86px;
	font-family: var(--font-serif);
	font-size: clamp(90px, 11vw, 180px);
	font-weight: 300;
	font-style: italic;
	color: rgba(0,125,110,0.05);
	line-height: 1;
	letter-spacing: -0.02em;
	pointer-events: none;
	user-select: none;
}
.msg-img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.msg-img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.msg-img:hover img { transform: scale(1.03); }
.msg-body-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; align-items: start;
}
@media (min-width: 1200px) {
	.msg-body-grid {
		grid-template-columns: minmax(0, 1fr) clamp(600px, 44vw, 720px);
		gap: clamp(56px, 5vw, 96px);
	}
}
/* 署名が右寄せのまま隣の建物写真にくっついて見えるのを防ぐ（社長の顔と誤認されないように）*/
.msg-body-grid .sec-sign { text-align: left; }
.msg-portrait { aspect-ratio: 4/3; overflow: hidden; }
.msg-portrait img {
	width: 100%; height: 100%; object-fit: cover; object-position: center center;
}

/* ── TABLES ── */
.outline-table,
.regist-table,
.office-table {
	width: 100%;
	border-top: 0.5px solid var(--line-2);
}
.outline-table tr,
.regist-table tr,
.office-table tr {
	display: grid;
	border-bottom: 0.5px solid var(--line);
}
.outline-table tr { grid-template-columns: 168px 1fr; }
.regist-table tr  { grid-template-columns: 160px 1fr; }
.office-table tr  { grid-template-columns: 168px 1fr; }
.outline-table th,
.regist-table th,
.office-table th {
	display: flex; align-items: center;
	padding: 26px 0;
	background: none; border: none; white-space: nowrap;
}
.outline-table th {
	position: relative;
	padding-left: 18px;
	font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
	color: var(--text-3);
}
.outline-table th::before {
	content: '';
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 3px; height: 18px;
	background: var(--green);
	opacity: 0.55;
}
.regist-table th {
	padding: 14px 0;
	font-family: var(--font-serif); font-size: 13px; font-weight: 300;
	color: var(--text-2);
}
.office-table th {
	font-size: 17px; font-weight: 600; letter-spacing: 0.06em;
	color: var(--text); font-family: var(--font-serif);
}
.outline-table td,
.regist-table td,
.office-table td {
	padding: 26px 0;
	border: none; background: none;
	color: var(--text-2); line-height: 1.9;
}
.outline-table td { font-size: 16px; padding-left: 18px; color: var(--text); }
.regist-table td  { padding: 14px 0; font-size: 13px; }
.office-table td  { font-size: 14px; line-height: 2; }
.regist-table td a {
	color: var(--accent); border-bottom: 0.5px solid rgba(0,125,110,0.3);
}
.regist-table td a:hover { border-color: var(--accent); }
.office-table td a {
	color: var(--text-2); border-bottom: 0.5px solid var(--line);
	transition: color .2s;
}
.office-table td a:hover { color: var(--accent); }

/* ── ACTIVITY ── */
.activity-desc {
	font-size: 16px; color: var(--text-2); line-height: 2.2;
	border-left: 0.5px solid var(--line-2); padding-left: 18px;
	margin-bottom: 32px; max-width: 680px;
}
.activity-sns {
	display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px;
}
.activity-sns__item {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
	color: var(--text-muted); border: 0.5px solid var(--border-strong);
	padding: 10px 18px; transition: border-color .2s, color .2s;
}
.activity-sns__item img { opacity: .6; transition: opacity .2s; width: auto; }
.activity-sns__item img[alt="Instagram"] { height: 22px; }
.activity-sns__item img[alt="X"]         { height: 20px; }
.activity-sns__item img[alt="Facebook"]  { height: 16px; }
.activity-sns__item img[alt="TikTok"]    { height: 28px; }
.activity-sns__item:hover { border-color: var(--text); color: var(--text); }
.activity-sns__item:hover img { opacity: 1; }
.activity-more {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent); border: 0.5px solid var(--accent); padding: 12px 24px;
	transition: background .2s, color .2s;
	margin-bottom: 40px;
}
.activity-more:hover { background: var(--accent); color: #ffffff; }
.activity-toggle {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--text); border: 0.5px solid var(--line-2); padding: 12px 24px;
	background: none; cursor: pointer; margin-bottom: 32px;
	transition: border-color .2s, color .2s;
}
.activity-toggle:hover { border-color: var(--text); }
.activity-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.activity-toggle-icon {
	display: inline-block; width: 10px; height: 10px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform .3s; margin-top: -4px;
}
.activity-toggle[aria-expanded="true"] .activity-toggle-icon { transform: rotate(-135deg); margin-top: 4px; }
.grid_layout { overflow: hidden; max-height: 0; transition: max-height .5s ease; }

/* ── RESPONSIVE ── */
#sec_about,
.about-content,
.about-section,
.about-section > *,
.about-split > *,
.about-outline > *,
.about-office > * {
	min-width: 0;
}

.outline-table td,
.regist-table td,
.office-table td,
.activity-desc {
	overflow-wrap: anywhere;
	word-break: normal;
}

@media (max-width: 1024px) {
	.page-template-page-about .office-network-filter button,
	.activity-sns__item,
	.activity-more,
	.activity-toggle {
		min-height: 44px;
	}
	.page-template-page-about .office-network-filter button {
		padding-right: 8px;
		padding-left: 8px;
	}
}

/* 769–1024px: 写真と本文の関係を残したタブレット構図 */
@media (min-width: 769px) and (max-width: 1024px) {
	.about-content {
		padding: 96px clamp(38px, 4.8vw, 52px) 128px;
	}
	.about-section { padding: 112px 0; }

	.msg-body-grid {
		grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
		gap: clamp(40px, 5vw, 58px);
	}

	.about-split {
		grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
		gap: clamp(40px, 5vw, 64px);
	}
	#regist.about-split {
		grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
		align-items: start;
	}
	#regist .about-split-photo {
		position: sticky;
		top: 104px;
		aspect-ratio: 4 / 5;
	}
	#regist .regist-table tr { grid-template-columns: 118px 1fr; }

	.about-outline {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
		gap: clamp(42px, 5vw, 64px);
		max-width: none;
	}
	.about-outline-side {
		position: sticky;
		top: 104px;
		max-width: none;
	}
	.about-outline-photo { aspect-ratio: 4 / 5; }

	#office.about-office {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
		gap: clamp(32px, 4vw, 48px);
	}
	#office.about-office .about-office-main { padding-left: 0; }
	#office .about-zigzag {
		display: flex;
		min-width: 0;
	}
	#office .about-zigzag-item {
		width: 92%;
		aspect-ratio: 4 / 5;
	}
	#office .office-table tr { grid-template-columns: 118px 1fr; }

	#activity.about-office {
		grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
		gap: clamp(36px, 4vw, 56px);
		align-items: start;
	}
	.about-activity-collage {
		width: 100%;
		height: clamp(510px, 60vw, 620px);
		margin: 28px 0 0;
	}
}

/* 601–768px: 横幅を生かし、主要セクションは細い二列を維持 */
@media (min-width: 601px) and (max-width: 768px) {
	#sec_head.about-hero {
		margin-top: 64px;
		padding: 52px 0 64px;
	}
	.about-hero-inner {
		grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
		gap: 30px;
		padding: 0 clamp(32px, 5vw, 44px);
		align-items: center;
	}
	.about-hero-title { font-size: 38px; }
	.about-hero-catch { font-size: 16px; }
	.about-hero-desc {
		font-size: 13px;
		line-height: 1.9;
		margin-bottom: 24px;
	}
	.about-hero-scroll { display: none; }
	.about-hero-photo { aspect-ratio: 4 / 5; }

	.about-content { padding: 88px clamp(32px, 5vw, 44px) 112px; }
	.about-section { padding: 96px 0; }
	#message.about-section { padding-top: 0; }
	.msg-imgs { margin-bottom: 72px; }
	.message-number { margin-bottom: -58px; }
	.msg-body-grid {
		grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
		gap: 36px;
	}
	.msg-portrait {
		display: block;
		aspect-ratio: 4 / 5;
		margin-top: 18px;
	}

	#philosophy.about-split {
		grid-template-columns: minmax(0, .88fr) minmax(300px, 1.12fr);
		gap: 36px;
	}
	#philosophy .about-split-photo {
		order: initial;
		aspect-ratio: 4 / 5;
	}

	.about-motto-band {
		grid-template-columns: .92fr 1.08fr;
		height: clamp(430px, 62vw, 500px);
		margin: 112px 0;
	}
	.about-motto-band-panel {
		padding: 48px 34px;
		order: initial;
	}
	.about-motto-band-photo {
		min-height: 100%;
		aspect-ratio: auto;
		order: initial;
	}
	.about-motto-band-photo::before { display: block; }

	.about-outline {
		grid-template-columns: minmax(0, 1fr) 210px;
		gap: 34px;
		max-width: none;
	}
	.about-outline-side {
		position: sticky;
		top: 92px;
		max-width: none;
	}
	.about-outline-photo { aspect-ratio: 3 / 4; }
	.outline-table tr { grid-template-columns: 112px 1fr; }

	#regist.about-split {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 34px;
		align-items: start;
	}
	#regist .about-split-photo {
		order: initial;
		position: sticky;
		top: 92px;
		aspect-ratio: 3 / 4;
	}
	.regist-table tr { grid-template-columns: 104px 1fr; }

	#office.about-office {
		grid-template-columns: minmax(0, 1fr) 190px;
		gap: 30px;
	}
	#office.about-office .about-office-main { padding-left: 0; }
	#office .about-zigzag {
		display: flex;
		min-width: 0;
	}
	#office .about-zigzag-item {
		width: 100%;
		aspect-ratio: 3 / 4;
	}
	#office .office-table tr { grid-template-columns: 102px 1fr; }

	#activity.about-office {
		grid-template-columns: minmax(0, .98fr) minmax(300px, 1.02fr);
		gap: 34px;
		align-items: start;
	}
	.about-activity-collage {
		display: block;
		width: 100%;
		height: 510px;
		margin: 32px 0 0;
	}
	.about-activity-collage > div { position: absolute; }
	.about-activity-collage-a {
		inset: 0 0 auto auto;
		width: 58%;
	}
	.about-activity-collage-b {
		inset: 24% auto auto 0;
		width: 88%;
	}
	.about-activity-collage-c {
		inset: auto auto 0 4%;
		width: 62%;
	}
}

/* 600px以下: 左右の段差と写真比率で、一列でも編集的なリズムを保つ */
@media (max-width: 600px) {
	#sec_head.about-hero {
		min-height: auto;
		margin-top: 64px;
		padding: 42px 0 50px;
	}
	.about-hero-inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 0 24px;
	}
	.about-hero .ph-eyebrow { margin-bottom: 16px; }
	.about-hero-title {
		font-size: clamp(34px, 10.5vw, 42px);
		margin-bottom: 16px;
	}
	.about-hero-catch { margin-bottom: 16px; }
	.about-hero-desc {
		font-size: 14px;
		line-height: 1.9;
		margin-bottom: 0;
	}
	.about-hero-scroll { display: none; }
	.about-hero-media {
		width: calc(100% + 24px);
		margin-left: 0;
	}
	.about-hero-photo {
		aspect-ratio: 16 / 11;
		-webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%),
			linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
		mask-image: linear-gradient(to bottom, #000 66%, transparent 100%),
			linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
	}
	.about-hero-founded {
		left: 10%;
		bottom: 1%;
	}

	.about-content { padding: 72px 24px 96px; }
	.about-section { padding: 82px 0; }
	#message.about-section { padding-top: 0; }
	.about-section::before {
		top: 34px;
		left: auto;
		right: 0;
		font-size: clamp(82px, 27vw, 112px);
	}
	.msg-imgs { margin-bottom: 64px; }
	.message-number {
		margin: 0 0 -44px;
		font-size: clamp(82px, 27vw, 112px);
	}
	.msg-body-grid { grid-template-columns: 1fr; gap: 38px; }
	.msg-portrait {
		display: block;
		width: 92%;
		aspect-ratio: 16 / 11;
		margin-left: auto;
	}

	.about-split,
	.about-split--reverse { grid-template-columns: 1fr; gap: 42px; }
	#philosophy .about-split-photo {
		order: 1;
		width: 92%;
		aspect-ratio: 16 / 11;
		margin-right: auto;
	}

	.about-motto-band {
		grid-template-columns: 1fr;
		width: calc(100% + 48px);
		height: auto;
		margin: 96px 0 96px -24px;
	}
	.about-motto-band-panel {
		padding: 54px 24px 60px;
		order: 1;
		min-height: 0;
	}
	.about-motto-band-photo {
		aspect-ratio: 16 / 10;
		order: 0;
		min-height: 0;
	}
	.about-motto-band-photo::before {
		display: block;
		background: linear-gradient(to bottom, rgba(18,33,29,0) 62%, #12211d 100%);
	}

	.about-outline { grid-template-columns: 1fr; gap: 50px; }
	.about-outline-side {
		position: static;
		width: 82%;
		max-width: none;
		margin-right: auto;
	}
	.about-outline-photo {
		aspect-ratio: 16 / 11;
		margin-bottom: 22px;
	}

	#regist .about-split-photo {
		order: -1;
		width: 88%;
		aspect-ratio: 16 / 11;
		margin-left: auto;
	}

	#office.about-office,
	#activity.about-office {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	#office.about-office .about-office-main { padding-left: 0; }
	#office .about-zigzag {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 10px;
		height: auto;
		align-items: end;
		margin-top: 6px;
	}
	#office .about-zigzag-item {
		width: auto;
		aspect-ratio: 4 / 5;
		margin: 0;
	}
	#office .about-zigzag-item:nth-child(1) { grid-column: 1 / 6; }
	#office .about-zigzag-item:nth-child(2) {
		grid-column: 6 / 10;
		margin-bottom: 30px;
	}
	#office .about-zigzag-item:nth-child(3) { grid-column: 10 / 13; }

	.outline-table tr,
	.regist-table tr,
	.office-table tr {
		grid-template-columns: minmax(78px, 28%) minmax(0, 1fr);
	}
	.outline-table th,
	.outline-table td { padding-top: 20px; padding-bottom: 20px; }
	.outline-table th {
		padding-left: 12px;
		font-size: 12px;
		white-space: normal;
	}
	.outline-table td {
		padding-left: 12px;
		font-size: 14px;
		line-height: 1.85;
	}
	.regist-table th,
	.regist-table td {
		padding-top: 13px;
		padding-bottom: 13px;
	}
	.regist-table th {
		padding-right: 12px;
		white-space: normal;
	}
	.regist-table td { font-size: 12px; line-height: 1.8; }
	.office-table th {
		padding-right: 12px;
		font-size: 14px;
		white-space: normal;
		align-items: flex-start;
	}
	.office-table td { font-size: 12px; line-height: 1.9; }

	.office-network-tools { gap: 14px; }
	.office-network-filter {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px 8px;
	}
	.page-template-page-about .office-network-filter button {
		min-height: 44px;
		padding: 0 8px;
		text-align: center;
	}

	.about-activity-collage {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto auto auto;
		gap: 0;
		width: 100%;
		height: auto;
		margin: 8px 0 0;
	}
	.about-activity-collage::before { display: none; }
	.about-activity-collage > div {
		position: relative;
		inset: auto;
		width: auto;
		aspect-ratio: 16 / 10;
		margin: 0;
		box-shadow: 0 14px 34px rgba(18, 31, 27, .08);
	}
	.about-activity-collage-a {
		grid-column: 5 / 13;
		grid-row: 1;
		z-index: 2;
	}
	.about-activity-collage-b {
		grid-column: 1 / 11;
		grid-row: 2;
		z-index: 3;
		margin-top: -10px;
	}
	.about-activity-collage-c {
		grid-column: 4 / 12;
		grid-row: 3;
		z-index: 4;
		margin-top: -12px;
	}

	.activity-desc {
		font-size: 14px;
		line-height: 2;
		padding-left: 14px;
	}
	.activity-sns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.activity-sns__item {
		min-height: 44px;
		padding: 8px 12px;
		letter-spacing: .08em;
	}
	.activity-more,
	.activity-toggle {
		min-height: 44px;
		padding: 12px 18px;
	}
}

@media (max-width: 390px) {
	.about-content { padding-right: 20px; padding-left: 20px; }
	.about-motto-band {
		width: calc(100% + 40px);
		margin-left: -20px;
	}
	.about-hero-inner { padding-right: 20px; padding-left: 20px; }
	.about-hero-media { width: calc(100% + 20px); }
	.activity-sns__item {
		font-size: 10px;
		padding-right: 9px;
		padding-left: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-hero-copy > *,
	.about-hero-media,
	.fade-up {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.about-hero-scroll-ring::after,
	.about-activity-collage img,
	.msg-img img,
	.activity-toggle-icon,
	.grid_layout {
		animation: none !important;
		transition: none !important;
	}
	.about-activity-collage > div:hover img,
	.msg-img:hover img {
		transform: none !important;
	}
}

/* ============================================================
   RESPONSIVE READABILITY CORRECTION
   Avoid narrow copy columns on portrait tablets.
   ============================================================ */
@media (min-width: 601px) and (max-width: 900px) {
	.page-template-page-about .about-content {
		padding-inline: clamp(32px, 5vw, 54px);
	}

	.page-template-page-about #message .msg-body-grid {
		display: flex;
		flex-direction: column;
		gap: 52px;
	}

	.page-template-page-about #message .msg-body-grid > div:first-child {
		width: min(100%, 680px);
	}

	.page-template-page-about #message .msg-body-grid .sec-desc,
	.page-template-page-about #message .msg-body-grid .sec-sign {
		width: 100%;
		max-width: 680px;
	}

	.page-template-page-about #message .msg-portrait {
		width: min(82%, 610px);
		margin: 0 0 0 auto;
		aspect-ratio: 4 / 3;
	}

	.page-template-page-about #message .msg-portrait img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.page-template-page-about .about-split,
	.page-template-page-about .about-split.about-split--reverse {
		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	.page-template-page-about .about-split .about-split-body,
	.page-template-page-about .about-split.about-split--reverse .about-split-body {
		order: 1;
		width: min(100%, 720px);
		max-width: none;
	}

	.page-template-page-about .about-split .about-split-photo,
	.page-template-page-about .about-split.about-split--reverse .about-split-photo {
		order: 2;
		width: min(86%, 700px);
		margin: 0 0 0 auto;
		aspect-ratio: 3 / 2;
	}

	.page-template-page-about .about-split.about-split--reverse .about-split-photo {
		margin: 0 auto 0 0;
	}

	.page-template-page-about .about-split-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.page-template-page-about .about-motto-band {
		display: flex;
		flex-direction: column;
	}

	.page-template-page-about .about-motto-band-panel,
	.page-template-page-about .about-motto-band-photo {
		width: 100%;
		max-width: none;
	}

	.page-template-page-about .about-motto-band-panel {
		padding: clamp(48px, 7vw, 72px);
	}

	.page-template-page-about .about-motto-band-panel .motto-desc {
		width: min(100%, 620px);
		max-width: none;
	}

	.page-template-page-about .about-motto-band-photo {
		aspect-ratio: 16 / 9;
	}

	.page-template-page-about .about-motto-band-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.page-template-page-about .about-outline {
		display: flex;
		flex-direction: column;
		gap: 54px;
	}

	.page-template-page-about .about-outline-main {
		width: 100%;
	}

	.page-template-page-about .about-outline-side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(180px, .38fr);
		align-items: end;
		gap: 30px;
		width: min(88%, 720px);
		margin-left: auto;
	}

	.page-template-page-about .about-outline-photo {
		width: 100%;
		aspect-ratio: 3 / 2;
	}

	.page-template-page-about .about-outline-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.page-template-page-about .about-office {
		display: flex;
		flex-direction: column;
		gap: 56px;
	}

	.page-template-page-about .about-office-main {
		width: 100%;
		max-width: none;
	}

	.page-template-page-about #activity .activity-desc {
		width: min(100%, 720px);
		max-width: none;
	}

	.page-template-page-about #office .about-office-photos,
	.page-template-page-about #activity .about-activity-collage {
		width: min(88%, 720px);
		margin-left: auto;
	}

	.page-template-page-about #activity .about-activity-collage {
		min-height: 500px;
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.page-template-page-about #philosophy.about-split .about-split-photo,
	.page-template-page-about #regist.about-split .about-split-photo {
		width: min(86%, 700px) !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 3 / 2 !important;
	}

	.page-template-page-about #philosophy.about-split .about-split-photo img,
	.page-template-page-about #regist.about-split .about-split-photo img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	.page-template-page-about #motto.about-motto-band .about-motto-band-photo {
		flex: 0 0 auto !important;
		height: clamp(360px, 56vw, 500px) !important;
		min-height: 0 !important;
		aspect-ratio: 16 / 9 !important;
	}

	.page-template-page-about #motto.about-motto-band {
		height: auto !important;
		min-height: 0 !important;
	}
}

/* ============================================================
   2026-08 COMPANY PAGE REFINEMENT
   A structural hero, stable office media, and a clear activity hierarchy.
   ============================================================ */

/* Hero: treat the photograph as an architectural plane instead of a soft inset. */
.page-template-page-about #sec_head.about-hero {
	min-height: clamp(560px, 68vh, 680px);
	padding: 0;
	background:
		linear-gradient(104deg, rgba(225, 244, 240, .72) 0%, rgba(249, 249, 246, .9) 48%, rgba(249, 249, 246, .2) 82%);
}

.page-template-page-about .about-hero-inner {
	grid-template-columns: minmax(390px, .92fr) minmax(420px, 1.08fr);
	gap: clamp(42px, 5vw, 82px);
	align-items: center;
	min-height: inherit;
	padding-right: var(--about-pad);
}

.page-template-page-about .about-hero-copy {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 590px;
	padding: clamp(58px, 7vh, 80px) 0 clamp(48px, 6vh, 70px);
}

.page-template-page-about .about-hero-title {
	font-size: clamp(42px, 4vw, 62px);
	margin-bottom: 28px;
}

.page-template-page-about .about-hero-catch {
	font-size: clamp(18px, 1.6vw, 23px);
	margin-bottom: 28px;
}

.page-template-page-about .about-hero-desc {
	max-width: 34em;
	margin-bottom: 42px;
}

.page-template-page-about .about-hero-media {
	position: relative;
	width: min(100%, 560px);
	height: clamp(330px, 28vw, 410px);
	min-height: 0;
	margin-left: 0;
	justify-self: start;
	overflow: hidden;
	clip-path: polygon(7% 0, 100% 0, 100% 93%, 0 100%);
}

.page-template-page-about .about-hero-media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(245, 247, 243, .28) 0%, rgba(245, 247, 243, 0) 15%);
	pointer-events: none;
}

.page-template-page-about .about-hero-media > .about-hero-photo {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

.page-template-page-about .about-hero-photo img {
	object-position: center center;
}

.page-template-page-about .about-hero-founded {
	left: clamp(40px, 5vw, 72px);
	bottom: clamp(26px, 4vh, 42px);
	z-index: 3;
}

.page-template-page-about .about-hero-founded-label,
.page-template-page-about .about-hero-founded-year,
.page-template-page-about .about-hero-founded-year span,
.page-template-page-about .about-hero-founded-note {
	color: #fff;
	text-shadow: 0 2px 18px rgba(10, 24, 20, .72);
}

/* Office: the media composition owns its height, independent of filtered rows. */
@media (min-width: 901px) {
	.page-template-page-about #office.about-office {
		grid-template-columns: 1fr 620px;
		gap: clamp(48px, 6vw, 88px);
		align-items: stretch;
	}

	.page-template-page-about #office.about-office .about-office-main {
		padding-left: clamp(112px, 8vw, 180px);
	}

	.page-template-page-about #office .about-zigzag {
		position: relative;
		top: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		gap: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		align-self: stretch;
	}

	.page-template-page-about #office .about-zigzag-item {
		width: 90%;
		height: auto;
		min-height: 0;
		aspect-ratio: 3 / 2;
		flex: 0 0 auto;
	}

	.page-template-page-about #office .about-zigzag-item:nth-child(1) {
		margin: 0 auto 0 0;
	}

	.page-template-page-about #office .about-zigzag-item:nth-child(2) {
		margin: 0 0 0 auto;
	}

	.page-template-page-about #office .about-zigzag-item:nth-child(3) {
		margin: 0 auto 0 0;
	}
}

/* Activities: editorial storytelling with one lead image and two records. */
.page-template-page-about #activity.about-office {
	grid-template-columns: minmax(420px, 600px) minmax(0, 1fr);
	column-gap: clamp(38px, 4vw, 70px);
	row-gap: 0;
	justify-content: start;
	align-items: center;
}

.page-template-page-about #activity .about-office-main {
	position: relative;
	top: auto;
	max-width: 600px;
}

.page-template-page-about #activity .about-activity-collage {
	display: block;
	position: relative;
	width: min(52vw, 920px);
	height: clamp(500px, 40vw, 680px);
	min-height: 0;
	margin: 0;
	align-self: center;
}

.page-template-page-about #activity .about-activity-collage::before {
	display: none;
}

.page-template-page-about #activity .about-activity-collage > div {
	position: absolute;
	height: auto;
	margin: 0;
	overflow: hidden;
	background: #fff;
	border: clamp(5px, .45vw, 8px) solid rgba(255, 255, 255, .94);
	box-shadow: 0 24px 60px rgba(30, 43, 38, .1);
	transform-origin: center;
}

.page-template-page-about #activity .about-activity-collage-a {
	top: 8%;
	left: 0;
	right: auto;
	width: 56%;
	height: 86%;
	aspect-ratio: auto;
	z-index: 2;
}

.page-template-page-about #activity .about-activity-collage-b {
	top: 0;
	right: 0;
	left: auto;
	width: 46%;
	height: 39%;
	aspect-ratio: auto;
	z-index: 4;
	transform: rotate(1.1deg);
}

.page-template-page-about #activity .about-activity-collage-c {
	right: 3%;
	left: auto;
	bottom: 0;
	width: 50%;
	height: 40%;
	aspect-ratio: auto;
	z-index: 3;
	transform: rotate(.6deg);
}

.page-template-page-about #activity .about-activity-collage > div::after {
	border-color: rgba(255, 255, 255, .58);
}

.page-template-page-about #activity .activity-desc {
	max-width: 34em;
	margin-bottom: 34px;
	padding-left: 0;
	border-left: 0;
	line-height: 2.15;
}

.page-template-page-about #activity .activity-actions {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2vw, 32px);
	margin-top: 30px;
	margin-bottom: 0;
}

.page-template-page-about #activity .activity-actions .activity-more,
.page-template-page-about #activity .activity-actions .activity-toggle {
	margin-bottom: 0;
}

.page-template-page-about #activity .activity-sns {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 0;
}

.page-template-page-about #activity > .grid_layout {
	display: grid;
	grid-column: 1 / -1;
	grid-template-rows: 0fr;
	width: 100%;
	max-height: none;
	min-width: 0;
	margin-top: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows .72s cubic-bezier(.22, .7, .18, 1), opacity .38s ease, margin-top .72s cubic-bezier(.22, .7, .18, 1), visibility 0s linear .72s;
}

.page-template-page-about #activity > .grid_layout[aria-hidden="false"] {
	grid-template-rows: 1fr;
	margin-top: clamp(44px, 5vw, 72px);
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.page-template-page-about #activity .grid_layout__inner {
	min-height: 0;
	overflow: hidden;
}

.page-template-page-about #activity .activity-gallery-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 260px);
	min-height: 52px;
	margin: clamp(36px, 4vw, 56px) auto 0;
	border: 1px solid rgba(0, 147, 127, .72);
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	transition: background .25s ease, color .25s ease;
}

.page-template-page-about #activity .activity-gallery-more:hover {
	background: var(--accent);
	color: #fff;
}

.page-template-page-about #activity .activity-sns__item {
	position: relative;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transition: transform .25s ease;
}

.page-template-page-about #activity .activity-sns__item span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.page-template-page-about #activity .activity-sns__item img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	opacity: .9;
	transition: opacity .25s ease, filter .25s ease;
}

.page-template-page-about #activity .activity-sns__item img[alt="X"] {
	width: 23px;
	height: 23px;
}

.page-template-page-about #activity .activity-sns__item img[alt="Facebook"] {
	width: 26px;
	height: 26px;
}

.page-template-page-about #activity .activity-sns__item img[alt="TikTok"] {
	width: 30px;
	height: 30px;
}

@media (hover: hover) {
	.page-template-page-about #activity .activity-sns__item:hover {
		transform: translateY(-3px);
	}

	.page-template-page-about #activity .activity-sns__item:hover img {
		opacity: 1;
		filter: saturate(1.08);
	}
}

@media (max-width: 900px) {
	.page-template-page-about #sec_head.about-hero {
		min-height: 0;
		padding: 0;
	}

	.page-template-page-about .about-hero-inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0;
	}

	.page-template-page-about .about-hero-copy {
		width: 100%;
		max-width: none;
		padding: clamp(50px, 8vw, 76px) clamp(32px, 6vw, 54px) clamp(54px, 8vw, 82px);
	}

	.page-template-page-about .about-hero-media {
		width: calc(100% - clamp(40px, 10vw, 86px));
		height: clamp(280px, 56vw, 410px);
		min-height: 0;
		margin: 0 auto clamp(32px, 6vw, 54px);
		clip-path: polygon(0 11%, 100% 0, 100% 100%, 0 100%);
	}

	.page-template-page-about .about-hero-founded {
		left: clamp(32px, 7vw, 64px);
		bottom: 28px;
	}

	.page-template-page-about #office .about-zigzag {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 12px;
		width: min(78%, 600px);
		height: auto;
		min-height: 0;
		margin: 0 0 0 auto;
	}

	.page-template-page-about #office .about-zigzag-item {
		width: auto;
		margin: 0;
		aspect-ratio: 4 / 3;
		flex: none;
	}

	.page-template-page-about #office .about-zigzag-item:nth-child(1) { grid-column: 1 / 10; }
	.page-template-page-about #office .about-zigzag-item:nth-child(2) { grid-column: 4 / 13; }
	.page-template-page-about #office .about-zigzag-item:nth-child(3) { grid-column: 1 / 11; }

	.page-template-page-about #activity.about-office {
		display: flex;
		flex-direction: column;
		gap: 54px;
	}

	.page-template-page-about #activity .about-office-main {
		position: relative;
		top: auto;
	}

	.page-template-page-about #activity .about-activity-collage {
		width: min(94%, 760px);
		height: clamp(460px, 72vw, 600px);
		margin-left: auto;
	}
}

@media (max-width: 600px) {
	.page-template-page-about .about-hero-title {
		font-size: clamp(38px, 11vw, 48px);
	}

	.page-template-page-about .about-hero-desc {
		margin-bottom: 0;
	}

	.page-template-page-about .about-hero-scroll {
		display: none;
	}

	.page-template-page-about .about-hero-media {
		min-height: clamp(340px, 88vw, 440px);
	}

	.page-template-page-about #office .about-zigzag {
		width: 100%;
	}

	.page-template-page-about #activity .about-activity-collage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto;
		gap: 10px;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
	}

	.page-template-page-about #activity .about-activity-collage > div {
		position: relative;
		inset: auto;
		width: auto;
		height: auto;
		transform: none;
		border-width: 4px;
		box-shadow: none;
	}

	.page-template-page-about #activity .about-activity-collage-a {
		grid-column: 1 / 3;
		grid-row: 1;
		aspect-ratio: 16 / 10 !important;
	}

	.page-template-page-about #activity .about-activity-collage-b,
	.page-template-page-about #activity .about-activity-collage-c {
		grid-row: 2;
		aspect-ratio: 1 / 1 !important;
	}

	.page-template-page-about #activity .about-activity-collage-b { grid-column: 1; }
	.page-template-page-about #activity .about-activity-collage-c { grid-column: 2; }

	.page-template-page-about #activity .activity-actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}
}