/* ===========================================================
   株式会社hatana. コーポレートサイト
   色・余白はこの :root だけ直せば全体に効きます
   =========================================================== */
:root{
  --navy:#10233a; --navy-2:#1c3555; --navy-9:rgba(16,35,58,.92);
  --ink:#1a1a1a; --mute:#5c6672; --faint:#98a1ab;
  --line:#dfe4ea; --bg:#fff; --soft:#f5f7fa;
  --accent:#e8622a; --accent-dk:#c74d1b;
  --r:10px; --wrap:1120px; --head-h:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--head-h)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
.wrap{width:min(100% - 40px,var(--wrap)); margin-inline:auto}

/* ── ヘッダー ── */
.head{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--head-h);
  display:flex; align-items:center;
  transition:background .3s, box-shadow .3s;
}
.head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px}
.head.solid{background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line)}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font-size:22px; font-weight:700; color:#fff; transition:color .3s}
.logo svg{width:30px; height:30px; flex:none}
.logo .dot{color:var(--accent)}
.head.solid .logo{color:var(--navy)}
.nav{display:flex; align-items:center; gap:28px}
.nav a{text-decoration:none; font-size:14px; color:rgba(255,255,255,.88); transition:color .2s}
.head.solid .nav a{color:var(--mute)}
.nav a:hover{color:var(--accent)}
.nav .btn{font-size:14px; padding:11px 22px; color:#fff}
.head.solid .nav .btn{color:#fff}
.burger{display:none; width:44px; height:44px; position:relative}
.burger span{position:absolute; left:11px; width:22px; height:2px; background:#fff; transition:.3s}
.head.solid .burger span{background:var(--navy)}
.burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px}
.burger.open span:nth-child(1){top:22px; transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:22px; transform:rotate(-45deg)}

/* ── ボタン ── */
.btn{
  display:inline-block; text-decoration:none; background:var(--accent); color:#fff;
  padding:16px 34px; border-radius:var(--r); font-weight:700; font-size:15px; line-height:1.4;
  transition:background .2s, transform .2s;
}
.btn:hover{background:var(--accent-dk); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-navy{background:var(--navy)} .btn-navy:hover{background:var(--navy-2)}

/* ── ヒーロー ── */
.hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:center; color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; animation:zoom 18s ease-out forwards}
@keyframes zoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(16,35,58,.94) 0%,rgba(16,35,58,.78) 45%,rgba(16,35,58,.35) 100%)}
.hero .wrap{position:relative; z-index:1; padding:130px 0 96px}
.hero .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.18em; font-weight:700;
  border:1px solid rgba(255,255,255,.4); border-radius:99px; padding:7px 18px; margin-bottom:26px;
}
.hero h1{font-size:clamp(31px,5.4vw,56px); line-height:1.42; margin:0 0 26px; font-weight:700}
.hero h1 .mark{background:linear-gradient(transparent 76%,rgba(232,98,42,.9) 76%,rgba(232,98,42,.9) 92%,transparent 92%)}
.hero p{font-size:clamp(15px,1.9vw,18px); color:#cfdae7; max-width:40em; margin:0 0 40px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.scroll-cue{position:absolute; left:50%; bottom:26px; z-index:1; transform:translateX(-50%); font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.7)}
.scroll-cue::after{content:""; display:block; width:1px; height:34px; background:rgba(255,255,255,.5); margin:8px auto 0; animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}

/* ── セクション ── */
section{padding:100px 0}
.soft{background:var(--soft)}
.navy{background:var(--navy); color:#fff}
.sec-head{margin-bottom:56px}
.sec-head.center{text-align:center}
.sec-label{display:block; font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--accent); margin-bottom:12px}
.sec-head h2{font-size:clamp(25px,3.6vw,36px); margin:0 0 16px; line-height:1.5; font-weight:700}
.sec-head p{color:var(--mute); margin:0; max-width:44em}
.sec-head.center p{margin-inline:auto}
.navy .sec-head p{color:#c0cdda}

/* ── 課題 ── */
.issues{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.issue{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px 28px}
.issue .q{font-size:34px; font-weight:700; color:var(--accent); opacity:.25; line-height:1}
.issue p{margin:10px 0 0; font-size:16px; font-weight:700; line-height:1.7}
.issue .sub{font-weight:400; font-size:14px; color:var(--mute); margin-top:8px}

/* ── タブ（事業内容） ── */
.tabs{display:flex; border-bottom:2px solid var(--line); margin-bottom:44px; overflow-x:auto}
.tab{
  padding:18px 30px; font-size:16px; font-weight:700; color:var(--faint);
  border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:.2s;
}
.tab:hover{color:var(--navy)}
.tab[aria-selected=true]{color:var(--navy); border-bottom-color:var(--accent)}
.tab .no{display:block; font-size:11px; letter-spacing:.14em; color:var(--accent); font-weight:700}
.panel[hidden]{display:none}
.panel{display:grid; gap:52px; grid-template-columns:1fr 1fr; align-items:center; animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.panel-img{border-radius:var(--r); overflow:hidden; aspect-ratio:3/2}
.panel-img img{width:100%; height:100%; object-fit:cover}
.panel h3{font-size:clamp(21px,2.6vw,27px); margin:0 0 16px; line-height:1.55}
.panel .lead{color:var(--mute); margin:0 0 24px}
.panel ul{margin:0; padding:0; list-style:none}
.panel li{position:relative; padding-left:26px; margin-bottom:12px; font-size:15px; color:var(--mute)}
.panel li::before{
  content:""; position:absolute; left:0; top:.65em; width:12px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg);
}

/* ── 選ばれる理由 ── */
.reasons{display:grid; gap:44px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.reason .rn{font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--accent)}
.reason h3{font-size:20px; margin:10px 0 14px; padding-bottom:14px; border-bottom:2px solid var(--accent); display:inline-block}
.reason p{margin:0; color:var(--mute); font-size:15px}

/* ── 導入の流れ ── */
.flow{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:30px 26px}
.step .sn{font-size:12px; letter-spacing:.16em; color:var(--accent); font-weight:700}
.step h3{font-size:18px; margin:10px 0 10px}
.step p{margin:0; font-size:14px; color:#b9c7d6; line-height:1.8}

/* ── 実績 ── */
.work{display:grid; gap:52px; grid-template-columns:1fr 1fr; align-items:center}
.work-img{border-radius:var(--r); overflow:hidden; aspect-ratio:3/2}
.work-img img{width:100%; height:100%; object-fit:cover}
.work .tagline{color:var(--accent); font-weight:700; font-size:14px; margin:0 0 8px; letter-spacing:.06em}
.work h3{font-size:clamp(24px,3vw,32px); margin:0 0 18px}
.work p{color:var(--mute); margin:0 0 22px}
.work ul{margin:0 0 26px; padding-left:1.2em; color:var(--mute); font-size:15px}
.work li{margin-bottom:10px}

/* ── FAQ ── */
.faq{max-width:820px; margin-inline:auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%; text-align:left; padding:24px 44px 24px 0; font-size:16px; font-weight:700; position:relative; line-height:1.7}
.qa button::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s;
}
.qa[data-open=true] button::after{transform:translateY(-25%) rotate(-135deg)}
.qa .a{max-height:0; overflow:hidden; transition:max-height .35s ease}
.qa .a p{margin:0 0 24px; color:var(--mute); font-size:15px}

/* ── 会社概要 ── */
.table-scroll{overflow-x:auto}
table.profile{width:100%; border-collapse:collapse; font-size:15px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
table.profile th,table.profile td{text-align:left; padding:19px 26px; border-bottom:1px solid var(--line); vertical-align:top}
table.profile tr:last-child th,table.profile tr:last-child td{border-bottom:none}
table.profile th{width:195px; font-weight:700; background:var(--soft); white-space:nowrap; color:var(--navy)}
table.profile td{color:var(--mute)}

/* ── CTA ── */
.cta{position:relative; color:#fff; text-align:center; overflow:hidden}
.cta-bg{position:absolute; inset:0; z-index:0}
.cta-bg img{width:100%; height:100%; object-fit:cover}
.cta-bg::after{content:""; position:absolute; inset:0; background:var(--navy-9)}
.cta .wrap{position:relative; z-index:1}
.cta h2{font-size:clamp(25px,3.6vw,36px); margin:0 0 18px}
.cta p{color:#c8d4e2; margin:0 auto 38px; max-width:36em}
.cta-list{display:flex; flex-wrap:wrap; justify-content:center; gap:44px; margin-top:44px; font-size:15px}
.cta-list span{display:block; font-size:11px; letter-spacing:.14em; color:#8fa4bd; margin-bottom:4px}
.cta-list a{color:#fff; text-decoration:none; font-size:18px; font-weight:700}
.cta-list a:hover{text-decoration:underline}

/* ── フッター ── */
.foot{background:#0b1a2c; color:#8fa4bd; padding:56px 0 34px; font-size:13px}
.foot-top{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot .logo{color:#fff; font-size:21px}
.foot-nav{display:flex; flex-wrap:wrap; gap:26px}
.foot a{color:#8fa4bd; text-decoration:none}
.foot a:hover{color:#fff}
.foot-bottom{padding-top:24px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between}

/* ── 下層ページ ── */
.page-head{background:var(--navy); color:#fff; padding:calc(var(--head-h) + 56px) 0 56px}
.page-head h1{font-size:clamp(26px,4vw,38px); margin:0}
.doc{padding:76px 0 96px}
.doc h2{font-size:20px; margin:46px 0 14px; padding-left:14px; border-left:4px solid var(--accent)}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--mute); font-size:15px}
.doc ul{padding-left:1.3em}

/* ── スクロール演出 ── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .hero-bg img{animation:none}
  .scroll-cue::after{animation:none}
}

/* ── スマホ ── */
@media (max-width:900px){
  .panel,.work{grid-template-columns:1fr; gap:32px}
  .panel-img,.work-img{order:-1}
}
@media (max-width:820px){
  .nav{
    position:fixed; inset:var(--head-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:8px 20px 26px; box-shadow:0 18px 30px rgba(0,0,0,.13);
    transform:translateY(-130%); transition:transform .35s ease;
  }
  .nav.open{transform:none}
  .nav a{color:var(--navy) !important; padding:17px 4px; border-bottom:1px solid var(--line); font-size:15px}
  .nav .btn{margin-top:18px; text-align:center; border-bottom:none; color:#fff !important}
  .burger{display:block}
  section{padding:72px 0}
  .tab{padding:15px 20px; font-size:15px}
  table.profile th{width:118px; padding:15px 16px}
  table.profile td{padding:15px 16px}
  .cta-list{gap:28px}
}

/* セキュリティページの表 */
.sec-table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:15px}
.sec-table th,.sec-table td{border:1px solid #d8dde4;padding:10px 12px;text-align:left;vertical-align:top}
.sec-table th{background:#f2f5f8;font-weight:700;white-space:nowrap}
@media(max-width:600px){.sec-table{font-size:14px}.sec-table th,.sec-table td{padding:8px}}

/* 規約などの番号付き条文 */
.doc ol{margin:10px 0 18px;padding-left:1.6em}
.doc ol li{margin-bottom:8px;line-height:1.8}
.doc ol ul{margin:8px 0}
.doc ul li{margin-bottom:6px;line-height:1.8}