:root{
  --navy:#0F2350; --red:#AA222A; --ink:#1D2737; --sub:#6B7585; --mist:#9AA6BF; --light:#F4E9DA;
  --paper:#FAF7F1; --rule:#E3DED4;
  --serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  --line:44%; --p:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#050B1B;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);line-height:1.9;color:var(--ink);word-break:auto-phrase}
a{color:inherit;text-decoration:none}
.bar{display:flex;justify-content:space-between;align-items:center;padding:28px 44px;position:relative;z-index:5}
.logo{font-family:var(--serif);font-weight:500;letter-spacing:.3em;font-size:17px;color:#fff}
.menu{display:flex;gap:30px;list-style:none;font-size:13px;color:#C9D1E2;letter-spacing:.06em}
.menu a:hover{color:#fff}
.menu .now{color:#fff;border-bottom:1px solid #fff;padding-bottom:2px}

/* ===== トップ ===== */
body.top{color:#fff}
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(to bottom,#050B1B 0%,#08132E 45%,#0F2350 82%,#1A2B57 100%)}
.sky .dawn{position:absolute;inset:0;background:radial-gradient(ellipse 75% 40% at 50% 112%,rgba(170,34,42,.42),transparent 70%);opacity:calc(.75 + var(--p) * .25)}
.sky .dawn2{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(58,74,122,.35) 100%);opacity:var(--p)}
.gap{position:absolute;left:var(--line);bottom:0;width:1px;height:78%;
  background:linear-gradient(to top,rgba(244,233,218,.95),rgba(244,233,218,.5) 45%,rgba(244,233,218,0));
  box-shadow:0 0 calc(16px + var(--p) * 22px) calc(1px + var(--p) * 3px) rgba(244,233,218,calc(.16 + var(--p) * .12));
  transform-origin:bottom;animation:open 2.4s ease-out both}
@keyframes open{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.top .bar{position:absolute;top:0;left:0;right:0}
.hero{position:relative;height:100vh;height:100svh;min-height:560px}
.hero-in{position:absolute;inset:0;opacity:calc(1 - var(--p) * 1.6)}
.message{position:absolute;left:calc(var(--line) + 64px);top:22%;writing-mode:vertical-rl;font-family:var(--serif);font-weight:500;font-size:38px;line-height:2.1;letter-spacing:.22em;color:var(--light);animation:fade 2s .9s ease-out both}
.message span{display:block;white-space:nowrap}
.message .last{padding-top:3.2em}
.sub{position:absolute;left:44px;bottom:44px;font-size:13px;color:var(--mist);letter-spacing:.08em;line-height:2;animation:fade 2s 1.4s ease-out both}
.sub b{display:block;font-family:var(--serif);font-weight:500;color:#fff;font-size:15px;letter-spacing:.12em}
.down{position:absolute;right:44px;bottom:44px;font-size:12px;color:var(--mist);letter-spacing:.2em;writing-mode:vertical-rl;animation:fade 2s 1.8s ease-out both}
.down::after{content:"";display:inline-block;width:1px;height:48px;background:var(--mist);margin-top:12px}
.story{position:relative;padding:22vh 44px 18vh calc(var(--line) + 64px)}
.story .in{max-width:520px}
.story h2{font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:.24em;color:var(--mist)}
.story p{font-family:var(--serif);font-size:17px;line-height:2.3;margin-top:40px;color:#E8EAF0}
.story .sign{font-family:var(--sans);font-size:13px;color:var(--mist);margin-top:64px;letter-spacing:.06em}
.next{margin-top:96px;list-style:none;border-top:1px solid rgba(255,255,255,.18)}
.next li{border-bottom:1px solid rgba(255,255,255,.18)}
.next a{display:flex;justify-content:space-between;padding:18px 0;font-size:15px;color:#E8EAF0;letter-spacing:.04em}
.next a span{color:var(--mist);transition:transform .3s}
.next a:hover span{transform:translateX(6px);color:#fff}
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1.6s ease,transform 1.6s ease}
.reveal.on{opacity:1;transform:none}
.top footer{padding:0 44px 40px calc(var(--line) + 64px);font-size:12px;color:var(--mist)}

/* ===== 情報ページ ===== */
body.info{background:var(--paper)}
.head{position:relative;background:linear-gradient(to bottom,#050B1B,#0F2350 70%,#2A2F55);color:#fff;padding-bottom:72px;overflow:hidden}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom,transparent,rgba(170,34,42,.22))}
.head .gap{height:80%;animation:none}
.head .title{position:relative;z-index:1;padding:64px 44px 0 calc(var(--line) + 56px)}
.head h1{font-family:var(--serif);font-weight:500;font-size:34px;letter-spacing:.12em;color:var(--light);line-height:1.6}
.head .title p{margin-top:12px;font-size:14px;color:#C9D1E2}
.paper{max-width:1180px;margin:0 auto}
.sec{display:grid;grid-template-columns:calc(var(--line) - 44px) 1fr;gap:56px;padding:72px 44px;border-bottom:1px solid var(--rule)}
.sec:last-child{border-bottom:0}
.sec h2{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--navy);line-height:1.7}
.sec .lead{margin-top:14px;font-size:14px;color:var(--sub);line-height:1.9}
.rows{list-style:none;border-top:1px solid var(--navy)}
.rows li{display:grid;grid-template-columns:150px 1fr 110px;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.rows .n{font-family:var(--serif);font-size:17px;color:var(--navy)}
.rows .n small{display:block;font-family:var(--sans);font-size:12px;color:var(--sub)}
.rows p{font-size:15px;line-height:1.9}
.rows p .note{display:block;margin-top:6px;font-size:13px;color:var(--sub)}
.rows .pr{text-align:right;font-weight:700;white-space:nowrap}
.rows .pr small{display:block;font-weight:400;font-size:12px;color:var(--sub)}
.plain{font-size:15px;line-height:2}
.plain+.plain{margin-top:16px}
.plain b{color:var(--navy)}
.tag{display:inline-block;font-size:12px;color:var(--red);font-weight:700;letter-spacing:.04em;margin-bottom:6px}
.sub-h{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--navy);margin:40px 0 12px;line-height:1.7}
.sub-h:first-child{margin-top:0}
.list{list-style:none;border-top:1px solid var(--rule)}
.list li{padding:12px 0 12px 22px;border-bottom:1px solid var(--rule);font-size:15px;position:relative}
.list li::before{content:"";position:absolute;left:0;top:25px;width:10px;height:2px;background:var(--red)}
.list li b{color:var(--navy);display:block;font-size:14px}
.note-box{margin-top:20px;background:#fff;border:1px solid var(--rule);padding:18px 22px;font-size:14px}
.note-box b{color:var(--navy)}
.note-box li{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dashed var(--rule)}
.note-box li:last-child{border-bottom:0}
.small{font-size:13px;color:var(--sub);margin-top:10px}
.faq div{padding:20px 0;border-bottom:1px solid var(--rule)}
.faq div:first-child{border-top:1px solid var(--navy)}
.faq dt{font-weight:700;color:var(--navy);font-size:15px}
.faq dd{margin-top:6px;font-size:15px}
.case{display:grid;grid-template-columns:1fr 36px 1fr;align-items:stretch}
.case>div{background:#fff;border:1px solid var(--rule);padding:24px 26px}
.case .after{border-top:3px solid var(--navy)}
.case h3{font-size:14px;color:var(--sub);margin-bottom:10px}
.case .after h3{color:var(--navy)}
.case ol{margin-left:1.3em;font-size:15px}
.case ol li{padding:3px 0}
.case>.arrow{display:flex;align-items:center;justify-content:center;color:var(--navy);background:none;border:0;padding:0}
.arrow .ad{display:none}
.mail{font-family:var(--serif);font-size:28px;color:var(--navy);word-break:break-all}
.actions{margin-top:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--navy);color:#fff;font-size:15px;padding:13px 28px;border:0;border-bottom:3px solid var(--red);font-family:inherit;cursor:pointer}
.btn:hover{background:#1A3166}
.copy{background:none;border:0;border-bottom:1px solid var(--sub);color:var(--sub);font:inherit;font-size:14px;cursor:pointer;padding:0 0 2px}
.name{font-family:var(--serif);font-size:26px;color:var(--navy);line-height:1.5}
.role{font-size:14px;color:var(--sub)}
.profile-photo{display:none}
.has-photo .profile-photo{display:block;margin-bottom:28px;max-width:220px}
.profile-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.doc h2{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--navy);margin:36px 0 6px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{font-size:15px}
.doc ul{margin-left:1.3em}
.foot-nav{margin-top:56px;display:flex;justify-content:space-between;font-size:14px;color:var(--navy)}
.info footer{background:#0A1938;color:var(--mist);font-size:12px;padding:28px 44px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.info footer a{color:#C9D1E2}

@media (prefers-reduced-motion:reduce){
  .gap,.message,.sub,.down{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}
@media (max-width:860px){
  :root{--line:14%}
  .bar{padding:20px}
  .menu li{display:none}.menu li.c{display:block}
  .message{left:calc(var(--line) + 40px);top:17%;font-size:27px;letter-spacing:.18em}
  .sub{left:20px;bottom:28px;font-size:12px}
  .down{right:20px;bottom:28px}
  .story{padding:18vh 20px 14vh calc(var(--line) + 30px)}
  .story p{font-size:15px;line-height:2.2;margin-top:32px}
  .top footer{padding:0 20px 32px calc(var(--line) + 30px)}
  .head{padding-bottom:48px}
  .head .title{padding:40px 16px 0 calc(var(--line) + 30px)}
  .head h1{font-size:25px}
  .sec{grid-template-columns:1fr;gap:20px;padding:48px 16px}
  .rows li{grid-template-columns:1fr auto;gap:4px 12px}
  .rows p{grid-column:1 / -1}
  .rows .pr{grid-row:1;grid-column:2}
  .case{grid-template-columns:1fr}
  .case>.arrow{height:40px}
  .arrow .ar{display:none}.arrow .ad{display:inline}
  .mail{font-size:22px}
  .actions .btn{width:100%;text-align:center}
  .info footer{padding:24px 16px}
}

/* ===== 固定ヘッダー ===== */
.bar{position:fixed;top:0;left:0;right:0;transition:background .3s,padding .3s}
.top .bar{position:fixed}
.bar.solid{background:rgba(5,11,27,.94);padding-top:16px;padding-bottom:16px}
body.info .head{padding-top:84px}
html{scroll-padding-top:72px}

/* ===== 簡易見積 ===== */
.calc{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--navy);padding:32px}
.q{padding:18px 0;border:0;border-bottom:1px solid var(--rule);min-width:0}
.q:first-child{padding-top:0}
.q legend{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:2px;float:left;width:100%}
.q .hint{display:block;clear:both;font-size:13px;color:var(--sub);margin-bottom:10px}
.seg{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.seg label{cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;min-width:64px;text-align:center;padding:9px 16px;border:1px solid #C7CEDA;font-size:14px;background:#fff}
.seg input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.seg input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.result{padding-top:26px}
.result .lab{font-size:13px;color:var(--sub)}
.result .total{font-family:var(--serif);font-size:44px;color:var(--navy);line-height:1.3}
.result .brk{font-size:13px;color:var(--sub);line-height:1.9}
.result .btn{margin-top:20px;display:inline-block}
.more{border-top:1px solid var(--navy)}
.more details{border-bottom:1px solid var(--rule)}
.more summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-size:15px;color:var(--navy);font-weight:700;position:relative}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"＋";position:absolute;right:0;top:16px;color:var(--sub);font-weight:400}
.more details[open] summary::after{content:"－"}
.more details>div{padding:0 0 22px;font-size:15px}
.more details ul{margin-left:1.2em}
.more details li{padding:3px 0}
@media (max-width:860px){
  .bar.solid{padding-top:12px;padding-bottom:12px}
  body.info .head{padding-top:64px}
  .calc{padding:22px 16px}
  .result .total{font-size:36px}
}

/* 開閉項目の補助 */
.more summary em{font-style:normal;color:var(--red);font-weight:700;white-space:nowrap;margin-left:6px}
.more summary{padding-right:36px}
.more details>div p+p{margin-top:12px}
.lnk{color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:1px;font-size:14px}
.more details[open] summary{color:var(--navy)}
.more summary:hover{background:rgba(15,35,80,.03)}

/* 実践事例の図 */
.cases{display:grid;gap:28px}
.flow{background:#fff;border:1px solid var(--rule);padding:26px 28px}
.flow h3{font-family:var(--serif);font-weight:500;font-size:18px;color:var(--sub);margin-bottom:4px}
.flow.after{border-top:3px solid var(--navy)}
.flow.after h3{color:var(--navy)}
.flow.before{border-top:3px solid #C7CEDA}
.flow .cap{font-size:14px;color:var(--sub);margin-bottom:18px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.steps li{background:#EAF0F8;padding:14px 14px 16px;font-size:14px;font-weight:700;color:var(--navy);line-height:1.6;position:relative;border:1px solid transparent}
.steps li small{display:block;font-size:11px;font-weight:400;color:var(--sub);margin-bottom:4px}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;margin-top:-6px;border-left:9px solid #C7CEDA;border-top:6px solid transparent;border-bottom:6px solid transparent}
.steps li.ai{background:#F8E9EA;border-color:var(--red)}
.steps li.ai small{color:var(--red);font-weight:700}
.src{margin-top:22px;border:1px solid var(--rule);padding:16px 18px}
.srch{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:10px}
.chips{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.after .chips{grid-template-columns:2fr 1fr 1fr 1fr}
.chips li{background:#EAF0F8;padding:12px 10px;font-size:13px;text-align:center;color:var(--ink);line-height:1.6}
.chips li.new{background:#F8E9EA;border:1px solid var(--red);font-weight:700}
.chips li.new em{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--red);margin-top:4px}
.fee{font-size:14px;font-weight:700;color:var(--red);margin-bottom:10px}
.sel b{color:var(--navy);display:block;margin-bottom:6px}
.sel ul{list-style:none}
.sel li{padding:3px 0;font-size:14px}
@media (max-width:860px){
  .flow{padding:20px 16px}
  .steps{grid-template-columns:1fr;gap:20px}
  .steps li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-14px;margin:0 0 0 -6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #C7CEDA;border-bottom:0}
  .chips,.after .chips{grid-template-columns:1fr 1fr}
  .after .chips li.new{grid-column:1 / -1}
}
.sec.wide{grid-template-columns:1fr;gap:28px}
.sec.wide>div:first-child h2{font-size:20px}
.chips li.direct em{display:block;font-style:normal;font-size:11px;color:var(--navy);margin-top:4px;font-weight:700}

/* ロゴ（白背景のプレート） */
.logo{letter-spacing:0}
.logo-plate{display:inline-flex;align-items:center;background:#fff;padding:5px 10px}
.logo-plate img{display:block;height:30px;width:auto}
.logo-plate.big{padding:14px 22px}
.logo-plate.big img{height:88px}
.info footer{flex-wrap:wrap}
.foot-logo{flex-basis:100%;margin-bottom:22px}
.top .foot-logo{margin-bottom:20px}
@media (max-width:860px){
  .logo-plate img{height:24px}
  .logo-plate.big img{height:72px}
}
@media (max-width:860px){
  .foot-logo{width:100%}
  .foot-logo .logo-plate.big{display:flex;padding:10px 12px;max-width:100%}
  .foot-logo .logo-plate.big img{width:100%;height:auto}
  .top footer{padding-left:20px}
}
@media (max-width:860px){
  .foot-logo .logo-plate.big{display:block;width:100%;box-sizing:border-box}
  .foot-logo .logo-plate.big img{display:block;width:100%;height:auto}
}

/* 2026-10-22 最終レビュー対応 */
.rows li{grid-template-columns:200px 1fr 110px}
.logo-plate.big{padding:9px 14px}
.logo-plate.big img{height:52px}
.sent{margin-top:12px;color:var(--navy);font-weight:700}
.contact .sent{color:#fff}
@media (max-width:860px){
  .rows li{grid-template-columns:1fr auto}
  .foot-logo .logo-plate.big{display:inline-block;width:auto;max-width:100%;padding:8px 12px}
  .foot-logo .logo-plate.big img{width:200px;max-width:100%;height:auto}
}

/* 2026-10-22 左の見出し欄を狭め、本文の表示幅を広げる（全ページ共通の2列配置） */
.sec{grid-template-columns:220px 1fr;gap:48px}
.rows li{grid-template-columns:200px 1fr 100px}
@media (max-width:860px){
  .sec{grid-template-columns:1fr;gap:20px}
  .rows li{grid-template-columns:1fr auto}
}

/* ハンバーガーメニュー（画面幅860px以下） */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;padding:10px 8px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:1.5px;background:#fff;transition:transform .25s,opacity .25s}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .menu{display:none}
  .bar.open{background:rgba(5,11,27,.97)}
  .bar.open .menu{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:rgba(5,11,27,.97);padding:8px 20px 20px;font-size:15px}
  .bar.open .menu li{display:block;border-bottom:1px solid rgba(255,255,255,.12)}
  .bar.open .menu li a{display:block;padding:14px 4px;color:#E8EAF0}
  .bar.open .menu .cta{border:0;padding:14px 4px}
  .bar.open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .bar.open .nav-toggle span:nth-child(2){opacity:0}
  .bar.open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* トップ：画面幅が狭い場合、光の線とメッセージを中央寄りに配置する */
@media (max-width:860px){
  body.top{--line:30%}
  .top .message{left:calc(var(--line) + 30px)}
  .top .story{padding-left:20px;padding-right:20px}
  .top .gap{filter:opacity(calc(1 - var(--p) * .8))}
}

/* トップ：どの画面幅でも、メッセージを左右中央に置き、光の線をその左に一定の間隔で置く
   --msg-half：縦書き2列のメッセージ幅の半分（行の高さ2.1em×2列÷2） */
body.top{--msg-half:80px;--line:calc(50% - var(--msg-half) - 48px)}
.top .message{left:calc(var(--line) + 48px)}
@media (max-width:860px){
  body.top{--msg-half:57px;--line:calc(50% - var(--msg-half) - 36px)}
  .top .message{left:calc(var(--line) + 36px)}
}

/* 2026-10-22 レビュー対応 */
.w{display:inline-block}
/* D01 中間幅：表の説明欄が細くならないよう、表を2段にし、さらに狭い幅では見出しを上に置く */
@media (max-width:1100px){
  .rows li{grid-template-columns:1fr auto;gap:4px 16px}
  .rows p{grid-column:1 / -1}
  .rows .pr{grid-row:1;grid-column:2}
}
@media (max-width:1024px){
  .sec{grid-template-columns:1fr;gap:20px}
}
/* D02 スマホ横向き：メニューを画面内に収め、内部をスクロール可能にする */
@media (max-width:860px){
  .bar.open .menu{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
}
/* D07 トップ：事業説明と移動導線をすぐ読めるようにする（光の線の演出は維持） */
.top .message{animation:fade 1.6s .4s ease-out both}
.top .sub,.top .down{animation:fade .8s .2s ease-out both}
/* U01 読了後の次の行動 */
.next-sec{border-bottom:0;padding-top:8px}

/* 実践事例：狭い画面では、改善前と改善後を工程ごとに左右へ並べた比較表にする */
.case-sp{display:none}
@media (max-width:860px){
  .cases{display:none}
  .case-sp{display:table;width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed;margin:0 -6px}
  .case-sp th{font-family:var(--serif);font-weight:500;font-size:16px;text-align:left;padding:4px 4px 2px;color:var(--sub)}
  .case-sp th:last-child{color:var(--navy)}
  .case-sp td{background:#EAF0F8;padding:10px 10px 12px;font-size:13px;font-weight:700;color:var(--navy);line-height:1.6;vertical-align:top;border:1px solid transparent}
  .case-sp td small{display:block;font-size:10px;font-weight:400;color:var(--sub);margin-bottom:2px}
  .case-sp td.ai{background:#F8E9EA;border-color:var(--red)}
  .case-sp td.ai small{color:var(--red);font-weight:700}
  .case-sp .sub-note{display:block;font-size:11px;font-weight:400;color:var(--sub);margin-top:4px}
  .case-sp .src-row td{background:#fff;border-color:var(--rule);font-weight:400;color:var(--ink);font-size:12px}
}

/* 実践事例：狭い画面では、図を画像で縮小表示し、タップで拡大（比較表は廃止） */
.case-img{display:none}
@media (max-width:860px){
  .case-sp{display:none}
  .case-img{display:block}
  .case-img img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:#fff}
  .case-img .small{text-align:right;margin-top:6px}
}
.steps li .sub-note{display:block;font-size:12px;font-weight:400;color:var(--sub);margin-top:6px;line-height:1.5}
/* 実践事例：改善前・改善後の参照情報の箱を同じ高さ（1行）に揃え、文字を上下中央に置く */
.chips li{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 10px}
.chips li.new em{display:inline;margin-top:0}
.chips li{border:1px solid transparent}