/*
Theme Name: 太平不動産
Theme URI: https://www.taihei-fudousan.example/
Author: Taihei Fudousan
Description: 太平不動産株式会社（奥村組グループ）コーポレートサイト用テーマ。
Version: 1.7.6
Text Domain: taihei-fudousan
*/

/* ==========================================================================
   Reset & base
   ========================================================================== */
html, body {
	margin: 0;
	padding: 0;
	background: #fff;
}

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

body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
	background: #fff;
}

a {
	color: #008ed8;
}

a:hover {
	color: #1f95cd;
}

section[id] {
	scroll-margin-top: 100px;
}

img {
	max-width: 100%;
	display: block;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--color-navy: #1a2733;
	--color-body: #3f4d59;
	--color-muted: #5a6875;
	--color-blue: #008ed8;
	--color-blue-light: #82c2eb;
	--color-blue-accent: #1a72c8;
	--color-blue-deep: #1a3a52;
	--color-cyan: #2ba7e0;
	--color-cyan-hover: #1f95cd;
	--color-border: #eef1f3;
	--color-border-light: #e6eaee;
	--color-gray: #9aa6b0;
	--font-sans: 'Noto Sans JP', sans-serif;
	--font-serif: 'Noto Serif JP', serif;
}

/* ==========================================================================
   Image placeholder (static — replace with real photography later)
   ========================================================================== */
.image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e7ebee;
	border: 1px dashed #c3ccd3;
	color: #8b97a1;
	font-size: 13px;
	letter-spacing: .05em;
	text-align: center;
	padding: 12px;
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-sans);
}

body {
	padding-top: 77px;
}

.admin-bar .site-header {
	top: 32px;
}

.site-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
	color: inherit;
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-logo__group {
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--color-muted);
	font-weight: 500;
}

.site-logo__name {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-navy);
	letter-spacing: .02em;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 34px;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-navy);
	flex-wrap: wrap;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-navy);
	transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.main-nav__item {
	position: relative;
	padding: 22px 0;
	display: flex;
	align-items: center;
	gap: 2px;
}

.main-nav__link {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: var(--color-navy);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.main-nav__link--label {
	cursor: default;
}

.main-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	line-height: 0;
}

.main-nav__link:hover {
	border-bottom-color: var(--color-blue);
}

.main-nav__link--plain {
	text-decoration: none;
	color: var(--color-navy);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.main-nav__link--plain:hover {
	border-bottom-color: var(--color-blue);
}

.main-nav__caret {
	font-size: 10px;
	color: var(--color-blue);
}

.main-nav__dropdown {
	position: absolute;
	top: 100%;
	left: -14px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(20, 50, 80, .14);
	border-radius: 8px;
	padding: 10px 0;
	min-width: 184px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.main-nav__dropdown--business {
	min-width: 224px;
}

.main-nav__item:hover .main-nav__dropdown,
.main-nav__item:focus-within .main-nav__dropdown,
.main-nav__item.is-open .main-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav__dropdown-link {
	display: block;
	padding: 11px 22px;
	font-size: 15px;
	color: #33424f;
	text-decoration: none;
}

.main-nav__dropdown-link:hover {
	background: #f2f8fc;
	color: var(--color-blue);
}

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer {
	background: #fff;
	font-family: var(--font-sans);
	border-top: 1px solid var(--color-border);
}

.site-footer__top {
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 40px 20px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr .75fr 1fr 2.2fr;
	gap: 28px;
}

.footer-end {
	display: grid;
	grid-template-columns: 180px 1fr;
	align-items: stretch;
}

.footer-col--works {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
}

/* flexの子要素はデフォルトでalign-self:stretchとなり、
   inline-blockの下線（border-bottom）が幅いっぱいに伸びてしまうため、
   本来の文字幅にフィットさせる。 */
.footer-col--works > .footer-col__title {
	align-self: flex-start;
}

.footer-col--news {
	grid-column: 2;
	grid-row: 1;
	/* footer-end の align-items:stretch を継承すると、この列の中身
	   （お知らせリンク1行）よりずっと高い、行全体の高さいっぱいの
	   透明な当たり判定ボックスができてしまい、同じセル（1列目〜2列目に
	   またがる行1）に重なる footer-col--works 側の要素のクリックを
	   妨げていた。中身の高さだけに縮める。 */
	align-self: start;
}


.footer-brand__mark {
	display: flex;
	align-items: center;
	gap: 11px;
}

.footer-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.footer-brand__group {
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--color-muted);
	font-weight: 500;
}

.footer-brand__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-navy);
	letter-spacing: .02em;
	white-space: nowrap;
}

.footer-brand__address {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--color-muted);
	letter-spacing: .02em;
}

.footer-brand .footer-cta {
	display: inline-block;
	margin-top: 28px;
}

.footer-col__title {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--color-navy);
	padding-bottom: 2px;
	margin-bottom: 16px;
}

.footer-col__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.footer-col__list a {
	font-size: 14px;
	color: var(--color-muted);
	text-decoration: none;
}

.footer-col__list a:hover {
	color: var(--color-blue);
}

.okumura-logo {
	display: block;
	height: 40px;
	width: auto;
	object-fit: contain;
}

.okumura-logo--rail {
	width: 132px;
	flex: 0 0 auto;
}

.footer-cta {
	background: var(--color-cyan);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	padding: 18px 52px;
	border-radius: 40px;
	flex-shrink: 0;
}

.footer-cta:hover {
	background: var(--color-cyan-hover);
}

.site-footer__bottom {
	border-top: 1px solid var(--color-border);
}

.site-footer__bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.copyright {
	font-size: 13px;
	color: var(--color-gray);
}

.footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.footer-legal-links a {
	font-size: 13px;
	color: var(--color-gray);
	text-decoration: none;
}

.footer-legal-links a:hover {
	color: var(--color-blue);
}

/* ==========================================================================
   Page sections (shared)
   ========================================================================== */
.section {
	max-width: 1080px;
	margin: 0 auto;
	padding: 60px 40px 30px;
}

.section--message {
	padding: 70px 40px 30px;
}

.section--map {
	padding: 60px 40px 80px;
}

.section-heading {
	margin-bottom: 36px;
}

.section--message .section-heading {
	margin-bottom: 40px;
}

.section--policy .section-heading {
	margin-bottom: 32px;
}

.section-heading__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 40px;
	color: var(--color-navy);
	margin: 0;
	letter-spacing: .06em;
}

.section-heading__eyebrow {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--color-blue);
}

/* ==========================================================================
   代表挨拶 (message)
   ========================================================================== */
.message-grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 56px;
	align-items: start;
}

.message-lead {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.65;
	color: var(--color-navy);
	margin: 0 0 28px;
}

.message-lead__sub {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.8;
}

.message-body p {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-body);
	margin: 0 0 22px;
}

.message-body p:last-child {
	margin-bottom: 34px;
}

.message-sign {
	text-align: right;
}

.message-sign__company {
	font-size: 15px;
	color: var(--color-body);
	margin: 0 0 8px;
}

.message-sign__name {
	font-size: 22px;
	color: var(--color-navy);
	margin: 0;
	letter-spacing: .08em;
}

.message-sign__name strong {
	font-size: 26px;
	font-weight: 500;
}

.message-photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 4px;
}

.message-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ==========================================================================
   基本方針 (policy) — SERVICE ring diagram
   ========================================================================== */
.policy-statement {
	font-family: var(--font-serif);
	font-size: 24px;
	line-height: 1.9;
	color: var(--color-navy);
	margin: 0 0 30px;
	letter-spacing: .03em;
}

.service-diagram {
	position: relative;
	width: 650px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 36px auto 0;
}

.service-diagram__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.service-diagram__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; aspect-ratio: 1 / 1; border-radius: 50%; background: none; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; }
.service-diagram__brand { width: 94%; min-height: 82px; padding: 12px 13px; background: transparent; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--color-navy); text-align: left; }
.service-diagram__brand img { width: 46px; height: auto; flex: 0 0 auto; }
.service-diagram__brand span { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.service-diagram__brand small { font-size: 9px; font-weight: 500; letter-spacing: .03em; }
.service-diagram__brand strong { font-size: 18px; font-weight: 700; }

.service-node { position: absolute; width: 23%; aspect-ratio: 1 / 1; border-radius: 50%; background: #c4edf9; display: block; color: var(--color-navy); z-index: 2; }
.service-node__image { display: block; width: 84%; height: 84%; margin: 8%; object-fit: contain; transition: transform .3s ease, filter .3s ease; }
.service-node__bubble { position: absolute; left: 50%; bottom: calc(100% - 8px); z-index: 3; transform: translate(-50%, 8px); width: 192px; padding: 16px 18px; border-radius: 18px; background: var(--color-blue); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.5; text-align: center; white-space: nowrap; box-shadow: 0 7px 20px rgba(24, 56, 79, .16); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
.service-node__bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 9px solid transparent; border-top-color: var(--color-blue); }
.service-node:hover, .service-node:focus-visible { outline: none; z-index: 4; }
.service-node:hover .service-node__image, .service-node:focus-visible .service-node__image { transform: scale(1.04); filter: drop-shadow(0 8px 14px rgba(28, 76, 105, .18)); }
.service-node:hover .service-node__bubble, .service-node:focus-visible .service-node__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.service-node:focus-visible .service-node__image { outline: 3px solid var(--color-blue-accent); outline-offset: 4px; }
.service-node--top { left: 50%; top: 0; transform: translateX(-50%); }
.service-node--right-top { right: 1.5%; top: 18.5%; }
.service-node--right-bottom { right: 1.5%; bottom: 18.5%; }
.service-node--bottom { left: 50%; bottom: 0; transform: translateX(-50%); }
.service-node--left-bottom { left: 1.5%; bottom: 18.5%; }
.service-node--left-top { left: 1.5%; top: 18.5%; }

@media (max-width: 600px) {
	.service-diagram { width: calc(100vw - 24px); margin-top: 28px; }
	.service-diagram__brand { width: 96%; min-height: 0; padding: 8px 7px; gap: 7px; }
	.service-diagram__brand img { width: 27px; }
	.service-diagram__brand small { font-size: 7px; }
	.service-diagram__brand strong { font-size: 12px; }
	.service-node__bubble { width: 160px; padding: 10px 12px; font-size: 10px; }
}
/* ==========================================================================
   会社概要 (profile)
   ========================================================================== */
.profile-table {
	display: flex;
	flex-direction: column;
}

.profile-row__accent {
	border-top: 2px solid var(--color-blue-accent);
	width: 190px;
}

.profile-row--accent-blue .profile-row__accent {
	border-top-color: var(--color-blue-accent);
}

.profile-row__content {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--color-border-light);
}

.profile-row__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-navy);
}

