/* =========================================================
   株式会社エイトハブ 公式サイト  style.css  (v2 — premium)
   Clean corporate / blue系 / editorial
   ========================================================= */

:root{
  --blue:        #0a8ed4;   /* 爽やかスカイブルー（Sky系） */
  --blue-vivid:  #1478c8;
  --blue-deep:   #0b5fa5;
  --blue-ink:    #0a3a63;
  --blue-light:  #e9f5fc;
  --blue-mist:   #f4fafd;
  --ink:         #16202e;
  --ink-soft:    #34404f;
  --gray:        #5a6675;
  --gray-light:  #98a2b0;
  --line:        #e6ecf1;
  --bg:          #ffffff;
  --bg-soft:     #f6f9fb;
  --maxw:        1240px;
  --gutter:      6.5vw;
  --ease:        cubic-bezier(.19,1,.22,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Meiryo, sans-serif;
  font-feature-settings:"palt";
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

h1,h2,h3,h4{ font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; line-height:1.45; letter-spacing:.01em; font-weight:700; }

/* ---- English display label ---- */
.en-label{
  display:inline-flex; align-items:center; gap:14px; font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:.7rem; font-weight:700; letter-spacing:.34em; color:var(--blue);
  text-transform:uppercase; margin-bottom:24px;
}
.en-label::before{ content:""; width:28px; height:1px; background:linear-gradient(90deg,rgba(10,142,212,0),var(--blue)); flex:none; }
.stats-head .en-label::before,.pre-footer .en-label::before,.entry-card .en-label::before,.tw-banner .en-label::before{ background:linear-gradient(90deg,rgba(143,208,244,0),#8fd0f4); }
.section-title{
  font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.4; margin-bottom:30px; letter-spacing:.02em;
  color:var(--ink);
}
.section-title .thin{ font-weight:500; }
.lead{ color:var(--gray); font-size:1.02rem; line-height:1.95; }

.section{ padding:clamp(100px,14vw,200px) 0; position:relative; }
/* セクション上端の極細ヘアライン（Sky的な上質な区切り） */
.hairline-top{ position:relative; }
.hairline-top::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(1240px,86vw); height:1px; background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent); }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:82px;
  display:flex; align-items:center;
  transition:background .5s var(--ease), height .4s var(--ease), box-shadow .5s;
}
.site-header::before{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px); opacity:0; transition:opacity .5s;
}
.site-header.scrolled{ height:66px; box-shadow:0 1px 0 var(--line), 0 8px 30px rgba(12,20,36,.05); }
.site-header.scrolled::before{ opacity:1; }
.header-inner{
  position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:baseline; gap:13px; }
.logo-mark{
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:1.2rem;
  color:var(--blue); letter-spacing:.06em; line-height:1;
}
.footer-logo{ letter-spacing:.06em; }
.logo-name{ font-size:.82rem; font-weight:500; color:var(--ink-soft); letter-spacing:.08em; }

.gnav ul{ display:flex; align-items:center; gap:38px; }
.gnav a{ font-size:.9rem; font-weight:500; position:relative; padding:6px 0; }
.gnav li:not(.nav-cta) a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--blue);
  transition:width .4s var(--ease);
}
.gnav li:not(.nav-cta) a:hover{ color:var(--blue); }
.gnav li:not(.nav-cta) a:hover::after{ width:100%; }
.nav-cta a{
  background:var(--blue); color:#fff; padding:12px 26px; border-radius:2px; font-weight:700; font-size:.86rem;
  letter-spacing:.06em; transition:background .35s, transform .35s var(--ease), box-shadow .35s;
  box-shadow:0 4px 14px rgba(21,88,214,.22);
}
.nav-cta a:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 10px 24px rgba(21,88,214,.3); }

