/* ========== Y-TRAINING 共通スタイル ========== */
:root{
  --red:#C8102E;
  --red-deep:#9A0823;
  --red-bright:#E30613;
  --ink:#0e0e0e;
  --gray-900:#1c1c1c;
  --gray-800:#2a2a2a;
  --gray-700:#444;
  --gray-500:#6e6e6e;
  --gray-300:#c8c8c8;
  --gray-200:#e8e8e8;
  --gray-100:#f3f3f3;
  --gray-50:#fafafa;
  --paper:#ffffff;
  --serif:"Shippori Mincho","Noto Serif JP",serif;
  --sans:"Noto Sans JP",system-ui,sans-serif;
  --num:"Montserrat",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.85;-webkit-font-smoothing:antialiased;font-size:15px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:opacity .2s,color .2s}
ul{list-style:none}

/* Notice bar */
.notice{background:var(--ink);color:#aaa;font-size:11px;padding:6px 24px;text-align:center;letter-spacing:.05em}

/* Header */
.nav{position:sticky;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200)}
.nav-inner{max-width:1360px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo img{height:38px;width:auto;display:block}
/* Fallback for inline mark + text */
.logo-mark{width:36px;height:36px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:800;font-size:22px;border-radius:2px}
.logo-text{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.04em;line-height:1.2}
.logo-text small{display:block;font-size:9px;color:var(--gray-500);letter-spacing:.2em;font-family:var(--num);font-weight:500}
.nav-menu{display:flex;gap:22px;font-size:14.5px;font-weight:600}
.nav-menu a{padding:8px 0;position:relative;color:var(--gray-700);white-space:nowrap}
.nav-menu a:hover,.nav-menu a.active{color:var(--red)}

/* Header right-side action group (TEL / LINE / RESERVE) */
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-mini{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--gray-300);border-radius:2px;color:var(--ink);transition:all .2s;line-height:1.2}
.nav-mini:hover{border-color:var(--red);color:var(--red)}
.nav-mini-icon{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:800;font-size:14px;background:var(--gray-100);color:var(--ink);transition:all .2s;flex-shrink:0}
.nav-mini:hover .nav-mini-icon{background:var(--red);color:#fff}
.nav-mini-text{display:flex;flex-direction:column;font-size:13px;font-weight:700;letter-spacing:.03em;font-family:var(--num)}
.nav-mini-text small{font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--gray-500);margin-bottom:1px}
.nav-line .nav-mini-icon{background:#06c755;color:#fff}
.nav-line:hover .nav-mini-icon{background:#05a548}
.nav-line:hover{border-color:#06c755;color:#06c755}
.nav-cta{background:var(--red);color:#fff;padding:14px 22px;border-radius:2px;font-size:14px;font-weight:700;letter-spacing:.08em;transition:background .2s;white-space:nowrap}
.nav-cta:hover{background:var(--red-deep)}

/* Hamburger button */
.nav-burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;background:transparent;border:none;padding:0;z-index:100;transition:transform .2s}
.nav-burger span{width:22px;height:2px;background:var(--ink);display:block;transition:all .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-drawer{position:fixed;top:0;right:-100%;width:88%;max-width:380px;height:100vh;background:#0a0a0a;color:#fff;z-index:99;transition:right .35s cubic-bezier(.2,.7,.2,1);overflow-y:auto;padding:72px 30px 32px;display:flex;flex-direction:column}
.mobile-drawer.open{right:0}
.mobile-drawer h4{font-family:var(--num);font-size:10px;color:var(--red-bright);letter-spacing:.3em;font-weight:700;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid #222}
.mobile-drawer h4.subhead{margin-top:20px}
.mobile-drawer ul{margin-bottom:6px}
.mobile-drawer li{border-bottom:1px solid #1a1a1a}
.mobile-drawer li a{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-family:var(--serif);font-size:15px;font-weight:700;color:#fff;letter-spacing:.05em}
.mobile-drawer li a::after{content:"›";font-weight:300;color:var(--red-bright);font-size:18px;transition:transform .2s}
.mobile-drawer li a:hover{color:var(--red-bright)}
.mobile-drawer li a:hover::after{transform:translateX(4px)}
.mobile-drawer li a.active{color:var(--red-bright)}
.mobile-drawer .drawer-cta-group{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.mobile-drawer .drawer-cta{display:block;background:var(--red);color:#fff;padding:18px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.15em;border-radius:2px}
.mobile-drawer .drawer-cta:hover{background:var(--red-deep)}
.mobile-drawer .drawer-cta-tel{background:#fff;color:var(--ink);padding:14px}
.mobile-drawer .drawer-cta-tel:hover{background:var(--gray-100)}
.mobile-drawer .drawer-cta-line{background:#06c755;color:#fff;padding:14px}
.mobile-drawer .drawer-cta-line:hover{background:#05a548}
.mobile-drawer .drawer-foot{margin-top:auto;padding-top:32px;font-size:11px;color:#888;text-align:center;line-height:2}
.mobile-drawer .drawer-foot strong{display:block;font-family:var(--num);font-size:13px;color:#fff;letter-spacing:.05em;margin-bottom:4px}

.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:98;opacity:0;visibility:hidden;transition:all .25s}
.drawer-overlay.open{opacity:1;visibility:visible}

body.drawer-open{overflow:hidden}

/* Local nav は廃止（2026-05 修正で全ナビをグローバル8項目へ統合） */

/* Page hero (inner pages) */
.page-hero{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%);color:#fff;padding:64px 28px 52px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:400px;font-weight:800;color:rgba(200,16,46,.05);line-height:.8;pointer-events:none}
.page-hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.crumb{font-size:11px;color:#888;margin-bottom:24px;font-family:var(--num);letter-spacing:.1em}
.crumb a{color:#aaa}
.crumb a:hover{color:#fff}
.crumb span{margin:0 8px;color:#555}
.page-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--num);font-size:11px;letter-spacing:.35em;color:var(--red-bright);margin-bottom:18px;font-weight:700}
.page-eyebrow::before{content:"";width:32px;height:1px;background:var(--red-bright)}
.page-title{font-family:var(--serif);font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.4;letter-spacing:.02em;color:#fff}
.page-title em{color:var(--red-bright);font-style:normal}
.page-lead{font-size:15px;line-height:2;color:#d8d8d8;max-width:720px;margin-top:24px}

/* Sections */
section{padding:100px 28px}
.container{max-width:1280px;margin:0 auto}
.sec-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--num);font-size:11px;letter-spacing:.35em;color:var(--red);margin-bottom:18px;font-weight:700}
.sec-eyebrow::before{content:"";width:32px;height:1px;background:var(--red)}
.sec-heading{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.5;letter-spacing:.02em;margin-bottom:16px}
.sec-sub{font-size:14px;color:var(--gray-500);margin-bottom:56px;max-width:680px;line-height:1.95}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;font-weight:700;font-size:13px;letter-spacing:.12em;border-radius:2px;transition:all .25s;border:1px solid transparent;cursor:pointer}
.btn::after{content:"→";font-weight:400;transition:transform .2s}
.btn:hover::after{transform:translateX(4px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn-ghost{border-color:#fff;color:#fff;background:transparent}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:transparent;color:var(--ink)}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}

/* Footer */
footer{background:#0a0a0a;color:#888;padding:80px 28px 28px;font-size:12px;line-height:2}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 3fr;gap:64px;margin-bottom:48px}
.footer-brand{padding-right:24px;border-right:1px solid #222}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.footer-logo img{height:40px;width:auto;display:block;filter:brightness(0) invert(1)}
.footer-logo .logo-mark{width:40px;height:40px;font-size:24px}
.footer-logo-text{font-family:var(--serif);font-size:18px;color:#fff;font-weight:800;letter-spacing:.04em}
.footer-logo-text small{display:block;font-size:9px;color:#666;letter-spacing:.2em;font-family:var(--num);font-weight:500}
.footer-brand p{font-size:11px;color:#888;line-height:2;margin-bottom:24px}
.footer-sns{display:flex;gap:10px}
.footer-sns a{width:36px;height:36px;border:1px solid #333;display:flex;align-items:center;justify-content:center;font-size:13px;color:#888;border-radius:50%;transition:all .2s;font-weight:600}
.footer-sns a:hover{border-color:var(--red);color:var(--red)}
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.footer-col h4{font-family:var(--serif);color:#fff;font-size:12px;margin-bottom:18px;letter-spacing:.15em;font-weight:700}
.footer-col li{margin-bottom:8px}
.footer-col a{font-size:11px;color:#999}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:1280px;margin:0 auto;border-top:1px solid #222;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:11px;color:#666}
.footer-legal{display:flex;gap:24px}
.footer-legal a:hover{color:#aaa}

/* CTA */
.cta{background:linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%);color:#fff;text-align:center;padding:80px 28px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.15))}
.cta-inner{position:relative;z-index:1;max-width:840px;margin:0 auto}
.cta h2{font-family:var(--serif);font-size:clamp(24px,3vw,36px);font-weight:800;line-height:1.6;margin-bottom:18px}
.cta p{font-size:14px;margin-bottom:36px;line-height:2;opacity:.95}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .btn-primary{background:#fff;color:var(--red);font-size:13px}
.cta .btn-primary:hover{background:var(--ink);color:#fff}
.cta .btn-ghost{border-color:#fff;font-size:13px}

/* ========== Floating CTA Bar (Mobile only — TEL / LINE / RESERVE) ========== */
.fcta-bar{position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;background:#fff;border-top:1px solid var(--gray-200);box-shadow:0 -4px 20px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom)}
.fcta-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center;padding:0 4px;color:#fff;text-decoration:none;font-weight:700;line-height:1.2;min-height:56px;transition:filter .2s}
.fcta-btn:active{filter:brightness(.88)}
.fcta-lbl{font-size:14px;letter-spacing:.08em;white-space:nowrap}
/* ブランド名など、英数字を行頭で割らない（Y-TRAINING が「Y-」で改行されるのを防ぐ） */
.nw{white-space:nowrap}
.fcta-tel{background:var(--ink)}
.fcta-line{background:#06c755}
.fcta-reserve{background:var(--red)}

/* Mobile: show bottom bar */
@media(max-width:880px){
  .fcta-bar{display:flex}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* Responsive */
@media(max-width:1180px){
  .nav-menu{gap:16px;font-size:13.5px}
  .nav-mini-text{display:none}
  .nav-mini{padding:9px}
  .nav-cta{padding:12px 16px;font-size:13px}
}
@media(max-width:880px){
  .nav-menu,.nav-actions{display:none}
  .nav-burger{display:flex}
  section{padding:70px 24px}
  .footer-inner{grid-template-columns:1fr;gap:40px}
  .footer-brand{border-right:none;padding-right:0;padding-bottom:32px;border-bottom:1px solid #222}
  .footer-links{grid-template-columns:1fr 1fr}
}
@media(min-width:881px){
  .mobile-drawer,.drawer-overlay{display:none !important}
}

/* ============================================================
   ▼ Premium UI/UX Layer (notahotel.com 系の上品さを足す)
   2026-05-11 追加。レイアウト構造には触らず、補助レイヤーのみ。
============================================================ */

/* --- Typography refinements --- */
.hero h1{letter-spacing:.04em}
.page-title{letter-spacing:.04em}
.sec-heading{letter-spacing:.04em}
.hero-eyebrow,.page-eyebrow,.sec-eyebrow{letter-spacing:.45em}

/* 余白増し（余裕のあるエディトリアル感） */
@media(min-width:881px){
  section{padding:120px 28px}
  .page-hero{padding:72px 28px 56px}
  .sec-sub{margin-bottom:72px}
}

/* --- Page entry fade --- */
@media (prefers-reduced-motion: no-preference){
  body{animation:pageEnter .9s cubic-bezier(.2,.7,.2,1)}
  @keyframes pageEnter{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
  }
}

/* --- Hero Ken Burns（ゆっくりズーム） --- */
@media (prefers-reduced-motion: no-preference){
  .hero::before{animation:kenburns 22s ease-in-out infinite alternate;will-change:transform}
  @keyframes kenburns{
    0%{transform:scale(1.04) translateX(0)}
    100%{transform:scale(1.14) translateX(-1.5%)}
  }
}

/* --- Subtle grain on hero（高級感の質感） --- */
.hero::after{
  background:linear-gradient(110deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.7) 50%,rgba(40,6,8,.55) 100%),
             url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Scroll reveal --- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .reveal.visible{opacity:1;transform:none}
  .reveal-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal-stagger.visible > *{opacity:1;transform:none}
  .reveal-stagger.visible > *:nth-child(1){transition-delay:.05s}
  .reveal-stagger.visible > *:nth-child(2){transition-delay:.18s}
  .reveal-stagger.visible > *:nth-child(3){transition-delay:.31s}
  .reveal-stagger.visible > *:nth-child(4){transition-delay:.44s}
  .reveal-stagger.visible > *:nth-child(5){transition-delay:.57s}
  .reveal-stagger.visible > *:nth-child(6){transition-delay:.70s}
}

/* --- Card image hover zoom（コンテナがoverflow:hiddenの前提） --- */
.biz-card .biz-img,
.bcard .bcard-img,
.blog-card .blog-img,
.svc .svc-img,
.tr .tr-photo,
.cs-card .cs-img,
.player-card img{
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .8s ease
}
.biz-card:hover .biz-img,
.bcard:hover .bcard-img,
.blog-card:hover .blog-img,
.svc:hover .svc-img,
.tr:hover .tr-photo,
.cs-card:hover .cs-img{
  transform:scale(1.06)
}
.player-card:hover img{transform:scale(1.04)}

/* hover時に若干暗くして文字を強調 */
.biz-card .biz-img::after,
.bcard .bcard-img::after{
  transition:opacity .6s
}

/* --- Animated underline for inline links --- */
.crumb a,
.tr-link,
.svc-link,
.biz-link,
.bcard-title,
.blog-title,
.me-link,
.access-info a,
.cs-tags{
  position:relative
}

/* link underline animation utility（既存のテキストリンク強化） */
a.link-anim,
.nav-menu a{
  position:relative;padding-bottom:2px;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .55s cubic-bezier(.2,.7,.2,1),color .25s
}
a.link-anim:hover,
.nav-menu a:hover{background-size:100% 1px}

/* --- 数字を編集的に大きく見せる（eyebrow用ユーティリティ） --- */
.editorial-num{
  font-family:var(--num);font-size:clamp(72px,10vw,140px);font-weight:800;
  line-height:.9;letter-spacing:-.04em;color:rgba(0,0,0,.04);
  position:absolute;pointer-events:none;user-select:none
}

/* FCTA pulse animation removed — 3ボタンバー方式に変更 */

/* --- Improved button hovers --- */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.2,.7,.2,1);
  z-index:-1;opacity:.06
}
.btn:hover::before{transform:scaleX(1);transform-origin:left}

/* --- Custom cursor (desktop only) --- */
@media (pointer:fine){
  body{cursor:none}
  a,button,.btn,input,textarea,select,label,[role="button"]{cursor:none}
  #cursor-dot{
    position:fixed;left:0;top:0;width:6px;height:6px;background:var(--red);
    border-radius:50%;pointer-events:none;z-index:9999;
    transform:translate(-50%,-50%);mix-blend-mode:difference;
    transition:width .2s ease,height .2s ease,opacity .2s
  }
  #cursor-ring{
    position:fixed;left:0;top:0;width:32px;height:32px;
    border:1px solid rgba(200,16,46,.6);border-radius:50%;
    pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
    transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),
               border-color .35s,background .35s,opacity .25s
  }
  body.cursor-hover #cursor-dot{width:0;height:0;opacity:0}
  body.cursor-hover #cursor-ring{
    width:56px;height:56px;background:rgba(200,16,46,.08);border-color:var(--red)
  }
  body.cursor-hidden #cursor-dot,
  body.cursor-hidden #cursor-ring{opacity:0}
}
@media (pointer:coarse){
  #cursor-dot,#cursor-ring{display:none !important}
}

/* --- Marquee 強化（既存のpartnersをよりスムーズに） --- */
.partner-logo{
  transition:color .35s cubic-bezier(.2,.7,.2,1),background .35s
}
.partner-logo:hover{background:var(--gray-50)}

/* --- 画像のシネマティック感 --- */
.biz-img,.svc-img,.tr-photo,.bcard-img,.blog-img,.cs-img,.page-hero,.hero{
  will-change:transform
}

/* --- Splash / Opening loader（TOP初回訪問のみ） --- */
.splash{
  position:fixed;inset:0;z-index:99999;background:#0a0a0a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
  overflow:hidden
}
.splash::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(200,16,46,.12) 0%,transparent 60%);
  pointer-events:none
}
.splash-logo{
  opacity:0;transform:scale(.94) translateY(8px);
  animation:splashLogoIn 1s cubic-bezier(.2,.7,.2,1) .25s forwards;
  position:relative;z-index:1
}
.splash-logo img{
  width:clamp(180px,28vw,300px);height:auto;display:block;
  filter:brightness(0) invert(1)
}
.splash-bar{
  width:1px;height:48px;background:var(--red);margin:32px auto 0;
  opacity:0;animation:splashBar .8s ease .9s forwards;transform-origin:top
}
.splash-meta{
  opacity:0;margin-top:24px;text-align:center;color:#888;
  font-family:var(--num);font-size:10px;letter-spacing:.45em;font-weight:600;
  animation:splashMeta .9s cubic-bezier(.2,.7,.2,1) 1.1s forwards
}
.splash-meta small{display:block;font-size:9px;color:#555;letter-spacing:.35em;margin-top:6px}
.splash.exit{transform:translateY(-100%)}
.splash-overlay-bottom{
  position:absolute;left:0;right:0;bottom:0;background:#0a0a0a;
  transform-origin:top;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1) .15s;
  z-index:0
}
@keyframes splashLogoIn{
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes splashBar{
  0%{opacity:0;transform:scaleY(0)}
  100%{opacity:1;transform:scaleY(1)}
}
@keyframes splashMeta{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}

/* スプラッシュ中はスクロール禁止 */
html.splash-active,html.splash-active body{overflow:hidden;height:100vh}

/* スプラッシュ中はカーソル無し */
html.splash-active #cursor-dot,
html.splash-active #cursor-ring{opacity:0}

/* ============================================================
   ▼ Architects-style refinements（2026-05-12 追加）
   notahotel.com / architects 系のミニマル建築的演出
============================================================ */

/* --- Big background numbers as editorial design --- */
.bg-numeral{position:absolute;font-family:var(--num);font-weight:800;color:rgba(0,0,0,.045);
  font-size:clamp(180px,22vw,360px);line-height:.85;letter-spacing:-.04em;pointer-events:none;
  user-select:none;z-index:0}
.bg-numeral-light{color:rgba(255,255,255,.06)}

/* --- Editorial header (issue + date) --- */
.editorial-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--num);font-size:10px;letter-spacing:.4em;font-weight:600;
  color:var(--gray-500);padding:14px 0;border-bottom:1px solid var(--gray-200);
  margin-bottom:48px;text-transform:uppercase
}
.editorial-meta span:last-child{color:var(--ink);font-weight:700}

/* --- Larger hero typography for top page --- */
.hero h1{
  font-weight:800;
  font-size:clamp(40px,7.2vw,86px);
  line-height:1.2;letter-spacing:.02em
}
.hero h1 em{display:inline-block}
.hero h1 .small{font-size:.38em;letter-spacing:.06em;color:#999;margin-top:18px}

/* --- More restrained Hero lead --- */
.hero-lead{font-size:15px;color:#c8c8c8;line-height:2.15;letter-spacing:.04em}

/* --- Tighter section sub --- */
.sec-sub{color:var(--gray-700);font-size:13px;line-height:2.1}

/* --- Image + caption pair style (architects) --- */
.feature-shot{display:grid;grid-template-columns:8fr 4fr;gap:48px;align-items:end;margin-top:48px}
.feature-shot-img{aspect-ratio:5/7;background-size:cover;background-position:center}
.feature-shot-cap{padding-bottom:32px;font-size:12px;color:var(--gray-700);line-height:2}
.feature-shot-cap strong{display:block;font-family:var(--serif);font-size:14px;color:var(--ink);font-weight:700;margin-bottom:6px;letter-spacing:.04em}
@media(max-width:840px){.feature-shot{grid-template-columns:1fr;gap:24px}.feature-shot-img{aspect-ratio:4/3}.feature-shot-cap{padding-bottom:0}}

/* --- Numbered chapter divider --- */
.chapter-divider{
  display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:baseline;
  padding:48px 0 36px;border-top:1px solid var(--gray-200);margin-top:80px
}
.chapter-divider-num{font-family:var(--num);font-size:14px;font-weight:700;color:var(--red);letter-spacing:.2em}
.chapter-divider-title{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.04em}
.chapter-divider-en{font-family:var(--num);font-size:10px;font-weight:600;color:var(--gray-500);letter-spacing:.35em;text-transform:uppercase}

/* --- Refined business card hover (more architects-style) --- */
.biz-card{border-color:var(--gray-100)}
.biz-card:hover{border-color:var(--red);transform:translateY(-6px)}
.biz-card .biz-body{padding:40px 32px 44px}
.biz-title{font-size:18px;line-height:1.7;margin-bottom:18px;letter-spacing:.03em}
.biz-desc{font-size:12px;line-height:2.05;color:var(--gray-600);letter-spacing:.02em}
.biz-cat{font-size:10px;letter-spacing:.35em;color:var(--gray-500);margin-bottom:12px}
.biz-card:hover .biz-cat{color:var(--red)}

/* --- Page hero refinements --- */
.page-hero{padding:72px 28px 56px}
.page-title{font-weight:800;line-height:1.3;font-size:clamp(30px,4.6vw,48px);letter-spacing:.04em}
.page-lead{font-size:14px;color:#cccccc;line-height:2.15;max-width:680px}

/* --- Section eyebrow with rule line full --- */
.sec-eyebrow{font-size:10px;letter-spacing:.45em;color:var(--red);font-weight:700;margin-bottom:24px}
.sec-eyebrow::before{width:48px}

/* --- Section heading tighter --- */
.sec-heading{font-size:clamp(28px,3.6vw,42px);letter-spacing:.04em;line-height:1.5;margin-bottom:18px}

/* --- Page hero with subtle vertical accent (architects風) --- */
.page-hero::after{
  content:"";position:absolute;left:50%;bottom:24px;width:1px;height:36px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.4));
  pointer-events:none;animation:scrollHint 2.5s ease-in-out infinite
}
@keyframes scrollHint{
  0%,100%{opacity:0;transform:translateY(-8px)}
  50%{opacity:1;transform:translateY(0)}
}

/* --- Footer brand text refinement --- */
.footer-brand p{color:#888;font-size:11px;line-height:2.1;letter-spacing:.04em}

/* --- News strip: タイトな editorial 風 --- */
.news-strip{border-top:2px solid var(--red);border-bottom:1px solid var(--gray-200)}
.news-label{font-family:var(--serif);font-weight:800;letter-spacing:.4em}
.news-label small{font-size:8px;letter-spacing:.35em;color:var(--gray-500)}
.news-title{transition:color .25s,letter-spacing .25s}
.news-item:hover .news-title{color:var(--red);letter-spacing:.02em}

/* --- Partner logos: more refined --- */
.partner-logo{font-weight:700;font-size:14px;color:var(--gray-600);letter-spacing:.04em}
.partner-logo small{font-size:8px;letter-spacing:.35em;color:var(--gray-400)}

/* ============================================================
   ▼ Japanese typography（2026-05-12 1文字孤立を防ぐ）
   text-wrap:pretty/balance で orphan（1文字だけ次行）を抑止
============================================================ */

/* 全体に Japanese-strict 改行 */
html{line-break:strict}
body{
  word-break:normal;
  overflow-wrap:break-word;
  text-wrap:pretty; /* 段落の orphan 抑止（Chrome 117+, Safari 17.4+） */
}

/* 見出しは行のバランスを取る（短い1行で終わらせない） */
h1,h2,h3,h4,h5,h6,
.hero h1,.page-title,.sec-heading,
.biz-title,.pr-opt h3,.prog h3,.tr h3,
.svc h3,.pillar h3,.qual h3,.fa-change h3,
.fa-phase h4,.rc-val h3,.rc-pos h3,.sub-card h3,
.org-card h3,.ph-val h3,.message-box h3,
.principles-head h2,.journey-head h2,.partners-head h2,
.cta h2,.pullquote-text,.bcard-title,.blog-title,
.cs-title,.me-title,.tr-name,.pd-name,.profile-name{
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 段落・説明文は orphan 防止 */
p,
.biz-desc,.blog-excerpt,.page-lead,.hero-lead,
.sec-sub,.principle-jp,.feature-shot-cap,
.bcard-excerpt,.tr-bio,.pillar p,.svc p,
.cs-summary,.player-bio,.fa-change p,
.profile-bio p,.message-box p,.ph-statement p,
.journey-caption,.partners-head p{
  text-wrap:pretty;
  line-break:strict;
}

/* 約物（句読点）の前後で切れない（特定組み合わせ） */
.no-orphan,
.biz-title,.sec-heading,.page-title{
  word-break:keep-all;
}

/* セミナーや見出しで重要な短い句は break しない */
.nowrap{white-space:nowrap}
.inline-block{display:inline-block}

/* モバイルのみ表示する改行（PCでは1行で読める長さの見出し用） */
.br-sp{display:none}
@media(max-width:720px){.br-sp{display:inline}}

/* デスクトップのみ表示する改行 */
.br-pc{display:inline}
@media(max-width:720px){.br-pc{display:none}}

/* 句点（。）を半角分詰めて孤立感を緩和 */
.head-period{margin-left:-.25em}

/* ============================================================
   ▼ Mobile final optimization（2026-05-12 最終最適化）
   タップ性・可読性・スクロール・パフォーマンスを徹底チューニング
============================================================ */

/* タップハイライト調整・テキスト選択改善 */
html{-webkit-tap-highlight-color:rgba(200,16,46,.15);-webkit-text-size-adjust:100%}
button,a,.btn{-webkit-tap-highlight-color:rgba(200,16,46,.18);touch-action:manipulation}

/* iOS スムーズスクロール */
html,body{-webkit-overflow-scrolling:touch}

/* タッチデバイスではホバー演出を抑制 */
@media (hover:none){
  .biz-card:hover,
  .bcard:hover,
  .blog-card:hover,
  .svc:hover,
  .tr:hover,
  .player-card:hover,
  .cs-card:hover,
  .pr-opt:hover,
  .prog:hover{transform:none}
  .biz-card:hover .biz-img,
  .svc:hover .svc-img,
  .tr:hover .tr-photo,
  .bcard:hover .bcard-img,
  .blog-card:hover .blog-img,
  .cs-card:hover .cs-img{transform:none}
  .partner-logo:hover{background:transparent}
  /* タッチデバイスは Ken Burns 重いのでカット */
  .hero::before{animation:none}
}

/* ─────── Tablet / Small Desktop ─────── */
@media (max-width: 880px){
  /* ナビ余白 */
  .nav-inner{padding:14px 20px;gap:16px}
  .logo img{height:30px}

  /* セクション余白の縮小 */
  section{padding:64px 20px}
  .page-hero{padding:52px 20px 40px}

  /* ヒーロー周辺 */
  .hero{min-height:auto;padding:60px 0 80px}
  .hero-inner{padding:60px 20px 40px}
  .hero h1{font-size:clamp(30px,8.5vw,52px);line-height:1.3;letter-spacing:.02em}
  .hero h1 .small{font-size:13px}
  .hero-eyebrow{font-size:10px;letter-spacing:.3em;gap:12px;margin-bottom:24px}
  .hero-eyebrow::before{width:32px}
  .hero-deco{margin-top:24px;width:32px}
  .hero-lead{font-size:13px;line-height:2;max-width:100%;margin-bottom:32px}
  .hero-buttons{gap:10px;flex-wrap:wrap}
  .hero-buttons .btn{flex:1 1 auto;min-width:140px;justify-content:center;padding:14px 20px;font-size:12px}

  /* ページヒーロー */
  .page-title{font-size:clamp(26px,6.8vw,40px);line-height:1.4;letter-spacing:.02em}
  .page-lead{font-size:13px;line-height:1.95}
  .page-eyebrow{font-size:10px;letter-spacing:.3em;margin-bottom:14px}

  /* セクション見出し */
  .sec-heading{font-size:clamp(22px,5.6vw,32px);line-height:1.5;margin-bottom:14px}
  .sec-eyebrow{font-size:10px;letter-spacing:.3em;margin-bottom:14px;gap:10px}
  .sec-eyebrow::before{width:28px}
  .sec-sub{font-size:13px;line-height:1.95;margin-bottom:36px}

  /* ボタン */
  .btn{padding:14px 26px;font-size:12px;min-height:44px}

  /* News strip */
  .news-strip{padding:0 20px}
  .news-inner{padding:18px 0;gap:14px}
  .news-label{font-size:11px;letter-spacing:.2em;padding:0 0 12px;border:none;border-bottom:1px solid var(--gray-300);justify-content:space-between;flex-direction:row;width:100%}
  .news-label small{font-size:8px;letter-spacing:.3em}
  .news-item{grid-template-columns:auto auto 1fr;gap:8px;font-size:11.5px;line-height:1.7}
  .news-date{font-size:10.5px}
  .news-tag{font-size:9px;padding:2px 6px}
  .news-more{font-size:10.5px;padding-top:8px;border-top:1px solid var(--gray-200)}

  /* Business cards */
  .business-grid{gap:20px}
  .biz-card .biz-body{padding:30px 24px 32px}
  .biz-title{font-size:17px;margin-bottom:12px}
  .biz-desc{font-size:12.5px;line-height:1.9}
  .biz-num{font-size:10px}
  .biz-cat{font-size:10px}

  /* Achievements - 2x2 grid */
  .ach-grid{grid-template-columns:1fr 1fr;gap:40px 18px;text-align:center}
  .ach-num{font-size:42px}
  .ach-num small{font-size:.4em}
  .ach-label{font-size:11px}
  .ach-label strong{font-size:13px}
  .ach:nth-child(2)::after{display:none}

  /* CEO */
  .ceo-grid{grid-template-columns:1fr;gap:32px}
  .ceo-photo{aspect-ratio:1/1;max-width:200px;margin:0 auto;font-size:80px}
  .ceo-msg{font-size:20px;line-height:1.85;margin-bottom:20px}
  .ceo-text{font-size:13px;line-height:2;margin-bottom:20px}
  .ceo-sign{padding-top:14px}
  .ceo-sign strong{font-size:15px}
  .ceo-eyebrow{font-size:10px;margin-bottom:14px}

  /* Visual Journey - 1 column */
  .journey{padding:60px 20px}
  .journey-head{grid-template-columns:1fr;gap:14px;margin-bottom:32px;padding-bottom:18px}
  .journey-head h2{font-size:clamp(22px,5.5vw,32px);line-height:1.45}
  .journey-head .meta{text-align:left;font-size:9px;letter-spacing:.3em}
  .journey-grid{grid-template-columns:1fr;gap:24px}
  .journey-col{gap:18px}
  .journey-shot.tall .bg,.journey-shot.wide .bg{aspect-ratio:5/4}
  .journey-caption{font-size:9px;letter-spacing:.25em;margin-top:10px}
  .journey-caption strong{font-size:11.5px}

  /* Principles - 残す要素を整理 */
  .principles{padding:60px 20px}
  .principles-head{margin-bottom:40px}
  .principles-head h2{font-size:clamp(22px,5.6vw,32px);line-height:1.5}
  .principles-head .deco{margin:20px auto;width:36px}
  .principle{grid-template-columns:48px 1fr;gap:14px;padding:22px 0;align-items:start}
  .principle:hover{padding-left:0}
  .principle-num{font-size:28px;grid-row:1;grid-column:1}
  .principle-en{grid-row:1;grid-column:2;font-size:10.5px;letter-spacing:.18em;padding-top:6px}
  .principle-jp{grid-row:2;grid-column:1/-1;font-size:14px;line-height:1.85;padding-top:8px}
  .principle-link{display:none}

  /* Pull quote */
  .pullquote{padding:64px 24px}
  .pullquote::before{top:32px;width:36px}
  .pullquote::after{bottom:32px;width:36px}
  .pullquote-mark{font-size:50px;margin-bottom:14px}
  .pullquote-text{font-size:clamp(18px,5.2vw,26px);line-height:1.85;letter-spacing:.02em}
  .pullquote-cite{font-size:10px;letter-spacing:.25em}

  /* Partners marquee */
  .partners{padding:60px 0}
  .partners-head{margin-bottom:36px;padding:0 20px}
  .partners-head h2{font-size:clamp(20px,5.2vw,28px)}
  .partners-head p{font-size:12px}

  /* Blog grid */
  .blog-grid{gap:20px}
  .blog-img{aspect-ratio:16/10}
  .blog-title{font-size:15px}
  .blog-excerpt{font-size:12px}

  /* Info section */
  .info-grid{grid-template-columns:1fr;gap:40px}
  .info-table dl{grid-template-columns:90px 1fr}
  .info-table dt,.info-table dd{padding:14px 6px;font-size:12.5px}
  .access-map{aspect-ratio:4/3}
  .access-info{font-size:11.5px;gap:14px}

  /* CTA */
  .cta{padding:60px 24px}
  .cta h2{font-size:clamp(20px,5.5vw,28px);line-height:1.7;margin-bottom:14px}
  .cta p{font-size:13px;line-height:1.95;margin-bottom:28px}
  .cta-buttons{flex-direction:column;align-items:stretch;gap:10px;max-width:300px;margin:0 auto}
  .cta-buttons .btn{justify-content:center}

  /* Splash on mobile */
  .splash-logo img{width:clamp(140px,42vw,220px)}
  .splash-bar{height:36px;margin-top:24px}
  .splash-meta{font-size:9px;letter-spacing:.35em;margin-top:18px}
  .splash-meta small{font-size:8px;letter-spacing:.25em}

  /* Footer */
  footer{padding:60px 20px 28px}
  .footer-inner{gap:32px;margin-bottom:32px}
  .footer-links{grid-template-columns:1fr 1fr;gap:24px 18px}
  .footer-col h4{font-size:11px;margin-bottom:14px}
  .footer-col li{margin-bottom:7px}
  .footer-col a{font-size:10.5px}
  .footer-brand p{font-size:11px;margin-bottom:18px}
  .footer-bottom{font-size:10px;flex-direction:column;align-items:flex-start;gap:10px;padding-top:18px}
  .footer-legal{gap:14px;flex-wrap:wrap}

  /* Floating CTA Bar - 高さ調整 */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ─────── Phone optimization ─────── */
@media (max-width: 480px){
  body{font-size:14px}

  /* Even tighter typography */
  .hero{padding:40px 0 60px}
  .hero-inner{padding:40px 18px 32px}
  .hero h1{font-size:30px;line-height:1.3}
  .hero h1 br{display:initial}

  /* Sections */
  section{padding:48px 18px}
  .page-hero{padding:44px 18px 36px}

  /* Section headings */
  .sec-heading{font-size:22px}
  .page-title{font-size:24px}
  .sec-sub{font-size:12.5px;margin-bottom:28px}

  /* Buttons stay full-width when stacked */
  .btn{font-size:11.5px;padding:14px 24px}

  /* Achievements full width */
  .ach-grid{grid-template-columns:1fr 1fr;gap:32px 12px}
  .ach{padding:0 4px}
  .ach-num{font-size:36px}

  /* Business cards more compact */
  .biz-card .biz-body{padding:26px 22px 28px}
  .biz-img{aspect-ratio:16/10}

  /* CEO photo smaller */
  .ceo-photo{max-width:160px;font-size:60px}
  .ceo-msg{font-size:18px}

  /* Principles tight */
  .principle{padding:18px 0;gap:12px}
  .principle-num{font-size:26px}
  .principle-jp{font-size:13.5px}
  .principle-en{font-size:10px}

  /* Pull quote */
  .pullquote{padding:48px 20px}
  .pullquote-text{font-size:18px}
  .pullquote-mark{font-size:42px}

  /* News strip */
  .news-strip{padding:0 18px}
  .news-item{font-size:11px;grid-template-columns:auto auto 1fr;gap:6px}

  /* Footer 1 column */
  .footer-links{grid-template-columns:1fr;gap:24px}

  /* CTA */
  .cta h2{font-size:20px;line-height:1.65}
  .cta p{font-size:12px}

  /* Splash */
  .splash-logo img{width:160px}
  .splash-bar{height:30px}
  .splash-meta{font-size:8.5px}
}

/* ─────── 極小（iPhone SE 等 320-374px）─────── */
@media (max-width: 374px){
  .hero h1{font-size:26px}
  .sec-heading{font-size:20px}
  .page-title{font-size:22px}
  .biz-title{font-size:16px}
  .principle-num{font-size:22px}
  .principle-jp{font-size:13px}
  section,.page-hero{padding-left:16px;padding-right:16px}
  .hero-inner{padding-left:16px;padding-right:16px}
}

/* ─────── Touch target minimums ─────── */
@media (pointer:coarse){
  a,button,.btn,.nav-cta,.nav-mini,.nav-burger,.drawer-cta,
  .news-item a,.blog-card,.biz-card,.bcard,.svc,.tr,.player-card,
  .partner-logo,.fcta-btn,.principle{min-height:44px}
  .nav-burger{width:48px;height:48px}
  .pager a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* --- Reduced motion fallback --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important}
}