/* ================================================================
   Whitestone HP 共通スタイル
   コンセプト正本: DESIGN.md（モデル=Blackstone/白基調/明朝見出し/ブロンズ）
   ================================================================ */

/* ── Design Tokens ── */
:root {
  /* color（白基調・ストーン＋ブロンズ） */
  --color-text-primary: #1c1c1c;
  --color-text-secondary: #565656;
  --color-text-tertiary: #767676;
  --color-surface-base: #ffffff;
  --color-surface-strong: #f6f3ef;   /* ストーングレー（暖色系の淡地） */
  --color-surface-raised: #9c562c;   /* ブロンズ（CTA塗り・白文字でAA 5.5:1） */
  --color-border-strong: #c39d78;    /* タン（枠線・罫線の強調） */
  --color-border-hairline: #e5e0d8;  /* 暖色ヘアライン */
  --color-accent: #9c562c;           /* 小サイズ文字のアクセント（AA対応） */
  --color-accent-display: #b96634;   /* 大きい数字・装飾専用（小さい文字に使わない） */
  --color-on-raised: #ffffff;

  /* font */
  --font-sans: "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
               "游ゴシック", "游ゴシック体", "メイリオ", Meiryo, sans-serif;
  --font-serif: "Playfair Display", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-serif-jp: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22.4px;
  --font-size-3xl: 24px;
  --font-size-4xl: 40px;
  --font-size-display: clamp(40px, 6.4vw, 88px);
  --font-size-heading: clamp(28px, 3.6vw, 52px);
  --font-size-page-title: clamp(34px, 4.6vw, 64px);
  --font-weight-base: 300;
  --line-height-base: 1.5;

  /* space */
  --space-1: 2px;
  --space-2: 2.8px;
  --space-3: 4px;
  --space-4: 8px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 36px;
  --space-9: 64px;
  --space-10: 104px;
  --space-11: 150px;
  --gutter: clamp(24px, 5vw, 72px);

  /* motion */
  --motion-instant: 3ms;
  --motion-fast: 300ms;
  --motion-normal: 900ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.nowrap { white-space: nowrap; }

/* ── Focus visible ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── Skip link ── */
.skip-link {
  position: absolute; left: var(--space-5); top: -60px; z-index: 300;
  background: var(--color-surface-raised); color: var(--color-on-raised);
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-sm); font-weight: 500;
  transition: top var(--motion-fast) var(--ease);
}
.skip-link:focus { top: var(--space-5); }

/* ================================================================
   Header
   ================================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  height: 92px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--motion-fast) var(--ease),
              height var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  height: 68px;
  border-bottom-color: var(--color-border-hairline);
}
.wordmark {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  padding: 10px 22px;
  white-space: nowrap;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.wordmark:hover { color: var(--color-accent); border-color: var(--color-accent); }

.site-nav { display: flex; align-items: center; gap: var(--space-7); }
.site-nav a:not(.nav-cta) {
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  padding: var(--space-4) 0;
  position: relative;
}
.site-nav a:not(.nav-cta)[aria-current="page"] { color: var(--color-accent); }
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--color-accent);
  transition: right var(--motion-fast) var(--ease);
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a:not(.nav-cta):focus-visible::after,
.site-nav a:not(.nav-cta)[aria-current="page"]::after { right: 0; }

.nav-cta {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  padding: 12px 28px;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--color-surface-raised);
  border-color: var(--color-surface-raised);
  color: var(--color-on-raised);
}
.nav-cta:active { opacity: 0.85; }

/* ── Mobile menu ── */
.menu-toggle {
  display: none;
  background: none; border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  padding: 10px 16px;
  cursor: pointer;
}
.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 250;
  background: var(--color-surface-base);
  padding: var(--space-10) var(--gutter);
  flex-direction: column; gap: var(--space-7);
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-3xl);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-hairline);
  padding-bottom: var(--space-5);
}
.mobile-menu a[aria-current="page"] { color: var(--color-accent); }
.mobile-menu .menu-close {
  align-self: flex-end;
  background: none; border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs); letter-spacing: 0.18em;
  padding: 10px 16px; cursor: pointer;
}

/* ================================================================
   Hero（トップ）
   ================================================================ */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-11) var(--gutter) var(--space-10);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 88% 8%, rgba(195, 157, 120, 0.20) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 70% at 5% 100%, rgba(246, 243, 239, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
    var(--color-surface-base);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--space-9);
  align-items: end;
}
.hero h1 {
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-display);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.02em;
}
.hero h1 .en { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.01em; }
.hero-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 2.1;
  max-width: 22em;
}
.hero-sub sup { color: var(--color-accent); font-size: 0.7em; }
.hero-actions { margin-top: var(--space-8); display: flex; gap: var(--space-6); flex-wrap: wrap; }
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: var(--space-10);
  writing-mode: vertical-rl;
  font-size: var(--font-size-xs);
  letter-spacing: 0.3em;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
}

