/*
Theme Name: PinkArchive
Theme URI: https://pinkarchive.com/
Author: PinkArchive
Description: ブルーアーカイブ(ブルアカ)のエロ漫画・エロ画像まとめサイト向けテーマ。作品をカスタム投稿タイプ archive として扱い、媒体／タグ／キャラクター／シリーズ／サークル／作者の6タクソノミーで分類します。
Version: 1.5.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pinkarchive
Tags: two-columns, custom-menu, translation-ready
*/

/* ===== reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none}

/* ===== tokens ===== */
:root {
    color-scheme: light;
    --bg: #FFF8FA;
    --surface: #FFFFFF;
    --surface2: #F8F5F9;
    --hover: #F5F0F8;
    --accent: #F5A0C0;
    --accent-h: #E890B0;
    /* 画像の上など、淡いピンクでは沈む場所で使う濃いピンク */
    --accent-strong: #C4477E;
    --accent-sub: rgba(245, 160, 192, .10);
    --text: #2A2030;
    --sec: #6A6078;
    --tert: #A098B0;
    --border: #E8E0F0;
    --tagbg: #F5F0F8;
    --tagtx: #6A6078;
    --gold: #F0C050;
    --silver: #A0A8B8;
    --bronze: #C87850;
    --eromanga: #E87098;
    --erogazou: #9070C8;
    --shadow: 0 8px 32px rgba(0, 0, 0, .06);
    --r: 6px;
    --r-lg: 10px;
    --maxw: 1240px;
    --gut: 20px;
    --hh: 56px;
    --cover-ratio: 3/4;
}

/*
 * このテーマは「白 + ぴんく」の明色固定。
 * 端末がダークモードでも配色を変えないよう、
 * prefers-color-scheme による自動切り替えは持たせていない。
 */

/* ===== base ===== */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 10px)}
body{font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:1.7;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ===== header ===== */
.hdr{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);height:var(--hh)}
.hdr-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;height:100%;gap:20px}
.logo{font-family:'Outfit','Noto Sans JP',sans-serif;font-size:22px;font-weight:700;letter-spacing:.5px;color:var(--text);white-space:nowrap}
.logo i{font-style:normal;color:var(--accent)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:6px;cursor:pointer}
.nav-toggle{-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
.gnav{margin-left:auto}
/* 面内の閉じるボタンはスマホのメニューでのみ使う。 */
.gnav-close{display:none}
.nav-list{display:flex;gap:4px}
.nav-list li a{display:block;padding:6px 12px;font-size:13px;font-weight:500;border-radius:var(--r);transition:background .15s}
.nav-list li a:hover{background:var(--hover)}

/* ===== layout ===== */
.site-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.archive-wrap{display:grid;grid-template-columns:1fr 300px;gap:30px;padding-top:24px}
.archive-main{min-width:0}

/* ===== hero (TOPページの背景) ===== */
/*
 * 掲載作品を敷き詰めた帯の上に見出しと検索バーを置く。
 * タイルは十数枚を繰り返して並べているので、リクエストは取得件数で済む。
 */
.hero{position:relative;isolation:isolate;margin:16px 0 8px}
.hero.has-wall{overflow:hidden}
.hero-wall{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:3px;opacity:.55;filter:saturate(.8);pointer-events:none}
.hero-wall span{display:block;aspect-ratio:3/4;background-size:cover;background-position:center;background-color:var(--surface2)}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(255,248,250,.62) 0%,rgba(255,248,250,.86) 45%,rgba(255,248,250,.70) 100%),
    radial-gradient(ellipse 60% 70% at 50% 50%,rgba(255,255,255,.80),transparent 75%)}
.hero .intro{position:relative;z-index:2}
/* 淡いピンクは白スクリム越しの画像の上で沈むため、壁があるときだけ濃くする */
.hero.has-wall .intro h1 i{color:var(--accent-strong)}
.hero.has-wall .search-form{box-shadow:0 2px 14px rgba(42,32,48,.10)}

