/* アセトモ 公開サイト v2（案5 縦書き型）。JavaScript なし。 */
:root{ --bg:#FFFFFF; --fg:#1A1A1A; --mute:#6E6E6A; --acc:#165E83; --line:#E4E4E1;
  --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","BIZ UDPGothic","Noto Sans JP",sans-serif;
  --pad:clamp(20px, 6vw, 96px); --ppad:clamp(20px, 5vw, 40px); }
*{ box-sizing:border-box }
@media (min-width:768px){ body{ line-height:1.9 } }
html{ background:var(--bg); color:var(--fg); -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.8; letter-spacing:.02em; line-break:strict; text-spacing-trim:trim-start }
.serif{ font-family:var(--serif); font-weight:400 }
a{ color:inherit; text-decoration:underline; text-decoration-color:var(--acc); text-decoration-thickness:1.5px; text-underline-offset:4px }
a:focus-visible, .btn:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }
.skip{ position:absolute; left:-999px; top:8px; z-index:10; background:var(--bg); padding:8px 12px }
.skip:focus{ left:8px }

header.site{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 16px; min-height:64px; padding:0 var(--pad) }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--serif); font-size:18px; letter-spacing:.08em; min-height:44px }
.brand svg{ width:26px; height:26px; flex:none }
header.site nav{ display:flex; gap:4px }
header.site nav a{ text-decoration:none; font-size:13px; color:var(--mute); padding:12px 8px; min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center }
header.site nav a[aria-current]{ color:var(--fg) }
header.site nav a:hover{ color:var(--fg) }

/* ファーストビュー */
.fv{ display:grid; grid-template-columns:1fr; gap:32px; padding:24px var(--pad) 40px }
.fv .title{ display:flex; flex-direction:row-reverse; justify-content:flex-start; align-items:flex-start; gap:28px }
h1.tate{ writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--serif); font-weight:400; font-size:clamp(32px, 4.5vw, 40px); line-height:1.9; letter-spacing:.12em; margin:0 }
h1.tate span{ display:block; white-space:nowrap }
.sig{ writing-mode:vertical-rl; font-family:var(--serif); font-size:14px; color:var(--mute); letter-spacing:.2em; margin:8px 0 0; white-space:nowrap }
.fv .intro{ max-width:36em }
.status{ font-size:14px; color:var(--mute); letter-spacing:.08em; margin:0 0 12px }
.lead{ font-size:17px; margin:0 0 12px }
.calm{ font-family:var(--serif); font-size:clamp(19px, 6vw, 22px); line-height:1.6; letter-spacing:.06em; margin:0 0 12px }
.ok{ list-style:none; padding:0; margin:0 0 28px; font-size:15px; color:var(--mute) }
.ok li{ display:inline; margin-right:14px }
.ok li::before{ content:"・"; color:var(--acc) }
.recall{ font-family:var(--serif); font-size:18px; line-height:2; max-width:22em; margin:0 0 12px }
.prose .recall{ margin-top:4px }
.first{ font-size:16px; margin:0 0 32px }
.words{ list-style:none; padding:0; margin:0 0 24px; font-family:var(--serif) }
.words li{ font-size:20px; line-height:1.7; margin:0 0 8px }
.btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border:1.5px solid var(--acc); color:var(--fg); text-decoration:none; letter-spacing:.08em }
.btn:hover{ background:var(--acc); color:#fff }
.cta{ margin:4px 0 0 }
.hint{ font-size:15px; color:var(--mute); margin:0 0 16px }
@media (min-width:768px){
  .fv{ grid-template-columns:3fr 2fr; gap:48px; min-height:72vh; min-height:72svh; padding-top:40px }
  .fv .title{ order:2; flex-direction:column; align-items:flex-end; justify-content:space-between; padding-top:32px }
  .fv .intro{ order:1; align-self:center; padding-bottom:32px }
  .sig{ margin-top:auto }
}
@media (max-width:359px){ .calm{ font-size:18px; letter-spacing:.03em } .btn{ width:100%; justify-content:center; padding:0 12px } .lead{ font-size:16px } }
@media (max-height:560px){ h1.tate{ writing-mode:horizontal-tb; max-height:none; font-size:28px; line-height:1.5 } .sig{ writing-mode:horizontal-tb } .fv .title{ flex-direction:column; align-items:flex-start } }

/* 本文 */
main:focus{ outline:none }
.prose{ max-width:600px; margin:0 auto; padding:0 var(--ppad) }
.mail{ overflow-wrap:anywhere }
h1.yoko, h2{ font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.5; letter-spacing:.08em; margin:72px 0 20px; word-break:auto-phrase }
.legal h2{ margin-top:56px }
h1.yoko{ margin-top:48px }
h3{ font-size:17px; font-weight:500; margin:32px 0 8px }
p{ margin:0 0 20px }
.meta{ font-size:14px; color:var(--mute); margin:0 0 32px }
ol, ul{ padding-left:1.4em; margin:0 0 20px } li{ margin:0 0 8px }
ol.steps li{ margin:0 0 12px }
li.note{ list-style:none; margin-left:-1.4em; padding-left:1.4em; font-size:15px; color:var(--mute) }
nav.toc ol{ list-style:none; padding:0; margin:0 0 40px } nav.toc li{ margin:0 } nav.toc a{ text-decoration:none; display:flex; align-items:center; min-height:44px; padding:4px 0 } nav.toc a:hover{ text-decoration:underline }
table{ width:100%; border-collapse:collapse; margin:0 0 24px }
th, td{ text-align:left; vertical-align:top; padding:12px 8px 12px 0; border-bottom:1px solid var(--line) }
th{ width:34%; color:var(--mute); font-weight:500; font-size:15px }
tr:first-child th, tr:first-child td{ border-top:1px solid var(--line) }
@media (max-width:479px){ table, tbody, tr, th, td{ display:block; width:auto } th{ border:0; padding:12px 0 0 } td{ border-top:0; padding:2px 0 12px } tr:first-child th{ border-top:1px solid var(--line) } }
.sig-h{ font-family:var(--serif); font-size:18px; letter-spacing:.1em; margin-top:24px }

footer.site{ max-width:600px; margin:96px auto 0; padding:32px var(--ppad) 64px; font-size:14px; color:var(--mute) }
footer.site nav{ display:flex; flex-wrap:wrap; gap:0 8px; margin:0 0 12px }
footer.site nav a{ text-decoration:none; color:var(--fg); padding:10px 8px 10px 0; min-height:44px; display:inline-flex; align-items:center }
footer.site nav a:hover{ text-decoration:underline }
footer.site p{ margin:0 0 4px }
@media print{ :root{ --bg:#fff; --fg:#000; --acc:#000 } header.site nav, footer.site nav{ display:none } a{ text-decoration:none } .fv{ display:block; min-height:0 } h1.tate, .sig{ writing-mode:horizontal-tb } h1.tate span{ display:inline } }