/*
Theme Name: MONOTONE
Theme URI: https://monotone.ltd/
Author: MONOTONE Inc.
Description: MONOTONE corporate original theme — CREATE THE NEW STANDARD.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary. All rights reserved.
Text Domain: monotone
*/

/* ==========================================================================
MONOTONE — top page v2
Base design: 提供カンプ（セリフ体ヒーロー／グラスカードコラージュ／
PROJECTS帯／黒STATEMENT／BUSINESS 4カラム／黒STRENGTHS／CONTACT）
サービス紹介はメディアを先頭に。依存ライブラリなし。
========================================================================== */

/* ---------- Design tokens ---------- */
:root {
--bg: #f4f4f2;
--surface: #ffffff;
--ink: #111111;
--muted: #6b6b6b;
--line: #dcdcd7;
--dark: #0d0d0d;
--dark-2: #151515;
--accent: #a13c35;
--accent-soft: rgba(161, 60, 53, 0.55);
--inv: #f1f0ec;
--inv-muted: rgba(241, 240, 236, 0.55);
--inv-line: rgba(241, 240, 236, 0.14);

--font-en: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-serif: "Playfair Display", "Zen Old Mincho", "Times New Roman", serif;
--font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif;
--font-ja-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

--content-max: 1280px;
--gutter: clamp(1.25rem, 4vw, 3.5rem);
--header-h: 72px;

--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 8px);
-webkit-text-size-adjust: 100%;
}

body {
font-family: var(--font-serif);
font-size: 1rem;
letter-spacing: 0.02em;
line-height: 1.95;
color: var(--ink);
background: var(--bg);
overflow-x: clip;
}

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

ul,
ol {
list-style: none;
}

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

button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}

:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}

.en {
font-family: var(--font-en);
}

.serif {
font-family: var(--font-serif);
}

.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 200;
padding: 0.6em 1.2em;
background: var(--dark);
color: #fff;
font-size: 0.85rem;
transform: translateY(-300%);
transition: transform 0.3s var(--ease-out);
}

/* 黒背景セクションではアクセントをゴールドに切り替え */
.statement, .strengths, .projects-strip, .contact__panel, .footer, .menu-overlay, .f-card--dark {
  --accent: #c6a664;
  --accent-soft: rgba(198, 166, 100, 0.55);
}

.skip-link:focus {
transform: translateY(0);
}

.container {
width: min(100% - var(--gutter) * 2, var(--content-max));
margin-inline: auto;
}

/* ---------- 汎用パーツ ---------- */
.label-en {
font-family: var(--font-en);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--muted);
}

.label-en--accent {
color: var(--accent);
}

.arrow-link {
display: inline-flex;
align-items: center;
gap: 0.9rem;
font-family: var(--font-en);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
padding-block: 0.4rem;
}

.arrow-link .arrow {
position: relative;
width: 2.8rem;
height: 1px;
background: currentColor;
transition: width 0.35s var(--ease-out);
}

.arrow-link .arrow::after {
content: "";
position: absolute;
right: 0;
bottom: -1px;
width: 9px;
height: 1px;
background: currentColor;
transform: rotate(35deg);
transform-origin: right center;
}

.arrow-link:hover .arrow {
width: 3.8rem;
}

.arrow-link--ja {
font-family: var(--font-ja);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: none;
}

.v-label {
position: absolute;
z-index: 5;
writing-mode: vertical-rl;
font-family: var(--font-en);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.42em;
text-transform: uppercase;
}

/* ==========================================================================
Header
========================================================================== */
.header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--header-h);
border-bottom: 1px solid transparent;
transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.header.is-scrolled {
background: rgba(244, 244, 242, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom-color: var(--line);
}

.header__inner {
width: min(100% - var(--gutter) * 2, 1400px);
margin-inline: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}

.header__logo {
display: inline-flex;
align-items: center;
}

.header__logo img {
height: 15px;
width: auto;
}

.header__nav ul {
display: flex;
gap: clamp(1.1rem, 2.2vw, 2.2rem);
}

.header__nav a {
position: relative;
font-family: var(--font-en);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
padding-block: 0.5rem;
}

.header__nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.4s var(--ease-out);
}

.header__nav a:hover::after {
transform: scaleX(1);
transform-origin: left center;
}

.menu-toggle {
position: relative;
z-index: 130;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.menu-toggle__bars {
position: relative;
width: 22px;
height: 12px;
display: block;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
background: var(--ink);
transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out), background-color 0.3s;
}

.menu-toggle__bars::before {
top: 0;
}

.menu-toggle__bars::after {
top: 10px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
top: 5px;
transform: rotate(22deg);
background: var(--inv);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
top: 5px;
transform: rotate(-22deg);
background: var(--inv);
}

.menu-overlay {
position: fixed;
inset: 0;
z-index: 120;
background: var(--dark);
color: var(--inv);
display: flex;
flex-direction: column;
justify-content: center;
padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
visibility: hidden;
opacity: 0;
transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}

.menu-overlay.is-open {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}

.menu-overlay nav ul {
display: grid;
gap: 0.3rem;
}

.menu-overlay nav a {
display: inline-flex;
align-items: baseline;
gap: 1.1rem;
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(2rem, 8vw, 3.6rem);
letter-spacing: 0.05em;
line-height: 1.4;
transform: translateY(28px);
opacity: 0;
transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}

.menu-overlay.is-open nav a {
transform: translateY(0);
opacity: 1;
}

.menu-overlay nav li:nth-child(1) a {
transition-delay: 0.08s;
}

.menu-overlay nav li:nth-child(2) a {
transition-delay: 0.14s;
}

.menu-overlay nav li:nth-child(3) a {
transition-delay: 0.2s;
}

.menu-overlay nav li:nth-child(4) a {
transition-delay: 0.26s;
}

