/* kyujincheck.shop: front page and /questions/ — warm paper, indigo ink, a red seal */
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#fbf5ea;--paper-d:#f3e8d4;--card:#fffdf8;--ink:#20263a;--sub:#4b5266;--mute:#6b7083;
  --indigo:#23408e;--indigo-d:#192f6c;--indigo-l:#e5eaf6;--seal:#c8372d;--seal-l:#fbe9e5;
  --ok:#1d6f47;--ok-l:#e3f1e8;--line:#e6dcc8;
  --round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;font-size:16px;line-height:1.85;letter-spacing:.03em}
a{color:var(--indigo)}
h1,h2,h3,.r{font-family:var(--round);font-weight:700}
.in{max-width:1140px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:12px 28px;border-radius:18px;background:var(--indigo);color:#fff;font-family:var(--round);font-weight:700;font-size:1.0625rem;text-decoration:none;letter-spacing:.06em;box-shadow:0 4px 0 var(--indigo-d)}
.btn:hover{background:var(--indigo-d);color:#fff}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--indigo-d)}
.btn svg{width:18px;height:18px}

/* nav */
nav.top{position:sticky;top:0;z-index:5;background:rgba(251,245,234,.95);border-bottom:2px dashed var(--line)}
nav.top .in{display:flex;align-items:center;gap:4px;min-height:62px;padding:0 12px}
.brand{display:flex;align-items:center;gap:7px;margin-right:auto;color:var(--ink);text-decoration:none;font-family:var(--round);font-weight:700;font-size:.9375rem;letter-spacing:.01em;white-space:nowrap;min-height:44px}
.brand img{width:30px;height:30px;border-radius:9px}
.login{color:var(--sub);text-decoration:none;font-size:.875rem;padding:8px 8px;border-radius:12px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.login:hover{background:var(--paper-d);color:var(--indigo)}
nav.top .btn{min-height:44px;padding:6px 13px;font-size:.875rem;border-radius:14px;box-shadow:0 3px 0 var(--indigo-d);letter-spacing:.02em}
@media (min-width:600px){nav.top .in{padding:0 20px;gap:10px}.brand{font-size:1.0625rem;gap:10px}.brand img{width:36px;height:36px}.login{font-size:.9375rem;padding:8px 12px}nav.top .btn{padding:8px 18px;font-size:.9375rem}}

/* header */
header.hero{position:relative;overflow:hidden;padding:22px 0 36px}
header.hero::before{content:"";position:absolute;left:50%;top:-40px;width:1500px;height:620px;transform:translateX(-50%);background:radial-gradient(closest-side,#f1e3c9 0,rgba(241,227,201,0) 100%);pointer-events:none}
.hero .in{position:relative;text-align:center}
.hero h1{font-size:clamp(1.75rem,6.6vw,2.875rem);line-height:1.45;letter-spacing:.04em;margin:0 auto 12px;word-break:keep-all;overflow-wrap:anywhere}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,#f6c9bf 62%,#f6c9bf 92%,transparent 92%)}
.sub{color:var(--sub);font-size:.9375rem;line-height:1.8;margin:0 auto 18px;max-width:46em;text-align:left}
.cta{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 auto 24px;max-width:420px}
.nocard{margin:0;font-size:.875rem;color:var(--sub)}
.nocard b{color:var(--seal)}
.deco{display:none}
@media (min-width:640px){.sub{text-align:center;font-size:1.0625rem}.cta{flex-direction:row;align-items:center;justify-content:center;gap:18px;max-width:none}}
@media (min-width:1000px){
  header.hero{padding:34px 0 34px}
  .hero h1{margin-bottom:10px}
  .deco{display:block;position:absolute;width:124px;height:auto}
  .deco.cal{left:24px;top:76px;transform:rotate(-6deg)}
  .deco.seal{right:30px;top:72px;transform:rotate(8deg);width:112px}
}

/* the product, as it runs */
.shot{position:relative;margin:0 auto;max-width:960px;max-height:480px;overflow:hidden;text-align:left;background:var(--card);border:2px solid #e3d6bd;border-radius:30px;box-shadow:0 18px 40px -22px rgba(64,46,16,.35);font-size:.9375rem}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(rgba(255,253,248,0),var(--card) 85%);pointer-events:none}
.shot-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--indigo-l);font-size:.8125rem;color:var(--indigo-d);font-weight:700}
.shot-bar img{width:22px;height:22px;border-radius:7px}
.shot-bar .tag{margin-left:auto;background:#fff;border-radius:10px;padding:0 10px;font-weight:500;color:var(--mute)}
.shot-b{padding:16px 18px 30px;display:grid;gap:4px 28px}
.shot h2{font-size:1rem;line-height:1.5;margin:0 0 6px}
.read{font-size:.8125rem;line-height:1.6;padding:0 0 10px;margin:0 0 10px;color:var(--sub);border-bottom:1.5px dashed var(--line)}
.pay{display:flex;align-items:baseline;gap:6px;margin:0 0 8px}
.pay b{font-family:var(--round);font-size:1.875rem;line-height:1.2}
.pay small{color:var(--mute);font-size:.8125rem}
.wl{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:14px;padding:8px 13px;margin:0 0 6px;font-size:.875rem;line-height:1.5}
.wl.ok{background:var(--ok-l)}
.wl.bad{background:var(--seal-l)}
.wl small{display:block;font-size:.75rem;color:var(--sub)}
.wl em{font-style:normal;font-weight:800;white-space:nowrap}
.wl.ok em{color:var(--ok)}
.wl.bad em{color:#a8261d}
.fix{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--indigo-l);border-radius:14px;padding:8px 13px;margin:8px 0 12px;font-size:.8125rem}
.fix i{font-style:normal;font-size:.75rem;color:var(--indigo);background:#fff;border-radius:9px;padding:2px 9px;white-space:nowrap}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1.5px dashed var(--line);font-size:.875rem;line-height:1.5}
.items li:first-child{padding-top:2px}
.items .no{color:#a8261d;font-weight:700;font-size:.8125rem;white-space:nowrap}
.items .yes{color:var(--ok);font-weight:700;font-size:.8125rem;white-space:nowrap}
.items .sugg{display:block;margin-top:3px;font-size:.75rem;color:var(--sub)}
.shot-f{margin:0;font-size:.8125rem;color:var(--sub)}
@media (min-width:860px){
  .shot{max-height:430px}
  .shot-b{grid-template-columns:1fr 1.1fr;padding:18px 24px 30px}
  .shot-b .col2{padding-left:24px;border-left:1.5px dashed var(--line)}
}

/* sections */
section{padding:40px 0}
@media (min-width:860px){section{padding:76px 0}}
.kick{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--round);font-weight:700;font-size:.875rem;color:var(--seal)}
.kick::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--seal)}
h2.t{font-size:clamp(1.375rem,4.6vw,2rem);line-height:1.5;letter-spacing:.04em;margin:0 0 22px}
.center{text-align:center}

/* how */
#how{background:var(--card);border-radius:44px 44px 0 0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:74px 1fr;gap:4px 14px;align-items:start;background:var(--paper);border-radius:28px;padding:16px 18px}
.steps svg{grid-row:span 2;width:74px;height:74px}
.steps h3{font-size:1.0625rem;line-height:1.5;margin:4px 0 2px}
.steps h3::before{content:counter(s) ". ";color:var(--seal)}
.steps p{margin:0;font-size:.9375rem;line-height:1.75;color:var(--sub)}
@media (min-width:860px){
  .steps{grid-template-columns:repeat(3,1fr);gap:20px}
  .steps li{grid-template-columns:1fr;text-align:center;padding:28px 26px;border-radius:36px}
  .steps svg{grid-row:auto;width:104px;height:104px;margin:0 auto 6px}
  .steps p{text-align:left}
}

/* what: the watch on the date */
#what{background:var(--indigo);color:#fff;border-radius:44px}
#what .kick{color:#f7c6bd}
#what .kick::before{background:#f7c6bd}
#what h2.t{color:#fff}
#what .lead{margin:0 0 24px;color:#dbe2f4;max-width:40em}
#what .lead a{color:#fff}
.watch{display:grid;gap:18px}
.timeline{padding:4px 0 0}
.timeline ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;position:relative}
.timeline ol::before{content:"";position:absolute;left:12%;right:12%;top:21px;height:3px;background:rgba(255,255,255,.35);border-radius:2px}
.timeline li{position:relative;font-size:.75rem;line-height:1.5;color:#dbe2f4}
.timeline b{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 6px;border-radius:50%;background:#fff;color:var(--indigo);font-family:var(--round);font-size:.8125rem;position:relative}
.timeline li:last-child b{background:var(--seal);color:#fff;box-shadow:0 0 0 5px rgba(200,55,45,.3)}
.timeline li span{display:block;font-weight:700;color:#fff;font-size:.8125rem}
.timeline p{margin:12px 0 0;font-size:.8125rem;color:#dbe2f4;text-align:center}
.mail{background:var(--card);color:var(--ink);border-radius:30px;padding:20px 20px 18px;position:relative;font-size:.9375rem}
.mail .from{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--mute);margin:0 0 8px}
.mail .from img{width:22px;height:22px;border-radius:7px}
.mail .from .tag{margin-left:auto;background:var(--paper-d);border-radius:10px;padding:0 10px;color:#4b5266}
.mail h3{font-size:1.0625rem;line-height:1.55;margin:0 0 10px}
.mail p{margin:0 0 10px;line-height:1.8}
.mail .fix{margin:0 0 10px}
.mail small{display:block;color:var(--mute);font-size:.75rem;line-height:1.6}
.quote{margin:0;font-size:.8125rem;color:#dbe2f4;line-height:1.7}
.quote a{color:#fff}
@media (min-width:860px){.watch{grid-template-columns:1fr 1.15fr;gap:28px;align-items:start}.timeline{padding:12px 0 0}.timeline b{width:52px;height:52px;font-size:.875rem}.timeline ol::before{top:25px}.timeline li{font-size:.8125rem}.mail{padding:26px 28px 22px}}

/* price + faq */
.pf{display:grid;gap:22px}
@media (min-width:900px){.pf{grid-template-columns:5fr 7fr;gap:36px;align-items:start}}
.plan{background:var(--card);border:2px solid #e3d6bd;border-radius:36px;padding:28px 24px;text-align:center;position:relative}
.plan .name{margin:0;font-family:var(--round);font-weight:700;color:var(--sub)}
.plan .amt{margin:4px 0 0;font-family:var(--round);font-weight:700;font-size:3rem;line-height:1.2;color:var(--indigo)}
.plan .amt small{font-size:1rem;color:var(--sub);margin-left:4px}
.plan .tax{margin:2px 0 16px;font-size:.8125rem;color:var(--mute)}
.plan ul{list-style:none;margin:0 0 22px;padding:0;text-align:left;display:grid;gap:6px}
.plan li{position:relative;padding-left:1.7em;font-size:.9375rem;line-height:1.7}
.plan li::before{content:"";position:absolute;left:0;top:.42em;width:1.05em;height:1.05em;border-radius:50%;background:var(--indigo-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%2323408e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.plan .btn{width:100%}
.plan .note{margin:10px 0 0;font-size:.875rem;color:var(--sub)}
.plan .stamp{position:absolute;right:-6px;top:-14px;width:68px;height:68px;transform:rotate(10deg)}
#faq h3{font-size:1.125rem;margin:0 0 10px}
.qa{margin:0}
.qa dt{font-weight:700;line-height:1.6;padding-left:1.9em;position:relative;margin:0 0 4px}
.qa dt::before{content:"Q";position:absolute;left:0;top:0;width:1.45em;height:1.45em;border-radius:50%;display:grid;place-items:center;background:var(--indigo);color:#fff;font-family:var(--round);font-size:.8125rem;line-height:1;margin-top:.2em}
.qa dd{margin:0 0 16px;padding:0 0 16px 1.9em;color:var(--sub);font-size:.9375rem;line-height:1.8;border-bottom:1.5px dashed var(--line)}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;font-family:var(--round)}
.more:hover{text-decoration:underline}

/* band */
.band{padding:0 0 44px}
.band .in>div{background:var(--paper-d);border-radius:40px;padding:28px 22px;text-align:center}
.band h2{font-size:clamp(1.25rem,4.2vw,1.75rem);line-height:1.55;margin:0 0 6px}
.band p{margin:0 0 20px;color:var(--sub);font-size:.9375rem}

/* footer */
footer{border-top:2px dashed var(--line);color:var(--mute);font-size:.8125rem}
footer .in{padding-top:24px;padding-bottom:30px;display:grid;gap:8px}
footer a{color:var(--sub)}
.fb{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:space-between}
.syng-legal-links a,.fq{display:inline-block;padding:8px 2px;min-height:44px;line-height:28px}
footer p{margin:0}

/* /questions/ */
.qhead{padding:34px 0 10px;text-align:center}
.qhead h1{font-size:clamp(1.625rem,5.6vw,2.5rem);line-height:1.5;margin:0 0 8px}
.qhead p{margin:0 auto;max-width:40em;color:var(--sub)}
.qbody{padding:28px 0 56px}
.qbody .in{max-width:860px}
.qbody section{padding:0;margin:0 0 22px;background:var(--card);border:2px solid #efe3cc;border-radius:32px;padding:26px 22px}
.qbody h2{font-size:1.25rem;line-height:1.55;margin:0 0 12px}
.qbody p{margin:0 0 12px}
.qbody ul{margin:0 0 12px;padding-left:1.3em}
.qbody li{margin:0 0 4px}
.qbody blockquote{margin:0 0 12px;padding:10px 16px;background:var(--paper);border-radius:18px;font-size:.9375rem;color:var(--sub)}
.qbody blockquote cite{display:block;font-style:normal;font-size:.8125rem}
.qbody cite a{display:inline-block;padding:12px 0}
.new{font-size:.75rem;font-weight:700;color:var(--seal);border:1px solid #efc2bd;border-radius:6px;padding:0 5px;margin-left:4px;white-space:nowrap}
@media (min-width:860px){.qbody section{padding:32px 36px}}
