/* ==========================================================================
   Wood Island — main stylesheet
   ========================================================================== */

:root {
	--ink: #16212b;
	--ink-2: #2f3a44;
	--ink-3: #3d4852;
	--muted: #5d6670;
	--beige: #f6f4ef;
	--white: #ffffff;
	--line: #e6e1d7;
	--line-2: #e0dacf;
	--line-3: #d9d2c5;
	--accent: #c45f0c;
	--orange: #e07a1f;
	--amber: #ffb766;
	--pale: #c9d0d6;

	--grad-wood: linear-gradient(135deg, #f5a04a 0%, #e07a1f 50%, #c45f0c 100%);
	--grad-wood-hover: linear-gradient(135deg, #e68d33 0%, #cc6a12 50%, #ad5208 100%);
	--grad-ink: linear-gradient(135deg, #243444 0%, #16212b 55%, #0e151b 100%);
	--grad-line: linear-gradient(90deg, #d0650f, #ffb766);
	--grad-cta: linear-gradient(120deg, #f7a54c 0%, #e07a1f 45%, #bf580a 100%);

	--font-sans: 'Zen Kaku Gothic New', sans-serif;
	--font-serif: 'Shippori Mincho', serif;
	--font-en: Archivo, sans-serif;
	--font-logo: 'Cormorant Garamond', 'Shippori Mincho', serif;

	--ease: cubic-bezier(.16, 1, .3, 1);
	--gutter: 6vw;
	--max: 1180px;
	--radius: 2px;
	--section-y: clamp(80px, 11vw, 150px);
}

/* Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--beige);
	color: var(--ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
section[id], [id] { scroll-margin-top: 96px; }
input, select, textarea, button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 200;
	padding: 10px 16px; background: var(--ink); color: var(--white); border-radius: var(--radius);
}
.skip-link:focus { top: 12px; color: var(--white); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}

.container { max-width: var(--max); margin: 0 auto; }
.container--narrow { max-width: 760px; }
.mt-36 { margin-top: 36px; }

@media (max-width: 859px) {
	.pc-only { display: none; }
}

/* Progress bar
   -------------------------------------------------------------------------- */
.progress-bar {
	position: fixed; top: 0; left: 0; z-index: 150;
	height: 3px; width: 0%;
	background: var(--grad-line);
}

/* Header
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed; top: 0; left: 0; z-index: 120;
	width: 100%;
	color: var(--white);
	background: transparent;
	transition: background .35s, box-shadow .35s, color .35s;
}
.has-hero-scroll .site-header { background: linear-gradient(180deg, rgba(16, 25, 32, .55), rgba(16, 25, 32, 0)); }
.site-header.is-solid {
	background: var(--white);
	color: var(--ink);
	box-shadow: 0 1px 0 var(--line), 0 8px 24px -12px rgba(0, 0, 0, .15);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 14px 22px 14px 26px;
}

.logo { display: flex; align-items: center; gap: 10px; color: inherit; }
.logo:hover { color: inherit; }
/* ロゴマーク（オレンジの正方形）は一旦非表示。戻すときは display: block に。 */
.logo__mark { display: none; width: 20px; height: 20px; background: var(--grad-wood); }
.logo__text { font-family: var(--font-logo); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; line-height: 1.2; }
.logo--footer { color: var(--white); }

.gnav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 700; }
.gnav__link { color: inherit; transition: opacity .2s; }
.gnav__link:hover { color: inherit; opacity: .7; }
.gnav__cta {
	padding: 10px 22px; border-radius: var(--radius);
	background: var(--grad-wood); color: var(--white);
	transition: background .2s, transform .2s;
}
.gnav__cta:hover { background: var(--grad-wood-hover); color: var(--white); transform: translateY(-1px); }

.menu-toggle {
	display: none;
	padding: 8px 18px; border: 1px solid currentColor; border-radius: var(--radius);
	background: none; color: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

.mobile-menu {
	margin: 0 10px 10px; padding: 10px;
	display: grid; gap: 2px;
	background: var(--white); color: var(--ink); border-radius: var(--radius);
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .3);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__link { padding: 14px; font-weight: 700; }
.mobile-menu__cta {
	margin-top: 6px; padding: 15px; text-align: center; font-weight: 700;
	background: var(--grad-wood); color: var(--white); border-radius: var(--radius);
}
.mobile-menu__cta:hover { color: var(--white); }

@media (max-width: 859px) {
	.gnav { display: none; }
	.menu-toggle { display: block; }
}
@media (min-width: 860px) {
	.mobile-menu { display: none !important; }
}

/* Front hero (scroll story)
   -------------------------------------------------------------------------- */
.hero { position: relative; height: 450vh; background: #101920; }
.hero__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__images { position: absolute; inset: 0; will-change: transform; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img.is-stage { opacity: 0; }
.hero__shade {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(16, 25, 32, .6) 0%, rgba(16, 25, 32, .12) 30%, rgba(16, 25, 32, .2) 55%, rgba(16, 25, 32, .9) 100%);
}
.hero__copy {
	position: absolute; left: 0; right: 0; bottom: 13vh;
	padding: 0 var(--gutter); color: var(--white); pointer-events: none;
}
.hero__copy.is-stage { opacity: 0; }
.hero__eyebrow { font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--amber); }
.hero__title {
	margin-top: 20px;
	font-family: var(--font-serif); font-size: clamp(36px, 6.4vw, 88px); line-height: 1.16; font-weight: 800; letter-spacing: -0.01em;
}
.hero__stage-title {
	margin-top: 18px;
	font-family: var(--font-serif); font-size: clamp(40px, 6vw, 80px); line-height: 1.15; font-weight: 800;
}
.hero__lead { margin-top: 26px; max-width: 560px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.95; color: #e7eaed; }
.hero__copy.is-stage .hero__lead { margin-top: 20px; }
.hero__labels {
	position: absolute; right: var(--gutter); bottom: 13vh;
	display: flex; flex-direction: column; gap: 10px;
	font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .5);
}
.hero__labels span { transition: color .3s; }
.hero__labels span.is-active { color: var(--white); }
.hero__track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .14); }
.hero__bar { height: 100%; width: 0%; background: linear-gradient(90deg, #e07a1f, #ffc27f); }

@media (max-width: 859px) {
	.hero__labels { display: none; }
}

/* Reduced motion: static hero, no scroll story */
@media (prefers-reduced-motion: reduce) {
	.hero { height: 100vh; }
	.hero__img.is-stage, .hero__copy.is-stage, .hero__labels, .hero__track { display: none; }
}

/* Lower page hero
   -------------------------------------------------------------------------- */
.page-hero {
	padding: clamp(150px, 18vw, 220px) var(--gutter) clamp(64px, 8vw, 100px);
	background: var(--grad-ink); color: var(--white);
}
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #aab4bd; }
.breadcrumb a { color: #aab4bd; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb [aria-current] { color: var(--white); }
.page-hero__eyebrow { margin-top: 36px; font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--amber); }
.page-hero__title { margin-top: 18px; font-family: var(--font-serif); font-size: clamp(38px, 5.6vw, 76px); line-height: 1.2; font-weight: 800; }
.page-hero__lead { margin-top: 24px; max-width: 560px; font-size: 16px; line-height: 2; color: var(--pale); }

/* Sections & typography
   -------------------------------------------------------------------------- */
.section { padding: var(--section-y) var(--gutter); }
.section--beige { background: var(--beige); }
.section--white { background: var(--white); }
.section--form { padding: clamp(64px, 8vw, 110px) var(--gutter) clamp(80px, 10vw, 140px); }

.eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--accent);
}
.eyebrow__line { width: 28px; height: 2px; background: var(--grad-line); }

.kicker { font-size: 14px; font-weight: 700; color: var(--muted); }

.heading-xl {
	margin-top: 14px;
	font-family: var(--font-serif); font-size: clamp(30px, 4vw, 54px); line-height: 1.35; font-weight: 800; letter-spacing: -0.01em;
}
.heading-lg { margin-top: 20px; font-family: var(--font-serif); font-size: clamp(30px, 4vw, 52px); line-height: 1.3; font-weight: 800; }

.prose { display: grid; gap: 22px; color: var(--ink-2); }
.prose--lg { padding-top: 8px; font-size: clamp(15px, 1.2vw, 17px); line-height: 2.05; }
.prose--message { gap: 26px; max-width: 720px; font-size: clamp(15px, 1.2vw, 17px); line-height: 2.1; }

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

.quote { font-family: var(--font-serif); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.9; font-weight: 700; color: var(--ink); }

/* Layout helpers
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(40px, 6vw, 96px); align-items: start; }
.split--420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.split--380 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.side-layout { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); align-items: flex-start; }
.side-layout__head { flex: 1 1 260px; }
.side-layout__body { flex: 2 1 min(100%, 520px); min-width: 0; }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.section-head__lead { max-width: 440px; font-size: 16px; line-height: 1.95; color: var(--muted); }

/* Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px; border: none; border-radius: var(--radius);
	font-weight: 700; font-size: 15px; cursor: pointer;
	transition: transform .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--ink { background: var(--grad-ink); color: var(--white); }
.btn--ink:hover { color: var(--white); }
.btn--white { padding: 18px 34px; font-size: 16px; background: var(--white); color: var(--ink); }
.btn--white:hover { color: var(--ink); }
.btn--wood { background: var(--grad-wood); color: var(--white); }
.btn--wood:hover { background: var(--grad-wood-hover); color: var(--white); }

/* Mission (front)
   -------------------------------------------------------------------------- */
.mission {
	margin-top: clamp(64px, 8vw, 110px);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	overflow: hidden; border-radius: var(--radius);
	background: var(--grad-ink); color: var(--white);
}
.mission__body { padding: clamp(36px, 5vw, 72px); }
.mission__eyebrow { font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--amber); }
.mission__title { margin-top: 22px; font-family: var(--font-serif); font-size: clamp(24px, 2.8vw, 38px); line-height: 1.5; font-weight: 800; }
.mission__text { margin-top: 26px; font-size: 16px; line-height: 2; color: var(--pale); }
.mission__media { position: relative; min-height: 320px; }
.mission__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* Business
   -------------------------------------------------------------------------- */
.business-grid {
	margin-top: 56px;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px;
}
.business-card {
	display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
	min-height: 180px; padding: 28px 26px 30px;
	background: var(--beige); border: 1px solid var(--line); border-radius: var(--radius);
	transition: transform .35s var(--ease), background .3s, border-color .3s;
}
.business-card:hover { transform: translateY(-6px); background: var(--white); border-color: var(--orange); }
.business-card__num { font-family: var(--font-en); font-size: 14px; font-weight: 800; color: var(--orange); }
.business-card__title { font-size: 19px; font-weight: 700; line-height: 1.55; }

.partners {
	scroll-margin-top: 110px;
	margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--line);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 40px;
}
.partners__name { margin-top: 16px; font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; }
.partners__body { display: grid; gap: 20px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.flow__item { padding: 10px 16px; border-radius: var(--radius); background: var(--beige); border: 1px solid var(--line); }
.flow__item--ink { background: var(--grad-ink); border-color: transparent; color: var(--white); }
.flow__arrow { font-family: var(--font-en); color: var(--orange); }

/* Strengths / numbered lists
   -------------------------------------------------------------------------- */
.strengths { margin-top: 56px; gap: clamp(32px, 4vw, 64px); }
.strengths__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); }
.strengths__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strengths__badge {
	position: absolute; left: 18px; top: 18px;
	padding: 10px 16px; border-radius: var(--radius); background: var(--white);
	font-size: 13px; font-weight: 700;
}