/* ===== intro ===== */
.intro{text-align:center;padding:48px var(--gut) 40px;max-width:700px;margin:0 auto}
.intro h1{font-size:28px;font-weight:700;line-height:1.4;margin-bottom:12px}
.intro h1 i{font-style:normal;color:var(--accent)}
.intro p{font-size:14px;color:var(--sec);margin-bottom:24px}

/* ===== search ===== */
.search-form{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;max-width:500px;margin:0 auto;transition:border-color .2s}
.search-form:focus-within{border-color:var(--accent)}
.search-field{flex:1;padding:10px 16px;font-size:14px;background:transparent;outline:none}
.search-field::placeholder{color:var(--tert)}
.search-submit{padding:10px 14px;color:var(--sec);cursor:pointer;transition:color .15s}
.search-submit:hover{color:var(--accent)}
.search-top{margin-bottom:24px}

/* ===== sections ===== */
.sec{margin-bottom:36px}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px}
.sec-hd h2{font-size:18px;font-weight:700}
.more{font-size:12px;color:var(--accent);font-weight:600;white-space:nowrap}
.more:hover{color:var(--accent-h)}

/* ===== card grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.card{display:block;background:var(--surface);border:1px solid var(--border);overflow:hidden;transition:all .2s}
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.card-link{display:block;height:100%}
.card-thumb{position:relative;aspect-ratio:var(--cover-ratio);overflow:hidden;background:var(--surface2)}
.card-thumb img{width:100%;height:100%;object-fit:cover}
.card-body{padding:10px 10px 12px}
.card-title{font-size:12px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10px;color:var(--sec)}
.card-charas{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chara-pill{display:inline-block;font-size:10px;font-weight:500;line-height:1;padding:3px 7px;border-radius:10px;background:var(--accent-sub);color:var(--accent-strong);white-space:nowrap}

/* ===== badges ===== */
.bd-media{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;color:#fff;padding:2px 8px;border-radius:3px;line-height:1.4}
.bd-media.eromanga,.mbadge.eromanga{background:var(--eromanga)}
.bd-media.erogazou,.mbadge.erogazou{background:var(--erogazou)}
.mbadge{display:inline-block;font-size:10px;font-weight:700;color:#fff;padding:1px 6px;border-radius:3px;line-height:1.4}

/* ===== ranking ===== */
.rank-list{display:flex;flex-direction:column;gap:10px}
/* サムネイルを大きくしたぶん、本文は上寄せではなく縦中央に置く */
.rank-item{display:flex;gap:12px;align-items:center;padding:10px;background:var(--surface);border:1px solid var(--border);transition:all .2s}
.rank-item:hover{border-color:var(--accent);box-shadow:var(--shadow)}
/* 一覧側のサムネイル。56pxだと行幅に対して小さすぎたので 3:4 のまま拡大 */
.rank-thumb{position:relative;width:90px;height:120px;overflow:hidden;flex-shrink:0;background:var(--surface2)}
.rank-thumb img{width:100%;height:100%;object-fit:cover}
/*
 * 順位は専用列を持たせず、サムネイル左上に重ねる。
 * 金(#F0C050)に白文字はコントラスト比1.7で読めないため、
 * 塗りに金銀銅を使って文字色は濃いまま残す（比9.2）。
 * 白リングは暗いコマの上で円の輪郭が溶けないように入れている。
 */
.rank-badge{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;background:var(--accent);color:var(--text);box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(0,0,0,.32)}
.rank-badge.n1{background:var(--gold)}
.rank-badge.n2{background:var(--silver)}
.rank-badge.n3{background:var(--bronze)}
.rank-info{flex:1;min-width:0}
.rank-title{font-size:13px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* span のままだと margin-top が効かないので block にする */
.rank-meta{display:block;font-size:10px;color:var(--sec);margin-top:4px}

/* ===== sidebar ranking ===== */
.w-rank .rank-item{padding:8px;gap:8px}
.w-rank .rank-thumb{width:44px;height:59px}
.w-rank .rank-title{font-size:12px}
/* サイドバーのサムネは44pxしかないため、24pxのままだと幅の半分以上を覆う */
.w-rank .rank-badge{width:20px;height:20px;font-size:11px;top:3px;left:3px}

/* ===== sort tabs ===== */
.sorttabs{display:flex;gap:4px;margin-bottom:15px;flex-wrap:wrap}
.sorttabs a,.sorttabs span{display:block;padding:5px 14px;font-size:12px;font-weight:600;border-radius:var(--r);border:1px solid var(--border);color:var(--sec);transition:all .15s}
.sorttabs a:hover{border-color:var(--accent);color:var(--accent)}
.sorttabs .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== media sort tabs ===== */
.media-tabs{margin-bottom:15px}

/* ===== pills ===== */
.pill-wrap{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;font-size:12px;font-weight:500;background:var(--tagbg);color:var(--tagtx);border-radius:20px;border:1px solid transparent;transition:all .15s}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill-ct{font-size:10px;opacity:.7}

/* ===== term name list ===== */
.term-name-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.term-name-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;font-size:13px;background:var(--surface);border:1px solid var(--border);transition:background .15s,border-color .15s}
.term-name-item:hover{background:var(--hover);border-color:var(--accent)}
/* 長いキャラ名・サークル名で件数を押し出さないよう、名前側だけを詰める */
.term-name-item .nmwrap{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-sub{display:block;font-size:10px;color:var(--tert);margin-top:1px}
.term-ct{font-size:11px;color:var(--tert);flex:none;font-variant-numeric:tabular-nums}

/* ===== キャラクター一覧のグループ表示（学園別・部活別） ===== */
/* 学園が10件以上並ぶとスクロールが長くなるので、上部に飛び先を置く */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:12px 14px;background:var(--surface);border:1px solid var(--border)}
.jump .jl{font-size:11px;font-weight:700;color:var(--tert);align-self:center;margin-right:2px;letter-spacing:.04em}
.grp{margin-bottom:26px}
/* ページ内リンクの着地点がヘッダーに隠れないようにする */
.grp{scroll-margin-top:calc(var(--hh) + 12px)}
.grp-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding-bottom:7px;border-bottom:2px solid var(--accent)}
.grp-hd h2{font-size:16px;font-weight:700;margin:0}
/* 学園名は1行まるごと使う。h2 と同じ行に置くと件数がこちらに揃ってしまう */
.grp-eyebrow{flex:0 0 100%;font-size:11px;font-weight:700;color:var(--accent-strong);letter-spacing:.06em;margin-bottom:1px}
.grp-ct{font-size:11px;color:var(--tert);font-variant-numeric:tabular-nums}
/* 「その他」は主役ではないので罫線と見出しを落とす */
.grp.is-unset .grp-hd{border-bottom-color:var(--border)}
.grp.is-unset .grp-hd h2{color:var(--sec)}

/* ── キャラクター索引のカード ── */
/* 一覧は人数が多いので、TOPの6列固定ではなく入るだけ詰める */
.grp .chara-grid,.archive-main > .chara-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
/* 画像未設定のときの頭文字。灰色の丸だけが並ぶより判別できる */
.chara-card .chara-ph{display:grid;place-items:center;font-size:24px;font-weight:700;color:var(--tert);line-height:1}
.chara-club{font-size:10px;color:var(--accent-strong);line-height:1.3;margin-bottom:2px}
.chara-card[hidden]{display:none}

/* ── キャラクターの絞り込み ── */
.chara-filter{position:relative;margin:0 0 16px;max-width:360px}
.chara-filter input{width:100%;height:38px;padding:0 34px 0 14px;font-size:13px;font-family:inherit;
    color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);appearance:none}
