@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

.doc-page{
  --navy:#1B2A47; --navy-deep:#101A2E; --navy-bg:#EAEEF5;
  --shu:#C63C23; --shu-deep:#9E2E19; --shu-bg:#FBEAE4;
  --moss:#5C8A5C; --moss-deep:#3F6B41; --moss-bg:#EAF3EA;
  --sky:#6E9FBD; --sky-deep:#4C7A96; --sky-bg:#EAF2F6;
  --accent:var(--navy); --accent-deep:var(--navy-deep); --accent-bg:var(--navy-bg);
  --paper:#FFFFFF; --bg:#F6F5F0; --ink:#1E2430; --ink-soft:#5B6472; --line:#E1DFD4;
  width:min(100%,860px); margin:0 auto; padding:24px 20px 60px;
  background:var(--bg); color:var(--ink); font-family:'Noto Sans JP',sans-serif; line-height:1.9;
  box-sizing:border-box;
}
.doc-page *{ box-sizing:border-box; }
.doc-page a{ color:var(--accent-deep); font-weight:700; text-decoration:underline; }

.doc-page.accent-coral{ --accent:var(--shu); --accent-deep:var(--shu-deep); --accent-bg:var(--shu-bg); }
.doc-page.accent-moss{ --accent:var(--moss); --accent-deep:var(--moss-deep); --accent-bg:var(--moss-bg); }
.doc-page.accent-sky{ --accent:var(--sky); --accent-deep:var(--sky-deep); --accent-bg:var(--sky-bg); }

.doc-hero{
  background:linear-gradient(135deg,var(--accent-bg),var(--bg));
  border-radius:24px; padding:40px 32px; margin:0 0 32px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.doc-hero-icon{
  width:64px; height:64px; border-radius:50%; background:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 8px 20px rgba(27,42,71,.12);
}
.doc-hero-icon svg{ width:30px; height:30px; color:var(--accent-deep); }
.doc-hero-text{ min-width:0; flex:1; }
.doc-hero h1{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:clamp(22px,4vw,30px); font-weight:900;
  color:var(--accent-deep); margin:0 0 8px; line-height:1.4;
}
.doc-hero .lead{ font-size:14px; color:var(--ink-soft); margin:0; }

.doc-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:26px 24px; margin:0 0 20px;
}
.doc-card h2{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:19px; font-weight:900;
  color:var(--accent-deep); margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--accent);
}
.doc-card h3{
  font-size:15px; font-weight:700; color:var(--ink); margin:22px 0 8px;
  padding-left:12px; border-left:4px solid var(--accent-bg);
}
.doc-card h3:first-of-type{ margin-top:0; }
.doc-card p{ font-size:14.5px; color:var(--ink); margin:0 0 14px; }
.doc-card p:last-child{ margin-bottom:0; }
.doc-card ul{ margin:0 0 14px; padding-left:0; list-style:none; }
.doc-card ul li{
  position:relative; padding-left:22px; margin-bottom:8px; font-size:14.5px; color:var(--ink);
}
.doc-card ul li::before{
  content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
  border-radius:50%; background:var(--accent);
}

.doc-lead-card{
  background:var(--accent-bg); border-radius:18px; padding:20px 24px; margin:0 0 24px;
}
.doc-lead-card p{ font-size:14.5px; color:var(--ink); margin:0 0 10px; }
.doc-lead-card p:last-child{ margin-bottom:0; }

.doc-steps{ position:relative; display:flex; flex-direction:column; gap:0; margin:0 0 8px; }
.doc-steps::before{
  content:""; position:absolute; left:19px; top:6px; bottom:6px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--accent) 0 5px, transparent 5px 10px);
}
.doc-step{ display:flex; gap:16px; padding:16px 0; align-items:flex-start; position:relative; }
.doc-step-idx{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:14px; color:#fff; font-weight:700;
  flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
}
.doc-step-body{ padding-top:6px; min-width:0; }
.doc-step-body h3{ font-size:15px; font-weight:700; margin:0 0 6px; border:none; padding:0; color:var(--ink); }
.doc-step-body p{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.85; }

