@charset "utf-8";

/* =========================================================
   BINDS SUPPORT — renewal 2026
   Base : white
   Accent: brand orange（現行ロゴ logo02.jpg の実測値 #EB6112）
   ========================================================= */

:root{
  --ink:        #1C1C1C;   /* 見出し・本文の墨 */
  --ink-2:      #333333;
  --body:       #4D4D4D;   /* 本文グレー */
  --muted:      #8A8A8A;
  --line:       #E5E5E5;
  --line-2:     #F0F0F0;
  --paper:      #FFFFFF;   /* ベース */
  --mist:       #F8F7F5;   /* セクション背景（ごく薄い生成り） */
  --accent:     #EB6112;   /* ロゴのオレンジ */
  --accent-d:   #CC4F08;
  --accent-l:   #FEF2E9;

  --maxw: 1160px;
  --pad: 24px;
  --r: 4px;

  --f-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-en: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--f-jp); font-weight:400; font-size:15px; line-height:2;
  letter-spacing:.02em; font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
table{ border-collapse:collapse; width:100%; }

::selection{ background:var(--accent); color:#fff; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:880px; }
.sec{ padding:112px 0; }
.sec--mist{ background:var(--mist); }
.sec--ink{ background:var(--paper); border-block:1px solid var(--line); }

/* ---------- type ---------- */
.en{ font-family:var(--f-en); letter-spacing:.14em; font-weight:500; }
.lead{ font-size:16px; line-height:2.2; }

.sec-head{ margin-bottom:56px; }
.sec-head__label{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-en); font-size:11px; font-weight:600;
  letter-spacing:.22em; color:var(--accent); text-transform:uppercase;
  margin-bottom:18px;
}
.sec-head__label::before{
  content:""; width:28px; height:1px; background:var(--accent); flex:none;
}
.sec-head__title{
  font-size:clamp(26px,3.4vw,40px); line-height:1.5; font-weight:700;
  color:var(--ink); letter-spacing:.01em;
}
.sec-head__title small{ display:block; font-size:13px; font-weight:500; color:var(--muted); letter-spacing:.1em; margin-top:12px; }
.sec-head__text{ margin-top:22px; max-width:640px; color:var(--body); }

/* ---------- header ---------- */
.hd{ position:fixed; inset:0 0 auto 0; z-index:100; }
/* 背景と blur は疑似要素で描く。.hd 自体に backdrop-filter を付けると
   position:fixed の子（モバイルドロワー）の基準が .hd になり高さが潰れるため。 */
