/* hayamimi.shop — front page and /questions/ (dark, "morning registry ledger") */
:root{
  --bg:#0A0E12;
  --bg2:#0F151B;
  --panel:#121B23;
  --line:rgba(232,237,241,.10);
  --line2:rgba(232,237,241,.18);
  --ai:#165E83;          /* 藍色 */
  --ai-hi:#5AAAD6;       /* accent on dark, for text and thin lines */
  --ai-glow:rgba(22,94,131,.45);
  --text:#E8EDF1;
  --muted:#A3B0BB;
  --warn:#E7A35A;
  --ok:#7CC6A0;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.75;letter-spacing:.02em;font-feature-settings:"palt"}
a{color:var(--ai-hi)}
a:hover{color:#8CC8EA}
img{display:block}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.num,.mono{font-family:var(--mono);letter-spacing:0}
.nw{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;background:var(--ai);color:#fff;font-weight:700;font-size:16px;text-decoration:none;border:1px solid #2C7FAA;border-radius:6px;white-space:nowrap;transition:background .15s}
.btn:hover{background:#1B6D98;color:#fff}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ai-hi);outline-offset:3px}
.btn svg{flex:none}

/* nav */
nav.top{position:sticky;top:0;z-index:10;background:rgba(10,14,18,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.brand{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--text);text-decoration:none;font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:0;white-space:nowrap}
.brand img{border-radius:7px;width:28px;height:28px}
nav.top .act{display:flex;align-items:center;gap:4px}
nav.top .login{color:var(--text);text-decoration:none;font-size:14px;padding:0 8px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
nav.top .login:hover{color:var(--ai-hi)}
nav.top .btn{min-height:44px;padding:0 12px;font-size:14px}

/* header */
header.hero{position:relative;padding:36px 0 0;overflow:hidden;border-bottom:1px solid var(--line)}
header.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:#0D1820;border-top:1px solid rgba(22,94,131,.55)}
header.hero .wrap{position:relative}
.stamp{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--mono);font-size:13px;color:var(--ai-hi);letter-spacing:.04em}
.stamp i{display:inline-block;width:28px;height:1px;background:var(--ai-hi)}
h1{margin:0;font-weight:900;font-size:34px;line-height:1.28;letter-spacing:.01em}
h1 .em{color:var(--ai-hi)}
.hero .sub{margin:18px 0 0;color:var(--muted);font-size:15.5px;line-height:1.85;max-width:620px}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:22px 0 0}
.hero .cta .note{font-size:14px;color:var(--muted)}

/* product screen: the morning registry ledger */
.screen{position:relative;margin:28px 0 0;max-height:440px;overflow:hidden;background:linear-gradient(180deg,#14212B 0%,#0F1820 100%);border:1px solid #23435A;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom,rgba(10,14,18,0),var(--bg) 92%);pointer-events:none}
.screen .bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;border-bottom:1px solid rgba(90,170,214,.18);font-size:13px;color:var(--muted)}
.screen .bar b{color:var(--text);font-size:15px}
.screen .bar img{border-radius:5px}
.screen .bar .sample{font-size:12px;color:var(--warn);border:1px solid rgba(231,163,90,.45);border-radius:3px;padding:0 6px;line-height:20px}
.screen .bar .when{margin-left:auto;font-family:var(--mono);font-size:12.5px}
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:14px 16px;border-bottom:1px solid rgba(232,237,241,.07)}
.ledger .tag{grid-row:1;align-self:center}
.ledger .date{grid-row:1;grid-column:2;justify-self:end;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ledger .co{grid-column:1/-1;font-weight:700;font-size:16px}
.ledger .co small{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--muted);margin-left:8px}
.ledger .chg{grid-column:1/-1;font-size:14px;color:#C9D3DB;line-height:1.6}
.ledger .chg s{text-decoration:none;color:var(--muted)}
.ledger .chg .arr{color:var(--ai-hi);margin:0 6px}
.tag{display:inline-block;font-size:12px;font-weight:700;line-height:22px;padding:0 8px;border-radius:3px;white-space:nowrap;border:1px solid}
.tag.warn{color:var(--warn);border-color:rgba(231,163,90,.5);background:rgba(231,163,90,.08)}
.tag.note{color:var(--ai-hi);border-color:rgba(90,170,214,.5);background:rgba(90,170,214,.08)}
.tag.grey{color:var(--muted);border-color:var(--line2)}
.tag.ok{color:var(--ok);border-color:rgba(124,198,160,.45);background:rgba(124,198,160,.07)}

/* sections */
section{padding:64px 0;border-bottom:1px solid var(--line)}
.label{margin:0 0 10px;font-family:var(--mono);font-size:13px;color:var(--ai-hi);letter-spacing:.06em}
h2{margin:0;font-weight:900;font-size:26px;line-height:1.4;letter-spacing:.01em}
.lead{margin:12px 0 0;color:var(--muted);max-width:640px}

/* how */
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0}
.steps li{position:relative;padding:20px 0 22px 64px;border-top:1px solid var(--line2)}
.steps li::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--ai-hi)}
.steps .n{position:absolute;left:0;top:18px;font-family:var(--mono);font-size:30px;line-height:1;color:var(--ai-hi)}
.steps h3{margin:0;font-size:18px;font-weight:700;line-height:1.5}
.steps p{margin:6px 0 0;color:var(--muted);font-size:15px}

/* what: the morning email */
.what-grid{display:grid;gap:28px}
.clock{margin:22px 0 0;display:flex;align-items:baseline;gap:12px;color:var(--muted);font-size:14px}
.clock b{font-family:var(--mono);font-weight:500;font-size:44px;line-height:1;color:var(--text);letter-spacing:0}
.mail{background:#F3F5F7;color:#1B242C;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -25px rgba(0,0,0,.8)}
.mail .mh{padding:14px 18px;border-bottom:1px solid #DDE3E8;font-size:13px;color:#4A5661;line-height:1.6}
.mail .mh .row{display:flex;gap:8px}
.mail .mh .row span:first-child{width:3.5em;flex:none;color:#55626D}
.mail .mh .subj{margin-top:6px;font-size:16px;font-weight:700;color:#10181F}
.mail .mh .sample{display:inline-block;margin-left:6px;font-size:12px;font-weight:400;color:#8A4E10;border:1px solid #D9A66F;border-radius:3px;padding:0 5px;vertical-align:2px}
.mail .mb{padding:16px 18px 18px;font-size:15px;line-height:1.8}
.mail table{border-collapse:collapse;width:100%;margin:4px 0 14px;font-size:14px}
.mail th{text-align:left;font-weight:700;color:#56636E;width:4.5em;padding:6px 8px 6px 0;vertical-align:top;border-bottom:1px solid #E3E8EC;white-space:nowrap}
.mail td{padding:6px 0;border-bottom:1px solid #E3E8EC}
.mail td.new{color:#0E4D6D;font-weight:700}
.mail .mean{margin:0 0 10px;color:#33414C;font-size:14.5px}
.mail ol{margin:0;padding:0;list-style:none;counter-reset:c}
.mail ol li{counter-increment:c;position:relative;padding:6px 0 6px 34px;border-top:1px dashed #D3DAE0;font-size:14.5px}
.mail ol li::before{content:counter(c);position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:#165E83;color:#fff;font-family:var(--mono);font-size:12px;line-height:22px;text-align:center}
.mail .src{margin:12px 0 0;font-size:12px;color:#4F5C67}

/* price + faq */
.price-grid{display:grid;gap:36px;margin-top:28px}
.plan{position:relative;padding:28px 24px;border:1px solid #2C6B8E;border-radius:12px;background:linear-gradient(180deg,rgba(22,94,131,.22),rgba(22,94,131,.04))}
.plan .pname{margin:0;font-size:14px;color:var(--muted)}
.plan .amount{margin:6px 0 0;font-family:var(--mono);font-weight:500;font-size:52px;line-height:1.1;letter-spacing:-.01em}
.plan .amount small{font-family:var(--sans);font-size:15px;font-weight:400;color:var(--muted);margin-left:6px;letter-spacing:.02em}
.plan ul{list-style:none;margin:18px 0 22px;padding:0}
.plan li{position:relative;padding:7px 0 7px 26px;border-top:1px solid var(--line);font-size:15px}
.plan li::before{content:"";position:absolute;left:3px;top:15px;width:10px;height:6px;border-left:2px solid var(--ai-hi);border-bottom:2px solid var(--ai-hi);transform:rotate(-45deg)}
.plan .btn{width:100%}
.plan .vs{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.7}
#faq h3{margin:0 0 6px;font-size:18px}
details{border-top:1px solid var(--line2)}
details:last-of-type{border-bottom:1px solid var(--line2)}
summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-weight:700;font-size:16px;line-height:1.6}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;border-right:2px solid var(--ai-hi);border-bottom:2px solid var(--ai-hi);transform:rotate(45deg)}
details[open] summary::after{transform:rotate(-135deg);top:28px}
details p{margin:0 0 16px;color:var(--muted);font-size:15px}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:15px}

/* band */
section.band{padding:56px 0;text-align:center;background:#0D1820;border-top:1px solid rgba(22,94,131,.55)}
.band h2{font-size:24px}
.band p{margin:10px 0 22px;color:var(--muted)}

/* footer */
footer.site{padding:36px 0 44px;color:var(--muted);font-size:14px}
footer.site .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
footer.site p{margin:14px 0 0}
footer.site a{display:inline-block;padding:11px 0}
footer.site .syng-legal-links a{padding:12px 6px;min-width:44px;text-align:center}
footer.site .src{font-size:12.5px;line-height:1.8}

/* /questions/ */
.qpage h1{font-size:30px}
.qpage .block{padding:48px 0}
.qlist{margin-top:20px;max-width:820px}
.two{display:grid;gap:24px;margin-top:24px}
.box{padding:22px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2)}
.box h3{margin:0 0 8px;font-size:17px}
.box ul{margin:0;padding-left:1.2em;color:var(--muted);font-size:15px}
.box p{margin:0;color:var(--muted);font-size:15px}
.card dl{display:grid;grid-template-columns:7em 1fr;gap:6px 12px;margin:12px 0;font-size:14.5px}
.card dt{color:var(--muted)}
.card dd{margin:0}
.card ol{list-style:none;margin:14px 0 0;padding:0;border-left:1px solid var(--ai-hi)}
.card ol li{padding:4px 0 10px 16px;font-size:14.5px}
.card time{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ai-hi)}
.card .d{color:var(--muted);font-size:13.5px}
table.compare{width:100%;border-collapse:collapse;margin-top:20px;font-size:14.5px}
table.compare th,table.compare td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
table.compare th{color:var(--muted);font-weight:400;font-size:13px}
table.compare tr.us td{color:var(--text);background:rgba(22,94,131,.18)}
.small{font-size:13px;color:var(--muted)}

/* computer */
@media (min-width:760px){
  .wrap{padding:0 36px}
  header.hero{padding-top:44px}
  h1{font-size:52px;line-height:1.22}
  .hero .row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  .hero .cta{margin:0;flex:none;flex-direction:column;align-items:flex-end;gap:8px}
  .hero .sub{margin-top:20px}
  .screen{margin-top:30px;max-height:400px}
  .ledger li{grid-template-columns:96px minmax(200px,260px) 1fr 120px;gap:0 20px;align-items:center;padding:15px 22px}
  .ledger .tag{grid-row:auto;justify-self:start}
  .ledger .co,.ledger .chg{grid-column:auto}
  .ledger .date{grid-row:auto;grid-column:auto;justify-self:end;order:4}
  .screen .bar{padding:14px 22px}
  section{padding:88px 0}
  h2{font-size:34px}
  .steps{grid-template-columns:repeat(3,1fr);gap:0 36px;margin-top:44px}
  .steps li{padding:64px 0 0}
  .steps .n{top:20px;font-size:32px}
  .what-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:center}
  .price-grid{grid-template-columns:400px 1fr;gap:64px;align-items:start}
  .band h2{font-size:30px}
  .two{grid-template-columns:1fr 1fr}
  .qpage h1{font-size:40px}
}
@media (min-width:1100px){
  h1{font-size:62px}
}