@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&family=Jost:wght@200;300;400&family=Klee+One:wght@400;600&family=Yomogi&family=Zen+Kurenaido&family=Yusei+Magic&family=Yuji+Syuku&family=Great+Vibes&family=Allura&display=swap');

:root{
  --ink:#262626;
  --ink-soft:#595959;
  --paper:#ffffff;
  --cream:#F2EDE3;
  --cream-deep:#EAE3D5;
  --hairline:#d9d9d6;
  --charcoal:#2E2E2C;
  --accent:#EA0069;
  --jp:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --latin:'Jost','Helvetica Neue',Arial,sans-serif;
  --hand:'Klee One',cursive;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--jp);font-weight:400;color:var(--ink);
  background:var(--paper);line-height:2;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 48px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(8px);
}
.logo img{height:44px;width:auto;display:block;}
nav{display:flex;gap:40px;}
nav a{
  font-family:var(--latin);font-weight:300;font-size:11px;
  letter-spacing:.3em;color:var(--ink-soft);text-decoration:none;transition:color .3s;
}
nav a:hover{color:var(--accent);}
nav a:focus-visible{outline:1px solid var(--accent);outline-offset:4px;}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:0 8vw;position:relative;overflow:hidden;
}
.hero-mark{position:absolute;left:-10vw;bottom:-12vh;width:50vw;max-width:600px;pointer-events:none;}
.hero-mark img{width:100%;height:auto;display:block;}
.hero-inner{position:relative;margin-left:auto;max-width:680px;width:100%;}
.eyebrow{
  font-family:var(--latin);font-weight:300;font-size:11px;
  letter-spacing:.44em;color:var(--ink-soft);margin-bottom:36px;
}
h1{font-weight:300;font-size:clamp(28px,4.2vw,50px);letter-spacing:.12em;line-height:1.9;}
.hero h1{font-family:var(--hand);font-weight:400;}
h1 .accent-dot{color:var(--accent);}
.hero-mission{margin-top:32px;font-size:14px;letter-spacing:.16em;color:var(--ink-soft);}
.lifeline{margin-top:72px;display:flex;align-items:center;width:100%;max-width:520px;}
.lifeline .line{flex:1;height:1px;background:var(--hairline);}
.lifeline .today{width:9px;height:9px;border-radius:50%;background:var(--accent);margin:0 2px;flex:none;}
.lifeline .line.after{background:linear-gradient(90deg,var(--hairline),transparent);}
.lifeline-caption{
  font-family:var(--latin);font-size:10px;letter-spacing:.34em;
  color:var(--ink-soft);margin-top:14px;max-width:520px;display:flex;justify-content:center;
}

