@charset "UTF-8";

:root{
  --blue:        #2563EB;
  --blue-600:    #1D4ED8;
  --blue-700:    #1E40AF;
  --ink:         #0E2A66;
  --ink-soft:    #2A3F6B;
  --sky:         #EAF2FF;
  --sky-2:       #F4F8FF;
  --sky-line:    #DBE7FF;
  --sky-line-2:  #C4D8FB;
  --warm:        #FF8A4C;
  --warm-ink:    #B0490F;
  --warm-bg:     #FFF4EC;
  --warm-line:   #FFD9C2;
  --pop:         #FFCD4A;
  --text:        #243049;
  --text-mute:   #56637E;
  --white:       #FFFFFF;
  --paper:       #FBFCFF;
  --err:         #C2261D;
  --err-bg:      #FFF3F2;
  --line:        #06C755;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --sh-sm: 0 4px 14px rgba(37,99,235,.08);
  --sh:    0 14px 38px rgba(30,64,175,.12);
  --sh-lg: 0 26px 60px rgba(30,64,175,.18);
  --sh-btn: 0 14px 26px rgba(29,78,216,.30);
  --col:  640px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; touch-action:manipulation; }
ul,ol{ margin:0; padding:0; list-style:none; }
fieldset{ margin:0; padding:0; border:0; min-width:0; }
legend{ padding:0; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:8px; }
[hidden]{ display:none!important; }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

.mincho{ font-family:"Noto Serif JP","Hiragino Mincho ProN",serif; font-weight:600; }
.num{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; }

.br-sp,.br-xs,.br-mini,.br-pc{ display:none; }
@media(max-width:864px){ .br-sp{ display:inline; } }
@media(max-width:480px){ .br-xs{ display:inline; } }
@media(max-width:375px){ .br-mini{ display:inline; } }
@media(min-width:865px){ .br-pc{ display:inline; } }
.nb{ white-space:nowrap; }
h1,h2,h3,.ttl{ text-wrap:balance; }
p,li,.q__ttl{ text-wrap:pretty; }

.wrap{ width:100%; max-width:calc(var(--col) + 44px); margin:0 auto; padding:0 22px; }
@media(max-width:360px){ .wrap{ padding:0 14px; } }

.page-bg{
  position:absolute; inset:0 0 auto 0; height:620px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 40% at 92% 2%, rgba(255,226,150,.18), transparent 70%),
    radial-gradient(70% 60% at 6% 0%, rgba(127,178,255,.38), transparent 72%),
    linear-gradient(180deg,#DCEAFF 0%,#EAF2FF 46%,var(--paper) 100%);
}

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(219,231,255,.9);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:58px; gap:12px; }
.brand{ display:flex; flex-direction:column; line-height:1.1; }
.brand b{ font-size:16px; color:var(--ink); letter-spacing:.06em; }
.brand small{ font-size:9.5px; font-weight:700; color:var(--blue); letter-spacing:.18em; margin-top:3px; }

.prog{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; color:var(--text-mute); white-space:nowrap; }
.prog__n{ font-size:17px; color:var(--blue-700); font-weight:700; letter-spacing:.02em; }
.prog__n small{ font-size:12px; color:var(--text-mute); margin-left:1px; }
.prog__bar{ position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent; }
.prog__bar i{
  display:block; height:100%; width:0; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--blue-700),var(--blue) 60%,#7FB2FF);
  transition:width .45s var(--ease);
}
.prog.done .prog__n{ color:var(--blue); }

.letter{
  position:relative; margin:30px auto 0;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  padding:44px 22px 24px;
  text-align:center;
}
.letter::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,var(--blue-700),var(--blue) 45%,#7FB2FF 75%,var(--pop));
}
@media(max-width:360px){ .letter{ padding:42px 16px 22px; } }