.num-list { list-style: none; margin: 0; padding: 0; display: grid; }
.num-list--bordered { border-top: 1px solid var(--line-2); }
.num-list__item {
	display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline;
	padding: 24px 4px; border-bottom: 1px solid var(--line-2);
}
.num-list__item--tight { padding: 22px 4px; }
.num-list__num { font-family: var(--font-en); font-size: 15px; font-weight: 800; color: var(--orange); }
.num-list__text { font-size: clamp(16px, 1.35vw, 19px); font-weight: 700; line-height: 1.7; }
.num-list__text--serif { font-family: var(--font-serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; }

/* Message teaser (front)
   -------------------------------------------------------------------------- */
.message-teaser { display: grid; gap: 28px; }
.message-teaser__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.signature { font-size: 14px; line-height: 1.8; color: var(--muted); }
.signature__name { font-size: 16px; font-weight: 700; color: var(--ink); }

/* CTA band
   -------------------------------------------------------------------------- */
.cta { padding: clamp(64px, 8vw, 110px) var(--gutter); background: var(--grad-cta); }
.cta__inner {
	max-width: var(--max); margin: 0 auto; color: var(--white);
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px;
}
.cta__title { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 44px); line-height: 1.45; font-weight: 800; }
.cta__lead { margin-top: 18px; font-size: 16px; line-height: 1.9; color: #fff3e8; }

/* Company page
   -------------------------------------------------------------------------- */
.message-sign {
	margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--line-2);
	text-align: right; line-height: 1.9;
}
.message-sign__company { font-size: 14px; color: var(--muted); }
.message-sign__name { font-family: var(--font-serif); font-size: 22px; font-weight: 800; color: var(--ink); }

