@charset "UTF-8";
/* Company workflow / editorial design, 2026-10-26 */
:root{--ink:#192b30;--accent:#24554f;--accent-hover:#17443e;--sand:#b17b53;--paper:#f6f5f0;--surface:#fffefa;--soft:#eaf0eb;--stroke:#dbe1dc;--muted:#4d6262;--shadow:0 18px 50px rgba(16,46,45,.075)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;color:var(--ink);background:var(--surface);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;font-size:16px;line-height:1.95;letter-spacing:.014em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,a,summary{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #bc794b;outline-offset:4px}
strong{font-weight:750} .wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.site-head{height:78px;display:flex;align-items:center;position:sticky;top:0;z-index:30;background:rgba(255,254,250,.97);border-bottom:1px solid var(--stroke)}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:22px}
.brand{display:flex;gap:11px;align-items:center;font-size:15px;font-weight:800;line-height:1.35;letter-spacing:.03em;white-space:nowrap}
.brand-mark{width:30px;height:30px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(-8deg)}
.brand-mark i{display:block;background:var(--accent);border-radius:1px}.brand-mark i:nth-child(2){background:#d7dbd0}.brand-mark i:nth-child(3){background:var(--sand)}.brand-mark i:nth-child(4){background:#8baba4}
.head-nav{display:flex;gap:30px;align-items:center;font-size:13px;font-weight:700}
.head-nav a:not(.nav-cta):hover{color:var(--accent)}
.nav-cta{padding:11px 18px;background:var(--accent);color:#fff;border-radius:5px}
.nav-cta:hover{background:var(--accent-hover)}
.hero{background:var(--paper);border-bottom:1px solid var(--stroke);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-18%;top:-37%;width:60%;height:110%;border:1px solid #d1d9d3;border-radius:50%;opacity:.55;pointer-events:none}
.hero-inner{min-height:600px;padding-block:74px 80px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:62px;position:relative}
.kicker{font-size:12px;letter-spacing:.06em;font-weight:800;color:#875a37;display:flex;align-items:center;gap:10px;margin:0 0 24px}
.kicker::before{content:"";width:20px;height:2px;background:var(--sand)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(38px,4.15vw,59px);line-height:1.41;letter-spacing:-.055em;font-weight:820;margin:0 0 27px;overflow-wrap:break-word}
h1 .em{color:var(--accent);text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:9px;text-decoration-color:#bfd1c6}
.hero-lead{color:#3b5051;font-size:17px;line-height:2.07;max-width:560px;margin:0 0 30px}
.action-line{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border-radius:5px;padding:12px 24px;background:var(--accent);color:white;font-size:15px;font-weight:750;line-height:1.4;transition:background .2s,transform .2s}
.button:hover{background:var(--accent-hover);transform:translateY(-1px)}
.button.secondary{border:1px solid #819c93;background:transparent;color:var(--accent)}
.button.secondary:hover{background:#ebf0eb}
.action-note{font-size:13px;color:var(--muted);margin:13px 0 0}
.hero-diagram{background:white;border:1px solid #d8dfd9;box-shadow:var(--shadow);padding:32px 34px;position:relative}
.hero-diagram::before{content:"";position:absolute;left:13px;top:13px;right:13px;bottom:13px;border:1px solid #ebeeea;pointer-events:none}
.diagram-label{font-size:12px;font-weight:800;color:var(--accent);margin:0 0 17px;letter-spacing:.04em}
.diagram-heading{font-size:24px;line-height:1.5;font-weight:800;letter-spacing:-.035em;margin:0 0 18px}
.task-stack{display:grid;gap:8px}
.task{display:flex;gap:15px;align-items:flex-start;border-top:1px solid #e4e9e4;padding:13px 2px}
.task .number{width:31px;height:31px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:100%;font-size:12px;color:var(--accent);font-weight:850;background:#e5f0e8}
.task strong{font-size:14px;display:block;margin-bottom:0}.task span:last-child{font-size:13px;color:var(--muted)}
.task-info{background:#edf3ee;color:#26564b;font-size:13px;font-weight:720;padding:13px 16px;margin-top:13px}
.caption{font-size:12px;color:#5b7070;line-height:1.7;margin:12px 0 0}
.simple-bar{background:var(--accent);color:white}
.simple-bar .wrap{padding-block:16px;display:flex;gap:36px;justify-content:space-between}
.simple-bar span{font-size:14px;font-weight:700}
.section{padding:96px 0}
.section.alt{background:var(--paper)}
.section-header{margin-bottom:36px;display:grid;grid-template-columns:1.35fr .65fr;gap:45px;align-items:end}
.section-label{display:block;font-size:12px;color:#926b48;font-weight:750;margin:0 0 12px}
h2{font-size:clamp(29px,3.1vw,39px);font-weight:780;letter-spacing:-.045em;line-height:1.55;margin:0}
.section-header p{font-size:15px;line-height:1.95;color:var(--muted);margin:0 0 5px}
.pain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--stroke);border-left:1px solid var(--stroke)}
.pain-card{background:var(--surface);padding:32px 28px 28px;border-right:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.pain-index{display:block;color:#966f52;font-family:Georgia,serif;font-size:15px;letter-spacing:.03em;margin-bottom:19px}
.pain-card h3{font-size:19px;line-height:1.6;font-weight:800;letter-spacing:-.027em;margin:0 0 9px}
.pain-card p{font-size:14px;color:var(--muted);line-height:1.88;margin:0}
.statement{background:#203c3a;color:white;padding:65px 0}
.statement-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.statement .section-label{color:#d4ae8a}
.statement h2{font-size:clamp(28px,3vw,40px)}
.statement p{font-size:15px;color:#e4ede8;line-height:2.1;margin:0}
.compare{display:grid;grid-template-columns:1fr 72px 1fr;gap:0;align-items:stretch;margin-top:42px}
.compare-panel{border:1px solid var(--stroke);padding:32px;background:#f7f8f5}
.compare-panel.after{background:#f0f5f0;border-color:#93b0a1}
.pill{display:inline-flex;font-size:12px;font-weight:800;line-height:1.5;color:#3a5551;background:#dce5de;padding:6px 12px;margin-bottom:17px}
.pill.good{color:#fff;background:var(--accent)}
.compare-panel h3{font-size:21px;margin:0 0 14px}
.compare-panel ul{padding:0;margin:0;list-style:none}
.compare-panel li{font-size:15px;padding:11px 0 11px 24px;border-top:1px solid #dfe6df;position:relative}
.compare-panel li::before{content:"—";position:absolute;left:0;color:#9b6f51;font-weight:800}
.compare-panel.after li::before{content:"✓";color:var(--accent)}
.compare-arrow{align-self:center;text-align:center;color:var(--accent);font-size:32px}
.fineprint{font-size:13px;color:var(--muted);margin:18px 0 0}
.benefit-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.benefit{border-top:3px solid var(--accent);padding:22px 20px 17px;background:white}
.benefit .for{font-size:13px;color:#7f694f;font-weight:760}
.benefit h3{font-size:20px;line-height:1.5;margin:10px 0}
.benefit p{font-size:14px;color:var(--muted);line-height:1.9;margin:0}
.service-list{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;border-top:1px solid var(--stroke)}
.service-item{border-bottom:1px solid var(--stroke);padding:20px 0;display:flex;gap:16px}
.service-item .dot{background:#e5eee6;color:var(--accent);font-size:15px;width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;font-weight:900}
.service-item strong{display:block;font-size:17px}
.service-item p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.step{border-top:2px solid #8fa99d;padding:16px 6px 5px}
.step-num{color:#946b4e;font-family:Georgia,serif;font-size:26px;margin-bottom:13px}
.step h3{font-size:17px;line-height:1.6;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted)}
.faq{max-width:850px}
.faq details{border-top:1px solid var(--stroke);padding:17px 4px}.faq details:last-child{border-bottom:1px solid var(--stroke)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;font-size:17px;font-weight:750;line-height:1.7;padding:3px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";font-size:20px;font-weight:400;color:var(--accent)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:12px 0 3px;color:var(--muted);font-size:15px;line-height:1.9;max-width:700px}
.last{background:var(--accent);color:white;padding:86px 0}
.last .section-label{color:#e1c0a0}
.last-inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.last h2{margin-bottom:16px}.last p{color:#e4f0e7;font-size:16px}
.last .outline{border:1px solid #9dc5b5;padding:28px}
.last .outline strong{display:block;font-size:17px;line-height:1.8;margin-bottom:8px}
.last .outline p{margin:0;font-size:14px;line-height:2}
.foot{background:#f6f5f0;border-top:1px solid var(--stroke);padding:24px 0;color:#647675;font-size:12px}
.foot .wrap{display:flex;justify-content:space-between;gap:20px}
.note-block{border-left:3px solid #ba936f;background:#f7f6f2;padding:14px 18px;font-size:14px;line-height:1.85;color:#485b5a;margin-top:30px}
.estimate{padding:25px 30px;background:#eef3ef;border:1px solid #d0ded3;margin-top:26px}
.estimate strong{font-size:18px;display:block}.estimate p{color:var(--muted);font-size:14px;margin:8px 0 0}
@media(max-width:960px){.hero-inner{gap:32px;min-height:auto}.head-nav{gap:18px}.hero-diagram{padding:27px}.section-header{gap:26px}}
@media(max-width:760px){
 html{scroll-padding-top:72px}
 .site-head{height:66px}.wrap{width:min(100% - 38px,1120px)}
 .brand{font-size:14px}.brand-mark{height:27px;width:27px}
 .head-nav a:not(.nav-cta){display:none}.head-nav{gap:0}.nav-cta{padding:10px 12px;font-size:12px}
 .hero-inner{grid-template-columns:1fr;padding-block:50px 58px;gap:35px}
 .hero::before{display:none}h1{font-size:clamp(33px,7vw,47px);line-height:1.43}
 .hero-lead{font-size:16px;margin-bottom:22px}
 .hero-diagram{max-width:600px;width:100%;padding:26px}
 .simple-bar .wrap{display:grid;gap:4px;padding-block:16px}
 .simple-bar span{font-size:13px}.simple-bar span::before{content:"✓ ";color:#bedaca}
 .section{padding:65px 0}
 .section-header{grid-template-columns:1fr;gap:15px;margin-bottom:25px}
 .section-header p{font-size:15px}
 .pain-grid{grid-template-columns:1fr 1fr}
 .statement{padding:60px 0}
 .statement-grid{grid-template-columns:1fr;gap:22px}
 .compare{grid-template-columns:1fr;gap:0;margin-top:28px}
 .compare-arrow{padding:4px 0;transform:rotate(90deg)}
 .benefit-list{grid-template-columns:1fr;gap:12px}
 .service-list{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr 1fr}
 .last{padding:62px 0}.last-inner{grid-template-columns:1fr;gap:24px}
 .foot .wrap{display:block}
}
@media(max-width:520px){
 body{font-size:16px}
 .wrap{width:calc(100% - 32px)}
 .brand{font-size:12px;white-space:normal}.brand-mark{flex:none}
 .site-head .wrap{gap:8px}.nav-cta{font-size:11px;min-height:44px;display:inline-flex;align-items:center}
 h1{font-size:clamp(31px,8.35vw,38px);letter-spacing:-.05em;line-height:1.45}
 h1 .em{text-decoration-thickness:3px;text-underline-offset:6px}
 h2{font-size:clamp(26px,6.6vw,32px)}
 .hero-inner{padding-block:46px 54px}.hero-lead{font-size:16px;line-height:1.9}
 .action-line{display:grid;grid-template-columns:1fr;gap:9px}
 .button{width:100%;min-height:53px;padding:13px 12px;font-size:15px}
 .diagram-heading{font-size:20px}.hero-diagram{padding:23px 19px}
 .pain-grid{grid-template-columns:1fr}.pain-card{padding:23px 20px}
 .pain-index{margin-bottom:7px}.pain-card h3{font-size:18px}
 .section{padding:56px 0}.statement{padding:57px 0}
 .compare-panel{padding:23px 20px}.compare-panel h3{font-size:19px}
 .compare-panel li{font-size:14px}
 .benefit{padding:18px}
 .steps{grid-template-columns:1fr 1fr;gap:24px 16px}
 .step h3{font-size:16px}.step p{font-size:13px}
 .faq summary{font-size:16px}
 .last .outline{padding:22px}
}
@media(max-width:350px){.brand{font-size:11px}.brand-mark{width:23px;height:23px}.nav-cta{font-size:10px;padding:9px 9px}.steps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}