.profile-row__value {
	font-size: 15px;
	color: var(--color-navy);
}

.related-companies {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.related-company {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.related-company__info {
	font-size: 15px;
	color: var(--color-navy);
	line-height: 1.7;
}

.related-company__tel {
	color: var(--color-blue-accent);
}

.related-company__link {
	flex-shrink: 0;
	background: #cfe6f4;
	color: var(--color-blue-deep);
	text-decoration: none;
	font-size: 13px;
	padding: 10px 26px;
	border-radius: 20px;
}

.related-company__link:hover {
	background: #b7d9ec;
}

/* ==========================================================================
   組織図 (org chart) — a row in the 会社概要 profile-table
   ========================================================================== */
.profile-row__label-note {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-body);
	letter-spacing: .02em;
}

.org-chart__image {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
}

/* 組織図（CSS版）— 元画像と同じ座標比率で配置。左右中央のツリーには
   絶対にしないこと（総務部・開発部の並びに合わせ、上位2段は右寄りになる） */
.org-chart-css {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 1334 / 891;
}

.org-chart-css__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.org-chart-css__lines line {
	stroke: #0071b9;
	stroke-width: 3;
}

.org-chart-css__line--dashed {
	stroke-dasharray: 6 5;
}

.org-chart-css__box {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.3;
	box-sizing: border-box;
}

.org-chart-css__box--okumura {
	left: 46.10%;
	top: 0;
	width: 32.61%;
	min-height: 19.08%;
	background: var(--color-blue-light);
	color: #fff;
}

.org-chart-css__box--taihei {
	left: 46.10%;
	top: 26.94%;
	width: 32.61%;
	min-height: 19.08%;
	background: #0071b9;
	color: #fff;
}

.org-chart-css__box--leaf {
	background: #fff;
	border: 2px solid #0071b9;
	color: var(--color-navy);
}

.org-chart-css__box--dev {
	left: 40.48%;
	top: 53.65%;
	width: 19.27%;
	min-height: 19.30%;
}

.org-chart-css__box--general {
	left: 65.29%;
	top: 53.65%;
	width: 19.34%;
	min-height: 19.30%;
}

.org-chart-css__box--s1,
.org-chart-css__box--s2,
.org-chart-css__box--s3,
.org-chart-css__box--s4 {
	padding-left: 2px;
	padding-right: 2px;
	white-space: nowrap;
}

.org-chart-css__box--s1 {
	left: 1.00%;
	top: 81.71%;
	width: 23.27%;
	min-height: 18.18%;
}

.org-chart-css__box--s2 {
	left: 25.81%;
	top: 81.71%;
	width: 23.42%;
	min-height: 18.18%;
}

.org-chart-css__box--s3 {
	left: 50.77%;
	top: 81.71%;
	width: 23.42%;
	min-height: 18.18%;
}

.org-chart-css__box--s4 {
	left: 75.81%;
	top: 81.71%;
	width: 23.34%;
	min-height: 18.18%;
}

/* ==========================================================================
   所在地 (map)
   ========================================================================== */
.map-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 44px;
	align-items: start;
}

.map-frame {
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--color-border-light);
}

.map-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.access-info__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 22px;
}

.access-line__label {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-blue-deep);
	margin: 0 0 6px;
}

.access-line__text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-body);
	margin: 0 0 22px;
}

.access-line__text--last {
	margin: 0;
}

/* ==========================================================================
   TOP page — stacked scroll panels
   FV and お知らせ are plain sections with no scroll motion. 注目プロジェクト onward
   (PICK UP / OUR BUSINESS / OC BRAND / COMPANY) sit inside
   .scroll-stack: every panel there is sticky, so a panel pins in place as
   soon as it reaches the top and the panel that follows it in the markup —
   being later in source order with a higher z-index — slides up from below
   and covers it. Each panel fills at least the viewport so it hides the
   pinned panel underneath completely.

   A panel that fits the viewport pins directly under the header, flush —
   deliberately NOT vertically centred, because that would put every
   panel's heading at a different offset depending on how much shorter than
   the viewport its own content is, which reads as the pin position being
   inconsistent from one panel to the next. The section is stretched
   (flex: 1 0 auto) to fill the panel instead, so any leftover space sits
   silently below its own content, under its own background colour.

   A panel taller than the viewport cannot pin flush under the header
   without covering its own lower half before it can be read, so
   assets/js/scroll-stack.js gives those a negative top offset instead:
   it scrolls through in full first, only holding in place once its
   bottom edge reaches the header offset — so what's pinned on screen is
   whatever was already visible at that moment, not necessarily its
   heading. The original aspect ratios of each section's cards and images
   remain untouched; the JS recalculates the pin offset after fonts and
   images settle so taller panels can still scroll through in full.
   ========================================================================== */
.scroll-stack__pin {
	position: sticky;
	top: 77px;
	min-height: calc(100vh - 77px);
	display: flex;
	flex-direction: column;
	background: #fff;
}

/* The last pin only ever covers the one before it — nothing stacks on top
   of IT — so forcing it to a full viewport height like the others just
   leaves dead space below its own content once nothing needs hiding under
   it anymore. Sizing it to its content instead lets the next (non-stacked)
   section start right after it. */
.scroll-stack__pin:last-of-type {
	min-height: 0;
}

.scroll-stack__pin > section {
	flex: 1 0 auto;
	/* Only the vertical margins go: .top-pickup's would count towards the
	   panel height, but .top-business, .oc-brand and .top-company-links
	   all centre themselves with `margin: 0 auto`, so the horizontal ones
	   have to survive. */
	margin-top: 0;
	margin-bottom: 0;
	/* The panel's cross-axis stretch would size this to 100% width anyway
	   since the section itself has no side margins, but pin it down
	   explicitly for clarity. */
	width: 100%;
	min-width: 0;
}


/* Whatever follows the stack has to paint over the last pinned panel, or it
   would slide underneath it instead of covering it. */
.top-strip,
.site-footer {
	position: relative;
	z-index: 10;
}

/* ==========================================================================
   TOP page — hero slider
   ========================================================================== */
.hero-section {
	background: linear-gradient(180deg, #008ed8 0%, #0079b8 100%);
	padding: 52px 40px 70px;
}

.hero-section__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.hero-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 52px;
	color: #fff;
	letter-spacing: .06em;
	margin: 0 0 14px;
}

.hero-lead {
	font-size: 17px;
	color: #dcecf7;
	letter-spacing: .04em;
	margin: 0 0 34px;
}

.hero-gallery {
	position: relative;
	width: 1200px;
	max-width: 100%;
	height: 470px;
	margin: 0 auto;
}

.hero-frame {
	position: absolute;
	overflow: hidden;
	border-radius: 4px;
	transition: left .8s cubic-bezier(.4, 0, .2, 1), top .8s cubic-bezier(.4, 0, .2, 1),
		width .8s cubic-bezier(.4, 0, .2, 1), height .8s cubic-bezier(.4, 0, .2, 1),
		opacity .8s cubic-bezier(.4, 0, .2, 1), z-index .8s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
	cursor: pointer;
}

.hero-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-frame.is-main {
	left: 0;
	top: 0;
	width: 58.333%;
	height: 100%;
	opacity: 1;
	z-index: 4;
}

.hero-frame.is-sub-top {
	left: 59.833%;
	top: 0;
	width: 40.167%;
	height: 48.085%;
	opacity: 1;
	z-index: 3;
}

.hero-frame.is-sub-bottom {
	left: 59.833%;
	top: 51.915%;
	width: 40.167%;
	height: 48.085%;
	opacity: 1;
	z-index: 3;
}

/* お知らせ2パネルを併設する場合、右下の枠を左右に二分割し、左半分だけを
   スライド写真に使う（右半分はパネルが固定で占める）。 */
.hero-slider--has-news .hero-frame.is-sub-bottom {
	width: 19.334%;
}

.hero-frame.is-hidden-1 {
	left: 2%;
	top: 4.255%;
	width: 56.333%;
	height: 91.489%;
	opacity: 0;
	z-index: 1;
}

.hero-frame.is-hidden-2 {
	left: 3.667%;
	top: 7.660%;
	width: 54.667%;
	height: 84.681%;
	opacity: 0;
	z-index: 0;
}

.hero-dots {
	display: flex;
	justify-content: center;
	gap: 13px;
	margin-top: 26px;
}

.hero-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background .3s;
	background: rgba(255, 255, 255, .4);
}

.hero-dot.is-active {
	background: #fff;
}

/* お知らせ2 の最新投稿パネル。スライダー右下の枠の右半分を占め、
   写真スライドの入れ替わりとは無関係にそこへ固定表示される
   （.hero-frame ではないので hero-gallery.js の回転対象に入らない）。 */
.fv-news-panel {
	position: absolute;
	left: 80.666%;
	top: 51.915%;
	width: 19.334%;
	height: 48.085%;
	z-index: 4;
	display: none;
	flex-direction: column;
	padding: 14px 16px 10px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
	text-decoration: none;
	overflow: hidden;
	/* パネルの実幅はスライダーの幅に比例して 160px〜230px の間で変わる。
	   中の文字とイラストを cqw（＝パネル内側の幅の1%）で指定して、
	   どの画面幅でも同じ見た目の比率（タイトルは1行8文字で3行）に
	   なるようにする。 */
	container-type: inline-size;
}