.philosophy-cards {
	margin-top: 40px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px;
}
.philosophy-card {
	padding: clamp(32px, 4vw, 56px);
	background: var(--beige); border: 1px solid var(--line); border-radius: var(--radius);
}
.philosophy-card--ink { background: var(--grad-ink); border-color: transparent; color: var(--white); }
.philosophy-card--ink .kicker { color: #aab4bd; }
.philosophy-card__title { margin-top: 18px; font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.5; font-weight: 800; }

.vision-rows { margin-top: 24px; }
.vision-row {
	display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); align-items: center;
	padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--line-2);
}
.vision-row--reverse { flex-direction: row-reverse; }
.vision-row__media { flex: 1 1 min(100%, 420px); position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.vision-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vision-row__body { flex: 1 1 min(100%, 380px); min-width: 0; }
.vision-row__num { font-family: var(--font-en); font-size: 15px; font-weight: 800; color: var(--orange); }
.vision-row__title { margin-top: 14px; font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.5; font-weight: 800; }
.vision-row__text { margin-top: 20px; font-size: 16px; line-height: 2.05; color: var(--ink-2); }

.overview { margin: 0; border-top: 1px solid var(--line-3); }
.overview__row {
	display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 16px;
	padding: 24px 0; border-bottom: 1px solid var(--line-3);
}
.overview dt { font-size: 14px; font-weight: 700; color: var(--muted); }
.overview dd { margin: 0; font-size: 16px; line-height: 1.9; }
.overview__note { font-size: 14px; color: var(--muted); }

/* Contact form
   -------------------------------------------------------------------------- */
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.field input,
.field select,
.field textarea {
	width: 100%; height: 52px; padding: 0 16px;
	border: 1px solid var(--line-3); border-radius: var(--radius);
	background: var(--white); color: var(--ink); font-size: 16px; font-weight: 400;
	transition: border-color .2s, box-shadow .2s;
}
.field textarea { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.8; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(224, 122, 31, .18); }
.field [aria-invalid="true"] { border-color: #c0392b; }
.field__error { font-size: 13px; font-weight: 500; color: #c0392b; }
.btn--submit { justify-self: start; height: 56px; padding: 0 36px; font-size: 16px; }
.btn--submit:hover { transform: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { margin-bottom: 24px; padding: 16px 18px; border-radius: var(--radius); font-size: 15px; }
.notice--success { background: #e9f4ec; color: #1f5a33; border: 1px solid #bfdcc8; }
.notice--error { background: #fbeceb; color: #8a2a20; border: 1px solid #efc3be; }

/* Generic content
   -------------------------------------------------------------------------- */
.entry-content { font-size: 16px; line-height: 2; color: var(--ink-2); }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 { font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.5; color: var(--ink); }
.entry-content h3 { font-size: 20px; color: var(--ink); }
.entry-content a:not(.btn) { color: var(--accent); text-decoration: underline; }

/* Footer
   -------------------------------------------------------------------------- */
.site-footer {
	padding: 56px var(--gutter) 40px;
	background: linear-gradient(180deg, #131c24 0%, #0b1116 100%); color: var(--pale);
}
.site-footer__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.site-footer__brand { display: grid; gap: 14px; }
.site-footer__company { font-size: 14px; line-height: 1.9; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 24px; align-self: start; font-size: 14px; font-weight: 700; }
.site-footer__nav a { color: var(--pale); }
.site-footer__nav a:hover { color: var(--amber); }
.site-footer__copy {
	max-width: var(--max); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #24313c;
	font-family: var(--font-en); font-size: 12px; color: #7d8891;
}

/* Focus visibility
   -------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }