@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root { --ink: #1b3245; --teal: #1698a8; --pale: #f0f7f9; --coral: #ef7473; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 15px/1.95 'Noto Sans JP', sans-serif; background: #fff; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h2 { font: 600 clamp(28px, 3vw, 40px)/1.65 'Klee One', serif; text-align: center; letter-spacing: .07em; }
h3 { font-size: 19px; line-height: 1.65; }
em { color: var(--teal); font-style: normal; }
small { display: block; font-size: 11px; line-height: 1.9; }
.header { height: 90px; padding: 0 4%; display: flex; align-items: center; gap: 40px; position: absolute; top: 0; z-index: 2; width: 100%; }
.brand { font-size: 23px; letter-spacing: .18em; font-weight: 600; line-height: 1.3; }
.brand small { font-size: 8px; letter-spacing: .21em; margin-top: 4px; }
nav { display: flex; gap: 25px; margin: auto; font-size: 11px; }
.nav-cta { border: 0; border-radius: 40px; background: var(--ink); color: white; padding: 12px 23px; font-size: 12px; }
i { display: inline-block; width: 8px; height: 8px; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); margin-left: 25px; }
.hero { position: relative; min-height: 790px; padding: 135px 6% 110px; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center; }
.hero-copy { position: relative; max-width: 660px; }
h1 { font: 600 clamp(30px, 3.5vw, 49px)/1.5 'Klee One', serif; letter-spacing: .045em; }
h1 strong { display: block; font-size: 1.2em; font-weight: 600; margin-top: 9px; }
h1 em { font-size: 1.15em; }
.hero-copy p { margin: 24px 0 20px; font-weight: 600; font-size: 16px; }
.cta { border: 0; border-radius: 60px; background: var(--coral); color: #fff; padding: 20px 38px; font-weight: 600; letter-spacing: .07em; box-shadow: 0 9px 24px #e77d7215; }
.cta:hover { background: #df6263; }
.hero-copy small { margin-top: 15px; }
.memo { position: absolute; right: 5%; top: 110px; padding: 20px 28px; background: #fffef2; transform: rotate(-5deg); font: 18px/1.9 'Klee One', serif; box-shadow: 4px 9px 25px #25445315; }
.thought { position: absolute; left: 53%; top: 180px; font: 20px/1.65 'Klee One', serif; transform: rotate(-12deg); text-align: center; }
.wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; }
.section { padding: 95px 24px; }
.wrap { max-width: 1100px; margin: auto; }
.eyebrow { text-align: center; letter-spacing: .28em; font-size: 11px; font-weight: 600; margin-bottom: 18px; color: #527386; }
.intro { text-align: center; margin: 24px auto 45px; color: #516575; }
.trouble { background: var(--pale); border-radius: 0 0 48% 8% / 0 0 5% 3%; padding-top: 30px; }
.trouble-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 50px 0 38px; }
.trouble article { background: #ffffffa8; text-align: center; border-radius: 48% 52% 45% 50%; padding: 35px 12px 38px; }
.drawing { height: 100px; font: 42px/1.8 'Klee One', serif; color: #527386; }
.drawing span { font-size: 25px; display: inline-block; border: 1px solid #527386; border-radius: 50%; width: 42px; line-height: 42px; margin-left: 8px; transform: rotate(10deg); }
.trouble h3 { margin: 12px 0; }
.trouble p:not(.eyebrow) { font-size: 14px; }
.reassurance { font-size: 29px; margin: 25px 0 16px; }
.center { text-align: center; }
.cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cost-grid article { border-top: 1px solid #bcd5db; padding: 24px 15px; }
.cost-grid b { font: 26px 'Klee One', serif; color: var(--teal); }
.cost-grid h3 { margin: 18px 0 13px; }
.cost-grid p { font-size: 14px; min-height: 90px; }
.pill { display: inline-block; border-radius: 30px; background: #edf2f4; padding: 5px 12px; margin-top: 16px; font-size: 11px; }
.pill.teal { background: #e0f2f1; color: #237a83; }
.offer { background: #edf6f6; }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.offer .eyebrow, .offer h2 { text-align: left; }
.offer h2 { margin-bottom: 25px; }
.offer-card { border-radius: 24px; padding: 36px; background: white; box-shadow: 0 10px 45px #1b324508; }
.offer-card > span { font-size: 12px; }
.offer-card h3 { font: 600 25px/1.7 'Klee One', serif; padding: 22px 0; }
.offer-card h3 strong { color: var(--teal); }
.zero { border-top: 1px solid #e0e9eb; border-bottom: 1px solid #e0e9eb; padding: 12px 0; font-size: 12px; }
.zero b { font: 48px/1 sans-serif; color: var(--teal); margin-left: 16px; }
.offer-card p { margin: 20px 0 10px; font-size: 14px; }
.calculator { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d6e4e7; border-radius: 25px; overflow: hidden; }
.inputs, .results { padding: 36px 42px; }
.inputs label { display: block; font-size: 13px; margin-bottom: 20px; }
.inputs label span { display: block; margin-top: 8px; }
input { width: 65%; border: 1px solid #d3e2e4; border-radius: 7px; padding: 10px 14px; color: var(--ink); font-size: 20px; }
.results { background: var(--ink); color: white; display: flex; flex-wrap: wrap; align-content: center; }
.results > p { width: 100%; }
.results > strong { font-size: clamp(34px, 4vw, 55px); letter-spacing: .02em; font-weight: 500; }
.results > span { align-self: center; padding-left: 10px; }
.results hr { width: 100%; border: 0; border-top: 1px solid #ffffff33; margin: 20px 0; }
dl { width: 100%; margin: 0 0 20px; }
dl div { margin: 12px 0; }
dt { font-size: 11px; opacity: .8; }
dd { margin: 0; font-size: 22px; }
.routes { background: #faf9f5; }
.three-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 45px; }
.three-grid article { background: white; padding: 32px; border-radius: 20px; }
.three-grid span { font-size: 11px; color: var(--teal); letter-spacing: .14em; }
.three-grid h3 { margin: 20px 0 16px; }
.three-grid p { font-size: 14px; }
.honest { max-width: 850px; margin: 40px auto 0; padding: 25px 30px; border-left: 3px solid #c5bda9; }
.honest p { margin-top: 10px; font-size: 14px; }
.flow ol { list-style: none; max-width: 780px; padding: 0; margin: auto; }
.flow li { display: flex; gap: 30px; padding: 27px 0; border-bottom: 1px solid #dbe7e9; }
.flow li > span { font: 30px 'Klee One', serif; color: var(--teal); }
.flow h3 { margin-bottom: 6px; }
.flow li p { font-size: 14px; }
.faq { background: var(--pale); }
.narrow { max-width: 850px; }
.faq h2 { margin-bottom: 40px; }
details { border-bottom: 1px solid #d4e3e6; }
summary { cursor: pointer; padding: 24px 35px 24px 0; font-weight: 500; position: relative; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 5px; color: var(--teal); }
details[open] summary::after { content: '−'; }
details p { padding: 0 30px 24px 0; font-size: 14px; }
.closing { text-align: center; background: linear-gradient(140deg,#fff 20%,#eef8f6); }
.closing p:not(.eyebrow) { margin: 24px 0 30px; }
.closing small { margin-top: 18px; color: #6e7e87; }
footer { padding: 40px 6%; display: flex; align-items: center; gap: 30px; border-top: 1px solid #e6eef0; }
footer p { font-size: 11px; margin-right: auto; }
dialog { border: 0; border-radius: 18px; padding: 45px; max-width: min(90vw,520px); color: var(--ink); }
dialog::backdrop { background: #1b324580; }
dialog h2 { font-size: 23px; }
dialog p { margin: 20px 0; }
.close { position: absolute; right: 12px; top: 6px; border: 0; background: none; font-size: 26px; color: var(--ink); }
@media (min-width: 1500px) { .hero { padding-left: calc((100vw - 1300px)/2); min-height: 860px; } }
@media (max-width: 1100px) { nav { gap: 14px; } .header { gap: 15px; } .thought { display: none; } .memo { font-size: 15px; right: 3%; } .hero-copy { max-width: 57%; } .hero-copy p { font-size: 14px; } .hero { min-height: 730px; } }
@media (max-width: 760px) {
 body { font-size: 14px; }
 .header { height: 72px; padding: 0 22px; justify-content: space-between; }
 .brand { font-size: 19px; }
 nav { display: none; }
 .nav-cta { padding: 9px 15px; font-size: 10px; }
 .header i { margin-left: 8px; }
 .hero { padding: 96px 24px 65px; min-height: 850px; }
 .hero-photo { height: 490px; top: 0; object-position: 62% center; }
 .hero::after { content: ''; position: absolute; inset: 270px 0 0; background: linear-gradient(transparent,#fff 34%); }
 .hero-copy { max-width: none; z-index: 1; }
 h1 { font-size: clamp(24px, 6vw, 34px); line-height: 1.65; text-shadow: 0 0 10px #fff,0 0 20px #fff; }
 h1 strong { font-size: 1.09em; }
 .hero-copy p { margin-top: 235px; font-size: 13px; }
 .hero-copy small { font-size: 10px; }
 .memo { display: none; }
 .wave { z-index: 1; height: 40px; }
 .cta { width: 100%; max-width: 380px; padding: 17px 20px; font-size: 14px; }
 .section { padding: 65px 22px; }
 .trouble { padding-top: 12px; border-radius: 0 0 20% 0 / 0 0 2% 0; }
 h2 { font-size: 27px; letter-spacing: .025em; }
 .eyebrow { font-size: 10px; }
 .trouble-grid { grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 30px; }
 .trouble article { padding: 20px 8px 30px; }
 .drawing { height: 65px; font-size: 30px; }
 .drawing span { width: 30px; line-height: 30px; font-size: 20px; }
 .trouble h3 { font-size: 15px; }
 .trouble p:not(.eyebrow) { font-size: 11px; }
 .reassurance { font-size: 23px; }
 .cost-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
 .cost-grid article { padding: 20px 5px; }
 .cost-grid h3 { font-size: 16px; }
 .cost-grid p { font-size: 12px; min-height: 90px; }
 .pill { padding: 4px 8px; font-size: 10px; }
 .intro { font-size: 13px; margin: 20px auto 30px; }
 .offer-grid, .calculator, .three-grid { grid-template-columns: 1fr; gap: 25px; }
 .offer-card { padding: 28px; }
 .offer h2, .offer .eyebrow { text-align: center; }
 .offer-grid > div > p:not(.eyebrow) { font-size: 13px; }
 .calculator { gap: 0; }
 .inputs, .results { padding: 25px; }
 .results > strong { font-size: 44px; }
 .three-grid { gap: 15px; }
 .three-grid article { padding: 25px; }
 .three-grid h3 { margin: 12px 0; }
 .honest { padding: 15px 20px; }
 .flow li { gap: 20px; }
 .flow h3 { font-size: 16px; }
 .flow li p { font-size: 13px; }
 summary { font-size: 14px; }
 footer { flex-direction: column; gap: 16px; text-align: center; }
 footer p { margin: 0; }
 .desktop { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .memo { display: none; }
}
@media (max-width: 760px) {
  .hero { min-height: 795px; }
  .hero-photo { top: 295px; height: 255px; object-position: 65% 47%; }
  .hero::after { inset: 480px 0 0; background: linear-gradient(transparent, #fff 24%); }
  .hero-copy p { margin-top: 280px; }
}