.chara-filter input::placeholder{color:var(--tert)}
.chara-filter input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sub)}
.chara-filter-clear{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:26px;height:26px;
    display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--tert);
    font-size:18px;line-height:1;cursor:pointer}
.chara-filter-clear:hover{background:var(--hover);color:var(--text)}
/* 検索欄の既定の×は自前のボタンと二重になるので消す */
.chara-filter input::-webkit-search-cancel-button{display:none}
/* キャラは200人規模になるので、狭い画面でも2列入るようにして縦の移動を減らす */
@media (max-width:560px){
    .term-name-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:5px}
    .term-name-item{padding:7px 10px;font-size:12px}
}

/* ===== dual columns ===== */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dual.single{grid-template-columns:1fr}

/* ===== character grid ===== */
.chara-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.chara-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    text-align: center;
    padding: 12px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all .2s;
}

.chara-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/*
 * アイコンはカード幅に追従させる。
 * 72px 固定だとカードに対して小さく、周りの余白ばかりが目立っていた。
 * 上限を置いて、TOPの広いカードで大きくなりすぎないようにする。
 */
.chara-card img,
.chara-card .chara-ph {
    width: 100%;
    max-width: 96px;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    background: var(--surface2);
    margin-bottom: 8px;
}

.chara-card img {
    object-fit: cover;
}

