/* ==========================================================
   index.css — トップページ固有スタイル
   ※ 共通部分（reset / :root / nav / footer / cursor / reveal）は
      重複しているため、後段で common.css と整理予定。
      現時点ではこのファイル単独で完結する設計。
   ========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#ffffff;
  --bg:#f7f6f2;
  --bg2:#eeecea;
  --ink:#1a1a2e;
  --ink2:#2e2e45;
  --muted:#7a7a90;
  --border:#e2e0da;
  --border2:#cccac4;
  --orange:#d95f1a;
  --orange-light:#f4e4d8;
  --teal:#1e8fa0;
  --teal-light:#d8f0f4;
  --navy:#1d3557;
  --navy-light:#d8e4ef;
}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(247,246,242,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo-img-btn{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.nav-logo-img{height:36px;width:auto;display:block;transition:filter .3s}
.nav-logo-img-btn:hover .nav-logo-img{filter:drop-shadow(0 2px 8px rgba(217,95,26,0.55))}
.nav-logo-click-hint{font-size:.5rem;font-weight:700;letter-spacing:.1em;color:var(--orange);font-family:'Noto Sans JP',sans-serif;white-space:nowrap;animation:hint-blink 1.2s step-end infinite}
@keyframes hint-blink{0%,100%{opacity:.8}50%{opacity:0}}
.nav-logo-name{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:.02em;white-space:nowrap;text-decoration:none;transition:color .2s}
.nav-logo-name:hover{color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none}
.nav-links a{font-size:.83rem;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--orange);color:var(--white)!important;padding:9px 22px;border-radius:100px;font-size:.82rem!important;font-weight:700!important;transition:background .2s,transform .15s!important}
.nav-cta:hover{background:#c0521a!important;transform:translateY(-1px)!important}
.nav-hamburger{display:none;position:relative;width:38px;height:38px;background:transparent;border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;transition:border-color .2s;padding:0}
.nav-hamburger:hover{border-color:var(--orange)}
.nav-hamburger span{position:absolute;left:50%;top:50%;display:block;width:18px;height:2px;margin-left:-9px;margin-top:-1px;background:var(--ink);border-radius:2px;transform-origin:center center;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s}
.nav-hamburger span:nth-child(1){transform:translateY(-7px)}
.nav-hamburger span:nth-child(2){transform:translateY(0)}
.nav-hamburger span:nth-child(3){transform:translateY(7px)}
.nav-hamburger.open span:nth-child(1){transform:translateY(0) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:translateY(0) scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(0) rotate(-45deg)}
.mobile-menu{position:fixed;top:68px;left:0;right:0;bottom:0;background:rgba(247,246,242,0.98);backdrop-filter:blur(20px);z-index:199;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .3s,transform .3s}
.mobile-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}
.mobile-menu a{font-family:'Noto Sans JP',sans-serif;font-size:1.2rem;font-weight:700;color:var(--muted);text-decoration:none;transition:color .2s}
.mobile-menu a:hover{color:var(--ink)}
.mobile-menu .mob-cta{background:var(--orange);color:var(--white)!important;padding:14px 40px;border-radius:100px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-left.in{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-right.in{opacity:1;transform:translateX(0)}

/* SECTION BASE */
section{padding:100px 5vw;position:relative}
.s-chip{display:inline-flex;align-items:center;gap:7px;background:var(--orange-light);color:var(--orange);border-radius:100px;padding:5px 14px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.25rem}
.s-chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.s-chip.teal{background:var(--teal-light);color:var(--teal)}
.s-chip.navy{background:var(--navy-light);color:var(--navy)}
.s-title{font-family:'Syne',sans-serif;font-size:clamp(1.9rem,3vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:1rem;color:var(--ink)}
.s-sub{font-size:.93rem;color:var(--muted);line-height:1.85;max-width:500px}

/* HERO */
.hero{min-height:100vh;padding-top:68px;display:flex;align-items:center;background:linear-gradient(135deg,#fbf9f4 0%,#f0ece2 100%);overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(217,95,26,.07) 0%,transparent 60%);pointer-events:none;z-index:0}
.hero::after{content:'';position:absolute;bottom:-150px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(30,143,160,.06) 0%,transparent 60%);pointer-events:none;z-index:0}

/* ── HERO 背景アニメーション (Geometric Motion) ── */
.hero-bg-anim{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}

/* グリッド */
.hero-bg-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,18,36,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,18,36,.04) 1px,transparent 1px);
  background-size:80px 80px;
  opacity:.7;
}