.fv-news-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.fv-news-panel__click {
	font-size: 13px;
	font-size: 7cqw;
	font-weight: 700;
	color: #0079b8;
	letter-spacing: .04em;
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* 白枠内にカーソルが入ったら「CLICK！」の文字を少し拡大する */
.fv-news-panel:hover .fv-news-panel__click {
	transform: scale(1.18);
}

.fv-news-panel__date {
	font-size: 11px;
	font-size: 5.4cqw;
	color: #97a4ae;
	white-space: nowrap;
}

.fv-news-panel__title {
	margin-top: 6px;
	margin-top: 3cqw;
	font-size: 13px;
	font-size: 12cqw;
	font-weight: 700;
	line-height: 1.4;
	color: #0b2f4a;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* イラストと三本線をひとまとめにして、ホバー中は一緒にバウンドさせる */
.fv-news-panel__figure {
	position: relative;
	/* 余った縦の余白は上へ逃がし、この枠自体はイラストの大きさぴったりに
	   する。枠がイラストと同じ大きさなので、三本線を枠基準で絶対配置すれば
	   パネルが細くなっても頭の斜め上から離れない。 */
	margin-top: auto;
	align-self: flex-end;
	/* 三本線を頭の斜め上に置くための余白（線はこの余白内に絶対配置する） */
	padding-top: 26px;
	padding-top: 5cqw;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.fv-news-panel:hover .fv-news-panel__figure {
	animation: fv-news-illust-bounce 2s ease-in-out infinite;
}

.fv-news-panel__illust {
	max-width: 100%;
	max-width: 52cqw;
	max-height: 100%;
	/* 高さもパネル幅基準で決め打ちして、どの画面幅でも同じ比率にする */
	max-height: 31cqw;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* 三本線はイラストの右側（右手の斜め上）に配置。扇形はSVGのパス側で
   開かせているので、ここで回転はかけない（かけると全体が同じ角度に
   傾くだけで平行に見えてしまう）。 */
.fv-news-panel__lines {
	position: absolute;
	top: -1cqw;
	left: 60%;
	/* 人物からもう少し離し、手の位置くらいまで右へ */
	left: auto;
	right: -6cqw;
	width: 34px;
	width: 15cqw;
	height: 29px;
	height: 13cqw;
	fill: none;
	stroke: #0079b8;
	stroke-width: 2.2;
	stroke-linecap: round;
}

@keyframes fv-news-illust-bounce {
	0%, 48%, 100% {
		transform: translateY(0);
	}
	12% {
		transform: translateY(-9px);
	}
	24% {
		transform: translateY(0);
	}
	36% {
		transform: translateY(-6px);
	}
}

/* PC版のみ表示。狭い画面ではパネルを出さず、右下の枠も元の全幅に戻す */
@media (min-width: 901px) {
	.fv-news-panel {
		display: flex;
	}
}

/* 内側の余白だけは cqw が使えない（自分自身の幅は問い合わせできない）ため、
   パネルが細くなる帯でだけ少し詰める。文字とイラストの大きさは cqw 指定で
   自動的に比例するので、ここでは触らない。 */
@media (min-width: 901px) and (max-width: 1149px) {
	.fv-news-panel {
		padding: 10px 12px 8px;
	}
}

@media (max-width: 900px) {
	.hero-slider--has-news .hero-frame.is-sub-bottom {
		width: 40.167%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv-news-panel:hover .fv-news-panel__figure {
		animation: none;
	}
}

/* ==========================================================================
   TOP page — shared section heading (narrower than company page's)
   ========================================================================== */
.top-section {
	max-width: 1000px;
	margin: 0 auto;
	padding: 78px 40px 20px;
}

.top-section--wide {
	max-width: 1160px;
}

.top-heading {
	margin-bottom: 30px;
}

.top-heading__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 36px;
	color: var(--color-navy);
	margin: 0;
	letter-spacing: .05em;
}

.top-heading__eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--color-blue);
}

/* ==========================================================================
   TOP page — news list
   ========================================================================== */
.top-news-item {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--color-border-light);
	text-decoration: none;
}

.top-news-item:hover {
	background: #f7fafc;
}

.top-news-item__date {
	font-size: 15px;
	color: #8a97a2;
	letter-spacing: .04em;
	flex-shrink: 0;
}

.top-news-item__title {
	font-size: 16px;
	color: #333;
}

.pill-link-row {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.pill-link {
	font-size: 15px;
	color: #333;
	text-decoration: none;
	border: 1px solid #b6c2cc;
	border-radius: 40px;
	padding: 13px 44px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fff;
}

.pill-link:hover {
	background: var(--color-blue);
	color: #fff;
	border-color: var(--color-blue);
}

/* ==========================================================================
   TOP page — pick up / business grid / OC brand / company links / strip
   ========================================================================== */
.top-pickup {
	background: #d9edfa;
	margin-top: 70px;
	padding: 70px 40px;
}

.pickup-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.pickup-card {
	display: block;
	text-decoration: none;
}

.pickup-card__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 3px;
}

.pickup-card__photo > img,
.pickup-card__photo > .image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.pickup-card:hover .pickup-card__photo > img,
.pickup-card:hover .pickup-card__photo > .image-placeholder,
.pickup-card:focus-visible .pickup-card__photo > img,
.pickup-card:focus-visible .pickup-card__photo > .image-placeholder {
	transform: scale(1.08);
}

.pickup-card__title-box {
	position: relative;
	margin: -48px 24px 0 0;
	min-height: 112px;
	background: #fff;
	padding: 16px 18px;
	box-shadow: 0 6px 16px rgba(20, 40, 60, .12);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pickup-card__title {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 6px;
}

.pickup-card__dash {
	color: var(--color-blue);
}

.pickup-card__location {
	font-size: 13px;
	color: var(--color-muted);
	margin: 0 0 0 18px;
}

.top-business {
	max-width: 1160px;
	margin: 0 auto;
	padding: 80px 40px;
}

.top-business__intro {
	font-size: 16px;
	line-height: 2;
	color: #3a4855;
	margin: 0 0 40px;
}

.business-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.business-tile {
	position: relative;
	display: block;
	aspect-ratio: 1.28 / 1;
	overflow: hidden;
	border-radius: 4px;
	text-decoration: none;
}

.business-tile > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.business-tile:hover {
	box-shadow: 0 12px 30px rgba(14, 109, 179, .28);
}

.business-tile__effect {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(5, 23, 39, .38);
	-webkit-backdrop-filter: blur(10px) saturate(.75);
	backdrop-filter: blur(10px) saturate(.75);
	clip-path: circle(0 at var(--hover-x, 50%) var(--hover-y, 50%));
	transition: clip-path 280ms cubic-bezier(.4, 0, .2, 1);
	will-change: clip-path;
}

.business-tile.is-hovered .business-tile__effect,
.business-tile:focus-visible .business-tile__effect {
	clip-path: circle(var(--hover-radius, 150%) at var(--hover-x, 50%) var(--hover-y, 50%));
	transition-duration: 420ms;
}

.business-tile__effect.is-resetting {
	transition: none;
}

.business-tile__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(10, 60, 105, .25) 0%, rgba(10, 60, 105, .62) 100%);
	pointer-events: none;
	padding: 0 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.business-tile__number {
	color: #fff;
	font-size: 13px;
	letter-spacing: .06em;
	margin-bottom: 4px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.business-tile__title {
	position: relative;
	display: inline-block;
	align-self: flex-start;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.business-tile__title::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.business-tile:hover .business-tile__title::after,
.business-tile:focus-visible .business-tile__title::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.business-tile__effect,
	.business-tile__title::after {
		transition: none;
	}
}

.business-tile__desc {
	color: #eaf3fa;
	font-size: 13px;
	line-height: 1.7;
	margin-top: 10px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.oc-brand {
	background: #d9edfa;
}

.oc-brand__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 40px;
}

.oc-brand__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 34px;
	color: var(--color-navy);
	margin: 0 0 34px;
	letter-spacing: .05em;
}

.oc-brand__layout {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 44px;
	align-items: start;
}

.oc-badge {
	background: #fff;
	border-radius: 6px;
	padding: 26px 30px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 4px 16px rgba(20, 50, 80, .06);
}

.oc-badge + .oc-badge {
	margin-top: 18px;
}

.oc-badge__name {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--color-navy);
}

.oc-badge__r {
	border: 1.5px solid var(--color-navy);
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	padding: 2px 8px;
	color: var(--color-navy);
}

.oc-brand__text {
	font-size: 14px;
	line-height: 2;
	color: #3a4855;
	margin: 24px 0 0;
}

.oc-brand__link {
	margin-top: 26px;
	font-size: 15px;
	color: #333;
	text-decoration: none;
	border: 1px solid #8fb4cf;
	border-radius: 40px;
	padding: 12px 34px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fff;
}

.oc-brand__link:hover {
	background: var(--color-blue);
	color: #fff;
	border-color: var(--color-blue);
}

.oc-brand__photos {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 14px;
}

.oc-brand__photo--wide {
	grid-column: 1 / 4;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
}

.oc-brand__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}

.oc-brand__photo--wide img,
.oc-brand__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top-company-links {
	max-width: 1160px;
	margin: 0 auto;
	padding: 80px 40px 30px;
}

.top-company-links .top-heading {
	margin-bottom: 36px;
}

.company-link-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px 72px;
}

.company-link-item {
	display: flex;
	align-items: center;
	gap: 26px;
	text-decoration: none;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--color-border-light);
}

.company-link-item:hover {
	opacity: .75;
}

.company-link-item__photo {
	width: 128px;
	height: 88px;
	overflow: hidden;
	border-radius: 3px;
	flex-shrink: 0;
}