.chara-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
}

.chara-ct {
    font-size: 10px;
    color: var(--sec);
}

/* ===== pagination ===== */
.pagination{display:flex;justify-content:center;gap:4px;margin-top:30px;padding:20px 0}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;font-size:13px;font-weight:600;border-radius:var(--r);border:1px solid var(--border);transition:all .15s}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== single work ===== */
.single-work{padding-top:20px}
/* 右カラム構成では .archive-wrap 側の余白と二重になるため打ち消す */
.archive-wrap .single-work{padding-top:0}
/* 項目は <a>／<span> を直接並べる（<ol><li> だと flex の子がひとつになり縦積みになる） */
.breadcrumb{font-size:12px;color:var(--sec);margin-bottom:20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.5}
.breadcrumb a{color:var(--sec)}
.breadcrumb a:hover{color:var(--accent-strong);text-decoration:underline}
.breadcrumb .bc-sep{color:var(--tert);flex:none}
/* 現在地は長い作品名が入るため、1行に抑えて折り返す */
.breadcrumb .bc-current{color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* アーカイブ一覧側にもパンくずが入るので、見出しとの間隔を詰める */
.archive-main > .breadcrumb{margin-bottom:14px}
.work-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;margin-bottom:24px}
/* 表紙が無い作品は1カラムにして空欄を作らない（.no-cover の方が詳細度が高いので順序に依存しない） */
.work-layout.no-cover{grid-template-columns:1fr}
.work-cover{overflow:hidden;background:var(--surface2)}
.work-cover img{width:100%;height:auto}
.work-title{font-size:22px;font-weight:700;line-height:1.4;margin-bottom:16px}
.work-info{min-width:0}

/* ===== work meta table ===== */
.work-meta,.detail-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:13px}
.work-meta th,.detail-table th{text-align:left;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);font-weight:600;white-space:nowrap;width:100px}
.work-meta td,.detail-table td{padding:8px 12px;border:1px solid var(--border)}
.work-meta td a,.detail-table td a{color:var(--accent)}
.work-meta td a:hover,.detail-table td a:hover{text-decoration:underline}
.work-meta td .pill:hover,.detail-table td .pill:hover{text-decoration:none}