/* 大きな菱形3つ - 透過度を上げて文字に被ってもうるさくしない */
.hero-bg-shape{position:absolute;border-radius:25px;transform:rotate(45deg);opacity:.55}
.hero-bg-shape.hbs-1{
  top:-280px;right:-260px;width:620px;height:620px;
  background:linear-gradient(135deg,#E07830 0%,#C8521A 100%);
  box-shadow:0 30px 80px rgba(217,95,26,.2);
  animation:heroBgFloat1 16s ease-in-out infinite alternate;
}
.hero-bg-shape.hbs-2{
  bottom:-300px;left:-260px;width:540px;height:540px;
  background:linear-gradient(135deg,#44AADB 0%,#2888B8 100%);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(68,170,219,.2);
  animation:heroBgFloat2 20s ease-in-out infinite alternate;
}
.hero-bg-shape.hbs-3{
  top:60%;left:55%;width:160px;height:160px;
  background:linear-gradient(135deg,#2A5A9A 0%,#1A3A6A 100%);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(42,90,154,.3);
  animation:heroBgFloat3 12s ease-in-out infinite alternate;
}
@keyframes heroBgFloat1{from{transform:rotate(45deg) translate(0,0)}to{transform:rotate(55deg) translate(-40px,30px)}}
@keyframes heroBgFloat2{from{transform:rotate(45deg) translate(0,0)}to{transform:rotate(35deg) translate(50px,-40px)}}
@keyframes heroBgFloat3{from{transform:rotate(45deg) translate(0,0) scale(1)}to{transform:rotate(60deg) translate(30px,-30px) scale(1.15)}}

/* 流れる小菱形の帯 */
.hero-bg-stream{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.hero-bg-stream .stream-row{position:absolute;width:200%;height:80px;display:flex;gap:60px;align-items:center}
.hero-bg-stream .stream-row svg{flex-shrink:0}
.hero-bg-stream .stream-row.r1{top:18%;animation:heroStreamMove1 30s linear infinite}
.hero-bg-stream .stream-row.r2{top:50%;animation:heroStreamMove2 38s linear infinite}
.hero-bg-stream .stream-row.r3{top:80%;animation:heroStreamMove1 34s linear infinite reverse}
@keyframes heroStreamMove1{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes heroStreamMove2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;width:100%;position:relative;z-index:1}
/* Hero kicker (chip) - デモ3スタイル: 黒背景・白文字・ドット付き */
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;
  border-radius:100px;padding:7px 18px;
  font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:2rem;
  position:relative;z-index:1;
}
.hero-kicker::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);
}

/* Hero h1 - デモ3スタイル: 極太・濃色・大サイズ
   word-break:keep-all で日本語の単語内改行を抑止し、
   <br> 位置で意図通りに改行されるように */
.hero h1{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(2rem,5vw,4.2rem);
  font-weight:900;line-height:1.2;letter-spacing:-.03em;
  color:var(--ink);
  margin-bottom:2rem;
  text-shadow:0 2px 18px rgba(255,255,255,.6);
  position:relative;z-index:1;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.hero h1 .hl-o{color:var(--orange)}
.hero h1 .hl-t{color:var(--teal)}

/* Hero sub - 濃色・読みやすく */
.hero-lead{
  font-size:clamp(.95rem,1.4vw,1.15rem);
  color:rgba(15,18,36,.78);line-height:1.95;
  max-width:520px;margin-bottom:2.5rem;
  position:relative;z-index:1;
  font-weight:500;
}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.btn-fill{background:var(--ink);color:var(--white);padding:13px 30px;border-radius:100px;font-size:.88rem;font-weight:700;text-decoration:none;transition:background .2s,transform .15s;display:inline-block}
.btn-fill:hover{background:var(--navy);transform:translateY(-2px)}
.btn-stroke{background:transparent;color:var(--ink);border:1.5px solid var(--border2);padding:13px 30px;border-radius:100px;font-size:.88rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-block}
.btn-stroke:hover{border-color:var(--ink);background:var(--ink);color:var(--white)}

/* Hero visual */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:2rem}
.hero-logo-wrap{position:relative}
.hero-logo-main{width:240px;height:auto;filter:drop-shadow(0 20px 60px rgba(217,95,26,.18))}


/* Numbers strip */
.numbers-strip{background:var(--ink);display:flex;align-items:stretch;overflow:hidden;position:relative;z-index:1}
.ns-item{flex:1;padding:40px 32px;border-right:1px solid rgba(255,255,255,.08)}
.ns-item:last-child{border-right:none}
.ns-num{font-family:'Syne',sans-serif;font-size:2.4rem;font-weight:800;color:var(--white);line-height:1;letter-spacing:-.04em;margin-bottom:6px;display:flex;align-items:baseline;gap:3px}
.ns-num .u{font-size:1.1rem;color:var(--orange);font-weight:700}
.ns-label{font-size:.75rem;color:rgba(255,255,255,.35)}

/* MISSION */
.mission{background:var(--bg);overflow:hidden}
.mission-layout{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.mission-quote{font-family:'Syne',sans-serif;font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:800;line-height:1.35;letter-spacing:-.03em;color:var(--ink);margin-bottom:1.75rem}
.mission-quote .o{color:var(--orange)}
.mission-quote .t{color:var(--teal)}
.mission-body{font-size:.9rem;color:var(--muted);line-height:1.9}
.mission-cards{display:flex;flex-direction:column;gap:1.25rem}
.mc{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px 26px;display:flex;gap:16px;align-items:flex-start;transition:transform .25s,box-shadow .25s}
.mc:hover{transform:translateX(6px);box-shadow:0 6px 24px rgba(0,0,0,.07)}
.mc-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-icon svg{width:20px;height:20px;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-o{background:var(--orange-light)}.ico-o svg{stroke:var(--orange)}
.ico-t{background:var(--teal-light)}.ico-t svg{stroke:var(--teal)}
.ico-n{background:var(--navy-light)}.ico-n svg{stroke:var(--navy)}
.mc h4{font-size:.93rem;font-weight:700;margin-bottom:4px;color:var(--ink)}
.mc p{font-size:.8rem;color:var(--muted);line-height:1.7}

/* VALUE */
.value{background:var(--white)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.vc{border-radius:22px;padding:36px 30px;transition:transform .25s}
.vc:hover{transform:translateY(-6px)}
.vc-1{background:var(--orange-light)}
.vc-2{background:var(--teal-light)}
.vc-3{background:var(--navy-light)}
.vc-num{font-family:'Syne',sans-serif;font-size:4rem;font-weight:800;line-height:1;margin-bottom:1.5rem;opacity:.12}
.vc-1 .vc-num{color:var(--orange)}
.vc-2 .vc-num{color:var(--teal)}
.vc-3 .vc-num{color:var(--navy)}
.vc-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.vc-icon svg{width:22px;height:22px;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.vc-1 .vc-icon{background:rgba(217,95,26,.15)}.vc-1 .vc-icon svg{stroke:var(--orange)}
.vc-2 .vc-icon{background:rgba(30,143,160,.15)}.vc-2 .vc-icon svg{stroke:var(--teal)}
.vc-3 .vc-icon{background:rgba(29,53,87,.15)}.vc-3 .vc-icon svg{stroke:var(--navy)}
.vc h3{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:800;margin-bottom:.65rem;letter-spacing:-.01em}
.vc-1 h3{color:var(--orange)}.vc-2 h3{color:var(--teal)}.vc-3 h3{color:var(--navy)}
.vc p{font-size:.82rem;color:var(--ink2);line-height:1.75;opacity:.75}

/* OVERVIEW */
.overview{background:var(--bg)}
.overview-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:3.5rem}
.ov-table{width:100%;border-collapse:collapse}
.ov-table tr{border-bottom:1px solid var(--border)}
.ov-table tr:last-child{border-bottom:none}
.ov-table th{font-size:.75rem;font-weight:700;color:var(--muted);letter-spacing:.04em;padding:1.3rem 0;width:130px;vertical-align:top;text-align:left}
.ov-table td{font-size:.88rem;color:var(--ink);padding:1.3rem 0;line-height:1.7;vertical-align:top}
.tag{display:inline-block;background:var(--orange-light);color:var(--orange);padding:3px 10px;border-radius:6px;font-size:.7rem;font-weight:700;margin:2px 4px 2px 0}
.tag.t{background:var(--teal-light);color:var(--teal)}
.tag.n{background:var(--navy-light);color:var(--navy)}
.ov-panel{background:var(--white);border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 40px rgba(0,0,0,.06)}
.ov-panel-hd{padding:20px 26px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.ov-panel-hd h4{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:800;color:var(--ink)}
.ov-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.ov-stat{background:var(--white);padding:26px 22px;text-align:center}
.ov-stat-num{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;line-height:1;margin-bottom:5px;display:flex;align-items:baseline;justify-content:center;gap:2px}
.ov-stat-num .u{font-size:.95rem}
.ov-stat-label{font-size:.72rem;color:var(--muted)}
.ov-stat:nth-child(1) .ov-stat-num{color:var(--orange)}
.ov-stat:nth-child(2) .ov-stat-num{color:var(--teal)}
.ov-stat:nth-child(3) .ov-stat-num{color:var(--navy)}
.ov-stat:nth-child(4) .ov-stat-num{color:var(--ink)}
.ov-addr{padding:20px 26px;font-size:.78rem;color:var(--muted);line-height:1.8;border-top:1px solid var(--border);background:var(--bg)}
.ov-addr strong{color:var(--ink);font-weight:700;display:block;margin-bottom:3px}

/* HISTORY */
.history{background:var(--white)}
.tl{margin-top:4rem;position:relative;padding-left:1.5rem;max-width:680px}
.tl::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--orange),var(--teal),var(--navy),transparent);border-radius:1px}
.tl-item{position:relative;padding:0 0 3rem 2.5rem}
.tl-item::before{content:'';position:absolute;left:-5px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--white);border:2.5px solid var(--border2);transition:border-color .3s,background .3s}
.tl-item:hover::before{border-color:var(--orange);background:var(--orange-light)}
.tl-year{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--orange);margin-bottom:.5rem}
.tl-item h4{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.5rem}
.tl-item p{font-size:.82rem;color:var(--muted);line-height:1.7}