/* ================================================================
   Page hero（下層ページ）
   ================================================================ */
.page-hero {
  padding: calc(92px + var(--space-10)) var(--gutter) var(--space-9);
  background:
    radial-gradient(100% 90% at 92% 0%, rgba(195, 157, 120, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
    var(--color-surface-base);
}
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-8);
}
.breadcrumb a { color: var(--color-text-tertiary); border-bottom: 1px solid transparent; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-accent); border-bottom-color: var(--color-border-strong); }
.breadcrumb .sep { color: var(--color-border-strong); }
.page-hero h1 {
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-page-title);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.page-hero .page-lead {
  margin-top: var(--space-7);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 2.2;
  max-width: 38em;
}
.status-chip {
  display: inline-block;
  margin-top: var(--space-6);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  color: var(--color-accent);
  border: 1px solid var(--color-border-strong);
  padding: 5px 14px;
}

/* ================================================================
   Buttons
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  padding: 16px 36px;
  border: 1px solid var(--color-text-primary);
  color: var(--color-text-primary);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.btn::after { content: "→"; transition: transform var(--motion-fast) var(--ease); }
.btn:hover, .btn:focus-visible {
  background: var(--color-surface-raised);
  border-color: var(--color-surface-raised);
  color: var(--color-on-raised);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(4px); }
.btn:active { opacity: 0.85; }
.btn--solid {
  background: var(--color-surface-raised);
  border-color: var(--color-surface-raised);
  color: var(--color-on-raised);
  font-weight: 500;
}
.btn--solid:hover, .btn--solid:focus-visible {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.text-link {
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.text-link:hover, .text-link:focus-visible { color: var(--color-accent); }

.more-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 4px;
  transition: color var(--motion-fast);
}
.more-link::after { content: "→"; transition: transform var(--motion-fast) var(--ease); }
.more-link:hover, .more-link:focus-visible { color: var(--color-accent); }
.more-link:hover::after, .more-link:focus-visible::after { transform: translateX(4px); }

/* ================================================================
   Sections（共通）
   ================================================================ */
.section { padding: var(--space-11) var(--gutter); border-top: 1px solid var(--color-border-hairline); }
.section--strong { background: var(--color-surface-strong); }
.section-label {
  display: flex; align-items: center; gap: var(--space-5);
  font-size: var(--font-size-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-9);
}
.section-label::before { content: ""; width: 40px; height: 1px; background: var(--color-border-strong); }
.section h2 {
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-heading);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* ── Philosophy ── */
.philosophy-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--space-10); align-items: start;
}
.philosophy-text {
  margin-top: var(--space-7);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 2.2;
  max-width: 34em;
}
.philosophy-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-2xl);
  line-height: 1.7;
  color: var(--color-accent);
  border-left: 1px solid var(--color-border-strong);
  padding-left: var(--space-7);
  margin-top: var(--space-4);
}

/* ── Facts strip ── */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border-hairline);
  margin-top: var(--space-10);
}
.fact { padding: var(--space-8) var(--space-6) 0 0; }
.fact + .fact { border-left: 1px solid var(--color-border-hairline); padding-left: var(--space-8); }
.fact-value {
  font-family: var(--font-serif);
  font-size: var(--font-size-4xl);
  line-height: 1.2;
  color: var(--color-text-primary);
}
.fact-value .unit { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin-left: 4px; }
.fact-label { margin-top: var(--space-4); font-size: var(--font-size-xs); letter-spacing: 0.14em; color: var(--color-text-tertiary); }

/* ── Business segments（トップの事業一覧） ── */
.segment-intro {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  line-height: 2.1; max-width: 36em; margin-top: var(--space-7);
}
.segments { margin-top: var(--space-9); border-top: 1px solid var(--color-border-hairline); }
.segment {
  display: grid;
  grid-template-columns: 88px minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-8);
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--color-border-hairline);
  transition: background var(--motion-fast);
}
.segment:hover { background: rgba(195, 157, 120, 0.06); }
.segment-num {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--color-accent);
  padding-top: 6px;
}
.segment h3 {
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-3xl);
  font-weight: 500;
  line-height: 1.5;
}
.segment-status {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  color: var(--color-accent);
  border: 1px solid var(--color-border-strong);
  padding: 5px 14px;
}
.segment-body p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 2.1; }
.segment-list { list-style: none; margin-top: var(--space-6); }
.segment-list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-hairline);
  position: relative;
}
.segment-list li::before {
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 8px; height: 1px; background: var(--color-border-strong);
}
.segment-note {
  margin-top: var(--space-6);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  line-height: 1.9;
}
.segment .more-link { margin-top: var(--space-6); }

/* ================================================================
   下層ページ用コンポーネント
   ================================================================ */
/* サービス詳細ブロック */
.detail-blocks { margin-top: var(--space-9); border-top: 1px solid var(--color-border-hairline); }
.detail-block {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-hairline);
}
.detail-block h3 {
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 1.6;
}
.detail-block p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 2.1; }

/* 進め方（プロセス） */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-9);
}
.process-step { border-top: 1px solid var(--color-border-strong); padding-top: var(--space-6); }
.process-num {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--color-accent);
}
.process-step h3 {
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin-top: var(--space-4);
}
.process-step p {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 2;
}

/* CTAバンド */
.cta-band { text-align: left; }
.cta-band .cta-inner { max-width: 40em; }
.cta-band p { margin-top: var(--space-6); font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 2.1; }
.cta-band .btn { margin-top: var(--space-8); }

/* 他事業への導線 */
.other-biz { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); margin-top: var(--space-9); }
.other-biz a {
  display: block;
  border: 1px solid var(--color-border-hairline);
  padding: var(--space-7);
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.other-biz a:hover, .other-biz a:focus-visible { border-color: var(--color-border-strong); background: var(--color-surface-strong); }
.other-biz .ob-label { font-size: var(--font-size-xs); letter-spacing: 0.2em; color: var(--color-accent); text-transform: uppercase; }
.other-biz .ob-title {
  display: block;
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-xl);
  font-weight: 500;
  margin-top: var(--space-4);
}

/* ── Company ── */
.company-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-10); align-items: start; margin-top: var(--space-4);
}
.company-lead { margin-top: var(--space-7); font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 2.2; }
.company-table { width: 100%; border-collapse: collapse; }
.company-table th, .company-table td {
  text-align: left; vertical-align: top;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-hairline);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-base);
}
.company-table tr:first-child th, .company-table tr:first-child td { border-top: 1px solid var(--color-border-hairline); }
.company-table th {
  width: 9em;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  padding-right: var(--space-6);
  white-space: nowrap;
}
.company-table td { color: var(--color-text-primary); line-height: 2; }

/* ── Contact ── */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-10); align-items: start; margin-top: var(--space-4);
}
.contact-lead { margin-top: var(--space-7); font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 2.2; }
.contact-email { display: inline-block; margin-top: var(--space-6); }

.contact-form { display: flex; flex-direction: column; }
.form-group {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-hairline);
}
.form-group:first-child { border-top: 1px solid var(--color-border-hairline); }
.form-group label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.form-group .jp-label { color: var(--color-text-secondary); letter-spacing: 0.08em; text-transform: none; margin-left: var(--space-4); }
input, textarea {
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  padding: var(--space-4) 0;
  caret-color: var(--color-accent);
}
input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); }
input:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--color-accent); }
textarea { resize: vertical; min-height: 120px; }
.contact-note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 2;
}
.submit-btn { margin-top: var(--space-8); align-self: flex-start; }
a.submit-btn { text-decoration: none; }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--color-border-hairline);
  background: var(--color-surface-strong);
  padding: var(--space-9) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-wordmark {
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  border: 1px solid var(--color-text-primary);
  padding: 8px 18px;
}
.footer-copy { font-size: var(--font-size-xs); color: var(--color-text-tertiary); letter-spacing: 0.08em; max-width: 60em; }
.to-top {
  font-size: var(--font-size-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.to-top:hover, .to-top:focus-visible { color: var(--color-accent); }

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-normal) var(--ease), transform var(--motion-normal) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: var(--motion-instant) !important; animation: none !important; }
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 960px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-scroll { display: none; }
  .philosophy-grid, .company-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .facts { grid-template-columns: 1fr; }
  .fact + .fact { border-left: none; border-top: 1px solid var(--color-border-hairline); padding-left: 0; margin-top: var(--space-6); padding-top: var(--space-6); }
  .segment { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-8) 0; }
  .segment-num { padding-top: 0; }
  .detail-block { grid-template-columns: 1fr; gap: var(--space-5); }
  .process-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .other-biz { grid-template-columns: 1fr; }
  .section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .page-hero { padding-top: calc(92px + var(--space-8)); }
  .company-table th { width: 7.5em; }
  footer.site-footer { flex-direction: column; align-items: flex-start; }
}