/* ===== work actions ===== */
.work-actions{display:flex;gap:8px;flex-wrap:wrap}
.work-actions .btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;font-size:13px;font-weight:600;border-radius:var(--r);cursor:pointer;transition:all .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h)}
.btn-outline{border:1px solid var(--border);color:var(--sec)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ===== work body ===== */
.work-body{margin-bottom:24px;line-height:1.8}
.work-body p{margin-bottom:1em}
.work-body img{margin:12px 0}

/* ===== work reader (エロ漫画: 縦スクロール) ===== */
/*
 * 本文カラム幅そのままだと1行が長すぎて視線移動が辛いので上限を設ける。
 * ページ間は詰めて、めくる感覚に近づける。
 */
.work-reader{display:flex;flex-direction:column;gap:6px;max-width:820px;margin:0 auto 6px}
.work-reader .pg{width:100%;height:auto;background:var(--surface2)}
.pg-note{text-align:center;font-size:12px;color:var(--tert);padding:14px 0;border-top:1px dashed var(--border);max-width:820px;margin:0 auto 24px}

/* ===== work gallery (エロ画像: サムネイル) ===== */
.work-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
.work-gallery a{display:block;overflow:hidden;background:var(--surface2)}
.work-gallery img{width:100%;height:auto;transition:opacity .2s}
.work-gallery a:hover img{opacity:.8}

/* ===== 画像ビューア（エロ画像の一覧から開く） ===== */
/*
 * ビューアだけは明色テーマでも暗い背景にする。
 * 画像を見るための面なので、周囲を落とすほうが見やすい。
 */
/*
 * 既定は非表示。hidden 属性を唯一の状態とする。
 *
 * hidden 属性による display:none は UA スタイルシート由来なので、
 * ここで .pa-lb{display:flex} と書くと作者スタイルが勝って開いたまま出る。
 * :not([hidden]) で「開いているときだけ flex」にして取り違えを防ぐ。
 */
/* touch-action:none にするとビューア内でピンチズームまで殺してしまう */
.pa-lb{position:fixed;inset:0;z-index:9999;background:rgba(18,12,24,.94);display:none;flex-direction:column;touch-action:pinch-zoom}
.pa-lb:not([hidden]){display:flex}
/*
 * バーは画像の上に重ねる（レイアウトの高さを食わない）。
 * 流し込みにすると、画面の縦横比に近い縦長画像のときに
 * バーの高さぶんだけ足りなくなり、横幅が縮んで左右の余白が広がる。
 * 文字と×が画像に埋もれないよう、上端に暗いグラデーションを敷く。
 */
.pa-lb-bar{position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;
  background:linear-gradient(to bottom,rgba(18,12,24,.62),rgba(18,12,24,0));
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 20px;
  /* バー自体は触れないようにする。重ねた結果、上部に「押しても何も起きない」死角ができるため */
  pointer-events:none}
.pa-lb-close{pointer-events:auto}
.pa-lb-count{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.85}
.pa-lb-close{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.pa-lb-close:hover{background:rgba(255,255,255,.22)}
/*
 * ここは grid にしないこと。
 * grid だとアイテムの max-height が行の高さを抑えられず、
 * 行が画像の本来の高さまで伸びて、中央寄せの基準がずれて下にはみ出す。
 */
/* 左右だけ 5px。上下は余白を取らず、画像を画面の中央に置く */
.pa-lb-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 5px}
/*
 * 既定（スマホ）はステージいっぱいまで使う。
 *
 * 高さに上限を付けると、9:16 のような縦長の画像ほど先に高さで頭打ちになり、
 * その分だけ横幅が縮んで左右の余白が広がってしまう。
 * スマホでは縦長の画像こそ大きく見せたいので上限を置かない。
 *
 * 画面が広いときだけ、横長の画像が間延びしないよう上限をかける。
 * 大きすぎ・小さすぎはこの2つの値だけ触れば直る。
 * max-* だけなので元の解像度より拡大されることはない。
 */
.pa-lb-img{--lb-w:100%;--lb-h:100%;
  max-width:min(100%,var(--lb-w));max-height:min(100%,var(--lb-h));
  width:auto;height:auto;object-fit:contain;display:block;border-radius:4px}
@media (min-width:700px){
  .pa-lb-img{--lb-w:760px;--lb-h:82vh}
}
/* 画面が低いときは説明文を省いて画像に集中させる（高さは浮かせているので食わない） */
@media (max-height:720px){
  .pa-lb-bar{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:14px}
  .pa-lb-foot{display:none}
}
/*
 * 送りのボタンは左右の端に小さく置く。画像の全面は覆わない。
 * 覆ってしまうと長押し・右クリックがボタンに当たり、
 * ブラウザの「画像を保存」が出せなくなる。
 * 送り自体は画像のタップ位置（左38%で前へ）で判定している。
 */
.pa-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  opacity:.55;transition:opacity .15s;-webkit-tap-highlight-color:transparent}
.pa-lb-nav.prev{left:10px}
.pa-lb-nav.next{right:10px}
.pa-lb-nav:hover,.pa-lb-nav:focus-visible{opacity:1}
.pa-lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* フッターもバーと同じく浮かせる。流し込みにすると下だけ高さを食って画像が上に寄る */
.pa-lb-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  text-align:center;color:rgba(255,255,255,.52);font-size:10.5px;
  background:linear-gradient(to top,rgba(18,12,24,.62),rgba(18,12,24,0));
  padding:20px 14px calc(12px + env(safe-area-inset-bottom,0px))}