/* MEMBERS */
.members{background:var(--bg)}
.members-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.mem{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:32px 28px;transition:transform .25s,box-shadow .25s}
.mem:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.mem-av{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;margin-bottom:1.25rem;color:var(--white)}
.av-o{background:linear-gradient(135deg,var(--orange),#e88855)}
.av-t{background:linear-gradient(135deg,var(--teal),#44b8cc)}
.av-n{background:linear-gradient(135deg,var(--navy),#3a6186)}
.mem h4{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:800;color:var(--ink);margin-bottom:3px}
.mem-role{font-size:.72rem;font-weight:700;color:var(--orange);letter-spacing:.04em;margin-bottom:1rem}
.mem p{font-size:.81rem;color:var(--muted);line-height:1.7}

/* CEO MESSAGE */
.ceo-sec{background:var(--white)}
.ceo-layout{display:grid;grid-template-columns:280px 1fr;gap:5rem;align-items:start;margin-top:3.5rem}
.ceo-photo-wrap{display:flex;flex-direction:column;align-items:center;gap:1.25rem;position:sticky;top:90px}
.ceo-av{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#e88855);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:2.2rem;color:var(--white)}
.ceo-av-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;color:var(--ink);text-align:center}
.ceo-av-role{font-size:.78rem;font-weight:700;color:var(--orange);letter-spacing:.04em;text-align:center}
.ceo-msg-body{}
.ceo-tagline{font-family:'Syne',sans-serif;font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--ink);margin-bottom:2rem;padding:1.5rem 1.75rem;border-left:4px solid var(--orange);background:var(--orange-light);border-radius:0 12px 12px 0}
.ceo-tagline span{color:var(--orange)}
.ceo-para{font-size:.92rem;color:var(--muted);line-height:2;margin-bottom:1.5rem}
.ceo-sign{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border);text-align:right}
.ceo-sign-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;color:var(--ink)}
.ceo-sign-role{font-size:.78rem;color:var(--muted);margin-top:3px}
@media(max-width:760px){.ceo-layout{grid-template-columns:1fr}.ceo-photo-wrap{position:static;flex-direction:row;justify-content:flex-start}.ceo-av{width:80px;height:80px;font-size:1.3rem}}
.cta-sec{background:var(--ink);padding:120px 5vw;text-align:center;position:relative;overflow:hidden}
.cta-sec::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(217,95,26,.12) 0%,transparent 55%);pointer-events:none}
.cta-sec .s-title{color:var(--white)}
.cta-sec .s-sub{color:rgba(255,255,255,.5);margin:0 auto 3rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-orange{background:var(--orange);color:var(--white);padding:14px 36px;border-radius:100px;font-size:.9rem;font-weight:700;text-decoration:none;transition:background .2s,transform .15s;display:inline-block}
.btn-orange:hover{background:#c0521a;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.2);padding:14px 36px;border-radius:100px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-block}
.btn-ghost:hover{border-color:rgba(255,255,255,.6);color:var(--white)}

/* FOOTER */
footer{background:#0e0e1a;padding:70px 5vw 40px;border-top:1px solid rgba(255,255,255,.06)}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;padding-bottom:3rem;margin-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.06);align-items:start}
.ft-logo{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.ft-logo-img{height:34px;width:auto;display:block}
.ft-logo-name{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:.92rem;color:rgba(255,255,255,.9);white-space:nowrap}
.ft-desc{font-size:.8rem;color:rgba(255,255,255,.3);line-height:1.7}
.ft-col h5{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.08em;margin-bottom:1.2rem}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.ft-col a{font-size:.82rem;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.ft-col a:hover{color:var(--orange)}
.ft-bottom{display:flex;justify-content:center;align-items:center;font-size:.68rem;color:rgba(255,255,255,.25);flex-wrap:wrap;gap:.75rem;text-align:center}

/* RESPONSIVE */
@media(max-width:960px){
  .nav-links{display:none}.nav-hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .mission-layout{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr 1fr}
  .overview-layout{grid-template-columns:1fr}
  .members-grid{grid-template-columns:1fr 1fr}
  .numbers-strip{flex-wrap:wrap}
  .ns-item{min-width:50%;border-bottom:1px solid rgba(255,255,255,.08)}
  .ft{grid-template-columns:1fr 1fr;gap:2.5rem 3rem}
  .ft-brand{grid-column:1/-1;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:2rem}
}
@media(max-width:600px){
  .value-grid,.members-grid{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;gap:.5rem;text-align:center}
}
/* ─── スクロールプログレスバー ─── */
#hp-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:9999;
  background:linear-gradient(90deg,var(--orange),var(--teal));
  transition:width .12s linear;
  box-shadow:0 0 8px rgba(217,95,26,.5);
  pointer-events:none;
}

/* ─── ナビ スクロール変化 ─── */
nav{transition:background .4s,box-shadow .4s,border-bottom-color .4s}
nav.hp-scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  box-shadow:0 2px 24px rgba(0,0,0,.08);
  border-bottom-color:var(--border);
}

/* ─── ヒーロービジュアル 右からスライド（reveal-rightと統一） ─── */
/* hero要素はすでにrevealクラスで制御済み：アニメーション追加なし */

/* ─── numbers-strip スライドイン ─── */
.numbers-strip{overflow:hidden}
.ns-item{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.ns-item.in{opacity:1;transform:translateY(0)}

/* ─── セクションタイトル アンダーライン（display変更なし・block維持） ─── */
.s-title{position:relative}
.s-title::after{
  content:'';position:absolute;bottom:-8px;left:0;
  width:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--teal));
  transition:width .9s cubic-bezier(.16,1,.3,1) .2s;
}
.s-title.in::after{width:3.5rem}
/* contact セクションは中央揃えなので下線も中央配置 */
.cta-sec .s-title::after{left:50%;transform:translateX(-50%)}

/* ─── カード 3Dチルト ─── */
.vc,.mc,.member-card,.hi-item{will-change:transform}

/* ─── ミッションカード ホバーグロー ─── */
.mc{transition:transform .2s ease,box-shadow .3s,border-color .3s}
.mc:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 36px rgba(217,95,26,.12);
}

/* ─── バリューカード ─── */
.vc{transition:transform .2s ease,box-shadow .3s}
.vc:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(0,0,0,.1)}

/* ─── メンバーカード ─── */
.member-card{transition:transform .2s ease,box-shadow .3s}
.member-card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(0,0,0,.1)}