/* ---------- shared ---------- */
section{padding:140px 8vw;position:relative;}
.section-label{
  font-family:var(--latin);font-weight:300;font-size:11px;
  letter-spacing:.44em;color:var(--ink-soft);margin-bottom:56px;
  display:flex;align-items:center;gap:20px;
}
.section-label::after{content:"";width:56px;height:1px;background:var(--hairline);}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- philosophy ---------- */
.concept-line{
  font-size:clamp(22px,3vw,34px);font-weight:300;
  letter-spacing:.14em;line-height:2.1;max-width:760px;
}
.concept-body{margin-top:36px;font-size:14px;line-height:2.4;color:#4a4a4a;max-width:640px;}

.mv-block{margin-top:110px;}
.mv-label{
  font-family:var(--latin);font-weight:300;font-size:12px;
  letter-spacing:.44em;color:var(--accent);margin-bottom:24px;
}
.mv-statement{
  font-size:clamp(19px,2.4vw,27px);font-weight:300;
  letter-spacing:.14em;line-height:2.1;max-width:760px;
}
.mv-body{margin-top:26px;font-size:13.5px;line-height:2.4;color:#4a4a4a;max-width:620px;}

.values{
  margin-top:110px;
}
.values-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--hairline);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.value{background:var(--paper);padding:44px 32px;}
.value .num{
  font-family:var(--latin);font-weight:300;font-size:11px;
  letter-spacing:.3em;color:var(--accent);display:block;margin-bottom:14px;
}
.value h3{font-weight:400;font-size:15.5px;letter-spacing:.18em;margin-bottom:14px;}
.value p{font-size:12.5px;line-height:2.1;color:var(--ink-soft);}

/* ---------- origin (社名・ロゴの由来) ---------- */
.origin{background:var(--cream);}
.origin .section-label::after{background:#cfc6b4;}
.origin-block{max-width:680px;margin-bottom:110px;}
.origin-block:last-child{margin-bottom:0;}
.origin-block h3{
  font-size:19px;font-weight:400;letter-spacing:.2em;margin-bottom:32px;
}
.origin-block p{font-size:13.5px;line-height:2.5;color:#4a4a4a;margin-bottom:1.8em;}
.origin-block p:last-child{margin-bottom:0;}
.origin-logo{
  display:grid;grid-template-columns:5fr 7fr;gap:7vw;align-items:center;max-width:1100px;
}
.origin-logo .markimg{
  background:#fff;padding:12%;
}
.origin-logo .markimg img{width:100%;height:auto;display:block;}

/* ---------- profile ---------- */
.about{background:var(--paper);}
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:8vw;align-items:start;max-width:1200px;}
.portrait img,.service-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.portrait{
  aspect-ratio:3/4;background:#ececea;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--latin);font-size:10px;letter-spacing:.3em;color:#aaa;
}
.about-name{font-size:26px;font-weight:400;letter-spacing:.22em;margin-bottom:6px;}
.about-name-en{font-family:var(--latin);font-weight:300;font-size:11px;letter-spacing:.34em;color:var(--ink-soft);margin-bottom:8px;}
.about-role{font-size:12px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:40px;}
.about-body p{font-size:13.5px;line-height:2.3;margin-bottom:1.6em;color:#4a4a4a;}
.about-facts{margin-top:44px;border-top:1px solid var(--hairline);}
.about-facts div{display:flex;gap:28px;padding:16px 0;border-bottom:1px solid var(--hairline);font-size:12.5px;}
.about-facts dt{font-family:var(--latin);letter-spacing:.24em;font-size:10px;color:var(--ink-soft);width:110px;flex:none;padding-top:4px;}
.about-facts dd{color:#4a4a4a;}

/* ---------- service ---------- */
.services{max-width:1200px;display:flex;flex-direction:column;gap:110px;}
.service{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;}
.service-photo{
  aspect-ratio:4/3;background:#ECEAE5;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--latin);font-size:10px;letter-spacing:.3em;color:#b0aca3;
}
.service.reverse .service-photo{order:-1;}
.service .en{
  font-family:var(--latin);font-weight:300;font-size:12px;
  letter-spacing:.4em;color:var(--accent);display:block;margin-bottom:18px;
}
.service h3{font-size:20px;font-weight:400;letter-spacing:.18em;margin-bottom:18px;}
.service p{font-size:13.5px;line-height:2.2;color:#4a4a4a;max-width:520px;}

/* ---------- company ---------- */
.company{background:#F7F6F3;}
.company table{width:100%;max-width:760px;border-collapse:collapse;font-size:13.5px;}
.company th,.company td{text-align:left;padding:20px 8px;border-bottom:1px solid var(--hairline);font-weight:300;vertical-align:top;}
.company th{width:180px;color:var(--ink-soft);font-size:11px;font-family:var(--latin);letter-spacing:.28em;padding-top:24px;}

/* ---------- contact ---------- */
.contact{text-align:center;padding:160px 8vw;}
.contact h2{font-size:clamp(20px,2.6vw,28px);font-weight:300;letter-spacing:.2em;margin-bottom:24px;}
.contact p{font-size:13px;color:var(--ink-soft);margin-bottom:56px;}
.btn{
  display:inline-block;font-family:var(--latin);font-weight:300;
  font-size:12px;letter-spacing:.36em;color:var(--ink);text-decoration:none;
  border:1px solid var(--ink);padding:20px 64px;transition:all .35s;
}
.btn:hover{background:var(--ink);color:#fff;}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* ---------- footer ---------- */
footer{background:var(--charcoal);color:#fff;padding:88px 8vw 48px;}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px;}
.footer-logo img{height:58px;width:auto;display:block;opacity:.95;}
.sns{display:flex;gap:24px;}
.sns a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:50%;
  transition:border-color .3s;
}
.sns a:hover{border-color:#fff;}
.sns svg{width:16px;height:16px;fill:#fff;}
.footer-nav{
  margin-top:56px;display:flex;gap:36px;flex-wrap:wrap;
  padding-top:40px;border-top:1px solid rgba(255,255,255,.14);
}
.footer-nav a{
  font-family:var(--latin);font-size:12px;letter-spacing:.3em;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .3s;
}
.footer-nav a:hover{color:#fff;}
footer small{
  display:block;margin-top:48px;
  font-family:var(--latin);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.5);
}

/* ---------- mobile ---------- */
@media(max-width:820px){
  header{padding:18px 24px;}
  .logo img{height:34px;}
  nav{gap:18px;}
  nav a{font-size:9px;letter-spacing:.16em;}
  .hero{padding:0 24px;}
  .hero-inner{margin-left:0;}
  section{padding:96px 24px;}
  .values-grid{grid-template-columns:1fr;}
  .origin-logo{grid-template-columns:1fr;gap:40px;}
  .about-grid{grid-template-columns:1fr;gap:48px;}
  .services{gap:72px;}
  .service{grid-template-columns:1fr;gap:24px;}
  .service.reverse .service-photo{order:0;}
  .contact{padding:120px 24px;}
  footer{padding:64px 24px 40px;}
}


/* ===== 複数ページ化に伴う追加 (2026-07-05) ===== */
.page-title{padding:160px 8vw 40px;}
.page-title .section-label{margin-bottom:12px;}
.page-title h2{font-size:clamp(22px,3vw,34px);font-weight:400;letter-spacing:.14em;}
.teaser{padding:110px 8vw;border-top:1px solid var(--hairline);}
.teaser-inner{max-width:760px;}
.teaser p.lead{font-size:17px;line-height:2.2;letter-spacing:.08em;}
.more-link{display:inline-block;margin-top:28px;font-family:var(--latin);font-size:12px;letter-spacing:.28em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:6px;}
.more-link:hover{color:var(--accent);border-color:var(--accent);}
.cta-band{padding:110px 8vw;text-align:center;background:var(--cream);}
.cta-band p{margin-bottom:28px;letter-spacing:.1em;}

/* ===== HERO 左寄せ確定版 (2026-07-05) ===== */
.hero{justify-content:center;}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;max-width:640px;margin:0;padding:0;left:0;}
.hero-mark{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(560px,72vw);max-width:none;opacity:.35;}
.hero .accent-bar{width:56px;height:2px;background:var(--accent);margin:38px 0 0;}
.hero .hero-mission{margin-top:34px;}

/* ===== HERO 動画バージョン (2026-07-05 デモ) ===== */
.hero-video{position:absolute;inset:0;z-index:0;}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block;}
.hero-video::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(22,24,28,.56) 0%,rgba(22,24,28,.48) 45%,rgba(22,24,28,.42) 100%);}
.hero-mark{display:none;}
.hero h1{color:#fff;font-size:clamp(34px,5.2vw,60px);text-shadow:0 2px 28px rgba(0,0,0,.3);}
.hero-script{color:rgba(255,255,255,.88);}
.hero .hero-mission{color:rgba(255,255,255,.92);}

/* ===== お問い合わせフォーム / プライバシー (2026-07-05) ===== */
.form-wrap{max-width:640px;padding:0 8vw 120px;}
.form-wrap .lead{margin-bottom:48px;line-height:2.2;}
.field{margin-bottom:32px;}
.field label{display:block;font-size:13px;letter-spacing:.12em;margin-bottom:10px;}
.field .req{color:var(--accent);font-size:11px;margin-left:8px;}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;padding:14px 16px;font-size:15px;
  border:1px solid var(--hairline);background:#fbfaf8;font-family:var(--jp);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--charcoal);}
.field textarea{min-height:180px;resize:vertical;}
.form-note{font-size:12.5px;color:var(--ink-soft);line-height:2;margin:36px 0;}
.form-note a{color:var(--ink);}
.submit-btn{display:inline-block;padding:16px 64px;background:var(--charcoal);color:#fff;border:none;
  font-family:var(--latin);font-size:13px;letter-spacing:.3em;cursor:pointer;}
.submit-btn:hover{background:var(--accent);}
.policy-wrap{max-width:760px;padding:0 8vw 120px;}
.policy-wrap h3{font-size:16px;letter-spacing:.1em;margin:48px 0 16px;font-weight:500;}
.policy-wrap p,.policy-wrap li{font-size:14.5px;line-height:2.2;color:var(--ink);}
.policy-wrap ol{padding-left:1.4em;}
.policy-date{margin-top:56px;color:var(--ink-soft);font-size:13px;}
.footer-legal{text-align:center;margin-top:10px;}
.footer-legal a{font-family:var(--latin);font-size:10px;letter-spacing:.2em;color:var(--ink-soft);text-decoration:none;}
.footer-legal a:hover{color:var(--accent);}

/* ===== VALUES 縦1列 + スライドイン / ロゴ透過 (2026-07-05) ===== */
.values-grid{grid-template-columns:1fr;}
.value{padding:44px 40px;}
.value.reveal{transform:translateX(-40px);}
.value.reveal.on{transform:none;}
.values-grid .value:nth-child(2){transition-delay:.1s;}
.values-grid .value:nth-child(3){transition-delay:.2s;}
.values-grid .value:nth-child(4){transition-delay:.3s;}
.values-grid .value:nth-child(5){transition-delay:.4s;}
.origin-logo .markimg,.markimg{background:transparent;padding:0;}

/* ============================================================
   DESIGN SYSTEM v1 (2026-07-07) — DESIGN.md 準拠
   タイポスケール・余白リズム・モーションを全ページで統一
   ============================================================ */

:root{
  /* type scale */
  --fs-hero: clamp(38px, 5.4vw, 64px);
  --fs-h2: clamp(26px, 3.2vw, 40px);
  --fs-h3: 19px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-label: 12px;
  /* spacing rhythm */
  --sp-section: clamp(120px, 16vh, 180px);
  --sp-mvv: 96px;
  --sp-block: 64px;
  --sp-el: 32px;
  --sp-tight: 16px;
  /* motion */
  --ease-rb: cubic-bezier(.22, 1, .36, 1);
}

/* ---- タイポグラフィの階層を強制 ---- */
body{font-size: var(--fs-body); line-height: 2.1; letter-spacing: .07em;}

.hero h1{
  font-size: var(--fs-hero) !important;
  line-height: 1.7; letter-spacing: .1em;
}

/* セクション見出し(h2)を大きく、階層をはっきり */
section h2, .page-title h2{
  font-size: var(--fs-h2);
  font-weight: 400; line-height: 1.6; letter-spacing: .12em;
}
section h3{font-size: var(--fs-h3); line-height: 1.8; letter-spacing: .14em; font-weight: 500;}

/* 英字ラベルの統一 */
.section-label, .rb-label, .eyebrow, .mv-label{
  font-family: var(--latin); font-weight: 300;
  font-size: var(--fs-label); letter-spacing: .42em;
  color: var(--ink-soft);
  margin-bottom: var(--sp-tight);
}

/* ---- 余白リズムの統一（全セクション同じ法則） ---- */
section, .teaser, .cta-band{
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}
.page-title{padding-top: 200px; padding-bottom: var(--sp-block);}

/* 同じ白背景が続く接続部は、セクション余白の二重化を避ける */
.teaser{padding-bottom:var(--sp-block);}
.page-title + #philosophy{padding-top:var(--sp-block);}

/* 本文ブロックの行長制御（全角38字以内） */
.teaser-inner, .origin-block, .policy-wrap p, .form-wrap .lead{max-width: 680px;}

/* ---- モーションの統一（1種類だけ） ---- */
.reveal{
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease-rb), transform .8s var(--ease-rb);
}
.reveal.on{opacity: 1; transform: none;}
.value.reveal{transform: translateX(-40px);}
.value.reveal.on{transform: none;}
.values-grid .value:nth-child(2){transition-delay: .09s;}
.values-grid .value:nth-child(3){transition-delay: .18s;}
.values-grid .value:nth-child(4){transition-delay: .27s;}
.values-grid .value:nth-child(5){transition-delay: .36s;}

/* hoverは0.3s固定 */
a, button{transition: color .3s ease, background-color .3s ease, border-color .3s ease;}

/* ---- ノイズ削減 ---- */
.more-link{margin-top: var(--sp-el);}
.cta-band p{margin-bottom: var(--sp-el);}
.submit-btn{border-radius: 0;}

/* ============================================================
   HERO 磨き込み (2026-07-07) — 出現振り付け・透明ヘッダー・スクロールキュー
   ============================================================ */

/* ---- 出現の振り付け(読み込み時に1度だけ・全て同じ動きで時差) ---- */
@keyframes rbRise{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes rbBar{from{width:0;opacity:0;}to{width:56px;opacity:1;}}

.hero h1 .hl{display:inline-block;}
.hero h1 .hl1{animation:rbRise .9s var(--ease-rb) .25s both;}
.hero h1 .hl2{animation:rbRise .9s var(--ease-rb) .45s both;}
.hero .accent-bar{animation:rbBar .8s var(--ease-rb) .95s both;}
.hero .hero-mission{animation:rbRise .8s var(--ease-rb) 1.1s both;}

@media (prefers-reduced-motion: reduce){
  .hero h1 .hl,.hero .accent-bar,.hero .hero-mission,.scroll-cue::after{animation:none;}
}

/* ---- スクロールキュー(画面下・細い1本線が静かに流れる) ---- */
.scroll-cue{
  position:absolute;bottom:0;left:50%;z-index:2;
  width:1px;height:64px;overflow:hidden;background:rgba(255,255,255,.16);
}
.scroll-cue::after{
  content:'';position:absolute;top:-100%;left:0;width:1px;height:100%;
  background:rgba(255,255,255,.7);
  animation:rbCue 2.6s var(--ease-rb) 1.8s infinite;
}
@keyframes rbCue{0%{transform:translateY(0);}100%{transform:translateY(200%);}}

/* ---- 透明→白ヘッダー ---- */
header{transition:background-color .4s ease, box-shadow .4s ease;}
.logo img.logo-light{display:none;}
header.at-top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
header.at-top .logo img.logo-dark{display:none;}
header.at-top .logo img.logo-light{display:block;height:44px;width:auto;}
header.at-top nav a{color:rgba(255,255,255,.85);}
header.at-top nav a:hover{color:#fff;}

/* ============================================================
   モバイルメニュー (2026-07-07) — ハンバーガー + フルスクリーンオーバーレイ
   ============================================================ */
.menu-btn{display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0;}
.menu-btn span{display:block;width:26px;height:1.5px;background:var(--ink);margin:5px auto;
  transition:transform .3s ease, background-color .3s ease;}
header.at-top .menu-btn span{background:#fff;}

.menu-overlay{position:fixed;inset:0;z-index:90;background:rgba(28,29,33,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s ease, visibility .4s ease;}
.menu-overlay-nav{display:flex;flex-direction:column;gap:40px;text-align:center;}
.menu-overlay-nav a{font-family:var(--latin);font-size:15px;letter-spacing:.42em;
  color:rgba(255,255,255,.85);text-decoration:none;}
.menu-overlay-nav a:hover{color:#fff;}

body.menu-open{overflow:hidden;}
body.menu-open .menu-overlay{opacity:1;visibility:visible;}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(3.25px) rotate(45deg);background:#fff;}
body.menu-open .menu-btn span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg);background:#fff;}
/* メニュー展開中はヘッダーを透過し、白ロゴに切り替え(オーバーレイに溶け込ませる) */
body.menu-open header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
body.menu-open header .logo img.logo-dark{display:none;}
body.menu-open header .logo img.logo-light{display:block;height:34px;width:auto;}

@media (max-width:820px){
  header nav{display:none;}
  .menu-btn{display:block;}
}

/* ============================================================
   ABOUTページ磨き込み (2026-07-07) — 章の開き・MVVの階層・VALUESの編集的リズム
   ============================================================ */

/* ---- 全下層ページ共通: ページタイトルの静かな開き(読み込み時) ---- */
.page-title .section-label{animation:rbRise .8s var(--ease-rb) .15s both;}
.page-title h2{animation:rbRise .8s var(--ease-rb) .3s both;}

/* ---- 章の詩的な一行(ReBIRTHDAYとは…)を手書きフォントで格上げ ---- */
.concept-line{
  font-family:var(--hand);
  font-size:clamp(26px,3.4vw,42px);
  font-weight:400;letter-spacing:.12em;line-height:2;
  max-width:920px;
}
.concept-body{font-size:var(--fs-body);line-height:2.2;color:var(--ink);max-width:680px;}

/* ---- MISSION/VISIONの階層をはっきり ---- */
.mv-block{margin-top:var(--sp-mvv);}
.mv-label{color:var(--accent);}  /* 画面内の唯一のアクセントとして復帰 */
.mv-statement{
  font-size:var(--fs-h2);
  font-weight:400;letter-spacing:.12em;line-height:1.9;max-width:900px;
}
.mobile-break{display:none;}
.mv-body{margin-top:var(--sp-el);font-size:var(--fs-body);line-height:2.2;color:var(--ink);max-width:680px;}

/* ---- VALUES: 編集的なリズム ---- */
.values{margin-top:var(--sp-mvv);}
.values-grid{
  max-width:1080px;gap:0;background:transparent;
  border-top:1px solid var(--hairline);border-bottom:0;
}
.value{
  display:grid;grid-template-columns:64px minmax(240px,300px) minmax(0,1fr);
  gap:32px;align-items:start;padding:48px 0;
  background:transparent;border-bottom:1px solid var(--hairline);
}
.value .num{
  font-size:13px;letter-spacing:.34em;margin:3px 0 0;
}
.value h3{margin:0;}
.value p{font-size:var(--fs-small);line-height:2.1;color:var(--ink-soft);max-width:620px;}

/* ---- ORIGIN(クリーム面)の呼吸 ---- */
.origin-block h3{margin-bottom:var(--sp-el);}
.origin-block p{font-size:var(--fs-body);line-height:2.4;color:var(--ink);}

/* ============================================================
   COMPANY / CONTACT 磨き込み (2026-07-09)
   ============================================================ */

/* 会社概要テーブル: 読みやすい本文サイズ・ゆったりした行 */
.company table{font-size:var(--fs-body);}
.company th,.company td{padding:28px 8px;font-weight:400;}
.company th{font-size:var(--fs-label);letter-spacing:.32em;padding-top:32px;}
.company td{line-height:2;}

/* お問い合わせフォーム: 呼吸と所作 */
.form-wrap{padding-bottom:var(--sp-section);}
.field{margin-bottom:40px;}
.field label{font-size:var(--fs-small);letter-spacing:.14em;margin-bottom:12px;}
.field input,.field select,.field textarea{
  padding:16px 18px;font-size:var(--fs-body);
  transition:border-color .3s ease, background-color .3s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;}
.submit-btn{padding:18px 72px;letter-spacing:.34em;}

/* フォーム幅の適正化 (2026-07-09) */
.form-wrap{max-width:none;}
.form-wrap .lead{max-width:640px;}
.field,.form-note{max-width:560px;}

/* フッター調整 (2026-07-09): コピーライト中央揃え・PRIVACY POLICYをナビと同じ白系に */
footer small{text-align:center;}
.footer-legal a{color:rgba(255,255,255,.6);}
.footer-legal a:hover{color:#fff;border-color:#fff;}

/* SNSアイコン: 通常モノクロ / hover・focus時のみ公式色 (2026-07-11改正) */
.sns{gap:16px;}
.sns a{width:38px;height:38px;border:none;border-radius:0;opacity:.74;transition:opacity .3s ease, transform .3s ease;}
.sns a:hover,.sns a:focus-visible{opacity:1;transform:translateY(-2px);}
.sns a:focus-visible{outline:1px solid var(--accent);outline-offset:4px;}
.sns svg{width:38px;height:38px;fill:none;}
.sns svg circle,.sns svg rect,.sns svg path{transition:fill .3s ease,stroke .3s ease;}
.sns .icon-x circle{fill:transparent;stroke:#fff;stroke-width:1;}
.sns .icon-x path{fill:#fff;}
.sns .icon-instagram rect{fill:transparent;stroke:#fff;stroke-width:1.2;}
.sns .icon-instagram path{fill:#fff;}
.sns .icon-spotify path{fill:#fff;}
.sns a:hover .icon-x circle,.sns a:focus-visible .icon-x circle{fill:#fff;stroke:#fff;}
.sns a:hover .icon-x path,.sns a:focus-visible .icon-x path{fill:#000;}
.sns a:hover .icon-instagram rect,.sns a:focus-visible .icon-instagram rect{fill:url(#igGrad);stroke:transparent;}
.sns a:hover .icon-spotify path,.sns a:focus-visible .icon-spotify path{fill:#1DB954;}

/* ===== 写真の角丸 (2026-07-10 DESIGN.md改正) ===== */
:root{--radius-photo:18px;}
.service-photo,.portrait{border-radius:var(--radius-photo);overflow:hidden;}
.service-photo img,.portrait img{border-radius:var(--radius-photo);}

/* ===== モバイルの情報密度調整 (2026-07-11 DESIGN.md改正) ===== */
@media (max-width:820px){
  :root{
    --sp-section:96px;
    --sp-mvv:64px;
  }

  #service{padding-top:var(--sp-block);}
  .page-title + #philosophy{padding-top:var(--sp-el);}

  .mobile-break{display:initial;}
  .desktop-break{display:none;}
  .mv-statement{letter-spacing:0;line-height:1.8;}

  .portrait{aspect-ratio:3/2;}
  .portrait img{
    object-position:50% 0;
    transform:scale(1.45);
    transform-origin:50% 0;
  }

  .value{
    grid-template-columns:1fr;gap:12px;padding:36px 0;
  }
  .value .num{margin:0 0 2px;}
  .value p{max-width:none;}

  .company table,.company tbody{display:block;width:100%;}
  .company tr{display:block;padding:28px 0;border-bottom:1px solid var(--hairline);}
  .company th,.company td{display:block;width:100%;padding:0;border:0;}
  .company th{margin-bottom:10px;font-size:var(--fs-label);line-height:1.5;}
  .company td{line-height:2;overflow-wrap:anywhere;}
}

/* ===== CTAバンドのボタン化 (2026-07-29 公開前点検) ===== */
.cta-band .section-label{display:block;text-align:center;}
.cta-band .section-label::after{display:none;}
.cta-btn{
  display:inline-block;margin-top:var(--sp-el);
  padding:18px 64px;background:var(--charcoal);color:#fff;
  font-size:14px;letter-spacing:.24em;text-decoration:none;
  transition:background-color .3s ease;
}
.cta-btn:hover{background:var(--accent);color:#fff;}

/* ===== NEWS (2026-07-30 公開) ===== */
.news{
  padding:72px 8vw;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.news-inner{max-width:1200px;}
.news .section-label{margin-bottom:var(--sp-el);}
.news-item{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:32px;
  align-items:baseline;
  padding:24px 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.news-item time{
  font-family:var(--latin);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.news-item p{font-size:14px;letter-spacing:.08em;}

@media (max-width:820px){
  .news{padding:56px 24px;}
  .news-item{grid-template-columns:1fr;gap:8px;padding:20px 0;}
  .news-item p{font-size:13px;line-height:1.9;}
}