.company-link-item__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.company-link-item:hover .company-link-item__photo img {
	transform: scale(1.08);
}

.company-link-item__text {
	display: flex;
	flex-direction: column;
}

.company-link-item__title {
	font-size: 23px;
	font-weight: 500;
	color: var(--color-navy);
}

.company-link-item__en {
	font-size: 14px;
	letter-spacing: .14em;
	color: #8a97a2;
}

.company-link-item__arrow {
	margin-left: auto;
	width: 36px;
	height: 36px;
	border: 1px solid #b6c2cc;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-blue);
	font-size: 15px;
	flex-shrink: 0;
}

/* Top/bottom whitespace shared by every TOP-page section except the FV,
   matched to what 注目プロジェクト already looked like: its own section
   padding plus the extra 80px its nested .top-business wrapper (reused
   from the OUR BUSINESS section purely for its max-width) was already
   adding. That nested wrapper's own padding is cancelled below so its
   total isn't doubled now that the same amount is applied directly. This
   has to come after every section's own padding rule above to win the
   cascade at equal specificity. */
.top-section,
.top-pickup,
.top-business,
.oc-brand,
.top-company-links {
	padding-top: clamp(108px, calc(6vh + 80px), 160px);
	padding-bottom: clamp(108px, calc(6vh + 80px), 160px);
}

.top-pickup > .top-business {
	padding-top: 0;
	padding-bottom: 0;
}

/* 注目プロジェクトはピン留めされる時間（＝スクロール距離）を他のスタック
   セクションより長くしたいので、他セクション共通の下余白の上に、この
   セクション専用の余白を追加してパネル自体の高さを増やす。 */
.top-pickup {
	padding-bottom: clamp(280px, calc(20vh + 160px), 460px);
}

/* 会社情報リンクの下と、スライダーの下の余白を合わせる（スライダー下の
   40pxに揃える）。上記の共通ルールが与える大きい下余白を打ち消す。 */
.top-company-links {
	padding-bottom: 40px;
}

.top-strip {
	width: 100%;
	margin: 0 0 40px;
	padding: 0;
	overflow: hidden;
}

.top-strip__track {
	display: flex;
	width: max-content;
	gap: clamp(18px, 2vw, 38px);
	padding: 0 clamp(18px, 2vw, 38px) 0 0;
	animation: top-strip-scroll 52s linear infinite;
}

.top-strip__photo {
	flex: 0 0 clamp(280px, calc((100vw - 12vw) / 3.2), 440px);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 16px;
}

.top-strip__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes top-strip-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.top-strip__track {
		animation-play-state: paused;
	}
}

/* ==========================================================================
   Page title band (works / news)
   ========================================================================== */
.title-band {
	background: #d9edfa;
}

.title-band__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.title-band__heading {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 46px;
	color: var(--color-navy);
	margin: 0;
	letter-spacing: .06em;
}

.title-band__eyebrow {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--color-blue);
}

.title-band__breadcrumb {
	font-size: 13px;
	color: var(--color-muted);
	margin: 26px 0 0;
}

.title-band__breadcrumb a {
	color: var(--color-muted);
	text-decoration: none;
}

.title-band__illust {
	width: 300px;
	height: 220px;
	flex-shrink: 0;
}

/* staff-illust-07は手を横に広げたポーズで元絵が横長のため、
   staff-illust-08と同じ箱幅のままだと、両手を見切れさせずに顔を
   同程度の大きさで収めることができない。箱を少し広げて両立させる。 */
.title-band__illust--works {
	width: 340px;
}

.title-band__illust-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	display: block;
}

/* ホバー中、2秒に1回のリズムで2度ぴょんぴょんとバウンドする
   （プロジェクト／お知らせページのタイトルイラスト共通） */
.title-band__illust:hover .title-band__illust-img {
	animation: title-illust-bounce 2s ease-in-out infinite;
}

@keyframes title-illust-bounce {
	0%, 48%, 100% {
		transform: translateY(0);
	}
	12% {
		transform: translateY(-22px);
	}
	24% {
		transform: translateY(0);
	}
	36% {
		transform: translateY(-14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.title-band__illust:hover .title-band__illust-img {
		animation: none;
	}
}

/* ==========================================================================
   works page
   ========================================================================== */
.works-body {
	max-width: 1220px;
	margin: 0 auto;
	padding: 52px 40px 80px;
}

.works-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	align-items: start;
}

.works-filter {
	background: #e9f4fb;
	border-radius: 10px;
	padding: 30px 28px;
}

.works-filter__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 16px;
}

.works-filter__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.works-filter__list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.works-filter__list li::before {
	content: '—';
	color: var(--color-blue);
}

.works-filter__list a {
	font-size: 14px;
	color: var(--color-body);
	text-decoration: none;
}

.works-filter__list a:hover,
.works-filter__list a.is-active {
	color: var(--color-blue);
	font-weight: 700;
}

.works-filter__title-en {
	font-size: 11px;
	font-weight: 400;
	color: var(--color-muted);
	letter-spacing: .08em;
	margin-left: 8px;
}

.works-empty {
	font-size: 15px;
	color: var(--color-muted);
	grid-column: 1 / -1;
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 24px;
	align-items: start;
}

.works-card {
	background: #f3f8fb;
	border: 1px solid #dde8ef;
	border-radius: 10px;
	padding: 20px;
}

.works-card__main-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.works-card__main-link .works-card__photo img,
.works-card__main-link .works-card__photo .image-placeholder {
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.works-card__main-link:hover .works-card__photo img,
.works-card__main-link:hover .works-card__photo .image-placeholder,
.works-card__main-link:focus-visible .works-card__photo img,
.works-card__main-link:focus-visible .works-card__photo .image-placeholder {
	transform: scale(1.06);
}

.works-card__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.works-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-blue);
	margin: 16px 0 12px;
	line-height: 1.5;
}

.works-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.works-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid #dde8ef;
	border-radius: 4px;
	padding: 7px 12px;
	font-size: 12px;
	color: var(--color-body);
	text-decoration: none;
}

.works-tag:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.works-tag__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-blue);
	flex-shrink: 0;
}

/* ==========================================================================
   news page
   ========================================================================== */
.news-body {
	max-width: 1080px;
	margin: 0 auto;
	padding: 56px 40px 20px;
}

.news-tabs {
	display: flex;
	border-bottom: 1px solid #d3dde5;
}

.news-tab {
	flex: 1;
	padding: 20px 0;
	background: transparent;
	border: 1px solid transparent;
	font-size: 16px;
	font-weight: 500;
	color: #7a8894;
	cursor: pointer;
	font-family: inherit;
}

.news-tab.is-active {
	background: #fff;
	border-color: #d3dde5;
	border-bottom: 1px solid #fff;
	margin-bottom: -1px;
	color: var(--color-navy);
}

.news-list {
	margin-top: 26px;
}

.news-item {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 24px 6px;
	border-bottom: 1px solid var(--color-border-light);
}

.news-item[hidden] {
	display: none;
}

.news-item__tag {
	width: 150px;
	flex-shrink: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	padding: 7px 0;
	border-radius: 3px;
	background: var(--tag-color, #7a8894);
	color: #fff;
}

.news-item__tag--none {
	visibility: hidden;
}

.news-item__date {
	font-size: 15px;
	color: #8a97a2;
	letter-spacing: .05em;
	flex-shrink: 0;
	width: 100px;
}

.news-item__title {
	font-size: 16px;
	color: #2a3742;
	text-decoration: none;
}

.news-item__title:hover {
	color: var(--color-blue);
}

.news-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 44px 0 10px;
}

.news-page-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #9fb8ca;
	background: #fff;
	color: var(--color-blue);
	font-size: 15px;
	cursor: pointer;
	font-family: inherit;
}

.news-page-btn.is-active {
	border-color: var(--color-blue);
	background: var(--color-blue);
	color: #fff;
}

.news-page-next {
	background: none;
	border: none;
	font-size: 20px;
	color: var(--color-navy);
	cursor: pointer;
}

.news-divider {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 40px;
}

.news-divider__line {
	border-top: 1px solid var(--color-border-light);
	margin: 30px 0 0;
}

/* ==========================================================================
   contact page
   ========================================================================== */
.contact-body {
	max-width: 1040px;
	margin: 0 auto;
	padding: 72px 40px 96px;
}

.contact-title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 46px;
	color: var(--color-blue);
	text-align: center;
	margin: 0 0 26px;
	letter-spacing: .14em;
}

.contact-intro {
	font-size: 15px;
	line-height: 2;
	color: #4a5865;
	text-align: center;
	margin: 0 auto 48px;
	max-width: 640px;
}

.contact-notice {
	font-size: 15px;
	line-height: 1.9;
	text-align: center;
	margin: 0 0 32px;
	padding: 18px;
	border-radius: 4px;
}

.contact-notice--success {
	background: #eaf6ee;
	color: #276c3f;
}

.contact-notice--error {
	background: #fbeceb;
	color: #a3352c;
}

.contact-thanks__back {
	text-align: center;
	margin: 40px 0 0;
}

.contact-thanks__back a {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-blue);
	color: var(--color-blue);
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
   legal pages — 個人情報保護ポリシー / 情報セキュリティポリシー / サイトポリシー
   ========================================================================== */
.legal-page {
	max-width: 840px;
	margin: 0 auto;
	padding: 72px 40px 120px;
}

.legal-page__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 38px;
	color: #1a5a86;
	text-align: center;
	margin: 0 0 40px;
	letter-spacing: .12em;
}

.legal-page__lead {
	font-size: 15px;
	line-height: 2;
	color: #4a5865;
	margin: 0 0 40px;
}

.legal-page__lead:last-of-type {
	margin-bottom: 48px;
}

.legal-page__section {
	margin-bottom: 36px;
}

.legal-page__section h2 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-border-light);
}

.legal-page__section p {
	font-size: 15px;
	line-height: 2;
	color: #3a4855;
	margin: 0 0 12px;
}