/* ─── ボタン 磁石エフェクト ─── */
.btn-fill,.btn-orange,.btn-stroke,.nav-cta{will-change:transform;transition:transform .18s ease,background .2s,box-shadow .3s}
.btn-fill:hover,.btn-orange:hover{box-shadow:0 8px 28px rgba(217,95,26,.35)}
.btn-stroke:hover{box-shadow:0 8px 24px rgba(0,0,0,.12)}

/* ─── CTAセクション 背景アニメ ─── */
.cta-sec{overflow:hidden}
.cta-sec::after{
  content:'';position:absolute;
  bottom:-120px;right:-120px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(30,143,160,.14) 0%,transparent 60%);
  animation:ctaFloat 6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes ctaFloat{from{transform:translate(0,0)}to{transform:translate(-40px,-30px)}}

/* ─── セクション境界 グラデーションライン ─── */
.value,.history,.members,.ceo-sec{position:relative}
.value::before,.members::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  opacity:.35;
}
.history::before,.ceo-sec::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  opacity:.35;
}

/* ─── カスタムカーソル ─── */
#hp-cursor{
  position:fixed;width:10px;height:10px;border-radius:50%;
  background:var(--orange);pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s,opacity .2s;
  mix-blend-mode:multiply;opacity:.7;
}
#hp-cursor-ring{
  position:fixed;width:32px;height:32px;border-radius:50%;
  border:1.5px solid rgba(217,95,26,.5);
  pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:transform .07s linear,width .25s,height .25s,border-color .25s;
}
body:has(a:hover) #hp-cursor{width:18px;height:18px;background:var(--teal)}
body:has(a:hover) #hp-cursor-ring{width:44px;height:44px;border-color:rgba(30,143,160,.5)}