.nav-toggle{ display:none; flex-direction:column; gap:7px; width:30px; height:22px; background:none; border:0; cursor:pointer; z-index:1001; }
.nav-toggle span{ display:block; height:1.5px; width:100%; background:var(--ink); transition:.4s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }
.nav-overlay{ position:fixed; inset:0; background:rgba(12,20,36,.45); opacity:0; visibility:hidden; transition:.4s; z-index:998; }
.nav-overlay.show{ opacity:1; visibility:visible; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:14px; padding:19px 40px; border-radius:2px;
  font-weight:700; font-size:.94rem; letter-spacing:.06em; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s, color .4s;
}
.btn .arrow{ width:20px; height:1px; background:currentColor; position:relative; transition:width .4s var(--ease); }
.btn .arrow::after{ content:""; position:absolute; right:0; top:50%; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:translateY(-50%) rotate(45deg); }
.btn:hover .arrow{ width:30px; }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 12px 30px rgba(21,88,214,.26); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(21,88,214,.34); }
.btn-primary::before{ content:""; position:absolute; inset:0; background:var(--blue-deep); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); z-index:-1; }
.btn-primary:hover::before{ transform:scaleX(1); }
.btn-ghost{ color:var(--ink); border:1px solid var(--line); background:#fff; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-3px); }
.btn-white{ background:#fff; color:var(--blue); box-shadow:0 12px 30px rgba(0,0,0,.14); }
.btn-white:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(0,0,0,.2); }

/* =========================================================
   HERO — cinematic full-bleed
   ========================================================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:120px 0 80px; overflow:hidden; background:var(--blue-mist);
}
.hero-bg{
  position:absolute; inset:0; z-index:0; transform:scale(1.06);
  background:url("/assets/img/hero.png") center right/cover no-repeat;
  transition:transform .6s var(--ease-out); will-change:transform;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, #fff 8%, rgba(255,255,255,.7) 38%, rgba(255,255,255,0) 68%);
}
/* 多階調の青レイヤー（Sky=空の移ろい）: 微細に呼吸するグラデ層 */
.hero-layer{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:multiply; opacity:.5;
  background:
    radial-gradient(1100px 620px at 82% 18%, rgba(10,142,212,.22), transparent 62%),
    radial-gradient(900px 560px at 96% 74%, rgba(11,95,165,.20), transparent 60%),
    radial-gradient(760px 520px at 62% 100%, rgba(60,160,235,.14), transparent 58%);
  animation:heroBreath 14s ease-in-out infinite alternate; will-change:transform,opacity;
}
@keyframes heroBreath{ 0%{ transform:translate3d(0,0,0) scale(1); opacity:.42; } 100%{ transform:translate3d(-1.5%,1.2%,0) scale(1.06); opacity:.58; } }
.hero-grid-ov{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(10,142,212,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,142,212,.06) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 88% 20%, #000, transparent 66%);
  -webkit-mask-image:radial-gradient(circle at 88% 20%, #000, transparent 66%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-eyebrow{
  display:flex; align-items:center; gap:16px; font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:.74rem; font-weight:700; letter-spacing:.3em; color:var(--blue); margin-bottom:34px;
}
.hero-eyebrow::before{ content:""; width:44px; height:1px; background:linear-gradient(90deg,var(--blue),rgba(10,142,212,0)); }
.hero-title{
  font-size:clamp(2.2rem,5.6vw,4.4rem); line-height:1.4; letter-spacing:.02em; margin-bottom:36px; font-weight:700;
}
.hero-title .accent{ color:var(--blue); }
.hero-title .xl{ display:inline-block; }
.hero-text{ font-size:clamp(1rem,1.4vw,1.12rem); color:var(--ink-soft); max-width:560px; line-height:1.95; margin-bottom:48px; font-weight:500; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; left:var(--gutter); bottom:38px; z-index:2; display:flex; align-items:center; gap:12px;
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:.64rem; letter-spacing:.28em; color:var(--gray); text-transform:uppercase;
}
.hero-scroll .bar{ width:1px; height:52px; background:var(--line); position:relative; overflow:hidden; }
.hero-scroll .bar::after{ content:""; position:absolute; top:-52px; left:0; width:100%; height:52px; background:var(--blue); animation:scrolldown 2.4s var(--ease) infinite; }
@keyframes scrolldown{ 0%{top:-52px;} 60%,100%{top:52px;} }

/* =========================================================
   Intro statement (large editorial message)
   ========================================================= */
.statement{ background:#fff; text-align:center; position:relative; overflow:hidden; }
.statement::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 380px at 50% -8%, rgba(10,142,212,.07), transparent 62%),
    radial-gradient(560px 320px at 12% 108%, rgba(11,95,165,.05), transparent 60%),
    radial-gradient(560px 320px at 90% 108%, rgba(60,160,235,.05), transparent 60%);
}
.statement .container{ max-width:1000px; position:relative; z-index:1; }
/* MISSIONの上に小さなシンボルマーク */
.statement-mark{ width:38px; height:38px; margin:0 auto 30px; opacity:.9; }
.statement-mark svg{ width:100%; height:100%; display:block; }
.statement-lead{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:.72rem; letter-spacing:.3em; color:var(--blue); margin-bottom:40px; }
.statement-title{
  font-size:clamp(1.6rem,4.4vw,3rem); line-height:1.62; font-weight:700; letter-spacing:.02em; margin-bottom:40px;
}
.statement-title b{ color:var(--blue); font-weight:700; }
.statement-text{ color:var(--gray); max-width:660px; margin-inline:auto; line-height:1.95; }

/* =========================================================
   About — editorial split w/ real image
   ========================================================= */
.about{ background:var(--bg-soft); overflow:hidden; }
.about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:min(8vw,110px); align-items:center; }
.about-figure{ position:relative; }
.about-figure img{ border-radius:6px; box-shadow:0 44px 90px rgba(10,52,145,.18); width:100%; position:relative; z-index:1; }
.about-figure::before{
  content:""; position:absolute; z-index:0; inset:auto auto -34px -34px; width:62%; height:62%;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep)); border-radius:8px; opacity:.10;
}
.about-figure::after{
  content:""; position:absolute; z-index:0; inset:-30px -30px auto auto; width:120px; height:120px;
  background-image:radial-gradient(rgba(10,142,212,.35) 1.4px, transparent 1.4px); background-size:15px 15px; opacity:.5;
}
.about-figure .badge{
  position:absolute; left:-28px; bottom:-28px; background:#fff; padding:26px 34px; border-radius:4px;
  box-shadow:0 20px 50px rgba(12,20,36,.12);
}
.about-figure .badge .n{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:2.4rem; font-weight:700; color:var(--blue); line-height:1; }
.about-figure .badge .t{ font-size:.78rem; color:var(--gray); margin-top:8px; letter-spacing:.05em; }
.about-body p{ margin-bottom:22px; color:var(--ink-soft); line-height:1.85; }
.about-body p:last-child{ margin-bottom:0; }
.about-body .big{ font-size:1.18rem; font-weight:700; color:var(--ink); line-height:1.7; margin-bottom:24px; }