.hd::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.hd.is-stuck::before{
  background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
.hd__in{ position:relative; z-index:1; display:flex; align-items:center; gap:32px; height:76px; }
.hd__logo{ display:flex; align-items:center; gap:9px; flex:none; }
.logo-mark{
  font-family:var(--f-en); font-weight:700; font-size:23px; letter-spacing:-.01em; color:var(--accent);
}
/* 現行ロゴと同じく全体をオレンジに。Binds を太く、Support を細く */
.logo-mark b{ font-weight:500; }
.logo-sub{ font-size:10px; color:var(--muted); letter-spacing:.16em; }

.nav{ margin-left:auto; }
.nav__cta{ display:none; }
.nav__list{ display:flex; align-items:center; gap:30px; }
.nav__list a{
  position:relative; font-size:13px; font-weight:500; color:var(--ink); padding:6px 0; display:block;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__list a small{ display:block; font-family:var(--f-en); font-size:9px; letter-spacing:.16em; color:var(--muted); font-weight:600; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:46px; padding:0 26px; border-radius:var(--r); border:1px solid transparent;
  font-size:13px; font-weight:500; letter-spacing:.06em; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--fill{ background:var(--accent); color:#fff; }
.btn--fill:hover{ background:var(--accent-d); }
.btn--line{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--line:hover{ border-color:var(--accent); color:var(--accent); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--lg{ height:56px; padding:0 36px; font-size:14px; }
.btn__arw{ font-family:var(--f-en); transition:transform .3s var(--ease); }
.btn:hover .btn__arw{ transform:translateX(4px); }
.hd .btn{ flex:none; }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff;
  border-radius:var(--r); cursor:pointer; position:relative; flex:none;
}
.burger span{
  position:absolute; left:13px; width:18px; height:1.5px; background:var(--ink); transition:.3s var(--ease);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ bottom:17px; }
body.is-menu .burger span:nth-child(1){ top:21px; transform:rotate(45deg); }
body.is-menu .burger span:nth-child(2){ bottom:21px; transform:rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative; padding:190px 0 110px; overflow:hidden; background:var(--paper);
}
.hero__bg{ position:absolute; inset:0; opacity:.9; }
.hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 78% 20%, #000 0%, transparent 72%);
}
.hero__glow{
  position:absolute; width:780px; height:780px; right:-180px; top:-260px; border-radius:50%;
  background:radial-gradient(circle, rgba(235,97,18,.2) 0%, rgba(235,97,18,0) 66%);
  filter:blur(10px); animation:float 14s ease-in-out infinite;
}
.hero__glow2{
  position:absolute; width:520px; height:520px; left:-160px; bottom:-220px; border-radius:50%;
  background:radial-gradient(circle, rgba(235,97,18,.09) 0%, rgba(235,97,18,0) 68%);
  animation:float 18s ease-in-out infinite reverse;
}
@keyframes float{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(-26px,30px,0);} }

.hero__in{ position:relative; z-index:1; }
.hero__label{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--f-en);
  font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--accent); margin-bottom:30px;
}
.hero__label::before{ content:""; width:34px; height:1px; background:var(--accent); }
.hero__title{
  color:var(--ink); font-weight:700; font-size:clamp(30px,5.2vw,60px); line-height:1.42; letter-spacing:.005em;
}
.hero__title .ac{ color:var(--accent); }
.hero__text{ margin-top:34px; max-width:560px; color:var(--body); font-size:15.5px; line-height:2.2; }
.hero__cta{ margin-top:46px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__tag{
  position:absolute; right:32px; bottom:0; margin:0; padding:0; max-width:none; width:auto;
  font-family:var(--f-en); font-size:12px;
  letter-spacing:.18em; color:#C4C4C4; writing-mode:vertical-rl;
}

/* hero stats */
.stats{ border-top:1px solid var(--line); margin-top:84px; }
.stats__list{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats__item{ padding:32px 26px 0 0; }
.stats__item + .stats__item{ padding-left:34px; border-left:1px solid var(--line); }
.stats__num{ font-family:var(--f-en); font-size:34px; font-weight:600; color:var(--ink); line-height:1.2; }
.stats__num span{ font-size:15px; color:var(--accent); margin-left:4px; }
.stats__cap{ font-size:12px; color:var(--muted); margin-top:8px; letter-spacing:.08em; }

/* ---------- message band ---------- */
.band{ padding:104px 0; }
.band__grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.band__title{ font-size:clamp(22px,2.8vw,32px); line-height:1.85; font-weight:700; color:var(--ink); }
.band__title .mk{
  background:linear-gradient(transparent 66%, var(--accent-l) 66%); padding-bottom:2px;
}
.band__body p + p{ margin-top:22px; }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  background:#fff; padding:44px 40px 46px; position:relative; transition:background .35s var(--ease);
  display:block;
}
.card:hover{ background:var(--mist); }
.card__no{ font-family:var(--f-en); font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--accent); }
.card__title{ font-size:20px; font-weight:700; color:var(--ink); margin:16px 0 6px; line-height:1.6; }
.card__en{ font-family:var(--f-en); font-size:11px; letter-spacing:.16em; color:var(--muted); }
.card__text{ margin-top:18px; font-size:14px; }
.card__list{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.card__list li{
  font-size:12px; letter-spacing:.04em; color:var(--ink-2);
  border:1px solid var(--line); border-radius:100px; padding:4px 13px; background:#fff;
}
.card:hover .card__list li{ border-color:#D9D9D9; }
.card__more{
  margin-top:26px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-en); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--ink);
}
.card:hover .card__more{ color:var(--accent); }

/* ---------- reason ---------- */
.reason{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.reason__item{ background:#fff; padding:40px 32px 44px; }
.reason__no{ font-family:var(--f-en); font-size:11px; font-weight:600; color:var(--accent); letter-spacing:.16em; }
.reason__title{ color:var(--ink); font-size:17px; font-weight:700; margin-top:14px; line-height:1.7; }
.reason__text{ font-size:13.5px; color:var(--body); margin-top:12px; line-height:2; }

/* ---------- news ---------- */
.news__item{ display:grid; grid-template-columns:170px 1fr; gap:0 28px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.news__item:first-child{ border-top:1px solid var(--line); }
.news__meta{ display:flex; align-items:center; gap:14px; }
.news__date{ font-family:var(--f-en); font-size:12px; color:var(--muted); letter-spacing:.08em; }
.news__cat{ font-size:10.5px; letter-spacing:.1em; color:var(--accent); border:1px solid currentColor; padding:1px 9px; border-radius:100px; white-space:nowrap; }
.news__title{ color:var(--ink); font-weight:500; font-size:15px; line-height:1.9; }
.news__text{ font-size:13.5px; margin-top:6px; }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; background:var(--accent-l); padding:96px 0; }
.cta__glow{
  position:absolute; width:640px; height:640px; right:-140px; top:-260px; border-radius:50%;
  background:radial-gradient(circle, rgba(235,97,18,.22) 0%, rgba(235,97,18,0) 68%);
}
.cta__in{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:48px; flex-wrap:wrap; }
.cta__title{ color:var(--ink); font-size:clamp(22px,2.6vw,30px); font-weight:700; line-height:1.7; }
.cta__text{ color:var(--body); font-size:14px; margin-top:14px; }
.cta__acts{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- footer ---------- */
.ft{ background:var(--paper); color:var(--body); padding:76px 0 34px; border-top:3px solid var(--accent); }
.ft__top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; padding-bottom:52px; border-bottom:1px solid var(--line); }
.ft__addr{ margin-top:24px; font-size:13px; line-height:2.1; }
.ft__contact{ margin-top:20px; font-size:13px; }
.ft__contact a{ color:var(--ink); }
.ft__tel{ font-family:var(--f-en); font-size:22px; color:var(--ink); font-weight:600; letter-spacing:.02em; }
.ft__h{ font-family:var(--f-en); font-size:10.5px; letter-spacing:.18em; color:var(--accent); font-weight:600; margin-bottom:20px; }
.ft__links li + li{ margin-top:12px; }
.ft__links a{ font-size:13px; transition:color .25s var(--ease); }
.ft__links a:hover{ color:var(--accent); }
.ft__bottom{ padding-top:30px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.ft__marks{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ft__marks img{ background:#fff; }
.ft__marks > a{ flex:none; }
.ft__pmark-text{ font-size:11px; line-height:1.9; color:var(--muted); max-width:280px; flex:1 1 180px; }
.ft__seal{ margin:0; flex:none; }
.ft__seal input[type=image]{ display:block; width:100px; height:42px; background:#fff; }
.ft__copy{ font-family:var(--f-en); font-size:11px; letter-spacing:.06em; color:var(--muted); }

/* ---------- page header (下層) ---------- */
.ph{ background:var(--mist); padding:150px 0 78px; position:relative; overflow:hidden; }
.ph__glow{
  position:absolute; width:620px; height:620px; right:-200px; top:-300px; border-radius:50%;
  background:radial-gradient(circle, rgba(235,97,18,.16) 0%, rgba(235,97,18,0) 68%);
}
.ph__in{ position:relative; z-index:1; }
.ph__en{ font-family:var(--f-en); font-size:11px; font-weight:600; letter-spacing:.24em; color:var(--accent); }
.ph__title{ color:var(--ink); font-size:clamp(26px,3.6vw,40px); font-weight:700; margin-top:16px; line-height:1.5; }
.ph__text{ color:var(--body); margin-top:18px; max-width:620px; font-size:14.5px; }

.crumbs{ border-bottom:1px solid var(--line); }
.crumbs ol{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; height:52px; font-size:11.5px; color:var(--muted); }
.crumbs a:hover{ color:var(--accent); }
.crumbs li + li::before{ content:"/"; margin-right:10px; color:#CCCCCC; }

/* ---------- tabs (service) ---------- */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:56px; }
.tab{
  appearance:none; border:0; background:none; cursor:pointer; font-family:var(--f-jp);
  padding:14px 22px; font-size:13.5px; font-weight:500; color:var(--muted); position:relative;
  transition:color .25s var(--ease);
}
.tab::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .3s var(--ease); }
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ color:var(--ink); font-weight:700; }
.tab[aria-selected="true"]::after{ transform:scaleX(1); }
.panel[hidden]{ display:none; }
.panel{ animation:fade .5s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.svc-head{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; margin-bottom:44px; }
.svc-head__no{ font-family:var(--f-en); font-size:52px; font-weight:600; color:var(--line); line-height:1; }
.svc-head__title{ font-size:clamp(21px,2.4vw,27px); font-weight:700; color:var(--ink); line-height:1.6; }
.svc-head__en{ font-family:var(--f-en); font-size:11px; letter-spacing:.16em; color:var(--accent); margin-top:10px; }
.svc-head__text{ margin-top:16px; max-width:660px; font-size:14.5px; }

.duty{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:56px; }
.duty__item{ background:#fff; padding:32px 28px 34px; }
.duty__title{ font-size:16px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:9px; }
.duty__title::before{ content:""; width:6px; height:6px; background:var(--accent); flex:none; }
.duty__text{ font-size:13.5px; margin-top:12px; }

.works__h{ font-family:var(--f-en); font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--muted); margin-bottom:22px; display:flex; align-items:center; gap:12px; }
.works__h::after{ content:""; flex:1; height:1px; background:var(--line); }
.work{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.work + .work{ margin-top:12px; }
.work__btn{
  width:100%; appearance:none; border:0; background:#fff; cursor:pointer; text-align:left;
  font-family:var(--f-jp); font-size:15px; font-weight:500; color:var(--ink);
  padding:22px 26px; display:flex; align-items:center; gap:16px; transition:background .25s var(--ease);
}
.work__btn:hover{ background:var(--mist); }
.work__btn::after{
  content:""; margin-left:auto; width:9px; height:9px; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translateY(-3px); transition:transform .3s var(--ease); flex:none;
}
.work__btn[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-3px); }
.work__tag{ font-size:10.5px; letter-spacing:.1em; color:var(--accent); background:var(--accent-l); padding:3px 10px; border-radius:100px; flex:none; }
.work__body{ padding:0 26px 26px; border-top:1px solid var(--line-2); }
.work__body dl{ display:grid; grid-template-columns:110px 1fr; gap:12px 20px; padding-top:22px; font-size:13.5px; }
.work__body dt{ color:var(--ink); font-weight:700; }
.work__body dd{ margin:0; }

/* ---------- table ---------- */
.tbl th,.tbl td{ text-align:left; padding:22px 4px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; }
.tbl th{ width:190px; color:var(--ink); font-weight:700; }
.tbl tr:first-child th,.tbl tr:first-child td{ border-top:1px solid var(--line); }
.tbl td ol{ counter-reset:n; }
.tbl td ol li{ counter-increment:n; }
.tbl td ol li::before{ content:counter(n) "."; color:var(--accent); font-family:var(--f-en); margin-right:8px; font-weight:600; }

/* ---------- history ---------- */
.hist{ position:relative; padding-left:30px; }
.hist::before{ content:""; position:absolute; left:4px; top:10px; bottom:10px; width:1px; background:var(--line); }
.hist__item{ position:relative; display:grid; grid-template-columns:170px 1fr; gap:20px; padding:16px 0; }
.hist__item::before{
  content:""; position:absolute; left:-30px; top:26px; width:9px; height:9px; border-radius:50%;
  background:#fff; border:1.5px solid var(--accent);
}
.hist__date{ font-weight:700; color:var(--ink); font-size:14px; }
.hist__text{ font-size:14px; }

/* ---------- client logos ---------- */
.clients{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.clients li{
  background:#fff; min-height:96px; display:flex; align-items:center; justify-content:center;
  padding:20px 16px; font-size:13.5px; color:var(--ink); text-align:center; line-height:1.7; font-weight:500;
}

/* ---------- message ---------- */
.msg{ display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:start; }
.msg__body p + p{ margin-top:22px; }
.msg__sign{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.msg__role{ font-size:12px; color:var(--muted); letter-spacing:.1em; }
.msg__name{ font-size:20px; color:var(--ink); font-weight:700; margin-top:6px; letter-spacing:.14em; }
.msg__card{ background:var(--mist); border-radius:var(--r); padding:34px 30px; }
.msg__card h3{ font-size:14px; color:var(--ink); font-weight:700; margin-bottom:16px; }
.msg__card li{ font-size:13px; padding-left:18px; position:relative; line-height:1.9; }
.msg__card li + li{ margin-top:10px; }
.msg__card li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px; background:var(--accent); }

/* ---------- access ---------- */
.access{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.map{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--mist); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.route + .route{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.route__h{ font-size:15px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px; }
.route__h span{ font-family:var(--f-en); font-size:10px; letter-spacing:.14em; color:#fff; background:var(--accent); padding:3px 9px; border-radius:2px; font-weight:600; }
.route p{ font-size:14px; margin-top:10px; }

/* ---------- contact ---------- */
.ct{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.ct__item{ background:#fff; padding:40px 36px; }
.ct__label{ font-family:var(--f-en); font-size:10.5px; letter-spacing:.18em; color:var(--muted); font-weight:600; }
.ct__val{ font-family:var(--f-en); font-size:27px; font-weight:600; color:var(--ink); margin-top:10px; letter-spacing:.01em; }
.ct__val a:hover{ color:var(--accent); }
.ct__note{ font-size:12.5px; margin-top:8px; }

/* ---------- prose (privacy) ---------- */
.prose h2{ font-size:18px; color:var(--ink); font-weight:700; margin:52px 0 16px; padding-left:16px; border-left:3px solid var(--accent); line-height:1.6; }
.prose > *:first-child h2:first-child{ margin-top:0; }
.prose p{ font-size:14.5px; }
.prose p + p{ margin-top:16px; }
.prose ol.num{ counter-reset:m; margin-top:14px; }
.prose ol.num li{ counter-increment:m; position:relative; padding-left:32px; font-size:14.5px; }
.prose ol.num li + li{ margin-top:12px; }
.prose ol.num li::before{
  content:"(" counter(m) ")"; position:absolute; left:0; top:0; color:var(--accent); font-family:var(--f-en); font-weight:600; font-size:13px;
}
.prose .lead-h{ font-size:17px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.prose h3{ font-size:15px; color:var(--ink); font-weight:700; margin:32px 0 12px; line-height:1.7; }
.prose .sm{ font-size:13.5px; color:var(--muted); margin-top:12px; }
.prose dl.kv{ margin-top:14px; border-top:1px solid var(--line); font-size:14px; }
.prose dl.kv dt{ font-weight:700; color:var(--ink); padding:14px 0 4px; }
.prose dl.kv dd{ padding:0 0 14px; border-bottom:1px solid var(--line); line-height:1.9; }
.prose ul.dot{ margin-top:14px; }
.prose ul.dot li{ position:relative; padding-left:20px; font-size:14px; line-height:1.9; }
.prose ul.dot li + li{ margin-top:10px; }
.prose ul.dot li::before{ content:""; position:absolute; left:4px; top:.8em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prose ul.dot strong{ color:var(--ink); }
@media (min-width:861px){
  .prose dl.kv{ display:grid; grid-template-columns:15em 1fr; }
  .prose dl.kv dt{ padding:14px 20px 14px 0; border-bottom:1px solid var(--line); }
  .prose dl.kv dd{ padding:14px 0; }
}
.note{ background:var(--mist); border-radius:var(--r); padding:30px 32px; margin-top:44px; font-size:14px; }
.note strong{ color:var(--ink); }

/* ---------- sitemap ---------- */
.smap{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.smap__col{ background:#fff; padding:36px 34px 40px; }
.smap__h{ font-size:17px; font-weight:700; color:var(--ink); }
.smap__h span{ font-family:var(--f-en); font-size:10px; letter-spacing:.16em; color:var(--accent); display:block; margin-bottom:6px; font-weight:600; }
.smap__list{ margin-top:20px; }
.smap__list li + li{ margin-top:10px; }
.smap__list a{ font-size:13.5px; padding-left:16px; position:relative; display:inline-block; }
.smap__list a::before{ content:""; position:absolute; left:0; top:14px; width:7px; height:1px; background:var(--accent); }
.smap__list a:hover{ color:var(--accent); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.08s; }
.rv[data-d="2"]{ transition-delay:.16s; }
.rv[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .band__grid{ grid-template-columns:1fr; gap:36px; }
  .msg{ grid-template-columns:1fr; gap:40px; }
  .access{ grid-template-columns:1fr; gap:36px; }
  .ft__top{ grid-template-columns:1fr 1fr; gap:36px; }
  .duty{ grid-template-columns:1fr; }
  .clients{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  :root{ --pad:20px; }
  .sec{ padding:76px 0; }
  .hd__in{ height:66px; gap:16px; }
  .hd__in > .btn--fill{ display:none; } /* ヘッダー直下のCTAのみ隠す（ドロワー内のCTAは残す） */
  .burger{ display:block; margin-left:auto; }
  .nav{
    position:fixed; inset:66px 0 0 0; background:#fff; padding:28px var(--pad) 40px;
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:.35s var(--ease); overflow-y:auto;
  }
  body.is-menu .nav{ transform:none; opacity:1; pointer-events:auto; }
  body.is-menu{ overflow:hidden; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--line-2); }
  .nav__list a{ padding:20px 4px; font-size:15px; }
  .nav__list a::after{ display:none; }
  .nav__cta{ margin-top:28px; display:block; }
  .nav__cta .btn{ width:100%; }
  .hero{ padding:132px 0 72px; }
  .hero__tag{ display:none; }
  .stats__list{ grid-template-columns:repeat(2,1fr); }
  .stats__item{ padding:24px 16px 24px 0; }
  .stats__item + .stats__item{ padding-left:22px; }
  .stats__item:nth-child(3){ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .stats__item:nth-child(4){ border-top:1px solid var(--line); }
  .cards{ grid-template-columns:1fr; }
  .card{ padding:34px 26px 36px; }
  .reason{ grid-template-columns:1fr; }
  .news__item{ grid-template-columns:1fr; gap:10px; }
  .ph{ padding:112px 0 56px; }
  .ft__top{ grid-template-columns:1fr; }
  .ct{ grid-template-columns:1fr; }
  .smap{ grid-template-columns:1fr; }
  .tbl th,.tbl td{ display:block; width:100%; }
  .tbl th{ border-bottom:0; padding-bottom:0; font-size:12.5px; letter-spacing:.06em; }
  .tbl tr:first-child td{ border-top:0; }
  .hist__item{ grid-template-columns:1fr; gap:4px; }
  .svc-head{ grid-template-columns:1fr; gap:12px; }
  .svc-head__no{ font-size:38px; }
  .work__body dl{ grid-template-columns:1fr; gap:4px 0; }
  .work__body dt{ margin-top:12px; }
  .work__btn{ padding:18px 20px; font-size:14px; flex-wrap:wrap; }
  .cta{ padding:64px 0; }
}

/* =========================================================
   motion — 動きはここにまとめる
   初期状態を隠すものは html.js 配下に限定（JS が無くても内容は見える）
   ========================================================= */

/* 読了バー */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:200; pointer-events:none;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
}

/* 結ぶ＝点と点を線でつなぐ背景（app.js が canvas を差し込む） */
.net{
  position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;
  mask-image:linear-gradient(90deg, transparent 28%, #000 78%);
  -webkit-mask-image:linear-gradient(90deg, transparent 28%, #000 78%);
}
.hero__grid{ animation:grid 40s linear infinite; }
@keyframes grid{ to{ background-position:72px 72px, 72px 72px; } }

/* ヒーロー：見出しを1行ずつ下からせり上げる */
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero__title .ln > span{ display:block; }
.js .hero__title .ln > span{ transform:translateY(108%); transition:transform 1.1s var(--ease); }
.js .hero__title .ln:nth-child(2) > span{ transition-delay:.12s; }
.js.is-ready .hero__title .ln > span{ transform:none; }
.hero__title .ac{ position:relative; display:inline-block; }
.hero__title .ac::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.07em; background:var(--accent);
  transform-origin:left; transition:transform .9s var(--ease) .95s;
}
.js .hero__title .ac::after{ transform:scaleX(0); }
.js.is-ready .hero__title .ac::after{ transform:none; }
.hero__tag{ animation:tag 1.4s var(--ease) 1.2s both; }
@keyframes tag{ from{ opacity:0; transform:translateY(-24px); } }

/* 下層の見出し帯 */
.js .ph__en, .js .ph__title, .js .ph__text{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .ph__title{ transition-delay:.1s; }
.js .ph__text{ transition-delay:.2s; }
.js.is-ready .ph__en, .js.is-ready .ph__title, .js.is-ready .ph__text{ opacity:1; transform:none; }
.ph__glow, .cta__glow{ animation:float 16s ease-in-out infinite; }

/* セクションラベルの罫を引く */
.sec-head__label::before{ transform-origin:left; transition:transform .9s var(--ease) .25s; }
.rv .sec-head__label::before{ transform:scaleX(0); }
.rv.is-in .sec-head__label::before{ transform:none; }

/* マーカーを引く */
.band__title .mk{
  background:linear-gradient(var(--accent-l), var(--accent-l)) no-repeat 0 100% / 100% 34%;
  transition:background-size 1.1s var(--ease) .5s;
}
.rv .band__title .mk{ background-size:0% 34%; }
.rv.is-in .band__title .mk{ background-size:100% 34%; }

/* ボタン：濃いオレンジが左から満ちる */
.btn--fill, .btn--fill:hover{
  background:linear-gradient(var(--accent-d), var(--accent-d)) no-repeat 0 0 / 0% 100%, var(--accent);
  transition:background-size .45s var(--ease);
}
.btn--fill:hover{ background-size:100% 100%, auto; }

/* カード類：上辺にオレンジの線が走る */
.card, .reason__item, .duty__item, .ct__item, .smap__col{ position:relative; }
.card::before, .reason__item::before, .duty__item::before, .ct__item::before, .smap__col::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.card:hover::before, .reason__item:hover::before, .duty__item:hover::before, .ct__item:hover::before, .smap__col:hover::before{
  transform:scaleX(1); transform-origin:left;
}
.card, .reason__item, .duty__item{ transition:background .35s var(--ease); }
.reason__item:hover, .duty__item:hover{ background:var(--mist); }
.card__title, .reason__title{ transition:transform .4s var(--ease); }
.card:hover .card__title, .reason__item:hover .reason__title{ transform:translateX(6px); }
.clients li{ transition:color .3s var(--ease), background .3s var(--ease); }
.clients li:hover{ color:var(--accent); background:var(--accent-l); }
.news__item > div:last-child{ transition:transform .4s var(--ease); }
.news__item:hover > div:last-child{ transform:translateX(8px); }

/* 沿革：縦の線が上から伸び、点が順に灯る */
.hist::before{ transform-origin:top; transition:transform 1.8s var(--ease); }
.js .hist:not(.is-draw)::before{ transform:scaleY(0); }
.hist__item::before{ transition:background .4s var(--ease), transform .4s var(--ease); }
.hist__item:hover::before{ background:var(--accent); transform:scale(1.35); }

/* アコーディオン・タブの開閉 */
.work__body:not([hidden]){ animation:fade .45s var(--ease); }

/* 流れる英字帯 */
.mq{ overflow:hidden; padding:54px 0 46px; border-top:1px solid var(--line); user-select:none; }
.mq__track{ display:flex; width:max-content; animation:mq 46s linear infinite; }
.mq__track span{
  flex:none; padding-right:.9em; font-family:var(--f-en); font-weight:700; line-height:1.1;
  font-size:clamp(46px,8.4vw,116px); letter-spacing:-.02em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(235,97,18,.5);
}
.mq__track span b{ color:var(--accent); -webkit-text-stroke:0; font-weight:700; }
@keyframes mq{ to{ transform:translateX(-50%); } }

@media (max-width:860px){
  .net{
    opacity:.7;
    mask-image:linear-gradient(180deg, #000 0%, transparent 62%);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 62%);
  }
  .mq{ padding:36px 0 30px; }
}
@media (prefers-reduced-motion:reduce){
  .js .hero__title .ln > span, .js .hero__title .ac::after, .rv .sec-head__label::before,
  .js .hist:not(.is-draw)::before{ transform:none; transition:none; }
  .js .ph__en, .js .ph__title, .js .ph__text{ opacity:1; transform:none; transition:none; }
  .rv .band__title .mk{ background-size:100% 34%; transition:none; }
  .progress{ display:none; }
}

/* 実ロゴ（支給データ logo4.jpg を透過PNG化） */
.logo-img{ height:26px; width:auto; }
.ft .logo-img{ height:30px; }
@media (max-width:860px){ .logo-img{ height:22px; } }
/* 新ロゴ（C案「点と点を、結ぶ。」）。マークは SVG、社名はアウトライン化した SVG 画像（design/logo/outline.py）。
   既定は新ロゴ。?lg=old で現行ロゴに戻して見比べられる（theme.js が html[data-logo="old"] を付ける） */
.lgc{ --lh:34px; display:inline-flex; align-items:center; gap:calc(var(--lh) * .277); }
.lgc__m{ height:var(--lh); width:var(--lh); flex:none; overflow:visible; }
.lgc__m rect{ fill:var(--accent); }
.lgc__m path{ fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; stroke-dasharray:1; }
.lgc__m circle{ fill:#fff; transform-box:fill-box; transform-origin:center; }
.lgc__w{ height:var(--lh); width:auto; max-width:none; display:block; }
.ft .lgc{ --lh:38px; }
@media (max-width:860px){ .lgc{ --lh:28px; } .ft .lgc{ --lh:32px; } }
html:not([data-logo="old"]) .hd__logo .logo-img{ display:none; }
html[data-logo="old"] .lgc{ display:none; }
/* ロゴに触れると、点と点がもう一度結ばれる */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a.hd__logo:hover .lgc__m path{ animation:lgcLine .55s cubic-bezier(.65,0,.35,1) .12s both; }
  a.hd__logo:hover .lgc__m circle{ animation:lgcDot .4s var(--ease) both; }
  a.hd__logo:hover .lgc__m circle + circle{ animation-delay:.5s; }
}
@keyframes lgcLine{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes lgcDot{ 0%{ transform:scale(.4); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

/* 数字のタイルが3枚のとき（従業員数を外した） */
.stats__list--3{ grid-template-columns:repeat(3,1fr); }
.stats__list--3 .stats__cap{ text-wrap:balance; }
@media (max-width:860px){
  .stats__list--3{ grid-template-columns:repeat(2,1fr); }
  .stats__list--3 .stats__item:nth-child(1){ grid-column:1 / -1; }
  .stats__list--3 .stats__item:nth-child(2){ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .stats__list--3 .stats__item:nth-child(3){ padding-left:22px; border-left:1px solid var(--line); border-top:1px solid var(--line); }
}
/* お問合せの手段が3つのとき（FAXを外した） */
@media (min-width:861px){ .ct--3{ grid-template-columns:repeat(3,1fr); } .ct--3 .ct__item{ padding:40px 30px; } .ct--3 .ct__val{ font-size:25px; } }

/* 見出しのカギ括弧（詰めの効かない書体の案で、前後の空きを詰めるための目印） */
.kl, .kr{ font-style:normal; }

/* 事業が3本柱になったので3列（861px〜）。B案は行、スマホは1列のまま */
@media (min-width:861px){ .cards--3{ grid-template-columns:repeat(3,1fr); } .cards--3 .card{ padding:40px 32px 42px; } }

/* =========================================================
   オープニング（最初に開いた1回だけ）— 点と点を線で結び、その線からロゴが描き出される
   ========================================================= */
/* app.js が動き出すまでの白い幕。JS が止まっても 4秒後には必ず外れる */
html.is-opening::before{
  content:""; position:fixed; inset:0; z-index:999; background:#fff;
  animation:opSafe .01s linear 4s forwards;
}
@keyframes opSafe{ to{ visibility:hidden; } }
.op{
  position:fixed; inset:0; z-index:1000; background:#fff; display:grid; place-items:center;
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.op.is-out{ transform:translateY(-100%); }

/* 新ロゴ（C案）：2つの点 → 線で結ぶ → オレンジの面に収まってマークになる → 社名が現れる */
.opc{ --h:min(64px, 12.5vw); display:flex; align-items:center; justify-content:center; }
.opc__m{ height:var(--h); width:var(--h); flex:none; overflow:visible; transform:scale(1.7); animation:opcSet .5s cubic-bezier(.65,0,.35,1) .9s forwards; }
.opc__m rect{ fill:var(--accent); transform-box:fill-box; transform-origin:center; transform:scale(0); animation:opcSq .5s cubic-bezier(.34,1.4,.64,1) .92s forwards; }
.opc__m circle{ fill:var(--accent); transform-box:fill-box; transform-origin:center; transform:scale(0); animation:opDot .34s var(--ease) forwards, opcInk .22s linear .98s forwards; }
.opc__m circle + circle{ animation-delay:.16s, .98s; }
.opc__m path{ fill:none; stroke:var(--accent); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  animation:opcLine .52s cubic-bezier(.65,0,.35,1) .34s forwards, opcInkS .22s linear .98s forwards; }
.opc__w{ width:0; overflow:hidden; flex:none; animation:opcWord .72s cubic-bezier(.65,0,.35,1) 1.36s forwards; }
.opc__w img{ display:block; height:var(--h); width:auto; max-width:none; margin-left:calc(var(--h) * .277); }
@keyframes opcSet{ to{ transform:scale(1); } }
@keyframes opcSq{ to{ transform:scale(1); } }
@keyframes opcInk{ to{ fill:#fff; } }
@keyframes opcInkS{ to{ stroke:#fff; } }
@keyframes opcLine{ 0%{ stroke-dashoffset:1; opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } }
@keyframes opcWord{ to{ width:calc(var(--h) * 5.408); } } /* (社名 667 ＋ 間 36) ÷ 高さ 130 */

/* 現行ロゴ（?lg=old）：点と点を線で結び、その線からロゴが描き出される */
.op__box{ position:relative; width:min(340px, 64vw); }
.op__box img{ width:100%; height:auto; display:block; clip-path:inset(-10% 100% -10% 0); animation:opLogo .85s cubic-bezier(.65,0,.35,1) .85s forwards; }
.op__d, .op__l{ position:absolute; top:74%; background:var(--accent); }
.op__d{ width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; transform:scale(0); animation:opDot .3s var(--ease) forwards, opFade .35s linear 1.25s forwards; }
.op__d1{ left:0; }
.op__d2{ left:100%; animation-delay:.12s, 1.25s; }
.op__l{ left:0; width:100%; height:1.5px; margin-top:-.75px; transform:scaleX(0); transform-origin:left; animation:opLine .6s cubic-bezier(.65,0,.35,1) .28s forwards, opFade .35s linear 1.25s forwards; }
@keyframes opDot{ to{ transform:scale(1); } }
@keyframes opLine{ to{ transform:scaleX(1); } }
@keyframes opLogo{ to{ clip-path:inset(-10% 0 -10% 0); } }
@keyframes opFade{ to{ opacity:0; } }