.seal{
  position:absolute; top:-18px; right:14px; width:76px; height:76px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#3B82F6,var(--blue-700));
  color:#fff; display:grid; place-items:center; text-align:center;
  box-shadow:0 12px 24px rgba(30,64,175,.34), inset 0 0 0 3px rgba(255,255,255,.35);
  transform:rotate(-9deg); line-height:1.1; z-index:3;
}
.seal__t{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-indent:.14em; }
.seal__m{ display:block; font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; white-space:nowrap; margin-top:1px; }
.seal__m em{ font-style:normal; font-size:19px; letter-spacing:-.02em; }
.seal__m i{ font-style:normal; font-size:11px; margin-left:1px; }
@media(max-width:420px){
  .seal{ width:66px; height:66px; right:8px; top:-14px; }
  .seal__t{ font-size:9.5px; }
  .seal__m em{ font-size:16.5px; }
  .seal__m i{ font-size:10px; }
}

.letter__label{ font-size:12px; font-weight:700; color:var(--blue-700); letter-spacing:.16em; text-indent:.16em; }
.letter__title{ margin-top:8px; font-size:clamp(26px,7.4vw,38px); line-height:1.35; color:var(--ink); letter-spacing:.06em; }
.ornament{ display:flex; align-items:center; justify-content:center; gap:11px; color:#9CC0F5; margin-top:12px; }
.ornament::before,.ornament::after{ content:""; width:min(64px,16vw); height:1px; background:currentColor; }
.ornament span{ width:7px; height:7px; background:currentColor; transform:rotate(45deg); }
.letter__body{
  margin:18px auto 0; max-width:500px; text-align:left;
  color:var(--ink-soft); font-size:clamp(14.5px,3.9vw,16px); line-height:2;
}
.letter__body p + p{ margin-top:10px; }

.perf{
  position:relative; margin:22px -22px 18px; height:1px;
  background:repeating-linear-gradient(90deg,var(--sky-line-2) 0 7px,transparent 7px 14px);
}
.perf::before,.perf::after{
  content:""; position:absolute; top:-8px; width:16px; height:16px; border-radius:50%;
  background:var(--sky); box-shadow:inset 0 1px 2px rgba(30,64,175,.12);
}
.perf::before{ left:-8px; } .perf::after{ right:-8px; }
@media(max-width:360px){ .perf{ margin-left:-16px; margin-right:-16px; } }

.from{ display:flex; align-items:center; justify-content:center; gap:12px; text-align:left; }
.from img{
  width:50px; height:50px; border-radius:50%; object-fit:cover; object-position:50% 18%;
  border:2.5px solid #fff; box-shadow:var(--sh-sm); flex:0 0 auto;
}
.from p{ font-size:11.5px; color:var(--text-mute); line-height:1.6; font-weight:600; letter-spacing:.02em; }
.from b{ display:block; font-size:15.5px; color:var(--ink); font-weight:800; letter-spacing:.04em; }

.survey{ padding:30px 0 70px; }
.q{
  position:relative; margin-top:18px;
  background:var(--white); border:1px solid var(--sky-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:24px 18px 22px;
  scroll-margin-top:76px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.q.is-done{ border-color:var(--sky-line-2); }
.q.is-err{ border-color:#F0A9A3; box-shadow:0 0 0 3px rgba(194,38,29,.08); }
@media(max-width:360px){ .q{ padding:22px 14px 20px; } }

.q__head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.q__no{
  display:grid; place-items:center; flex:0 0 auto;
  width:38px; height:38px; border-radius:50%;
  background:var(--sky); color:var(--blue-700);
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:15px; letter-spacing:0;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.q.is-done .q__no{ background:var(--blue); color:#fff; }
.tag{
  display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:.06em;
  border-radius:999px; padding:3px 10px; line-height:1.5;
}
.tag--req{ color:#fff; background:var(--blue-700); }
.tag--opt{ color:var(--text-mute); background:#EEF1F6; }
.tag--how{ color:var(--blue-700); background:var(--sky-2); border:1px solid var(--sky-line); }
.q__ttl{
  font-size:clamp(16px,4.3vw,18px); font-weight:800; color:var(--ink); line-height:1.7;
  letter-spacing:.01em; display:block;
}
.q--name .q__no svg{ width:18px; height:18px; }
.q__hint{ margin:-4px 0 12px 48px; font-size:13px; color:var(--text-mute); line-height:1.6; }
.q--name .q__head{ margin-bottom:8px; }
@media(max-width:374px){ .q__hint{ margin-left:0; } }
.q__err{
  display:none; margin-top:12px; font-size:13px; font-weight:700; color:var(--err);
  background:var(--err-bg); border-radius:var(--r-sm); padding:8px 12px; line-height:1.6;
}
.q.is-err .q__err{ display:block; }

.scale{ margin-top:16px; }
.scale__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
@media(min-width:600px){ .scale__grid{ grid-template-columns:repeat(10,1fr); gap:6px; } }
.pt{ position:relative; display:block; }
.pt input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.pt span{
  display:grid; place-items:center; height:52px; border-radius:14px;
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:19px; color:var(--ink);
  background:var(--sky-2); border:1.5px solid var(--sky-line);
  box-shadow:inset 0 -2px 0 rgba(30,64,175,.06);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  user-select:none;
}
.pt:hover span{ border-color:#9CC0F5; }
.pt input:focus-visible + span{ outline:3px solid var(--blue); outline-offset:2px; }
.pt input:checked + span{
  color:#fff; border-color:var(--blue-600);
  background:linear-gradient(170deg,#3B82F6,var(--blue-600) 70%);
  box-shadow:0 8px 16px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(-2px);
}
.scale__ends{
  display:flex; justify-content:space-between; gap:12px; margin-top:12px;
  font-size:12px; font-weight:700; color:var(--text-mute); line-height:1.5;
}
.scale__ends span{ display:flex; align-items:center; gap:6px; }
.scale__ends b{
  display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 4px; border-radius:7px;
  background:var(--sky); color:var(--blue-700);
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-size:13px;
}
.scale__ends span:last-child{ text-align:right; }

.opts{ display:grid; gap:9px; margin-top:16px; }
.opt{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:54px; padding:12px 14px;
  background:var(--white); border:1.5px solid var(--sky-line); border-radius:16px;
  cursor:pointer; line-height:1.6; font-size:15px; font-weight:600; color:var(--text);
  transition:background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.opt input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.opt:hover{ border-color:#9CC0F5; }
.opt__box{
  flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px;
  border:2px solid #A9C2EC; border-radius:7px; background:#fff; color:#fff;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.opt--radio .opt__box{ border-radius:50%; }
.opt__box svg{ width:15px; height:15px; opacity:0; transform:scale(.6); transition:opacity .18s, transform .18s var(--ease); }
.opt--radio .opt__box::after{
  content:""; width:10px; height:10px; border-radius:50%; background:#fff;
  opacity:0; transform:scale(.4); transition:opacity .18s, transform .18s var(--ease);
}
.opt input:checked ~ .opt__box{ background:var(--blue); border-color:var(--blue); }
.opt input:checked ~ .opt__box svg,
.opt input:checked ~ .opt__box::after{ opacity:1; transform:scale(1); }
.opt input:focus-visible ~ .opt__box{ outline:3px solid var(--blue); outline-offset:2px; }
.opt:has(input:checked){
  background:var(--sky-2); border-color:var(--blue);
  box-shadow:0 6px 14px rgba(37,99,235,.10);
}
.opt:has(input:checked) .opt__tx{ color:var(--ink); }
.opt--none{ border-style:dashed; }

.other{ margin-top:2px; padding:4px 0 2px; }
.other[hidden]{ display:none; }
.other label{ display:block; font-size:12.5px; font-weight:700; color:var(--blue-700); margin:0 0 6px 4px; }

.field{
  width:100%; display:block;
  font:inherit; font-size:16px; line-height:1.8; color:var(--text);
  background:var(--sky-2); border:1.5px solid var(--sky-line); border-radius:16px;
  padding:12px 14px; resize:vertical;
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.field::placeholder{ color:#7F8BA3; }
.field:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.14); }
textarea.field{ min-height:150px; }
input.field{ min-height:52px; }
.counter{ margin-top:6px; text-align:right; font-size:11.5px; color:var(--text-mute); }

.submit-area{
  position:relative; margin-top:30px;
  background:var(--white); border:1px solid var(--sky-line); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:26px 18px 24px; text-align:center;
}

.teaser{
  position:relative; display:flex; align-items:center; gap:14px; text-align:left;
  background:linear-gradient(160deg,#FFF8F1 0%,var(--warm-bg) 100%);
  border:1.5px solid var(--warm-line); border-radius:18px;
  box-shadow:0 8px 18px rgba(176,73,15,.10), inset 0 -3px 0 rgba(176,73,15,.06);
  padding:16px 16px 16px 14px; margin-bottom:22px; overflow:hidden;
}
.teaser::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--warm),#FFB37F);
}
.teaser__ic{
  flex:0 0 auto; display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:#fff; color:var(--warm-ink); border:1.5px solid var(--warm-line);
  box-shadow:0 4px 10px rgba(176,73,15,.12);
}
.teaser__ic svg{ width:30px; height:30px; }
.teaser__tx{ min-width:0; }
.teaser__lb{ font-size:12px; font-weight:800; color:var(--warm-ink); letter-spacing:.08em; line-height:1.5; }
.teaser__main{ margin-top:3px; font-size:clamp(14.5px,3.9vw,16px); font-weight:800; color:var(--ink); line-height:1.65; }
.teaser__em{ background:linear-gradient(transparent 60%, rgba(255,205,74,.7) 60%); padding:0 .04em; }
@media(max-width:374px){ .teaser{ padding:14px 14px 14px 16px; } .teaser__ic{ display:none; } }

.ts-wrap{ display:flex; justify-content:center; min-height:65px; margin:0 auto 16px; }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:420px; min-height:62px; padding:16px 24px;
  border-radius:999px; font-weight:800; font-size:clamp(16px,4.4vw,18px); letter-spacing:.04em; line-height:1.3;
  text-decoration:none; text-align:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn svg{ flex:0 0 auto; width:22px; height:22px; }
.btn:active{ transform:translateY(1px); }
.btn--blue{
  color:#fff;
  background:linear-gradient(170deg,#3B82F6 0%,var(--blue) 38%,var(--blue-600) 78%,var(--blue-700) 100%);
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.14);
  text-shadow:0 1px 2px rgba(14,42,102,.35);
}
.btn--blue:hover{ filter:brightness(1.06); }
.btn[disabled], .btn[aria-disabled="true"]{ cursor:wait; filter:saturate(.6) brightness(1.05); box-shadow:none; transform:none; }
.btn .spin{
  display:none; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .8s linear infinite;
}
.btn.is-sending .spin{ display:inline-block; }
.btn.is-sending .ic-send{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-msg{
  display:none; margin:16px auto 0; max-width:420px; text-align:left;
  font-size:13.5px; font-weight:700; color:var(--err); line-height:1.7;
  background:var(--err-bg); border:1px solid #F6C8C3; border-radius:var(--r-sm); padding:10px 14px;
}
.form-msg.show{ display:block; }
.privacy{ margin-top:16px; font-size:11.5px; color:var(--text-mute); line-height:1.8; text-align:left; }

.sending-ov{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px;
  background:rgba(244,248,255,.82);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.sending-ov__card{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  background:#fff; border:1px solid var(--sky-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:26px 28px; max-width:320px;
}
.sending-ov__card p{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.7; }
.sending-ov__spin{
  width:40px; height:40px; border-radius:50%;
  border:4px solid var(--sky); border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .sending-ov__spin{ animation:spin 1.6s linear infinite!important; } }

.site-foot{ padding:28px 0 34px; text-align:center; border-top:1px solid var(--sky-line); background:#fff; }
.site-foot b{ display:block; font-size:15px; color:var(--ink); letter-spacing:.06em; }
.site-foot small{ display:block; margin-top:6px; font-size:11px; color:var(--text-mute); letter-spacing:.04em; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; }
}