.doc-cta{
  background:var(--accent-deep); border-radius:24px; padding:32px 28px; text-align:center; color:#fff; margin:0 0 20px;
}
.doc-cta h2{ color:#fff; border-bottom:2px solid rgba(255,255,255,.3); display:inline-block; margin:0 0 16px; padding-bottom:10px; font-family:'Zen Kaku Gothic New',sans-serif; font-size:19px; font-weight:900; }
.doc-cta p{ font-size:14px; color:rgba(255,255,255,.85); margin:0 0 20px; }
.doc-cta a.doc-btn{
  display:inline-block; background:var(--accent); color:#fff !important; padding:14px 32px;
  border-radius:999px; font-weight:700; font-size:14px; text-decoration:none;
}

@media(max-width:640px){
  .doc-hero{ padding:28px 22px; flex-direction:column; align-items:flex-start; text-align:left; }
  .doc-card{ padding:20px 18px; }
}

.doc-form{ margin:0; }
.doc-form-row{ margin:0 0 20px; }
.doc-form-row label{
  display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin:0 0 8px;
}
.doc-form-row .doc-required{
  display:inline-block; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:middle;
}
.doc-form-row input[type="text"],
.doc-form-row input[type="email"],
.doc-form-row input[type="tel"],
.doc-form-row select,
.doc-form-row textarea{
  width:100%; box-sizing:border-box; font-family:'Noto Sans JP',sans-serif; font-size:14.5px;
  color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; line-height:1.6;
}
.doc-form-row textarea{ min-height:160px; resize:vertical; }
.doc-form-row input:focus,
.doc-form-row select:focus,
.doc-form-row textarea:focus{
  outline:none; border-color:var(--accent); background:var(--paper);
}
.doc-form-submit{ margin:28px 0 0; text-align:center; }
.doc-form-submit input[type="submit"]{
  appearance:none; border:none; cursor:pointer; display:inline-block;
  background:var(--accent-deep); color:#fff; padding:15px 48px; border-radius:999px;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:15px; font-weight:700; letter-spacing:.02em;
  transition:opacity .2s;
}
.doc-form-submit input[type="submit"]:hover{ opacity:.85; }
.doc-form-submit input[type="submit"]:disabled{ opacity:.5; cursor:default; }
.doc-card .wpcf7-not-valid-tip{
  color:var(--shu-deep); font-size:12.5px; margin-top:6px; font-weight:500;
}
.doc-card .wpcf7-response-output{
  border-radius:12px !important; font-size:13.5px !important; margin:20px 0 0 !important;
  padding:14px 18px !important;
}
.doc-card form.sent .wpcf7-response-output{
  border-color:var(--accent) !important; background:var(--accent-bg); color:var(--accent-deep);
}
.doc-card .wpcf7-spinner{ margin:0 0 0 10px; }

.doc-plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 8px; }
.doc-plan{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:28px 20px 24px; text-align:center; position:relative;
}
.doc-plan.is-featured{ border:2px solid var(--accent); }
.doc-plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  padding:4px 14px; border-radius:999px; white-space:nowrap;
}
.doc-plan-name{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:16px; font-weight:900;
  color:var(--accent-deep); margin:6px 0 10px;
}
.doc-plan-price{ font-size:26px; font-weight:900; color:var(--ink); margin:0 0 4px; }
.doc-plan-price span{ font-size:12px; font-weight:500; color:var(--ink-soft); }
.doc-plan-desc{ font-size:12.5px; color:var(--ink-soft); margin:0 0 18px; }
.doc-plan ul{ text-align:left; margin:0; padding-left:0; list-style:none; }
.doc-plan ul li{
  position:relative; padding-left:20px; margin-bottom:10px; font-size:13.5px; color:var(--ink);
}
.doc-plan ul li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }

.doc-price-line{
  display:flex; align-items:baseline; gap:10px; justify-content:center; margin:0 0 8px;
}
.doc-price-line .doc-price-amount{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:32px; font-weight:900; color:var(--accent-deep);
}
.doc-price-line .doc-price-unit{ font-size:13px; color:var(--ink-soft); }

@media(max-width:640px){
  .doc-plan-grid{ grid-template-columns:1fr; }
}