.menu-overlay nav li:nth-child(5) a {
transition-delay: 0.32s;
}

.menu-overlay nav a .idx {
font-family: var(--font-en);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--accent-soft);
}

.menu-overlay__foot {
margin-top: 3rem;
font-size: 0.72rem;
letter-spacing: 0.14em;
color: var(--inv-muted);
}

body.is-menu-open {
overflow: hidden;
}

/* ==========================================================================
Hero — セリフ体タイポ × モノクロ山岳 × グラスカードコラージュ
========================================================================== */
.hero {
position: relative;
min-height: min(100svh, 1020px);
display: flex;
align-items: center;
padding-block: calc(var(--header-h) + clamp(1.2rem, 3.5vh, 2.6rem)) clamp(2rem, 5vh, 3.5rem);
overflow: hidden;
}

/* --- 背景の山岳（右側に寄せて左へフェード） --- */
.hero__bg {
position: absolute;
inset: 0 0 0 auto;
width: 100%;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(to left, #000 52%, transparent 90%);
mask-image: linear-gradient(to left, #000 52%, transparent 90%);
}

.hero__bg {
background: transparent;
}

.hero__bg img {
mix-blend-mode: multiply;
}

/* ヘッダー帯の可読性ガード（画像上部が暗くてもナビが読める） */
.hero__bg::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 22%;
background: linear-gradient(to bottom, rgba(244, 244, 242, 0.9), rgba(244, 244, 242, 0));
}

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

html.has-js:not(.motion-off) .hero__bg img {
animation: kenburns 20s ease-in-out infinite alternate;
transform-origin: 62% 38%;
}

@keyframes kenburns {
from {
transform: scale(1.02);
}

to {
transform: scale(1.1);
}
}

/* 写真のインナーパララックス（コンテナ内で縦にゆっくり動く） */
html.has-js:not(.motion-off) .js-plx .cover {
height: 118%;
will-change: transform;
}

.hero__smoke {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.hero__inner {
position: relative;
z-index: 2;
width: min(100% - var(--gutter) * 2, var(--content-max));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
}

/* --- 左: コピー --- */
.hero__content {
position: relative;
z-index: 3;
max-width: 33rem;
}

.hero__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(2.8rem, 5.6vw, 5.3rem);
line-height: 1.04;
letter-spacing: 0;
}

.hero__title .line {
display: block;
overflow: hidden;
white-space: nowrap;
}

.hero__title .line>span {
display: inline-block;
}

.hero__title .hero-dot {
color: var(--accent);
display: inline-block;
}

.hero__lead {
margin-top: clamp(1.2rem, 2.4vw, 1.9rem);
font-size: clamp(0.98rem, 1.4vw, 1.18rem);
font-weight: 700;
letter-spacing: 0.1em;
}

.hero__lead,
.hero__desc,
.hero__cta {
text-shadow: 0 0 14px rgba(244, 244, 242, 0.9), 0 0 4px rgba(244, 244, 242, 0.65);
}

.hero__desc {
margin-top: clamp(0.9rem, 1.6vw, 1.3rem);
font-size: clamp(0.8rem, 0.95vw, 0.9rem);
line-height: 2.15;
max-width: 28rem;
}

.hero__cta {
margin-top: clamp(1.5rem, 2.8vw, 2.2rem);
display: flex;
align-items: center;
gap: 1rem;
}

.hero__cta .arrow-link::before {
content: "";
width: 34px;
height: 1px;
background: var(--accent);
margin-right: 0.4rem;
}

.hero__scroll {
position: absolute;
left: clamp(8px, 1.6vw, 30px);
bottom: clamp(1.5rem, 4vh, 3rem);
mix-blend-mode: difference;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
font-family: var(--font-en);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.32em;
color: #d8d7d3;
writing-mode: vertical-rl;
z-index: 4;
}

.hero__scroll::after {
content: "";
width: 1px;
height: 3.4rem;
background: #d8d7d3;
animation: scroll-line 2.4s var(--ease-out) infinite;
transform-origin: top center;
}

@keyframes scroll-line {
0% {
transform: scaleY(0);
transform-origin: top center;
}

45% {
transform: scaleY(1);
transform-origin: top center;
}

55% {
transform: scaleY(1);
transform-origin: bottom center;
}

100% {
transform: scaleY(0);
transform-origin: bottom center;
}
}

/* --- 右: コラージュ --- */
.hero__collage {
position: relative;
z-index: 2;
height: clamp(420px, 66vh, 640px);
margin-right: calc(-1 * max(0px, (100vw - var(--content-max)) / 2 - 8px));
}

/* タブレットモック（差し替え可） */
.hero__device {
position: absolute;
top: 14%;
left: 20%;
width: 52%;
aspect-ratio: 16 / 11;
background: #0e0e0e;
border-radius: 12px;
border: 1px solid #262626;
box-shadow: 0 30px 70px rgba(17, 17, 17, 0.28);
overflow: hidden;
transform: rotate(-3deg);
}

.hero__device::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 38%);
}

.hero__device img {
position: absolute;
inset: 0;
}

.hero__device-logo {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}

.hero__device-logo img {
width: 38%;
height: auto;
opacity: 0.95;
}

/* --- フローティングカード --- */
.f-card {
position: absolute;
z-index: 3;
width: clamp(168px, 16.5vw, 224px);
padding: 1rem 1.05rem 0.95rem;
border-radius: 10px;
will-change: transform;
}

.f-card--glass {
background: rgba(250, 250, 248, 0.6);
border: 1px solid rgba(255, 255, 255, 0.65);
box-shadow: 0 18px 44px rgba(17, 17, 17, 0.14);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}

.f-card--dark {
background: rgba(12, 12, 12, 0.9);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 60px rgba(10, 10, 10, 0.4);
color: var(--inv);
}