body.pa-lb-open{overflow:hidden}
.work-gallery a:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

/* ===== work tags ===== */
.work-tags{margin-bottom:24px}
.work-tags .pill-wrap{margin-top:8px}

/* ===== related ===== */
.related{margin-bottom:36px}
.related .sec-hd{margin-bottom:14px}
.related .card-grid{grid-template-columns:repeat(4,1fr)}

/* ===== sidebar ===== */
.sidebar{position:sticky;top:calc(var(--hh) + 20px);align-self:start}
.widget{margin-bottom:24px}
.w-title{font-size:15px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--accent)}

/* ===== sidebar promo ===== */
.w-promo{background:var(--surface);border:1px solid var(--border);overflow:hidden;margin-bottom:24px}
.w-promo-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface2)}
.w-promo-thumb img{width:100%;height:100%;object-fit:cover}
.w-promo-body{padding:12px}
.w-promo-title{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:6px}
.w-promo-desc{font-size:11px;color:var(--sec);line-height:1.5}

/* ===== archive header ===== */
.archive-hd{margin-bottom:20px}
.archive-hd h1{font-size:24px;font-weight:700;line-height:1.4;margin-bottom:6px}
.archive-desc{font-size:13px;color:var(--sec)}

/* ===== page content ===== */
.page-content{padding:20px 0}
.page-content h1{font-size:24px;font-weight:700;margin-bottom:20px}
.entry-content{line-height:1.8;font-size:15px}
.entry-content p{margin-bottom:1em}
.entry-content h2{font-size:20px;font-weight:700;margin:1.5em 0 .5em}
.entry-content h3{font-size:17px;font-weight:700;margin:1.2em 0 .4em}
.entry-content ul,.entry-content ol{margin:.5em 0 1em 1.5em}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content a{color:var(--accent)}
.entry-content a:hover{text-decoration:underline}
.entry-content img{margin:12px 0}
.entry-content blockquote{border-left:3px solid var(--accent);padding:12px 16px;background:var(--surface2);border-radius:0 var(--r) var(--r) 0;margin:1em 0}

/* ===== search: post / page results ===== */
.post-list{display:flex;flex-direction:column;gap:10px}
.post-item{padding:14px 16px;background:var(--surface);border:1px solid var(--border);transition:border-color .15s}
.post-item:hover{border-color:var(--accent)}
.post-item h3{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:6px}
.post-item h3 a:hover{color:var(--accent)}
.post-item p{font-size:13px;color:var(--sec);line-height:1.7}

/* ===== no results ===== */
.no-result{text-align:center;padding:40px 20px;color:var(--sec);font-size:14px}

/* ===== footer ===== */
.ftr{margin-top:48px;padding:32px var(--gut);background:var(--surface);border-top:1px solid var(--border);text-align:center}
.ftr-inner{max-width:var(--maxw);margin:0 auto}
.ftr-brand{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;letter-spacing:.5px;display:inline-block;margin-bottom:8px}
.ftr-brand i{font-style:normal;color:var(--accent)}
.ftr-desc{font-size:12px;color:var(--sec);margin-bottom:16px}
/* 項目が6本あるのでスマホでは折り返させる */
.ftr-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
.ftr-links li a{font-size:12px;color:var(--sec);transition:color .15s}
.ftr-links li a:hover{color:var(--accent)}
/* サイト情報（削除依頼・運営者情報など）。回遊リンクより一段控えめにする。 */
.ftr-legal ul{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px}
.ftr-legal li a{font-size:12px;color:var(--sec);transition:color .15s}
.ftr-legal li a:hover{color:var(--accent);text-decoration:underline}
.ftr-copy{font-size:11px;color:var(--tert)}

