/* =================================================================
   CREVIA SHOJI NISHIDA v2 — 4WIDE-inspired Design System
   revision: 2 (dark-first + showcase strip)
   spec: 4wide.studio screenshot / 聖司 2026-05-18
   - palette: #0B0B0B bg / #F0F0F0 fg / #A0A0A0 mid / #181818 panel
   - typography: Fraunces (display, 300) + Inter (body, 400)
   - radius: 0 except dot
   - shadow: none — depth via contrast only
   - motion: ease-out 200ms max
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300&display=swap');

:root {
  --c-bg:    #0B0B0B;
  --c-fg:    #F0F0F0;
  --c-mid:   #808080;
  --c-muted: #A0A0A0;
  --c-panel: #181818;
  --c-white: #FFFFFF;
  --c-black: #000000;

  --f-display: "Fraunces", "Times New Roman", serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;

  --s-4: 4px;   --s-8: 8px;   --s-12: 12px;
  --s-16: 16px; --s-20: 20px; --s-24: 24px;
  --s-32: 32px; --s-60: 60px; --s-64: 64px;
  --s-72: 72px; --s-100: 100px; --s-120: 120px;

  --max-w: 1440px;
  --strip-w: 156px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: color 200ms ease-out, opacity 200ms ease-out; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; padding: 0; }

/* ========== Global Type Hygiene ==========
   日本語+ラテン混植のカーニング / 約物半角 / 改行制御
   ============================================ */
body { font-feature-settings: "kern" 1, "calt" 1; }

/* 大見出し系：palt（約物半角）+ kern + Fraunces opsz=144 */
.hero__display,
.section__heading,
.philosophy__lead,
.footer__heading,
.hero__caption,
.service__title,
.activity-card__title {
  font-feature-settings: "kern" 1, "palt" 1, "ss01" 1;
  font-variation-settings: "opsz" 144;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* 本文系：pretty + palt + 日本語折返し最適化 */
.hero__sub,
.section__lead,
.about__prose p,
.philosophy__body p,
.footer__lead,
.service__body,
.activity-card__body {
  font-feature-settings: "kern" 1, "palt" 1;
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 日本語見出しの <em> は italic にしない（傾斜崩れ防止）
   ラテン文字の em（hero__caption "Care" "Intent."）だけ italic 残す */
.hero__display em,
.section__heading em,
.philosophy__lead em,
.footer__heading em {
  font-style: normal;
  font-weight: 400;
}

/* ========== Topnav ========== */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: var(--s-20) calc(var(--strip-w) + var(--s-32)) var(--s-20) var(--s-32);
  background: rgba(11, 11, 11, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(240, 240, 240, 0.07);
}
.topnav__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-32);
}
.topnav__brand {
  font-family: var(--f-display);
  font-size: 15px; line-height: 17px;
  font-weight: 400; letter-spacing: 0.01em;
}
.topnav__brand-name {
  font-family: var(--f-body); font-size: 13px;
  color: var(--c-muted); margin-left: var(--s-8);
}
.topnav__menu { display: flex; gap: var(--s-32); }
.topnav__menu a { font-size: 13px; line-height: 14.95px; color: var(--c-muted); }
.topnav__menu a:hover { color: var(--c-fg); }

/* ========== Showcase Strip — 4WIDE right panel ========== */
.showcase-strip {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: var(--strip-w);
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 72px 12px 48px;
  pointer-events: auto;
}
.showcase-strip::-webkit-scrollbar { display: none; }

.showcase-strip__list { display: flex; flex-direction: column; gap: 10px; }