.f-card--light {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(220, 220, 215, 0.9);
box-shadow: 0 18px 44px rgba(17, 17, 17, 0.12);
}

.f-card__num {
font-family: var(--font-en);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--muted);
}

.f-card--dark .f-card__num {
color: var(--inv-muted);
}

.f-card__name {
margin-top: 0.35rem;
font-family: var(--font-serif);
font-size: 1.06rem;
letter-spacing: 0.03em;
line-height: 1.3;
}

.f-card__desc {
margin-top: 0.4rem;
font-size: 0.66rem;
line-height: 1.75;
color: var(--muted);
}

.f-card--dark .f-card__desc {
color: var(--inv-muted);
}

.f-card__visual {
margin-top: 0.65rem;
border-radius: 6px;
overflow: hidden;
}

.f-card__visual svg {
width: 100%;
height: auto;
}

.f-card__visual--photo {
aspect-ratio: 200 / 68;
}

.f-card__visual--logo {
aspect-ratio: 200 / 60;
background: #101010;
display: grid;
place-items: center;
}

.f-card__visual--logo img {
height: 58%;
width: auto;
opacity: 0.92;
}

.f-card__link {
margin-top: 0.7rem;
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-en);
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.24em;
}

.f-card__link::after {
content: "";
width: 22px;
height: 1px;
background: var(--accent);
}

/* カード配置（01メディアを最前・最上位に） */
.f-card--1 {
top: 0;
right: 26%;
z-index: 5;
}

.f-card--2 {
top: 15%;
right: -1%;
z-index: 4;
}

.f-card--3 {
bottom: 20%;
left: 2%;
z-index: 5;
}

.f-card--4 {
bottom: 4%;
right: 18%;
z-index: 4;
}

/* --- Hero intro（JSあり時のみ初期非表示 → .is-loadedで解除） --- */
html.has-js .hero__title .char {
display: inline-block;
transform: translateY(118%);
transition: transform 1.05s var(--ease-expo);
}

html.has-js.is-loaded .hero__title .char {
transform: translateY(0);
}

html.has-js .hero__title .hero-dot {
opacity: 0;
transform: translateY(0.3em);
transition: opacity 0.7s var(--ease-out) 1.15s, transform 0.7s var(--ease-out) 1.15s;
}

html.has-js.is-loaded .hero__title .hero-dot {
opacity: 1;
transform: translateY(0);
}

html.has-js [data-hero="fade"] {
opacity: 0;
transform: translateY(24px);
filter: blur(6px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}

html.has-js.is-loaded [data-hero="fade"] {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}

html.has-js .hero__lead {
transition-delay: 0.6s;
}

html.has-js .hero__desc {
transition-delay: 0.74s;
}

html.has-js .hero__cta {
transition-delay: 0.9s;
}

html.has-js .hero__bg {
opacity: 0;
transition: opacity 1.4s var(--ease-out) 0.25s;
}

html.has-js.is-loaded .hero__bg {
opacity: 1;
}

html.has-js .hero__device {
opacity: 0;
translate: 0 40px;
transition: opacity 1.1s var(--ease-out) 0.55s, translate 1.1s var(--ease-out) 0.55s;
}

html.has-js.is-loaded .hero__device {
opacity: 1;
translate: 0 0;
}

html.has-js .f-card {
opacity: 0;
translate: 0 46px;
transition: opacity 1s var(--ease-out), translate 1s var(--ease-out);
}

html.has-js.is-loaded .f-card {
opacity: 1;
translate: 0 0;
}

html.has-js .f-card--1 {
transition-delay: 0.8s;
}

html.has-js .f-card--2 {
transition-delay: 0.95s;
}

html.has-js .f-card--3 {
transition-delay: 1.1s;
}

html.has-js .f-card--4 {
transition-delay: 1.25s;
}

html.has-js .hero__scroll {
opacity: 0;
transition: opacity 0.9s var(--ease-out) 1.5s;
}

html.has-js.is-loaded .hero__scroll {
opacity: 1;
}

html.motion-off .hero__title .char,
html.motion-off .hero__title .hero-dot,
html.motion-off [data-hero="fade"],
html.motion-off .hero__bg,
html.motion-off .hero__device,
html.motion-off .f-card,
html.motion-off .hero__scroll {
opacity: 1;
transform: none;
filter: none;
translate: 0 0;
transition: none;
}

/* ==========================================================================
Projects strip（黒帯・横スクロール）
========================================================================== */
.projects-strip {
position: relative;
background: var(--dark);
color: var(--inv);
padding-block: 0;
}

.projects-strip .arrow-link--ja {
font-family: var(--font-ja);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: none;
}

.v-label {
top: 50%;
left: clamp(8px, 1.6vw, 30px);
transform: translateY(-50%);
color: var(--accent);
z-index: 5;
}

/* マーキー（無限に流れる帯） */
.projects-strip__track.is-marquee {
overflow: hidden;
touch-action: pan-y;
cursor: grab;
}

.projects-strip__track.is-marquee:active {
cursor: grabbing;
}

.projects-strip__runner {
display: flex;
will-change: transform;
}

.projects-strip__track img {
-webkit-user-drag: none;
user-select: none;
}

.project-card__art--logo {
display: grid;
place-items: center;
background: #121212;
padding-bottom: 26%;
}

.project-card__art.project-card__art--logo img {
width: 68%;
height: auto;
object-fit: contain;
opacity: 0.92;
}

.project-card__art.project-card__art--logo.palette img {
width: 38%;

}

/* 端の黒フェード（マーキーの出入りを馴染ませる） */
.projects-strip::before,
.projects-strip::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 4;
width: clamp(70px, 8vw, 130px);
pointer-events: none;
}

.projects-strip::before {
left: 0;
background: linear-gradient(to right, rgba(13, 13, 13, 0.9), rgba(13, 13, 13, 0));
}