/* ─── reveal 強化 ─── */
.reveal{transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.reveal-left{transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.reveal-right{transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}

/* ══ NEXT STAGE BUTTON (in CONTACT) ══ */
.next-stage-wrap{text-align:center;margin-top:2.5rem}
.btn-next-stage{
  display:inline-block;
  border:2px solid #00ffcc;
  color:#00ffcc;
  background:transparent;
  padding:16px 48px;
  font-family:'Courier New','Courier',monospace;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.22em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .25s,background .25s,box-shadow .25s,transform .18s;
  cursor:pointer;
}
.btn-next-stage:hover{
  color:#000;
  background:#00ffcc;
  box-shadow:0 0 32px rgba(0,255,204,.55),0 0 80px rgba(0,255,204,.2);
  transform:translateY(-3px);
}

/* ══ RECRUIT NAV BUTTON ══ */
.nav-recruit{background:var(--orange);color:var(--white)!important;padding:9px 24px;border-radius:100px;font-size:.82rem!important;font-weight:700!important;letter-spacing:.06em;transition:background .2s,transform .15s,box-shadow .3s!important;box-shadow:0 4px 14px rgba(217,95,26,.3)}
.nav-recruit:hover{background:#c0521a!important;transform:translateY(-1px)!important;box-shadow:0 8px 22px rgba(217,95,26,.45)}
.mob-recruit{background:var(--orange);color:var(--white)!important;padding:14px 44px;border-radius:100px;box-shadow:0 6px 20px rgba(217,95,26,.35)}

/* ══ ABOUT ENTRY ══ */
/* ABOUT 圧縮（1366×768 ノートPCで1画面に収める / 960px以下は通常サイズに復帰） */
.about-entry{background:var(--bg);padding:60px 5vw}
.about-entry-layout{display:flex;align-items:center;gap:40px}
.about-entry-layout > .reveal-left{flex:0 0 45%}
.about-entry-layout > .about-visual{flex:0 0 50%;display:flex;align-items:center;justify-content:center}
.about-entry .s-chip{margin-bottom:.75rem}
.about-catch{font-family:'Noto Sans JP','Syne',sans-serif;font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--ink);margin-bottom:1rem}
.about-catch .o{color:var(--orange)}
.about-catch .t{color:var(--teal)}
.about-catch .n{color:var(--navy)}
.mission-heading{font-size:clamp(1rem,1.5vw,1.15rem);font-weight:700;color:var(--ink);margin:1.2rem 0 .7rem;padding-left:.7rem;border-left:3px solid #E07830;line-height:1.4}
.mission-list{list-style:none;padding-left:0;margin:0}
.mission-list li{position:relative;padding-left:1.4em;margin-bottom:.5rem;line-height:1.6;font-size:.88rem;color:var(--ink)}
.mission-list li::before{content:'▸';position:absolute;left:0;color:#E07830;font-weight:700}
.mission-closing{font-size:.88rem;line-height:1.65;color:var(--ink);margin-top:.8rem}
.about-entry .section-btn-wrap{margin-top:1.5rem}
.about-entry .section-btn{padding:11px 36px;font-size:.85rem}
@media(max-width:960px){
  .about-entry{padding:80px 5vw}
  .about-entry .s-chip{margin-bottom:1.25rem}
  .about-catch{font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.5;margin-bottom:1.75rem}
  .mission-heading{font-size:1.3rem;padding-left:.8rem;border-left-width:4px;margin:2rem 0 1rem}
  .mission-list li{font-size:1rem;line-height:1.85;margin-bottom:.8rem}
  .mission-closing{font-size:1rem;line-height:1.95;margin-top:1.5rem}
  .about-entry .section-btn-wrap{margin-top:3rem}
  .about-entry .section-btn{padding:14px 48px;font-size:.9rem}
}

/* ── ABOUT 右側 ── */
.about-visual{position:relative}
.diamond{position:absolute;transform:rotate(45deg);border-radius:4px;will-change:transform}
.diamond-o{width:80px;height:80px;top:30%;left:40%;background:#E07830;box-shadow:0 10px 28px rgba(224,120,48,.3);animation:float1 4s ease-in-out infinite}
.diamond-c{width:55px;height:55px;top:20%;left:60%;background:#44AADB;box-shadow:0 10px 26px rgba(68,170,219,.3);animation:float2 5s ease-in-out infinite}
.diamond-n{width:38px;height:38px;top:50%;left:55%;background:#2A5A9A;box-shadow:0 8px 22px rgba(42,90,154,.3);animation:float3 6s ease-in-out infinite}
@keyframes float1{0%,100%{transform:rotate(45deg) translateY(0px)}50%{transform:rotate(52deg) translateY(-18px)}}
@keyframes float2{0%,100%{transform:rotate(45deg) translateY(0px)}50%{transform:rotate(38deg) translateY(-12px)}}
@keyframes float3{0%,100%{transform:rotate(45deg) translateY(0px)}50%{transform:rotate(50deg) translateY(-8px)}}

/* 共通セクションボタン */
.section-btn-wrap{text-align:center;margin-top:3.5rem;position:relative;z-index:2}
.section-btn{display:inline-block;border:2px solid var(--orange);color:var(--orange);background:transparent;padding:14px 48px;font-family:'Noto Sans JP',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.08em;text-decoration:none;border-radius:100px;transition:background .25s,color .25s,box-shadow .3s,transform .18s}
.section-btn:hover{background:var(--orange);color:var(--white);box-shadow:0 10px 30px rgba(217,95,26,.3);transform:translateY(-2px)}
.section-btn.teal{border-color:var(--teal);color:var(--teal)}
.section-btn.teal:hover{background:var(--teal);color:var(--white);box-shadow:0 10px 30px rgba(30,143,160,.3)}
.section-btn.white{border-color:rgba(255,255,255,.4);color:var(--white)}
.section-btn.white:hover{background:var(--white);color:var(--ink);box-shadow:0 10px 30px rgba(255,255,255,.2)}

/* ══ SERVICE ENTRY ══ */
.service-entry{background:var(--white)}
.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.sc{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:38px 28px;transition:transform .25s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden;display:block;text-decoration:none;color:inherit;cursor:pointer}
.sc:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(0,0,0,.1);border-color:var(--orange)}
.sc-img{margin:-38px -28px 1.25rem;height:130px;background-size:cover;background-position:center;background-repeat:no-repeat}
.sc-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}
.sc-icon svg{width:24px;height:24px;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sc-1 .sc-icon{background:var(--orange-light)}.sc-1 .sc-icon svg{stroke:var(--orange)}
.sc-2 .sc-icon{background:var(--teal-light)}.sc-2 .sc-icon svg{stroke:var(--teal)}
.sc-3 .sc-icon{background:var(--navy-light)}.sc-3 .sc-icon svg{stroke:var(--navy)}
.sc h3{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;margin-bottom:.7rem;color:var(--ink);letter-spacing:-.01em}
.sc p{font-size:.85rem;color:var(--muted);line-height:1.75}

/* ══ DATA SECTION（明るいパネル） ══ */
.data-sec{background:#f8f7f4;color:#111111;overflow:hidden;position:relative}
.data-sec .s-title{color:#111111}
.data-sec .s-chip{background:rgba(217,95,26,.12);color:var(--orange)}
.data-sec .s-sub{color:#555555}
.data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3.5rem;position:relative;z-index:1}
.dc{background:#ffffff;border:1px solid #e8e8e8;border-radius:20px;padding:48px 28px;text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.dc:hover{transform:translateY(-6px);border-color:#00ffcc;box-shadow:0 18px 40px rgba(0,0,0,.06)}
.dc-num{font-family:'Syne',sans-serif;font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800;line-height:1;margin-bottom:.9rem;display:flex;align-items:baseline;justify-content:center;gap:2px;letter-spacing:-.04em}
.dc-num .u{font-size:.42em;color:var(--orange);font-weight:700;margin-left:4px}
.dc-num .p{font-size:.38em;color:#666666;font-weight:500;margin-left:3px}
.dc-1 .dc-num{color:var(--orange)}
.dc-2 .dc-num{color:var(--teal)}
.dc-3 .dc-num{color:#ffcc44}
.dc-4 .dc-num{color:var(--orange)}
.dc-5 .dc-num{color:var(--teal)}
.dc-6 .dc-num{color:#ffcc44}
.dc-label{font-size:.82rem;color:#666666;letter-spacing:.04em;font-weight:500}

.data-charts{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem;position:relative;z-index:1}
.chart-card{background:#ffffff;border:1px solid #e8e8e8;border-radius:20px;padding:32px 28px 28px}
.chart-title{font-family:'Noto Sans JP',sans-serif;font-size:1rem;font-weight:700;color:#111111;margin-bottom:1.5rem;letter-spacing:.02em;display:flex;align-items:center;gap:.6rem}
.chart-title::before{content:'';width:4px;height:18px;background:#00ffcc;border-radius:2px}
.chart-bar-wrap{width:100%;height:280px;position:relative}
.chart-bar-wrap canvas{width:100%;height:100%;display:block}
.donut-layout{display:flex;align-items:center;gap:1.75rem}
.donut-canvas-wrap{flex:0 0 200px;width:200px;height:200px;position:relative}
.donut-canvas-wrap canvas{width:100%;height:100%;display:block}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:.9rem;min-width:0}
.legend-item{display:flex;align-items:center;gap:.7rem;font-size:.86rem;color:#333333}
.legend-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.legend-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend-value{font-family:'Syne',sans-serif;font-weight:800;color:#111111;font-size:.92rem}

/* ══ RESPONSIVE ADJUSTMENTS ══ */
@media(max-width:960px){
  .about-entry-layout{flex-direction:column;gap:2.5rem;align-items:stretch}
  .about-entry-layout > .reveal-left,
  .about-entry-layout > .about-visual{flex:0 0 auto;width:100%}
  .service-cards{grid-template-columns:1fr 1fr}
  .data-charts{grid-template-columns:1fr}
  .data-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .service-cards{grid-template-columns:1fr}
  .data-grid{grid-template-columns:1fr 1fr;gap:.9rem}
  .dc{padding:32px 18px}
}
@media(max-width:560px){
  .donut-layout{flex-direction:column;align-items:center;gap:1.25rem}
  .donut-canvas-wrap{flex:0 0 auto}
  .donut-legend{width:100%}
  .chart-bar-wrap{height:240px}
}

/* ==========================================================
   TRITECH BLOCK PUZZLE（ABOUT右側に埋め込み・ライトテーマ）
   全スタイルを #tritech-puzzle スコープに閉じ込める
   ========================================================== */
#tritech-puzzle {
  --tp-bg:        transparent;
  --tp-cell-fill: #f5f5f5;
  --tp-frame:     #e0e0e0;
  --tp-text:      #333333;
  --tp-text-dim:  #888888;
  --tp-accent:    #E07830;

  font-family: inherit;
  background: transparent;
  color: var(--tp-text);
  min-height: unset;
  padding: 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#tritech-puzzle,
#tritech-puzzle *,
#tritech-puzzle *::before,
#tritech-puzzle *::after { box-sizing: border-box; }

/* --- Header --- */
#tritech-puzzle .tp-header {
  text-align: center;
  margin-bottom: 14px;
  width: 100%;
}
#tritech-puzzle .tp-title {
  display: none; /* タイトル非表示 */
}
#tritech-puzzle .tp-hud {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--tp-text-dim);
  letter-spacing: 0.5px;
}
#tritech-puzzle .tp-hud b {
  color: var(--tp-text);
  font-weight: 600;
  margin: 0 2px;
}
#tritech-puzzle .tp-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}
#tritech-puzzle .tp-controls button {
  font: inherit;
  font-size: 11px;
  padding: 5px 12px;
  background: transparent;
  color: var(--tp-text-dim);
  border: 1px solid var(--tp-frame);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#tritech-puzzle .tp-controls button:hover:not(:disabled) {
  border-color: var(--tp-accent);
  color: var(--tp-accent);
}
#tritech-puzzle .tp-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Main: Board + Tray（縦積み） --- */
#tritech-puzzle .tp-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}

/* --- Board --- */
#tritech-puzzle .tp-board-area {
  flex: 0 0 auto;
  position: relative;
}
#tritech-puzzle .tp-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 1px;
  width: min(30vw, 280px);
  aspect-ratio: 1;
  border: 2px solid #cccccc;
  padding: 2px;
  background: #f9f9f9;
}
#tritech-puzzle .tp-cell {
  background: transparent;
  border: 1px solid #dddddd;
}
#tritech-puzzle .tp-cell.tp-silhouette {
  background: #e8e8e8;
  border: 1px solid #cccccc;
}

#tritech-puzzle .tp-pieces-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#tritech-puzzle .tp-pieces-layer .tp-piece {
  position: absolute;
  pointer-events: auto;
}

#tritech-puzzle .tp-drag-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}
#tritech-puzzle .tp-drag-layer .tp-piece {
  position: absolute;
  pointer-events: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

/* --- Tray --- */
#tritech-puzzle .tp-tray {
  width: 100%;
  max-width: 220px;
  min-width: 180px;
  border: 1px solid var(--tp-frame);
  border-radius: 4px;
  padding: 12px;
  min-height: 80px;
}
#tritech-puzzle .tp-tray-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--tp-text-dim);
  letter-spacing: 0.5px;
}
#tritech-puzzle .tp-tray-header strong {
  color: var(--tp-text);
  font-weight: 600;
}
#tritech-puzzle .tp-tray-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
  min-height: 50px;
}

/* --- Piece --- */
#tritech-puzzle .tp-piece {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#tritech-puzzle .tp-piece-shape {
  display: grid;
  gap: 1px;
}
#tritech-puzzle .tp-piece-cell {
  width: var(--tp-cell-px, 18px);
  height: var(--tp-cell-px, 18px);
  background: transparent;
}
#tritech-puzzle .tp-piece-cell.tp-on {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
#tritech-puzzle .tp-piece-meta {
  font-size: 9px;
  color: var(--tp-text-dim);
  letter-spacing: 0.5px;
}

