/* サポート・プライバシーポリシーのページ。docs/デザインルール.md（伊藤さん）に合わせる：
   書体はヒラギノ丸ゴ ProN W4 だけ（webフォントなし）・太字なし（強弱は大きさ・字間・色）・
   余白は 4/8/12/16/24/32・角丸は 12/16/20・見出し teal／本文 muted */
:root{
  --mint:#E0F2EB; --cream:#FCF5E6; --paper:#FFFFFF; --teal:#115A57; --muted:#4E6B68; --line:#B9D6CC;
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(180deg,var(--mint) 0%,var(--mint) 55%,var(--cream) 100%) fixed; color:var(--muted);
  font-family:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN",sans-serif; font-weight:400; font-synthesis:none;
  font-variant-numeric:tabular-nums; font-size:16px; line-height:1.85;
  padding-inline:16px; word-break:keep-all; overflow-wrap:anywhere; line-break:strict;
}
main{max-width:720px; margin:0 auto; padding:32px 0 24px}
.back{display:inline-flex; align-items:center; gap:8px; color:var(--teal); text-decoration:none; font-size:14px; letter-spacing:.04em}
.back img{width:28px; height:auto}
h1{font-weight:400; font-size:clamp(28px,7vw,36px); line-height:1.3; letter-spacing:.06em; color:var(--teal); margin:16px 0 4px; text-wrap:balance}
.meta{color:var(--muted); font-size:14px; margin:0 0 24px}
section{background:var(--paper); border:1.5px solid var(--line); border-radius:20px; padding:16px 24px; margin-top:16px}
h2{font-weight:400; font-size:19px; line-height:1.3; letter-spacing:.04em; color:var(--teal); margin:4px 0 8px}
p{margin:0 0 8px} p:last-child{margin-bottom:0}
ul,ol{margin:4px 0 8px; padding-left:1.3em} li{margin:4px 0}
a{color:var(--teal); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}
.mail{font-size:20px; letter-spacing:.02em}
footer{max-width:720px; margin:32px auto 0; padding:24px 0 40px; border-top:1.5px solid var(--line); text-align:center; font-size:14px; color:var(--muted); display:flex; flex-direction:column; gap:8px}
footer p{margin:0}
footer nav{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
a:focus-visible{outline:2px solid var(--teal); outline-offset:4px; border-radius:4px}
.em{color:var(--teal)}

/* サポートの入口：アイコン・名前・ひとこと／画面3枚 */
.hero{text-align:center; padding:8px 0 8px}
.hero .icon{width:120px; height:120px; border-radius:27px; border:1.5px solid var(--line); display:block; margin:0 auto 16px}
.hero h1{margin:0 0 8px}
.lead{font-size:18px; line-height:1.7; color:var(--teal); margin:0 0 8px}
.hero .meta{margin:0}
.shots{list-style:none; padding:0; margin:24px 0 8px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.shots li{text-align:center; font-size:13px; color:var(--muted)}
.shots img{display:block; width:100%; height:auto; border-radius:16px; border:1.5px solid var(--line); margin-bottom:8px; background:var(--mint)}
.faq{margin:0}
.faq dt{color:var(--teal); margin-top:12px}
.faq dt:first-child{margin-top:0}
.faq dd{margin:2px 0 0}