/* =========================================================
   Strength — numbered editorial rows
   ========================================================= */
.strength{ background:#fff; }
.strength-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:80px; }
.strength-head .lead{ padding-bottom:8px; }
.slist{ border-top:1px solid var(--line); }
.srow{
  display:grid; grid-template-columns:100px 1fr 2fr; gap:40px; align-items:start;
  padding:52px 0; border-bottom:1px solid var(--line); transition:padding .5s var(--ease);
}
.srow .snum{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:1.1rem; font-weight:700; color:var(--blue); letter-spacing:.1em; }
.srow h3{ font-size:1.35rem; line-height:1.5; }
.srow p{ color:var(--gray); font-size:.98rem; padding-top:4px; line-height:1.85; }
.srow{ position:relative; }
.srow::before{ content:""; position:absolute; left:0; top:-1px; width:0; height:1px; background:var(--blue); transition:width .6s var(--ease); }
.srow:hover::before{ width:100%; }
.srow:hover{ padding-inline:24px; background:linear-gradient(90deg,var(--blue-mist),transparent); }
.srow:hover .snum{ color:var(--blue-deep); }

/* =========================================================
   Stats (数字カウントアップ)
   ========================================================= */
.stats{ background:var(--blue-ink); color:#fff; position:relative; overflow:hidden; }
.stats-bg{
  position:absolute; inset:-15% 0; z-index:0; pointer-events:none; will-change:transform;
  background:
    radial-gradient(700px 400px at 15% 20%, rgba(60,160,235,.28), transparent 60%),
    radial-gradient(700px 400px at 88% 85%, rgba(20,120,200,.30), transparent 60%);
}
.stats .container{ position:relative; z-index:1; }
.stats-head{ text-align:center; margin-bottom:66px; }
/* 白文字は濃い背景の実績(.stats)セクション内のみに限定（採用ページ等の流用先で白抜けするのを防ぐ） */
.stats .stats-head .en-label{ display:inline-block; color:#8fd0f4; }
.stats .stats-head .section-title{ color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.stat{ text-align:center; padding:20px; position:relative; }
.stat + .stat::before, .stat:nth-child(2)::before{ content:""; }
.stats-grid .stat:not(:first-child){ border-left:1px solid rgba(255,255,255,.14); }
.stat-num{ font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; line-height:1; color:#fff; display:flex; align-items:baseline; justify-content:center; gap:2px; }
.stat-num span{ font-size:clamp(3.2rem,7vw,5.2rem); letter-spacing:.01em; }
.stat-num i{ font-size:clamp(1.2rem,2.4vw,1.8rem); font-style:normal; color:#8fd0f4; font-weight:700; }
.stat-label{ font-size:1.05rem; font-weight:700; margin-top:18px; letter-spacing:.06em; }
.stat-sub{ font-size:.85rem; color:#b9cfe6; margin-top:8px; }
@media (max-width:760px){
  .stats-grid{ grid-template-columns:1fr; gap:0; }
  .stats-grid .stat:not(:first-child){ border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .stat{ padding:36px 20px; }
}

/* =========================================================
   Trust (導入企業ロゴ帯)
   ========================================================= */
.trust{ background:#fff; text-align:center; padding:clamp(70px,9vw,110px) 0; }
.trust-lead{ color:var(--ink-soft); font-size:1.02rem; font-weight:500; margin-bottom:44px; }
.logo-strip{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 56px; }
.logo-item{
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:.14em;
  color:#c2cbd6; transition:color .35s, transform .35s var(--ease); user-select:none;
}
.logo-item:hover{ color:var(--blue); transform:translateY(-2px); }
.trust-note{ margin-top:38px; font-size:.8rem; color:var(--gray-light); }

/* =========================================================
   Service — TapWriter feature block
   ========================================================= */
.service{ background:var(--blue-mist); position:relative; overflow:hidden; }
.service::before{
  content:""; position:absolute; inset:0; opacity:1; pointer-events:none;
  background:radial-gradient(900px 500px at 92% -5%, rgba(10,142,212,.08), transparent 60%);
}
.service .container{ position:relative; }
.service-top{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:60px; }
.service-name{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700; letter-spacing:.02em; line-height:1.2; color:var(--ink); }
.service-name span{ font-size:.36em; font-weight:500; color:var(--blue); margin-left:.5em; letter-spacing:.1em; }
.service-desc{ color:var(--gray); line-height:1.9; font-size:1.02rem; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feat{ background:#fff; padding:42px 34px; border:1px solid var(--line); border-radius:6px; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; position:relative; }
.feat:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(10,142,212,.12); border-color:transparent; }
.feat .fnum{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:.82rem; color:var(--blue); letter-spacing:.16em; font-weight:700; }
.feat h4{ font-size:1.2rem; margin:14px 0 12px; font-weight:700; color:var(--ink); letter-spacing:.02em; }
.feat p{ font-size:.94rem; color:var(--gray); line-height:1.85; }
.service-cta .btn-white{ background:var(--blue); color:#fff; box-shadow:0 12px 30px rgba(10,142,212,.26); }
.service-cta .btn-white:hover{ background:var(--blue-deep); }
.service-cta{ margin-top:56px; }

/* =========================================================
   Pre-footer CTA
   ========================================================= */
.pre-footer{
  background:var(--bg-soft); text-align:center; padding:clamp(80px,11vw,150px) 0;
}
.pre-footer .en-label{ display:inline-block; }
.pre-footer-title{ font-size:clamp(1.8rem,4.4vw,3rem); font-weight:700; letter-spacing:.03em; line-height:1.5; margin-bottom:26px; }
.pre-footer-text{ color:var(--gray); margin-bottom:46px; line-height:1.9; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--ink); color:#a7b0c0; padding-top:clamp(70px,9vw,110px); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:64px; }
.footer-logo{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:1.6rem; font-weight:700; color:#fff; display:block; margin-bottom:22px; }
.footer-company{ font-weight:700; color:#fff; margin-bottom:10px; font-size:.98rem; }
.footer-address{ font-size:.86rem; opacity:.65; line-height:1.9; }
.footer-col h5{ font-size:.72rem; letter-spacing:.2em; color:#7a8496; font-weight:700; margin-bottom:22px; text-transform:uppercase; }
.footer-col ul{ display:grid; gap:15px; }
.footer-col a{ font-size:.9rem; opacity:.82; transition:opacity .3s, color .3s; }
.footer-col a:hover{ opacity:1; color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.09); padding:26px 0; }
.footer-bottom .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.copyright{ font-size:.76rem; opacity:.5; letter-spacing:.04em; }

/* =========================================================
   Sub-page hero
   ========================================================= */
.page-hero{
  padding:180px 0 90px; background:
    radial-gradient(900px 400px at 88% -30%, rgba(21,88,214,.12), transparent 60%), var(--bg-soft);
  border-bottom:1px solid var(--line); position:relative; overflow:hidden;
}
.page-hero .breadcrumb{ font-size:.8rem; color:var(--gray); margin-bottom:22px; letter-spacing:.04em; }
.page-hero .breadcrumb a:hover{ color:var(--blue); }
.page-hero .en-label{ margin-bottom:14px; }
.page-hero h1{ font-size:clamp(2rem,5vw,3.2rem); letter-spacing:.03em; }

/* ---- ナビの外部リンクアイコン ---- */
.nav-ext{ display:inline-flex; align-items:center; gap:5px; padding-right:2px; }
.ext-ico{ width:11px; height:11px; position:relative; display:inline-block; opacity:.6; flex:0 0 auto; margin-right:2px; }
.ext-ico::before{ content:""; position:absolute; inset:0 0 auto auto; width:7px; height:7px; border:1.4px solid currentColor; border-left:0; border-bottom:0; }
.ext-ico::after{ content:""; position:absolute; right:1px; top:3px; width:9px; height:1.4px; background:currentColor; transform:rotate(-45deg); transform-origin:right; }

/* =========================================================
   TapWriter公式バナー
   ========================================================= */
.tw-banner-sec{ padding-top:0; }
.tw-banner{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--blue) 0%, var(--blue-deep) 100%); color:#fff;
  border-radius:12px; padding:clamp(40px,5.5vw,64px); position:relative; overflow:hidden;
}
.tw-banner::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at 85% 0%,#000,transparent 70%); }
.tw-banner-body{ position:relative; max-width:640px; }
.tw-banner .en-label{ display:inline-block; color:#bfe0f6; }
.tw-banner-title{ font-size:clamp(1.4rem,3vw,2rem); margin:8px 0 14px; }
.tw-banner-text{ opacity:.94; line-height:1.9; margin:0; font-size:.98rem; }
.tw-banner .btn-white{ position:relative; flex-shrink:0; }
@media (max-width:760px){ .tw-banner{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   Sub-page shared blocks
   ========================================================= */
.svc-intro{ max-width:860px; }
.svc-intro .section-title{ margin-bottom:26px; }

/* 2本柱 */
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.pillar{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:48px 44px; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.pillar:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(10,142,212,.1); border-color:transparent; }
.pillar-tag{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.1em; color:var(--blue); }
.pillar h3{ font-size:1.4rem; margin:16px 0 16px; }
.pillar p{ color:var(--gray); font-size:.98rem; margin:0; }

/* 導入の流れ */
.flow-sec{ background:var(--bg-soft); }
.flow-sec .stats-head{ margin-bottom:56px; }
.flow-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:flow; }
.flow-item{ background:#fff; border-radius:8px; padding:38px 30px; border:1px solid var(--line); position:relative; }
.flow-step{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.12em; color:var(--blue); }
.flow-item h4{ font-size:1.16rem; margin:14px 0 12px; }
.flow-item p{ font-size:.9rem; color:var(--gray); margin:0; line-height:1.8; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } .flow-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .flow-list{ grid-template-columns:1fr; } }

/* 代表メッセージ */
.message-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:min(8vw,90px); }
.ceo-name{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.ceo-role{ font-size:.82rem; color:var(--gray); letter-spacing:.08em; }
.ceo-fullname{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:1.6rem; font-weight:700; letter-spacing:.06em; }
.message-lead{ font-size:1.24rem; font-weight:700; color:var(--ink); line-height:1.7; margin-bottom:28px; }
.message-body p{ color:var(--ink-soft); margin-bottom:22px; }
.message-body p:last-child{ margin-bottom:0; }
@media (max-width:900px){ .message-grid{ grid-template-columns:1fr; gap:40px; } }

/* 会社情報テーブル */
.overview-sec{ background:var(--bg-soft); }
.info-table{ margin-top:36px; border-top:1px solid var(--line); }
.info-row{ display:grid; grid-template-columns:220px 1fr; gap:30px; padding:26px 8px; border-bottom:1px solid var(--line); }
.info-row dt{ font-weight:700; color:var(--ink); font-size:.96rem; }
.info-row dd{ margin:0; color:var(--ink-soft); font-size:.96rem; }
.inline-link{ color:var(--blue); border-bottom:1px solid currentColor; padding-bottom:1px; }
.inline-link:hover{ color:var(--blue-deep); }
@media (max-width:640px){ .info-row{ grid-template-columns:1fr; gap:6px; padding:20px 4px; } }

/* 採用エントリー */
.entry-sec{ padding-top:0; }
.entry-card{ background:linear-gradient(135deg,var(--blue) 0%, var(--blue-deep) 100%); color:#fff; border-radius:12px; padding:clamp(48px,7vw,80px); text-align:center; position:relative; overflow:hidden; }
.entry-card::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at 50% 0%,#000,transparent 75%); }
.entry-card > *{ position:relative; }
.entry-card .en-label{ display:inline-block; color:#bfe0f6; }
.entry-title{ font-size:clamp(1.5rem,3.6vw,2.2rem); margin:8px 0 20px; }
.entry-text{ opacity:.95; margin-bottom:38px; line-height:1.95; }
.entry-card .btn-primary{ background:#fff; color:var(--blue); box-shadow:0 12px 30px rgba(0,0,0,.16); }
.entry-card .btn-primary::before{ display:none; }
.entry-card .btn-primary:hover{ background:#fff; color:var(--blue-deep); }

/* 問い合わせフォーム */
.contact-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:min(7vw,80px); align-items:start; }
.contact-intro .lead{ margin-bottom:32px; }
.contact-meta{ padding:24px 26px; background:var(--blue-mist); border-radius:8px; }
.meta-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--blue); margin-bottom:6px; }
.meta-val{ font-weight:700; color:var(--ink); }
.contact-form{ background:#fff; }
.field{ margin-bottom:24px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field label{ display:block; font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.req{ font-size:.68rem; background:var(--blue); color:#fff; padding:3px 9px; border-radius:4px; margin-left:8px; letter-spacing:.04em; vertical-align:middle; }
.field input, .field textarea, .field select{
  width:100%; padding:15px 16px; border:1px solid var(--line); border-radius:6px; font-family:inherit;
  font-size:1rem; color:var(--ink); background:var(--bg-soft); transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(10,142,212,.1);
}
.field textarea{ resize:vertical; line-height:1.8; }
.select-wrap{ position:relative; }
.select-wrap::after{ content:""; position:absolute; right:18px; top:50%; width:9px; height:9px; border-right:2px solid var(--gray); border-bottom:2px solid var(--gray); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-privacy{ font-size:.86rem; color:var(--gray); margin:8px 0 22px; }
.form-privacy a{ color:var(--blue); border-bottom:1px solid currentColor; }
.form-submit{ width:100%; justify-content:center; }
.form-errors{ background:#fdecec; border:1px solid #f5c2c2; border-radius:8px; padding:18px 22px; margin-bottom:26px; }
.form-errors p{ color:#c0392b; font-size:.9rem; margin:0 0 6px; }
.form-errors p:last-child{ margin-bottom:0; }
.form-done{ text-align:center; max-width:620px; margin-inline:auto; padding:40px 0; }
.done-icon{ width:76px; height:76px; border-radius:50%; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; }
.done-icon svg{ width:34px; height:34px; }
.form-done h2{ font-size:1.7rem; margin-bottom:18px; }
.form-done p{ color:var(--gray); margin-bottom:36px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } .field-row{ grid-template-columns:1fr; gap:0; } }

/* リーガル（プライバシー） */
.legal-body{ max-width:820px; }
.legal-body > p{ color:var(--ink-soft); margin-bottom:20px; }
.legal-body h3{ font-size:1.2rem; margin:44px 0 14px; padding-left:16px; border-left:3px solid var(--blue); }
.legal-list{ list-style:none; margin:0 0 20px; padding:0; }
.legal-list li{ position:relative; padding-left:22px; color:var(--ink-soft); margin-bottom:10px; }
.legal-list li::before{ content:""; position:absolute; left:0; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.legal-date{ margin-top:44px; color:var(--gray); font-size:.9rem; }

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; } .reveal.d2{ transition-delay:.24s; } .reveal.d3{ transition-delay:.36s; } .reveal.d4{ transition-delay:.48s; }
.reveal-mask{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease-out); }
.reveal-mask.in{ clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion:reduce){ .reveal,.reveal-mask{ opacity:1; transform:none; clip-path:none; transition:none; } .hero-bg{ transform:none; } }

/* =========================================================
   404
   ========================================================= */
.notfound{ padding:210px 0 160px; text-align:center; background:
  radial-gradient(800px 400px at 50% 0%, rgba(10,142,212,.08), transparent 60%), var(--bg); }
.nf-code{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:clamp(5rem,16vw,10rem); font-weight:700; line-height:1;
  background:linear-gradient(120deg,var(--blue),var(--blue-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.02em; }
.nf-title{ font-size:clamp(1.4rem,3.4vw,2rem); margin:24px 0 20px; }
.nf-text{ color:var(--gray); margin-bottom:40px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; gap:56px; }
  .about-figure{ order:-1; max-width:560px; }
  .strength-head{ grid-template-columns:1fr; gap:20px; margin-bottom:50px; }
  .srow{ grid-template-columns:64px 1fr; gap:8px 28px; }
  .srow p{ grid-column:2; }
  .service-top{ grid-template-columns:1fr; gap:28px; }
  .feat-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  :root{ --gutter:7vw; }
  body{ line-height:1.95; }
  .logo-name{ display:none; }
  .nav-toggle{ display:flex; }
  .gnav{
    position:fixed; inset:0 -100% 0 auto; width:82%; max-width:340px; background:#fff;
    box-shadow:-20px 0 60px rgba(0,0,0,.12); padding:110px 34px 40px; transition:right .5s var(--ease); z-index:1000; right:-100%;
  }
  .gnav.open{ right:0; }
  .gnav ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .gnav li:not(.nav-cta) a{ display:block; padding:16px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .gnav li:not(.nav-cta) a::after{ display:none; }
  .nav-cta{ margin-top:22px; }
  .nav-cta a{ display:block; text-align:center; padding:16px; }
  .hero{ min-height:auto; padding:150px 0 90px; }
  .hero-bg::after{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55)); }
  .hero-scroll{ display:none; }
  .about-figure .badge{ left:auto; right:16px; padding:20px 26px; }
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  /* スマホ: フッターリンクのタップ領域を確保 */
  .footer-col ul{ gap:2px; }
  .footer-col a{ display:inline-block; padding:12px 0; font-size:.95rem; }
}


/* ===== Our Services (提供サービス) ===== */
.our-services .osvc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
  margin-top:40px;
}
.osvc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:38px 34px 30px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#f4fbff 100%);
  border:1px solid rgba(10,142,212,.22);
  box-shadow:0 6px 24px rgba(10,142,212,.06);
  text-decoration:none;
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.osvc-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:5px;
  background:linear-gradient(90deg,#0a8ed4,#33c1ff);
}
.osvc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 44px rgba(10,142,212,.18);
  border-color:rgba(10,142,212,.45);
}
.osvc-badge{
  align-self:flex-start;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  color:#0a8ed4;
  background:rgba(10,142,212,.1);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:16px;
}
.osvc-badge-alt{
  color:#0a9b6a;
  background:rgba(10,155,106,.12);
}
.osvc-name{
  margin:0 0 12px;
  font-size:1.5rem;
  font-weight:800;
  color:#0f2233;
  line-height:1.3;
}
.osvc-name .osvc-jp{
  font-size:.92rem;
  font-weight:600;
  color:#5a6b78;
  margin-left:4px;
}
.osvc-desc{
  margin:0 0 22px;
  line-height:1.85;
  color:#42525e;
  flex:1;
}
.osvc-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:.95rem;
  color:#0a8ed4;
}
.osvc-card:hover .osvc-link .arrow{ transform:translateX(5px); }
.osvc-link .arrow{
  width:16px; height:16px;
  display:inline-block;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a8ed4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .28s ease;
}