/* ===== responsive: tablet ===== */
@media (max-width:1080px){
    .archive-wrap{grid-template-columns:1fr;gap:24px}
    .sidebar{position:static}
    .card-grid{grid-template-columns:repeat(4,1fr)}
    .related .card-grid{grid-template-columns:repeat(3,1fr)}
    .work-gallery{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:880px){
    .card-grid{grid-template-columns:repeat(3,1fr)}
    .work-layout{grid-template-columns:200px 1fr;gap:16px}
    .dual{grid-template-columns:1fr}
    .chara-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width:720px){
    /*
     * ハンバーガーは右端に置く。
     *
     * 以前は .gnav の margin-left:auto で右に寄せていたが、
     * この幅では .gnav が position:fixed になって並びから外れるため、
     * ボタンだけがロゴの真横＝画面の中ほどに残っていた。
     * ボタン自身に margin-left:auto を持たせる。
     */
    /*
     * -6px はボタン自身の padding 分。3本線の右端を左右の余白に揃える。
     *
     * z-index は .gnav より上。.gnav は .hdr の中にあるため、
     * 指定が無いと後ろにある .gnav が常に手前に描かれ、
     * ボタンが面の下に潜ってクリックがリンクに吸われていた。
     */
    .nav-toggle{display:flex;margin-left:auto;margin-right:-6px;position:relative;z-index:101}
    .gnav{position:fixed;top:var(--hh);left:0;right:0;bottom:0;background:var(--surface);padding:16px var(--gut);transform:translateX(100%);transition:transform .25s;overflow-y:auto;z-index:99}
    .gnav.open{transform:translateX(0)}

    /*
     * 管理バーが出ている間はヘッダーがその分だけ下がる。
     * top を --hh 固定にしていたため、面がヘッダーに46px被さり、
     * ログイン中だけ閉じるボタンが隠れていた。
     * 720px 以下では管理バーの高さは常に46px。
     */
    body.admin-bar .gnav{top:calc(var(--hh) + 46px)}

    /* 面の中の閉じるボタン。 */
    .gnav-close{display:flex;align-items:center;gap:8px;margin:0 0 8px auto;padding:8px 4px;font-size:13px;color:var(--sec);cursor:pointer}
    .gnav-close-x{position:relative;display:block;width:16px;height:16px}
    .gnav-close-x::before,.gnav-close-x::after{content:'';position:absolute;top:7px;left:0;width:16px;height:2px;background:var(--text);border-radius:2px}
    .gnav-close-x::before{transform:rotate(45deg)}
    .gnav-close-x::after{transform:rotate(-45deg)}
    .nav-list{flex-direction:column;gap:0}
    .nav-list li a{padding:12px 0;font-size:15px;border-bottom:1px solid var(--border)}

    /*
     * 開いている間は3本線を×にする。
     *
     * これが無いと、メニューが全面に出ているのに
     * ヘッダーのボタンは3本線のままで、閉じる手段が無いように見えていた。
     * 実際にはもう一度押せば閉じるが、それが分からない状態だった。
     */
    .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-toggle.open span:nth-child(2){opacity:0}
    .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    /* メニューを開いている間、背後のページが動かないようにする。 */
    body.nav-open{overflow:hidden}
}

@media (max-width:560px){
    :root{--gut:16px;--hh:50px}
    .logo{font-size:18px}
    .intro h1{font-size:22px}
    .intro{padding:32px var(--gut) 28px}
    .card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .card-body{padding:8px 8px 10px}
    .card-title{font-size:11px}
    .sec-hd h2{font-size:16px}
    .work-layout{grid-template-columns:1fr}
    .work-cover{max-width:280px}
    .work-title{font-size:18px}
    .related .card-grid{grid-template-columns:repeat(2,1fr)}
    .work-gallery{grid-template-columns:repeat(2,1fr)}
    .archive-hd h1{font-size:20px}
    .chara-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

/* ===== utility ===== */
.text-accent{color:var(--accent)}
.bg-surface{background:var(--surface)}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}