#tritech-puzzle .tp-piece.is-tray { cursor: pointer; padding: 4px; border-radius: 6px; }
#tritech-puzzle .tp-piece.is-tray:hover { filter: brightness(1.08); }

#tritech-puzzle .tp-piece.is-placed {
  display: block;
  gap: 0;
  cursor: default;
  pointer-events: none;
}
#tritech-puzzle .tp-piece.is-placed .tp-piece-meta { display: none; }
#tritech-puzzle .tp-piece.is-placed .tp-piece-cell { pointer-events: none; }
#tritech-puzzle .tp-piece.is-placed .tp-piece-cell.tp-on {
  pointer-events: auto;
  cursor: pointer;
}
#tritech-puzzle .tp-piece.is-placed:hover { filter: none; }
#tritech-puzzle .tp-piece.is-placed:has(.tp-piece-cell.tp-on:hover) { filter: brightness(1.06); }

/* 選択中ピース */
#tritech-puzzle .tp-piece.is-selected {
  border: 2px solid #E07830;
  box-shadow: 0 0 8px rgba(224,120,48,0.5);
  cursor: pointer;
  border-radius: 6px;
  padding: 2px;
}
#tritech-puzzle .tp-piece.is-tray.is-selected { padding: 2px; }

/* ピース選択中のセルホバー */
#tritech-puzzle.is-selecting .tp-cell.tp-silhouette { cursor: pointer; }
#tritech-puzzle.is-selecting .tp-cell.tp-silhouette:hover {
  background: rgba(224,120,48,0.15);
}
/* プレビュー（選択ピースの設置先） */
#tritech-puzzle .tp-cell.tp-preview-ok {
  background: rgba(224,120,48,0.28) !important;
}
#tritech-puzzle .tp-cell.tp-preview-bad {
  background: rgba(230,57,70,0.22) !important;
}