.projects-strip::after {
right: 0;
background: linear-gradient(to left, rgba(13, 13, 13, 0.9), rgba(13, 13, 13, 0));
}

.projects-strip__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}

.projects-strip__track::-webkit-scrollbar {
display: none;
}

.project-card {
position: relative;
flex: none;
width: clamp(230px, 20.5vw, 300px);
aspect-ratio: 10 / 9;
scroll-snap-align: start;
border-left: 1px solid rgba(241, 240, 236, 0.1);
overflow: hidden;
}

.project-card__art {
position: absolute;
inset: 0;
background: #171716;
transition: transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
filter: brightness(0.88);
}

.project-card__art svg,
.project-card__art img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* カラー素材を差し込んでもマーキー上では常にモノクロ化 */
.project-card__art img {
/* filter: grayscale(1); */
}

.project-card__art.project-card__art--logo img {
filter: none;
}

.project-card:hover .project-card__art {
transform: scale(1.05);
filter: brightness(1);
}

.project-card__body {
position: absolute;
z-index: 2;
inset: auto 0 0 0;
padding: 2.2rem 1.2rem 1.1rem;
background: linear-gradient(to top, rgba(8, 8, 8, 0.88) 30%, rgba(8, 8, 8, 0));
}

.project-card__cat {
font-family: var(--font-en);
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.26em;
color: var(--inv-muted);
text-transform: uppercase;
}

.project-card__name {
margin-top: -0.3rem;
font-family: var(--font-en);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.14em;
}

.project-card__name--serif {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: 0.04em;
}

/* ==========================================================================
Statement（黒・巨大ゴースト文字）
========================================================================== */
.statement {
position: relative;
background: var(--dark);
color: var(--inv);
padding-block: clamp(5.5rem, 11vw, 9.5rem);
overflow: hidden;
border-top: 1px solid rgba(241, 240, 236, 0.07);
}

.statement__ghost {
position: absolute;
top: clamp(1rem, 4vw, 3rem);
left: -1%;
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(4.5rem, 15vw, 13rem);
line-height: 1;
letter-spacing: 0.02em;
color: rgba(241, 240, 236, 0.05);
white-space: nowrap;
user-select: none;
will-change: transform;
}

.statement__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}

.statement__label {
margin-bottom: 1.1rem;
}

.statement__copy {
font-family: var(--font-ja-display);
font-feature-settings: "palt";
font-size: clamp(1.35rem, 2.7vw, 2rem);
font-weight: 700;
line-height: 2;
letter-spacing: 0.08em;
}

.statement__body {
margin-top: 1.6rem;
font-size: 0.86rem;
line-height: 2.3;
color: var(--inv-muted);
max-width: 34rem;
}

.statement__cta {
margin-top: 2rem;
}

.statement__cta .arrow-link {
color: var(--inv);
}

.statement__visual {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 4px;
background: #131312;
}

.statement__visual img {
filter: brightness(0.75) contrast(1.05);
}

/* ==========================================================================
Business（白・4カラム・事業領域）
========================================================================== */
.business {
position: relative;
background: var(--bg);
padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.business .arrow-link--ja {
font-family: var(--font-ja);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: none;
}

.v-label {
top: clamp(4.5rem, 9vw, 8rem);
left: clamp(8px, 1.6vw, 30px);
color: var(--ink);
}

.business__head {
margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}

.business__heading {
font-family: var(--font-ja-display);
font-feature-settings: "palt";
font-size: clamp(1.55rem, 3.1vw, 2.2rem);
font-weight: 700;
letter-spacing: 0.06em;
margin-top: 0.9rem;
}

.business__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 1列目の左paddingを0にする代わりに、全列同じpaddingにしてグリッド全体を左へ寄せる（全列の中身の幅が揃う） */
margin-left: calc(-1 * clamp(1.2rem, 2.2vw, 2rem));
}

.business-col {
display: flex;
flex-direction: column;
padding: 0.5rem clamp(1.2rem, 2.2vw, 2rem);
border-left: 1px solid var(--line);
}

.business-col:first-child {
border-left: 0;
}

.business-col__num {
font-family: var(--font-serif);
font-size: clamp(1.9rem, 2.8vw, 2.6rem);
font-weight: 500;
letter-spacing: 0.02em;
}

.business-col__num::after {
content: "";
display: block;
width: 2rem;
height: 1px;
background: var(--accent);
margin-top: 0.5rem;
}

.business-col__title .amp {
font-family: var(--font-en);
font-weight: 500;
font-size: 0.88em;
}

.business-col__title {
margin-top: 1rem;
font-family: var(--font-serif);
font-size: clamp(1.02rem, 1.35vw, 1.24rem);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.03em;
min-height: 3em;
}

.business-col__desc {
margin-top: 0.8rem;
font-size: 0.78rem;
line-height: 2;
color: var(--muted);
}

.business-col__list {
margin-top: 1rem;
}

.business-col__list li {
padding-block: 0.5rem;
border-bottom: 1px solid var(--line);
font-size: 0.78rem;
letter-spacing: 0.04em;
}

.business-col .arrow-link {
margin-top: auto;
padding-top: 1.6rem;
align-self: flex-start;
}

/* 見出し下の細長い写真ストリップ */
.business-col__banner {
aspect-ratio: 4 / 1;
overflow: hidden;
margin-top: 1rem;
background: #d8d7d2;
}

.business-col__banner img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s var(--ease-out);
}

.business-col:hover .business-col__banner img {
transform: scale(1.05);
}

html.has-js .business-col__banner img {
clip-path: inset(0 100% 0 0);
transition: transform 0.9s var(--ease-out), clip-path 1.15s var(--ease-expo);
}

html.has-js .business__grid.imgs-ready .business-col.is-inview .business-col__banner img {
clip-path: inset(0 0 0 0);
}

html.has-js .business-col:nth-child(1) .business-col__banner img {
transition-delay: 0.15s;
}

html.has-js .business-col:nth-child(2) .business-col__banner img {
transition-delay: 0.28s;
}

html.has-js .business-col:nth-child(3) .business-col__banner img {
transition-delay: 0.41s;
}

html.has-js .business-col:nth-child(4) .business-col__banner img {
transition-delay: 0.54s;
}

html.motion-off .business-col__banner img {
clip-path: none;
transition: none;
}

/* ==========================================================================
Strengths（黒・実績データ）
========================================================================== */
.strengths {
position: relative;
background: var(--dark);
color: var(--inv);
padding-block: clamp(4rem, 8vw, 7rem);
overflow: hidden;
}

.strengths__inner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) auto;
gap: clamp(2rem, 4.5vw, 4rem);
align-items: center;
}

.strengths__copy {
font-size: 0.9rem;
line-height: 2.2;
color: var(--inv-muted);
margin-top: 1.1rem;
}

.strengths__cta {
margin-top: 1.6rem;
}

.strengths__cta .arrow-link {
color: var(--inv);
}

.strengths__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.stat {
padding-inline: clamp(1rem, 2vw, 1.8rem);
border-left: 1px solid var(--inv-line);
}

.stat__label {
font-family: var(--font-en);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--inv-muted);
text-transform: uppercase;
}

.stat__value {
margin-top: 0.7rem;
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(2rem, 3.4vw, 3.1rem);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}

.stat__value .unit {
font-size: 0.55em;
margin-left: 0.06em;
}

.stat__caption {
margin-top: 0.5rem;
font-size: 0.68rem;
color: var(--inv-muted);
letter-spacing: 0.06em;
}

/* Palette Focus（黒帯内） */
.pf-title {
font-family: var(--font-ja-display);
font-feature-settings: "palt";
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
font-weight: 700;
line-height: 1.9;
letter-spacing: 0.07em;
margin-top: 1.1rem;
}

.pf-heading {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
}

.pf-issues {
margin-top: 0.8rem;
}

.pf-issues li {
display: flex;
align-items: baseline;
gap: 0.8rem;
padding-block: 0.6rem;
border-bottom: 1px solid var(--inv-line);
font-size: 0.84rem;
color: var(--inv-muted);
}

.pf-issues li::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border: 1.5px solid var(--accent);
border-radius: 50%;
transform: translateY(-1px);
}

.pf-case {
margin-top: 1.1rem;
font-size: 0.78rem;
line-height: 2.1;
color: var(--inv-muted);
}

.pf-badges {
margin-top: 1.3rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.badge-chip {
font-size: 0.62rem;
letter-spacing: 0.14em;
padding: 0.5em 1em;
border: 1px solid #fff;
color: #fff;
}

.badge-chip--accent {
border-color: var(--accent-soft);
color: #d4b578;
letter-spacing: 0.2em;
}

.contact__panel-title.pf-title-ja {
font-family: var(--font-ja-display);
font-feature-settings: "palt";
letter-spacing: 0.08em;
font-weight: 700;
font-size: clamp(1.15rem, 1.6vw, 1.45rem);
line-height: 2;
}

.contact__panel-title .nowrap {
white-space: nowrap;
}

/* 回転バッジ */
.strengths__badge {
position: relative;
width: clamp(120px, 11vw, 150px);
aspect-ratio: 1;
}

.strengths__badge svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.strengths__badge .spin {
animation: badge-spin 26s linear infinite;
transform-origin: 50% 50%;
}

@keyframes badge-spin {
to {
transform: rotate(360deg);
}
}

.strengths__badge-core {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
font-family: var(--font-en);
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.22em;
line-height: 1.9;
color: #fff;
}

/* ==========================================================================
Contact（白）＋ Footer（黒スリム）
========================================================================== */
.contact {
background: var(--bg);
padding-block: clamp(4.5rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem);
}

.contact__inner {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr);
gap: clamp(1.5rem, 3.5vw, 3rem);
align-items: stretch;
}

.contact__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(3rem, 7vw, 5.6rem);
line-height: 1.05;
letter-spacing: 0.04em;
}

.contact__title .hero-dot {
color: var(--accent);
}

.contact__desc {
margin-top: 1.3rem;
font-size: 0.88rem;
color: var(--muted);
line-height: 2.2;
}

.contact__cta {
margin-top: 2rem;
}

.contact__art {
overflow: hidden;
border-radius: 4px;
min-height: 220px;
background: #cfcec9;
}

.contact__panel {
background: var(--dark);
color: var(--inv);
border-radius: 4px;
padding: clamp(1.6rem, 3vw, 2.4rem);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
transition: background-color 0.4s var(--ease-out);
}

.contact__panel:hover {
background: #1a1a1a;
}

.contact__panel-title {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 500;
line-height: 1.45;
}

.contact__panel-sub {
margin-top: 0.9rem;
font-size: 0.82rem;
color: var(--inv-muted);
}

.contact__panel .arrow-link {
color: var(--inv);
}

.footer {
background: var(--dark);
color: var(--inv);
border-top: 1px solid var(--inv-line);
padding-block: 1.3rem;
font-size: 0.7rem;
}

.footer__inner {
width: min(100% - var(--gutter) * 2, 1400px);
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.1rem 2rem;
}

.footer__logo {
display: inline-flex;
align-items: center;
}

.footer__logo img {
height: 13px;
width: auto;
opacity: 0.95;
}

.footer__nav {
margin-inline: auto;
}

.footer__nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.6rem;
}

.footer__nav a {
font-family: var(--font-en);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
padding-block: 0.7rem;
color: var(--inv-muted);
transition: color 0.3s var(--ease-out);
}

.footer__nav a:hover {
color: var(--inv);
}

.footer__copy {
font-family: var(--font-en);
font-size: 0.6rem;
letter-spacing: 0.12em;
color: var(--inv-muted);
}

.footer__sns {
display: flex;
gap: 0.4rem;
}

.footer__sns a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
transition: background-color 0.3s var(--ease-out);
}

.footer__sns a:hover {
background: rgba(241, 240, 236, 0.12);
}

.footer__sns svg {
width: 14px;
height: 14px;
fill: var(--inv);
}

/* ==========================================================================
Page transition / Reveal / Cursor / Grain
========================================================================== */
.preloader {
position: fixed;
inset: 0;
z-index: 500;
background: var(--dark);
display: flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}

.preloader.is-lift {
transform: translateY(-101%);
transition: transform 0.95s var(--ease-expo);
}

.preloader__logo {
display: block;
width: clamp(170px, 22vw, 280px);
opacity: 0;
transform: scale(1.06) translateY(8px);
transition: opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out);
}

.preloader__logo img {
width: 100%;
height: auto;
}

.preloader.is-in .preloader__logo {
opacity: 1;
transform: scale(1) translateY(0);
}

.page-transition {
position: fixed;
inset: 0;
z-index: 300;
background: var(--dark);
transform: scaleY(0);
transform-origin: center bottom;
pointer-events: none;
transition: transform 0.45s var(--ease-expo);
}

.page-transition.is-active {
transform: scaleY(1);
}

html.has-js [data-reveal] {
opacity: 0;
transform: translateY(34px);
transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out);
}

html.has-js [data-reveal].is-inview {
opacity: 1;
transform: translateY(0);
}

html.motion-off [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}

html.cursor-on,
html.cursor-on a,
html.cursor-on button {
cursor: none;
}

.cursor-dot,
.cursor-ring {
position: fixed;
top: 0;
left: 0;
z-index: 400;
pointer-events: none;
border-radius: 50%;
opacity: 0;
}

.cursor-dot {
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
background: var(--accent);
}

.cursor-ring {
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
border: 1px solid #fff;
mix-blend-mode: exclusion;
transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.cursor-ring.is-hover {
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
border-color: var(--accent);
mix-blend-mode: normal;
}

html.cursor-visible .cursor-dot,
html.cursor-visible .cursor-ring {
opacity: 1;
}

.grain {
position: fixed;
inset: -50%;
z-index: 90;
pointer-events: none;
opacity: 0.05;
background-repeat: repeat;
}

/* ==========================================================================
Responsive
========================================================================== */
@media (min-width: 1025px) {
.menu-toggle {
display: none;
}
}

@media (max-width: 1180px) {
.strengths__inner {
grid-template-columns: 1fr;
}

.strengths__badge {
margin-inline: auto;
}
}

@media (max-width: 1024px) {
:root {
--header-h: 64px;
}

.header__nav {
display: none;
}

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

.business__grid {
grid-template-columns: 1fr 1fr;
gap: 2.2rem 0;
}

.business-col:nth-child(3) {
border-left: 0;
}

.business-col__title .amp {
font-family: var(--font-en);
font-weight: 500;
font-size: 0.88em;
}

.business-col__title {
min-height: 0;
}

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

.contact__art {
display: none;
}
}

@media (max-width: 768px) {
.hero {
min-height: 100dvh;
padding-top: calc(var(--header-h) + 2.4rem);
padding-bottom: 4.5rem;
align-items: flex-start;
}

/* 墨を透かしではなく主役に（下半分に濃く、上へ溶ける） */
.hero__bg,
html.has-js.is-loaded .hero__bg {
width: 100%;
opacity: 1;
/* 右下に濃く、テキストのある左上へ溶かす */
-webkit-mask-image: linear-gradient(to top left, #000 30%, transparent 72%);
mask-image: linear-gradient(to top left, #000 30%, transparent 72%);
}

.hero__bg img {
object-position: 66% 58%;
}

.hero__content {
max-width: none;
}

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

.statement__visual {
max-width: 30rem;
}

.projects-strip .arrow-link--ja {
font-family: var(--font-ja);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: none;
}

.v-label {
display: none;
}

.projects-strip__nav {
display: none;
}

.project-card {
width: 74vw;
max-width: 330px;
}

.strengths__stats {
grid-template-columns: 1fr 1fr;
gap: 2rem 0;
}

.stat:nth-child(3) {
border-left: 0;
padding-left: 0;
}

.stat:first-child {
padding-left: 0;
border-left: 0;
}

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

.footer__inner {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}

.footer__nav {
margin-inline: 0;
}
}

/* 背の低い端末では墨をさらに下へ */
@media (max-width: 768px) and (max-height: 720px) {

.hero__bg,
html.has-js.is-loaded .hero__bg {
-webkit-mask-image: linear-gradient(to top left, #000 22%, transparent 62%);
mask-image: linear-gradient(to top left, #000 22%, transparent 62%);
}
}

@media (max-width: 640px) {
.business__grid {
grid-template-columns: 1fr;
gap: 2rem;
margin-left: 0;
}

.business-col {
border-left: 0;
padding-inline: 0;
}

.business .v-label,
.strengths .arrow-link--ja {
font-family: var(--font-ja);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: none;
}

.v-label {
display: none;
}
}

@media (max-width: 430px) {
.hero__title {
font-size: clamp(2.2rem, 10.5vw, 2.9rem);
}
}

/* safe area */
@supports (padding: max(0px)) {

.header__inner,
.footer__inner {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
}

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

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

.hero__scroll::after,
.strengths__badge .spin {
animation: none;
}
}

/* ==========================================================================
   下層ページ共通 / お問い合わせ
   ========================================================================== */
.page-main { background: var(--bg); }
.page-hero {
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.page-hero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.1; letter-spacing: 0.03em;
  margin-top: 1rem;
}
.page-hero__title .hero-dot { color: var(--accent); }
.page-hero__lead { margin-top: 1.2rem; font-size: 0.92rem; color: #333; line-height: 2.2; }

.contact-page {
  background: var(--dark);
  color: var(--inv);
  --accent: #c6a664;
  --accent-soft: rgba(198, 166, 100, 0.55);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7rem);
}
.contact-page__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.contact-page__aside-title {
  font-family: var(--font-ja-display); font-feature-settings: "palt";
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em;
}
.contact-steps { margin-top: 1.6rem; display: grid; gap: 1.4rem; }
.contact-steps li { display: flex; gap: 1.1rem; align-items: baseline; }
.contact-steps__num {
  flex: none; font-size: 1.3rem; font-weight: 500; color: var(--accent);
}
.contact-steps__title { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; }
.contact-steps__text { margin-top: 0.3rem; font-size: 0.8rem; color: var(--inv-muted); line-height: 2; }

/* --- フォーム（Contact Form 7対応） --- */
.contact-form {
  background: var(--bg);
  color: var(--ink);
  --accent: #a13c35;
  --accent-soft: rgba(161, 60, 53, 0.55);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
}
.contact-form .form-row { margin-bottom: 1.6rem; }
.contact-form .form-row--2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  margin-bottom: 0;
}
.contact-form .form-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.contact-form .req {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--accent); border: 1px solid var(--accent-soft);
  padding: 0.15em 0.6em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit; color: var(--ink);
  background: #fff;
  border: none;
  padding: 0.65em;
  border-radius: 0;
  transition: border-color 0.3s var(--ease-out);
}
.contact-form ::placeholder { color: var(--muted); }
.contact-form select option { color: var(--ink); background: var(--surface); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
.contact-form textarea { min-height: 10em; resize: vertical; line-height: 1.9; }
.contact-form select { cursor: pointer; }
.contact-form .wpcf7-list-item { margin: 0; }
.contact-form .wpcf7-acceptance { font-size: 0.82rem; }
.contact-form input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin-right: 0.5em; }
.contact-form .contact-submit,
.contact-form input[type="submit"] {
  display: inline-flex; align-items: center;
  margin-top: 1.8rem;
  background: var(--ink); color: var(--inv);
  font: inherit; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em;
  border: 0; cursor: pointer;
  padding: 1.05rem 3.2rem;
  min-height: 44px;
  transition: background-color 0.35s var(--ease-out);
}
.contact-form .contact-submit:hover,
.contact-form input[type="submit"]:hover { background: var(--accent); }
.contact-form .wpcf7-not-valid-tip { font-size: 0.72rem; color: var(--accent); margin-top: 0.3rem; }

/* --- CF7 表示調整（デフォルトCSS無効化にともなう補完＋装飾） --- */
.wpcf7 .hidden-fields-container,
.contact-form .hidden-fields-container {
  display: none;
}
.screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
}
.contact-form .wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  width: 18px; height: 18px;
  margin-left: 1rem;
  vertical-align: middle;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mt-spin 0.8s linear infinite;
}
.contact-form .wpcf7-form.submitting .wpcf7-spinner { visibility: visible; }
@keyframes mt-spin { to { transform: rotate(360deg); } }

.contact-form .wpcf7-response-output {
  position: relative;
  margin: 2.6rem 0 0;
  padding: 1.3rem 0 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  line-height: 2;
  border: 0;
  background: transparent;
}
.contact-form .wpcf7-response-output::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.8rem; height: 1px;
  background: #c6a664;
}
.contact-form .wpcf7-form.init .wpcf7-response-output,
.contact-form .wpcf7-form.resetting .wpcf7-response-output,
.contact-form .wpcf7-form.submitting .wpcf7-response-output { display: none; }
.contact-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-form .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7-form.spam .wpcf7-response-output,
.contact-form .wpcf7-form.failed .wpcf7-response-output { color: var(--accent); }
.contact-form .wpcf7-form.invalid .wpcf7-response-output::before,
.contact-form .wpcf7-form.unaccepted .wpcf7-response-output::before,
.contact-form .wpcf7-form.spam .wpcf7-response-output::before,
.contact-form .wpcf7-form.failed .wpcf7-response-output::before { background: var(--accent); }

.contact-form .form-privacy label {
display: flex;
align-items: center;
}

@media (max-width: 900px) {
  .contact-page__inner { grid-template-columns: 1fr; }
  .contact-form .form-row--2col { grid-template-columns: 1fr; gap: 0; }
  .contact-form .form-row--2col .form-row { margin-bottom: 1.6rem; }
}

/* --- 求人 --- */
.recruit-page {
  background: var(--dark);
  color: var(--inv);
  --accent: #c6a664;
  --accent-soft: rgba(198, 166, 100, 0.55);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7rem);
}
.recruit-page__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.recruit-page__aside-title {
  font-family: var(--font-ja-display); font-feature-settings: "palt";
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600;
  letter-spacing: 0.08em; line-height: 1.8;
}
.recruit-page__aside-text {
  margin-top: 1.4rem; font-size: 0.85rem; line-height: 2.3;
}
.recruit-points { margin-top: 2.2rem; display: grid; gap: 1.4rem; }
.recruit-points li { display: flex; gap: 1.1rem; align-items: baseline; }
.recruit-points__num { flex: none; font-size: 1.3rem; font-weight: 500; color: var(--accent); }
.recruit-points__title { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; }
.recruit-points__text { margin-top: 0.3rem; font-size: 0.8rem; line-height: 2; }