.legal-page__section p:last-child {
	margin-bottom: 0;
}

.legal-page__list {
	margin: 12px 0 0;
	padding-left: 1.4em;
	font-size: 15px;
	line-height: 2;
	color: #3a4855;
}

.legal-page__signature {
	text-align: right;
	margin-top: 56px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-navy);
}

.legal-page__list--alpha {
	list-style-type: lower-alpha;
	margin-top: 6px;
}

.legal-page__note {
	font-size: 13px;
	line-height: 1.9;
	color: #6b7681;
	margin: 8px 0 0;
}

/* ---------- 個人情報保護ポリシー: ページ内切り替え ---------- */
.legal-page.privacy-policy {
	max-width: 1080px;
}

.privacy-layout {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.privacy-menu {
	flex: 0 0 220px;
}

.privacy-menu__heading {
	font-weight: 700;
	font-size: 14px;
	color: var(--color-navy);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-blue);
}

.privacy-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.privacy-menu__list li {
	margin: 0;
}

.privacy-menu__link {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	padding: 12px 14px;
	font: inherit;
	font-size: 14px;
	line-height: 1.6;
	color: #4a5865;
	cursor: pointer;
}

.privacy-menu__link:hover {
	color: var(--color-blue);
}

.privacy-menu__link.is-active {
	border-left-color: var(--color-blue);
	background: #f2f7fa;
	color: var(--color-navy);
	font-weight: 700;
}

.privacy-content {
	flex: 1;
	min-width: 0;
}

.privacy-panel__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 26px;
	color: #1a5a86;
	margin: 28px 0 30px;
	letter-spacing: .08em;
}

.privacy-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--color-blue);
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

.privacy-form-link {
	text-align: center;
	margin: 40px 0 0;
}

.privacy-cta-button {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background: var(--color-blue);
	border: none;
	border-radius: 999px;
	padding: 16px 36px;
	cursor: pointer;
}

.privacy-cta-button:hover {
	background: #1a3a52;
}

.privacy-cta-button__label {
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .08em;
}

.privacy-cta-button__icon {
	color: #fff;
	font-size: 18px;
}

.privacy-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-blue);
	cursor: pointer;
}

.privacy-contact-info {
	margin: 28px 0 0;
	border-top: 2px solid var(--color-blue);
}

.privacy-contact-info > div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border-light);
}

.privacy-contact-info dt {
	font-weight: 700;
	color: var(--color-navy);
}

.privacy-contact-info dd {
	margin: 0;
	color: var(--color-body);
}

.privacy-form-section {
	border: 1px solid #e1e9ef;
	border-radius: 6px;
	padding: 24px;
	margin: 0 0 24px;
}

.privacy-form-section legend {
	font-weight: 700;
	color: var(--color-navy);
	padding: 0 8px;
}

.privacy-form-field {
	display: block;
	margin: 16px 0 0;
}

.privacy-form-field span {
	display: block;
	font-size: 13px;
	color: #4a5865;
	margin-bottom: 6px;
}

.privacy-form-field input[type="text"],
.privacy-form-field input[type="tel"],
.privacy-form-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #c9d4dc;
	border-radius: 4px;
	font: inherit;
	font-size: 15px;
	background: #fff;
}

.privacy-form-field textarea {
	resize: vertical;
}

.privacy-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: #3a4855;
}

.privacy-form-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	font-size: 14px;
	color: #3a4855;
}

.privacy-form-radio-group--stack {
	flex-direction: column;
	gap: 12px;
}

.privacy-form-conditional {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed #d3dde5;
}

.privacy-form-actions {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 12px;
}

.privacy-back-btn {
	background: #fff;
	border: 1px solid #c9d4dc;
	border-radius: 4px;
	padding: 14px 32px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #4a5865;
	cursor: pointer;
}

.privacy-confirm-list {
	margin: 0 0 28px;
	border-top: 2px solid var(--color-blue);
}

.privacy-confirm-list dt {
	font-weight: 700;
	color: var(--color-navy);
	padding: 14px 0 4px;
	border-bottom: none;
}

.privacy-confirm-list dd {
	margin: 0;
	padding-bottom: 14px;
	color: var(--color-body);
	border-bottom: 1px solid var(--color-border-light);
	white-space: pre-wrap;
}

@media print {
	.site-header,
	.site-footer,
	.privacy-menu,
	.privacy-back,
	.privacy-form-actions {
		display: none !important;
	}

	.privacy-panel[hidden] {
		display: none !important;
	}
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 48px;
	background: #f7fafc;
	border: 1px solid #e1e9ef;
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(18, 57, 84, .08);
}

.contact-form > p {
	margin: 0;
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-field__label {
	font-size: 13px;
	color: #6a7883;
}

.contact-required {
	color: #d0433b;
}

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field input[type="url"],
.contact-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #cdd8e0;
	border-radius: 6px;
	padding: 14px 16px;
	font-size: 15px;
	font-family: var(--font-sans);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact-row > .contact-field {
	min-width: 0;
}

.contact-field input:focus,
.contact-field textarea:focus {
	outline: none;
	border-color: var(--color-blue);
	box-shadow: 0 0 0 3px rgba(0, 142, 216, .12);
}

.contact-field textarea {
	resize: vertical;
	min-height: 210px;
}

.contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.contact-fieldset {
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.contact-fieldset legend {
	font-size: 13px;
	color: #6a7883;
	padding: 0;
	margin-bottom: 4px;
}

.contact-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--color-body);
	cursor: pointer;
}

.contact-radio input {
	accent-color: var(--color-blue);
	width: 16px;
	height: 16px;
}

.contact-submit {
	display: block;
	width: min(320px, 100%);
	margin: 12px auto 0;
	background: #1a3a52;
	color: #fff;
	border: none;
	font-size: 16px;
	font-weight: 500;
	padding: 18px 0;
	border-radius: 6px;
	cursor: pointer;
	letter-spacing: .1em;
}

.contact-submit:hover {
	background: var(--color-blue);
}

/* Contact Form 7 markup reuses the .contact-* classes above via the form's
   Form-tab HTML (see wp-admin > 問い合わせ). These rules only cover the
   bits CF7 renders itself: field-level error tips and the response banner. */
.contact-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

/* ==========================================================================
   work detail
   ========================================================================== */
.work-detail {
	max-width: 1120px;
	margin: 0 auto;
	padding: 72px 40px 100px;
}

.work-detail__header {
	max-width: 880px;
	margin-bottom: 40px;
}

.work-detail__eyebrow {
	margin: 0 0 10px;
	color: var(--color-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
}

.work-detail__title {
	margin: 0 0 18px;
	color: var(--color-navy);
	font-family: var(--font-serif);
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.4;
}

.work-detail__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	color: var(--color-muted);
	font-size: 12px;
}

.work-detail__breadcrumb a {
	color: var(--color-blue);
}

.work-detail__hero {
	width: 100%;
	/* 一覧ページのカード写真と同じ 4:3 の枠を保つが、cover ではなく contain
	   にして画像を切り取らない。4:3 より横長・縦長の写真は枠内で上下（または
	   左右）に余白ができるが、トリミングは発生しない。推奨アップロード比率は
	   4:3（例: 1600×1200px）。 */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

.work-detail__hero img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.work-detail__layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 64px;
	margin-top: 52px;
}

.work-detail__facts {
	margin: 0;
	border-top: 2px solid var(--color-blue);
}

.work-detail__facts > div {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border-light);
}

.work-detail__facts dt {
	font-weight: 700;
	color: var(--color-navy);
}

.work-detail__facts dd {
	margin: 0;
	color: var(--color-body);
}

.work-detail__content {
	font-size: 16px;
	line-height: 2;
	color: var(--color-body);
}

.work-detail__content > :first-child {
	margin-top: 0;
}

/* 概要は管理画面でHTML・改行がそのまま書けるよう wpautop を通すので、
   中に <p> が入る。外枠のマージンは保ったまま段落間だけ空ける。 */
.work-detail__summary {
	margin: 0 0 32px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.9;
	color: var(--color-navy);
}

.work-detail__summary p {
	margin: 0 0 1em;
}

.work-detail__summary p:last-child {
	margin-bottom: 0;
}

/* 「メディアを挿入 → ギャラリー」で入るクラシックギャラリー用のCSS。
   テーマが add_theme_support('html5', array('gallery')) を宣言しているため、
   WordPress標準の（float指定込みの）デフォルトギャラリーCSSは自動出力されず、
   テーマ側でレイアウトを用意する必要がある。無いと選んだ列数に関わらず
   画像が縦一列に並んでしまう。 */
.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 24px -12px;
}

.gallery-item {
	box-sizing: border-box;
	width: 100%;
	padding: 0 0 12px 12px;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33.333%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16.666%;
}

.gallery-columns-7 .gallery-item {
	width: 14.285%;
}

.gallery-columns-8 .gallery-item {
	width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	width: 11.111%;
}

.gallery-item .gallery-icon img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.gallery-caption {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-body);
	text-align: center;
}

@media (max-width: 600px) {
	.gallery-columns-4 .gallery-item,
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item,
	.gallery-columns-7 .gallery-item,
	.gallery-columns-8 .gallery-item,
	.gallery-columns-9 .gallery-item {
		width: 33.333%;
	}
}

.work-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: 56px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-blue);
	color: var(--color-blue);
	font-weight: 700;
	text-decoration: none;
}

.contact-form .wpcf7-radio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.contact-form .wpcf7-radio .wpcf7-list-item > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.contact-form .wpcf7-radio .wpcf7-list-item-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--color-body);
	cursor: pointer;
}

.contact-form .wpcf7-radio input {
	accent-color: var(--color-blue);
	width: 16px;
	height: 16px;
}

.contact-form .wpcf7-not-valid-tip {
	display: block;
	font-size: 12px;
	color: #a3352c;
	margin-top: 6px;
}