.showcase-card {
  opacity: 0.45;
  transition: opacity 200ms ease-out;
}
.showcase-card:hover { opacity: 1; }
.showcase-card__link { display: block; }
.showcase-card__thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-panel);
}
.showcase-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.5) contrast(1.05);
  transition: transform 400ms ease-out;
}
.showcase-card:hover .showcase-card__thumb img {
  transform: scale(1.04);
}
.showcase-card__label {
  display: block;
  font-size: 10px;
  line-height: 12px;
  color: var(--c-mid);
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ========== Hero — 4WIDE cinematic dark ========== */
.hero {
  position: relative;
  min-height: 100vh;
  padding:
    calc(var(--s-100) + var(--s-32))
    calc(var(--strip-w) + var(--s-32))   /* right：showcase strip 衝突回避 */
    var(--s-60)
    var(--s-60);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0B0B0B 0%, #111111 35%, #161616 70%, #0B0B0B 100%);
}
.hero__bg-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
  opacity: 0.35;
}

/* 4WIDE bottom-left caption — "Built with Love and Craft" equivalent */
.hero__caption {
  position: absolute; left: var(--s-60); bottom: var(--s-60);
  z-index: 3;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: rgba(240, 240, 240, 0.22);
  pointer-events: none;
}
.hero__caption-row { display: block; }
.hero__caption-row + .hero__caption-row { margin-top: 2px; }
.hero__caption em { font-style: italic; }

/* center overlay block */
.hero__center {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 880px;
  padding: 0 var(--s-32);
}
.hero__eyebrow {
  font-size: 12px; line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s-32);
  color: var(--c-muted);
}
.hero__display {
  font-family: var(--f-display);
  font-size: clamp(44px, 6.6vw, 88px);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-32);
  color: var(--c-fg);
}
.hero__display em { color: rgba(240,240,240,0.55); }
.hero__sub {
  font-size: 15px; line-height: 26px;
  letter-spacing: 0.01em;
  max-width: 48ch; margin: 0 auto var(--s-32);
  color: var(--c-muted);
}
.hero__cta { display: inline-flex; gap: var(--s-32); align-items: center; }
.hero__cta a {
  font-size: 13px; line-height: 14.95px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(240,240,240,0.4);
  color: var(--c-fg);
}
.hero__cta a:hover { border-color: var(--c-fg); }

/* Focus Mode toggle bottom-right (4WIDE signature) */
.hero__focus {
  position: absolute;
  right: calc(var(--strip-w) + var(--s-24));
  bottom: var(--s-32);
  z-index: 3;
  font-size: 13px; line-height: 14.95px;
  display: inline-flex; align-items: center; gap: var(--s-8);
  color: var(--c-muted);
  user-select: none;
}
.hero__focus::before { content: "+"; display: inline-block; }
.hero__focus:hover { color: var(--c-fg); }

/* index line */
.hero__index {
  position: absolute;
  left: var(--s-60);
  right: calc(var(--strip-w) + var(--s-32));
  top: calc(var(--s-100) + var(--s-32));
  z-index: 3;
  display: flex; align-items: baseline; gap: var(--s-16);
  font-size: 13px; line-height: 14.95px;
  color: var(--c-mid);
}
.hero__index-rule {
  flex: 1; align-self: center;
  border-top: 1px dotted rgba(240,240,240,0.2);
}

/* ========== Focus Mode = Light Mode ========== */
body[data-focus="on"] {
  background: #F0F0F0;
  color: #0B0B0B;
}
body[data-focus="on"] .topnav {
  background: rgba(240, 240, 240, 0.88);
  border-bottom-color: rgba(5, 5, 5, 0.08);
}
body[data-focus="on"] .topnav__brand-name,
body[data-focus="on"] .topnav__menu a { color: #505050; }
body[data-focus="on"] .topnav__menu a:hover { color: #0B0B0B; }
body[data-focus="on"] .hero__bg {
  background: linear-gradient(180deg, #F0F0F0 0%, #E8E8E8 35%, #E0E0E0 70%, #F0F0F0 100%);
}
body[data-focus="on"] .hero__bg-canvas { mix-blend-mode: multiply; opacity: 0.45; }
body[data-focus="on"] .hero__caption { color: rgba(5, 5, 5, 0.18); }
body[data-focus="on"] .hero__display { color: #0B0B0B; }
body[data-focus="on"] .hero__display em { color: rgba(5,5,5,0.5); }
body[data-focus="on"] .hero__eyebrow,
body[data-focus="on"] .hero__sub,
body[data-focus="on"] .hero__index,
body[data-focus="on"] .hero__focus { color: #808080; }
body[data-focus="on"] .hero__cta a { border-color: rgba(5,5,5,0.4); color: #0B0B0B; }
body[data-focus="on"] .hero__cta a:hover { border-color: #0B0B0B; }
body[data-focus="on"] .hero__index-rule { border-top-color: rgba(5,5,5,0.2); }
body[data-focus="on"] .section__eyebrow::before,
body[data-focus="on"] .philosophy__eyebrow::before,
body[data-focus="on"] .footer__eyebrow::before { background: #505050; }
body[data-focus="on"] .section__eyebrow,
body[data-focus="on"] .footer__eyebrow { color: #505050; }
body[data-focus="on"] .section__heading,
body[data-focus="on"] .section__heading em { color: #0B0B0B; }
body[data-focus="on"] .section__lead,
body[data-focus="on"] .about__prose p { color: #505050; }
body[data-focus="on"] .about__media img { filter: grayscale(0.3) contrast(1.05); }
body[data-focus="on"] .services-grid,
body[data-focus="on"] .service { border-color: #0B0B0B; }
body[data-focus="on"] .service__index,
body[data-focus="on"] .service__body,
body[data-focus="on"] .service__points { color: #505050; }
body[data-focus="on"] .service__points li::before { color: #A0A0A0; }
body[data-focus="on"] .activity-card { border-top-color: #0B0B0B; }
body[data-focus="on"] .activity-card__index,
body[data-focus="on"] .activity-card__body { color: #505050; }
body[data-focus="on"] .philosophy { background: #0B0B0B; color: #F0F0F0; }
body[data-focus="on"] .philosophy__eyebrow { color: #F0F0F0; }
body[data-focus="on"] .footer { border-top-color: #0B0B0B; }
body[data-focus="on"] .footer__heading { color: #0B0B0B; }
body[data-focus="on"] .footer__lead { color: #505050; }
body[data-focus="on"] .footer__links a { border-color: #0B0B0B; color: #0B0B0B; }
body[data-focus="on"] .footer__links a:hover { color: #808080; border-color: #808080; }
body[data-focus="on"] .footer__bar { border-top-color: #0B0B0B; color: #808080; }
body[data-focus="on"] .showcase-card__thumb img { filter: grayscale(0.2) contrast(1.1); }

/* ========== Section ========== */
.section {
  padding: var(--s-120) calc(var(--strip-w) + var(--s-32)) var(--s-120) var(--s-60);
  max-width: var(--max-w); margin: 0 auto;
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.section.is-visible { opacity: 1; transform: translateY(0); }

.section__eyebrow {
  font-size: 12px; line-height: 14px;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-32);
  color: var(--c-muted);
  display: flex; align-items: center; gap: var(--s-12);
}
.section__eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 1px; background: var(--c-muted);
}
.section__heading {
  font-family: var(--f-display);
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-60);
  max-width: 18ch;
  color: var(--c-fg);
}
.section__heading em { color: rgba(240,240,240,0.55); }
.section__lead {
  font-size: 17px; line-height: 28px;
  max-width: 56ch;
  margin-bottom: var(--s-72);
  color: var(--c-muted);
}

/* ========== About ========== */
.about__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-100);
  align-items: start;
}
.about__prose p {
  font-size: 18px; line-height: 28px;
  margin-bottom: var(--s-24);
  color: var(--c-muted);
}
.about__prose p:last-child { margin-bottom: 0; }
.about__media {
  background: var(--c-panel);
  aspect-ratio: 4/5;
  position: relative; overflow: hidden;
}
.about__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.75;
  filter: grayscale(0.5) contrast(1.1);
}

/* ========== Services — editorial row ========== */
.services-grid { border-top: 1px solid rgba(240,240,240,0.15); }
.service {
  display: grid;
  grid-template-columns: 64px 1.6fr 2fr 1fr;
  gap: var(--s-32);
  align-items: start;
  padding: var(--s-32) 0;
  border-bottom: 1px solid rgba(240,240,240,0.15);
  transition: padding-left 200ms ease-out, background-color 600ms ease-out;
  scroll-margin-top: 96px; /* topnav 衝突回避 */
}
.service:hover { padding-left: var(--s-16); }
/* anchor 到着時に軽くハイライト（1.6s で消える） */
.service:target {
  animation: service-target-hl 1.6s ease-out;
}
@keyframes service-target-hl {
  0%   { background-color: rgba(240, 240, 240, 0.08); }
  100% { background-color: transparent; }
}
body[data-focus="on"] .service:target {
  animation: service-target-hl-light 1.6s ease-out;
}
@keyframes service-target-hl-light {
  0%   { background-color: rgba(11, 11, 11, 0.06); }
  100% { background-color: transparent; }
}
.service__index {
  font-family: var(--f-body); font-size: 13px; color: var(--c-mid);
  padding-top: 6px;
}
.service__title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}
.service__title-sub {
  display: block;
  font-family: var(--f-body); font-size: 13px;
  color: var(--c-mid);
  margin-top: var(--s-8);
  letter-spacing: 0.02em;
}
.service__body {
  font-size: 15px; line-height: 22px;
  color: var(--c-muted);
  padding-top: 8px;
}
.service__points {
  font-size: 13px; line-height: 20px;
  color: var(--c-muted);
  padding-top: 8px;
}
.service__points li::before {
  content: "—";
  display: inline-block; width: 16px; color: var(--c-mid);
}

/* ========== Activity ========== */
.activity-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-72) var(--s-100);
}
.activity-card {
  border-top: 1px solid rgba(240,240,240,0.15);
  padding-top: var(--s-32);
}
.activity-card__index {
  font-size: 13px; color: var(--c-mid);
  margin-bottom: var(--s-24);
}
.activity-card__title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 300; letter-spacing: -0.01em;
  margin-bottom: var(--s-20);
  color: var(--c-fg);
}
.activity-card__body {
  font-size: 15px; line-height: 22px;
  color: var(--c-muted); max-width: 48ch;
}

/* ========== Philosophy — light band in dark page ========== */
.philosophy {
  background: #F0F0F0;
  color: #0B0B0B;
  padding: var(--s-120) calc(var(--strip-w) + var(--s-32)) var(--s-120) var(--s-60);
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.philosophy.is-visible { opacity: 1; transform: translateY(0); }
.philosophy__inner { max-width: 1040px; margin: 0 auto; }
.philosophy__eyebrow {
  font-size: 13px; line-height: 14.95px;
  margin-bottom: var(--s-60);
  color: #505050;
  display: flex; align-items: center; gap: var(--s-12);
}
.philosophy__eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 1px; background: #505050;
}
.philosophy__lead {
  font-family: var(--f-display);
  font-size: clamp(36px, 6vw, 84px);
  line-height: 1.02;
  font-weight: 300; letter-spacing: -0.015em;
  margin-bottom: var(--s-72);
  color: #0B0B0B;
}
.philosophy__lead em { font-style: italic; color: rgba(5,5,5,0.45); }
.philosophy__body { display: grid; gap: var(--s-32); max-width: 64ch; }
.philosophy__body p { font-size: 18px; line-height: 28px; color: #505050; }

/* ========== Footer ========== */
.footer {
  border-top: 1px solid rgba(240,240,240,0.15);
  padding: var(--s-120) calc(var(--strip-w) + var(--s-32)) var(--s-60) var(--s-60);
  max-width: var(--max-w); margin: 0 auto;
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.footer.is-visible { opacity: 1; transform: translateY(0); }
.footer__eyebrow {
  font-size: 13px; line-height: 14.95px;
  margin-bottom: var(--s-32);
  color: var(--c-muted);
  display: flex; align-items: center; gap: var(--s-12);
}
.footer__eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 1px; background: var(--c-muted);
}
.footer__heading {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05; font-weight: 300; letter-spacing: -0.015em;
  margin-bottom: var(--s-32);
  max-width: 16ch;
  color: var(--c-fg);
}
.footer__heading em { font-style: italic; }
.footer__lead {
  font-size: 18px; line-height: 28px;
  max-width: 56ch;
  color: var(--c-muted);
  margin-bottom: var(--s-60);
}
.footer__links {
  display: flex; gap: var(--s-32); flex-wrap: wrap;
  margin-bottom: var(--s-72);
}
.footer__links a {
  font-size: 15px; line-height: 22px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(240,240,240,0.4);
}
.footer__links a:hover { color: var(--c-mid); border-color: var(--c-mid); }
.footer__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(240,240,240,0.15);
  padding-top: var(--s-24);
  font-size: 13px;
  color: var(--c-mid);
}

/* ========== Responsive ========== */
@media (max-width: 1280px) {
  .showcase-strip { display: none; }
  /* strip 非表示時は strip 分の padding-right を解除 */
  .topnav { padding-right: var(--s-32); }
  .hero { padding-right: var(--s-60); }
  .hero__index { right: var(--s-60); }
  .hero__focus { right: var(--s-32); }
  .section { padding-right: var(--s-60); }
  .philosophy { padding-right: var(--s-60); }
  .footer { padding-right: var(--s-60); }
}
@media (max-width: 1024px) {
  .hero { padding: var(--s-100) var(--s-32) var(--s-60); }
  .section { padding: var(--s-100) var(--s-32); }
  .philosophy, .footer { padding-left: var(--s-32); padding-right: var(--s-32); }
  .about__grid { gap: var(--s-60); }
  .hero__caption { left: var(--s-32); bottom: var(--s-32); }
  .hero__focus { right: var(--s-24); bottom: var(--s-24); }
  .hero__index { left: var(--s-32); right: var(--s-32); top: calc(var(--s-100)); }
}
@media (max-width: 768px) {
  .topnav { padding: var(--s-16); }
  .topnav__menu { gap: var(--s-16); }
  .topnav__brand-name { display: none; }
  .hero { padding: var(--s-100) var(--s-16) var(--s-100); justify-content: flex-end; }
  .hero__center { text-align: left; padding: 0; }
  .hero__caption { left: var(--s-16); bottom: var(--s-72); font-size: clamp(24px, 7vw, 36px); }
  .hero__focus { right: var(--s-16); bottom: var(--s-16); }
  .hero__index { left: var(--s-16); right: var(--s-16); top: var(--s-100); flex-wrap: wrap; }
  .section, .philosophy, .footer { padding-left: var(--s-16); padding-right: var(--s-16); }
  .about__grid { grid-template-columns: 1fr; gap: var(--s-60); }
  .activity-grid { grid-template-columns: 1fr; gap: var(--s-60); }
  .service { grid-template-columns: 40px 1fr; gap: var(--s-16); }
  .service__body, .service__points { grid-column: 2; }
  .hero__display { font-size: clamp(40px, 11vw, 56px); }
  .section__heading, .philosophy__lead { font-size: clamp(32px, 9vw, 48px); }
}
@media (max-width: 480px) {
  .topnav__menu { gap: var(--s-12); }
  .topnav__menu a { font-size: 12px; }
  .hero__sub, .about__prose p, .philosophy__body p, .section__lead, .footer__lead {
    font-size: 16px; line-height: 26px;
  }
}

/* ========== A11y ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
:focus-visible {
  outline: 2px solid var(--c-fg);
  outline-offset: 2px;
}
body[data-focus="on"] :focus-visible {
  outline-color: #0B0B0B;
}