.recruit-card {
  background: var(--bg);
  color: var(--ink);
  --accent: #a13c35;
  --accent-soft: rgba(161, 60, 53, 0.55);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
}
.recruit-card__role {
  margin-top: 0.9rem;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.3; letter-spacing: 0.03em;
}
.recruit-card__sub { margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.08em; }

.recruit-table { margin-top: 2.2rem; }
.recruit-table > div {
  display: grid; grid-template-columns: 160px minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.recruit-table > div:first-child { border-top: 1px solid var(--line); }
.recruit-table dt {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  padding-top: 0.15em;
}
.recruit-table dd { font-size: 0.85rem; line-height: 2.1; color: #333; }

.recruit-card__cta { margin-top: 2.2rem; }
.recruit-apply {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--inv);
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 1.05rem 3.2rem; min-height: 44px;
  transition: background-color 0.35s var(--ease-out);
}
.recruit-apply:hover { background: var(--accent); }
.recruit-card__note { margin-top: 1rem; font-size: 0.75rem; color: var(--muted); }

@media (max-width: 900px) {
  .recruit-page__inner { grid-template-columns: 1fr; }
  .recruit-table > div { grid-template-columns: 1fr; gap: 0.35rem; padding-block: 1rem; }
}

/* --- 求人: 応募フォーム --- */
.recruit-entry { margin-top: clamp(4rem, 8vw, 6.5rem); }
.recruit-entry__title {
  margin-top: 0.8rem;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: 0.04em; line-height: 1.15;
}
.recruit-entry__lead { margin-top: 1rem; font-size: 0.85rem; color: #fff; line-height: 2.2; }
.recruit-entry__form { margin-top: 2rem; max-width: 880px; }
.contact-form input[type="file"] {
  display: block; width: 100%;
  font-size: 0.8rem; color: var(--muted);
  padding: 0.65em 0;
}
.contact-form input[type="file"]::file-selector-button {
  font: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 0;
  padding: 0.5em 1.4em; margin-right: 1em; cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.contact-form input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--inv); }

/* --- 会社概要 --- */
.company-page {
  background: var(--dark);
  color: var(--inv);
  --accent: #c6a664;
  --accent-soft: rgba(198, 166, 100, 0.55);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7rem);
}
.company-card {
  background: var(--bg);
  color: var(--ink);
  --accent: #a13c35;
  --accent-soft: rgba(161, 60, 53, 0.55);
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
}
.company-card__title {
  margin-top: 0.9rem;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: 0.04em; line-height: 1.3;
}
.company-table { margin-top: 2.2rem; }
.company-table > div {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.company-table > div:first-child { border-top: 1px solid var(--line); }
.company-table dt {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  padding-top: 0.2em; line-height: 2;
}
.company-table dd { font-size: 0.88rem; line-height: 2.1; }

@media (max-width: 700px) {
  .company-table > div { grid-template-columns: 1fr; gap: 0.35rem; padding-block: 1rem; }
  .company-table dt br { display: none; }
}

/* --- メニューオーバーレイ: 上部バー（ロゴ＋閉じる） --- */
.menu-overlay__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  width: min(100% - var(--gutter) * 2, 1400px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-overlay__logo { display: inline-flex; align-items: center; }
.menu-overlay__logo img { height: 15px; width: auto; }
.menu-close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-close span {
  position: relative;
  width: 22px; height: 22px;
  display: block;
}
.menu-close span::before,
.menu-close span::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1.5px;
  background: var(--inv);
  transition: transform 0.35s var(--ease-out);
}
.menu-close span::before { transform: rotate(24deg); }
.menu-close span::after { transform: rotate(-24deg); }
.menu-close:hover span::before { transform: rotate(0deg); }
.menu-close:hover span::after { transform: rotate(0deg); }

/* --- 404 --- */
.error-page {
  background: var(--dark);
  color: var(--inv);
  --accent: #c6a664;
  --accent-soft: rgba(198, 166, 100, 0.55);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(5rem, 10vw, 8rem);
}
.error-page__text { font-size: 0.9rem; color: var(--inv-muted); line-height: 2.3; }
.error-page__links {
  margin-top: 2.4rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem 3rem;
}
.error-back {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--inv); color: var(--ink);
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 1.05rem 3.2rem; min-height: 44px;
  transition: background-color 0.35s var(--ease-out);
}
.error-back:hover { background: var(--accent); }

/* --- パンくずリスト --- */
.breadcrumb {
  background: var(--dark);
  color: var(--inv-muted);
  border-top: 1px solid var(--inv-line);
  padding-block: 1.1rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em 0.9em;
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
  content: "—";
  margin-right: 0.9em;
  opacity: 0.4;
}
.breadcrumb a {
  color: var(--inv-muted);
  transition: color 0.3s var(--ease-out);
}
.breadcrumb a:hover { color: var(--inv); }
.breadcrumb span { color: var(--inv); }

/* --- プライバシーポリシー / 汎用本文 --- */
.privacy-page {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7rem);
}
.prose { max-width: 880px; }
.prose h2 {
  margin-top: 3.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-ja-display);
  font-feature-settings: "palt";
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.prose > h2:first-child,
.prose > section:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  margin-top: 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.prose p {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: #333;
  line-height: 2.2;
}
.prose ul,
.prose ol {
  margin-top: 1.1rem;
  padding-left: 1.4em;
  font-size: 0.88rem;
  color: #333;
  line-height: 2.2;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.2em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- フォーム内のプライバシーポリシーリンク --- */
.contact-form .wpcf7-acceptance a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease-out);
}
.contact-form .wpcf7-acceptance a:hover { color: var(--accent); }

.form-privacy .wpcf7-list-item {

}
/* --- 390px以下: 横の余白を詰める --- */
@media (max-width: 390px) {
  :root {
    --gutter: 12px;
  }
  .contact-form,
  .recruit-card,
  .company-card {
    padding: 1.5rem 12px;
  }
}