.contact-form .wpcf7-spinner {
	margin-left: 12px;
}

.contact-form .wpcf7-response-output {
	font-size: 15px;
	line-height: 1.9;
	text-align: center;
	margin: 24px 0 0;
	padding: 18px;
	border-radius: 4px;
}

.contact-form.sent .wpcf7-response-output {
	background: #eaf6ee;
	color: #276c3f;
	border: none;
}

.contact-form.failed .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output,
.contact-form.spam .wpcf7-response-output,
.contact-form.invalid .wpcf7-response-output {
	background: #fbeceb;
	color: #a3352c;
	border: none;
}

/* ==========================================================================
   Business detail pages (shared rail + content)
   ========================================================================== */
.business-page {
	width: 100%;
	display: grid;
	grid-template-columns: 360px 1fr;
	align-items: start;
}

.business-page-wrap {
	background: #d9edfa;
}

.business-rail {
	background: var(--color-blue);
	color: #fff;
	padding: 46px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (min-width: 901px) {
	.business-rail {
		position: sticky;
		top: 77px;
		height: calc(100vh - 77px);
		overflow-y: auto;
	}

	.admin-bar .business-rail {
		top: 109px;
		height: calc(100vh - 109px);
	}
}

.business-rail--pad32 {
	padding-left: 32px;
	padding-right: 32px;
}

.business-rail__head {
	text-align: center;
}

.business-rail__number {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: .05em;
}

.business-rail__title {
	font-size: 26px;
	font-weight: 700;
	margin-top: 6px;
	letter-spacing: .08em;
	line-height: 1.3;
	min-height: calc(1.3em * 2);
}

.business-rail__title--wrap {
	font-size: 25px;
	letter-spacing: .06em;
	line-height: 1.4;
	min-height: calc(1.4em * 2);
}

.business-illust {
	margin-top: 24px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.business-illust img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.business-rail__badge {
	margin-top: auto;
	padding-top: 48px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	opacity: .95;
}

.business-rail__badge-label {
	font-size: 11px;
	color: #dbeef9;
}

.business-rail__card {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	margin-top: 24px;
	width: 100%;
	color: var(--color-navy);
}

/* コンテンツエリア内に配置するカード（サイドバーではなく本文下部） */
.business-rail__card--inline {
	width: 100%;
}

.business-rail__card-title {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 14px;
}

.business-rail__card-title--sm {
	font-size: 20px;
	line-height: 1.5;
}

.business-rail__card-text {
	font-size: 14px;
	line-height: 1.9;
	color: var(--color-body);
	margin: 0 0 18px;
}

.business-rail__card-list {
	margin: 0 0 14px;
	padding-left: 18px;
	font-size: 14px;
	line-height: 2;
	color: var(--color-body);
}

.business-rail__card-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 4px;
}

.business-rail__card--with-illust .business-rail__card-list {
	text-align: left;
}

/* バナー行・お問い合わせボタンを収めるエリア。女性イラスト（吹き出し
   付き）は右下に絶対配置で重ね、その分だけボタン側に右余白を確保して
   ボタン幅を狭める（添付の構図参考）。 */
.business-rail__card-cta-area {
	position: relative;
	margin-top: 24px;
	padding-right: 110px;
}

/* 女性イラストの下端が白パネルの下端とちょうど揃う位置(カード自体の
   下パディング24px分だけ下げる)に配置する */
.business-rail__card-illust {
	position: absolute;
	bottom: -24px;
	right: 0;
}

.brokerage-consultant-illust.brokerage-consultant-illust--sm {
	display: block;
	height: 120px;
	flex-shrink: 0;
}

/* 女性イラストが話しているように見せる吹き出し：女性のすぐ左上に
   寄り添わせつつ、ボタンとは重ならない高さに独立して配置する。
   添付SVG（吹き出し画像そのもの）を背景形状として使い、しっぽが彼女の
   方向（右下）を指すよう左右反転して重ねる。テキストはしっぽの分だけ
   下側の余白を広めに取った別レイヤーとして重ねる。 */
.business-rail__card-bubble {
	position: absolute;
	right: 60px;
	bottom: 55px;
	width: 340px;
	aspect-ratio: 384.799 / 138.298;
}

.business-rail__card-bubble__shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 8px 14px rgba(24, 56, 79, .12));
}

.business-rail__card-bubble__text {
	position: absolute;
	inset: 10% 5% 24% 5%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-body);
	text-align: center;
}

.business-rail__card-bubble__br--sp {
	display: none;
}

.business-cta {
	display: block;
	text-align: center;
	background: var(--color-cyan);
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	padding: 13px;
	border-radius: 30px;
}

.business-cta:hover {
	background: var(--color-cyan-hover);
}

.business-rail__link-row {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.business-rail__link {
	flex: 1;
	text-align: center;
	border: 1px solid #cdd8e0;
	border-radius: 6px;
	padding: 9px;
	font-size: 13px;
	color: var(--color-body);
	text-decoration: none;
}

.business-rail__link:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.business-content {
	background: #d9edfa;
	padding: 52px 56px;
	min-width: 0;
}

.business-content__inner {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
}

.business-lead {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-navy);
	margin: 0 0 24px;
}

.business-lead--tight {
	line-height: 1.7;
	font-size: 25px;
}

.business-intro {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.business-intro__text {
	font-size: 14px;
	line-height: 2;
	color: var(--color-body);
	margin: 0;
	flex: 1;
}

.business-free-photo {
	flex-shrink: 0;
}

.business-free-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.business-free-photo--management {
	width: 240px;
	height: 84px;
}

.business-pill {
	background: var(--color-blue);
	color: #fff;
	text-align: center;
	font-size: 17px;
	font-weight: 500;
	padding: 14px;
	border-radius: 40px;
	margin: 40px 0 30px;
}

.business-pill-inline {
	background: var(--color-blue);
	color: #fff;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	padding: 12px 44px;
	border-radius: 40px;
	margin: 0 0 18px;
}

.broker-banner-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 0;
	min-width: 0;
	/* 右側の吹き出し(女性イラストの左隣、幅340px)と重ならないよう、
	   親のpadding-right(ボタン分の余白)に加えてさらに余白を確保する。
	   外部バナー画像の実寸に多少ズレがあっても、それより先に折り返す
	   ことで重なりを防ぐ。 */
	max-width: calc(100% - 351px);
}

.business-rail__card-cta-area .business-cta {
	margin-top: 28px;
}

.broker-banner-row__item {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--color-border-light);
	border-radius: 4px;
	padding: 8px 12px;
	line-height: 0;
}

.broker-banner-row__item img {
	display: block;
	height: 50px;
	width: auto;
}

.brokerage-consultant-illust {
	display: block;
	height: 240px;
	width: auto;
	object-fit: contain;
}

.business-method-text {
	font-size: 14px;
	line-height: 2;
	color: var(--color-body);
	margin: 0;
}

.business-method-image {
	width: 100%;
	height: 170px;
	border-radius: 8px;
	overflow: hidden;
}

.business-method-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 24px 0 12px;
}

/* ===== 事業手法ブロック（吹き出し＋イラスト交互レイアウト） ===== */
.dev-method-block {
	display: flex;
	align-items: flex-end;
	gap: 0;
	margin-top: 48px;
	position: relative;
}

/* イラストが右側：DOM順はillust→body、row-reverseでイラストを右に */
.dev-method-block--right {
	flex-direction: row-reverse;
}

/* イラストが左側：DOM順はillust→body、rowでイラストを左に */
.dev-method-block--left {
	flex-direction: row;
}

.dev-method-block__illust {
	flex-shrink: 0;
	width: 130px;
	display: flex;
	align-items: flex-end;
}

.dev-method-block__illust img {
	width: 130px;
	height: auto;
	display: block;
	object-fit: contain;
}

/* リノベーションの素材は横に手を伸ばすポーズで元絵が横長のため、
   幅基準で他と揃えると顔が小さく見える。高さ基準に切り替えて
   他のイラストと同じ見た目の大きさにする（手も見切れない）。 */
.dev-method-block__illust--wide {
	width: auto;
}

.dev-method-block__illust--wide img {
	width: auto;
	height: 138px;
}

/* 新築・建替えの素材は縦に長い全身ポーズのため、
   幅基準で他と揃えると身長が大きく見えすぎる。
   幅を絞って他のイラストと同じ見た目の大きさにする。 */
.dev-method-block__illust--shinchiku {
	width: 103px;
}

.dev-method-block__illust--shinchiku img {
	width: 103px;
}

.dev-method-block__body {
	flex: 1;
	min-width: 0;
}

.dev-method-block__image {
	width: 100%;
	height: 160px;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

/* リノベーション用：施工写真の画像枠（グレーのプレースホルダー） */
.dev-method-block__photo-frame {
	width: 130px;
	height: 160px;
	border-radius: 8px;
	background: #e8f0f5;
	border: 2px dashed #aabfcc;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 吹き出し本体：参考デザインに合わせ、枠線なしの塗りつぶし＋ドロップ
   シャドウで立体感を出す。チョン（しっぽ）も二重三角形の縁取りをやめ、
   本体と同じ塗りに影を落とした一枚の三角形にする。 */
.dev-method-block__bubble {
	background: #fff;
	border-radius: 20px;
	padding: 22px 24px;
	position: relative;
	box-shadow: 0 10px 26px rgba(24, 56, 79, .16);
}

/* 吹き出し矢印：右側イラスト → 吹き出しは左側 */
.dev-method-block--right .dev-method-block__bubble::after {
	content: '';
	position: absolute;
	right: -14px;
	bottom: 32px;
	border: 11px solid transparent;
	border-left-color: #fff;
	filter: drop-shadow(3px 3px 3px rgba(24, 56, 79, .12));
}

/* 吹き出し矢印：左側イラスト → 吹き出しは右側 */
.dev-method-block--left .dev-method-block__bubble::after {
	content: '';
	position: absolute;
	left: -14px;
	bottom: 32px;
	border: 11px solid transparent;
	border-right-color: #fff;
	filter: drop-shadow(-3px 3px 3px rgba(24, 56, 79, .12));
}

.dev-method-block__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 10px;
}

.dev-method-block__text {
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--color-body);
	margin: 0;
}

.business-flow {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.business-flow-item {
	display: flex;
	align-items: center;
	gap: 24px;
}

.business-flow-item__text {
	flex: 1;
	min-width: 0;
}

.business-flow-item__label {
	margin: 0;
	font-size: 14px;
	color: var(--color-muted);
	letter-spacing: .06em;
}

.business-flow-item__title {
	margin: 2px 0 10px;
	font-size: 24px;
	font-weight: 700;
	color: var(--color-navy);
}

.business-flow-item__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--color-body);
}

.business-flow .business-flow-item__desc {
	font-size: 17px;
}

.business-flow-item__icon {
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.business-flow-item__icon img {
	max-width: 78%;
	max-height: 78%;
	width: auto;
	height: auto;
}

.business-points {
	display: flex;
	flex-direction: column;
	gap: 26px;
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.business-points .business-flow-item__desc {
	font-size: 17px;
}

.business-point-item__label {
	margin: 0;
	font-size: 13px;
	color: var(--color-muted);
	letter-spacing: .06em;
}

.business-point-item__title {
	margin: 4px 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--color-navy);
}

.asset-row {
	display: flex;
	justify-content: center;
	gap: 90px;
	margin-bottom: 44px;
	flex-wrap: wrap;
}

.asset-row--tight {
	gap: 56px;
}

.asset-item {
	text-align: center;
}

.asset-item__label {
	font-size: 14px;
	color: var(--color-muted);
	margin: 0 0 8px;
	letter-spacing: .05em;
}

.asset-item__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 16px;
}

.asset-row:not(.asset-row--tight) .asset-item__title {
	font-size: 24px;
}

.asset-item__title--sm {
	font-size: 20px;
}

.asset-item__circle {
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-light);
}

.asset-item__icon {
	width: 62%;
	height: 62%;
	object-fit: contain;
}

.asset-footnote {
	text-align: center;
	margin: 20px 0 0;
}

.urban-card {
	background: #fff;
	border: 1px solid #cfe0ee;
	border-radius: 6px;
	padding: 34px 38px;
	margin-bottom: 30px;
}

.urban-card:last-child {
	margin-bottom: 0;
}

.urban-card__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 16px;
	border-left: 4px solid var(--color-blue);
	padding-left: 12px;
}

.urban-card__text {
	font-size: 14px;
	line-height: 2;
	color: var(--color-body);
	margin: 0 0 24px;
}

.urban-card__subtitle {
	text-align: left;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 16px;
	letter-spacing: .06em;
}

/* 市街地整備事業：雲形の吹き出し（添付素材のSVG、しっぽは左下）に図を
   収め、女性イラストが説明しているように見せる構成。右側に配置する
   場合はSVGを左右反転し、しっぽが右下を向くようにする。 */
.urban-cloud-diagram {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 307.724 / 265.292;
	margin: 0 auto 90px;
}

.urban-cloud-diagram__cloud {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 10px 22px rgba(24, 56, 79, .15));
	transform: scaleX(-1);
}

.urban-cloud-diagram--tail-left .urban-cloud-diagram__cloud {
	transform: none;
}

.urban-cloud-diagram__content {
	position: absolute;
	inset: 18% 14% 17% 17%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.urban-cloud-diagram--tail-left .urban-cloud-diagram__content {
	inset: 18% 17% 17% 14%;
}

.urban-cloud-diagram__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.urban-cloud-diagram__illust {
	position: absolute;
	right: -7%;
	bottom: -24%;
	width: 26%;
	max-width: 130px;
	pointer-events: none;
}

.urban-cloud-diagram--tail-left .urban-cloud-diagram__illust {
	right: auto;
	left: -9%;
	bottom: -18%;
}

.urban-cloud-diagram__illust-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.urban-diagram-arrow {
	display: flex;
	justify-content: center;
	margin: 8px 0;
}

.property-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.property-photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
}

.property-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.property-caption {
	font-size: 14px;
	color: var(--color-body);
	margin: 12px 0 0;
	line-height: 1.6;
}

.work-card {
	background: #fff;
	border-radius: 12px;
	padding: 26px 20px;
	text-align: center;
	box-shadow: 0 4px 14px rgba(20, 60, 100, .06);
}

.work-card__label {
	font-size: 14px;
	color: var(--color-muted);
	margin: 0 0 16px;
	letter-spacing: .05em;
}

.work-card__icon {
	height: 60px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.work-card__icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.work-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0;
}

.work-card__title--wrap {
	font-size: 16px;
	line-height: 1.5;
}

.work-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 44px;
}

/* ===== ソリューション事業 Before/After スライダー ===== */

.solution-cases {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.solution-case__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 10px;
}

.solution-case__caption {
	font-size: 14px;
	color: var(--color-body);
	margin: 10px 0 0;
	line-height: 1.6;
}

/* Before 写真を実物より少し色褪せた質感にする */
.ba-slider__before img.ba-slider__img--faded {
	filter: sepia(.25) saturate(.65) brightness(1.03) contrast(.95);
}

/* スライダー本体 */
.ba-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 8px;
	user-select: none;
	cursor: col-resize;
}

/* After（ベース・全面表示） */
.ba-slider__after {
	position: absolute;
	inset: 0;
}

.ba-slider__after img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Before（clip-path で左側を表示） */
.ba-slider__before {
	position: absolute;
	inset: 0;
	clip-path: inset(0 50% 0 0); /* JS で更新 */
}

.ba-slider__before img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ハンドル縦線 */
.ba-slider__handle {
	position: absolute;
	top: 0;
	left: 50%; /* JS で更新 */
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: col-resize;
	z-index: 10;
}

.ba-slider__handle-line {
	flex: 1;
	width: 2px;
	background: #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.35);
}

.ba-slider__handle-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
	line-height: 0;
}

/* Before / After ラベル */
.ba-slider__labels {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 14px;
	pointer-events: none;
}

.ba-slider__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	color: #fff;
	background: rgba(0,0,0,.42);
	padding: 2px 8px;
	border-radius: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 900px) {
	body {
		padding-top: 77px;
	}

	.site-header__inner {
		padding: 14px 20px;
	}

	.nav-toggle {
		display: flex;
	}

	.main-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		box-shadow: 0 16px 30px rgba(20, 50, 80, .14);
		max-height: calc(100vh - 64px);
		overflow-y: auto;
	}

	.main-nav.is-open {
		display: flex;
	}

	.main-nav__item {
		flex-wrap: wrap;
		padding: 0;
		border-bottom: 1px solid var(--color-border);
	}

	.main-nav__link {
		flex: 1;
		padding: 16px 20px;
		white-space: nowrap;
	}

	.main-nav__link--plain {
		padding: 16px 20px;
		border-bottom: 1px solid var(--color-border);
	}

	.main-nav__toggle {
		padding: 16px 20px;
		flex-shrink: 0;
	}

	.main-nav__dropdown {
		position: static;
		flex-basis: 100%;
		width: 100%;
		box-shadow: none;
		border-radius: 0;
		background: #f5f9fb;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		min-width: 0;
		transition: max-height .2s ease;
	}

	.main-nav__item.is-open .main-nav__dropdown {
		max-height: 480px;
		padding: 6px 0;
	}

	.main-nav__dropdown-link {
		padding: 12px 30px;
	}

	.section {
		padding-left: 20px;
		padding-right: 20px;
	}

	.message-grid,
	.map-grid {
		grid-template-columns: 1fr;
	}

	.message-photo {
		aspect-ratio: auto;
		width: 68%;
		max-width: 280px;
		margin: 0 auto;
	}

	.message-photo img {
		height: auto;
		object-fit: contain;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
	}

	.hero-title {
		font-size: 38px;
	}

	.pickup-grid,
	.business-tile-grid,
	.work-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.oc-brand__layout,
	.top-business,
	.works-layout {
		grid-template-columns: 1fr;
	}

	.company-link-grid {
		grid-template-columns: 1fr;
	}

	.top-strip__grid {
		grid-template-columns: 1fr;
	}

	.title-band__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.title-band__illust {
		align-self: center;
	}

	.business-page {
		grid-template-columns: 1fr;
	}

	.business-content {
		padding: 40px 24px;
	}

	.business-intro,
	.contact-row {
		grid-template-columns: 1fr;
	}

	.contact-row {
		display: grid;
	}

	.business-intro {
		flex-direction: column;
	}

	.business-free-photo--management {
		width: 100%;
		height: 160px;
	}

	.asset-row {
		gap: 30px;
	}

	.property-grid,
	.works-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-section {
		padding: 40px 20px 48px;
	}

	.top-section {
		padding: 48px 20px 16px;
	}

	.top-pickup {
		padding: 40px 20px;
	}

	.top-business {
		padding: 48px 20px;
	}

	.oc-brand {
		padding: 40px 0;
	}

	.oc-brand__inner {
		padding: 0 20px;
	}

	.top-company-links {
		padding: 48px 20px 24px;
	}

	.title-band__inner {
		padding: 32px 20px;
	}

	.works-body {
		padding: 32px 20px 48px;
	}

	.work-detail {
		padding: 52px 24px 72px;
	}

	.work-detail__layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.news-body {
		padding: 32px 20px 16px;
	}

	/* タグ(150px)+日付(100px)+gapで幅の大半を使い切り、タイトルの取り分が
	   数十pxまで潰れる。日本語は文字間どこでも改行できるため、
	   flexのデフォルト(min-width:auto)では最小幅が1文字分まで縮んでしまい、
	   1文字ずつ縦に折り返す崩れ方になる。タイトルを折り返して専用の行に
	   逃がす。 */
	.news-item {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.news-item__title {
		flex: 1 1 100%;
	}

	.contact-body {
		padding: 40px 20px 48px;
	}

	.contact-form {
		padding: 28px 22px;
	}

	.site-footer__top {
		padding: 36px 20px 16px;
	}

	.site-footer__bottom-inner {
		padding: 14px 20px;
	}
}

/* --------------------------------------------------------------------------
   Site-wide scroll reveals
   -------------------------------------------------------------------------- */

html.reveal-enabled .site-reveal {
	opacity: 0;
	transition:
		opacity .8s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
		transform .8s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

html.reveal-enabled .site-reveal--up {
	transform: translate3d(0, 42px, 0);
}

html.reveal-enabled .site-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

html.reveal-enabled .site-reveal.is-reveal-complete {
	opacity: 1;
	transition: none;
	will-change: auto;
}

/* 不動産開発事業ページ「主な事業手法」の吹き出し・女性イラストだけ、
   他のフェードより長く・見え始めは速くそのあと大きく減速するカーブに
   する（サイト全体のフェードには影響させない）。 */
html.reveal-enabled [data-dev-reveal] {
	transition:
		opacity 1.9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
		transform 1.9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	html.reveal-enabled .site-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Top-page opening
   -------------------------------------------------------------------------- */

.opening {
	position: fixed;
	inset: 0;
	z-index: 10000;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	touch-action: none;
	pointer-events: none;
}

.brand-symbol {
	display: block;
	flex: 0 0 auto;
	object-fit: contain;
}

.brand-symbol--header {
	width: 52px;
	height: 48px;
}

.brand-symbol--footer {
	width: 48px;
	height: 44px;
}

.brand-symbol--oc {
	width: 300px;
	height: auto;
	display: block;
}

.brand-symbol--rail {
	width: 44px;
	height: 40px;
}

.opening__curtain {
	position: absolute;
	inset: 0;
	background: #fff;
	/*
	 * Layer 1 is the full-screen mask. Layer 2 is the actual logo silhouette.
	 * xor/exclude subtracts the logo from the white curtain, revealing the FV.
	 * LOGO SVG: assets/images/opening-logo-mask.svg
	 */
	-webkit-mask-image: linear-gradient(#fff 0 0), url("assets/images/opening-logo-mask.svg");
	-webkit-mask-position: center, center;
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size: 100% 100%, var(--opening-start-size, 180px) auto;
	-webkit-mask-composite: xor;
	mask-image: linear-gradient(#fff 0 0), url("assets/images/opening-logo-mask.svg");
	mask-position: center, center;
	mask-repeat: no-repeat, no-repeat;
	mask-size: 100% 100%, var(--opening-start-size, 180px) auto;
	mask-composite: exclude;
}

.opening__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--opening-start-size, 180px);
	height: auto;
	transform: translate(-50%, -50%);
}

.opening.is-playing .opening__logo {
	animation: opening-logo-fade .4s ease 1.6s forwards;
}

.opening.is-playing .opening__curtain {
	animation:
		opening-logo-zoom 4.2s cubic-bezier(.65, 0, .2, 1) 1.8s both,
		opening-curtain-fade 1.7s ease 4.3s forwards;
}

.opening.is-playing {
	animation: opening-overlay-exit 1.7s ease 4.3s forwards;
}

.opening.is-complete {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.opening__skip {
	position: absolute;
	right: max(24px, env(safe-area-inset-right));
	bottom: max(24px, env(safe-area-inset-bottom));
	z-index: 1;
	padding: 8px 2px;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: transparent;
	color: #1b1b1b;
	font: 500 13px/1 Arial, sans-serif;
	letter-spacing: .14em;
	cursor: pointer;
	pointer-events: auto;
}

.opening__skip:focus-visible {
	outline: 2px solid #008ed8;
	outline-offset: 5px;
}

.opening-reveal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	opacity: 1;
	pointer-events: none;
	transition: opacity .5s ease;
}

.opening-reveal img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.opening-reveal.is-hidden {
	opacity: 0;
}

@keyframes opening-logo-zoom {
	from {
		-webkit-mask-size: 100% 100%, var(--opening-start-size, 180px) auto;
		mask-size: 100% 100%, var(--opening-start-size, 180px) auto;
	}
	to {
		-webkit-mask-size: 100% 100%, var(--opening-end-size, 5000px) auto;
		mask-size: 100% 100%, var(--opening-end-size, 5000px) auto;
	}
}

@keyframes opening-overlay-exit {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes opening-curtain-fade {
	to {
		opacity: 0;
	}
}

@keyframes opening-logo-fade {
	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.opening,
	.opening-reveal {
		display: none;
	}
}

@media (max-width: 560px) {
	.section-heading__title {
		font-size: 30px;
	}

	.policy-statement {
		font-size: 19px;
	}

	.profile-row__content {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand,
	.footer-end {
		grid-column: 1 / -1;
	}

	/* footer-end はネストしたグリッド（デスクトップ用に180px/1frで
	   分割）なので、SPでは外側のfooter-gridと同じ1fr 1fr + gapに
	   揃えて、プロジェクト/お知らせが企業情報/事業内容と同じ横位置に
	   来るようにする。 */
	.footer-end {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}

	.hero-title {
		font-size: 28px;
	}

	.pickup-grid,
	.business-tile-grid,
	.work-card-grid,
	.property-grid,
	.works-grid {
		grid-template-columns: 1fr;
	}

	.contact-title {
		font-size: 32px;
	}

	.contact-row {
		grid-template-columns: 1fr;
	}

	.contact-form .wpcf7-radio {
		grid-template-columns: 1fr;
	}

	.business-lead,
	.business-lead--tight {
		font-size: 19px;
	}

	.hero-section {
		padding: 32px 16px 36px;
	}

	.top-section {
		padding: 36px 16px 14px;
	}

	.top-pickup {
		padding: 32px 16px;
	}

	.top-business {
		padding: 36px 16px;
	}

	.oc-brand {
		padding: 32px 0;
	}

	.oc-brand__inner {
		padding: 0 16px;
	}

	.top-company-links {
		padding: 36px 16px 20px;
	}

	.title-band__inner {
		padding: 24px 16px;
	}

	.works-body {
		padding: 24px 16px 36px;
	}

	.work-detail {
		padding: 40px 16px 56px;
	}

	.news-body {
		padding: 24px 16px 14px;
	}

	.contact-body {
		padding: 32px 16px 36px;
	}

	.legal-page {
		padding: 40px 20px 64px;
	}

	.legal-page__title {
		font-size: 28px;
	}

	.privacy-layout {
		flex-direction: column;
		gap: 8px;
	}

	.privacy-menu {
		flex: 1 1 auto;
		width: 100%;
		border-bottom: 1px solid var(--color-border-light);
		margin-bottom: 16px;
		padding-bottom: 8px;
	}

	.site-footer__top {
		padding: 28px 16px 14px;
	}

	.site-footer__bottom-inner {
		padding: 12px 16px;
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.footer-legal-links {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pickup-card__title-box {
		margin-right: 20px;
	}

	/* ブローカーページ SP：バナー・ボタン・イラストを縦積みにし、
	   イラストの絶対配置もやめて通常フローで積む（並び順はバナー→
	   吹き出し→イラスト→ボタン）。吹き出しは女性イラストと同じ右寄せ
	   にして、しっぽ（右下寄り）が彼女の顔の近くに来るようにする。 */
	.business-rail__card-cta-area {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin-top: 40px;
		padding-right: 0;
	}

	.broker-banner-row {
		order: 0;
		max-width: 100%;
		justify-content: center;
		flex-wrap: nowrap;
		margin-bottom: 28px;
	}

	.broker-banner-row__item {
		padding: 6px 8px;
	}

	.broker-banner-row__item img {
		height: 34px;
		width: auto;
		max-width: 100%;
	}

	.business-rail__card-bubble {
		order: 1;
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: 320px;
		margin: 0 0 2px;
		align-self: center;
	}

	.business-rail__card-bubble__text {
		text-align: center;
		justify-content: center;
	}

	.business-rail__card-bubble__br--sp {
		display: inline;
	}

	.business-rail__card-illust {
		position: static;
		order: 2;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.business-rail__card-cta-area .business-cta {
		order: 3;
		width: 100%;
		margin-top: 28px;
	}

	.brokerage-consultant-illust,
	.brokerage-consultant-illust.brokerage-consultant-illust--sm {
		height: 160px;
	}

	/* 市街地整備 SP */
	.urban-cloud-diagram__illust {
		width: 26%;
		max-width: 92px;
	}

	/* 事業手法ブロック SP：横並びを維持 */
	.dev-method-block,
	.dev-method-block--right,
	.dev-method-block--left {
		align-items: flex-end;
		gap: 8px;
		margin-top: 32px;
	}

	/* SP: --right はイラスト右 → row-reverse 維持 */
	.dev-method-block--right {
		flex-direction: row-reverse;
	}

	/* SP: --left はイラスト左 → row 維持 */
	.dev-method-block--left {
		flex-direction: row;
	}

	.dev-method-block__illust {
		width: 72px;
		flex-shrink: 0;
	}

	.dev-method-block__illust img {
		width: 72px;
	}

	.dev-method-block__illust--wide {
		width: auto;
	}

	.dev-method-block__illust--wide img {
		width: auto;
		height: 76px;
	}

	.dev-method-block__illust--shinchiku {
		width: 57px;
	}

	.dev-method-block__illust--shinchiku img {
		width: 57px;
	}

	.dev-method-block__photo-frame {
		width: 72px;
		height: 120px;
	}

	/* SP でも吹き出し矢印を表示（小サイズに調整） */
	.dev-method-block--right .dev-method-block__bubble::after {
		right: -10px;
		bottom: 20px;
		border-width: 6px;
		display: block;
	}
	.dev-method-block--left .dev-method-block__bubble::after {
		left: -10px;
		bottom: 20px;
		border-width: 6px;
		display: block;
	}

}