/* ============================================================
   V4 Tradition x Innovation Design System
   伝統×革新デザイン強化：全下層ページ共通
============================================================ */
:root{
  --v4-gold: var(--kin, #B49A5B);
  --v4-ink: var(--sumi, #11120F);
  --v4-green: var(--midori, #0E2418);
  --v4-paper: var(--kinari, #F5EFE3);
}
.subpage-main{ background: var(--v4-paper); }
.subpage-hero{ min-height: 58vh; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
.subpage-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 45%, transparent, rgba(0,0,0,.42)); z-index:0; pointer-events:none; }
.subpage-hero-inner{ position:relative; z-index:4; }
.subpage-hero-inner h1{ font-family:var(--font-display); font-size:clamp(42px,7vw,96px); letter-spacing:.18em; line-height:1.1; }
.subpage-hero-inner h1 .hi{ -webkit-text-stroke:1px rgba(180,154,91,.72); color:transparent; text-shadow:0 0 36px rgba(180,154,91,.24); }
.hero-ring{ position:absolute; width:min(62vw,620px); aspect-ratio:1; border:1px solid rgba(180,154,91,.26); border-radius:50%; z-index:2; pointer-events:none; }
.hero-ring::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:2px solid transparent; border-top-color:rgba(180,154,91,.95); border-right-color:rgba(180,154,91,.45); animation:v4Spin 18s linear infinite; }
@keyframes v4Spin{ to{ transform:rotate(360deg); } }
.crest-watermark{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:min(56vw,560px); aspect-ratio:1; background-image:url('https://godaimeyagiichibei.com/wp-content/uploads/2026/06/S__205578244.jpg'); background-size:contain; background-repeat:no-repeat; background-position:center; opacity:.075; mix-blend-mode:screen; z-index:1; pointer-events:none; }
.kira{ position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none; }
.kira i{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(180,154,91,.85); box-shadow:0 0 16px rgba(180,154,91,.75); opacity:0; animation:kiraFloat var(--dur,9s) linear infinite; animation-delay:var(--delay,0s); }
@keyframes kiraFloat{ 0%{ transform:translate3d(0,20px,0); opacity:0;} 18%{opacity:.8;} 100%{ transform:translate3d(30px,-110vh,0); opacity:0;} }
.marquee{ position:absolute; left:0; right:0; bottom:24px; z-index:5; overflow:hidden; opacity:.42; color:rgba(245,239,227,.78); font-family:var(--font-utility); letter-spacing:.36em; font-size:11px; white-space:nowrap; }
.marquee span{ display:inline-block; min-width:100%; padding-left:100%; animation:v4Marquee 28s linear infinite; }
@keyframes v4Marquee{ to{ transform:translateX(-100%); } }
.subpage-section{ position:relative; overflow:hidden; }
.subpage-section > .kanji-no{ display:block; font-family:var(--font-display); font-size:clamp(38px,7vw,86px); line-height:1; color:rgba(180,154,91,.22); margin-bottom:-.2em; letter-spacing:0; }
.subpage-section h2{ position:relative; }
.subpage-section h2 + .fude, .fude{ display:block; width:min(160px,42vw); height:7px; margin:20px 0 34px; background:linear-gradient(90deg, transparent, rgba(180,154,91,.95), rgba(180,154,91,.15), transparent); clip-path:polygon(0 55%, 16% 28%, 42% 56%, 70% 38%, 100% 50%, 100% 74%, 0 82%); opacity:.85; }
.subpage-section:nth-of-type(even)::after{ content:""; position:absolute; right:-120px; top:30px; width:360px; height:360px; background-image:url('https://godaimeyagiichibei.com/wp-content/uploads/2026/06/S__205578244.jpg'); background-size:contain; background-repeat:no-repeat; opacity:.03; pointer-events:none; }
/* Story: scrollable scroll/timeline */
body.page-template-page-story .timeline{ position:relative; }
body.page-template-page-story .timeline::before{ content:""; position:absolute; left:22px; top:0; bottom:0; width:1px; background:rgba(180,154,91,.24); }
body.page-template-page-story .timeline .line-fill{ position:absolute; left:21px; top:0; width:3px; height:0; background:linear-gradient(var(--v4-gold), rgba(180,154,91,.18)); box-shadow:0 0 18px rgba(180,154,91,.42); }
body.page-template-page-story .timeline article{ position:relative; padding-left:58px; }
body.page-template-page-story .timeline article::before{ content:"一"; position:absolute; left:7px; top:12px; width:30px; height:30px; border-radius:50%; border:1px solid var(--v4-gold); background:var(--v4-paper); color:var(--v4-gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:14px; z-index:2; }
body.page-template-page-story .interview-section{ background:linear-gradient(145deg,#0d1710,#11120F); color:var(--kinari); }
body.page-template-page-story .interview-section .interview-body{ position:relative; z-index:2; }
.emaki-marquee{ margin-top:34px; overflow:hidden; border-top:1px solid rgba(180,154,91,.32); border-bottom:1px solid rgba(180,154,91,.32); padding:18px 0; }
.emaki-track{ display:flex; gap:18px; width:max-content; animation:v4Emaki 52s linear infinite; }
.emaki-track img{ height:160px; width:auto; background:#F1E9D6; border:1px solid rgba(17,18,15,.12); box-shadow:0 12px 24px rgba(17,18,15,.08); }
@keyframes v4Emaki{ to{ transform:translateX(-50%); } }
/* Why: data x ink */
body.page-template-page-why-uji-matcha .bar .val{ font-size:clamp(28px,4.2vw,58px); color:var(--v4-ink); }
body.page-template-page-why-uji-matcha .bar .val small{ color:var(--v4-gold); }
body.page-template-page-why-uji-matcha .contrast-grid{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid rgba(180,154,91,.32); }
body.page-template-page-why-uji-matcha .contrast-grid article{ padding:clamp(28px,5vw,58px); min-height:260px; display:flex; flex-direction:column; justify-content:center; transition:flex-basis .8s ease; }
body.page-template-page-why-uji-matcha .contrast-grid article:first-child{ background:rgba(245,239,227,.84); color:var(--v4-ink); }
body.page-template-page-why-uji-matcha .contrast-grid article:last-child{ background:#11120F; color:var(--kinari); box-shadow:inset 0 0 0 1px rgba(180,154,91,.3); }
body.page-template-page-why-uji-matcha .subpage-table th:nth-child(2), body.page-template-page-why-uji-matcha .subpage-table td:nth-child(2){ background:rgba(180,154,91,.12); box-shadow:inset 3px 0 0 var(--v4-gold); }
/* Process: movement */
body.page-template-page-process .process-detail-list{ position:relative; }
body.page-template-page-process .process-detail-list::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(180,154,91,.24); }
body.page-template-page-process .process-detail-list .line-fill{ position:absolute; left:calc(50% - 1px); top:0; width:3px; height:0; background:linear-gradient(var(--v4-gold), rgba(180,154,91,.18)); }
body.page-template-page-process .process-detail-card{ position:relative; }
body.page-template-page-process .process-detail-card::after{ content:""; position:absolute; left:calc(50% - 7px); top:44px; width:14px; height:14px; border-radius:50%; background:var(--v4-gold); box-shadow:0 0 0 6px rgba(180,154,91,.14); }
.year-calendar.v4-ring{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; padding:34px; border-radius:28px; background:radial-gradient(circle at center, rgba(180,154,91,.16), transparent 35%), rgba(255,255,255,.24); border:1px solid rgba(180,154,91,.25); }
.year-calendar.v4-ring::before{ content:"一"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:86px; height:86px; border-radius:50%; border:1px solid rgba(180,154,91,.7); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:32px; color:var(--v4-gold); background:rgba(245,239,227,.8); }
.year-calendar.v4-ring article.is-current{ border-color:var(--v4-gold)!important; box-shadow:0 0 0 1px var(--v4-gold),0 16px 40px rgba(180,154,91,.2); }
.tool-grid article{ transition:transform .45s ease, box-shadow .45s ease; }
.tool-grid article:hover{ transform:translateY(-8px); box-shadow:0 24px 54px rgba(17,18,15,.12); }
/* Approach: regeneration */
.ba-slider{ position:relative; margin:32px 0; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(180,154,91,.42); background:#0E2418; }
.ba-slider .ba-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.ba-slider .ba-after{ clip-path:inset(0 0 0 50%); }
.ba-slider input{ position:absolute; inset:0; opacity:0; cursor:ew-resize; z-index:4; }
.ba-divider{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--v4-gold); z-index:3; box-shadow:0 0 18px rgba(180,154,91,.8); }
.ba-divider::after{ content:"竹"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:rgba(245,239,227,.92); border:1px solid var(--v4-gold); color:var(--v4-gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); }
.ba-label{ position:absolute; top:18px; z-index:3; padding:7px 14px; border:1px solid rgba(245,239,227,.55); background:rgba(14,36,24,.72); color:var(--kinari); font-family:var(--font-utility); font-size:11px; letter-spacing:.18em; }
.ba-label.before{ left:18px; }.ba-label.after{ right:18px; }
.recruit-cta{ position:relative; overflow:hidden; isolation:isolate; }
.recruit-cta .kira{ z-index:0; }
.recruit-cta > *:not(.kira){ position:relative; z-index:2; }
/* Visit: noren and road timeline */
.noren{ position:relative; overflow:hidden; }
.noren::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--v4-green), #15341f); transform:translateY(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); z-index:3; }
.noren.in::after{ transform:translateY(-102%); }
.experience-grid article .photo{ min-height:230px; }
.course-timeline{ position:relative; }
.course-timeline::before{ content:""; position:absolute; left:28px; top:0; bottom:0; width:1px; background:rgba(180,154,91,.32); }
.course-timeline article{ position:relative; padding-left:72px!important; }
.course-timeline article::before{ content:"歩"; position:absolute; left:10px; top:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--v4-gold); color:var(--v4-gold); display:flex; align-items:center; justify-content:center; background:var(--v4-paper); font-family:var(--font-display); }
/* Matcha High: special night page */
body.page-template-page-matcha-high .subpage-main{ background:#11120F; color:var(--kinari); }
body.page-template-page-matcha-high .subpage-section{ background:transparent; }
body.page-template-page-matcha-high .brand-story-section{ border:1px solid rgba(180,154,91,.24); background:radial-gradient(circle at 50% 0, rgba(94,140,74,.18), transparent 52%); }
body.page-template-page-matcha-high .promise-grid article, body.page-template-page-matcha-high .business-section{ background:rgba(245,239,227,.06)!important; border-color:rgba(180,154,91,.24)!important; }
/* Contact: formal finish */
body.page-template-page-contact .contact-card{ transition:transform .4s ease; }
body.page-template-page-contact .contact-card:hover{ transform:translateY(-6px); }
@media (max-width:760px){
  .subpage-hero{ min-height:48vh; }
  .hero-ring{ width:88vw; }
  .crest-watermark{ width:76vw; }
  body.page-template-page-why-uji-matcha .contrast-grid{ grid-template-columns:1fr; }
  body.page-template-page-process .process-detail-list::before, body.page-template-page-process .process-detail-list .line-fill, body.page-template-page-process .process-detail-card::after{ display:none; }
  .year-calendar.v4-ring{ grid-template-columns:1fr; padding:20px; }
  .year-calendar.v4-ring::before{ display:none; }
  .emaki-track img{ height:112px; }
}