@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600&family=Noto+Serif+JP:wght@500;600&display=swap');

:root {
  --paper: #f5f3ed;
  --paper-2: #ebe9e1;
  --ink: #18231f;
  --muted: #68716d;
  --green: #2f5145;
  --green-2: #d9e1da;
  --verm: #bd5038;
  --line: rgba(24, 35, 31, .15);
  --white: #fffefa;
  --serif: "Noto Serif JP", serif;
  --sans: "DM Sans", "Noto Sans JP", sans-serif;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: white; }
.skip:focus { top: 16px; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 30; height: 82px;
  display: flex; align-items: center; transition: .35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { height: 68px; background: rgba(245,243,237,.9); backdrop-filter: blur(18px); border-color: var(--line); }
.nav { width: min(calc(100% - 48px), var(--max)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.nav-links a { text-decoration: none; position: relative; }
.nav-links a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:currentColor; transition:.25s; }
.nav-links a:hover::after { right:0; }
.nav-cta { border: 1px solid var(--ink); padding: 10px 16px; border-radius: 100px; }
.menu-button { display:none; border:0; background:none; width:42px; height:42px; }
.menu-button span { display:block; height:1px; width:24px; margin:6px auto; background:var(--ink); transition:.3s; }

.hero { min-height: 100svh; position: relative; overflow: hidden; display: grid; align-items: center; }
.hero-media { position: absolute; inset: 0; }
.hero-media picture { display:block; width:100%; height:100%; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(245,243,237,.98) 0%, rgba(245,243,237,.9) 34%, rgba(245,243,237,.1) 70%); }
.hero-inner { width:min(calc(100% - 48px), var(--max)); margin:auto; position:relative; z-index:2; padding-top:80px; }
.eyebrow { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--green); }
.eyebrow::before { content:""; width:24px; height:1px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { max-width: 760px; margin: 28px 0 30px; font: 500 clamp(48px, 6.7vw, 96px)/1.22 var(--serif); letter-spacing:-.04em; }
.hero h1 em { color:var(--verm); font-style:normal; }
.hero-copy { max-width:590px; font-size:16px; line-height:2; color:#42504a; }
.hero-actions { display:flex; align-items:center; gap:22px; margin-top:38px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:54px; padding:0 24px; border:1px solid var(--ink); border-radius:100px; text-decoration:none; font-size:13px; transition:.25s; }
.button::after { content:"↗"; }
.button.primary { color:white; background:var(--ink); }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(24,35,31,.12); }
.text-link { font-size:13px; text-underline-offset:6px; }
.scroll-note { position:absolute; z-index:2; left:calc((100% - min(calc(100% - 48px), var(--max)))/2); bottom:30px; font-size:10px; letter-spacing:.16em; writing-mode:vertical-rl; }

.marquee { overflow:hidden; border-block:1px solid var(--line); background:var(--white); }
.marquee-track { display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee span { padding:20px 30px; font:500 12px var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.marquee i { color:var(--verm); font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }

.section { padding: clamp(90px, 11vw, 160px) 24px; }
.section-inner { width:min(100%, var(--max)); margin:auto; }
.section-head { display:grid; grid-template-columns:.8fr 1.5fr; gap:8vw; align-items:start; margin-bottom:72px; }
.section-title { font:500 clamp(36px,5vw,66px)/1.35 var(--serif); letter-spacing:-.035em; }
.lead { font-size:clamp(18px,2vw,26px); line-height:1.8; }
.body-copy { color:var(--muted); line-height:2; max-width:740px; }
.dark { color:#f4f3ed; background:var(--ink); }
.dark .eyebrow,.dark .body-copy { color:#aebcb5; }
.green-wash { background:var(--green-2); }

.statement { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; }
.statement-big { font:500 clamp(40px,6.2vw,88px)/1.28 var(--serif); letter-spacing:-.05em; }
.statement-big span { color:var(--verm); }
.orbit { width:min(460px,100%); aspect-ratio:1; border:1px solid rgba(255,255,255,.25); border-radius:50%; position:relative; margin:auto; }
.orbit::before,.orbit::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.orbit::before { inset:14%; } .orbit::after { inset:31%; background:var(--verm); border:0; }
.orbit-label { position:absolute; font:500 13px var(--sans); letter-spacing:.08em; }
.orbit-label:nth-child(1){left:42%;top:-8px}.orbit-label:nth-child(2){right:-40px;top:48%}.orbit-label:nth-child(3){left:36%;bottom:-8px}.orbit-label:nth-child(4){left:-45px;top:48%}

.cards { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.card { padding:40px 34px 44px 0; border-bottom:1px solid var(--line); min-height:330px; }
.card + .card { border-left:1px solid var(--line); padding-left:34px; }
.card-num { font-size:11px; color:var(--verm); letter-spacing:.1em; }
.card h3 { margin:80px 0 20px; font:500 27px/1.55 var(--serif); }
.card p { font-size:14px; line-height:1.9; color:var(--muted); }
.card a { display:inline-block; margin-top:18px; font-size:12px; text-underline-offset:5px; }

.steps { counter-reset:steps; }
.step { display:grid; grid-template-columns:100px 1fr .65fr; gap:30px; padding:34px 0; border-top:1px solid var(--line); align-items:center; }
.step:last-child { border-bottom:1px solid var(--line); }
.step::before { counter-increment:steps; content:"0" counter(steps); color:var(--verm); font-size:12px; }
.step h3 { margin:0; font:500 clamp(21px,2.3vw,32px) var(--serif); }
.step p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }

.quote { max-width:1000px; margin:auto; text-align:center; }
.quote blockquote { margin:0; font:500 clamp(32px,5.2vw,68px)/1.55 var(--serif); letter-spacing:-.04em; }
.quote p { margin-top:36px; color:var(--muted); }
.cta-band { background:var(--verm); color:white; }
.cta-band .section-inner { display:flex; justify-content:space-between; gap:40px; align-items:end; }
.cta-band h2 { max-width:850px; font:500 clamp(34px,5vw,66px)/1.45 var(--serif); }
.cta-band .button { color:white; border-color:white; flex:none; }

.page-hero { padding:170px 24px 100px; min-height:70vh; display:flex; align-items:end; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::after { content:""; width:42vw; height:42vw; border-radius:50%; border:1px solid var(--line); position:absolute; right:-8vw; top:80px; box-shadow:0 0 0 8vw rgba(47,81,69,.035),0 0 0 16vw rgba(47,81,69,.025); }
.page-hero-inner { width:min(100%,var(--max)); margin:auto; position:relative; z-index:1; }
.page-hero h1 { max-width:1020px; margin:28px 0 40px; font:500 clamp(50px,7.6vw,108px)/1.22 var(--serif); letter-spacing:-.05em; }
.page-hero .lead { max-width:760px; }
.content-grid { display:grid; grid-template-columns:280px 1fr; gap:8vw; }
.side-index { position:sticky; top:110px; align-self:start; font-size:12px; line-height:2.1; color:var(--muted); }
.side-index strong { display:block; color:var(--ink); margin-bottom:10px; }
.prose { max-width:820px; }
.prose-section { margin-bottom:100px; scroll-margin-top:110px; }
.prose h2 { margin-bottom:30px; font:500 clamp(30px,4vw,50px)/1.5 var(--serif); letter-spacing:-.025em; }
.prose h3 { margin:42px 0 18px; font:500 22px/1.6 var(--serif); }
.prose p,.prose li { color:#56615c; font-size:16px; line-height:2.1; }
.prose ul,.prose ol { padding-left:1.4em; }
.callout { margin:40px 0; padding:34px; background:var(--white); border-left:3px solid var(--verm); }
.callout p:last-child { margin-bottom:0; }
.comparison { width:100%; border-collapse:collapse; font-size:14px; }
.comparison th,.comparison td { padding:18px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.comparison th { font-weight:500; color:var(--green); }
.comparison tr > :nth-child(2) { background:rgba(47,81,69,.06); }
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-question { width:100%; display:grid; grid-template-columns:48px 1fr 30px; text-align:left; border:0; background:none; padding:28px 0; color:var(--ink); cursor:pointer; }
.faq-question b { color:var(--verm); }
.faq-question span { font:500 19px/1.7 var(--serif); }
.faq-question i { font-style:normal; transition:.3s; }
.faq-answer { display:none; padding:0 40px 30px 48px; color:var(--muted); line-height:2; }
.faq-item.open .faq-answer { display:block; }
.faq-item.open .faq-question i { transform:rotate(45deg); }
.glossary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.term { background:var(--paper); padding:40px; min-height:260px; }
.term small { color:var(--verm); letter-spacing:.12em; }
.term h3 { margin:44px 0 16px; font:500 25px var(--serif); }
.term p { color:var(--muted); line-height:2; font-size:14px; }
.company-table { width:100%; border-collapse:collapse; }
.company-table th,.company-table td { padding:22px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.8; }
.company-table th { width:26%; font-size:12px; color:var(--muted); font-weight:500; }

.legal { max-width:900px; margin:auto; }
.legal h2 { margin:72px 0 20px; padding-top:28px; border-top:1px solid var(--line); font:500 25px/1.6 var(--serif); }
.legal p,.legal li { color:#56615c; font-size:14px; line-height:2.15; }
.legal ol,.legal ul { padding-left:1.5em; }
.legal-meta { margin:0 0 60px; color:var(--muted); font-size:12px; }
.template-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.template-item { background:var(--paper); padding:30px; display:grid; grid-template-columns:52px 1fr; gap:22px; align-items:start; }
.template-item b { color:var(--verm); font:500 12px var(--sans); }
.template-item h3 { margin:0 0 12px; font:500 20px/1.55 var(--serif); }
.template-item p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.form-shell { max-width:820px; margin:auto; padding:clamp(30px,6vw,70px); border:1px solid var(--line); border-radius:28px; background:var(--white); box-shadow:0 30px 80px rgba(24,35,31,.08); }
.form-shell .input_unit { display:grid; grid-template-columns:180px 1fr; gap:26px; padding:22px 0; border-bottom:1px solid var(--line); }
.form-shell label { font-size:13px; font-weight:500; }
.form-shell label.required::after { content:"必須"; margin-left:10px; color:var(--verm); font-size:9px; letter-spacing:.1em; }
.form-shell input[type="text"],.form-shell input[type="email"],.form-shell input[type="url"],.form-shell input[type="tel"],.form-shell select,.form-shell textarea {
  appearance:none; width:100%; border:0; border-bottom:1px solid #99a39e; border-radius:0; background:transparent;
  padding:8px 2px 13px; color:var(--ink); font:16px var(--sans); outline:none;
}
.form-shell input:focus,.form-shell select:focus,.form-shell textarea:focus { border-color:var(--verm); }
.form-shell textarea { min-height:160px; resize:vertical; }
.form-shell .submit { margin-top:36px; }
.form-shell input[type="submit"] { width:100%; min-height:60px; border:0; border-radius:100px; color:white; background:var(--ink); font:500 14px var(--sans); cursor:pointer; transition:.25s; }
.form-shell input[type="submit"]:hover { background:var(--verm); transform:translateY(-2px); }
.form-note { padding:22px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
.recaptcha-notice { margin:20px 0 0; color:#7b8580; text-align:center; font-size:10px; line-height:1.7; }
.recaptcha-notice a { color:inherit; text-underline-offset:3px; }
.grecaptcha-badge { visibility:hidden !important; }
.form-frame { display:block; width:100%; border:0; background:white; }
.form-frame.contact { min-height:1100px; }
.form-frame.template { min-height:340px; }

.site-footer { padding:80px 24px 34px; background:#111a17; color:#dbe0dc; }
.footer-inner { width:min(100%,var(--max)); margin:auto; }
.footer-top { display:grid; grid-template-columns:1.3fr 2fr; gap:10vw; padding-bottom:80px; }
.footer-copy { font:500 clamp(26px,3vw,42px)/1.5 var(--serif); }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; font-size:12px; }
.footer-nav strong { display:block; color:#7d9188; margin-bottom:20px; font-weight:500; }
.footer-nav a { display:block; text-decoration:none; margin:13px 0; }
.footer-bottom { display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid rgba(255,255,255,.15); color:#7d9188; font-size:10px; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .nav-links { position:fixed; inset:0; background:var(--paper); padding:120px 32px 40px; flex-direction:column; align-items:flex-start; gap:26px; font:500 23px var(--serif); transform:translateX(100%); transition:.4s; }
  .nav-links.open { transform:none; }
  .menu-button { display:block; position:relative; z-index:2; }
  .hero-media::after { background:linear-gradient(180deg,rgba(245,243,237,.96) 0%,rgba(245,243,237,.72) 62%,rgba(245,243,237,.1)); }
  .hero { align-items:start; padding-top:120px; }
  .hero h1 { font-size:clamp(44px,12vw,70px); }
  .section-head,.statement,.content-grid,.footer-top { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .card + .card { border-left:0; padding-left:0; }
  .card { min-height:0; }
  .card h3 { margin-top:44px; }
  .orbit { margin-top:70px; width:75vw; }
  .side-index { display:none; }
  .cta-band .section-inner { align-items:flex-start; flex-direction:column; }
  .page-hero { min-height:65vh; }
}
@media (max-width: 620px) {
  .nav { width:calc(100% - 32px); }
  .hero-inner { width:calc(100% - 32px); }
  .hero h1 { margin-top:20px; }
  .hero-copy { font-size:14px; line-height:1.9; max-width:88%; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:16px; }
  .scroll-note { display:none; }
  .section { padding:82px 20px; }
  .section-head { gap:28px; margin-bottom:48px; }
  .step { grid-template-columns:44px 1fr; }
  .step p { grid-column:2; }
  .glossary-grid { grid-template-columns:1fr; }
  .term { min-height:0; padding:30px; }
  .comparison { font-size:11px; display:block; overflow-x:auto; white-space:nowrap; }
  .page-hero { padding:140px 20px 76px; }
  .page-hero h1 { font-size:clamp(44px,13vw,66px); }
  .footer-nav { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; gap:10px; }
  .company-table th { width:34%; }
  .template-list { grid-template-columns:1fr; }
  .form-shell { border-radius:18px; }
  .form-shell .input_unit { grid-template-columns:1fr; gap:10px; }
  .form-frame.contact { min-height:1250px; }
}