/* ご利用にあたって（about.html）専用。home.css を土台に、読み物用の体裁だけ足す */
.ab-hero{background:var(--washi-2);border-bottom:3px solid var(--ink);
  padding:calc(72px + env(safe-area-inset-top)) 20px 44px}
.ab-title{font-size:clamp(30px,7vw,54px);font-weight:900;letter-spacing:-.03em;
  line-height:1.15;margin:14px 0 10px;color:var(--ink)}
.ab-sub{font-size:clamp(13px,3.2vw,15px);font-weight:700;color:var(--sumi);opacity:.8}
/* ABOUT ラベル：カプセルにせず、プロフィールページの PROFILE ラベルと同じ
   「小文字＋短い下線」だけの表現に揃える */
.ab-kicker{border:0;border-radius:0;padding:0;background:none;display:block;
  font-size:11px;font-weight:800;letter-spacing:.3em;color:var(--ink);opacity:.75}
.ab-kicker::after{content:"";display:block;width:26px;height:3px;
  background:var(--ink);opacity:.6;margin-top:7px}

/* 節。読み物なので上下の余白は本文向けに詰める。
   節と節のあいだに区切り線は引かない。見出し自身の黄色い下線（.ab-h2）だけで区切る。
   注意：home.css の .sec は border-bottom:3px solid var(--ink) を持っている。
   これを打ち消さないと、黒い太線が節のあいだに出てしまう（一度これで誤修正した）。 */
.ab-sec{padding:29px 20px;border-bottom:0}
/* ページ最後の節だけは、フッターとの境目として黒い線を残す */
.ab-sec:last-of-type{border-bottom:3px solid var(--ink)}
.ab-h2{font-size:clamp(19px,4.6vw,26px);font-weight:900;color:var(--ink);
  margin-bottom:16px;padding-bottom:8px;border-bottom:3px solid var(--mustard);display:inline-block}
.ab-h3{font-size:clamp(15px,3.8vw,18px);font-weight:800;color:var(--ink);margin:24px 0 8px}
.ab-p{font-size:clamp(13px,3.4vw,15px);line-height:1.95;color:var(--sumi);margin-bottom:12px}
.ab-p strong{font-weight:800;color:var(--ink)}
.ab-note{font-size:clamp(12px,3.1vw,13.5px);opacity:.78}
.ab-date{font-size:clamp(10.5px,2.7vw,12px);opacity:.62;line-height:1.9;margin:0}
.ab-ul{margin:10px 0 14px;padding-left:1.3em}
.ab-ul li{font-size:clamp(13px,3.4vw,15px);line-height:1.9;color:var(--sumi);margin-bottom:8px}
.ab-ul li strong{font-weight:800;color:var(--ink)}

/* 大事な注意書き。強調は「枠」の1回だけにして、中の文章は落ち着いて読ませる。
   （枠で目立たせたうえに中の一文も黄色くベタ塗りしていて、主張が二重だった） */
.ab-alert{background:var(--washi-1);border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--mustard);padding:20px 18px}
.ab-alert-h{font-size:clamp(16px,4.2vw,21px);font-weight:900;color:var(--ink);
  margin-bottom:12px;line-height:1.4}
.ab-alert p{font-size:clamp(13px,3.4vw,15px);line-height:1.95;color:var(--sumi);margin-bottom:10px}
.ab-alert p:last-child{margin-bottom:0}
.ab-alert strong{font-weight:800;color:var(--ink)}

/* 運営者情報 */
.ab-dl{margin:6px 0 14px}
.ab-dl>div{display:flex;gap:14px;padding:12px 2px}
.ab-dl dt{width:6.5em;flex-shrink:0;font-size:clamp(12px,3.2vw,13.5px);
  font-weight:800;color:var(--ink)}
.ab-dl dd{flex:1;min-width:0;font-size:clamp(13px,3.4vw,15px);color:var(--sumi);
  word-break:break-word}
/* 未記入の項目は、公開前に気づけるよう見た目で分かるようにしておく */
.ab-todo{color:#b0392b;font-weight:800}
.ab-cta{margin-top:20px}

@media (min-width:760px){
  .ab-hero{padding:110px 20px 56px}
  .ab-sec{padding:37px 20px}
  .ab-alert{padding:26px 24px}
}
.ab-p code{background:var(--washi-2);border:1px solid var(--washi-3);
  border-radius:4px;padding:1px 6px;font-size:.92em}

/* 制定・最終更新の日付（本文より控えめに、上下を詰める） */
.ab-sec-date{padding-top:22px;padding-bottom:24px}

/* 本文中のリンク（見出しの黄色い下線と同じ色で、リンクだと分かるようにする） */
.ab-p a,.ab-ul a{
  color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--mustard);
  text-decoration-thickness:3px;text-underline-offset:3px}
.ab-p a:hover,.ab-ul a:hover{text-decoration-color:var(--rust)}
/* 運営者情報のメールアドレスは、まわりの本文と同じ見た目にする（下線・色・太字なし） */
.ab-dl a{color:inherit;font-weight:inherit;text-decoration:none}