/* このサイトについて（v1。2026-11-11）。共通の部品は va.css、決まりは DESIGN.md。クラス名の接頭辞は ab-。
   並び：題名の段 → このサイトは何か（道しるべ）→ 非公式の明記（スタンプ）→ 紹介のしかたの約束（貼り紙6枚）
        → 2羽 → 連絡と取り下げ（#contact。インクの地）→ 運営者（奥付）。
   2026-11-15：データの出典の区画・確認したガイドラインの表・免責事項（プライバシーポリシーへ移した）を外した。
   読み物なので、本文の幅は --readw（760px）を目安にする。演出は見出しとカードの「ぬるっと」だけ。 */

/* 飛び先が、上に貼りつくヘッダーの下に隠れないように（--ab-hd は about.js がヘッダーの高さを入れる） */
main section[id]{scroll-margin-top:calc(var(--ab-hd,60px) - 2px)}

/* ===== 題名の段：9文字の題名がスマホでも1行に入る大きさ。下に、このページの目次（札） ===== */
.ab-ph h1{font-size:clamp(34px,9.2vw,84px)}
.ab-jump{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ab-jump .va-tag{font-size:12.5px;line-height:1.5;padding:4px 10px 3px;border:var(--bd)}
.ab-jump .va-tag::after{content:"↓";margin-left:6px;opacity:.55}

/* ===== 本文（読み物） ===== */
.ab-prose{max-width:var(--readw)}
.ab-prose p{font-size:16px;line-height:2;color:var(--ink2)}
.ab-prose p+p{margin-top:1.05em}
.ab-prose b{font-weight:900;color:var(--ink)}
.ab-what .ab-prose b{background:linear-gradient(transparent 62%,rgba(238,90,54,.34) 62%)}   /* 蛍光ペンの線（ナビの「今いるページ」と同じ） */
.ab-sub{font-family:var(--px);font-weight:400;font-size:13px;line-height:1.5;letter-spacing:.04em;color:var(--mute);margin-bottom:12px}

/* ===== 1. このサイトは何か：左に本文、右に道しるべ（行き先の板が柱に付いている） ===== */
.ab-what{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:30px 76px;align-items:center}
.ab-prose .ab-pull{font-weight:900;font-size:clamp(27px,3.1vw,42px);line-height:1.36;letter-spacing:-.03em;color:var(--ink);font-feature-settings:"palt";margin:2px 0 22px}
.ab-sign{position:relative;display:flex;flex-direction:column;gap:15px;padding:16px 0 26px}
.ab-pole{position:absolute;left:31%;top:0;bottom:0;width:12px;background:var(--ink)}
.ab-pole::before{content:"";position:absolute;left:-5px;right:-5px;top:-6px;height:8px;background:var(--ink)}       /* 柱の頭 */
.ab-pole::after{content:"";position:absolute;left:-26px;right:-26px;bottom:0;height:6px;background:var(--ink)}       /* 足もと */
.ab-board-w{position:relative;width:88%}
.ab-board-w.r{margin-left:12%}
.ab-board{position:relative;display:block;text-decoration:none;color:var(--ink);filter:drop-shadow(4px 4px 0 var(--ink));transition:transform .18s var(--ease),filter .18s}
.ab-board-w.r .ab-board{transform:rotate(-1.3deg)}
.ab-board-w.l .ab-board{transform:rotate(1.1deg)}
/* 板の形（矢印）：外側＝インクの線、内側＝色の面 */
.ab-board::before,.ab-board::after{content:"";position:absolute}
.ab-board::before{inset:0;background:var(--ink)}
.ab-board::after{inset:2px;background:var(--bg,var(--paper2))}
.ab-board-w.r .ab-board::before{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%)}
.ab-board-w.r .ab-board::after{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - .5px) 50%,calc(100% - 25px) 100%,0 100%)}
.ab-board-w.l .ab-board::before{clip-path:polygon(26px 0,100% 0,100% 100%,26px 100%,0 50%)}
.ab-board-w.l .ab-board::after{clip-path:polygon(25px 0,100% 0,100% 100%,25px 100%,.5px 50%)}
.ab-board .tx{position:relative;z-index:1;display:block;padding:11px 44px 12px 20px}
.ab-board-w.l .ab-board .tx{padding:11px 20px 12px 46px}
.ab-board small{display:block;font-family:var(--en);font-weight:800;font-size:9.5px;letter-spacing:.07em;line-height:1.4;opacity:.8}
.ab-board b{display:block;font-weight:900;font-size:21px;line-height:1.3;letter-spacing:-.02em}
.ab-board .d{display:block;font-size:12.5px;font-weight:700;line-height:1.5}
.ab-board i{position:absolute;z-index:1;top:50%;right:26px;transform:translateY(-50%);font-style:normal;font-family:var(--px);font-size:15px;transition:transform .2s var(--ease)}
.ab-board-w.l .ab-board i{right:auto;left:22px}
.ab-board.coral{--bg:var(--coral);color:#fff}
.ab-board.teal{--bg:var(--teal);color:#fff}
.ab-board.ink{--bg:var(--ink);color:var(--paper2);filter:drop-shadow(4px 4px 0 var(--coral))}
.ab-board-w.r .ab-board:hover{transform:rotate(-1.3deg) translate(-2px,-2px);filter:drop-shadow(6px 6px 0 var(--ink))}
.ab-board-w.l .ab-board:hover{transform:rotate(1.1deg) translate(-2px,-2px);filter:drop-shadow(6px 6px 0 var(--ink))}
.ab-board.ink:hover{filter:drop-shadow(6px 6px 0 var(--coral))!important}
.ab-board-w.r .ab-board:hover i{transform:translate(4px,-50%)}
.ab-board-w.l .ab-board:hover i{transform:translate(-4px,-50%)}

/* ===== 2. 非公式の明記：本文の横に、朱のスタンプ。その下に「確認したガイドライン」の表 ===== */
.ab-unof{display:grid;grid-template-columns:minmax(0,var(--readw)) minmax(150px,216px);gap:20px 64px;align-items:center}
.ab-stamp{justify-self:center;width:100%;max-width:216px;transform:rotate(-9deg)}
.ab-stamp svg{display:block;width:100%;height:auto;overflow:visible}

/* ===== 3. 紹介のしかたの約束：貼り紙6枚。上にテープ、右上に標識の絵、太い一文。「すること」の1枚だけティールの面 ===== */
.ab-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;margin-top:40px}
.ab-rule{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 62px;grid-template-rows:auto auto 1fr;gap:10px 14px;align-content:start;
  background:var(--paper2);border:var(--bd);box-shadow:var(--sh);padding:26px 20px 22px 22px}
/* テープ（紙を留めている）。1枚ごとに位置と傾きを変える */
.ab-rule::before{content:"";position:absolute;left:var(--tx,40%);top:-11px;width:74px;height:20px;background:rgba(238,90,54,.62);transform:rotate(var(--tr,-3deg));box-shadow:0 1px 0 rgba(21,21,21,.12)}
.ab-rule:nth-child(2n)::before{--tx:56%;--tr:2.5deg;background:rgba(19,158,147,.6)}
.ab-rule:nth-child(3n)::before{--tx:22%;--tr:-1.5deg}
.ab-rule.do::before{background:rgba(21,21,21,.78)}
.ab-rule-kind{grid-column:1;justify-self:start;font-family:var(--px);font-size:11.5px;line-height:1.5;letter-spacing:.04em;color:var(--paper2);background:var(--ink);padding:1px 8px}
.ab-rule-ico{grid-column:2;grid-row:1/3;align-self:start;width:62px;height:62px;background:var(--paper);border:var(--bd);box-shadow:3px 3px 0 var(--ink);transform:rotate(3deg)}
.ab-rule:nth-child(2n) .ab-rule-ico{transform:rotate(-2.5deg)}
.ab-rule-ico svg{display:block;width:100%;height:100%}
.ab-rule h3{grid-column:1;font-weight:900;font-size:clamp(19px,1.62vw,23px);line-height:1.34;letter-spacing:-.02em;color:var(--ink);font-feature-settings:"palt"}
.ab-rule p{grid-column:1/-1;font-size:14px;line-height:1.8;color:var(--ink2)}
.ab-rule.do{background:var(--teal);color:#fff}
.ab-rule.do h3,.ab-rule.do p{color:#fff}
.ab-rule.do .ab-rule-kind{background:var(--paper2);color:var(--ink)}
.ab-rule.do .ab-rule-ico{background:var(--paper2)}

/* ===== 5. 2羽：ツバメは左（大きめ）、フクロウは右（小さめ）。2羽とも内側を向く。左右対称にしない ===== */
#guides{overflow-x:clip}
.ab-duo{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:44px 60px;align-items:end;margin-top:8px}
.ab-bird{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 30px;align-items:end}
.ab-bird.b{grid-template-columns:minmax(0,1fr) auto}
.ab-bird.b .ab-bird-pic{order:2}
.ab-bird-pic{position:relative;width:clamp(150px,16.5vw,236px);margin-bottom:14px}
.ab-bird.b .ab-bird-pic{width:clamp(118px,12.4vw,176px)}
.ab-bird-pic::before{content:"";position:absolute;z-index:0;pointer-events:none;background:no-repeat center/contain}
.ab-bird.a .ab-bird-pic::before{left:-22%;right:-6%;bottom:-8%;height:78%;background-image:url(/img/h11-tri.svg)}      /* かすれた三角はツバメの後ろ（DESIGN.md 第6章） */
.ab-bird.b .ab-bird-pic::before{left:-10%;right:-34%;bottom:-10%;height:74%;background-image:url(/img/h11-dots.svg)}   /* 網点はフクロウの後ろ */
.ab-bird-pic img{position:relative;z-index:1;display:block;width:100%;height:auto}
.ab-bird-tx{padding-bottom:16px}
.ab-bird-nm{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:16px}
.ab-bird-nm b{font-weight:900;font-size:clamp(34px,3.4vw,46px);line-height:1.1;letter-spacing:.02em;color:var(--ink);background:linear-gradient(transparent 64%,var(--hl,rgba(238,90,54,.34)) 64%);padding:0 4px}
.ab-bird.b .ab-bird-nm b{--hl:rgba(19,158,147,.32)}
.ab-bird-nm span{font-weight:700;font-size:15px;line-height:1.5;color:var(--ink2)}
.ab-bird-tx .va-say{margin-bottom:14px;font-size:16px}
.ab-bird-tx>p:last-child{font-size:14.5px;line-height:1.85;color:var(--ink2)}

/* ===== 6. 連絡と取り下げ：インクの地。大きな一文 → 対応の順番（本当に順番があるので番号を付ける）。右に連絡先の札 ===== */
.ab-ct{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:40px 72px;align-items:start}
.ab-ct-big{font-weight:900;font-size:clamp(22px,2.5vw,33px);line-height:1.55;letter-spacing:-.01em;color:var(--paper2);font-feature-settings:"palt"}
.ab-ct-big span{display:inline-block}   /* 「その日のうちに対応します。」の途中で折らない */
.ab-ct-big em{font-style:normal;color:#fff;background:linear-gradient(transparent 56%,var(--coral) 56%,var(--coral) 94%,transparent 94%);padding:0 2px}
.ab-steps{counter-reset:ab-s;margin-top:30px;border-top:1px solid #4a4a4a}
.ab-steps li{counter-increment:ab-s;display:grid;grid-template-columns:42px minmax(0,1fr);gap:2px 14px;padding:16px 0 15px;border-bottom:1px dashed #4a4a4a}
.ab-steps li::before{content:counter(ab-s);grid-row:1/3;font-family:var(--en);font-weight:800;font-size:30px;line-height:1.05;color:var(--coral)}
.ab-steps b{font-weight:900;font-size:17px;line-height:1.5;color:var(--paper2)}
.ab-steps span{font-size:14px;line-height:1.75;color:#bdb8ab}
.ab-slot{background:var(--paper2);color:var(--ink2);border:2px solid var(--paper2);box-shadow:6px 6px 0 var(--coral);padding:22px 22px 20px}
.ab-slot h3{display:flex;align-items:center;gap:12px;font-weight:900;font-size:19px;line-height:1.3;color:var(--ink);margin-bottom:6px}
.ab-slot h3::after{content:"";flex:1;height:2px;background:var(--ink)}
.ab-slot dl>div{padding:13px 0 12px;border-bottom:1.5px dashed var(--line)}
.ab-slot dt{font-family:var(--px);font-size:11.5px;line-height:1.5;color:var(--mute);margin-bottom:3px}
.ab-slot dd{font-weight:700;font-size:14.5px;line-height:1.7;color:var(--ink)}
.ab-slot .va-note{margin-top:12px}
.ab-soon{display:inline-block;font-family:var(--px);font-weight:400;font-size:12px;line-height:1.5;color:#fff;background:var(--coral-d);padding:0 8px;margin-right:9px;vertical-align:1px}
.ab-soon.ink{background:var(--ink);color:var(--paper2)}
.ab-ct-more{margin-top:22px;font-size:14px;color:#bdb8ab}
.ab-ct-more .va-link{color:var(--paper2)}
.ab-ct-more .va-link:hover{color:#ffb39f}

/* ===== 7. 運営者：本の「奥付」の形（上下に線、項目は点の書体）。右に、あわせて読むページ ===== */
.ab-op{display:grid;grid-template-columns:minmax(0,var(--readw)) minmax(280px,380px);gap:40px 72px;align-items:start}
.ab-colophon{border-top:var(--bd);border-bottom:var(--bd)}
.ab-colophon>div{display:grid;grid-template-columns:8.2em minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 0 12px}
.ab-colophon>div+div{border-top:1.5px dashed var(--line)}
.ab-colophon dt{font-family:var(--px);font-size:12px;line-height:1.6;color:var(--mute)}
.ab-colophon dd{font-size:15px;font-weight:700;line-height:1.7;color:var(--ink)}
.ab-colophon dd b{font-weight:900;font-size:18px}
.ab-colophon dd span:not(.ab-soon){display:block;font-size:13px;font-weight:500;color:var(--mute)}
.ab-colophon dd.sm{font-family:var(--px);font-weight:400;font-size:12.5px;line-height:1.7}
.ab-colophon dd.sm span:not(.ab-soon){font-family:var(--jp);font-size:12px}
.ab-next{display:grid;gap:20px}
.ab-next-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:15px 18px 16px}
.ab-next-card small{grid-column:1;font-family:var(--en);font-weight:800;font-size:9.5px;letter-spacing:.07em;color:var(--mute)}
.ab-next-card b{grid-column:1;font-weight:900;font-size:19px;line-height:1.35;color:var(--ink);letter-spacing:-.02em}
.ab-next-card span{grid-column:1;font-size:13px;line-height:1.5;color:var(--ink2)}
.ab-next-card i{grid-column:2;grid-row:1/4;font-style:normal;font-family:var(--px);font-size:16px;color:var(--coral);transition:transform .2s var(--ease)}
.ab-next-card:hover i{transform:translateX(4px)}

/* ===== 幅が狭いとき ===== */
@media (max-width:1080px){
  .ab-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-what{gap:30px 44px}
  .ab-duo{grid-template-columns:1fr;gap:40px}
  .ab-bird{max-width:640px}
  .ab-bird.b{justify-self:end}
}
@media (max-width:900px){
  .ab-what,.ab-ct,.ab-op{grid-template-columns:1fr}
  .ab-sign{max-width:440px;margin-top:6px}
  .ab-unof{grid-template-columns:1fr}
  .ab-stamp{justify-self:end;max-width:148px;margin:-6px 8px 0 0}
}
@media (max-width:720px){
  .ab-prose p{font-size:15px;line-height:1.95}
  .ab-jump{gap:8px;margin-top:18px}
  .ab-jump .va-tag{padding:6px 11px 5px}   /* 指で押しやすい高さ */
  .ab-rules{grid-template-columns:1fr;gap:30px;margin-top:32px}
  .ab-rule h3{font-size:19px}
  .ab-bird{gap:8px 18px}
  .ab-bird-pic{width:124px}
  .ab-bird.b .ab-bird-pic{width:100px}
  .ab-bird.b .ab-bird-pic::before{right:-12%}   /* 網点を画面の外へ出さない */
  .ab-bird-tx .va-say{font-size:14.5px;padding:10px 13px}
  .ab-steps li{grid-template-columns:34px minmax(0,1fr);gap:2px 10px}
  .ab-steps li::before{font-size:25px}
  .ab-steps b{font-size:16px}
  .ab-colophon>div{grid-template-columns:6.6em minmax(0,1fr);gap:10px}
  .ab-colophon dd b{font-size:17px}
}

/* 運営者（2026-11-15 すっきり短く）：項目は3つ。YouTube と連絡はリンク */
.ab-colophon dd .va-link{font-weight:900;font-size:17px}
@media (max-width:720px){.ab-bird-nm b{font-size:32px}}