/* =========================================================
YYS Regeneration — Identity v3 (refined, photo-led)
早稲田えんじ × 深緑 × 濃紺 ／ 洗練されたオフホワイト
========================================================= */
/* ---------- 1. Tokens ---------- */
:root {
/* — Surface (cool, refined off-white; not warm/skin tone) — */
--c-paper: #F4F2EC; /* primary off-white, neutral cool */
--c-paper-soft: #FBFAF6; /* highlight band */
--c-paper-pure: #FFFFFF; /* pure white */
--c-paper-dim: #E8E4D9; /* alternation */
--c-paper-line: rgba(15, 22, 32, 0.14);
--c-paper-line-2: rgba(15, 22, 32, 0.06);
--c-paper-mute: rgba(15, 22, 32, 0.62);
/* — Brand structural colors — */
--c-crimson: #8E1A2C; /* 早稲田えんじ ／ Waseda crimson */
--c-crimson-deep: #6E1424;
--c-crimson-soft: #B6515F;
--c-crimson-tint: #F4DDDF;
--c-green: #1F5A3F; /* 深い再生緑 — refined emerald */
--c-green-deep: #0E3D27;
--c-green-soft: #4A8568;
--c-green-tint: #E1ECE5;
--c-navy: #0F2545; /* 濃紺 — third structural color */
--c-navy-deep: #061533;
--c-navy-soft: #2A4570;
--c-navy-tint: #DEE3EC;
/* — Ink (text) — */
--c-ink: #0F1620; /* near-black, slight blue */
--c-ink-soft: #2C3949;
--c-paper-on-ink: rgba(244, 242, 236, 0.92);
--c-paper-on-ink-mute:rgba(244, 242, 236, 0.62);
/* — Accents (sparing) — */
--c-teal: #1F756F;
--c-gold: #A88B5A;
/* — Type — */
--f-display: "Fraunces", "Noto Serif JP", Georgia, serif;
--f-body: "Inter", "Noto Sans JP", system-ui, sans-serif;
--f-jp: "Noto Sans JP", "Inter", system-ui, sans-serif;
--f-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
/* — Spacing — */
--s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
--s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
--s-9:6rem; --s-10:8rem; --s-11:12rem;
/* — Layout — */
--container: 1320px;
--container-narrow: 1000px;
--container-prose: 720px;
--pad-x: clamp(1.5rem, 4vw, 3rem);
/* — Motion — */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--t-fast: 220ms; --t-mid: 460ms; --t-slow: 900ms;
}
/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
html, body { background: var(--c-paper); }
body {
font-family: var(--f-jp);
font-size: 1rem;
line-height: 1.8;
color: var(--c-ink);
letter-spacing: 0.02em;
font-weight: 400;
overflow-x: hidden;
}
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--c-crimson); color: var(--c-paper-soft); }
.skip-link {
position: absolute; top: -100px; left: 16px;
background: var(--c-crimson); color: var(--c-paper-soft);
padding: .6rem 1rem; border-radius: 4px; z-index: 200;
}
.skip-link:focus { top: 16px; }
/* ---------- 3. Typography helpers ---------- */
.kicker {
display: inline-block;
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
}
.kicker--green { color: var(--c-green); }
.kicker--navy { color: var(--c-navy); }
.kicker--gold { color: var(--c-gold); }
.kicker--paper { color: var(--c-paper-on-ink-mute); }
.kicker::before {
content: "";
display: inline-block; vertical-align: middle;
width: 24px; height: 1px; background: currentColor;
margin-right: 0.7rem; transform: translateY(-1px);
}
.lede {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1rem, 0.6vw + 0.85rem, 1.2rem);
line-height: 1.95;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
max-width: 56ch;
}
.lede em {
font-family: var(--f-display);
font-style: italic; font-weight: 380;
color: var(--c-crimson);
}
.h-display {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 4.4rem);
line-height: 1.32;
letter-spacing: 0.06em;
color: var(--c-ink);
text-wrap: balance;
}
.h-display em { font-family: var(--f-display); font-style: italic; font-weight: 360; color: var(--c-crimson); letter-spacing: -0.005em; }
.h-display .green { color: var(--c-green); font-family: var(--f-display); font-style: italic; }
.h-section {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(1.8rem, 2.6vw + 0.4rem, 3.2rem);
line-height: 1.42;
letter-spacing: 0.05em;
color: var(--c-ink);
text-wrap: balance;
}
.h-section em { font-family: var(--f-display); font-style: italic; font-weight: 360; color: var(--c-crimson); }
.h-section .green { color: var(--c-green); font-family: var(--f-display); font-style: italic; }
/* ---------- 4. Layout primitives ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--pad-x); }
.container--narrow{ max-width: var(--container-narrow); margin: 0 auto; padding-inline: var(--pad-x); }
.container--prose { max-width: var(--container-prose); margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 4rem); }
.section--white { background: var(--c-paper-pure); }
.section--paper { background: var(--c-paper); }
.section--dim { background: var(--c-paper-dim); }
.section--green-tint { background: var(--c-green-tint); }
.section--crimson-tint { background: var(--c-crimson-tint); }
.section--navy-tint { background: var(--c-navy-tint); }
/* ---------- 5. Navigation ---------- */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 80;
padding-block: var(--s-4);
background: rgba(244, 242, 236, 0);
transition: background var(--t-mid) var(--ease-soft), padding var(--t-mid) var(--ease-soft), border-color var(--t-mid) ease;
border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
background: rgba(251, 250, 246, 0.92);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
padding-block: var(--s-3);
border-bottom-color: var(--c-paper-line-2);
}
.nav__inner {
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--pad-x);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-6);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.brand__icon img { width: 100%; height: 100%; object-fit: contain; }
.brand__text { display: inline-flex; flex-direction: column; line-height: 1.1; }
.brand__name {
font-family: var(--f-display);
font-weight: 380;
font-size: 1.05rem;
letter-spacing: 0.06em;
color: var(--c-ink);
}
.brand__sub {
font-family: var(--f-body);
font-size: 0.6rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-crimson);
font-weight: 600;
margin-top: 4px;
}
.nav__menu {
display: flex; align-items: center;
gap: clamp(1rem, 2vw, 2.2rem);
}
.nav__link {
position: relative;
padding: 0.4rem 0.1rem;
font-family: var(--f-jp);
font-weight: 500;
font-size: 0.86rem;
letter-spacing: 0.08em;
color: var(--c-ink);
opacity: 0.78;
transition: opacity var(--t-fast) ease, color var(--t-fast) ease;
}
.nav__link:hover { opacity: 1; }
.nav__link::after {
content: "";
position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
background: var(--c-crimson);
transition: right var(--t-mid) var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }
.nav__link[aria-current="page"] { opacity: 1; color: var(--c-crimson); }
.nav__cta {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.6rem 1.1rem;
background: var(--c-crimson); color: var(--c-paper-soft);
border-radius: 999px;
font-family: var(--f-jp);
font-size: 0.84rem;
font-weight: 500;
letter-spacing: 0.1em;
transition: background var(--t-fast) ease, transform var(--t-fast) ease;
}
.nav__cta:hover { background: var(--c-crimson-deep); transform: translateY(-1px); }
.nav__toggle {
display: none;
width: 44px; height: 44px;
align-items: center; justify-content: center;
border: 1px solid var(--c-paper-line);
border-radius: 999px;
color: var(--c-ink);
}
.nav__toggle span { width: 18px; height: 1px; background: currentColor; position: relative; }
.nav__toggle span::before, .nav__toggle span::after {
content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: currentColor;
transition: transform var(--t-mid) var(--ease-out);
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 920px) {
.nav__toggle { display: inline-flex; }
.nav__menu {
position: fixed; inset: 0;
background: var(--c-paper-soft);
flex-direction: column;
align-items: flex-start; justify-content: center;
gap: var(--s-5);
padding: var(--s-9) var(--pad-x);
transform: translateY(-100%);
transition: transform var(--t-mid) var(--ease-out);
font-size: 1.5rem;
}
.nav.is-open .nav__menu { transform: translateY(0); }
.nav__cta { align-self: flex-start; margin-top: var(--s-3); }
}
/* ---------- 6. Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 0.7rem;
padding: 0.95rem 1.7rem;
border-radius: 999px;
font-family: var(--f-jp);
font-weight: 500;
font-size: 0.86rem;
letter-spacing: 0.14em;
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.btn--crimson { background: var(--c-crimson); color: var(--c-paper-soft); border-color: var(--c-crimson); }
.btn--crimson:hover { background: var(--c-crimson-deep); border-color: var(--c-crimson-deep); transform: translateY(-2px); }
.btn--green { background: var(--c-green); color: var(--c-paper-soft); border-color: var(--c-green); }
.btn--green:hover { background: var(--c-green-deep); border-color: var(--c-green-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-paper-soft); transform: translateY(-2px); }
.btn--ghost-paper { background: transparent; color: var(--c-paper-soft); border-color: var(--c-paper-soft); }
.btn--ghost-paper:hover { background: var(--c-paper-soft); color: var(--c-ink); transform: translateY(-2px); }
.btn .arr { transition: transform var(--t-fast) ease; }
.btn:hover .arr { transform: translateX(4px); }
.text-link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--f-jp);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--c-crimson);
border-bottom: 1px solid var(--c-crimson);
padding-bottom: 0.2rem;
transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.text-link:hover { color: var(--c-crimson-deep); }
.text-link--green { color: var(--c-green); border-bottom-color: var(--c-green); }
.text-link--green:hover { color: var(--c-green-deep); }
.text-link--paper { color: var(--c-paper-soft); border-bottom-color: var(--c-paper-soft); }
.text-link .arr { transition: transform var(--t-fast) ease; }
.text-link:hover .arr { transform: translateX(4px); }
/* ---------- 7. HOME HERO — split layout (text left, image right) ---------- */
.hero {
position: relative;
min-height: 100svh;
background: var(--c-paper);
display: grid;
grid-template-columns: 1.05fr 1fr;
}
.hero__left {
padding: clamp(7rem, 14vh, 10rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
display: flex; flex-direction: column; justify-content: space-between;
position: relative;
z-index: 2;
}
.hero__right {
position: relative;
overflow: hidden;
background: var(--c-navy);
}
.hero__right img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
.hero__right::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(15, 37, 69, 0.18) 0%, rgba(15, 22, 32, 0.05) 50%, rgba(31, 90, 63, 0.12) 100%);
pointer-events: none;
}
.hero__pre {
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--c-crimson);
display: inline-flex; align-items: center; gap: 0.8rem;
}
.hero__pre::before {
content: ""; width: 32px; height: 1px; background: var(--c-crimson);
}
.hero__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2.4rem, 4.5vw + 0.5rem, 5.4rem);
letter-spacing: 0.06em;
line-height: 1.32;
color: var(--c-ink);
margin-top: var(--s-5);
text-wrap: balance;
}
.hero__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 360;
color: var(--c-crimson);
letter-spacing: -0.005em;
}
.hero__title .green {
color: var(--c-green);
font-family: var(--f-display);
font-style: italic;
font-weight: 360;
}
.hero__sub {
margin-top: var(--s-5);
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(0.95rem, 0.7vw + 0.7rem, 1.18rem);
line-height: 1.95;
letter-spacing: 0.06em;
color: var(--c-paper-mute);
max-width: 36ch;
}
.hero__foot {
display: flex; justify-content: space-between; align-items: end;
gap: var(--s-5);
padding-top: var(--s-6);
border-top: 1px solid var(--c-paper-line);
}
.hero__pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
flex: 1; max-width: 480px;
}
.hero__pillar { display: grid; gap: 0.3rem; }
.hero__pillar-num {
font-family: var(--f-display);
font-style: italic; font-weight: 380;
font-size: 1rem;
letter-spacing: 0.04em;
}
.hero__pillar-num--navy { color: var(--c-navy); }
.hero__pillar-num--crimson { color: var(--c-crimson); }
.hero__pillar-num--green { color: var(--c-green); }
.hero__pillar-name {
font-family: var(--f-jp);
font-weight: 500;
font-size: 0.92rem;
letter-spacing: 0.08em;
color: var(--c-ink);
}
.hero__pillar-en {
font-family: var(--f-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-paper-mute);
}
/* Hero credit (image attribution corner) */
.hero__credit {
position: absolute; right: var(--s-5); bottom: var(--s-5);
font-family: var(--f-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(244, 242, 236, 0.55);
z-index: 2;
}
.hero__credit::before {
content: ""; display: inline-block;
width: 18px; height: 1px;
background: rgba(244, 242, 236, 0.55);
margin-right: 0.6rem; transform: translateY(-3px);
}
@media (max-width: 980px) {
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero__right { aspect-ratio: 4/5; }
.hero__left { padding-bottom: var(--s-7); }
}
/* ---------- 8. Page hero (sub-pages) ---------- */
.phero {
position: relative;
padding-top: clamp(8rem, 18vh, 11rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
background: var(--c-paper);
border-bottom: 1px solid var(--c-paper-line-2);
overflow: hidden;
}
.phero--with-image {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
align-items: stretch;
padding-bottom: 0;
}
.phero--with-image .phero__inner { padding-bottom: clamp(3rem, 6vw, 5rem); }
.phero--with-image .phero__media {
position: relative;
min-height: 480px;
overflow: hidden;
background: var(--c-navy);
}
.phero--with-image .phero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero--with-image .phero__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(15, 37, 69, 0.10), rgba(31, 90, 63, 0.10));
pointer-events: none;
}
.phero::before {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: linear-gradient(90deg, var(--c-crimson) 0%, var(--c-crimson) 30%, var(--c-green) 70%, var(--c-green) 100%);
z-index: 3;
}
.phero__inner {
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--pad-x);
display: grid;
grid-template-columns: minmax(80px, 0.4fr) 4fr;
gap: var(--s-6);
align-items: end;
}
.phero--with-image .phero__inner {
display: flex;
flex-direction: column;
justify-content: end;
align-items: stretch;
max-width: none;
}
.phero__num {
font-family: var(--f-display);
font-style: italic; font-weight: 360;
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(--c-crimson);
padding-top: 0.6rem;
border-top: 1px solid var(--c-crimson);
margin-top: var(--s-6);
}
.phero__body { padding-bottom: var(--s-3); }
.phero__eyebrow {
display: inline-block;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-crimson);
margin-bottom: var(--s-4);
}
.phero__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 4.4rem);
letter-spacing: 0.06em;
line-height: 1.38;
color: var(--c-ink);
text-wrap: balance;
}
.phero__title em { font-family: var(--f-display); font-style: italic; font-weight: 360; color: var(--c-crimson); letter-spacing: -0.005em; }
.phero__title .green { color: var(--c-green); font-family: var(--f-display); font-style: italic; }
.phero__sub {
margin-top: var(--s-4);
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1rem, 0.8vw + 0.6rem, 1.2rem);
letter-spacing: 0.06em;
line-height: 1.95;
color: var(--c-paper-mute);
max-width: 56ch;
}
@media (max-width: 880px) {
.phero--with-image { grid-template-columns: 1fr; }
.phero--with-image .phero__media { min-height: 280px; aspect-ratio: 16/10; }
.phero__inner { grid-template-columns: 1fr; }
.phero__num { margin-top: 0; }
}
/* ---------- 9. Section heading band ---------- */
.head-band {
display: grid;
grid-template-columns: minmax(100px, 0.6fr) 4fr;
gap: var(--s-7);
align-items: end;
padding-bottom: var(--s-7);
border-bottom: 1px solid var(--c-paper-line);
margin-bottom: var(--s-8);
}
.head-band__num {
font-family: var(--f-display);
font-style: italic; font-weight: 360;
font-size: 1.2rem; color: var(--c-crimson);
letter-spacing: 0.04em;
}
.head-band__body { display: grid; gap: var(--s-3); }
.head-band__lede { margin-top: var(--s-3); max-width: 60ch; }
@media (max-width: 760px) { .head-band { grid-template-columns: 1fr; gap: var(--s-4); } }
/* ---------- 10. Domain cards (with photos) ---------- */
.domains {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.domain {
position: relative;
display: flex; flex-direction: column;
background: var(--c-paper-soft);
border: 1px solid var(--c-paper-line-2);
overflow: hidden;
transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) ease, border-color var(--t-fast) ease;
}
.domain:hover {
transform: translateY(-4px);
box-shadow: 0 32px 60px -28px rgba(15, 22, 32, 0.18);
}
.domain--infra { border-top: 4px solid var(--c-navy); }
.domain--energy { border-top: 4px solid var(--c-crimson); }
.domain--beauty { border-top: 4px solid var(--c-green); }
.domain__media {
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 1px solid var(--c-paper-line-2);
background: var(--c-paper-dim);
position: relative;
}
.domain__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
transition: transform 1.4s var(--ease-out);
}
.domain:hover .domain__media img { transform: scale(1.04); }
.domain__body {
padding: var(--s-6);
display: flex; flex-direction: column;
flex: 1;
}
.domain__num {
font-family: var(--f-display);
font-style: italic; font-weight: 380;
font-size: 1.4rem;
letter-spacing: 0.02em;
margin-bottom: var(--s-3);
}
.domain--infra .domain__num { color: var(--c-navy); }
.domain--energy .domain__num { color: var(--c-crimson); }
.domain--beauty .domain__num { color: var(--c-green); }
.domain__name-jp {
font-family: var(--f-jp);
font-weight: 400;
font-size: 1.55rem;
letter-spacing: 0.06em;
color: var(--c-ink);
margin-bottom: 0.3rem;
}
.domain__name-en {
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-paper-mute);
margin-bottom: var(--s-4);
}
.domain__body p {
font-family: var(--f-jp);
font-size: 0.94rem;
line-height: 2;
color: var(--c-ink);
margin-bottom: var(--s-5);
}
.domain__tags {
margin-top: auto;
display: flex; flex-wrap: wrap; gap: 0.4rem;
padding-top: var(--s-4);
border-top: 1px dotted var(--c-paper-line);
}
.domain__tags span {
font-family: var(--f-jp);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--c-paper-mute);
padding: 0.25rem 0.7rem;
border: 1px solid var(--c-paper-line);
border-radius: 999px;
}
@media (max-width: 940px) {
.domains { grid-template-columns: 1fr; }
}
/* ---------- 11. Brand atmosphere — fullbleed photo with overlay text ---------- */
.brand-atmos {
position: relative;
min-height: 560px;
overflow: hidden;
display: flex; align-items: center;
background: var(--c-navy);
}
.brand-atmos__bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.brand-atmos__overlay {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(15, 22, 32, 0.72) 0%, rgba(15, 22, 32, 0.45) 50%, rgba(15, 22, 32, 0.20) 100%);
z-index: 1;
}
.brand-atmos__inner {
position: relative; z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-7);
align-items: center;
}
.brand-atmos__title {
font-family: var(--f-jp-serif);
font-weight: 400;
font-size: clamp(1.6rem, 2.8vw + 0.5rem, 3rem);
line-height: 1.7;
letter-spacing: 0.08em;
color: var(--c-paper-soft);
text-wrap: balance;
}
.brand-atmos__title em {
font-family: var(--f-display);
font-style: italic;
color: var(--c-gold);
font-weight: 380;
}
.brand-atmos__cite {
margin-top: var(--s-6);
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-gold);
}
.brand-atmos__caption {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.95rem;
line-height: 2;
color: rgba(244, 242, 236, 0.80);
}
@media (max-width: 880px) {
.brand-atmos__inner { grid-template-columns: 1fr; }
.brand-atmos__overlay { background: linear-gradient(180deg, rgba(15, 22, 32, 0.45) 0%, rgba(15, 22, 32, 0.78) 100%); }
}
/* ---------- 12. Editorial split (image + text, magazine style) ---------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.split--rev .split__media { order: 2; }
.split__media {
background: var(--c-paper-dim);
overflow: hidden;
aspect-ratio: 5 / 4;
position: relative;
border: 1px solid var(--c-paper-line-2);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { display: flex; flex-direction: column; gap: var(--s-4); }
.split__body h2 { margin-block: var(--s-2); }
.split__body p {
font-family: var(--f-jp);
font-size: 1rem;
line-height: 2;
color: var(--c-ink);
}
@media (max-width: 880px) {
.split, .split--rev { grid-template-columns: 1fr; }
.split--rev .split__media { order: 0; }
}
/* ---------- 13. Founder cards (no photos — typographic + accent) ---------- */
.founders {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.founder {
display: flex; flex-direction: column;
background: var(--c-paper-soft);
border: 1px solid var(--c-paper-line-2);
padding: var(--s-7) var(--s-6);
transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease;
position: relative;
}
.founder:hover {
transform: translateY(-3px);
box-shadow: 0 28px 56px -32px rgba(15, 22, 32, 0.16);
}
.founder::before {
content: "";
position: absolute; left: 0; top: 0; height: 3px; width: 56px;
}
.founder--01::before { background: var(--c-navy); }
.founder--02::before { background: var(--c-crimson); }
.founder--03::before { background: var(--c-green); }
.founder__num {
font-family: var(--f-display);
font-style: italic; font-weight: 380;
font-size: 1.4rem;
letter-spacing: 0.02em;
margin-bottom: var(--s-4);
}
.founder--01 .founder__num { color: var(--c-navy); }
.founder--02 .founder__num { color: var(--c-crimson); }
.founder--03 .founder__num { color: var(--c-green); }
.founder__name {
font-family: var(--f-jp);
font-weight: 500;
font-size: 1.55rem;
letter-spacing: 0.08em;
color: var(--c-ink);
margin-bottom: 0.3rem;
}
.founder__name-en {
font-family: var(--f-body);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-paper-mute);
margin-bottom: var(--s-4);
}
.founder__role {
display: inline-block;
font-family: var(--f-jp);
font-size: 0.78rem;
letter-spacing: 0.18em;
font-weight: 500;
padding: 0.3rem 0.7rem;
border-radius: 999px;
margin-bottom: var(--s-4);
}
.founder--01 .founder__role { color: var(--c-navy); background: var(--c-navy-tint); }
.founder--02 .founder__role { color: var(--c-crimson); background: var(--c-crimson-tint); }
.founder--03 .founder__role { color: var(--c-green); background: var(--c-green-tint); }
.founder__bio {
font-family: var(--f-jp);
font-size: 0.94rem;
line-height: 2;
color: var(--c-ink);
margin-bottom: var(--s-4);
}
.founder__edu {
font-family: var(--f-jp);
font-size: 0.78rem;
line-height: 1.85;
color: var(--c-paper-mute);
padding-top: var(--s-4);
border-top: 1px solid var(--c-paper-line-2);
}
.founder__edu div { margin-bottom: 0.2rem; }
@media (max-width: 940px) { .founders { grid-template-columns: 1fr; } }
/* ---------- 14. Big numbers ---------- */
.bignums {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--c-paper-line);
border-bottom: 1px solid var(--c-paper-line);
}
.bignum {
padding: var(--s-7) var(--s-5);
border-right: 1px solid var(--c-paper-line);
}
.bignum:last-child { border-right: 0; }
.bignum__fig {
font-family: var(--f-display);
font-weight: 360;
font-size: clamp(2.4rem, 4.5vw + 0.5rem, 3.8rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--c-ink);
margin-bottom: var(--s-3);
}
.bignum__fig em { font-style: italic; color: var(--c-crimson); }
.bignum__fig .green { color: var(--c-green); }
.bignum__fig .navy { color: var(--c-navy); }
.bignum__title {
font-family: var(--f-jp);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--c-ink);
margin-bottom: 0.4rem;
}
.bignum__label {
font-family: var(--f-jp);
font-weight: 400;
font-size: 0.84rem;
letter-spacing: 0.04em;
line-height: 1.7;
color: var(--c-paper-mute);
}
@media (max-width: 880px) {
.bignums { grid-template-columns: 1fr 1fr; }
.bignum:nth-child(2) { border-right: 0; }
.bignum:nth-child(1), .bignum:nth-child(2) { border-bottom: 1px solid var(--c-paper-line); }
}
@media (max-width: 480px) {
.bignums { grid-template-columns: 1fr; }
.bignum { border-right: 0; border-bottom: 1px solid var(--c-paper-line); }
.bignum:last-child { border-bottom: 0; }
}
/* ---------- 15. Insights cards (photo-led) ---------- */
.insights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.insight {
display: flex; flex-direction: column;
background: var(--c-paper-soft);
border: 1px solid var(--c-paper-line-2);
overflow: hidden;
transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease;
}
.insight:hover {
transform: translateY(-3px);
box-shadow: 0 28px 56px -32px rgba(15, 22, 32, 0.16);
}
.insight__media {
aspect-ratio: 16 / 10;
background: var(--c-paper-dim);
overflow: hidden;
}
.insight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.insight:hover .insight__media img { transform: scale(1.04); }
.insight__body {
padding: var(--s-6);
display: flex; flex-direction: column; flex: 1;
}
.insight__cat {
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-crimson);
margin-bottom: var(--s-3);
}
.insight__cat--green { color: var(--c-green); }
.insight__cat--navy { color: var(--c-navy); }
.insight__title {
font-family: var(--f-jp);
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 0.06em;
line-height: 1.6;
color: var(--c-ink);
margin-bottom: var(--s-3);
}
.insight__excerpt {
font-family: var(--f-jp);
font-size: 0.9rem;
line-height: 2;
color: var(--c-paper-mute);
margin-bottom: var(--s-5);
}
.insight__meta {
margin-top: auto;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--f-display);
font-style: italic;
font-size: 0.85rem;
color: var(--c-paper-mute);
padding-top: var(--s-4);
border-top: 1px solid var(--c-paper-line-2);
}
@media (max-width: 940px) { .insights { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .insights { grid-template-columns: 1fr; } }
/* ---------- 16. Definition list ---------- */
.deflist { border-top: 1px solid var(--c-paper-line); }
.deflist__row {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--s-5);
padding-block: var(--s-5);
border-bottom: 1px solid var(--c-paper-line-2);
}
.deflist__row dt {
font-family: var(--f-jp);
font-size: 0.82rem;
letter-spacing: 0.18em;
font-weight: 600;
color: var(--c-crimson);
padding-top: 0.25rem;
}
.deflist__row dd {
font-family: var(--f-jp);
font-size: 1rem;
line-height: 2;
color: var(--c-ink);
}
@media (max-width: 700px) { .deflist__row { grid-template-columns: 1fr; gap: var(--s-2); } }
/* ---------- 17. Form ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label {
font-family: var(--f-jp);
font-size: 0.82rem;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--c-crimson);
}
.field input, .field textarea, .field select {
background: transparent;
border: 0;
border-bottom: 1px solid var(--c-paper-line);
padding: 0.85rem 0;
font-family: var(--f-jp);
font-size: 1rem;
color: var(--c-ink);
outline: none;
transition: border-color var(--t-fast) ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--c-crimson); }
.field textarea { resize: vertical; min-height: 140px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }
.req { color: var(--c-crimson); font-weight: 700; margin-left: 0.2rem; }
.checkbox {
display: flex; align-items: flex-start; gap: var(--s-3);
font-family: var(--f-jp);
font-size: 0.9rem;
line-height: 1.7;
color: var(--c-paper-mute);
}
.checkbox input { width: 16px; height: 16px; margin-top: 0.3rem; accent-color: var(--c-crimson); }
/* ---------- 18. CTA final ---------- */
.cta-final {
text-align: center;
padding-block: clamp(5rem, 10vw, 8rem);
background: var(--c-paper-soft);
border-top: 1px solid var(--c-paper-line-2);
border-bottom: 1px solid var(--c-paper-line-2);
position: relative;
}
.cta-final::before {
content: "";
display: block;
width: 64px; height: 2px;
background: var(--c-crimson);
margin: 0 auto var(--s-6);
}
.cta-final__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(1.7rem, 3vw + 0.5rem, 3rem);
letter-spacing: 0.06em;
line-height: 1.5;
color: var(--c-ink);
margin-bottom: var(--s-4);
text-wrap: balance;
}
.cta-final__title em { font-family: var(--f-display); font-style: italic; font-weight: 380; color: var(--c-crimson); }
.cta-final__sub {
font-family: var(--f-jp);
font-weight: 300;
font-size: 1.05rem;
letter-spacing: 0.06em;
color: var(--c-paper-mute);
margin-bottom: var(--s-7);
}
.cta-final--dark {
background: var(--c-navy-deep);
border-color: rgba(244, 242, 236, 0.10);
position: relative;
overflow: hidden;
}
.cta-final--dark::after {
content: "";
position: absolute; inset: 0;
background: url("../images/yys-technology-regeneration-wave.jpg") center/cover no-repeat;
opacity: 0.30;
z-index: 0;
}
.cta-final--dark > * { position: relative; z-index: 1; }
.cta-final--dark .cta-final__title { color: var(--c-paper-soft); }
.cta-final--dark .cta-final__title em { color: var(--c-gold); }
.cta-final--dark .cta-final__sub { color: rgba(244, 242, 236, 0.65); }
/* ---------- 19. Footer ---------- */
.foot {
background: var(--c-ink);
color: var(--c-paper-soft);
padding-top: clamp(4rem, 7vw, 5rem);
padding-bottom: var(--s-6);
border-top: 4px solid var(--c-crimson);
}
.foot a { color: rgba(244, 242, 236, 0.80); transition: color var(--t-fast) ease; }
.foot a:hover { color: var(--c-paper-soft); }
.foot__inner {
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--pad-x);
}
.foot__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--s-6);
padding-bottom: var(--s-7);
border-bottom: 1px solid rgba(244, 242, 236, 0.12);
}
.foot__brand-mark {
display: inline-flex; align-items: center; gap: 0.7rem;
margin-bottom: var(--s-4);
}
.foot__brand-mark svg, .foot__brand-mark img {
width: 42px; height: 42px; object-fit: contain;
border-radius: 50%;
background: radial-gradient(circle, rgba(244,242,236,0.10) 0%, rgba(244,242,236,0.0) 70%);
}
.foot__brand-name {
font-family: var(--f-display);
font-weight: 380;
font-size: 1.15rem;
letter-spacing: 0.06em;
color: var(--c-paper-soft);
}
.foot__tagline {
font-family: var(--f-jp);
font-weight: 300;
font-size: 1rem;
letter-spacing: 0.06em;
line-height: 1.95;
max-width: none;
white-space: nowrap;
}
.foot__col h4 {
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-crimson-soft);
margin-bottom: var(--s-4);
}
.foot__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.foot__col a {
font-family: var(--f-jp);
font-size: 0.9rem;
letter-spacing: 0.06em;
}
.foot__bottom {
padding-top: var(--s-5);
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
gap: var(--s-4);
font-family: var(--f-jp);
font-size: 0.82rem;
letter-spacing: 0.06em;
color: rgba(244, 242, 236, 0.55);
}
.foot__bottom .legal { display: flex; gap: var(--s-5); }
.foot__bottom a { color: rgba(244, 242, 236, 0.55); }
@media (max-width: 940px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot__top { grid-template-columns: 1fr; } }
/* ---------- 20. Reveal on scroll ---------- */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { transition: none !important; opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* ---------- 21. Helpers ---------- */
.center { text-align: center; }
.maxw-prose { max-width: 65ch; }
.maxw-narrow { max-width: 50ch; }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
/* =========================================================
v4 — Typography orphan prevention + new components
========================================================= */
/* ---------- A. Japanese typography control ---------- */
/* Prevent intra-phrase breaks on key headings; keep balance */
.h-display,
.h-section,
.hero__title,
.phero__title,
.cta-final__title,
.brand-atmos__title,
.feature__title,
.domain__name-jp,
.founder__name,
.method__title,
.member__name,
.section-jp,
.section__lead,
.lede {
word-break: keep-all;
overflow-wrap: anywhere;
text-wrap: balance;
line-break: strict;
}
/* Body Japanese — prefer 'pretty' wrap which avoids orphan single chars where supported */
body, p, dd, li {
text-wrap: pretty;
word-break: normal;
line-break: strict;
}
/* Each block in defs/edu lines wraps as its own unit with no intra-word break.
This solves "／ 2001年修了" being orphaned. */
.founder__edu > div,
.member__edu > div,
.deflist__row dd,
.no-orphan {
word-break: keep-all;
overflow-wrap: anywhere;
text-wrap: pretty;
}
/* Small unbreakable phrases */
.nb { white-space: nowrap; }
/* Tag chips and short labels never break */
.domain__tags span,
.kicker,
.brand__sub,
.hero__pillar-name,
.hero__pillar-en,
.founder__role,
.member__role,
.founder__name-en {
white-space: nowrap;
}
/* ---------- B. Members (initials) ---------- */
.members {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.member {
position: relative;
display: flex; flex-direction: column;
background: var(--c-paper-soft);
border: 1px solid var(--c-paper-line-2);
padding: var(--s-7) var(--s-6);
transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease;
}
.member:hover {
transform: translateY(-3px);
box-shadow: 0 28px 56px -32px rgba(15, 22, 32, 0.16);
}
.member::before {
content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 56px;
}
.member--01::before { background: var(--c-navy); }
.member--02::before { background: var(--c-crimson); }
.member--03::before { background: var(--c-green); }
.member__initials {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: clamp(3rem, 5vw + 1rem, 4.6rem);
line-height: 1;
letter-spacing: 0.02em;
margin-bottom: var(--s-5);
}
.member--01 .member__initials { color: var(--c-navy); }
.member--02 .member__initials { color: var(--c-crimson); }
.member--03 .member__initials { color: var(--c-green); }
.member__name {
font-family: var(--f-jp);
font-weight: 500;
font-size: 1.15rem;
letter-spacing: 0.06em;
color: var(--c-ink);
margin-bottom: 0.4rem;
}
.member__role-en {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 0.95rem;
letter-spacing: 0.04em;
margin-bottom: 0.3rem;
}
.member--01 .member__role-en { color: var(--c-navy); }
.member--02 .member__role-en { color: var(--c-crimson); }
.member--03 .member__role-en { color: var(--c-green); }
.member__role-jp {
font-family: var(--f-jp);
font-size: 0.84rem;
letter-spacing: 0.06em;
color: var(--c-paper-mute);
margin-bottom: var(--s-5);
}
.member__edu {
font-family: var(--f-jp);
font-size: 0.78rem;
line-height: 1.85;
color: var(--c-paper-mute);
padding: var(--s-4) 0;
border-top: 1px solid var(--c-paper-line-2);
border-bottom: 1px solid var(--c-paper-line-2);
margin-bottom: var(--s-4);
}
.member__edu div { margin-bottom: 0.2rem; }
.member__expertise-label {
font-family: var(--f-body);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-paper-mute);
margin-bottom: 0.5rem;
}
.member__expertise {
font-family: var(--f-jp);
font-size: 0.86rem;
line-height: 1.85;
color: var(--c-ink);
}
@media (max-width: 940px) { .members { grid-template-columns: 1fr; } }
/* ---------- C. Method (4-step) ---------- */
.method {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--c-paper-line);
border-bottom: 1px solid var(--c-paper-line);
}
.method__step {
padding: var(--s-7) var(--s-5);
border-right: 1px solid var(--c-paper-line);
position: relative;
}
.method__step:last-child { border-right: 0; }
.method__num {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--c-crimson);
margin-bottom: var(--s-3);
}
.method__title-en {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 1.6rem;
letter-spacing: 0.02em;
color: var(--c-ink);
margin-bottom: 0.3rem;
}
.method__title {
font-family: var(--f-jp);
font-weight: 500;
font-size: 1.05rem;
letter-spacing: 0.08em;
color: var(--c-crimson);
margin-bottom: var(--s-4);
}
.method__body {
font-family: var(--f-jp);
font-size: 0.86rem;
line-height: 2;
color: var(--c-ink);
}
@media (max-width: 880px) {
.method { grid-template-columns: 1fr 1fr; }
.method__step:nth-child(2) { border-right: 0; }
.method__step:nth-child(1), .method__step:nth-child(2) { border-bottom: 1px solid var(--c-paper-line); }
}
@media (max-width: 480px) {
.method { grid-template-columns: 1fr; }
.method__step { border-right: 0; border-bottom: 1px solid var(--c-paper-line); }
.method__step:last-child { border-bottom: 0; }
}
/* ---------- D. Services 4-up grid ---------- */
.services {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-6);
}
.service {
padding: var(--s-7) var(--s-6);
background: var(--c-paper-soft);
border: 1px solid var(--c-paper-line-2);
border-top: 4px solid var(--c-crimson);
transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease;
display: flex; flex-direction: column;
}
.service:hover {
transform: translateY(-3px);
box-shadow: 0 28px 56px -32px rgba(15, 22, 32, 0.16);
}
.service:nth-child(1) { border-top-color: var(--c-crimson); }
.service:nth-child(2) { border-top-color: var(--c-green); }
.service:nth-child(3) { border-top-color: var(--c-navy); }
.service:nth-child(4) { border-top-color: var(--c-gold); }
.service__num {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 1rem;
letter-spacing: 0.04em;
margin-bottom: var(--s-3);
}
.service:nth-child(1) .service__num { color: var(--c-crimson); }
.service:nth-child(2) .service__num { color: var(--c-green); }
.service:nth-child(3) .service__num { color: var(--c-navy); }
.service:nth-child(4) .service__num { color: var(--c-gold); }
.service__title-en {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 1.6rem;
letter-spacing: 0.02em;
color: var(--c-ink);
margin-bottom: 0.3rem;
}
.service__title {
font-family: var(--f-jp);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.06em;
color: var(--c-paper-mute);
margin-bottom: var(--s-4);
}
.service__body {
font-family: var(--f-jp);
font-size: 0.94rem;
line-height: 2;
color: var(--c-ink);
word-break: keep-all;
overflow-wrap: anywhere;
text-wrap: pretty;
}
@media (max-width: 800px) { .services { grid-template-columns: 1fr; } }
/* ---------- E. Learning / Play band ---------- */
.lp-band {
background: var(--c-paper-dim);
padding: clamp(4rem, 8vw, 6rem) 0;
position: relative;
}
.lp-band__inner {
max-width: var(--container-narrow);
margin: 0 auto;
padding-inline: var(--pad-x);
text-align: center;
}
.lp-band__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(1.7rem, 3vw + 0.5rem, 2.8rem);
line-height: 1.55;
letter-spacing: 0.08em;
color: var(--c-ink);
word-break: keep-all;
text-wrap: balance;
}
.lp-band__title em {
font-family: var(--f-display);
font-style: italic;
color: var(--c-crimson);
font-weight: 380;
}
.lp-band__title .green {
font-family: var(--f-display);
font-style: italic;
color: var(--c-green);
}
.lp-band__caption {
margin-top: var(--s-5);
font-family: var(--f-jp);
font-weight: 300;
font-size: 1rem;
line-height: 2;
color: var(--c-paper-mute);
max-width: 50ch;
margin-left: auto; margin-right: auto;
}
/* ---------- F. Hero pillars (3 fields) — adjustments for new copy ---------- */
.hero__pillar-en { font-style: italic; font-family: var(--f-display); font-size: 0.7rem; font-weight: 380; letter-spacing: 0.04em; text-transform: none; color: var(--c-paper-mute); }
/* Adjust line-height for hero title with new shorter copy */
.hero__title { line-height: 1.4; }
/* =========================================================
v4.1 — Orphan-character prevention in narrow columns
========================================================= */
/* Apply word-break: keep-all to ALL content inside narrow card components
so katakana/Japanese never breaks mid-word */
.member__role-jp,
.member__expertise,
.member__edu,
.member__edu div,
.method__title-en,
.method__title,
.method__body,
.service__title-en,
.service__title,
.service__body,
.domain__name-en,
.domain__body p,
.insight__title,
.insight__excerpt,
.insight__cat,
.feature__cat,
.feature__excerpt,
.deflist__row dt,
.deflist__row dd,
.brand-atmos__caption,
.brand-atmos__cite,
.cta-final__sub,
.hero__sub,
.phero__sub,
.bignum__title,
.bignum__label,
.lp-band__caption {
word-break: keep-all;
overflow-wrap: anywhere;
text-wrap: pretty;
line-break: strict;
}
/* =========================================================
v4.2 — Palette refresh (off-white) + mobile overflow fixes
Appended rules override earlier values where conflicting.
========================================================= */
/* ---------- A. Refreshed surface palette ---------- */
:root {
--c-paper: #F8F8F7; /* neutral near-white, very faint warmth — no skin tone */
--c-paper-soft: #FFFFFF; /* pure white */
--c-paper-pure: #FFFFFF;
--c-paper-dim: #EEEEEC; /* subtle alternation, neutral */
--c-paper-line: rgba(15, 22, 32, 0.12);
--c-paper-line-2: rgba(15, 22, 32, 0.05);
--c-paper-mute: rgba(15, 22, 32, 0.60);
}
/* ---------- B. Global overflow guards ---------- */
html, body {
overflow-x: hidden;
max-width: 100%;
}
* { min-width: 0; }
img, video { max-width: 100%; height: auto; }
/* ---------- C. Mobile breakpoint — relax keep-all & re-size headings ---------- */
@media (max-width: 720px) {
:root { --pad-x: 1.25rem; }
/* Allow normal Japanese wrapping on mobile (overrides v4.1 keep-all) */
.h-display, .h-section, .hero__title, .phero__title,
.cta-final__title, .brand-atmos__title, .feature__title,
.domain__name-jp, .member__role-jp, .member__expertise,
.service__title, .service__title-en, .service__body,
.method__title, .method__title-en, .method__body,
.domain__body p, .domain__name-en,
.insight__title, .insight__excerpt,
.lede, .hero__sub, .phero__sub,
.deflist__row dd, .brand-atmos__caption,
.bignum__title, .bignum__label, .lp-band__caption,
p, dd, li {
word-break: normal;
overflow-wrap: anywhere;
line-break: auto;
}
/* Disable the .nb (nowrap) utility on narrow viewports so long phrases can wrap */
.nb { white-space: normal; }
/* Re-size hero & headings for narrow screens */
.hero__title {
font-size: clamp(1.85rem, 7vw, 2.6rem);
letter-spacing: 0.04em;
line-height: 1.45;
}
.phero__title {
font-size: clamp(1.7rem, 6.4vw, 2.2rem);
letter-spacing: 0.04em;
line-height: 1.45;
}
.h-section, .h-display {
font-size: clamp(1.5rem, 5.6vw, 2.05rem);
letter-spacing: 0.04em;
line-height: 1.5;
}
.cta-final__title, .brand-atmos__title {
font-size: clamp(1.45rem, 5.2vw, 2rem);
letter-spacing: 0.04em;
line-height: 1.55;
}
.feature__title { font-size: 1.4rem; }
/* Big numbers shrink on mobile */
.bignum__fig { font-size: clamp(2rem, 8vw, 2.8rem); }
.member__initials { font-size: clamp(2.6rem, 10vw, 3.4rem); }
/* Hero pillars compress */
.hero__pillars { gap: 0.6rem; }
.hero__pillar-name { font-size: 0.78rem; letter-spacing: 0.04em; }
.hero__pillar-en { font-size: 0.56rem; letter-spacing: 0.18em; }
/* Stack hero foot on mobile */
.hero__foot {
flex-direction: column;
align-items: stretch;
gap: var(--s-5);
}
.hero__foot .btn { align-self: flex-start; }
/* Container narrowing */
.head-band { gap: var(--s-4); padding-bottom: var(--s-5); margin-bottom: var(--s-6); }
.section, .section--tight { padding-block: clamp(3rem, 7vw, 5rem); }
/* Domain card padding */
.domain__body, .service, .member, .founder { padding: var(--s-5) var(--s-4); }
/* Brand atmosphere wraps text in less padding */
.brand-atmos { min-height: auto; }
.brand-atmos__inner { padding: clamp(2.5rem, 7vw, 4rem) var(--pad-x); gap: var(--s-5); }
.brand-atmos__title { line-height: 1.7; }
/* Map block height */
.mapblock { aspect-ratio: 4/3; }
/* Form selects/inputs full width */
.field input, .field textarea, .field select { width: 100%; max-width: 100%; }
.field-row { grid-template-columns: 1fr; gap: var(--s-4); }
/* Hero credit position adjustment */
.hero__credit { right: var(--s-4); bottom: var(--s-4); font-size: 0.55rem; letter-spacing: 0.22em; }
}
/* ---------- D. Very narrow breakpoint (≤480px) ---------- */
@media (max-width: 480px) {
:root { --pad-x: 1rem; }
.hero__title { font-size: 1.7rem; line-height: 1.5; }
.phero__title { font-size: 1.55rem; line-height: 1.5; }
.h-section, .h-display { font-size: 1.4rem; }
.cta-final__title, .brand-atmos__title { font-size: 1.4rem; }
.hero__pillars { grid-template-columns: 1fr 1fr 1fr; }
.hero__pillar-name { font-size: 0.72rem; }
.hero__pillar-en { font-size: 0.5rem; }
.nav__inner { gap: var(--s-3); }
.brand__name { font-size: 0.95rem; }
.brand__sub { font-size: 0.55rem; letter-spacing: 0.22em; }
}
/* ---------- E. Specific overflow patches ---------- */
/* Make sure hero left column padding shrinks with viewport */
.hero__left {
padding-left: clamp(1.25rem, 5vw, 5rem);
padding-right: clamp(1.25rem, 5vw, 5rem);
}
/* Brand atmosphere on mobile — single column with safe overlay */
@media (max-width: 880px) {
.brand-atmos__inner { grid-template-columns: 1fr; padding-block: clamp(3rem, 8vw, 5rem); }
}
/* Ensure long English brand names don't push layout */
.brand__name, .brand__sub { overflow-wrap: anywhere; }
/* Defs row dd respect container */
.deflist__row dd { overflow-wrap: anywhere; word-break: normal; }
@media (max-width: 700px) { .deflist__row dt { font-size: 0.78rem; } }
/* Filters wrap properly */
.filters { gap: 0.4rem; }
/* Newsletter inline form should stack on small screens */
@media (max-width: 600px) {
form > div[style*="display: flex"] { flex-direction: column !important; align-items: stretch !important; }
}
/* Insight grid reflow */
@media (max-width: 940px) { .insights { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .insights { grid-template-columns: 1fr; } }
/* =========================================================
v4.3 — Punctuation orphan prevention (final)
Override v4.2 mobile disable of .nb — short bound phrases stay together
========================================================= */
/* Re-enable .nb on all viewports — short phrases like 戻る。 should stay bound */
.nb { white-space: nowrap; }
@media (max-width: 720px) {
.nb { white-space: nowrap; } /* explicit re-enable, overrides v4.2 normal */
}
@media (max-width: 480px) {
.nb { white-space: nowrap; }
}
/* Strict line-break globally — punctuation never starts a line */
html, body { line-break: strict; }
/* Reinforce on all heading-class elements */
.h-display, .h-section, .hero__title, .phero__title,
.cta-final__title, .brand-atmos__title, .feature__title,
.lp-band__title {
line-break: strict !important;
}
@media (max-width: 720px) {
.h-display, .h-section, .hero__title, .phero__title,
.cta-final__title, .brand-atmos__title, .feature__title,
.lp-band__title {
line-break: strict !important; /* override v4.2 line-break: auto */
}
}
/* =========================================================
v4.4 — White palette + Immersive Hero (overlap composition)
This block intentionally overrides earlier rules.
========================================================= */
/* ---------- A. Palette: pure white + neutral grays (no warmth) ---------- */
:root {
--c-paper: #FFFFFF; /* PURE WHITE */
--c-paper-soft: #FFFFFF;
--c-paper-pure: #FFFFFF;
--c-paper-dim: #F5F5F5; /* perfectly neutral light gray for alternation */
--c-paper-line: rgba(15, 22, 32, 0.10);
--c-paper-line-2: rgba(15, 22, 32, 0.05);
--c-paper-mute: rgba(15, 22, 32, 0.58);
}
html, body { background: #FFFFFF; }
/* Section background overrides */
.section--paper { background: #FFFFFF; }
.section--white { background: #FFFFFF; }
.section--dim { background: #F5F5F5; }
/* CTA final softer */
.cta-final {
background: #F5F5F5;
border-top: 1px solid var(--c-paper-line-2);
border-bottom: 1px solid var(--c-paper-line-2);
}
/* ---------- B. Nav with constant translucent backdrop ---------- */
.nav {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-bottom: 1px solid var(--c-paper-line-2);
}
.nav.is-scrolled {
background: rgba(255, 255, 255, 0.96);
}
/* ---------- C. NEW HERO — immersive full-bleed image with overlay ---------- */
/* Reset previous hero — start fresh for the new design */
.hero {
position: relative;
min-height: 100svh;
background: var(--c-ink);
overflow: hidden;
isolation: isolate;
display: block;
grid-template-columns: none;
}
.hero__left, .hero__right { display: none; }
/* Background image layer */
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg,
rgba(15, 22, 32, 0.88) 0%,
rgba(15, 22, 32, 0.62) 38%,
rgba(15, 22, 32, 0.32) 70%,
rgba(15, 22, 32, 0.18) 100%),
linear-gradient(180deg,
rgba(15, 22, 32, 0.40) 0%,
rgba(15, 22, 32, 0.10) 30%,
rgba(15, 22, 32, 0.10) 70%,
rgba(15, 22, 32, 0.45) 100%);
}
/* Content positioned over image */
.hero__content {
position: relative;
z-index: 1;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: clamp(7rem, 14vh, 10rem);
padding-bottom: clamp(2rem, 5vh, 4rem);
padding-inline: clamp(1.25rem, 5vw, 5rem);
max-width: 1400px;
margin: 0 auto;
gap: clamp(2rem, 5vh, 4rem);
}
.hero__top { display: flex; }
.hero__eyebrow {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.36em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.78);
display: inline-flex;
align-items: center;
gap: 0.8rem;
}
.hero__eyebrow::before {
content: "";
width: 32px; height: 1px;
background: rgba(255, 255, 255, 0.55);
}
.hero__main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(1.2rem, 3vh, 2rem);
max-width: 28ch;
}
.hero__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2.2rem, 5.5vw + 0.5rem, 5.6rem);
letter-spacing: 0.04em;
line-height: 1.36;
color: #FFFFFF;
text-wrap: balance;
line-break: strict;
}
.hero__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
color: #D9B176; /* warm gold for legibility on dark image */
letter-spacing: -0.005em;
}
.hero__title .green {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
color: #7FB590; /* light green for legibility on dark image */
}
.hero__sub {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1rem, 0.7vw + 0.85rem, 1.2rem);
letter-spacing: 0.06em;
line-height: 1.95;
color: rgba(255, 255, 255, 0.86);
max-width: 36ch;
}
.hero__body {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.95rem;
letter-spacing: 0.04em;
line-height: 2;
color: rgba(255, 255, 255, 0.68);
max-width: 42ch;
}
.hero__bottom {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.20);
padding-top: clamp(1.5rem, 3.5vh, 2.5rem);
}
.hero__pillars {
display: grid;
grid-template-columns: repeat(3, auto);
gap: clamp(1.5rem, 4vw, 2.8rem);
flex: 1;
align-items: end;
}
.hero__pillar { display: grid; gap: 0.35rem; }
.hero__pillar-num {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 1rem;
letter-spacing: 0.04em;
}
.hero__pillar-num--navy { color: #9FBAE2; }
.hero__pillar-num--crimson { color: #E8A8B0; }
.hero__pillar-num--green { color: #A0CFB1; }
.hero__pillar-name {
font-family: var(--f-jp);
font-weight: 500;
font-size: 0.92rem;
letter-spacing: 0.06em;
color: #FFFFFF;
}
.hero__pillar-en {
font-family: var(--f-display);
font-style: italic;
font-size: 0.7rem;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.55);
text-transform: none;
}
/* CTA on dark hero — paper-on-dark (white pill) */
.hero__cta { margin-left: auto; }
.btn--paper {
background: #FFFFFF;
color: var(--c-ink);
border-color: #FFFFFF;
}
.btn--paper:hover {
background: var(--c-paper-dim);
color: var(--c-ink);
border-color: var(--c-paper-dim);
transform: translateY(-2px);
}
/* Lower-right credit */
.hero__credit {
position: absolute;
right: clamp(1rem, 4vw, 3rem);
bottom: clamp(1rem, 3vh, 2rem);
font-family: var(--f-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
z-index: 2;
}
.hero__credit::before {
content: ""; display: inline-block;
width: 18px; height: 1px;
background: rgba(255, 255, 255, 0.45);
margin-right: 0.6rem; transform: translateY(-3px);
}
/* ---------- D. Hero responsive ---------- */
@media (max-width: 880px) {
.hero { min-height: 92svh; }
.hero__main { max-width: 100%; }
.hero__bg::after {
background:
linear-gradient(180deg,
rgba(15, 22, 32, 0.55) 0%,
rgba(15, 22, 32, 0.35) 30%,
rgba(15, 22, 32, 0.45) 70%,
rgba(15, 22, 32, 0.78) 100%);
}
.hero__bg img { object-position: center 25%; }
}
@media (max-width: 720px) {
.hero__bottom {
flex-direction: column;
align-items: stretch;
gap: var(--s-4);
}
.hero__pillars {
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
}
.hero__pillar-name { font-size: 0.78rem; letter-spacing: 0.04em; }
.hero__pillar-en { font-size: 0.55rem; letter-spacing: 0.18em; }
.hero__cta { margin-left: 0; width: 100%; }
.hero__cta .btn {
width: 100%;
justify-content: center;
padding: 1rem 1.5rem;
}
.hero__credit { display: none; }
}
@media (max-width: 480px) {
.hero__title { font-size: clamp(1.85rem, 7vw, 2.4rem); line-height: 1.45; }
.hero__sub { font-size: 0.95rem; }
.hero__body { font-size: 0.88rem; }
.hero__pillar-num { font-size: 0.85rem; }
.hero__pillar-name { font-size: 0.72rem; }
.hero__pillar-en { font-size: 0.5rem; }
}
/* =========================================================
v4.5 — Hero title break-prevention (final)
========================================================= */
/* Remove the catastrophic max-width: 28ch (ch unit = parent font, gave ~224px) */
.hero__main { max-width: none !important; }
/* Reduce hero title max font (5.6rem caused overflow on narrow viewports) */
.hero__title {
font-size: clamp(2rem, 4.4vw + 0.5rem, 4rem) !important;
letter-spacing: 0.04em !important;
line-height: 1.4 !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
line-break: strict !important;
text-wrap: balance;
}
/* Subtitle widths in em (scales with element font, not parent) */
.hero__sub { max-width: 32em; }
.hero__body { max-width: 38em; }
/* Mobile re-tune */
@media (max-width: 720px) {
.hero__title {
font-size: clamp(1.7rem, 6vw + 0.4rem, 2.4rem) !important;
line-height: 1.45 !important;
word-break: keep-all !important;
line-break: strict !important;
}
}
@media (max-width: 480px) {
.hero__title {
font-size: clamp(1.55rem, 5.6vw + 0.4rem, 2rem) !important;
}
}
/* Force keep-all + strict break on ALL major headings even on mobile —
override v4.2 word-break: normal */
@media (max-width: 720px) {
.h-display, .h-section, .hero__title, .phero__title,
.cta-final__title, .brand-atmos__title, .feature__title,
.lp-band__title {
word-break: keep-all !important;
line-break: strict !important;
}
}
/* =========================================================
v4.6 — Final hero & concept rebuild (magazine-style overlap)
========================================================= */
/* ---------- HERO: image with title overlay (poster-style) ---------- */
/* Override all earlier hero rules with high specificity + !important */
section.hero {
position: relative !important;
display: block !important;
min-height: auto !important;
background: #FFFFFF !important;
overflow: hidden;
grid-template-columns: none !important;
padding: 0 !important;
isolation: isolate;
}
.hero__bg, .hero__content, .hero__top, .hero__main, .hero__bottom,
.hero__left, .hero__right, .hero__credit { display: none !important; }
/* Hero media block — image with overlaid eyebrow + title */
.hero__poster {
position: relative;
width: 100%;
height: clamp(80svh, 90svh, 800px);
min-height: 580px;
background: var(--c-ink);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(7rem, 14vh, 10rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 7vh, 5rem);
}
.hero__poster > img.hero__poster-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
z-index: 0;
}
.hero__poster::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(15, 22, 32, 0.55) 0%,
rgba(15, 22, 32, 0.18) 22%,
rgba(15, 22, 32, 0.18) 55%,
rgba(15, 22, 32, 0.85) 100%);
}
.hero__poster > .hero__poster-top,
.hero__poster > .hero__poster-bottom {
position: relative;
z-index: 2;
}
.hero__poster-top { display: flex; }
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-family: var(--f-body);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.hero__eyebrow::before {
content: "";
width: 32px; height: 1px;
background: rgba(255, 255, 255, 0.55);
}
.hero__poster-bottom { max-width: 22em; }
.hero__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 5vw + 0.5rem, 4rem);
letter-spacing: 0.04em;
line-height: 1.42;
color: #FFFFFF;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
line-break: strict !important;
text-wrap: balance;
margin: 0;
}
.hero__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
color: #DDB477;
letter-spacing: -0.005em;
}
.hero__title .green {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
color: #84BC95;
}
.hero__poster-credit {
position: absolute;
right: clamp(1rem, 4vw, 3rem);
top: clamp(7rem, 14vh, 10rem);
font-family: var(--f-body);
font-size: 0.6rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
z-index: 2;
}
/* Below the poster: subtitle, pillars, CTA on white */
.hero__below {
background: #FFFFFF;
padding: clamp(3rem, 6vh, 5rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 5vh, 4rem);
max-width: 1320px;
margin: 0 auto;
width: 100%;
display: grid;
gap: clamp(2rem, 4vh, 2.5rem);
}
.hero__below-sub {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem);
line-height: 2;
letter-spacing: 0.06em;
color: var(--c-ink);
max-width: 30em;
word-break: keep-all;
text-wrap: pretty;
}
.hero__below-body {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.94rem;
line-height: 2;
color: var(--c-paper-mute);
max-width: 38em;
word-break: keep-all;
text-wrap: pretty;
}
.hero__below-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 3vw, 2rem);
padding: clamp(1.5rem, 3vh, 2rem) 0;
border-top: 1px solid var(--c-paper-line);
border-bottom: 1px solid var(--c-paper-line);
}
.hero__below-pillar { display: grid; gap: 0.3rem; }
.hero__below-pillar .num {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 0.95rem;
}
.hero__below-pillar.--navy .num { color: var(--c-navy); }
.hero__below-pillar.--crimson .num { color: var(--c-crimson); }
.hero__below-pillar.--green .num { color: var(--c-green); }
.hero__below-pillar .name {
font-family: var(--f-jp);
font-weight: 500;
font-size: clamp(0.85rem, 1.5vw, 1rem);
letter-spacing: 0.04em;
color: var(--c-ink);
white-space: nowrap;
}
.hero__below-pillar .en {
font-family: var(--f-display);
font-style: italic;
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
}
.hero__below-cta {
justify-self: start;
}
.hero__below-cta .btn {
padding: 1.1rem 2rem;
font-size: 0.9rem;
}
@media (max-width: 720px) {
.hero__poster {
height: clamp(70svh, 75svh, 600px);
min-height: 480px;
padding: clamp(6rem, 12vh, 8rem) 1.25rem clamp(2.5rem, 6vh, 4rem);
}
.hero__poster-credit { display: none; }
.hero__below { padding: 2.5rem 1.25rem 3rem; }
.hero__below-pillars { gap: 0.6rem; }
.hero__below-pillar .name { font-size: 0.78rem; }
.hero__below-pillar .en { font-size: 0.55rem; letter-spacing: 0.18em; }
.hero__below-cta { justify-self: stretch; }
.hero__below-cta .btn {
width: 100%;
justify-content: center;
padding: 1.05rem 1.5rem;
}
}
/* ---------- CONCEPT: 4-verb visual structure ---------- */
.concept-quote {
font-family: var(--f-jp-serif);
font-weight: 400;
font-size: clamp(1.15rem, 1.4vw + 0.85rem, 1.6rem);
line-height: 1.85;
letter-spacing: 0.05em;
color: var(--c-ink);
text-align: center;
margin: clamp(1rem, 4vh, 3rem) auto;
max-width: 26em;
word-break: keep-all;
text-wrap: balance;
}
.concept-quote em {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
color: var(--c-crimson);
}
.concept-quote-cap {
text-align: center;
font-family: var(--f-body);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-paper-mute);
font-weight: 500;
}
.concept-verbs {
list-style: none;
padding: 0;
margin: clamp(2rem, 5vh, 3rem) 0 0;
display: grid;
gap: 0;
border-top: 1px solid var(--c-paper-line);
}
.concept-verb {
display: grid;
grid-template-columns: 80px 1fr;
gap: clamp(1rem, 3vw, 2rem);
align-items: baseline;
padding: clamp(1.2rem, 3vh, 1.8rem) clamp(0.5rem, 2vw, 1rem);
border-bottom: 1px solid var(--c-paper-line);
transition: background-color 200ms ease;
}
.concept-verb:hover { background: #FAFAFA; }
.concept-verb__num {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 1.2rem;
letter-spacing: 0.02em;
color: var(--c-crimson);
}
.concept-verb:nth-child(1) .concept-verb__num { color: var(--c-navy); }
.concept-verb:nth-child(2) .concept-verb__num { color: var(--c-crimson); }
.concept-verb:nth-child(3) .concept-verb__num { color: var(--c-green); }
.concept-verb:nth-child(4) .concept-verb__num { color: var(--c-gold); }
.concept-verb__body { display: grid; gap: 0.4rem; }
.concept-verb__action {
font-family: var(--f-jp);
font-weight: 500;
font-size: clamp(1rem, 1vw + 0.8rem, 1.25rem);
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: keep-all;
}
.concept-verb__action em {
font-family: var(--f-display);
font-style: italic;
color: var(--c-crimson);
font-weight: 380;
}
.concept-verb__detail {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.88rem;
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
word-break: keep-all;
text-wrap: pretty;
}
@media (max-width: 600px) {
.concept-verb { grid-template-columns: 50px 1fr; gap: 0.8rem; padding: 1.2rem 0.25rem; }
.concept-verb__num { font-size: 1rem; }
.concept-verb__action { font-size: 1rem; }
.concept-verb__detail { font-size: 0.82rem; }
}
.concept-close {
font-family: var(--f-jp);
font-weight: 400;
font-size: 1rem;
line-height: 2;
letter-spacing: 0.05em;
color: var(--c-ink);
text-align: center;
max-width: 30em;
margin: clamp(2.5rem, 5vh, 3rem) auto 0;
word-break: keep-all;
text-wrap: pretty;
}
/* GLOBAL: enforce nb */
.nb { white-space: nowrap !important; }
/* =========================================================
v4.6.1 — Mobile nav menu fix: prevent CTA leak
========================================================= */
@media (max-width: 920px) {
.nav__menu {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform var(--t-mid, 350ms),
opacity var(--t-mid, 350ms),
visibility 0s var(--t-mid, 350ms);
}
.nav.is-open .nav__menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: transform var(--t-mid, 350ms),
opacity var(--t-mid, 350ms),
visibility 0s 0s;
}
}
/* =========================================================
v4.7 — Body text wrap policy: pretty (not balance) for natural flow
Headings keep balance; body text uses pretty for natural reading rhythm
========================================================= */
/* Body lede / paragraph wrap: pretty avoids orphans without redistributing aggressively */
.lede,
.head-band__lede,
.bignum__label,
.brand-atmos__caption,
.member__role-jp,
.member__expertise,
.domain__name-en,
.domain__body p,
.method__body,
.service__body,
.insight__excerpt,
.feature__excerpt,
.cta-final__sub,
.hero__below-sub,
.hero__below-body,
.hero__sub,
.hero__body,
.phero__sub,
.concept-quote,
.concept-close,
.lp-band__caption {
text-wrap: pretty !important;
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
}
/* Wider lede max-width on PC for natural multi-line flow (was 60ch — too narrow) */
.head-band__lede {
max-width: 78ch !important;
}
.lede {
max-width: 78ch !important;
}
@media (max-width: 720px) {
.head-band__lede,
.lede {
max-width: 100% !important;
}
}
/* Domain card name-en (e.g. "GX・再生可能エネルギー・エネルギーマネジメント")
should not break unnecessarily on PC */
.domain__name-en,
.member__role-jp {
text-wrap: pretty !important;
}
/* Headings keep balance for visual symmetry */
.h-display, .h-section, .hero__title, .phero__title,
.cta-final__title, .brand-atmos__title, .feature__title,
.lp-band__title {
text-wrap: balance;
}
/* =========================================================
v4.8 — Card label (role-jp / name-en) nowrap fit
========================================================= */
/* Member card role-jp & domain card name-en — force single line on PC,
smaller font + tight letter-spacing so it fits inside narrow columns */
.member__role-jp,
.domain__name-en {
font-size: 0.78rem !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: clip;
}
/* On mobile (single column cards), allow wrap if needed */
@media (max-width: 720px) {
.member__role-jp,
.domain__name-en {
white-space: normal !important;
overflow: visible;
word-break: keep-all;
text-wrap: pretty;
}
}
/* Also tighten the phero__title font cap so long-phrase titles never overflow
the text column in 2-col phero layouts */
.phero__title {
font-size: clamp(1.9rem, 3.4vw + 0.5rem, 3.6rem) !important;
}
@media (max-width: 720px) {
.phero__title {
font-size: clamp(1.6rem, 5.6vw + 0.4rem, 2.2rem) !important;
}
}
/* =========================================================
v4.9 — Natural Japanese flow (keep-all → normal) + left-align unify
keep-all kept phrase-units together but packed them into awkward
short lines (Image 1: 4 lines / Image 3: ragged). normal = natural
line-filling; strict = punctuation never starts a line; pretty =
minimize short final lines.
========================================================= */
.feature__title,
.feature__excerpt,
.insight__title,
.insight__excerpt,
.service__body,
.service__title,
.lede,
.head-band__lede,
.domain__body p,
.domain__name-jp,
.method__body,
.member__expertise,
.deflist__row dd,
.brand-atmos__caption,
.bignum__label,
.cta-final__sub,
.concept-close,
.concept-quote,
.lp-band__caption,
.phero__sub,
.hero__below-sub,
.hero__below-body,
p {
word-break: normal !important;
overflow-wrap: anywhere;
line-break: strict !important;
text-wrap: pretty !important;
}
/* ---------- LEFT-ALIGN unification ----------
Editorial standard: all content left-aligned.
Only the final CTA stays centered (single focal call-to-action). */
.concept-quote,
.concept-quote-cap,
.concept-close {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.lp-band__inner { text-align: left !important; }
.lp-band__title { text-align: left !important; }
.lp-band__caption {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* concept-quote: left-aligned, slightly larger left accent */
.concept-quote {
max-width: 100% !important;
margin-top: clamp(1.5rem, 4vh, 2.5rem) !important;
}
.concept-quote-cap { text-align: left !important; }
/* =========================================================
v5.0 — Title font sizing to fit containers (eliminate orphan wraps)
========================================================= */
/* Feature title: smaller font so each
-segment fits the text column */
.feature__title {
font-size: clamp(1.5rem, 1.4vw + 0.85rem, 2.2rem) !important;
letter-spacing: 0.02em !important;
line-height: 1.5 !important;
}
@media (max-width: 720px) {
/* On mobile, drop the forced
and let it flow naturally */
.feature__title br { display: none; }
.feature__title {
font-size: clamp(1.35rem, 4.4vw + 0.3rem, 1.75rem) !important;
}
}
/* Insight card titles: ensure they fit card width without orphans */
.insight__title {
font-size: clamp(1.05rem, 0.6vw + 0.85rem, 1.25rem) !important;
letter-spacing: 0.02em !important;
line-height: 1.6 !important;
}
/* Phero titles: on mobile, drop forced
for natural flow
(keep on desktop for the intended 2-line poster rhythm) */
@media (max-width: 720px) {
.phero__title br { display: none; }
}
/* h-section headings: on mobile, drop forced
so the long concept
line flows naturally instead of overflowing */
@media (max-width: 720px) {
.h-section br { display: none; }
}
/* =========================================================
v5.1 — Legal pages (privacy / terms / tokushoho) prose
========================================================= */
.legal-hero {
padding: clamp(8rem, 16vh, 11rem) var(--pad-x) clamp(3rem, 6vh, 4rem);
max-width: 1200px;
margin: 0 auto;
border-bottom: 1px solid var(--c-paper-line);
}
.legal-hero__eyebrow {
font-family: var(--f-body);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
display: inline-block;
margin-bottom: var(--s-4);
}
.legal-hero__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(1.8rem, 3vw + 0.5rem, 3rem);
letter-spacing: 0.04em;
line-height: 1.4;
color: var(--c-ink);
}
.legal-hero__note {
margin-top: var(--s-5);
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.9rem;
line-height: 1.9;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
max-width: 60ch;
}
.legal-body {
max-width: 760px;
margin: 0 auto;
padding: clamp(3rem, 7vh, 5rem) var(--pad-x) clamp(5rem, 10vh, 7rem);
}
.legal-section { margin-bottom: clamp(2.5rem, 5vh, 3.5rem); }
.legal-section__h {
font-family: var(--f-jp);
font-weight: 500;
font-size: clamp(1.1rem, 1vw + 0.85rem, 1.35rem);
letter-spacing: 0.04em;
color: var(--c-ink);
padding-bottom: var(--s-3);
margin-bottom: var(--s-4);
border-bottom: 2px solid var(--c-crimson);
display: flex;
align-items: baseline;
gap: 0.7rem;
}
.legal-section__num {
font-family: var(--f-display);
font-style: italic;
font-weight: 380;
font-size: 0.95rem;
color: var(--c-crimson);
}
.legal-section p,
.legal-section li {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.98rem;
line-height: 2;
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: normal;
line-break: strict;
text-wrap: pretty;
}
.legal-section p { margin-bottom: var(--s-4); }
.legal-section ul { padding-left: 1.4em; margin-bottom: var(--s-4); }
.legal-section li { margin-bottom: 0.5rem; }
.legal-dl { display: grid; gap: 0; }
.legal-dl__row {
display: grid;
grid-template-columns: 12em 1fr;
gap: var(--s-4);
padding: var(--s-4) 0;
border-bottom: 1px solid var(--c-paper-line-2);
}
.legal-dl__row dt {
font-family: var(--f-jp);
font-weight: 500;
font-size: 0.92rem;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
}
.legal-dl__row dd {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.98rem;
line-height: 1.9;
letter-spacing: 0.04em;
color: var(--c-ink);
}
@media (max-width: 600px) {
.legal-dl__row { grid-template-columns: 1fr; gap: 0.3rem; }
}
.legal-updated {
margin-top: clamp(2.5rem, 5vh, 3.5rem);
padding-top: var(--s-5);
border-top: 1px solid var(--c-paper-line);
font-family: var(--f-jp);
font-size: 0.85rem;
color: var(--c-paper-mute);
}
/* =========================================================
v5.2 — phero titles: keep words whole, break only at punctuation
(forced
removed from HTML; balance distributes lines)
========================================================= */
.phero__title {
word-break: keep-all !important;
line-break: strict !important;
text-wrap: balance !important;
}
/* =========================================================
v5.3 — Mobile menu iOS containing-block fix
When .nav.is-scrolled has backdrop-filter, it becomes the containing
block for the position:fixed menu, so the menu only covers the bar
height (~60-192px) and page content shows through. Fix: neutralize
the filter while open + give the menu explicit full-viewport size.
========================================================= */
@media (max-width: 920px) {
/* Remove anything that traps a fixed child while the menu is open */
.nav.is-open,
.nav.is-open.is-scrolled {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
border-bottom-color: transparent !important;
z-index: 200;
}
.nav__menu {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw;
height: 100vh;
height: 100dvh; /* dynamic viewport (mobile toolbars) */
background: #FFFFFF !important;
z-index: 150;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
justify-content: center;
}
/* Keep brand + close button visible/tappable above the menu sheet */
.nav__inner { position: relative; z-index: 210; }
.nav.is-open .brand,
.nav.is-open .nav__toggle { position: relative; z-index: 210; }
}
/* =========================================================
v5.4 — Short display lines: keep words whole, break at punctuation.
keep-all = no mid-word CJK breaks; overflow-wrap:anywhere = only break
inside a run as a LAST resort if it would overflow (no clipping).
Long body paragraphs stay word-break:normal (set earlier) to avoid
keep-all overflow on long punctuation-free runs.
========================================================= */
.foot__tagline,
.phero__sub,
.hero__below-sub,
.cta-final__sub,
.lp-band__caption,
.brand-atmos__caption,
.concept-quote,
.concept-close,
.bignum__label,
.domain__name-jp,
.feature__title,
.insight__title,
.service__title {
word-break: keep-all !important;
overflow-wrap: anywhere !important;
line-break: strict !important;
text-wrap: pretty !important;
}
/* =========================================================
v5.5 — Belt-and-suspenders for mobile menu (html.menu-open)
A second, independent mechanism: even if .nav.is-open specificity
is ever overridden, html.menu-open forcibly removes any filter that
would trap the fixed menu, on the nav AND any wrapper.
========================================================= */
html.menu-open .nav,
html.menu-open .nav.is-scrolled,
html.menu-open .nav__inner {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
transform: none !important;
}
html.menu-open .nav { background: transparent !important; }
@media (max-width: 920px) {
html.menu-open .nav__menu {
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100vw !important;
height: 100dvh !important;
background: #FFFFFF !important;
z-index: 150 !important;
}
}
/* =========================================================
v5.6 — Concept verbs redesign: crimson/green accent cards
Less text-heavy: each verb becomes a panel with a colored accent
bar, a large display-italic number, and an accent-colored verb.
Alternating エンジ(crimson) / 緑(green) brand colors.
========================================================= */
.concept-verbs {
list-style: none;
padding: 0;
margin: clamp(2rem, 5vh, 3rem) 0 0;
display: grid;
gap: clamp(0.8rem, 2vh, 1.1rem) !important;
border-top: none !important;
}
.concept-verb {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1rem, 3vw, 1.6rem);
align-items: start;
padding: clamp(1.3rem, 3vh, 1.85rem) clamp(1.2rem, 3.5vw, 1.7rem) !important;
border: 1px solid var(--c-paper-line) !important;
border-left-width: 4px !important;
border-left-style: solid !important;
border-radius: 14px !important;
background: #FFFFFF !important;
position: relative;
transition: transform 220ms ease, box-shadow 220ms ease;
}
/* Alternating crimson / green accents */
.concept-verb:nth-child(odd) { border-left-color: var(--c-crimson) !important; }
.concept-verb:nth-child(even) { border-left-color: var(--c-green) !important; }
.concept-verb:hover {
transform: translateY(-2px);
box-shadow: 0 10px 34px rgba(15, 22, 32, 0.08);
background: #FFFFFF !important;
}
.concept-verb__num {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.9rem, 4.5vw, 2.5rem) !important;
line-height: 0.95;
letter-spacing: 0.01em;
}
.concept-verb:nth-child(odd) .concept-verb__num { color: var(--c-crimson) !important; }
.concept-verb:nth-child(even) .concept-verb__num { color: var(--c-green) !important; }
.concept-verb__body { display: grid; gap: 0.5rem; padding-top: 0.2rem; }
.concept-verb__action {
font-family: var(--f-jp);
font-weight: 500;
font-size: clamp(1.05rem, 1vw + 0.85rem, 1.32rem);
letter-spacing: 0.04em;
color: var(--c-ink);
line-height: 1.6;
word-break: keep-all;
overflow-wrap: anywhere;
}
.concept-verb__action em {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
}
.concept-verb:nth-child(odd) .concept-verb__action em { color: var(--c-crimson) !important; }
.concept-verb:nth-child(even) .concept-verb__action em { color: var(--c-green) !important; }
.concept-verb__detail {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.9rem;
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
word-break: keep-all;
overflow-wrap: anywhere;
text-wrap: pretty;
}
@media (max-width: 600px) {
.concept-verb {
grid-template-columns: auto 1fr !important;
gap: 1rem !important;
padding: 1.25rem 1.2rem !important;
}
.concept-verb__num { font-size: 2rem !important; }
.concept-verb__action { font-size: 1.06rem; }
.concept-verb__detail { font-size: 0.85rem; }
}
/* =========================================================
v5.7 — Concept verb cards: tinted interiors + framed number chips
Each box gets a soft crimson/green fill + the number sits in its own
small white chip framed in the accent color (box-in-box treatment).
========================================================= */
.concept-verb {
align-items: center !important;
gap: clamp(1rem, 3.5vw, 1.5rem) !important;
}
/* Tinted interiors + softly colored frame, alternating crimson / green */
.concept-verb:nth-child(odd) {
background: #FAF3F4 !important; /* soft crimson tint */
border-color: rgba(142, 26, 44, 0.20) !important;
border-left-color: var(--c-crimson) !important;
}
.concept-verb:nth-child(even) {
background: #F0F6F2 !important; /* soft green tint */
border-color: rgba(31, 90, 63, 0.20) !important;
border-left-color: var(--c-green) !important;
}
.concept-verb:hover {
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(15, 22, 32, 0.10);
}
.concept-verb:nth-child(odd):hover { background: #F7ECEE !important; }
.concept-verb:nth-child(even):hover { background: #EAF2EC !important; }
/* Number → framed chip (box inside the box) */
.concept-verb__num {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: clamp(50px, 13vw, 62px);
height: clamp(50px, 13vw, 62px);
padding: 0 0.35rem;
border-radius: 13px;
background: #FFFFFF;
font-size: clamp(1.35rem, 3.6vw, 1.75rem) !important;
line-height: 1;
box-shadow: 0 2px 8px rgba(15, 22, 32, 0.05);
}
.concept-verb:nth-child(odd) .concept-verb__num {
color: var(--c-crimson) !important;
border: 1px solid rgba(142, 26, 44, 0.28);
}
.concept-verb:nth-child(even) .concept-verb__num {
color: var(--c-green) !important;
border: 1px solid rgba(31, 90, 63, 0.28);
}
@media (max-width: 600px) {
.concept-verb__num { min-width: 50px; height: 50px; font-size: 1.4rem !important; }
}
/* =========================================================
v5.8 — Guarantee 句点 never orphans on punctuation-segmented headings.
iOS Safari can let overflow-wrap:anywhere override line-break:strict
when a line is full, splitting off a lone 「。」. These headings break
cleanly at 、。 via keep-all, so anywhere isn't needed — drop it so
strict is always respected.
========================================================= */
.h-section,
.h-display,
.brand-atmos__title,
.cta-final__title,
.lp-band__title,
.phero__title,
.phero__sub,
.hero__below-sub,
.cta-final__sub,
.concept-quote,
.concept-close,
.foot__tagline {
word-break: keep-all !important;
line-break: strict !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
}
/* =========================================================
v5.9 — DEFINITIVE Japanese wrap fix (cross-browser, iOS-safe)
iOS Safari's word-break:keep-all does NOT break at 、。, so keep-all
caused overflow on iOS. word-break:normal wraps naturally and
consistently on ALL browsers; line-break:strict keeps 句読点 off the
line start (no orphan); text-wrap:pretty trims awkward last lines.
This supersedes the keep-all rules in v5.2/v5.4/v5.8 for flowing text.
nb spans (white-space:nowrap) still protect short must-stay phrases.
========================================================= */
.h-section,
.h-display,
.brand-atmos__title,
.cta-final__title,
.lp-band__title,
.lp-band__caption,
.phero__title,
.phero__sub,
.hero__below-sub,
.hero__below-body,
.cta-final__sub,
.concept-quote,
.concept-close,
.foot__tagline,
.feature__title,
.insight__title,
.service__title,
.brand-atmos__caption,
.domain__name-jp {
word-break: normal !important;
line-break: strict !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
text-wrap: pretty !important;
}
/* =========================================================
v6.0 — Neutralize nb inside flowing headings (overflow fix)
The (nowrap) phrases were a keep-all-era workaround.
On narrow screens they can't wrap → overflow. With word-break:normal +
line-break:strict, wrapping is clean and 句点 never orphans, so nb is
unnecessary here. Let these nb spans wrap. (Index hero poster title
keeps its nb — not listed here — since it must stay on its lines.)
========================================================= */
.h-section,
.concept-verb__action,
.concept-verb__detail,
.lp-band__title,
.lp-band__caption,
.phero__title,
.phero__sub,
.brand-atmos__title,
.brand-atmos__caption,
.cta-final__title,
.cta-final__sub,
.feature__title,
.insight__title,
.service__title {
word-break: normal !important;
line-break: strict !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
text-wrap: pretty !important;
}
.h-section .nb,
.concept-verb__action .nb,
.concept-verb__detail .nb,
.lp-band__title .nb,
.lp-band__caption .nb,
.phero__title .nb,
.phero__sub .nb,
.brand-atmos__title .nb,
.brand-atmos__caption .nb,
.cta-final__title .nb,
.cta-final__sub .nb,
.feature__title .nb,
.insight__title .nb,
.service__title .nb {
white-space: normal !important;
}
/* =========================================================
v7.0 — Brand Re-definition (Intellectual Renewal Platform)
New sections: why-yys, three-perspectives, renewal-journey,
collaboration-grid, fs-theme-grid, member-deep card, etc.
Inherits all color/font/spacing variables from earlier versions.
========================================================= */
/* ---------- WHY YYS section ---------- */
.why-yys {
padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
background: #FFFFFF;
}
.why-yys__inner {
max-width: 760px;
margin: 0 auto;
}
.why-yys__kicker {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
margin-bottom: var(--s-5);
display: block;
}
.why-yys__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 3.4rem);
letter-spacing: 0.04em;
line-height: 1.5;
color: var(--c-ink);
margin-bottom: var(--s-6);
word-break: normal;
line-break: strict;
text-wrap: pretty;
}
.why-yys__body {
font-family: var(--f-jp-serif);
font-weight: 300;
font-size: clamp(1rem, 1vw + 0.85rem, 1.2rem);
line-height: 2.05;
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: normal;
line-break: strict;
text-wrap: pretty;
}
.why-yys__body p { margin-bottom: var(--s-5); }
.why-yys__body strong {
font-weight: 500;
background: linear-gradient(transparent 65%, rgba(142,26,44,0.12) 65%);
padding: 0 0.1em;
}
/* ---------- THREE PERSPECTIVES ---------- */
.three-perspectives {
padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
background: #FFFFFF;
border-top: 1px solid var(--c-paper-line);
}
.three-perspectives__inner { max-width: 1280px; margin: 0 auto; }
.three-perspectives__head { max-width: 720px; margin: 0 auto var(--s-8); text-align: left; }
.three-perspectives__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 3.2rem);
letter-spacing: 0.04em;
line-height: 1.45;
color: var(--c-ink);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.three-perspectives__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
color: var(--c-crimson);
}
.tp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.2rem, 2.5vw, 1.8rem);
margin-top: var(--s-6);
}
@media (max-width: 900px) { .tp-grid { grid-template-columns: 1fr; gap: 1.2rem; } }
.tp-card {
padding: clamp(1.6rem, 3vw, 2.2rem);
border: 1px solid var(--c-paper-line);
border-radius: 14px;
background: #FFFFFF;
position: relative;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.tp-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 3px; border-radius: 14px 14px 0 0;
}
.tp-card--01 { background: #F2F4F8; }
.tp-card--01::before { background: var(--c-navy); }
.tp-card--01 .tp-card__initials { color: var(--c-navy); }
.tp-card--01 .tp-card__field { color: var(--c-navy); }
.tp-card--02 { background: #FAF3F4; }
.tp-card--02::before { background: var(--c-crimson); }
.tp-card--02 .tp-card__initials { color: var(--c-crimson); }
.tp-card--02 .tp-card__field { color: var(--c-crimson); }
.tp-card--03 { background: #F0F6F2; }
.tp-card--03::before { background: var(--c-green); }
.tp-card--03 .tp-card__initials { color: var(--c-green); }
.tp-card--03 .tp-card__field { color: var(--c-green); }
.tp-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(15,22,32,0.08); }
.tp-card__initials {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2rem, 3.5vw, 2.6rem);
letter-spacing: 0.02em;
margin-bottom: var(--s-3);
line-height: 1;
}
.tp-card__field {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 1.05rem;
letter-spacing: 0.02em;
margin-bottom: var(--s-2);
}
.tp-card__field-jp {
font-family: var(--f-jp);
font-weight: 400;
font-size: 0.88rem;
letter-spacing: 0.06em;
color: var(--c-paper-mute);
margin-bottom: var(--s-5);
padding-bottom: var(--s-4);
border-bottom: 1px solid rgba(15,22,32,0.08);
}
.tp-card__question {
font-family: var(--f-jp);
font-weight: 300;
font-size: 1rem;
line-height: 1.95;
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: normal; line-break: strict; text-wrap: pretty;
}
/* ---------- RENEWAL JOURNEY (5 stages) ---------- */
.renewal-journey {
padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
background: var(--c-paper-dim);
}
.renewal-journey__inner { max-width: 1000px; margin: 0 auto; }
.renewal-journey__head { max-width: 720px; margin: 0 auto var(--s-7); }
.renewal-journey__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 3.2rem);
letter-spacing: 0.04em;
line-height: 1.5;
word-break: normal; line-break: strict; text-wrap: pretty;
}
.rj-steps { display: grid; gap: 0; margin-top: var(--s-6); }
.rj-step {
display: grid;
grid-template-columns: auto auto 1fr;
gap: clamp(1.2rem, 3vw, 2rem);
align-items: center;
padding: clamp(1.4rem, 3vh, 1.8rem) 0;
border-bottom: 1px solid rgba(15,22,32,0.08);
position: relative;
}
.rj-step:last-child { border-bottom: none; }
.rj-step__num {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--c-crimson);
min-width: 2.5em;
}
.rj-step__en {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
color: var(--c-ink);
min-width: 7em;
}
.rj-step__jp-desc {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(0.95rem, 1vw + 0.7rem, 1.1rem);
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.rj-step__jp-desc strong { color: var(--c-ink); font-weight: 500; }
@media (max-width: 720px) {
.rj-step { grid-template-columns: auto 1fr; row-gap: 0.3rem; padding: 1.2rem 0; }
.rj-step__en { grid-column: 2; min-width: 0; }
.rj-step__jp-desc { grid-column: 1 / -1; }
}
/* ---------- COLLABORATION grid (7 items) ---------- */
.collab {
padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
background: #FFFFFF;
}
.collab__inner { max-width: 1280px; margin: 0 auto; }
.collab__head { max-width: 760px; margin: 0 auto var(--s-7); }
.collab__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 3.2rem);
letter-spacing: 0.04em;
line-height: 1.5;
word-break: normal; line-break: strict; text-wrap: pretty;
}
.collab__lede {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1rem, 1vw + 0.85rem, 1.15rem);
line-height: 1.95;
color: var(--c-paper-mute);
margin-top: var(--s-4);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.collab-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (max-width: 720px) { .collab-grid { grid-template-columns: 1fr; } }
.collab-item {
padding: clamp(1.4rem, 3vw, 1.9rem);
border: 1px solid var(--c-paper-line);
border-radius: 14px;
background: #FFFFFF;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.collab-item:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(15,22,32,0.07);
border-color: rgba(142,26,44,0.25);
}
.collab-item__num {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 0.9rem;
color: var(--c-crimson);
letter-spacing: 0.04em;
display: block;
margin-bottom: var(--s-3);
}
.collab-item__title {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.15rem, 1.5vw, 1.35rem);
color: var(--c-ink);
margin-bottom: var(--s-2);
letter-spacing: 0.01em;
}
.collab-item__title-jp {
font-family: var(--f-jp);
font-weight: 400;
font-size: 0.85rem;
letter-spacing: 0.08em;
color: var(--c-paper-mute);
margin-bottom: var(--s-3);
}
.collab-item__body {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.95rem;
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.collab__close {
margin-top: var(--s-7);
text-align: center;
font-family: var(--f-jp);
font-weight: 300;
font-size: 1rem;
line-height: 1.9;
color: var(--c-paper-mute);
}
/* ---------- FUTURE SESSION page-specific ---------- */
.fs-hero {
position: relative;
min-height: 76vh;
display: flex; align-items: center;
background: linear-gradient(180deg, #0F2545 0%, #0F1620 100%);
color: #FFFFFF;
overflow: hidden;
padding: clamp(7rem, 16vh, 11rem) var(--pad-x) clamp(4rem, 9vh, 6rem);
}
.fs-hero::before {
content: "";
position: absolute; inset: 0;
background: url('../images/yys-executive-lounge-discussion.jpg') center/cover no-repeat;
opacity: 0.28;
filter: grayscale(0.4) contrast(1.05);
}
.fs-hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(15,37,69,0.65) 0%, rgba(15,22,32,0.55) 60%, rgba(31,90,63,0.35) 100%);
}
.fs-hero__inner {
position: relative; z-index: 2;
max-width: 1100px; margin: 0 auto; width: 100%;
}
.fs-hero__kicker {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: #DDB477;
display: inline-block;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(221,180,119,0.4);
margin-bottom: var(--s-6);
}
.fs-hero__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2.4rem, 5.5vw + 0.5rem, 4.6rem);
letter-spacing: 0.05em;
line-height: 1.4;
color: #FFFFFF;
margin-bottom: var(--s-5);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.fs-hero__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
color: #84BC95;
}
.fs-hero__sub {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1.05rem, 1.2vw + 0.7rem, 1.25rem);
line-height: 1.95;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.85);
max-width: 56ch;
margin-bottom: var(--s-7);
}
.fs-section {
padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
}
.fs-section--tint { background: var(--c-paper-dim); }
.fs-section--dark { background: #0F1620; color: #FFFFFF; }
.fs-section__inner { max-width: 800px; margin: 0 auto; }
.fs-section__inner--wide { max-width: 1200px; margin: 0 auto; }
.fs-section__kicker {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
display: block;
margin-bottom: var(--s-5);
}
.fs-section--dark .fs-section__kicker { color: #DDB477; }
.fs-section__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 3.4rem);
letter-spacing: 0.04em;
line-height: 1.45;
margin-bottom: var(--s-6);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.fs-section__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
color: var(--c-green);
}
.fs-section--dark .fs-section__title em { color: #84BC95; }
.fs-section__body {
font-family: var(--f-jp-serif);
font-weight: 300;
font-size: clamp(1rem, 1vw + 0.85rem, 1.18rem);
line-height: 2.05;
letter-spacing: 0.04em;
word-break: normal; line-break: strict; text-wrap: pretty;
}
.fs-section__body p { margin-bottom: var(--s-5); }
.fs-section__body strong { font-weight: 500; }
.fs-quote {
margin: var(--s-7) 0;
padding: clamp(1.6rem, 3vw, 2.2rem);
background: #F0F6F2;
border-left: 4px solid var(--c-green);
border-radius: 0 10px 10px 0;
font-family: var(--f-jp);
font-weight: 400;
font-size: 1.05rem;
line-height: 1.9;
letter-spacing: 0.04em;
color: var(--c-ink);
}
/* Themes grid */
.fs-themes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.9rem, 2vw, 1.3rem);
margin-top: var(--s-6);
}
@media (max-width: 900px) { .fs-themes { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .fs-themes { grid-template-columns: 1fr; } }
.fs-theme {
padding: 1.4rem 1.2rem;
background: #FFFFFF;
border: 1px solid var(--c-paper-line);
border-radius: 12px;
text-align: center;
font-family: var(--f-jp);
font-weight: 400;
font-size: 0.98rem;
letter-spacing: 0.06em;
color: var(--c-ink);
transition: transform 220ms ease, border-color 220ms ease;
}
.fs-theme:hover { transform: translateY(-2px); border-color: var(--c-crimson); }
.fs-theme__num {
display: block;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 0.85rem;
color: var(--c-crimson);
margin-bottom: 0.4rem;
}
/* Who joins list */
.fs-who { display: grid; gap: 0; margin-top: var(--s-6); }
.fs-who__item {
padding: 1.3rem 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
border-bottom: 1px solid rgba(15,22,32,0.1);
font-family: var(--f-jp);
font-weight: 300;
font-size: 1.02rem;
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.fs-who__item::before {
content: "─";
color: var(--c-crimson);
font-weight: 400;
}
/* Formats cards */
.fs-formats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.5vw, 1.5rem);
margin-top: var(--s-6);
}
@media (max-width: 760px) { .fs-formats { grid-template-columns: 1fr; } }
.fs-format {
padding: 1.8rem 1.5rem;
background: #FFFFFF;
border: 1px solid var(--c-paper-line);
border-radius: 14px;
border-top: 3px solid var(--c-green);
}
.fs-format__name {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 1.25rem;
color: var(--c-ink);
margin-bottom: 0.3rem;
}
.fs-format__meta {
font-family: var(--f-body);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-green);
margin-bottom: var(--s-3);
}
.fs-format__desc {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.92rem;
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
word-break: normal; line-break: strict; text-wrap: pretty;
}
/* Manifesto-style dark section */
.fs-manifesto {
padding: clamp(6rem, 14vh, 10rem) var(--pad-x);
background: #0F1620;
color: #FFFFFF;
position: relative;
overflow: hidden;
}
.fs-manifesto::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at top right, rgba(31,90,63,0.18), transparent 60%),
radial-gradient(ellipse at bottom left, rgba(142,26,44,0.15), transparent 60%);
}
.fs-manifesto__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.fs-manifesto__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2.2rem, 4.5vw + 0.5rem, 3.8rem);
letter-spacing: 0.06em;
line-height: 1.55;
color: #FFFFFF;
margin-bottom: var(--s-7);
}
.fs-manifesto__body {
font-family: var(--f-jp-serif);
font-weight: 300;
font-size: clamp(1.05rem, 1.2vw + 0.85rem, 1.25rem);
line-height: 2.1;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.88);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.fs-manifesto__body p { margin-bottom: var(--s-5); }
.fs-manifesto__body strong { color: #DDB477; font-weight: 400; }
.fs-manifesto__sig {
margin-top: var(--s-7);
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 0.95rem;
color: #DDB477;
letter-spacing: 0.04em;
}
/* ---------- MEMBERS deep section ---------- */
.mem-hero {
padding: clamp(8rem, 16vh, 11rem) var(--pad-x) clamp(3rem, 6vh, 4rem);
background: #FFFFFF;
border-bottom: 1px solid var(--c-paper-line);
}
.mem-hero__inner { max-width: 900px; margin: 0 auto; }
.mem-hero__kicker {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
display: block;
margin-bottom: var(--s-5);
}
.mem-hero__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2.2rem, 5vw, 4rem);
letter-spacing: 0.04em;
line-height: 1.3;
margin-bottom: var(--s-5);
}
.mem-hero__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
}
.mem-hero__sub {
font-family: var(--f-jp-serif);
font-weight: 300;
font-size: clamp(1rem, 1vw + 0.8rem, 1.15rem);
line-height: 1.95;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
}
.mem-deep {
padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
border-bottom: 1px solid var(--c-paper-line);
}
.mem-deep--01 { background: #F2F4F8; }
.mem-deep--02 { background: #FAF3F4; }
.mem-deep--03 { background: #F0F6F2; }
.mem-deep__inner { max-width: 880px; margin: 0 auto; }
.mem-deep__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.mem-deep__initials {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(3rem, 7vw, 5rem);
line-height: 0.95;
letter-spacing: 0.02em;
}
.mem-deep--01 .mem-deep__initials { color: var(--c-navy); }
.mem-deep--02 .mem-deep__initials { color: var(--c-crimson); }
.mem-deep--03 .mem-deep__initials { color: var(--c-green); }
.mem-deep__field {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
letter-spacing: 0.02em;
}
.mem-deep--01 .mem-deep__field { color: var(--c-navy); }
.mem-deep--02 .mem-deep__field { color: var(--c-crimson); }
.mem-deep--03 .mem-deep__field { color: var(--c-green); }
.mem-deep__field-jp {
font-family: var(--f-jp);
font-weight: 400;
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--c-paper-mute);
}
.mem-deep__edu {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.85rem;
line-height: 1.9;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
padding-top: var(--s-3);
border-top: 1px solid rgba(15,22,32,0.1);
}
.mem-block { margin-bottom: var(--s-7); }
.mem-block:last-child { margin-bottom: 0; }
.mem-block__label {
font-family: var(--f-body);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-paper-mute);
display: block;
margin-bottom: var(--s-4);
}
.mem-deep--01 .mem-block__label { color: var(--c-navy); }
.mem-deep--02 .mem-block__label { color: var(--c-crimson); }
.mem-deep--03 .mem-block__label { color: var(--c-green); }
.mem-block__body {
font-family: var(--f-jp-serif);
font-weight: 300;
font-size: clamp(1rem, 1vw + 0.85rem, 1.15rem);
line-height: 2.0;
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.mem-block__body p { margin-bottom: var(--s-4); }
.mem-block__body strong { font-weight: 500; }
.mem-block__belief {
font-family: var(--f-jp);
font-weight: 400;
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-ink);
padding: var(--s-5) 0;
border-left: 3px solid;
padding-left: 1.2rem;
margin: var(--s-5) 0;
background: rgba(255,255,255,0.5);
border-radius: 0 8px 8px 0;
}
.mem-deep--01 .mem-block__belief { border-left-color: var(--c-navy); }
.mem-deep--02 .mem-block__belief { border-left-color: var(--c-crimson); }
.mem-deep--03 .mem-block__belief { border-left-color: var(--c-green); }
.mem-block__expertise { list-style: none; padding: 0; }
.mem-block__expertise li {
font-family: var(--f-jp);
font-weight: 400;
font-size: 1rem;
line-height: 1.85;
letter-spacing: 0.04em;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(15,22,32,0.08);
position: relative;
padding-left: 1.4rem;
}
.mem-block__expertise li::before {
content: "□";
position: absolute; left: 0;
font-size: 0.9rem;
top: 0.85rem;
}
.mem-deep--01 .mem-block__expertise li::before { color: var(--c-navy); }
.mem-deep--02 .mem-block__expertise li::before { color: var(--c-crimson); }
.mem-deep--03 .mem-block__expertise li::before { color: var(--c-green); }
.mem-block__line {
text-align: center;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.3rem, 2vw + 0.5rem, 1.8rem);
line-height: 1.6;
letter-spacing: 0.02em;
color: var(--c-ink);
padding: var(--s-6) 0;
margin-top: var(--s-6);
border-top: 1px solid rgba(15,22,32,0.15);
border-bottom: 1px solid rgba(15,22,32,0.15);
}
/* ---------- TOGETHER section (members page closing) ---------- */
.together {
padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
background: #FFFFFF;
}
.together__inner { max-width: 760px; margin: 0 auto; }
.together__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
letter-spacing: 0.04em;
line-height: 1.5;
margin-bottom: var(--s-6);
word-break: normal; line-break: strict;
}
.together__body {
font-family: var(--f-jp-serif);
font-weight: 300;
font-size: clamp(1rem, 1vw + 0.85rem, 1.18rem);
line-height: 2.05;
letter-spacing: 0.04em;
word-break: normal; line-break: strict; text-wrap: pretty;
}
.together__body p { margin-bottom: var(--s-5); }
.together__body strong { font-weight: 500; }
/* ---------- INSIGHTS category filter ---------- */
.insights-cat-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0 var(--pad-x);
max-width: 1200px;
margin: 0 auto var(--s-6);
}
.insights-cat-bar__btn {
padding: 0.5rem 1rem;
border: 1px solid var(--c-paper-line);
border-radius: 999px;
background: #FFFFFF;
color: var(--c-ink);
font-family: var(--f-body);
font-size: 0.82rem;
letter-spacing: 0.06em;
cursor: pointer;
transition: all 200ms ease;
}
.insights-cat-bar__btn:hover { border-color: var(--c-crimson); color: var(--c-crimson); }
.insights-cat-bar__btn.is-active { background: var(--c-crimson); color: #FFFFFF; border-color: var(--c-crimson); }
/* ---------- NEWSLETTER box (insights) ---------- */
.newsletter-box {
margin: clamp(3rem, 7vh, 5rem) auto;
padding: clamp(2rem, 4vw, 3rem);
max-width: 760px;
background: #FAF3F4;
border-radius: 14px;
border: 1px solid rgba(142,26,44,0.2);
text-align: center;
}
.newsletter-box__title {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
margin-bottom: var(--s-3);
}
.newsletter-box__lede {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.95rem;
line-height: 1.85;
color: var(--c-paper-mute);
margin-bottom: var(--s-5);
}
.newsletter-box__form {
display: flex;
gap: 0.5rem;
max-width: 400px;
margin: 0 auto;
}
@media (max-width: 480px) { .newsletter-box__form { flex-direction: column; } }
.newsletter-box__form input {
flex: 1;
padding: 0.85rem 1rem;
border: 1px solid var(--c-paper-line);
border-radius: 8px;
font-family: var(--f-body);
font-size: 0.95rem;
}
.newsletter-box__form button {
padding: 0.85rem 1.6rem;
background: var(--c-crimson);
color: #FFFFFF;
border: none;
border-radius: 8px;
font-family: var(--f-body);
font-size: 0.9rem;
letter-spacing: 0.06em;
cursor: pointer;
transition: opacity 200ms ease;
}
.newsletter-box__form button:hover { opacity: 0.88; }
/* ---------- Final CTA refinement (used across many pages) ---------- */
.cta-final--invitation {
background: var(--c-paper-dim);
}
.cta-final--invitation .cta-final__title em {
color: var(--c-crimson);
}
/* ---------- Anchor target offset (for scroll-spy / in-page links) ---------- */
[id] { scroll-margin-top: 80px; }
/* v7.0 — Mobile-specific overrides for HOME */
@media (max-width: 720px) {
.insights-sub-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
/* Hero CTA stacking on small mobile */
.hero__below-cta .btn { width: 100%; justify-content: center; }
.hero__below-cta { flex-direction: column; gap: 0.6rem; }
}
/* ============================================================ */
/* v8.0 — IMAGE-DRIVEN LAYOUT SYSTEM */
/* 「読ませる」から「体験させる」へ。画像投入・左右交互・余白拡大 */
/* ============================================================ */
/* ---------- Section rhythm: larger breathing room around image sections ---------- */
.section-air { padding-block: clamp(5.5rem, 14vh, 11rem); }
/* ---------- Shared figure frame (image with caption / intent) ---------- */
.figure-frame {
position: relative;
border-radius: 16px;
overflow: hidden;
background: var(--c-paper-dim);
}
.figure-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.figure-frame__intent {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: clamp(1.1rem, 3vw, 1.8rem);
background: linear-gradient(to top, rgba(15,22,32,0.72) 0%, rgba(15,22,32,0.0) 100%);
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.82rem;
letter-spacing: 0.06em;
line-height: 1.7;
color: rgba(244,242,236,0.94);
word-break: normal; line-break: strict; text-wrap: pretty;
}
/* ---------- SPLIT: alternating image / text (媒体オブジェクト) ---------- */
.split {
padding: clamp(5.5rem, 14vh, 11rem) var(--pad-x);
}
.split__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.split__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(1.8rem, 1.8vw + 0.7rem, 2.4rem);
letter-spacing: 0.03em;
line-height: 1.55;
margin-bottom: var(--s-5);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.split__title em {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
}
.split__media .figure-frame { aspect-ratio: 4 / 5; width: 100%; }
.split__body { min-width: 0; }
.split--reverse .split__media { order: 2; }
.split--reverse .split__body { order: 1; }
.split__kicker {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
display: block;
margin-bottom: var(--s-5);
}
.split--dark { background: #0F1620; color: #FFFFFF; }
.split--green { background: var(--c-green); color: #FFFFFF; }
.split--green .split__kicker { color: #BFE3CC; }
.split--dark .split__kicker { color: #DDB477; }
@media (max-width: 820px) {
.split__inner { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
.split--reverse .split__media { order: 1; }
.split--reverse .split__body { order: 2; }
.split__media .figure-frame { aspect-ratio: 16 / 10; }
}
/* ---------- WHY YYS: 対句を2列の対比カードに ---------- */
.why-contrast {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 2.5vw, 1.5rem);
margin-top: var(--s-7);
}
@media (max-width: 640px) { .why-contrast { grid-template-columns: 1fr; } }
.why-card {
padding: clamp(1.6rem, 3.5vw, 2.2rem);
border-radius: 14px;
background: var(--c-paper-soft);
border: 1px solid var(--c-paper-line-2);
}
.why-card__lead {
font-family: var(--f-jp);
font-weight: 500;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
letter-spacing: 0.04em;
line-height: 1.7;
color: var(--c-ink);
margin-bottom: var(--s-3);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.why-card__sub {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(0.92rem, 1vw + 0.7rem, 1.02rem);
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.why-yys__close {
margin-top: var(--s-7);
font-family: var(--f-jp-serif);
font-weight: 300;
font-size: clamp(1.05rem, 1.4vw + 0.7rem, 1.3rem);
line-height: 2;
letter-spacing: 0.04em;
color: var(--c-ink);
word-break: normal; line-break: strict; text-wrap: pretty;
}
.why-yys__close strong { color: var(--c-crimson); font-weight: 500; }
/* ---------- Future Session: 特徴を吹き出しカード3つに ---------- */
.fs-points {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: var(--s-6);
}
.fs-point {
display: grid;
grid-template-columns: 7.5em 1fr;
align-items: baseline;
gap: 1rem;
padding: 0.85rem 1.1rem;
border-radius: 12px;
background: rgba(244,242,236,0.08);
border: 1px solid rgba(191,227,204,0.28);
}
.fs-point__label {
font-family: var(--f-body);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: #BFE3CC;
margin: 0;
}
.fs-point__text {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.95rem;
line-height: 1.7;
letter-spacing: 0.04em;
color: rgba(244,242,236,0.92);
margin: 0;
word-break: normal; line-break: strict; text-wrap: pretty;
}
@media (max-width: 520px) {
.fs-point { grid-template-columns: 1fr; gap: 0.2rem; }
}
/* ---------- Fields: image cards (既存3画像を投入) ---------- */
.fields-img-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.5vw, 1.6rem);
margin-top: var(--s-6);
}
@media (max-width: 820px) { .fields-img-grid { grid-template-columns: 1fr; } }
.field-card {
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
border: 1px solid var(--c-paper-line-2);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.field-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15,22,32,0.08); }
.field-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.field-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field-card__body { padding: clamp(1.3rem, 2.6vw, 1.7rem); }
.field-card__en {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
margin-bottom: var(--s-2);
}
.field-card--01 .field-card__en { color: var(--c-navy); }
.field-card--02 .field-card__en { color: var(--c-crimson); }
.field-card--03 .field-card__en { color: var(--c-green); }
.field-card__jp {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.88rem;
letter-spacing: 0.06em;
line-height: 1.7;
color: var(--c-paper-mute);
word-break: normal; line-break: strict; text-wrap: pretty;
}
/* ---------- Collaboration: 主役3つ + 続きを読む ---------- */
.collab-grid--featured { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .collab-grid--featured { grid-template-columns: 1fr; } }
.collab-item--star {
border-color: rgba(31,90,63,0.30);
background: #F0F6F2;
}
.collab-item__star-tag {
display: inline-block;
font-family: var(--f-body);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-green);
background: rgba(31,90,63,0.10);
padding: 0.25em 0.7em;
border-radius: 999px;
margin-bottom: var(--s-3);
}
.collab-more {
margin-top: var(--s-7);
text-align: center;
}
.collab-more__hint {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.92rem;
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--c-paper-mute);
margin-bottom: var(--s-4);
word-break: normal; line-break: strict; text-wrap: pretty;
}
/* ---------- Final CTA: 全幅抽象アート背景 ---------- */
.cta-final--image {
position: relative;
overflow: hidden;
background: #0F1620;
}
.cta-final--image .cta-final__bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.34;
z-index: 0;
}
.cta-final--image .cta-final__inner { position: relative; z-index: 1; }
.cta-final--image .cta-final__title { color: #FFFFFF; }
.cta-final--image .cta-final__title em { color: #E2A8B0; }
.cta-final--image .cta-final__sub { color: rgba(244,242,236,0.82); }
/* v8.0 — Renewal Journey head: stack image above text on mobile */
@media (max-width: 720px) {
.renewal-journey__head[style] {
grid-template-columns: 1fr !important;
}
.renewal-journey__head .figure-frame { aspect-ratio: 16/10 !important; }
}
/* ============================================================ */
/* v9.0 — JAPANESE LINE-BREAK CORRECTNESS (kinsoku) */
/* 不自然な改行（語中改行・句読点の行頭）を全廃する決定版。 */
/* これまでの overflow-wrap:anywhere / line-break:auto を上書き。 */
/* ============================================================ */
/* 1) 基本原則：日本語は文節・助詞境界でのみ折り返し、語中では折らない。
句読点・閉じ括弧は禁則処理で行頭に来させない。
overflow-wrap:anywhere は URL等の本当に切れない文字列だけに限定する。 */
html, body {
word-break: normal;
overflow-wrap: normal;
line-break: strict;
text-wrap: pretty;
}
/* あらゆる本文・見出し・カード内テキストに kinsoku を徹底（モバイル含む全幅）。
!important で過去レイヤーの anywhere/auto を完全に無効化する。 */
p, li, dd, dt, h1, h2, h3, h4, h5, h6,
span, a, em, strong, blockquote, figcaption,
.lede, .section__lead, .section-jp,
.hero__title, .hero__sub, .hero__below-sub, .hero__below-body,
.phero__title, .phero__sub,
.why-yys__title, .why-yys__body, .why-card__lead, .why-card__sub, .why-yys__close,
.three-perspectives__title, .tp-card__field, .tp-card__field-jp, .tp-card__question,
.split__title, .fs-section__title, .fs-section__body, .fs-point__text,
.renewal-journey__title, .rj-step__jp-desc,
.collab__title, .collab__lede, .collab-item__title-jp, .collab-item__body, .collab-more__hint, .collab__close,
.field-card__jp, .figure-frame__intent,
.mem-block__belief, .mem-block__body, .mem-block__label,
.method__title, .method__body, .service__title, .service__body,
.domain__body p, .insight__title, .insight__excerpt,
.cta-final__title, .cta-final__sub,
.deflist__row dt, .deflist__row dd,
.brand-atmos__title, .brand-atmos__caption, .feature__title, .feature__excerpt,
.bignum__title, .bignum__label, .lp-band__caption {
word-break: normal !important;
overflow-wrap: normal !important;
line-break: strict !important;
text-wrap: pretty !important;
}
/* 2) モバイルでも auto に戻さない（過去の @media 720px を打ち消す）。 */
@media (max-width: 720px) {
p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, a, em, strong,
.lede, .hero__title, .hero__sub, .phero__title, .phero__sub,
.why-yys__title, .three-perspectives__title, .split__title,
.fs-section__title, .fs-section__body, .renewal-journey__title,
.collab__title, .cta-final__title, .cta-final__sub,
.deflist__row dd, .mem-block__belief, .mem-block__body {
word-break: normal !important;
overflow-wrap: normal !important;
line-break: strict !important;
text-wrap: pretty !important;
}
}
/* 3) 例外：URL・メール・英数字の長い連続だけは anywhere を許可（はみ出し防止）。 */
.allow-break, .url, code, .deflist__row dd a[href^="http"] {
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* 4) 句読点・小書き・閉じ括弧で始まる行を禁止（hanging-punctuation 対応ブラウザ）。 */
@supports (hanging-punctuation: allow-end) {
p, dd, li, .fs-section__body, .why-card__sub, .mem-block__body {
hanging-punctuation: allow-end;
}
}
/* 5) 中黒区切りの箇条書きは「・項目」を1単位として折り返さない。 */
.jp-bullets { display: flex; flex-direction: column; gap: 0.55rem; }
.jp-bullets .jp-bullet {
display: block;
padding-left: 1.2em;
text-indent: -1.2em;
word-break: normal;
overflow-wrap: normal;
line-break: strict;
text-wrap: pretty;
}
/* 6) company.html の定義リストを正しい deflist に統一（インライン 10em グリッド廃止）。 */
.spec-list { border-top: 1px solid var(--c-paper-line); }
.spec-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--s-5);
padding-block: var(--s-5);
border-bottom: 1px solid var(--c-paper-line-2);
font-family: var(--f-jp);
}
.spec-row dt {
font-size: 0.78rem;
letter-spacing: 0.16em;
font-weight: 600;
color: var(--c-crimson);
padding-top: 0.3rem;
}
.spec-row dd {
font-size: 1rem;
line-height: 1.95;
color: var(--c-ink);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
@media (max-width: 720px) {
.spec-row { grid-template-columns: 1fr; gap: var(--s-2); padding-block: var(--s-5); }
.spec-row dt { font-size: 0.72rem; }
}
/* ============================================================ */
/* v9.0 — DESIGN ELEVATION: section ornament, kicker motion, */
/* title accents, scroll-reveal. 上級デザイナー仕様の質感付与。 */
/* ============================================================ */
/* --- A. Kicker: 引かれていく一本線 + 小さなえんじの点 --- */
.why-yys__kicker,
.split__kicker,
.fs-section__kicker {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding-left: 0;
}
/* the "───" text prefix already exists in markup; add an animated draw line after */
.why-yys__kicker::after,
.split__kicker::after,
.fs-section__kicker::after {
content: "";
display: inline-block;
width: 0;
height: 1px;
background: currentColor;
opacity: 0.5;
transition: width 900ms cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-visible .why-yys__kicker::after,
.is-visible .why-yys__kicker::after,
.is-visible .split__kicker::after,
.is-visible .fs-section__kicker::after { width: 2.4rem; }
/* fallback: if no JS visibility class, draw on load */
.why-yys__kicker::after { width: 2.4rem; }
/* --- B. Section-opening arc ornament (brand mark motif) --- */
.sec-ornament {
display: block;
width: 46px;
height: 26px;
margin-bottom: var(--s-5);
}
.sec-ornament svg { width: 100%; height: 100%; overflow: visible; }
.sec-ornament .arc {
fill: none;
stroke-linecap: round;
stroke-dasharray: 120;
stroke-dashoffset: 120;
animation: arcDraw 1.4s cubic-bezier(0.22,1,0.36,1) forwards;
}
.sec-ornament .arc--1 { stroke: var(--c-crimson); stroke-width: 2.2; animation-delay: 0.05s; }
.sec-ornament .arc--2 { stroke: var(--c-green); stroke-width: 1.8; animation-delay: 0.2s; }
.sec-ornament .arc--3 { stroke: var(--c-navy); stroke-width: 1.4; animation-delay: 0.35s; }
.sec-ornament .dot { fill: var(--c-crimson); opacity: 0; animation: dotFade 0.6s ease 0.7s forwards; }
@keyframes arcDraw { to { stroke-dashoffset: 0; } }
@keyframes dotFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.sec-ornament .arc { stroke-dashoffset: 0; animation: none; }
.sec-ornament .dot { opacity: 1; animation: none; }
}
/* --- C. Title accent: hairline under em / 更新語に下線アニメ --- */
.title-accent { position: relative; display: inline-block; }
.title-accent::after {
content: "";
position: absolute;
left: 0; bottom: -0.12em;
width: 100%; height: 0.5em;
background: linear-gradient(transparent 62%, var(--c-crimson-tint) 62%);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 800ms cubic-bezier(0.22,1,0.36,1) 0.2s;
}
.is-visible .title-accent::after,
.reveal.is-visible .title-accent::after { transform: scaleX(1); }
.title-accent::after { transform: scaleX(1); } /* fallback */
/* --- D. Scroll-reveal motion for headings (subtle rise + fade) --- */
.reveal-up {
opacity: 0;
transform: translateY(18px);
transition: opacity 800ms cubic-bezier(0.22,1,0.36,1),
transform 800ms cubic-bezier(0.22,1,0.36,1);
will-change: opacity, transform;
}
.reveal-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal-up { opacity: 1; transform: none; transition: none; }
}
/* --- E. Eyebrow chip: kicker を四角チップで囲むバリエーション --- */
.kicker-chip {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--f-body);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
padding: 0.4em 0.9em;
border: 1px solid var(--c-crimson);
border-radius: 999px;
background: var(--c-crimson-tint);
}
.kicker-chip__dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--c-crimson);
animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce){ .kicker-chip__dot { animation: none; } }
/* --- F. Perspective icon (3専門性の小アイコン) --- */
.persp-icon { width: 34px; height: 34px; margin-bottom: var(--s-3); display: block; }
.persp-icon svg { width: 100%; height: 100%; }
.tp-card--01 .persp-icon { color: var(--c-navy); }
.tp-card--02 .persp-icon { color: var(--c-crimson); }
.tp-card--03 .persp-icon { color: var(--c-green); }
/* --- G. Number badge for journey steps (番号を装飾) --- */
.rj-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================================ */
/* v10.0 — FULL RENEWAL: WHO診断 / SERVICES / IMPLEMENTATION / */
/* PROCESS / 4階層情報設計 / 画像仮置き枠 */
/* カラーバランス：濃紺40 余白25 ボルドー20 緑15 */
/* ============================================================ */
/* ---------- 画像仮置き枠（コンセプト明記つき） ---------- */
.imgslot {
position: relative;
border-radius: 16px;
overflow: hidden;
background:
repeating-linear-gradient(135deg, rgba(15,37,69,0.05) 0 14px, rgba(15,37,69,0.02) 14px 28px),
var(--c-paper-dim);
border: 1px dashed rgba(15,37,69,0.28);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* 微細なブランド円弧モチーフを背景に置き、空枠を「意図あるデザイン」にする */
.imgslot::before {
content: "";
position: absolute;
width: 70%; aspect-ratio: 2/1;
bottom: -18%; left: 50%; transform: translateX(-50%);
border-radius: 999px 999px 0 0;
border: 1.5px solid rgba(142,26,44,0.10);
border-bottom: none;
pointer-events: none;
}
.imgslot::after {
content: "";
position: absolute;
width: 48%; aspect-ratio: 2/1;
bottom: -12%; left: 50%; transform: translateX(-50%);
border-radius: 999px 999px 0 0;
border: 1.5px solid rgba(31,90,63,0.12);
border-bottom: none;
pointer-events: none;
}
.imgslot--dark::before { border-color: rgba(226,162,171,0.16); }
.imgslot--dark::after { border-color: rgba(132,188,149,0.16); }
.imgslot--dark {
background:
repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 14px, rgba(255,255,255,0.015) 14px 28px),
#13243F;
border-color: rgba(201,210,223,0.30);
}
.imgslot__meta { position: relative; z-index: 1; padding: clamp(1rem,3vw,2rem); max-width: 90%; }
.imgslot__tag {
display: inline-block;
font-family: var(--f-body);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-crimson);
border: 1px solid var(--c-crimson);
border-radius: 999px;
padding: 0.3em 0.9em;
margin-bottom: 0.8rem;
}
.imgslot--dark .imgslot__tag { color: #E0B4BC; border-color: #E0B4BC; }
.imgslot__name {
font-family: var(--f-display);
font-style: italic;
font-size: clamp(1rem, 1.6vw, 1.3rem);
color: var(--c-ink);
margin-bottom: 0.4rem;
}
.imgslot--dark .imgslot__name { color: #F4F2EC; }
.imgslot__concept {
font-family: var(--f-jp);
font-weight: 300;
font-size: 0.82rem;
line-height: 1.7;
color: var(--c-paper-mute);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.imgslot--dark .imgslot__concept { color: rgba(201,210,223,0.85); }
.imgslot__ratio {
position: absolute; top: 0.7rem; right: 0.9rem;
font-family: var(--f-body); font-size: 0.6rem; letter-spacing: 0.1em;
color: var(--c-paper-mute); opacity: 0.6;
}
/* ---------- 事業セクション共通：濃紺ベース ---------- */
.biz {
background: var(--c-navy-deep);
color: #F4F2EC;
padding-block: clamp(5.5rem, 13vh, 10rem);
}
.biz__inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--pad-x); }
.biz__head { max-width: 760px; margin: 0 auto var(--s-8); text-align: center; }
.biz__kicker {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
font-weight: 600;
color: #E0B4BC;
display: block;
margin-bottom: var(--s-4);
}
.biz__title {
font-family: var(--f-jp);
font-weight: 200;
font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
letter-spacing: 0.04em;
line-height: 1.5;
color: #FFFFFF;
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.biz__title em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: #84BC95; }
.biz__lede {
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(1rem, 1vw + 0.85rem, 1.12rem);
line-height: 1.95;
color: rgba(244,242,236,0.78);
margin-top: var(--s-4);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
/* ---------- WHO 診断UX ---------- */
.who { background: #13243F; color: #F4F2EC; padding-block: clamp(5.5rem,13vh,10rem); }
.who__inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--pad-x); }
.who-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(0.9rem, 2vw, 1.3rem);
margin-top: var(--s-7);
}
.who-card {
position: relative;
padding: clamp(1.5rem, 3vw, 1.9rem);
border-radius: 14px;
background: rgba(244,242,236,0.04);
border: 1px solid rgba(201,210,223,0.18);
transition: transform 240ms cubic-bezier(0.22,1,0.36,1), border-color 240ms ease, background 240ms ease;
overflow: hidden;
cursor: pointer;
}
.who-card:hover, .who-card:focus-within {
transform: translateY(-3px);
border-color: rgba(224,180,188,0.5);
background: rgba(244,242,236,0.07);
}
.who-card__num {
font-family: var(--f-display); font-style: italic; font-weight: 400;
font-size: 0.85rem; color: #E0B4BC; display: block; margin-bottom: var(--s-3);
}
.who-card__who {
font-family: var(--f-jp); font-weight: 500;
font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #FFFFFF;
letter-spacing: 0.03em; margin-bottom: var(--s-2);
word-break: normal; overflow-wrap: normal; line-break: strict;
}
.who-card__need {
font-family: var(--f-jp); font-weight: 300; font-size: 0.9rem;
line-height: 1.8; color: rgba(244,242,236,0.72);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.who-card__rec {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid rgba(201,210,223,0.14);
font-family: var(--f-body); font-size: 0.78rem; letter-spacing: 0.04em;
color: #84BC95;
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height 320ms ease, opacity 320ms ease, margin 320ms ease, padding 320ms ease;
}
.who-card:hover .who-card__rec,
.who-card:focus-within .who-card__rec { max-height: 80px; opacity: 1; }
.who-card__rec a { color: #84BC95; border-bottom: 1px solid rgba(132,188,149,0.4); }
.who-card__rec b { font-weight: 600; color: #A7D6B5; }
@media (max-width: 720px) {
/* モバイルはアコーディオン的に常時表示 */
.who-card__rec { max-height: 80px; opacity: 1; }
}
/* ---------- SERVICES 6カード ---------- */
.svc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(1rem, 2.2vw, 1.5rem);
margin-top: var(--s-7);
}
.svc-card {
position: relative;
padding: clamp(1.6rem, 3vw, 2.1rem);
border-radius: 16px;
background: rgba(244,242,236,0.04);
border: 1px solid rgba(201,210,223,0.16);
transition: transform 240ms cubic-bezier(0.22,1,0.36,1), border-color 240ms ease, background 240ms ease;
display: flex; flex-direction: column;
}
.svc-card:hover { transform: translateY(-3px); border-color: rgba(224,180,188,0.45); background: rgba(244,242,236,0.07); }
.svc-card__icon { display: block; width: 38px; height: 38px; margin-bottom: var(--s-4); color: #E0B4BC; }
.svc-card__icon svg { width: 100%; height: 100%; }
.svc-card--impl { border-color: rgba(224,180,188,0.4); background: rgba(142,26,44,0.10); }
.svc-card--impl .svc-card__icon { color: #E6A2AB; }
.svc-card__num {
position: absolute; top: 1.4rem; right: 1.5rem;
font-family: var(--f-display); font-style: italic; font-size: 1.5rem;
color: rgba(201,210,223,0.22);
}
.svc-card__en {
font-family: var(--f-display); font-weight: 500;
font-size: clamp(1.2rem, 1.8vw, 1.45rem); color: #FFFFFF;
margin-bottom: var(--s-2); letter-spacing: 0.01em;
}
.svc-card__jp {
font-family: var(--f-jp); font-weight: 400; font-size: 0.84rem;
letter-spacing: 0.06em; color: #E0B4BC; margin-bottom: var(--s-3);
word-break: normal; overflow-wrap: normal; line-break: strict;
}
.svc-card__body {
font-family: var(--f-jp); font-weight: 300; font-size: 0.92rem;
line-height: 1.85; color: rgba(244,242,236,0.78); flex: 1;
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.svc-card__more {
margin-top: var(--s-4);
font-family: var(--f-body); font-size: 0.78rem; letter-spacing: 0.06em;
color: #84BC95; display: inline-flex; align-items: center; gap: 0.4rem;
transition: gap 200ms ease;
}
.svc-card__more:hover { gap: 0.7rem; }
/* ---------- IMPLEMENTATION セクション ---------- */
.impl { background: #0C1B33; color: #F4F2EC; padding-block: clamp(5.5rem,13vh,10rem); overflow: hidden; }
.impl__inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--pad-x); }
.impl__split {
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: var(--s-8);
}
@media (max-width: 880px) { .impl__split { grid-template-columns: 1fr; } }
.impl__visual .imgslot { aspect-ratio: 16/9; }
.impl-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-6); }
.impl-tag {
font-family: var(--f-jp); font-weight: 300; font-size: 0.82rem;
padding: 0.5em 1em; border-radius: 999px;
background: rgba(244,242,236,0.05); border: 1px solid rgba(201,210,223,0.2);
color: rgba(244,242,236,0.85);
word-break: normal; overflow-wrap: normal; line-break: strict;
}
.impl-tag--accent { background: rgba(142,26,44,0.18); border-color: rgba(224,180,188,0.35); color: #EFC9CE; }
.impl__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--s-7); justify-content: center; }
/* ---------- PROCESS フロー ---------- */
.process { background: var(--c-paper-soft); padding-block: clamp(5.5rem,13vh,10rem); }
.process__inner { max-width: 1100px; margin: 0 auto; padding-inline: var(--pad-x); }
.proc-flow {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 0; margin-top: var(--s-8); position: relative;
}
.proc-flow::before {
content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 2px;
background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-crimson) 70%, var(--c-green) 100%);
transform: scaleX(0); transform-origin: left;
transition: transform 1400ms cubic-bezier(0.22,1,0.36,1);
}
.process.is-in .proc-flow::before,
.proc-flow.is-in::before { transform: scaleX(1); }
@media (max-width: 760px) {
.proc-flow { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-3); }
.proc-flow::before { display: none; }
}
.proc-step { text-align: center; position: relative; padding: 0 0.4rem; }
.proc-step__dot {
width: 54px; height: 54px; margin: 0 auto var(--s-3);
border-radius: 50%; background: var(--c-paper-pure);
border: 2px solid var(--c-navy);
display: flex; align-items: center; justify-content: center;
font-family: var(--f-display); font-style: italic; font-size: 1.2rem; color: var(--c-navy);
position: relative; z-index: 1;
}
.proc-step:nth-child(5) .proc-step__dot { border-color: var(--c-crimson); color: var(--c-crimson); }
.proc-step:nth-child(6) .proc-step__dot { border-color: var(--c-green); color: var(--c-green); }
.proc-step__en {
font-family: var(--f-display); font-style: italic; font-weight: 500;
font-size: 1.05rem; color: var(--c-ink); margin-bottom: 0.3rem;
}
.proc-step__jp {
font-family: var(--f-jp); font-weight: 300; font-size: 0.82rem;
line-height: 1.6; color: var(--c-paper-mute);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
/* ---------- Hero 全面刷新（事業性追加） ---------- */
.hero-v10 { position: relative; min-height: 92vh; display: flex; align-items: flex-end;
background: var(--c-navy-deep); overflow: hidden; }
.hero-v10__bg { position: absolute; inset: 0; }
.hero-v10__bg .imgslot { width: 100%; height: 100%; border-radius: 0; border: none; }
.hero-v10__bg::after { content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(8,15,28,0.55) 0%, rgba(8,15,28,0.30) 40%, rgba(8,15,28,0.88) 100%); }
.hero-v10__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto;
padding: clamp(2rem,6vw,4rem) var(--pad-x) clamp(3rem,7vw,5rem); width: 100%; }
.hero-v10__eyebrow {
font-family: var(--f-body); font-size: 0.7rem; letter-spacing: 0.28em;
text-transform: uppercase; font-weight: 600; color: #E0B4BC; margin-bottom: var(--s-5); display:block;
}
.hero-v10__title {
font-family: var(--f-jp); font-weight: 200;
font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.32; letter-spacing: 0.03em;
color: #FFFFFF; margin-bottom: var(--s-5);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.hero-v10__title em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: #E2A2AB; }
.hero-v10__sub {
font-family: var(--f-jp); font-weight: 300;
font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.8; letter-spacing: 0.04em;
color: rgba(244,242,236,0.88); max-width: 640px; margin-bottom: var(--s-5);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.hero-v10__body {
font-family: var(--f-jp); font-weight: 300; font-size: 0.95rem; line-height: 1.9;
color: rgba(244,242,236,0.7); max-width: 600px; margin-bottom: var(--s-6);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.hero-v10__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
/* ============================================================ */
/* v11.0 — 思想/事業の明確化・役割明文化・早見表・4分類 */
/* 配色：ボルドー強化・グリーン抑制 */
/* ============================================================ */
/* --- セクション役割バッジ（各セクション冒頭の定義文） --- */
.role-note {
display: flex; align-items: flex-start; gap: 0.9rem;
max-width: 760px; margin: var(--s-5) auto 0;
padding: 1rem 1.3rem;
border-left: 3px solid var(--c-crimson);
border-radius: 0;
background: rgba(142,26,44,0.05);
}
.role-note--dark { background: rgba(142,26,44,0.14); }
.role-note__tag {
flex-shrink: 0;
font-family: var(--f-body); font-size: 0.62rem; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 600; color: var(--c-crimson);
padding-top: 0.15rem;
}
.role-note--dark .role-note__tag { color: #E2A2AB; }
.role-note__text {
font-family: var(--f-jp); font-weight: 300; font-size: 0.92rem;
line-height: 1.8; letter-spacing: 0.03em; color: var(--c-ink);
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.role-note--dark .role-note__text { color: rgba(244,242,236,0.9); }
.role-note__text strong { font-weight: 600; color: var(--c-crimson); }
.role-note--dark .role-note__text strong { color: #E6A2AB; }
.role-note--left { margin-left: 0; margin-right: 0; }
/* --- 目的別サービス早見表 --- */
.picker { background: #FFFFFF; padding-block: clamp(4rem,10vh,7rem); }
.picker__inner { max-width: 940px; margin: 0 auto; padding-inline: var(--pad-x); }
.picker__head { text-align: center; margin-bottom: var(--s-7); }
.picker__kicker {
font-family: var(--f-body); font-size: 0.72rem; letter-spacing: 0.3em;
text-transform: uppercase; font-weight: 600; color: var(--c-crimson);
display: block; margin-bottom: var(--s-4);
}
.picker__title {
font-family: var(--f-jp); font-weight: 200;
font-size: clamp(1.8rem,3.5vw,2.5rem); letter-spacing: 0.04em; color: var(--c-ink);
word-break: normal; line-break: strict;
}
.picker__title em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--c-crimson); }
.picker-table { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--c-paper-line-2); }
.picker-row {
display: grid; grid-template-columns: 1fr auto;
gap: 1.5rem; align-items: center;
padding: 1.15rem 1rem;
border-bottom: 1px solid var(--c-paper-line-2);
transition: background 200ms ease, padding-left 200ms ease;
text-decoration: none;
}
.picker-row:hover {
background: var(--c-crimson-tint);
padding-left: 1.5rem;
}
.picker-row__goal {
font-family: var(--f-jp); font-weight: 400; font-size: 1rem;
color: var(--c-ink); letter-spacing: 0.03em;
word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}
.picker-row__svc {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--f-display); font-style: italic; font-weight: 500;
font-size: 0.98rem; color: var(--c-crimson); white-space: nowrap;
}
.picker-row__svc::after { content: "→"; font-style: normal; transition: transform 200ms ease; }
.picker-row:hover .picker-row__svc::after { transform: translateX(4px); }
@media (max-width: 600px) {
.picker-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 1rem 0.6rem; }
.picker-row__svc { font-size: 0.9rem; }
}
/* --- Implementation 4分類カード --- */
.impl-cats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(0.9rem,1.8vw,1.3rem); margin-top: var(--s-7);
}
@media (max-width: 900px) { .impl-cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .impl-cats { grid-template-columns: 1fr; } }
.impl-cat {
padding: clamp(1.4rem,2.6vw,1.8rem);
border-radius: 14px;
background: rgba(244,242,236,0.04);
border: 1px solid rgba(201,210,223,0.16);
border-top: 2px solid var(--c-crimson);
transition: transform 220ms cubic-bezier(0.22,1,0.36,1), background 220ms ease;
}
.impl-cat:hover { transform: translateY(-3px); background: rgba(244,242,236,0.07); }
.impl-cat__icon { display: block; width: 34px; height: 34px; color: #E2A2AB; margin-bottom: var(--s-3); }
.impl-cat__icon svg { width: 100%; height: 100%; display: block; }
.impl-cat__en {
font-family: var(--f-display); font-weight: 500; font-size: 1.08rem;
color: #FFFFFF; margin-bottom: var(--s-3); letter-spacing: 0.01em;
}
.impl-cat__list { list-style: none; padding: 0; margin: 0; }
.impl-cat__list li {
font-family: var(--f-jp); font-weight: 300; font-size: 0.86rem;
line-height: 1.9; color: rgba(244,242,236,0.78);
padding-left: 0.9em; position: relative;
word-break: normal; overflow-wrap: normal; line-break: strict;
}
.impl-cat__list li::before {
content: ""; position: absolute; left: 0; top: 0.7em;
width: 4px; height: 4px; border-radius: 50%; background: #84BC95;
}
/* --- CTAボタン ボルドー→グリーン ホバー遷移 --- */
.btn--primary, .btn--crimson {
background: var(--c-crimson); color: var(--c-paper-soft);
transition: background 360ms cubic-bezier(0.4,0,0.2,1), transform 200ms ease;
}
.btn--primary:hover, .btn--crimson:hover {
background: var(--c-green); color: #FFFFFF;
transform: translateY(-1px);
}
/* ============================================================ */
/* v11.1 — Future Session: 緑全面 → 濃紺ベース＋緑アクセント */
/* ============================================================ */
.split--navy {
position: relative;
background: #0C1B33;
color: #FFFFFF;
overflow: hidden;
}
/* 左端に細い緑のアクセントライン（再生・対話の象徴を残す） */
.split--navy::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--c-green) 0%, var(--c-green-soft) 60%, transparent 100%);
}
/* 微細な背景アニメーション（指示書：Future Sessionに上質な動き） */
.split--navy::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 78% 28%, rgba(31,90,63,0.20) 0%, transparent 42%),
radial-gradient(circle at 22% 80%, rgba(142,26,44,0.12) 0%, transparent 45%);
opacity: 0.9;
animation: fsDrift 18s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes fsDrift {
0% { transform: translate3d(0,0,0) scale(1); }
100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.split--navy::after { animation: none; }
}
.split--navy .split__inner { position: relative; z-index: 1; }
.split--navy .split__kicker { color: #84BC95; }
.split--navy .fs-point {
background: rgba(244,242,236,0.05);
border-color: rgba(132,188,149,0.28);
}
.split--navy .fs-point__label { color: #84BC95; }
/* ============================================================ */
/* v12.0 — br全廃に伴う、見出しの自然折り返し制御 */
/* 改行は max-width と text-wrap:balance で制御（強制改行ゼロ） */
/* ============================================================ */
/* 見出しは balance で均等に折り返し、孤立行を防ぐ */
.hero-v10__title,
.biz__title, .split__title,
.why-yys__title, .three-perspectives__title,
.renewal-journey__title, .collab__title,
.fs-section__title, .cta-final__title,
.fs-manifesto__title, .picker__title,
.phero h1, .mem-block__belief {
text-wrap: balance;
}
/* Hero見出し：自然な2行折り返しになる幅に制御 */
.hero-v10__title { max-width: 22em; }
@media (max-width: 600px) { .hero-v10__title { max-width: 14em; } }
/* WHO見出し等、事業セクションの左寄せ見出し */
.biz__title { max-width: 24em; }
.biz__head { } /* center時はmax-width auto */
/* 本文・リード文：読みやすい行長に制御（日本語 28-40文字相当） */
.hero-v10__sub { max-width: 38em; }
.hero-v10__body { max-width: 36em; }
.biz__lede, .why-yys__close, .cta-final__sub { max-width: 40em; }
.split__title { max-width: 16em; }
/* マニフェスト見出しの block span（急がない。煽らない。…）は中央寄せ時も整う */
.fs-manifesto__title span { display: block; }
/* スマホ：本文の行長と余白を最適化 */
@media (max-width: 600px) {
.hero-v10__sub, .hero-v10__body,
.biz__lede, .why-yys__close, .cta-final__sub,
.why-card__sub, .fs-section__body p, .svc-card__body,
.impl-cat__list li, .who-card__need, .picker-row__goal {
text-wrap: pretty;
}
/* スマホ見出しは少し締める */
.biz__title, .why-yys__title, .three-perspectives__title { max-width: 100%; }
}
/* ============================================================ */
/* v12.1 — SP視覚整理：アイコン追加で文字の壁を解消 */
/* ============================================================ */
/* WHO カード：アイコン＋番号を上段に配置 */
.who-card__top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-3);
}
.who-card__icon {
display: block; width: 40px; height: 40px;
color: #E2A2AB;
}
.who-card__icon svg { width: 100%; height: 100%; display: block; }
.who-card__num {
font-family: var(--f-display); font-style: italic; font-weight: 400;
font-size: 1.4rem; color: rgba(201,210,223,0.35); margin: 0;
}
/* Picker 行：左に小さな丸インデックスを置いて文字列だけにしない */
.picker-row__goal { display: flex; align-items: center; gap: 0.7rem; }
.picker-row__goal::before {
content: ""; flex-shrink: 0;
width: 8px; height: 8px; border-radius: 50%;
background: var(--c-crimson); opacity: 0.55;
}
.picker-row:hover .picker-row__goal::before { opacity: 1; }
/* SP：セクション冒頭の文字スタックを締める（過剰な余白と大きさを抑える） */
@media (max-width: 600px) {
/* リード文・役割ノートはサイズと余白を圧縮 */
.biz__lede { font-size: 0.95rem; line-height: 1.85; margin-top: var(--s-4); }
.role-note { padding: 0.85rem 1rem; margin-top: var(--s-4); gap: 0.7rem; }
.role-note__text { font-size: 0.86rem; line-height: 1.75; }
/* WHOカードのおすすめは常時表示なので余白圧縮 */
.who-card { padding: 1.3rem 1.3rem; }
/* 見出し直下の余白を適正化 */
.biz__head { margin-bottom: var(--s-6); }
/* カードは1カラム・間隔を少し詰める */
.who-grid, .svc-grid, .impl-cats { gap: 0.9rem; }
}
/* セクション間の視覚的な区切り：細いブランドラインアクセント */
.sec-divider {
display: block; width: 100%; max-width: 1240px; margin: 0 auto;
height: 0; border: none;
border-top: 1px solid var(--c-paper-line-2);
position: relative;
}
.sec-divider::after {
content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
width: 56px; height: 2px;
background: linear-gradient(90deg, var(--c-crimson), var(--c-green));
}
/* ============================================================ */
/* v12.2 — 見出しサイズの抜本修正（SPで大きすぎる問題の解決） */
/* clampの最小値が2rem(32px)固定で、SPで中途半端な2行折返しが */
/* 発生していた。最小値を下げ、SP実機で収まるサイズに作り直す。 */
/* ============================================================ */
/* 主要見出し：最小1.45rem〜。vwで滑らかに、SPでは確実に小さく */
.why-yys__title,
.three-perspectives__title,
.biz__title,
.renewal-journey__title,
.collab__title {
font-size: clamp(1.45rem, 5.2vw, 3rem) !important;
line-height: 1.5 !important;
}
/* Hero：SPで大きすぎたので最小を下げる */
.hero-v10__title {
font-size: clamp(1.9rem, 8vw, 4.6rem) !important;
line-height: 1.34 !important;
}
/* picker / split / manifesto 見出し */
.picker__title { font-size: clamp(1.4rem, 5vw, 2.5rem) !important; }
.split__title { font-size: clamp(1.5rem, 4.5vw, 2.4rem) !important; }
.fs-manifesto__title { font-size: clamp(1.7rem, 6vw, 3rem) !important; }
/* phero（下層ページ）見出し */
.phero h1 { font-size: clamp(1.7rem, 6vw, 3.6rem) !important; line-height: 1.4 !important; }
/* SP専用：さらに字間と行間を最適化、見出し下の余白も適正化 */
@media (max-width: 600px) {
.why-yys__title, .three-perspectives__title, .biz__title,
.renewal-journey__title, .collab__title {
letter-spacing: 0.02em !important;
margin-bottom: var(--s-5) !important;
}
.hero-v10__title { letter-spacing: 0.02em !important; }
/* 英数字（YYS Regeneration等）が混じる見出しも自然に折り返す */
.why-yys__title, .biz__title { overflow-wrap: normal; word-break: normal; }
}
/* ============================================================ */
/* v12.5 — PCビュー見出しの適正化 */
/* デスクトップで48〜58pxは大きすぎ、中途半端な2行折返しの原因。 */
/* 上限を 36〜42px に下げ、balanceで均等折返しにする。 */
/* ============================================================ */
/* セクション見出し系：上限を3rem→2.4rem(約38px)に */
.why-yys__title,
.three-perspectives__title,
.biz__title,
.renewal-journey__title,
.collab__title,
.fs-section__title {
font-size: clamp(1.45rem, 3.4vw, 2.4rem) !important;
line-height: 1.45 !important;
text-wrap: balance;
}
/* 下層ページのpheroタイトル：3.6rem→2.6rem(約42px) */
.phero__title, .phero h1 {
font-size: clamp(1.7rem, 4vw, 2.6rem) !important;
line-height: 1.4 !important;
text-wrap: balance;
}
/* Future Session 専用大見出し（74px）も少し抑える */
.fs-hero__title {
font-size: clamp(2rem, 5.5vw, 3.4rem) !important;
line-height: 1.4 !important;
text-wrap: balance;
}
/* manifesto（急がない。煽らない。…）はblock spanで意図的3行なので上限のみ調整 */
.fs-manifesto__title {
font-size: clamp(1.7rem, 4.5vw, 2.6rem) !important;
}
/* CTA見出し：48px→上限2.3rem */
.cta-final__title {
font-size: clamp(1.6rem, 3.6vw, 2.3rem) !important;
line-height: 1.4 !important;
text-wrap: balance;
}
/* legal系（プライバシー等）も揃える */
.legal-hero__title {
font-size: clamp(1.6rem, 3.6vw, 2.3rem) !important;
text-wrap: balance;
}
/* Hero（74px）は主役なので維持しつつ上限だけ微調整 */
.hero-v10__title {
font-size: clamp(1.9rem, 6.5vw, 3.8rem) !important;
}
/* ============================================================ */
/* v12.6 — PCで幅に余裕があるのに2行折返しする問題の解消 */
/* max-width が狭すぎたのが原因。PCでは広げて1行に、SPだけ制御。 */
/* ============================================================ */
/* --- 見出し：PCでは max-width を解除（折り返さない） --- */
.hero-v10__title { max-width: none !important; }
.biz__title { max-width: none !important; }
.split__title { max-width: none !important; }
.why-yys__title, .three-perspectives__title,
.renewal-journey__title, .collab__title,
.fs-section__title, .cta-final__title,
.picker__title, .phero__title { max-width: none !important; }
/* --- 本文・リード文：PCでは行長をゆったり広げる --- */
.hero-v10__sub { max-width: 52em !important; }
.hero-v10__body { max-width: 50em !important; }
.biz__lede { max-width: 56em !important; }
.why-yys__close { max-width: 54em !important; }
.cta-final__sub { max-width: 60em !important; }
/* WHO/picker のサブ説明文も広げる */
.who .biz__lede { max-width: 60em !important; }
/* --- SP（〜600px）のみ：読みやすい行長に戻す（はみ出し防止） --- */
@media (max-width: 600px) {
.hero-v10__title { max-width: 100% !important; }
.biz__title { max-width: 100% !important; }
.split__title { max-width: 100% !important; }
.hero-v10__sub, .hero-v10__body,
.biz__lede, .why-yys__close, .cta-final__sub,
.who .biz__lede { max-width: 100% !important; }
}
/* --- 中間幅（601〜1024px タブレット）でも余裕を持たせる --- */
@media (min-width: 601px) and (max-width: 1024px) {
.hero-v10__sub, .hero-v10__body, .biz__lede,
.why-yys__close, .cta-final__sub { max-width: 90% !important; }
}
/* ============================================================ */
/* v12.7 — Insights カードグリッド：SPで確実に1列 */
/* インラインの repeat(2,1fr) がSPでも2列を強制していた問題を解消 */
/* ============================================================ */
.insights-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 760px) {
.insights-grid { grid-template-columns: 1fr !important; }
}
/* Featured（画像＋本文の横並び）もSPで縦積み */
.insights-featured {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 0;
min-height: 320px;
background: var(--c-paper-dim);
border-radius: 14px;
overflow: hidden;
}
@media (max-width: 760px) {
.insights-featured { grid-template-columns: 1fr !important; min-height: 0; }
}
/* ============================================================ */
/* v12.8 — フッタータグライン「知を遊び、未来を更新する。」を */
/* 常に1行に（22ch制限で中途半端に2行折返ししていた問題の解消） */
/* ============================================================ */
.foot__tagline {
max-width: none !important;
white-space: nowrap !important;
}
/* 極小幅(360px未満)だけは、万一はみ出す場合に折り返しを許可 */
@media (max-width: 360px) {
.foot__tagline { white-space: normal !important; }
}
/* ============================================================ */
/* v12.9 — 本文コンテナ幅をPCで適度に拡張（760px→920px） */
/* 見出しの窮屈さを解消しつつ、本文の可読行長は保つ。 */
/* SPは100%（従来通り）。 */
/* ============================================================ */
.why-yys__inner { max-width: 920px !important; }
/* 見出しはコンテナ幅いっぱい使えるよう、本文だけ可読幅に保つ */
.why-yys__body { max-width: 820px; }
/* SPでは全幅 */
@media (max-width: 600px) {
.why-yys__inner { max-width: 100% !important; }
.why-yys__body { max-width: 100%; }
}
/* ============================================================ */
/* v13.0 — ヒーロー実画像の組み込み */
/* ============================================================ */
.hero-v10__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 38%;
}
/* テキスト可読性のためのオーバーレイ：左下を濃く、上に余白感 */
.hero-v10__bg::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(105deg, rgba(8,15,28,0.82) 0%, rgba(8,15,28,0.55) 38%, rgba(8,15,28,0.12) 70%, rgba(8,15,28,0.0) 100%),
linear-gradient(180deg, rgba(8,15,28,0.45) 0%, rgba(8,15,28,0.05) 45%, rgba(8,15,28,0.55) 100%);
}
/* パララックス微動（指示書：Heroの微細なパララックス）*/
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
.hero-v10__img {
height: 116%; top: -8%;
will-change: transform;
animation: heroFloat 16s ease-in-out infinite alternate;
}
@keyframes heroFloat {
0% { transform: scale(1.02) translateY(0); }
100% { transform: scale(1.06) translateY(-1.4%); }
}
}
/* モバイルは画像を縦長クロップに合わせて見せる */
@media (max-width: 600px) {
.hero-v10__img { object-position: center center; }
.hero-v10 { min-height: 88vh; }
}