/* --- レスポンシブ（600px以下） --- */
@media (max-width: 600px) {
  #tritech-puzzle .tp-board { width: min(80vw, 280px); }
  #tritech-puzzle .tp-tray  { max-width: min(80vw, 280px); min-width: 0; }
}

/* ==========================================================
   クリア演出
   ========================================================== */
#tritech-puzzle .tp-clear-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}
#tritech-puzzle .tp-clear-flash.tp-flash-active {
  animation: tpFlash 0.5s ease-in-out;
}
@keyframes tpFlash {
  0%   { opacity: 0; }
  20%  { opacity: 0.95; }
  100% { opacity: 0; }
}

#tritech-puzzle.tp-clearing .tp-tray,
#tritech-puzzle.tp-clearing .tp-header {
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 0.6s ease-out;
}
#tritech-puzzle.tp-clearing .tp-piece { pointer-events: none !important; }
#tritech-puzzle.tp-clearing .tp-board-area { z-index: 40; }

#tritech-puzzle .tp-clear-tritech {
  position: fixed;
  left: 50%;
  top: calc(50% - 220px);
  transform: translateX(-50%);
  font-size: 42px;
  letter-spacing: 14px;
  color: var(--tp-accent);
  font-weight: 700;
  text-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.6s ease-in;
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
}
#tritech-puzzle .tp-clear-tritech.is-visible { opacity: 1; }

#tritech-puzzle .tp-clear-logo {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: auto;
  margin: 16px auto;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease-in;
  z-index: 60;
  pointer-events: none;
}
#tritech-puzzle .tp-clear-logo.is-visible { opacity: 1; }

#tritech-puzzle .tp-clear-msg {
  position: fixed;
  left: 50%;
  top: calc(50% + 200px);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  z-index: 70;
  pointer-events: none;
}
#tritech-puzzle .tp-clear-msg.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#tritech-puzzle .tp-clear-msg h2 {
  margin: 0 0 14px;
  font-size: 22px;
  color: var(--tp-accent);
  font-weight: 600;
  letter-spacing: 2px;
}
#tritech-puzzle .tp-clear-replay {
  font: inherit;
  font-size: 14px;
  padding: 10px 26px;
  background: var(--tp-accent);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1px;
  transition: background 0.15s;
}
#tritech-puzzle .tp-clear-replay:hover { background: #c66825; }

/* ════════════════════════════════════════════
   ★★★ RECRUIT MODE 切替 — index → recruit-detail への遷移演出
   ════════════════════════════════════════════ */

/* nav 自体に滑らかなトランジション（明テーマ ⇄ 暗テーマ） */
nav{transition:background .6s cubic-bezier(.16,1,.3,1),border-bottom-color .6s,box-shadow .6s,color .6s}
.nav-logo-name,.nav-logo-img,.nav-links a,.nav-recruit,.nav-hamburger,.nav-hamburger span,.nav-logo-click-hint{transition:color .5s,background .5s,box-shadow .5s,filter .5s,border-color .5s}

/* 暗テーマ：nav 全体 */
body.recruit-mode nav{
  background:rgba(10,10,26,.92)!important;
  border-bottom-color:rgba(0,255,136,.25)!important;
  box-shadow:0 2px 28px rgba(0,255,136,.18);
}
body.recruit-mode .nav-logo-name{color:#00ff88;text-shadow:0 0 10px rgba(0,255,136,.5)}
body.recruit-mode .nav-logo-img{filter:drop-shadow(0 0 10px rgba(0,255,136,.55))}
body.recruit-mode .nav-logo-click-hint{color:#00ff88}
body.recruit-mode .nav-links a{color:rgba(255,255,255,.55)}
body.recruit-mode .nav-links a:hover{color:#00ff88}
/* recruit-mode 時のカレントメニュー（=「エンジニアの方へ」）を強調 */
body.recruit-mode .nav-links a.cur{color:#00ff88;font-weight:700;text-shadow:0 0 8px rgba(0,255,136,.5)}
body.recruit-mode .nav-recruit{
  background:#00ff88!important;color:#000!important;
  box-shadow:0 0 18px rgba(0,255,136,.5)!important;
}
body.recruit-mode .nav-recruit:hover{background:#00cc6e!important;box-shadow:0 0 26px rgba(0,255,136,.7)!important}
body.recruit-mode .nav-hamburger{border-color:rgba(0,255,136,.45)}
body.recruit-mode .nav-hamburger span{background:#00ff88}

/* ════════════════════════════════════════════
   ★ トランジションゾーン（CRT グリッチ演出）
   ════════════════════════════════════════════ */
.transition-zone{
  position:relative;
  min-height:32vh;
  background:linear-gradient(180deg,var(--bg) 0%,#1a1a2e 45%,#0a0a1a 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  scroll-margin-top:68px;
}
.transition-zone::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 60%,rgba(217,95,26,.22),transparent 60%),
    radial-gradient(ellipse 50% 30% at 70% 70%,rgba(0,255,136,.12),transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 90%,rgba(255,204,68,.10),transparent 60%);
  pointer-events:none;
}
.transition-zone::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,136,.05) 2px,rgba(0,255,136,.05) 3px);
  pointer-events:none;animation:tzScanFlicker 4s linear infinite;
}
@keyframes tzScanFlicker{0%,100%{opacity:.6}50%{opacity:1}}

.scan-beam{
  position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#00ff88,transparent);
  box-shadow:0 0 22px #00ff88,0 0 44px rgba(0,255,136,.5);
  animation:tzScanMove 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
  pointer-events:none;
}
@keyframes tzScanMove{0%{top:-4px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:101%;opacity:0}}

.trans-content{
  position:relative;z-index:2;text-align:center;
  font-family:'Press Start 2P','Noto Sans JP',monospace;color:#00ff88;
  padding:0 5vw;
}
.trans-tag{
  font-size:.75rem;letter-spacing:.25em;margin-bottom:1.5rem;
  color:rgba(0,255,136,.7);
  animation:tzTagBlink 1.4s step-end infinite;
}
@keyframes tzTagBlink{0%,100%{opacity:.85}50%{opacity:.35}}
.trans-tag::before{content:'▸ ';color:var(--orange)}

.trans-title{
  font-size:clamp(1.6rem,4.5vw,3rem);
  letter-spacing:.18em;line-height:1.2;margin-bottom:1.5rem;
  text-shadow:0 0 24px rgba(0,255,136,.6),0 0 48px rgba(0,255,136,.3);
}
.trans-glitch{position:relative;display:inline-block}
.trans-glitch::before,.trans-glitch::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
}
.trans-glitch::before{color:#ff0058;animation:tzGlitchA 2.6s infinite linear alternate-reverse;clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}
.trans-glitch::after{color:#00ffff;animation:tzGlitchB 2.6s infinite linear alternate-reverse;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
@keyframes tzGlitchA{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,-2px)}}
@keyframes tzGlitchB{0%,100%{transform:translate(0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,2px)}}

.trans-sub{
  font-family:'Noto Sans JP',sans-serif;
  font-size:.95rem;letter-spacing:.08em;color:rgba(255,255,255,.55);font-weight:500;
  margin-bottom:2.5rem;
}

.trans-loader{
  width:min(320px,80%);height:4px;
  background:rgba(0,255,136,.15);
  margin:0 auto;border-radius:2px;overflow:hidden;
  position:relative;
}
.trans-loader::before{
  content:'';position:absolute;left:-30%;top:0;bottom:0;width:30%;
  background:linear-gradient(90deg,transparent,#00ff88,transparent);
  animation:tzLoadSweep 1.8s ease-in-out infinite;
  box-shadow:0 0 12px #00ff88;
}
@keyframes tzLoadSweep{0%{left:-30%}100%{left:100%}}

.trans-arrow{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  z-index:2;
  width:0;height:0;
  border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:20px solid #00ff88;
  filter:drop-shadow(0 0 12px #00ff88);
  animation:tzArrowDown 1.6s ease-in-out infinite;
}
@keyframes tzArrowDown{0%,100%{transform:translateX(-50%) translateY(0);opacity:.7}50%{transform:translateX(-50%) translateY(10px);opacity:1}}

/* recruit セクションコンテナ（index.html に直接統合済み）
   トランジションゾーン直後に緑のグロー境界線を入れる演出 */
.recruit-zone{
  position:relative;background:#0a0a1a;
  border-top:2px solid #00ff88;box-shadow:0 -4px 28px rgba(0,255,136,.3);
}