/*
Theme Name:  anon press
Theme URI:   https://note.com/anon_press
Description: anon press — Media that creates multiple futures
Author:      anon press
Version:     1.0.9
Text Domain: anon-press
*/

/* ── テキスト選択色 ────────────────────────────────────────────────────────── */
::selection      { background: #1f1f1f; color: #efefef; }
body.wire-mode ::selection { background: #efefef; color: #1f1f1f; }

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Aratana';
    src: url('font/Aratana.woff2') format('woff2'),
         url('font/Aratana.woff')  format('woff'),
         url('font/Aratana.otf')   format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0100-024F;
}
@font-face {
    font-family: 'anon-dash';
    src: url('font/NotoSansJP-ExtraLight-dash.woff2') format('woff2');
    font-weight: 1 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2015;
}

:root {
    --font:      'anon-dash', 'Aratana', "dnp-shuei-gothic-gin-std",
                 "Yu Gothic", "YuGothic", "游ゴシック",
                 "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                 "Noto Sans JP",
                 "Segoe UI", "Arial Unicode MS", "Noto Sans",
                 sans-serif;
    --ink:       #1f1f1f;
    --mute:      #afafaf;
    --bg:        #efefef;
    --rule:      rgba(0, 0, 0, 0.08);
    --surface:   #ffffff;       /* カード・パネル・入力欄の背景 */
    --dim:       #efefef;    /* コードブロック・やや沈んだ背景 */
    --sidebar-w: 200px;
    --entry-gutter: 24px;
    --section-title-size: clamp(22px, 3.2vw, 38px);
    --section-header-h: calc(var(--section-title-size) + 18px);
    --note-body-w: 720px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: clip; /* clip は sticky を壊さない */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { overflow-x: hidden; }
html.no-smooth-scroll,
body.no-smooth-scroll { scroll-behavior: auto !important; }

/* ── ネイティブスクロールバーを非表示（JS で描画） ────────────────────────────── */
::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

/* ── カスタムスクロールバー（JS 描画） ──────────────────────────────────────── */
.c-scrollbar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;              /* クリック判定幅（視覚は ::before で細く） */
    z-index: 9999;
    pointer-events: none;
}
.c-scrollbar__track {
    position: absolute;
    inset: 0;
    pointer-events: all;
    cursor: pointer;
    background: transparent;
}
.c-scrollbar__track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    background: var(--ink);   /* ライトモード: 黒地 */
    pointer-events: none;
}
.c-scrollbar__thumb {
    position: absolute;
    right: 0;
    width: 6px;               /* 視覚幅のみ */
    min-height: 24px;
    background: #ffffff;      /* ライトモード: 白サム */
    cursor: ns-resize;
    pointer-events: all;
    touch-action: none;
}
body.wire-mode .c-scrollbar__track::before { background: #ffffff; } /* ダークモード: 白地 */
body.wire-mode .c-scrollbar__thumb { background: #0f0f0f; }         /* ダークモード: 黒サム */

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    overflow-y: auto;
    transition: background 0.5s, color 0.5s;
}

#pjax-container {
    opacity: 1;
    transition: opacity 0.24s ease;
}
body.is-page-entering #pjax-container,
body.is-page-leaving #pjax-container {
    opacity: 0;
}
html.is-loading-lock,
body.is-loading-lock {
    overflow: hidden !important;
    height: 100%;
}

body.wire-mode {
    --ink:       #dfdfcf;
    --mute:      #4f4f4f;
    --bg:        #0f0f0f;
    --rule:      rgba(255, 255, 255, 0.07);
    --surface:   #0f0f0f;
    --dim:       #0f0f0f;
    background:  #0f0f0f;
}

/* ── Canvas ────────────────────────────────────────────────────────────────── */
canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 0;
}

/* ── Loader ────────────────────────────────────────────────────────────────── */
#loader {
    position: fixed;
    inset: 0;
    background: #efefef;             /* ライトモード固定（var(--bg) は JS 実行前に確定しない） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
    text-transform: uppercase;
    transition: opacity 1.2s;
    z-index: 10000;
}
#loader.hidden { opacity: 0; pointer-events: none; }

#loader .loader-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.35s ease;
}

/* ダークモード: wire-mode が body に付く前に localStorage を読んで <html> に class を振る場合に備え
   body.wire-mode でも対応（JS が wire-mode クラスを body に同期的に付与）                        */
body.wire-mode #loader {
    background: var(--bg);
    color: var(--mute);
}

/* プログレスバー（"loading" テキストの直下） */
#loader-bar-wrap {
    position: absolute;
    left: 0;
    top: calc(50% + 20px);
    width: 100vw;
    height: 2px;
    margin-top: 0;
    background: rgba(0, 0, 0, 0.12);  /* トラック */
    transition: opacity 0.35s ease;
}
body.wire-mode #loader-bar-wrap {
    background: rgba(255, 255, 255, 0.15);
}
#loader-bar {
    height: 100%;
    width: 0%;
    background: var(--ink);          /* ライトモード: 黒バー */
    transition: width 0.45s ease-out;
}
body.wire-mode #loader-bar {
    background: var(--ink);          /* ダークモード: 白バー */
}

/* ── Logo (JS-animated: hero center → sidebar) ─────────────────────────────── */
#logo {
    position: fixed;
    left: calc(50% - 50px);
    top:  calc(50% - 50px);
    width: 100px;
    height: auto !important;
    pointer-events: none;
    z-index: 6;
    user-select: none;
    -webkit-user-drag: none;
    cursor: default;
    transition: opacity 0.3s;
}

/* ローディング表示中は中央ロゴを表示しない */
#loader:not(.hidden) ~ #logo {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* no-hero（/login/ 含む）では中央ロゴを出さない */
body.no-hero #logo {
    display: none !important;
}

/* ── サイドバー内のロゴ ──────────────────────────────────────────────────────── */
.sidebar .anon-login-logo {
    width: 72px;
    height: 72px;
    display: inline-flex;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.sidebar .anon-login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* front-page: ロゴ本体は中央アニメ用のみ表示し、サイドバーには余白だけ確保 */
.sidebar .anon-logo-spacer {
    width: 72px;
    height: 72px;
    margin-bottom: 28px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    height: 100vh;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 48px;
    pointer-events: auto;
}

.hero-nav {
    position: absolute;
    top: 36px;
    right: 48px;
    display: flex;
    gap: 32px;
    pointer-events: auto;
}
.hero-nav a {
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s;
    font-variant-emoji: text;
}
.hero-nav a:hover { opacity: 1; }

.hero-type {
    pointer-events: auto;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.hero-title {
    font-family: 'anon-dash', 'Aratana', sans-serif;
    font-size: clamp(32px, 15vw, 48px);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: 0.025em;
    color: var(--ink);
    text-shadow: 0 0 60px rgba(240, 240, 238, 0.6);
}
body.wire-mode .hero-title  { text-shadow: none; color: rgba(255,255,255,0.92); }
body.wire-mode .hero-tagline { color: rgba(255,255,255,0.65); }
body.wire-mode .hero-nav a  { color: rgba(255,255,255,0.70); }
body.wire-mode .hero-nav a:hover { color: #ffffff; opacity: 1; }

.hero-tagline {
    margin-top: 20px;
    font-size: clamp(11px, 1.2vw, 16px);
    letter-spacing: 0;
    color: var(--ink);
    opacity: 0.7;
}


/* ══════════════════════════════════════════════════════════════════════════════
   MAIN LAYOUT — フロストガラス
══════════════════════════════════════════════════════════════════════════════ */
.main-layout {
    position: relative;
    z-index: 2;
    padding-left: var(--sidebar-w);
    background: var(--bg);
    min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 48px 28px 48px 48px;
    overflow-y: auto;
    background: var(--bg);
    border-right: 1px solid var(--rule);
    z-index: 4;
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.sidebar.is-docked {
    opacity: 1;
    transform: translateX(0);
}
.no-hero .sidebar {
    opacity: 1;
    transform: translateX(0);
    transition: none;
}
body.wire-mode .sidebar { background: var(--bg); }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sidebar-nav a,
.sidebar-nav a:visited {
    color: var(--ink) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.sidebar-nav .admin-edit-link,
.sidebar-nav .admin-edit-link:visited {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: inherit !important;
}
.sidebar-nav a:hover {
    border-bottom: 0 !important;
}
.site-legal-links {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.2;
}
.site-legal-links a,
.site-legal-links a:visited {
    color: var(--mute);
    text-decoration: none;
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    line-break: strict;
}
.site-legal-links a:hover {
    opacity: 0.72;
}
.site-legal-links .site-legal-divider {
    width: 100%;
    margin: 2px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.site-copyright {
    margin-top: 6px;
    padding-top: 0;
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 0;
    color: var(--mute);
    line-height: 1.2;
    user-select: none;
}
@media (min-width: 481px) and (max-width: 900px) {
    .site-copyright {
        display: none;
    }
    .admin-tools .admin-tools-legal {
        position: relative;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
    }
    .admin-tools .admin-tools-legal::after {
        content: "｜";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: var(--mute);
        pointer-events: none;
    }
    .admin-tools .admin-tools-legal a,
    .admin-tools .admin-tools-legal a:visited {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 50%;
        width: 50%;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        padding: 0;
    }
    .admin-tools .admin-tools-legal a::before,
    .admin-tools .admin-tools-legal a::after {
        content: none;
    }
}
@media (min-width: 901px) {
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 14px;
        white-space: normal;
        overflow: visible;
        width: auto;
    }
    .sidebar-nav > ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sidebar-nav > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sidebar-nav > ul > li + li {
        margin-top: 14px;
    }
    .sidebar-nav hr,
    .sidebar-nav .nav-divider {
        display: block;
        width: 100%;
        border: 0;
        border-top: 1px solid var(--rule);
        margin: 0;
    }
    .sidebar-nav a {
        display: inline;
        width: auto;
        white-space: nowrap;
    }
}
@media (max-width: 900px) {
    .u-hide-mobile,
    .nav-mobile-hide {
        display: none !important;
    }

    /* モバイル上部ナビでは /nav/ 側の u-hide-mobile も表示する */
    .sidebar-nav .u-hide-mobile { display: none; }

    .sidebar-nav hr,
    .sidebar-nav .nav-divider,
    .admin-tools hr,
    .swpm-tools hr,
    .admin-tools .nav-divider,
    .swpm-tools .nav-divider {
        display: none !important;
    }

    /* モバイル版: 個別／記事ページの下に margin */
    body.single .content,
    body.single article {
        margin-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
}

/* ナビ外部リンクは矢印込みで折り返し禁止 */
.nav-ext,
.single-note-link,
.archive-link {
    white-space: nowrap;
}

/* 外部リンク矢印: line-height に影響しないよう ::after で追加 */
.nav-ext::after,
.single-note-link::after,
.archive-link::after {
    content: '\00A0\2197\FE0E';
    display: inline-block;
    font-size: 0.75em;
    line-height: 1;
    vertical-align: 0.1em;
    font-variant-emoji: text;
}

/* 外部リンク（http/https、anon-press.com 以外）に自動的に矢印を付ける */
a[href^="http"]:not([href*="anon-press.com"])::after {
    content: '\00A0\2197\FE0E';
    display: inline-block;
    position: relative;
    left: -0.25em;
    width: 0.75em;
    white-space: nowrap;
    font-size: 0.75em;
    line-height: 1;
    vertical-align: 0.1em;
    font-variant-emoji: text;
}

/* 除外: リンクカード内のリンク */
.x-link-card a::after,
.ext-link-card a::after {
    content: none !important;
}

/* 本文内の外部リンク矢印は nav に合わせる */
.single-body a[href^="http"]:not([href*="anon-press.com"])::after,
.page-body a[href^="http"]:not([href*="anon-press.com"])::after,
.note-body a[href^="http"]:not([href*="anon-press.com"])::after {
    position: static;
    left: auto;
    width: auto;
    white-space: nowrap;
}

/* 除外: 画像リンク */
a:has(> img)::after {
    content: none !important;
}

.sidebar-about {
    margin-top: auto;
    font-size: 11px;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--mute);
    max-height: 240px;
    overflow-y: auto;
}
.sidebar-menu-toggle {
    display: none;
}

/* ── Content ───────────────────────────────────────────────────────────────── */
.content {
    padding: 52px 72px 120px 64px;
    word-break: break-word;
    overflow-wrap: break-word;
}
#news.content {
    padding-top: 0;
}

/* ── Section header ────────────────────────────────────────────────────────── */
/* 通常時・スタック時とも flex バー: 高さ 64px、タイトル左／検索右 */
.section-header {
    position: relative;
    z-index: 30;
    background: #cfcfcf;              /* 背景: ライトグレー */
    display: flex;
    align-items: center;
    height: var(--section-header-h);
    padding: 0 72px 0 64px;
    margin: 0 -72px 0 -64px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    transition: border-color 0.25s ease;
}

/* スタック時: viewport 上端に fixed 固定 */
.section-header.is-stuck {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    padding: 0 72px 0 64px;   /* マーキーと同じ左右位置合わせを維持 */
    margin: 0;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 901px) and (max-width: 1279px) {
    .site-search__input {
        width: clamp(120px, 16vw, 190px);
        font-size: clamp(11px, 1.6vw, 22px);
    }
}

/* ニュースリスト折りたたみ: ブラインド巻き上げ（上方向）
   ・height は変えない → ページ高さ変動なし → スクロール跳ね返りを完全回避
   ・transform(scaleY) で垂直に畳む（上端→下端）                            */
.work-list {
    transform-origin: top center;
    transform: none;
    transition: transform 0.35s ease;
    will-change: transform;
}
.work-list.is-collapsed {
    transform: scaleY(0);
    pointer-events: none;
}
.section-title {
    position: relative;
    top: 2px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    white-space: nowrap;
    font-size: var(--section-title-size);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink);               /* 文字: ダーク（背景と逆） */
    line-height: 1;
    margin-right: auto;
    overflow: hidden;
}
.section-title .marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 0; /* gap は margin-right で代替（-50%ループを正確に合わせるため） */
    white-space: nowrap;
    will-change: transform;
    vertical-align: top;         /* ghost-space 除去 */
}
.section-title .marquee-track > .section-marquee-item {
    display: inline-block;
    white-space: nowrap;
    margin-right: var(--section-marquee-gap, 200px);
}
.section-title.is-marquee .marquee-track {
    animation: section-marquee-scroll var(--marquee-dur, 12s) linear infinite;
}
/* ページヘッダーバーのタイトルリンク */
.section-title a {
    color: inherit;
    text-decoration: none;
}
.section-title a:hover { opacity: 0.7; }

/* 非フロントページ: 固定ヘッダー分だけコンテンツを押し下げる */
body.no-hero .main-layout {
    padding-top: var(--section-header-h);
}
/* WP 管理バー表示時: html に margin-top:32px が付くためその分だけ相殺 */
body.admin-bar.no-hero .main-layout {
    padding-top: calc(var(--section-header-h) - var(--wp-admin--admin-bar--height, 32px));
}

/* ── Site search ────────────────────────────────────────────────────────────── */
.site-search {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 0;
    line-height: 1;
}
.site-search__input {
    /* 左端を本文インナー右端に揃える:
       右端固定で幅を「ビューポート右端 - inner右端」に合わせる */
    width: clamp(
        100px,
        calc(50vw - (var(--note-body-w) / 2) + (var(--sidebar-w) / 2)),
        420px
    );
    padding: 4px 8px;
    height: calc(var(--section-header-h) - 12px);
    border: 1px solid var(--mute);
    border-radius: 0;
    background: transparent;
    font-family: var(--font);
    font-size: clamp(13px, 1.8vw, 27px); /* NEWS タイトルの約半分 */
    color: var(--ink);
    letter-spacing: 0;
    line-height: 1;
    outline: none;
    -webkit-appearance: none;
}
/* section-header: ライトグレー背景に合わせダーク系に */
.section-header .site-search__input {
    color: var(--ink);
    border-color: rgba(0,0,0,0.3);
}
.section-header .site-search__input::placeholder { color: rgba(0,0,0,0.35); }
.section-header .site-search__input:focus { border-color: var(--ink); }

/* wire-mode: section-header はダークグレー背景 → ライト系文字 */
body.wire-mode .section-header {
    background: #2f2f2f;
    border-bottom-color: rgba(255,255,255,0.12);
}
body.wire-mode .section-header .site-search__input {
    border-color: rgba(255,255,255,0.3);
}
body.wire-mode .section-header .site-search__input::placeholder { color: rgba(255,255,255,0.4); }
body.wire-mode .section-header .site-search__input:focus { border-color: var(--ink); }

.site-search__input::placeholder { color: var(--mute); }
.site-search__input::-webkit-search-cancel-button { display: none; }
.site-search__input:focus { border-color: var(--ink); }
/* ダークモード */
.wire-mode .site-search__input { color: var(--ink); border-color: #5f5f5f; }
.wire-mode .site-search__input:focus { border-color: var(--ink); }

@media (max-width: 900px) {
    .site-search__input {
        width: clamp(132px, 40vw, 176px);
        font-size: clamp(14px, 4.1vw, 22px);
    }
}

.section-body {
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: 0;
    color: var(--ink);
}
.section-body p { margin-bottom: 0.6em; }
.section-body p:last-child { margin-bottom: 0; }
.section-body a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    transition: border-color 0.15s;
}
.section-body a:hover { border-color: var(--ink); }

/* news-log: WP管理画面から貼るテーブル風ログ */
.news-log {
    list-style: none;
    margin: 0;
    padding: 0;
}
.news-log li {
    display: flex;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0;
}
/* .news-log li:first-child の border-top は不要のため削除 */
.news-log li:last-child  { border-bottom: none; }
.news-log time {
    flex-shrink: 0;
    width: 8em;
    padding-right: 24px;
    color: var(--ink);
    font-size: 11px;
    letter-spacing: 0;
}
.news-log span { color: var(--ink); }
.news-log a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: border-color 0.15s;
}
.news-log a:hover { border-color: var(--ink); }

/* ── Work list ─────────────────────────────────────────────────────────────── */
.work-list {
    list-style: none;
    margin-left: -64px;
    margin-right: -72px;
}

/* 固定ヘッダー直下の先頭記事との境界をぴったり接続 */
body.no-hero #news > .work-list {
    margin-top: -1px;
}

.work-item {
    position: relative;
    overflow: hidden;
    padding: 28px 72px 30px 64px;
    border-bottom: 1px solid var(--rule);
}
.work-item--pin {
    background: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 8px,
        rgba(0,0,0,0.10) 8px,
        rgba(0,0,0,0.10) 10px
    );
}
body.wire-mode .work-item--pin {
    background: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 8px,
        rgba(255,255,255,0.10) 8px,
        rgba(255,255,255,0.10) 10px
    );
}
.work-item:first-child { border-top: 1px solid var(--rule); }

.work-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0;
    overflow: hidden;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 10px;
}
/* 固定アイテム: 縮まない */
.work-meta > * { flex: 0 0 auto; white-space: nowrap; }
/* タグだけ伸縮しはみ出したら省略 */
.work-meta .work-tags {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.work-sep      { color: var(--mute); opacity: 0.5; }
.work-date,
.work-date time { color: var(--ink); }
.work-author   { color: var(--ink); }
.work-category { color: var(--mute); }
.work-tag,
.work-tags     { color: var(--mute); }
/* メタ内リンク共通 */
.work-meta a { text-decoration: none; color: inherit; }
.work-meta a:hover { opacity: 0.6; }

/* ── いいねボタン ──────────────────────────────────────────────────────────── */
button.work-likes {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    letter-spacing: 0;
    color: var(--mute);
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s;
    line-height: inherit;
}
button.work-likes:hover:not(.is-liked):not(.is-pending) { opacity: 0.6; }
button.work-likes.is-liked {
    color: #bf3f3f;
    cursor: default;
}
button.work-likes.is-pending {
    opacity: 0.4;
    cursor: wait;
}

/* ── サムネ: ホバー時に work-item 背景に cover 表示 ────────────────────────── */
@keyframes thumb-drift-a {
    0%   { transform: scale(1.10) translate( 0.0%,  0.0%); }
    20%  { transform: scale(1.10) translate( 1.8%, -1.2%); }
    45%  { transform: scale(1.10) translate(-1.4%,  1.6%); }
    70%  { transform: scale(1.10) translate( 1.2%,  1.0%); }
    100% { transform: scale(1.10) translate( 0.0%,  0.0%); }
}
@keyframes thumb-drift-b {
    0%   { transform: scale(1.10) translate( 0.0%,  0.0%); }
    30%  { transform: scale(1.10) translate(-1.6%,  1.0%); }
    55%  { transform: scale(1.10) translate( 1.0%, -1.8%); }
    80%  { transform: scale(1.10) translate(-0.8%,  0.6%); }
    100% { transform: scale(1.10) translate( 0.0%,  0.0%); }
}
@keyframes thumb-drift-c {
    0%   { transform: scale(1.10) translate( 0.0%,  0.0%); }
    25%  { transform: scale(1.10) translate( 0.6%,  1.8%); }
    60%  { transform: scale(1.10) translate(-1.8%, -0.8%); }
    85%  { transform: scale(1.10) translate( 1.4%, -1.4%); }
    100% { transform: scale(1.10) translate( 0.0%,  0.0%); }
}

.work-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 0;
    filter: grayscale(100%);
    mix-blend-mode: multiply;
    animation: thumb-drift-a 14s ease-in-out infinite;
    animation-play-state: paused;
}
.work-item:hover .work-thumb {
    opacity: 0.25;
    animation-play-state: running;
}

.work-item:nth-child(3n+1) .work-thumb { animation-name: thumb-drift-a; animation-duration: 14s; animation-delay:  -2s; }
.work-item:nth-child(3n+2) .work-thumb { animation-name: thumb-drift-b; animation-duration: 18s; animation-delay:  -7s; }
.work-item:nth-child(3n)   .work-thumb { animation-name: thumb-drift-c; animation-duration: 11s; animation-delay:  -4s; }

body.wire-mode .work-thumb {
    mix-blend-mode: screen;
}
body.wire-mode .work-item:hover .work-thumb { opacity: 0.18; }
.work-meta,
.work-title,
.work-corner { position: relative; z-index: 1; }

.work-title {
    font-size: clamp(26px, 3.6vw, 54px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    overflow: hidden;            /* マーキー展開時の高さ変動を防ぐ */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

/* ── Marquee (テロップ) ────────────────────────────────────────────────────── */
.work-title .marquee-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    vertical-align: top;         /* ghost-space 除去 → 高さ変動なし */
}
.work-title.is-marquee .marquee-track {
    animation: marquee-scroll var(--marquee-dur, 12s) linear infinite;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes adminBtnMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes section-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--section-marquee-shift, -50%)); }
}
@keyframes mobile-nav-typing {
    0%, 12%   { clip-path: inset(0 100% 0 0); }
    52%, 72%  { clip-path: inset(0 0 0 0); }
    100%      { clip-path: inset(0 100% 0 0); }
}
.work-title a {
    display: block;
    width: 100%;
    color: var(--ink);
    text-decoration: none;
    transition: opacity 0.1s;
}
.work-title a:hover { opacity: 1; }
.work-title.is-glitching a { cursor: pointer; }

.work-corner {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
    font-size: 0;
}
.work-corner--pin,
.work-corner--new,
.work-corner--free {
    width: 56px;
    height: 56px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.work-corner--pin { background: #cfcfcf; }
.work-corner--new { background: var(--ink); }
.work-corner--free {
    background: #ffffff;
}

.work-corner--pin::after,
.work-corner--new::after,
.work-corner--free::after {
    position: absolute;
    left: calc(2 * 100% / 3);
    top: calc(100% / 3);
    transform: translate(-50%, -50%) rotate(45deg);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}
.work-corner--pin::after {
    content: 'PIN';
    color: #5f5f5f;
}
.work-corner--new::after {
    content: 'NEW';
    color: #ffffff;
}
.work-corner--free::after {
    content: 'FREE';
    color: #0f0f0f;
}
body.wire-mode .work-corner--new {
    background: #ffffff;
}
body.wire-mode .work-corner--new::after {
    color: #0f0f0f;
}

/* ── 無限スクロール ─────────────────────────────────────────────────────────── */
#load-sentinel { height: 1px; }
.load-more-spinner {
    text-align: center;
    padding: 24px 0;
    font-size: 10px;
    letter-spacing: 0;
    color: var(--mute);
    text-transform: uppercase;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.content-footer {
    margin-top: 56px;
    text-align: right;
}
.archive-link {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.archive-link:hover {
    color: var(--ink);
    border-bottom-color: var(--rule);
}

/* ── About / Static pages ──────────────────────────────────────────────────── */
.page-content:not(.page-content--single) {
    max-width: 680px;
    margin-left: 0;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.85;
    letter-spacing: 0;
    color: var(--ink);
}
.page-content:not(.page-content--single) h1 {
    font-family: 'anon-dash', 'Aratana', sans-serif;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 40px;
}
.page-content:not(.page-content--single) p { margin-bottom: 1.6em; }
.page-content:not(.page-content--single) a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.page-content:not(.page-content--single) a:hover { border-bottom-color: var(--ink); }

/* ── SWPM pages（login/password/thanks/register/profile）──────────────────── */
.swpm-page .single-inner {
    width: min(var(--note-body-w), calc(100vw - 128px));
    max-width: var(--note-body-w);
}

.swpm-page .page-body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
}

.swpm-page .page-body :is(p, li, .swpm-text) {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
}

.swpm-page .page-body :is(p, .swpm-text) {
    margin-bottom: 1.2em;
}

.swpm-page .page-body :is(ul, ol) {
    margin: 0;
    padding-left: 1.4em;
}

.swpm-page .page-body li {
    margin: 0 0 0.45em;
}

.swpm-page .page-body,
.swpm-page .page-body [class*="swpm"] {
    color: var(--ink);
}

.swpm-page .page-body .swpm-login-widget-form,
.swpm-page .page-body .swpm-registration-widget-form,
.swpm-page .page-body .swpm-profile-account-view,
.swpm-page .page-body .swpm-profile-form,
.swpm-page .page-body .swpm-pw-reset-widget-form,
.swpm-page .page-body form[id*="swpm"],
.swpm-page .page-body form[name*="swpm"] {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.swpm-page .page-body table,
.swpm-page .page-body table tbody {
    width: 100%;
    border: 0;
    background: transparent;
}

.swpm-page .page-body tr {
    display: block;
    margin-bottom: 14px;
    border: 0;
    background: transparent;
}

.swpm-page .page-body th,
.swpm-page .page-body td {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    padding: 0;
}

.swpm-page .page-body th {
    margin-bottom: 6px;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--ink);
}

.swpm-page .page-body input[type="text"],
.swpm-page .page-body input[type="email"],
.swpm-page .page-body input[type="password"],
.swpm-page .page-body input[type="url"],
.swpm-page .page-body input[type="number"],
.swpm-page .page-body textarea,
.swpm-page .page-body select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    padding: 12px 12px;
    font-family: var(--font);
    font-size: 14px;
}

.swpm-page .page-body input[type="text"]:focus,
.swpm-page .page-body input[type="email"]:focus,
.swpm-page .page-body input[type="password"]:focus,
.swpm-page .page-body input[type="url"]:focus,
.swpm-page .page-body input[type="number"]:focus,
.swpm-page .page-body textarea:focus,
.swpm-page .page-body select:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: none;
}

.swpm-page .page-body textarea {
    min-height: 120px;
    resize: vertical;
}

.swpm-page .page-body input[type="submit"],
.swpm-page .page-body button,
.swpm-page .page-body .swpm-submit,
.swpm-page .page-body .swpm-edit-profile-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font);
    font-size: 13px;
    letter-spacing: 0;
    cursor: pointer;
}

.swpm-page .page-body input[type="submit"]:hover,
.swpm-page .page-body button:hover,
.swpm-page .page-body .swpm-submit:hover,
.swpm-page .page-body .swpm-edit-profile-submit:hover {
    background: #0f0f0f;
    border-color: #0f0f0f;
}

.swpm-page .page-body .swpm-error,
.swpm-page .page-body .swpm-message,
.swpm-page .page-body .swpm-registration-success-msg,
.swpm-page .page-body .swpm-login-failed-msg,
.swpm-page .page-body .swpm-profile-update-success {
    border: 0;
    padding: 0;
    background: transparent;
    margin-bottom: 16px;
    color: var(--ink);
}

.swpm-page .page-body .swpm-username-input,
.swpm-page .page-body .swpm-password-input,
.swpm-page .page-body .swpm-email-input {
    width: 100%;
}

.swpm-page .page-body a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
}

.swpm-page .page-body a:hover {
    border-bottom-color: var(--ink);
}

/* SWPM /login/ は wp-login と同様に中央寄せレイアウト */
.swpm-login-page .content.page-content--single {
    padding: 0 !important;
    min-height: calc(100vh - var(--section-header-h));
    display: flex;
    align-items: center;
    justify-content: center;
}

.swpm-login-page .single-article--page {
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.swpm-login-page :is(.single-article--page .single-inner) {
    width: min(480px, calc(100vw - var(--sidebar-w) - 88px));
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: translateX(calc(var(--sidebar-w) * -0.5)) !important;
}

.swpm-login-page :is(.single-article--page .page-body) {
    width: 100%;
}

.swpm-login-page .page-body,
.swpm-login-page .page-body * {
    font-family: var(--font) !important;
}

.swpm-login-page .page-body {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

/* /login/ のフォーム本体は wp-login 風に 480px カラムへ集約 */
.swpm-login-page .page-body .swpm-login-widget-form,
.swpm-login-page .page-body form[id*="swpm-login"],
.swpm-login-page .page-body form[name*="swpm-login"],
.swpm-login-page .page-body form[action*="login"] {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--rule);
    background: transparent;
    box-shadow: none;
}

/* SWPM 側が内側に form ラッパーを出す場合の二重枠を除去 */
.swpm-login-page .page-body .swpm-login-widget-form form,
.swpm-login-page .page-body .swpm-login-widget-form .swpm-login-form-inner {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.swpm-login-page .page-body .swpm-login-widget-form p,
.swpm-login-page .page-body form[id*="swpm-login"] p,
.swpm-login-page .page-body form[name*="swpm-login"] p,
.swpm-login-page .page-body form[action*="login"] p {
    margin: 0 0 14px;
}

.swpm-login-page .page-body .swpm-login-widget-form p:last-child,
.swpm-login-page .page-body form[id*="swpm-login"] p:last-child,
.swpm-login-page .page-body form[name*="swpm-login"] p:last-child,
.swpm-login-page .page-body form[action*="login"] p:last-child {
    margin-bottom: 0;
}

/* ラベルの block 指定は「入力行（text/email/password）」のみに限定 */
.swpm-login-page .page-body .swpm-login-widget-form p:has(input[type="text"], input[type="email"], input[type="password"]) > label,
.swpm-login-page .page-body form[id*="swpm-login"] p:has(input[type="text"], input[type="email"], input[type="password"]) > label,
.swpm-login-page .page-body form[name*="swpm-login"] p:has(input[type="text"], input[type="email"], input[type="password"]) > label,
.swpm-login-page .page-body form[action*="login"] p:has(input[type="text"], input[type="email"], input[type="password"]) > label,
.swpm-login-page .page-body .swpm-login-widget-form .swpm-label {
    display: block;
    margin: 0 0 8px;
    font-family: var(--font);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--mute);
    font-weight: 400;
}

.swpm-login-page .page-body .swpm-login-widget-form input[type="text"],
.swpm-login-page .page-body .swpm-login-widget-form input[type="email"],
.swpm-login-page .page-body .swpm-login-widget-form input[type="password"],
.swpm-login-page .page-body form[id*="swpm-login"] input[type="text"],
.swpm-login-page .page-body form[id*="swpm-login"] input[type="email"],
    .swpm-login-page .page-body form[id*="swpm-login"] input[type="password"],
    .swpm-login-page .page-body form[name*="swpm-login"] input[type="text"],
    .swpm-login-page .page-body form[name*="swpm-login"] input[type="email"],
    .swpm-login-page .page-body form[name*="swpm-login"] input[type="password"],
    .swpm-login-page .page-body form[action*="login"] input[type="text"],
    .swpm-login-page .page-body form[action*="login"] input[type="email"],
    .swpm-login-page .page-body form[action*="login"] input[type="password"] {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 12px 12px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    box-shadow: none;
    border-radius: 0;
}

.swpm-login-page .page-body .swpm-login-widget-form input[type="text"]:focus,
.swpm-login-page .page-body .swpm-login-widget-form input[type="email"]:focus,
.swpm-login-page .page-body .swpm-login-widget-form input[type="password"]:focus,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="text"]:focus,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="email"]:focus,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="password"]:focus,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="text"]:focus,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="email"]:focus,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="password"]:focus,
.swpm-login-page .page-body form[action*="login"] input[type="text"]:focus,
.swpm-login-page .page-body form[action*="login"] input[type="email"]:focus,
.swpm-login-page .page-body form[action*="login"] input[type="password"]:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: none;
}

/* /login/ のパスワード文字色を常に可視化（wire-mode の変数反転影響を受けない） */
.swpm-login-page .page-body .swpm-login-widget-form input[type="password"],
.swpm-login-page .page-body form[id*="swpm-login"] input[type="password"],
.swpm-login-page .page-body form[name*="swpm-login"] input[type="password"],
.swpm-login-page .page-body form[action*="login"] input[type="password"] {
    color: #1f1f1f !important;
    -webkit-text-fill-color: #1f1f1f !important;
    caret-color: #1f1f1f !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.swpm-login-page .page-body .swpm-login-widget-form input[type="password"]:-webkit-autofill,
.swpm-login-page .page-body .swpm-login-widget-form input[type="password"]:-webkit-autofill:hover,
.swpm-login-page .page-body .swpm-login-widget-form input[type="password"]:-webkit-autofill:focus,
.swpm-login-page .page-body .swpm-login-widget-form input[type="password"]:-webkit-autofill:active,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="password"]:-webkit-autofill,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="password"]:-webkit-autofill:hover,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="password"]:-webkit-autofill:focus,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="password"]:-webkit-autofill:active,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="password"]:-webkit-autofill,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="password"]:-webkit-autofill:hover,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="password"]:-webkit-autofill:focus,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="password"]:-webkit-autofill:active,
.swpm-login-page .page-body form[action*="login"] input[type="password"]:-webkit-autofill,
.swpm-login-page .page-body form[action*="login"] input[type="password"]:-webkit-autofill:hover,
.swpm-login-page .page-body form[action*="login"] input[type="password"]:-webkit-autofill:focus,
.swpm-login-page .page-body form[action*="login"] input[type="password"]:-webkit-autofill:active {
    -webkit-text-fill-color: #1f1f1f !important;
    caret-color: #1f1f1f !important;
    box-shadow: 0 0 0 1000px var(--bg) inset !important;
}

.swpm-login-page .page-body .swpm-remember-me,
.swpm-login-page .page-body .rememberme,
.swpm-login-page .page-body .forgetmenot,
.swpm-login-page .page-body p:has(input[type="checkbox"]) {
    margin: 6px 0 14px;
}

.swpm-login-page .page-body .swpm-remember-me label,
.swpm-login-page .page-body .rememberme label,
.swpm-login-page .page-body .forgetmenot label,
.swpm-login-page .page-body p:has(input[type="checkbox"]) label {
    display: inline-block;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--mute);
    font-weight: 400;
}

/* 汎用 label(block) ルールより優先して、チェック行は常に1行表示 */
.swpm-login-page .page-body input[type="checkbox"] + label,
.swpm-login-page .page-body .swpm-remember-me input[type="checkbox"] + label,
.swpm-login-page .page-body .rememberme input[type="checkbox"] + label,
.swpm-login-page .page-body .forgetmenot input[type="checkbox"] + label {
    display: inline-block !important;
    margin: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle;
}

.swpm-login-page .page-body .swpm-remember-me br,
.swpm-login-page .page-body .rememberme br,
.swpm-login-page .page-body .forgetmenot br,
.swpm-login-page .page-body p:has(input[type="checkbox"]) br {
    display: none !important;
}

.swpm-login-page .page-body input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid var(--rule);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    vertical-align: -2px;
}

.swpm-login-page .page-body input[type="checkbox"]:checked {
    background: var(--ink);
    box-shadow: inset 0 0 0 2px var(--bg);
}

.swpm-login-page .page-body .swpm-login-widget-form input[type="submit"],
.swpm-login-page .page-body .swpm-login-widget-form button,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="submit"],
.swpm-login-page .page-body form[id*="swpm-login"] button,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="submit"],
.swpm-login-page .page-body form[name*="swpm-login"] button,
.swpm-login-page .page-body form[action*="login"] input[type="submit"],
.swpm-login-page .page-body form[action*="login"] button {
    width: 100%;
    min-height: 42px;
    margin: 0;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: 400;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}

.swpm-login-page .page-body .swpm-login-widget-form input[type="submit"]:hover,
.swpm-login-page .page-body .swpm-login-widget-form button:hover,
.swpm-login-page .page-body form[id*="swpm-login"] input[type="submit"]:hover,
.swpm-login-page .page-body form[id*="swpm-login"] button:hover,
.swpm-login-page .page-body form[name*="swpm-login"] input[type="submit"]:hover,
.swpm-login-page .page-body form[name*="swpm-login"] button:hover,
.swpm-login-page .page-body form[action*="login"] input[type="submit"]:hover,
.swpm-login-page .page-body form[action*="login"] button:hover {
    background: #0f0f0f;
    border-color: #0f0f0f;
}

.swpm-login-page .page-body > p,
.swpm-login-page .page-body .swpm-login-widget-action-msg {
    max-width: 480px;
    margin: 10px auto 0;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--mute);
    font-weight: 400;
}

.swpm-login-page .page-body .swpm-login-widget-action-msg,
.swpm-login-page .page-body .swpm-login-widget-action-msg p,
.swpm-login-page .page-body > p,
.swpm-login-page .page-body .swpm-login-widget-action-msg li,
.swpm-login-page .page-body .swpm-login-widget-action-msg span {
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--mute) !important;
    font-weight: 400 !important;
}

/* 下部リンクブロック全体をタグ相当の小さいグレー文字に固定 */
.swpm-login-page .page-body .swpm-login-widget-action-msg,
.swpm-login-page .page-body .swpm-login-widget-action-msg * {
    font-family: var(--font) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--mute) !important;
    font-weight: 400 !important;
}

.swpm-login-page .page-body > p a,
.swpm-login-page .page-body .swpm-login-widget-action-msg a,
.swpm-login-page .page-body .swpm-login-widget-action-msg li a,
.swpm-login-page .page-body .swpm-login-widget-action-msg p a {
    color: var(--mute);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

.swpm-login-page .page-body > p a:hover,
.swpm-login-page .page-body .swpm-login-widget-action-msg a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* SWPM: 上部固定バーのマーキー（ロゴ・サーチバーと共存） */
/* section-title は flex: 1 1 auto なので余白を自動吸収し、サーチバーは右側に残る */
:where(.swpm-page, .swpm-login-page) .section-header.is-stuck :where(.swpm-header-marquee-wrap, .section-title.swpm-header-marquee-wrap) {
    overflow: hidden;
    white-space: nowrap;
}
:where(.swpm-page, .swpm-login-page) .section-header.is-stuck .swpm-header-marquee {
    display: inline-flex;
    align-items: center;
    gap: 0; /* gap は margin-right で代替（-50%ループを正確に合わせるため） */
    white-space: nowrap;
    animation: swpmHeaderMarquee 24s linear infinite;
}
/* 各アイテムの後ろにgapを margin-right で付与。
   これにより total-width = n×(item+gap)×2 となり -50%でピッタリループ */
.swpm-header-marquee .section-marquee-item {
    margin-right: var(--section-marquee-gap, 200px);
}
@keyframes swpmHeaderMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* SWPM: 右下ツール（Editボタン系の見た目に統一） */
.swpm-tools {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + 24px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    z-index: 62;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: center;
    justify-content: flex-end;
    transition: transform 0.34s ease, opacity 0.24s ease;
}
.swpm-tool-link {
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--mute);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    background: var(--bg);
    transition: color 0.15s, border-color 0.15s;
}
.swpm-tool-link:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.swpm-page .page-body a[href*="swpm-logout"],
.swpm-page .page-body a[href*="swpm_to_do=logout"] {
    display: none !important;
}

.swpm-register-note {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--mute);
    letter-spacing: 0;
}

.swpm-login-inline-error {
    margin: 1em 0 0;
    font-size: 16px;
    line-height: 1.25;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0;
}

.swpm-page .page-body .swpm-hidden-optional {
    display: none !important;
}

.swpm-page .page-body .swpm-kv-inline {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
}

.swpm-page .page-body tr.swpm-kv-row {
    margin-bottom: 8px;
}

.swpm-page .page-body tr.swpm-kv-row > th {
    display: none;
}

.swpm-page .page-body tr.swpm-kv-row > td.swpm-kv-inline {
    display: block;
    width: 100%;
    padding: 0;
}

/* SWPM表示行（入力欄なし）を「項目名：内容」の小さいグレー表記に統一 */
.swpm-page .page-body tr:not(:has(input, select, textarea, button)) > th,
.swpm-page .page-body tr:not(:has(input, select, textarea, button)) > td {
    display: inline;
    width: auto;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
}

.swpm-page .page-body tr:not(:has(input, select, textarea, button)) > th::after {
    content: "：";
}

.swpm-page .page-body tr:not(:has(input, select, textarea, button)) {
    margin-bottom: 8px;
}

.swpm-page .page-body .swpm-kv-label {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
    margin: 0 0 6px;
    font-weight: 400;
}

/* SWPM profile: label + input 構造のラベルを小さめグレーに統一 */
.swpm-page .page-body label,
.swpm-page .page-body .swpm-profile-account-view-label,
.swpm-page .page-body .swpm-profile-row-label {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
}

/* SWPM新UI（divベース）: 項目ラベル/補足文をタグ相当の小さめグレーへ */
.swpm-page .page-body .swpm-form-row .swpm-form-label-wrap,
.swpm-page .page-body .swpm-form-row .swpm-form-desc,
.swpm-page .page-body .swpm-form-row .swpm-form-label-wrap label {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
    font-weight: 400;
}

/* SWPMフォームの縦リズムを統一 */
.swpm-page .page-body .swpm-form-row {
    margin: 0 0 14px;
}

.swpm-page .page-body .swpm-form-row .swpm-form-label-wrap {
    margin: 0 0 6px;
}

.swpm-page .page-body .swpm-form-row .swpm-form-input-wrap {
    margin: 0;
}

.swpm-page .page-body .swpm-form-row .swpm-form-desc {
    margin: 6px 0 0;
}

/* SWPMハンドルネーム差し込み行の縦リズムを固定 */
.swpm-page .page-body .swpm-handle-row {
    margin: 14px 0 !important;
}

.swpm-page .page-body .swpm-handle-row > label,
.swpm-page .page-body .swpm-handle-row > th {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
    font-weight: 400;
}

.swpm-page .page-body .swpm-handle-row .swpm-handle-input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    padding: 12px 12px;
    font-family: var(--font);
    font-size: 14px;
}

/* 「会員レベル」等の表示ラベルが入力行に食い込まないよう間隔を確保 */
.swpm-page .page-body .swpm-form-row + .swpm-kv-label,
.swpm-page .page-body .swpm-handle-row + .swpm-kv-label {
    margin-top: 10px;
}

/* SWPM: アカウント削除リンクは目立たせず小さいグレーに */
.swpm-page .page-body .swpm-account-delete-button,
.swpm-page .page-body a.swpm-account-delete-button {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: var(--mute) !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.swpm-page .page-body .swpm-account-delete-button:hover,
.swpm-page .page-body a.swpm-account-delete-button:hover {
    color: var(--ink) !important;
    opacity: 1;
}

.swpm-page .page-body .swpm-level-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    flex-wrap: wrap;
    margin: 2px 0 14px;
}

.swpm-page .page-body .swpm-level-note {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
    font-weight: 400;
}

.swpm-page .page-body .swpm-subscription-inline-link {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
    text-decoration: none;
    border: 0 !important;
}

.swpm-page .page-body .swpm-subscription-inline-wrap {
    margin-left: 4px;
}

.swpm-page .page-body .swpm-subscription-inline-link:hover {
    color: var(--ink);
}

.subscription-title {
    display: block;
    width: 100%;
    justify-self: stretch;
    font-size: clamp(22px, 2.8vw, 36px);
    line-height: 1.2;
    margin: 2.4em 0 0.8em;
}

/* 本文共通 h2 の大きい余白を subscription 見出しには適用しない */
.single-body h2.subscription-title {
    font-size: clamp(22px, 2.8vw, 36px);
    margin: 2.4em 0 0.8em;
}

.subscription-lead {
    margin: 0;
    color: var(--mute);
}

.subscription-flow {
    display: grid;
    gap: 14px;
}

.subscription-step {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .24s ease, transform .24s ease;
    border: 1px solid var(--rule);
    padding: 14px;
    background: rgba(255, 255, 255, 0.34);
}
body.wire-mode .subscription-step {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

.subscription-step.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.subscription-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0;
    margin: 0 0 8px;
}

/* 本文側の p 余白ルールに負けないよう、ステップ見出しの下余白を固定 */
.subscription-page [data-step="2"] > .subscription-label,
.subscription-page [data-step="3"] > .subscription-label {
    margin: 0 0 8px;
}

.subscription-select {
    width: 200px;
    min-height: 35px;
    height: 35px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    padding: 0 10px;
}
body.wire-mode .subscription-select {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--ink);
}
body.wire-mode .subscription-select option {
    background: var(--surface);
    color: var(--ink);
}

.subscription-payments {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.subscription-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.subscription-check input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #ffffff !important;
}

.subscription-result {
    display: grid;
    gap: 12px;
}

.subscription-note {
    margin: 0;
    color: var(--mute);
    font-size: 13px;
    line-height: 1.6;
}

/* Stripe ボタン色の修正 */
button[id*="stripe-button-el"],
.stripe-button-el {
    background-color: #ffffff !important;
    color: #1f1f1f !important;
    border-color: #1f1f1f !important;
}

button[id*="stripe-button-el"]:hover,
.stripe-button-el:hover {
    background-color: #f0f0f0 !important;
}

.subscription-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    font-size: 13px;
    letter-spacing: 0;
    width: fit-content;
}

.subscription-cta:hover {
    background: #0f0f0f;
    border-color: #0f0f0f;
}
body.wire-mode .subscription-cta:hover {
    background: #0f0f0f;
    border-color: var(--ink);
}

/* SWPM決済ボタン（ショートコード出力） */
.subscription-page .swpm-payment-button {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* PayPalはSDKのデフォルト見た目を優先（wrapperは装飾しない） */
.subscription-page .swpm-paypal-subscription-button-wrapper {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

/* Stripeは最低限のプレーン見た目に留める */
.subscription-page .swpm-stripe-buy-now-wrapper .stripe-button-el,
.subscription-page .swpm-stripe-buy-now-wrapper button,
.subscription-page .swpm-stripe-buy-now-wrapper input[type="submit"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 300px !important;
    height: 35px !important;
    padding: 0 12px !important;
    border: none !important;
    background: #3d3d3d !important;
    color: #ffffff !important;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-shadow: none;
    cursor: pointer;
}

.subscription-page .swpm-stripe-buy-now-wrapper .stripe-button-el:hover,
.subscription-page .swpm-stripe-buy-now-wrapper button:hover,
.subscription-page .swpm-stripe-buy-now-wrapper input[type="submit"]:hover {
    background: #525252 !important;
    border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SINGLE ARTICLE — note.com ベースのリーディングレイアウト
══════════════════════════════════════════════════════════════════════════════ */

/* ── アイキャッチ: single-inner 本文幅に合わせる ────────────────────────────── */
.single-eyecatch {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 36px;
}
.single-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%);
    transition: filter 0.4s;
}
body.wire-mode .single-eyecatch img {
    filter: grayscale(80%);
    mix-blend-mode: screen;
    opacity: 0.7;
}

/* ── 本文エリア ─────────────────────────────────────────────────────────────── */
.single-inner {
    width: min(var(--note-body-w), calc(100vw - 128px));
    max-width: var(--note-body-w);
    margin-left: auto;
    margin-right: auto;
    padding: 52px 0 120px;
    transform: translateX(calc(var(--sidebar-w) * -0.5));
}
/* レイアウト差分:
   - single.php は .content ラッパー無し
   - page.php   は .content ラッパー有り
   なので左基準はページ種別で分ける */
:is(.single-article--post, .single-article--page) .single-inner { margin-left: auto; }
/* single/page 共通の本文ラッパー（左右余白はここで一元管理） */
:is(.single-article--post, .single-article--page) {
    padding-left: 0;
    padding-right: 0;
}
:is(.single-article--post, .single-article--page) .single-inner {
    padding-left: 0;
    padding-right: 0;
}

/* メタ行＋タイトルのブロック: バッジをこの右上角に配置 */
.single-header {
    position: relative;
    overflow: hidden;
}

/* ── メタ情報 ──────────────────────────────────────────────────────────────── */
.single-meta {
    margin-bottom: 28px;
}

/* ── SNS シェアボタン ─────────────────────────────────────────────────────── */
.single-share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 40px;
    width: 100%;
}

/* 投稿ページ: SNS + 縦組ボタンをマーキー直下に固定 */
.single-article--post .single-share {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    z-index: 1;
    margin-top: 12px;
    margin-bottom: 40px;
    background: transparent;
}

.single-share.is-fixed {
    position: fixed;
    top: calc(var(--single-share-fixed-top, var(--section-header-h)) + 12px);
    left: var(--single-share-fixed-left, calc(var(--sidebar-w) + 64px));
    right: auto;
    width: var(--single-share-fixed-width, auto);
    z-index: 24;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.single-share.is-fixed.is-idle-hidden {
    transform: translateY(calc(-100% - 10px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.single-share.is-fixed {
    transition: transform 0.24s ease, opacity 0.24s ease;
}

@media (max-width: 900px) {
    .single-share.is-fixed {
        top: calc(var(--section-header-h) * 2);
        left: var(--single-share-fixed-left, 12px);
        right: auto;
        width: var(--single-share-fixed-width, calc(100vw - 24px));
        max-width: none;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .single-article--post .single-share {
        gap: 8px;
    }
    .single-share__btn svg {
        width: 16px;
        height: 16px;
        display: block;
    }
    .single-share__btn--view {
        font-size: 10px;
        min-width: 0;
        white-space: nowrap;
    }
}

.single-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ink, #1f1f1f);
    background: var(--bg, #efefef);
    color: var(--ink, #1f1f1f);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, border-color 0.15s;
    padding: 0;
    font-size: 0;
    position: relative;
    flex-shrink: 0;
    line-height: 1;
}
.single-share__btn--view {
    width: auto;
    min-width: 64px;
    order: 99;
    margin-left: auto;
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0;
}
.single-share__btn:hover {
    opacity: 0.6;
}
.single-share__btn--copy.is-copied::after {
    content: "✓";
    position: absolute;
    right: -9px;
    top: -8px;
    font-size: 10px;
    line-height: 1;
    color: var(--ink, #1f1f1f);
}
body.wire-mode .single-share__btn {
    border-color: var(--ink, #efefef);
    background: var(--bg, #1f1f1f);
    color: var(--ink, #efefef);
}
body.wire-mode .single-share__btn:hover,
body.wire-mode .single-share__btn--copy.is-copied::after {
    color: var(--ink, #efefef);
    opacity: 0.6;
}

/* ── タイトル: work-title をそのまま継承 ───────────────────────────────────── */
.single-title.work-title {
    line-height: 1.1;
    letter-spacing: 0;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
}

/* 本文情報ブロックは note 標準寄りの 620px カラムで中央配置 */
.single-meta,
.single-title.work-title,
.single-share,
.single-body,
.single-vertical-wrap,
.single-more-wrap,
.single-footer {
    max-width: var(--note-body-w);
    margin-left: auto;
    margin-right: auto;
}

.single-vertical-wrap {
    display: block;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    /* scrollIntoView(block:center) の基準をヘッダー2段分（グレーマーキー＋SNSボタン行）＋ツールバー分オフセット */
    scroll-margin-top: 0;
    scroll-margin-bottom: 0;
}
.single-vertical-wrap[hidden] {
    display: none !important;
}
.single-vertical-wrap.is-open {
    opacity: 1;
    transform: translateY(0);
}
.single-vertical-wrap.is-closing {
    opacity: 0;
    transform: translateY(6px);
}
.single-vertical-wrap .anon-novel-viewer {
    opacity: 0;
    transition: opacity 0.24s ease;
}
.single-vertical-wrap.is-open .anon-novel-viewer {
    opacity: 1;
}
.single-article--post .anon-novel-viewer--inline {
    --nv-height: min(78vh, 900px);
}

.single-article--post.is-vertical .single-vertical-wrap {
    display: block !important;
}

/* ── 本文タイポグラフィ ─────────────────────────────────────────────────────── */
.single-body {
    font-family: 'anon-dash', dnp-shuei-nmincho-std,
                 "Yu Mincho", "YuMincho", "游明朝",
                 "Hiragino Mincho ProN", "HiraMinProN-W3",
                 "Noto Serif JP",
                 /* 合成発音区別符号（Zalgo等）のフォールバック: Unicode広域対応ゴシック体 */
                 "Segoe UI", "Arial Unicode MS", "Noto Sans",
                 serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
    color: var(--ink);
}
.single-body p {
    margin-bottom: 0;
}
.single-body h2 {
    font-family: var(--font);
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 2.4em 0 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--rule);
}
.single-body h3 {
    font-family: var(--font);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 2em 0 0.6em;
}

/* 段落直後の見出しは上余白をしっかり確保（single / page 本文のみ） */
.single-body p + h1,
.page-body p + h1 {
    margin-top: 2.6em;
}

.single-body p + h2,
.page-body p + h2 {
    margin-top: 2.4em;
}

.single-body p + h3,
.page-body p + h3 {
    margin-top: 2em;
}

/* 本文先頭が見出しの場合は上余白を無効化 */
.single-body > :is(h1, h2, h3, h4, h5, h6):first-child,
.page-body > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 先頭余白ゼロは本文要素のみ（div等のラッパーには適用しない） */
.single-body > :is(p, ul, ol, blockquote, pre, figure):first-child,
.page-body > :is(p, ul, ol, blockquote, pre, figure):first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.single-body a {
    color: var(--ink);
    text-underline-offset: 3px;
}
.single-body a:hover {
    opacity: 0.6;
}
/* 二重下線回避: underline ではなく border-bottom を優先 */
.single-body a[style*="text-decoration"],
.page-content a[style*="text-decoration"],
.swpm-page .page-body a[style*="text-decoration"],
.single-member-only a {
    text-decoration: none !important;
}
.single-body strong, .single-body b {
    font-weight: 600;
    font-weight: bold;
}
.single-body em, .single-body i {
    font-style: italic;
}
.single-embed-cards .editor-embed-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.single-embed-cards .x-embed-card .twitter-tweet {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
}

/* ── 画像 ──────────────────────────────────────────────────────────────────── */
.single-body figure {
    margin: 2.4em 0;
}
.single-body img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
}
/* リンクカード内の img は固定サイズを維持 */
.single-body img.ext-link-card__thumb,
.x-link-card__media {
    width: var(--link-card-media-w) !important;
    height: var(--link-card-media-h) !important;
    aspect-ratio: 16 / 9 !important;
    max-width: none !important;
    object-fit: contain !important;
}
.single-body figure img,
.single-body div img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.single-body div img {
    width: auto;
    max-width: 100%;
    height: auto;
}
.single-body figcaption {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
}

.single-body figcaption + p {
    margin-top: 1.8em;
}

.single-body .novel-shortcode-marker {
    display: none !important;
}


/* novel-viewer 内の自動挿入 p に本文余白が当たって高さがズレるのを防止 */
.single-body .anon-novel-viewer p,
.single-body-more .anon-novel-viewer p {
    margin: 0 !important;
    padding: 0 !important;
}


/* ── 引用 ──────────────────────────────────────────────────────────────────── */
.single-body blockquote {
    margin: 2em 0;
    padding: 20px 28px;
    border-left: 2px solid var(--ink);
    opacity: 0.75;
}
.single-body blockquote p {
    margin-bottom: 0;
}
.single-body blockquote h4,
.single-body-more blockquote h4 {
    font-family: var(--font);
    font-size: 1em;
    font-weight: 700;
    text-indent: 0;
    padding: 0;
}

/* ── リスト ────────────────────────────────────────────────────────────────── */
.single-body ul,
.single-body ol {
    padding-left: 1.6em;
    margin-bottom: 0;
}
.single-body li {
    margin-bottom: 0.5em;
}

/* ── コード ────────────────────────────────────────────────────────────────── */
.single-body code {
    font-family: 'anon-dash', "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
    font-size: 0.85em;
    background: #0f0f0f;
    color: #efefef;
    padding: 0.15em 0.45em;
    border-radius: 3px;
    letter-spacing: 0;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
}
.single-body pre {
    background: #0f0f0f;
    color: #efefef;
    font-family: 'anon-dash', "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0;
    padding: 20px 24px;
    margin: 2em 0;
    overflow-x: auto;
    border-radius: 4px;
}
/* ── oEmbed（YouTube / Vimeo / Twitter / 汎用 iframe）─────────────────────── */

/* 16:9 アスペクト比コンテナ（Classic Editor の embed-youtube / embed-vimeo） */
.single-body .embed-youtube,
.single-body .embed-vimeo,
.single-body .embed-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 2em 0;
}
.single-body .embed-youtube iframe,
.single-body .embed-vimeo iframe,
.single-body .embed-responsive iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Gutenberg ブロック埋め込み（wp-block-embed） */
.single-body .wp-block-embed {
    margin: 2em 0;
}
.single-body .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.single-body .wp-has-aspect-ratio .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.single-body .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.single-body .wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 汎用 iframe（直書き / その他サービス） */
.single-body iframe {
    max-width: 100%;
    border: none;
}

/* Twitter / X 埋め込み */
.single-body .twitter-tweet,
.single-body .twitter-tweet-rendered {
    margin: 2em auto !important;
}

/* Embed Card: X(Twitter) を本文トーンに合わせる */
.single-body .x-embed-card {
    margin: 1.6em 0;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.single-body .x-embed-card .twitter-tweet {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
.single-body .x-embed-card .twitter-tweet a {
    font-size: 11px !important;
}
.single-body .x-embed-card iframe {
    max-width: 100% !important;
    margin: 0 auto !important;
}
/* カード内は余白を詰める（通常の twitter margin を打ち消す） */
.single-body .x-embed-card .twitter-tweet,
.single-body .x-embed-card .twitter-tweet-rendered {
    margin: 0 auto !important;
}

/* ── Link Cards (Amazon / note embed / external) ─────────────────────────── */
:root {
    --link-card-media-w: 213.3333px; /* 16:9 */
    --link-card-media-h: 120px;
}
.single-body .ext-link-card,
.single-body .external-article-widget {
    margin: 1.6em 0;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
    box-shadow: 0 8px 26px rgba(0,0,0,0.06);
    overflow: hidden;
    font-family: var(--font);
    height: var(--link-card-media-h); /* 120px — カード高さを統一 */
}
.ext-link-card a,
.single-body .external-article-widget > a {
    text-decoration: none;
    border-bottom: none !important;
    color: var(--ink);
}
.single-body .ext-link-card a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--link-card-media-w);
    grid-template-rows: 100%;
    align-items: stretch;
    width: 100%;
    height: 100%;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

/* カード内のDOM順に依存せず、本文=左 / 画像=右 を同一行(row1)に固定 */
.single-body .ext-link-card__body,
.single-body .x-link-card__main,
.single-body .external-article-widget > a:first-of-type {
    grid-column: 1;
    grid-row: 1;
}
.single-body .ext-link-card__thumb,
.single-body .ext-link-card [style*="background-image"],
.single-body .x-link-card__media,
.single-body .external-article-widget-image,
.single-body .external-article-widget-productImage,
.single-body .external-article-widget [style*="background-image"] {
    grid-column: 2;
    grid-row: 1;
}
.single-body .ext-link-card a:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 9999px rgba(8, 18, 28, 0.035);
}
.single-body .ext-link-card__thumb {
    width: var(--link-card-media-w);
    min-width: 0;
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: stretch;
    max-width: none;
    object-fit: contain;
    padding: 8px;
    background: var(--surface);
    border-right: none;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.single-body .ext-link-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 12px;
    flex: 1;
    min-width: 0;
}
.single-body .ext-link-card__title {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 560;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.single-body .ext-link-card__price {
    font-size: 11px;
    color: var(--mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* note native Amazon widget (external-article-widget) */
.single-body .external-article-widget {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--link-card-media-w);
    grid-template-rows: 100%;
    align-items: stretch;
    margin: 1.5em 0;
    border: 1px solid #dfdfdf;
    border-radius: 0;
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(0,0,0,0.035);
}
.single-body .external-article-widget br {
    display: none !important;
}
.single-body .external-article-widget p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    min-height: 0 !important;
}
.single-body .external-article-widget > a:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding: 13px 15px;
    height: 100%;
}
.single-body .external-article-widget > a:first-of-type > * {
    margin: 0 !important;
}
.single-body .external-article-widget-title {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 560;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.single-body .external-article-widget-description {
    display: none;
}
.single-body .external-article-widget-url {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    font-size: 11px;
    line-height: 1.2;
    color: var(--mute);
    font-style: normal;
    padding: 2px 9px;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 0;
    background: rgba(255,255,255,0.8);
}
.single-body .external-article-widget-price {
    margin-top: 1px;
    line-height: 1.2;
}
.single-body .external-article-widget-regularprice {
    font-style: normal;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.2;
}
.single-body .external-article-widget-currency {
    font-size: 11px;
}
.single-body .external-article-widget-update {
    display: block;
    margin-top: 0;
    font-size: 11px;
    line-height: 1.2;
    color: var(--mute);
    font-style: normal;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.single-body .external-article-widget-button {
    margin-top: 4px;
    display: inline-flex;
}
.single-body .external-article-widget-button .a-button {
    display: inline-flex;
    width: auto !important;
    min-height: auto;
    padding: 6px 12px;
    border-radius: 0;
    border: 1px solid #0f1f2f;
    background: #0f1f2f;
    color: #efefff;
}
.single-body .external-article-widget-button .a-button__inner,
.single-body .external-article-widget-button .a-button__label {
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0;
}
.single-body .external-article-widget-image {
    display: block;
    border-left: 1px solid rgba(0,0,0,0.09);
    width: var(--link-card-media-w);
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: stretch;
    object-fit: contain;
}
.single-body .external-article-widget-productImage {
    display: block;
    width: var(--link-card-media-w);
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: stretch;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--surface);
}
/* クラス欠落時のフォールバック:
   note埋め込みで style="background-image:..." だけ残るケースに対応 */
.single-body .external-article-widget [style*="background-image"] {
    display: block;
    width: var(--link-card-media-w);
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: stretch;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: var(--surface);
}

/* 本文中の figure/div 内で background-image が直指定されるケース */
.single-body figure [style*="background-image"],
.single-body div [style*="background-image"] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Generic external link card */
.ext-link-card__thumb {
    width: var(--link-card-media-w);
    min-width: 0;
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: stretch;
    object-fit: contain;
    flex-shrink: 0;
    border-right: none;
    border-left: 1px solid rgba(0,0,0,0.1);
    background: var(--surface);
}
/* .single-body div img の汎用ルールより優先してカードサムネを固定 */
.single-body img.ext-link-card__thumb {
    width: var(--link-card-media-w);
    min-width: 0;
    max-width: none;
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: stretch;
    object-fit: contain;
    background: var(--surface);
}
/* 外部リンクカードでも style="background-image" をサムネとして扱う */
.single-body .ext-link-card [style*="background-image"] {
    display: block;
    width: var(--link-card-media-w);
    min-width: 0;
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: stretch;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: var(--surface);
    border-right: none;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.single-body .ext-link-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px 12px;
    flex: 1;
    min-width: 0;
}
.single-body .ext-link-card__title {
    font-size: 11px;
    line-height: 1.2;
    color: var(--ink);
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.single-body .ext-link-card__desc {
    font-size: 10px;
    color: var(--mute);
    line-height: 1.2;
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.single-body .ext-link-card__domain {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    line-height: 1.2;
    color: var(--mute);
    padding: 2px 8px;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 0;
    background: rgba(255,255,255,0.8);
}
.single-body .ext-link-card__btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 8px;
    font-size: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: #0f1f2f;
    color: #efefff;
}

/* X custom embed card (iframeを使わない統一カード) */
.single-body .x-link-card {
    margin: 1.6em 0;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
    box-shadow: 0 8px 26px rgba(0,0,0,0.06);
    overflow: hidden;
    font-family: var(--font);
    height: var(--link-card-media-h);
}
.single-body .x-link-card a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--link-card-media-w);
    grid-template-rows: 100%;
    align-items: stretch;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border-bottom: none !important;
    color: var(--ink);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.single-body .x-link-card a:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 9999px rgba(8, 18, 28, 0.035);
}
.single-body .x-link-card__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 12px;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}
.single-body .x-link-card__account {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    min-width: 0;
}
.single-body .x-link-card__avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--dim);
}
.single-body .x-link-card__avatar--icon {
    object-fit: contain;
    padding: 4px;
    border-radius: 0;
    background: var(--dim);
}
.single-body .x-link-card__avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    color: rgba(0,0,0,0.75);
    background: linear-gradient(160deg, var(--dim) 0%, var(--dim) 100%);
}
.single-body .x-link-card__names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.single-body .x-link-card__display {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.single-body .x-link-card__handle {
    font-size: 11px;
    line-height: 1.2;
    color: var(--mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.single-body .x-link-card__text {
    font-size: 11px;
    line-height: 1.2;
    color: var(--ink);
    margin-top: 1px;
    margin-bottom: 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.single-body .x-link-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.single-body .x-link-card__likes {
    font-size: 10px;
    color: var(--mute);
}
.single-body .x-link-card__media {
    width: var(--link-card-media-w);
    min-width: 0;
    height: var(--link-card-media-h);
    aspect-ratio: 16 / 9;
    align-self: center;
    object-fit: contain;
    object-position: center center;
    flex-shrink: 0;
    border-left: 1px solid rgba(0,0,0,0.1);
    background: var(--surface);
}
.single-body .x-link-card__media--icon {
    object-fit: contain;
    padding: 24px;
    background: var(--dim);
}
.single-body .x-link-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 700;
    color: rgba(0,0,0,0.72);
    background: linear-gradient(160deg, var(--dim) 0%, var(--dim) 100%);
}

/* 画像カラム寸法を16:9（213.3333x120）で統一 */
.single-body .ext-link-card__thumb,
.single-body img.ext-link-card__thumb,
.single-body .ext-link-card [style*="background-image"],
.single-body .x-link-card__media,
.single-body .external-article-widget-image,
.single-body .external-article-widget-productImage,
.single-body .external-article-widget [style*="background-image"] {
    width: var(--link-card-media-w) !important;
    height: var(--link-card-media-h) !important;
    aspect-ratio: 16 / 9 !important;
    max-width: none !important;
}

/* ダークモード時のリンクカード可読性 */
body.wire-mode .ext-link-card,
body.wire-mode .single-body .external-article-widget {
    border-color: rgba(255,255,255,0.2);
    background: linear-gradient(180deg, rgba(20,20,20,0.95), rgba(12,12,12,0.9));
    box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}
body.wire-mode .ext-link-card a,
body.wire-mode .single-body .external-article-widget > a {
    color: var(--ink);
}
body.wire-mode .ext-link-card__thumb,
body.wire-mode .ext-link-card [style*="background-image"],
body.wire-mode .single-body .external-article-widget-image,
body.wire-mode .single-body .external-article-widget-productImage,
body.wire-mode .single-body .external-article-widget [style*="background-image"] {
    background-color: var(--surface);
    border-left-color: rgba(255,255,255,0.18);
}
body.wire-mode .single-body .external-article-widget-url,
body.wire-mode .ext-link-card__domain {
    color: #bfbfaf;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
}
body.wire-mode .single-body .external-article-widget-update,
body.wire-mode .ext-link-card__desc {
    color: #9f9f9f;
}
body.wire-mode .x-link-card .ext-link-card__thumb--empty {
    color: rgba(255,255,255,0.78);
    background: linear-gradient(160deg, #0f0f0f 0%, var(--surface) 100%);
}
body.wire-mode .x-link-card__handle,
body.wire-mode .x-link-card__likes {
    color: #9f9f9f;
}
body.wire-mode .x-link-card__avatar--empty,
body.wire-mode .x-link-card__media--empty {
    color: rgba(255,255,255,0.78);
    background: linear-gradient(160deg, #0f0f0f 0%, var(--surface) 100%);
}
body.wire-mode .x-link-card {
    border-color: rgba(255,255,255,0.2);
    background: linear-gradient(180deg, rgba(20,20,20,0.95), rgba(12,12,12,0.9));
    box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}
body.wire-mode .x-link-card a {
    color: var(--ink);
}
body.wire-mode .x-link-card__avatar--icon {
    background: var(--surface);
}
body.wire-mode .x-link-card__media {
    border-left-color: rgba(255,255,255,0.18);
    background: var(--surface);
}
body.wire-mode .x-link-card__media--icon {
    background: var(--surface);
}
body.wire-mode .single-body .x-embed-card {
    background: rgba(16, 16, 16, 0.92);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
}

@media (max-width: 900px) {
    .x-link-card__display {
        font-size: 11px;
    }
}

/* Apple Musicも共通ルールに統一（右画像・左テキスト） */

@media (max-width: 640px) {
    :root {
        --link-card-media-w: 160px;
        --link-card-media-h: 90px; /* 16:9 */
    }
    .ext-link-card__body,
    .x-link-card__main,
    .single-body .external-article-widget > a:first-of-type {
        gap: 4px;
        padding: 8px 8px;
    }
    .ext-link-card__title {
        font-size: 10.5px;
        line-height: 1.3;
    }
    .ext-link-card__title {
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ext-link-card__desc,
    .ext-link-card__domain,
    .x-link-card__handle,
    .single-body .external-article-widget-url,
    .single-body .external-article-widget-update {
        font-size: 9px;
    }
    .x-link-card__display,
    .single-body .external-article-widget-title {
        font-size: 11px;
        line-height: 1.3;
    }
    .single-body .external-article-widget-button .a-button {
        margin-top: 3px;
        padding: 4px 8px;
        font-size: 9px;
    }
    .ext-link-card a {
        grid-template-columns: minmax(0, 1fr) var(--link-card-media-w);
    }
    .ext-link-card__thumb,
    .ext-link-card [style*="background-image"] {
        width: var(--link-card-media-w);
        min-width: 0;
        max-width: none;
        border-right: none;
        border-left: 1px solid rgba(0,0,0,0.1);
    }
    .x-link-card a {
        grid-template-columns: minmax(0, 1fr) var(--link-card-media-w);
    }
    .x-link-card__media {
        width: var(--link-card-media-w);
        min-width: 0;
        height: var(--link-card-media-h);
        aspect-ratio: 16 / 9;
        object-fit: contain;
    }
    .single-body .external-article-widget { grid-template-columns: minmax(0, 1fr) var(--link-card-media-w); }
    .single-body .external-article-widget-image {
        order: 0;
        border-left: 1px solid rgba(0,0,0,0.1);
        border-bottom: none;
    }
    .single-body .external-article-widget-productImage {
        width: 100%;
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .single-body .external-article-widget [style*="background-image"] {
        width: 100%;
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

.single-body pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
}

/* ── 区切り線 ──────────────────────────────────────────────────────────────── */
.single-body hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 3em 0;
}
/* ===、***、### などテキスト区切りを非表示 */
.single-body hr.text-divider,
.single-body-more hr.text-divider {
    display: none;
}
/* [enter] ショートコード: 縦組改ページマーカー（通常表示では非表示、横書きエリアでは hr として表示） */
.single-body hr.nv-page-break,
.single-body-more hr.nv-page-break {
    display: none;
}
.novel-inline-target hr.nv-page-break {
    display: block;
}
/* [hr] ショートコード: 前後1行アキの罫線 */
.single-body hr.text-hr,
.single-body-more hr.text-hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 1.8em 0;
}
/* [*] ショートコード: 1行アキ・2字下げ＊・1行アキ */
.single-body p.text-asterisk,
.single-body-more p.text-asterisk,
body.genre-text .single-body p.text-asterisk,
body.genre-text .single-body-more p.text-asterisk {
    margin: 1.8em 0;
    text-indent: 2em;
}

/* ── More button ───────────────────────────────────────────────────────────── */
.single-more-wrap {
    position: relative;
    text-align: center;
    margin: 64px 0 40px;
}
/* 横断線 */
.single-more-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--rule);
    pointer-events: none;
}
.single-more-button {
    position: relative;
    display: inline-block;
    background: var(--bg);
    padding: 0 28px;
    font-family: var(--font);
    font-size: clamp(26px, 3.6vw, 54px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--mute);
    border: none;
    cursor: pointer;
    transition: color 0.25s;
}
.single-more-button:hover { color: var(--ink); }
.single-body-more { margin-top: 0; }
.single-more-paid::before {
    border-top-style: dotted;
}
.single-more-note {
    position: relative;
    display: inline-block;
    background: var(--bg);
    padding: 0 28px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--mute);
    text-align: center;
}

/* 非会員向け会員限定メッセージ */
.single-more-locked::before { opacity: 0.2; }
.single-member-only {
    position: relative;
    display: inline-block;
    background: var(--bg);
    padding: 0 28px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--mute);
    text-align: center;
}
.single-member-only a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}
.single-member-only a:hover {
    border-bottom-color: var(--ink);
}

/* ── ジャンル別スタイル ────────────────────────────────────────────────────── */

/* 空 <p>（段落間アキ）は高さで余白を確保 */
body .single-body p:empty,
body .single-body-more p:empty {
    height: 1.8em;
}

/* 括弧・記号で始まる段落、引用内、最初の段落は字下げしない */
body.genre-text .single-body p.no-indent,
body.genre-text .single-body-more p.no-indent {
    text-indent: 0;
}

/* genre-text: 小説・エッセイ・書評など — 段落冒頭を1字下げ・段落間マージンなし */
body.genre-text .single-body p,
body.genre-text .single-body-more p {
    text-indent: 1em;
    margin-bottom: 0;
}

/* genre-poetry: 短歌・俳句・現代詩 — 字下げなし・行間を広く */
body.genre-poetry .single-body p,
body.genre-poetry .single-body-more p {
    text-indent: 0;
}

/* genre-blog: ブログ・PR・お知らせなど — 字下げなし・ゴシック体 */
body.genre-blog .single-body,
body.genre-blog .single-body-more {
    font-family: var(--font);
}

body.genre-blog .single-body p,
body.genre-blog .single-body-more p {
    text-indent: 0;
}

/* genre-talk: インタビュー・対談・座談会 — 字下げなし・ゴシック体 */
body.genre-talk .single-body,
body.genre-talk .single-body-more {
    font-family: var(--font);
}

body.genre-talk .single-body p,
body.genre-talk .single-body-more p {
    text-indent: 0;
}

/* genre-page: 字下げなし・連続する段落間に余白（未設定時のデフォルト） */
body.genre-page .single-body p,
body.genre-page .single-body-more p {
    text-indent: 0;
}
body.genre-page .single-body p + p,
body.genre-page .single-body-more p + p {
    margin-top: 1.8em !important;
}

/* genre-image: 写真集・漫画など — 字下げなし・テキスト最小化 */
body.genre-image .single-body p,
body.genre-image .single-body-more p {
    text-indent: 0;
}

body.genre-image .single-body img,
body.genre-image .single-body-more img {
    width: 100%;
    max-width: 100%;
}

/* ── フッター ──────────────────────────────────────────────────────────────── */
.single-footer {
    margin-top: 72px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.single-note-link {
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color 0.2s;
}
.single-note-link:hover {
    border-color: var(--ink);
}
.single-back {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
    text-decoration: none;
    transition: color 0.15s;
}
.single-back:hover {
    color: var(--ink);
}
.single-no-content {
    color: var(--mute);
    font-size: 14px;
    letter-spacing: 0;
}

/* ── お知らせ段落 ────────────────────────────────────────────────────────────── */
.single-notice {
    margin-top: 2em;
}
.single-notice p {
    color: var(--mute);
    margin: 0.3em 0;
}

/* ── 固定ページフッター（全ページ共通）──────────────────────────────────────── */
.page-footer {
    margin-top: 72px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-back-to-top,
.page-footer-note {
    font-size: 12px;
    line-height: 1;
    color: var(--mute);
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 左側のリンク（複数リンクの場合） */
.page-footer > a:first-child:not(:only-child) {
    margin-right: auto;
}
/* 単一リンク（トップに戻るのみ）の場合は右寄せ */
.page-footer > a:only-child {
    margin-left: auto;
}
.page-back-to-top:hover,
.page-footer-note:hover {
    color: var(--ink);
}
.page-back-to-top::before {
    content: '\21BA';
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    font-family: 'anon-dash', "Noto Sans Math", sans-serif;
}

/* ── 著者統合バー（管理者専用）────────────────────────────────────────────── */
.admin-merge-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 20px;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
    flex-wrap: wrap;
}
.admin-merge-label {
    white-space: nowrap;
}
.admin-merge-input {
    padding: 4px 8px;
    border: 1px solid var(--rule);
    background: transparent;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--ink);
    outline: none;
    width: 180px;
    -webkit-appearance: none;
}
.admin-merge-input:focus {
    border-color: var(--ink);
}
.admin-merge-btn {
    padding: 4px 12px;
    border: 1px solid var(--rule);
    background: transparent;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.admin-merge-btn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink);
}
.admin-merge-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.admin-merge-status {
    color: var(--mute);
    font-size: 11px;
    letter-spacing: 0;
}

/* ── 管理者向け固定ツール（ログイン中のみ表示） ───────────────────────── */
.admin-tools {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + 24px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    z-index: 60;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    text-transform: uppercase;
    transition: transform 0.34s ease, opacity 0.24s ease;
}
.admin-tools ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.admin-tools li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-tools hr.nav-divider {
    width: 1px;
    height: 12px;
    border: 0;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
    margin: 0 2px;
}
.admin-tools a,
.admin-tools .admin-edit-link {
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: inherit;
    color: var(--ink);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--ink);
    background: var(--bg);
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
}
.admin-tools a:hover,
.admin-tools .admin-edit-link:hover {
    opacity: 0.65;
}
.admin-tools-legal {
    display: none;
}

body.hero-tools-hidden .admin-tools,
body.hero-tools-hidden .swpm-tools {
    opacity: 0;
    pointer-events: none;
}
body.hero-tools-hidden .admin-tools {
    transform: translateY(calc(100% + 36px));
}
body.hero-tools-hidden .swpm-tools {
    transform: translateY(calc(100% + 36px));
}

/* SWPMページでは右下は admin-tools（黒い方）を採用し、swpm-tools は使わない */
body.swpm-page .swpm-tools {
    display: none !important;
}

/* ── モバイル ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .single-eyecatch { width: 100%; margin-bottom: 24px; }
    .single-inner    { padding: 32px 24px calc(120px + env(safe-area-inset-bottom, 0px)); }
    .single-title    { margin-bottom: 40px; }
    .single-footer   { flex-direction: column; align-items: flex-start; }
    .single-meta,
    .single-title.work-title,
    .single-share,
    .single-body,
    .single-more-wrap,
    .single-footer {
        max-width: none;
    }
    .admin-tools,
    .swpm-tools      {
        left: 0;
        right: 0;
        transform: none;
        /* iOSのブラウザUI伸縮時でも崩れないよう、常にviewport下端基準に固定 */
        bottom: 0;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        min-height: var(--section-header-h);
        height: auto;
        padding: 8px 12px 24px;
        overflow: hidden;
        scrollbar-width: none;
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
        background: color-mix(in srgb, var(--bg) 94%, transparent);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 72;
    }
    .admin-tools {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .admin-tools > *:not(.admin-tools-legal) {
        order: 1;
    }
    .admin-tools::-webkit-scrollbar,
    .swpm-tools::-webkit-scrollbar {
        display: none;
    }
    .admin-tools ul,
    .swpm-tools ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        max-width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: 0;
        scrollbar-width: none;
    }
    .admin-tools ul::-webkit-scrollbar,
    .swpm-tools ul::-webkit-scrollbar {
        display: none;
    }
    .admin-tools li,
    .swpm-tools li {
        flex: 0 0 auto;
        margin: 0 8px 0 0;
        padding: 0;
        list-style: none;
    }
    .admin-tools li:last-child,
    .swpm-tools li:last-child {
        margin-right: 0;
    }
    .admin-tools a,
    .admin-tools .admin-edit-link,
    .swpm-tools a,
    .swpm-tool-link {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        line-height: 1.2;
        padding: 6px 12px;
        white-space: nowrap;
    }
    .admin-tools .admin-tools-legal {
        display: flex;
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        line-height: 1.2;
    }
    .admin-tools .admin-tools-legal a,
    .admin-tools .admin-tools-legal a:visited {
        color: var(--mute);
        text-decoration: none;
        font-family: var(--font);
        font-size: 10px;
        letter-spacing: 0;
        border: 0;
        padding: 0;
        min-height: auto;
        background: transparent;
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
        line-break: strict;
    }
    .admin-tools .admin-tools-legal a:hover {
        opacity: 0.72;
    }

    /* ボタン数が最大4件までは均等分割で大きく表示 */
    .admin-tools:has(> a:nth-child(4):last-child),
    .swpm-tools:has(> a:nth-child(4):last-child),
    .admin-tools:has(> ul > li:nth-child(4):last-child),
    .swpm-tools:has(> ul > li:nth-child(4):last-child) {
        overflow-x: hidden;
    }
    .admin-tools:has(> a:nth-child(2):last-child),
    .swpm-tools:has(> a:nth-child(2):last-child),
    .admin-tools:has(> a:nth-child(3):last-child),
    .swpm-tools:has(> a:nth-child(3):last-child),
    .admin-tools:has(> a:nth-child(4):last-child),
    .swpm-tools:has(> a:nth-child(4):last-child) {
        justify-content: space-between;
        gap: 8px;
    }
    .admin-tools:has(> a:nth-child(2):last-child) > a,
    .swpm-tools:has(> a:nth-child(2):last-child) > a,
    .admin-tools:has(> a:nth-child(3):last-child) > a,
    .swpm-tools:has(> a:nth-child(3):last-child) > a,
    .admin-tools:has(> a:nth-child(4):last-child) > a,
    .swpm-tools:has(> a:nth-child(4):last-child) > a {
        flex: 1 1 0;
        min-width: 0;
        min-height: calc(var(--section-header-h) - 16px);
        font-size: 12px;
        letter-spacing: 0;
    }

    .admin-tools:has(> ul > li:nth-child(2):last-child) ul,
    .swpm-tools:has(> ul > li:nth-child(2):last-child) ul,
    .admin-tools:has(> ul > li:nth-child(3):last-child) ul,
    .swpm-tools:has(> ul > li:nth-child(3):last-child) ul,
    .admin-tools:has(> ul > li:nth-child(4):last-child) ul,
    .swpm-tools:has(> ul > li:nth-child(4):last-child) ul {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
        overflow: visible;
    }
    .admin-tools:has(> ul > li:nth-child(2):last-child) li,
    .swpm-tools:has(> ul > li:nth-child(2):last-child) li,
    .admin-tools:has(> ul > li:nth-child(3):last-child) li,
    .swpm-tools:has(> ul > li:nth-child(3):last-child) li,
    .admin-tools:has(> ul > li:nth-child(4):last-child) li,
    .swpm-tools:has(> ul > li:nth-child(4):last-child) li {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0;
    }
    .admin-tools:has(> ul > li:nth-child(2):last-child) li > a,
    .swpm-tools:has(> ul > li:nth-child(2):last-child) li > a,
    .admin-tools:has(> ul > li:nth-child(3):last-child) li > a,
    .swpm-tools:has(> ul > li:nth-child(3):last-child) li > a,
    .admin-tools:has(> ul > li:nth-child(4):last-child) li > a,
    .swpm-tools:has(> ul > li:nth-child(4):last-child) li > a {
        width: 100%;
        min-height: calc(var(--section-header-h) - 16px);
        font-size: 12px;
        letter-spacing: 0;
    }
    body.hero-tools-hidden .admin-tools,
    body.hero-tools-hidden .swpm-tools {
        transform: translateY(calc(100% + 36px));
    }

    /* admin-tools: ボタンテキストがはみ出るときのマーキー */
    .admin-tools a.is-btn-marquee,
    .admin-tools .admin-edit-link.is-btn-marquee {
        overflow: hidden;
        justify-content: flex-start;
    }
    .admin-tools .btn-marquee-track {
        display: inline-block;
        white-space: nowrap;
        will-change: transform;
        animation: adminBtnMarquee var(--btn-marquee-dur, 7s) linear infinite;
    }

    .site-legal-links { display: none !important; }
    .site-copyright {
        position: fixed;
        left: 0;
        right: 0;
        bottom: max(env(safe-area-inset-bottom, 4px), 4px);
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 10px;
        color: var(--mute);
        z-index: 71;
        pointer-events: none;
    }
}

/* ── Search results ─────────────────────────────────────────────────────────── */
.search-count {
    font-size: 11px;
    color: var(--mute);
    letter-spacing: 0;
    padding: 16px 0 0;
}
.search-no-results {
    padding: 48px 0;
    color: var(--mute);
    font-size: 14px;
    letter-spacing: 0;
}

/* ── Text Archive ───────────────────────────────────────────────────────────── */
.text-archive-header {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
}

/* 年別グループ */
.text-archive-year {
    border-bottom: 1px solid var(--rule);
}
.text-archive-year[open] > .text-archive-list {
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.text-archive-year-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 72px 20px 64px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.text-archive-year-heading::-webkit-details-marker { display: none; }

.text-archive-year-num {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink);
    transition: opacity 0.15s;
}
.text-archive-year-heading:hover .text-archive-year-num { opacity: 0.5; }

.text-archive-year-count {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
}

/* 開閉インジケーター */
.text-archive-year-heading::after {
    content: '+';
    margin-left: auto;
    font-size: 18px;
    color: var(--mute);
    line-height: 1;
    transition: transform 0.2s ease;
}
.text-archive-year[open] > .text-archive-year-heading::after {
    content: '−';
}
.text-archive-title {
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ink);
}
.text-archive-list {
    list-style: none;
    margin-left: -64px;
    margin-right: -72px;
}
.text-archive-item {
    padding: 22px 72px 22px 64px;
    border-bottom: 1px solid var(--rule);
}
.text-archive-item--pin {
    background: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 8px,
        rgba(0,0,0,0.06) 8px,
        rgba(0,0,0,0.06) 10px
    );
}
body.wire-mode .text-archive-item--pin {
    background: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 8px,
        rgba(255,255,255,0.06) 8px,
        rgba(255,255,255,0.06) 10px
    );
}
.text-archive-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 6px;
}
.text-archive-author,
.text-archive-likes   { color: var(--ink); }
.text-archive-category,
.text-archive-tags    { color: var(--mute); }
.text-archive-badge {
    font-size: 9px;
    letter-spacing: 0;
    padding: 1px 5px;
    border: 1px solid currentColor;
}
.text-archive-badge--pin { color: var(--ink); }
.text-archive-badge--new { color: var(--ink); }
.text-archive-badge--free { color: var(--ink); }
body.wire-mode .text-archive-badge--new {
    background: #ffffff;
    color: #0f0f0f;
    border-color: #ffffff;
}
.text-archive-item-title {
    font-size: clamp(14px, 1.8vw, 20px);
    font-weight: 400;
    line-height: 1.2;
}
.text-archive-item-title a {
    color: var(--ink);
    text-decoration: none;
    transition: opacity 0.15s;
}
.text-archive-item-title a:hover { opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET / SMALL DESKTOP  (〜1280px, 〜1024px)
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .single-inner {
        /* 左端（マーキー左ライン）を固定しつつ、ブロック中心を画面中心へ */
        width: calc(100vw - (2 * (var(--sidebar-w) + 64px)));
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 44px 0 104px;
        transform: none;
    }
    :is(.single-article--post, .single-article--page) .single-inner { margin-left: 0; }
    :is(.single-article--post, .single-article--page) .single-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .single-article--page .single-inner {
        padding: 0;
    }

    /* /login/ は共通 single-inner 変形の影響を受けないよう固定 */
    .swpm-login-page .single-article--page {
        min-height: calc(100vh - var(--section-header-h));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .swpm-login-page .single-article--page .single-inner {
        width: min(480px, calc(100vw - var(--sidebar-w) - 96px));
        max-width: 480px;
        margin: 0 auto;
        padding: 0;
        transform: translateX(calc(var(--sidebar-w) * -0.5));
    }
}

/* 広い画面では上限720pxを維持 */
@media (min-width: 1281px) {
    :is(.single-article--post, .single-article--page) .single-inner {
        max-width: var(--note-body-w) !important;
    }
}

@media (max-width: 900px) {
    .single-inner {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 36px 0 88px;
        transform: none;
    }
    :is(.single-article--post, .single-article--page) {
        padding-left: var(--entry-gutter);
        padding-right: var(--entry-gutter);
    }
    .page-content {
        margin-left: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE  (〜768px)
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    :root { --sidebar-w: 0px; }
    :root { --section-header-h: clamp(48px, 8vw, 56px); }
    :root { --section-title-size: clamp(24px, 8.2vw, 32px); }

    .swpm-page .single-inner {
        width: 100%;
        max-width: none;
    }
    .swpm-login-page .content.page-content--single {
        min-height: calc(100vh - (52px + var(--section-header-h)));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .swpm-login-page .single-article--page {
        min-height: calc(100vh - (52px + var(--section-header-h)));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .swpm-login-page .single-article--page .single-inner {
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 20px !important;
    }
    .swpm-login-page .page-body .swpm-login-widget-form,
    .swpm-login-page .page-body form[id*="swpm-login"],
    .swpm-login-page .page-body form[name*="swpm-login"],
    .swpm-login-page .page-body form[action*="login"] {
        max-width: none;
        padding: 22px 18px 18px;
    }
    .swpm-page .page-body .swpm-login-widget-form,
    .swpm-page .page-body .swpm-registration-widget-form,
    .swpm-page .page-body .swpm-profile-account-view,
    .swpm-page .page-body .swpm-profile-form,
    .swpm-page .page-body .swpm-pw-reset-widget-form,
    .swpm-page .page-body form[id*="swpm"],
    .swpm-page .page-body form[name*="swpm"],
    .swpm-page .page-body .swpm-form-row,
    .swpm-page .page-body .swpm-form-input-wrap,
    .swpm-page .page-body .swpm-form-field {
        width: 100% !important;
        max-width: none !important;
    }

    .hero { padding: 28px 24px; }
    .hero-nav { top: 24px; right: 24px; gap: 8px; }

    .main-layout {
        padding-left: 0;
        /* フロントページ: ヒーロー直後に NEWS バーが来るので top padding 不要 */
    }
    /* 非フロントページ: サイドバー + 固定ページヘッダー */
    body.no-hero .main-layout {
        padding-top: calc(var(--section-header-h) * 2);
    }
    body.admin-bar.no-hero .main-layout {
        padding-top: calc((var(--section-header-h) * 2) - var(--wp-admin--admin-bar--height, 32px));
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: var(--section-header-h);
        min-height: var(--section-header-h);
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 24px;
        border-right: none;
        border-bottom: 1px solid var(--rule);
        transform: translateY(-8px);
    }
    .sidebar.is-docked {
        transform: translateY(0);
    }
    .no-hero .sidebar {
        transform: translateY(0);
    }

    body:not(.no-hero) #logo {
        display: block !important;
        width: 100px;
        height: auto;
        top: calc((var(--section-header-h) - 100px) / 2);
        left: 16px;
        right: auto;
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
        z-index: 60;
    }
    /* no-hero（非フロントページ）: サイドバーロゴで統一。#logo は前ページで二重になるため非表示 */
    body.no-hero #logo {
        display: none !important;
    }

    .sidebar .anon-login-logo {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        align-self: center;
        justify-self: auto;
        margin: 0;
        order: 2;
        flex-shrink: 0;
    }
    .sidebar .anon-login-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    /* no-hero ではサイドバー内ロゴを常時表示（全ページ統一） */
    body.no-hero .sidebar .anon-login-logo {
        display: inline-flex !important;
    }
    .sidebar .anon-logo-spacer {
        display: none !important;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: auto;
        width: 100%;
        min-width: 0;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        line-height: 1;
        font-size: 14px;
        color: var(--ink);
    }
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    .sidebar-nav > ul {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0 12px 0 0;
        padding: 0;
        list-style: none;
    }
    .sidebar-nav > ul:last-of-type { margin-right: 0; }
    .sidebar-nav > ul > li {
        display: inline-flex;
        flex: 0 0 auto;
        margin: 0 12px 0 0;
        padding: 0;
        list-style: none;
    }
    .sidebar-nav > ul > li:last-child { margin-right: 0; }
    .sidebar-nav a {
        display: inline-block;
        width: auto;
        white-space: nowrap;
        text-decoration: none;
        color: var(--ink);
        line-height: 1;
    }
    .sidebar-about { display: none; }

    .content { padding: 32px 24px 80px; }
    #news.content { padding-top: 0; }
    .work-list { margin-left: -24px; margin-right: -24px; }
    .work-item { padding: 28px 24px 30px; }
    /* .work-meta の gap は 0 固定（セパレーター方式） */
    .section-header {
        margin: 0 -24px 0 -24px;
        padding: 0 24px;
        height: var(--section-header-h);
    }
    .section-header.is-stuck {
        top: var(--section-header-h);
        left: 0;
        right: 0;
        margin: 0;
        padding: 0 24px; /* デスクトップの 64px/72px を上書き */
    }
    .section-header.is-stuck .site-search__input {
        height: calc(var(--section-header-h) - 12px);
        padding: 4px 10px;
        text-align: left;
    }
    .text-archive-list { margin-left: -24px; margin-right: -24px; }
    .text-archive-item { padding: 20px 24px; }
    .text-archive-item-title { font-size: clamp(14px, 4vw, 18px); }
    .text-archive-year-heading { padding: 16px 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SMALL MOBILE  (〜480px)
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    :root { --entry-gutter: 16px; }
    :root { --section-title-size: clamp(20px, 6.5vw, 28px); }
    .site-copyright { display: none !important; }

    .admin-tools .admin-tools-legal {
        position: relative;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
    }
    .admin-tools .admin-tools-legal::after {
        content: "｜";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: var(--mute);
        pointer-events: none;
    }
    .admin-tools .admin-tools-legal a,
    .admin-tools .admin-tools-legal a:visited {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 50%;
        width: 50%;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        padding: 0;
    }
    .admin-tools .admin-tools-legal a::before,
    .admin-tools .admin-tools-legal a::after {
        content: none;
    }

    /* ── Hero ──────────────────────────────────────────────────────────────── */
    .hero { padding: 20px 16px; }
    .hero-nav { top: 16px; right: 16px; gap: 8px; }
    .hero-nav a { font-size: 10px; }
    .hero-title { font-size: clamp(28px, 12vw, 40px); }
    .hero-tagline { margin-top: 14px; font-size: 11px; }

    /* ── Sidebar ───────────────────────────────────────────────────────────── */
    .sidebar {
        height: auto;
        min-height: var(--section-header-h);
        display: flex;
        align-items: center;
        align-content: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 16px;
        gap: 0;
        overflow: visible;
    }
    .sidebar .anon-login-logo {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        margin: 0;
        align-self: center;
        order: 1;
    }
    .sidebar-menu-toggle {
        display: inline-flex;
        order: 3;
        margin-left: auto;
        position: relative;
        right: -16px;
        top: 0;
        height: var(--section-header-h);
        line-height: var(--section-header-h);
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        border: 0;
        background: transparent;
        color: var(--ink);
        font: inherit;
        font-size: 12px;
        letter-spacing: 0;
        text-transform: uppercase;
        line-height: var(--section-header-h);
        cursor: pointer;
    }
    .sidebar-menu-toggle:focus-visible {
        outline: 1px solid var(--ink);
        outline-offset: 2px;
    }
    .sidebar-nav {
        position: static;
        display: block;
        width: 100%;
        order: 4;
        max-height: 0;
        padding: 0;
        overflow: hidden;
        white-space: normal;
        background: var(--bg);
        border-bottom: 0;
        transition: max-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .sidebar.is-menu-open .sidebar-nav {
        max-height: 420px;
    }
    .sidebar-nav > ul {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sidebar-nav > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        min-height: var(--section-header-h);
        border-top: 1px solid var(--rule);
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .2s ease, transform .2s ease;
    }
    .sidebar-nav > ul > li + li {
        border-top: 1px solid var(--rule);
    }
    .sidebar-nav > ul > li:last-child {
        border-bottom: 0;
    }
    .sidebar.is-menu-open .sidebar-nav > ul > li {
        opacity: 1;
        transform: translateY(0);
    }
    .sidebar-nav > ul > li:nth-child(1) { transition-delay: .02s; }
    .sidebar-nav > ul > li:nth-child(2) { transition-delay: .05s; }
    .sidebar-nav > ul > li:nth-child(3) { transition-delay: .08s; }
    .sidebar-nav > ul > li:nth-child(4) { transition-delay: .11s; }
    .sidebar-nav > ul > li:nth-child(5) { transition-delay: .14s; }
    .sidebar-nav > ul > li:nth-child(6) { transition-delay: .17s; }
    .sidebar-nav > ul > li:nth-child(7) { transition-delay: .20s; }
    .sidebar-nav > ul > li:nth-child(8) { transition-delay: .23s; }
    .sidebar-nav > ul > li:nth-child(9) { transition-delay: .26s; }
    .sidebar-nav > ul > li:nth-child(10) { transition-delay: .29s; }
    .sidebar-nav a {
        display: block;
        width: 100%;
        height: var(--section-header-h);
        line-height: var(--section-header-h);
        padding: 0;
        overflow: hidden;
        position: relative;
        white-space: nowrap;
    }
    .sidebar-nav .nav-divider,
    .sidebar-nav hr {
        display: none !important;
    }

    /* ── Layout ────────────────────────────────────────────────────────────── */
    .content { padding: 24px 16px calc(120px + env(safe-area-inset-bottom, 0px)); }
    #news.content { padding-top: 0; }
    /* 本文はメニュー開閉で押し下げない（ヘッダーのみ移動） */
    body.no-hero .main-layout { padding-top: calc(var(--section-header-h) * 2); }
    body.admin-bar.no-hero .main-layout { padding-top: calc(var(--section-header-h) * 2 - var(--wp-admin--admin-bar--height, 46px)); }

    /* ── Section header ────────────────────────────────────────────────────── */
    .section-header {
        height: var(--section-header-h);
        margin: 0 -16px 0 -16px;
        padding: 0 16px;
    }
    .section-header.is-stuck {
        top: var(--sidebar-open-offset, var(--section-header-h));
        padding: 0 16px;
        transition: none;
        will-change: auto;
    }
    .section-title { font-size: var(--section-title-size); }
    .section-header.is-stuck .section-title { font-size: calc(var(--section-title-size) - 2px); }
    .site-search__input {
        width: clamp(100px, 38vw, 150px);
        font-size: clamp(13px, 3.8vw, 18px);
    }

    /* ── Work list ─────────────────────────────────────────────────────────── */
    .work-list  { margin-left: -16px; margin-right: -16px; }
    .work-item  { padding: 20px 16px 22px; }
    .work-title { font-size: clamp(18px, 5.5vw, 26px); }
    .work-meta  { font-size: 10px; }

    /* ── Single ────────────────────────────────────────────────────────────── */
    .single-inner   { padding: 24px 0 64px; transform: none; max-width: 100%; }
    .single-body    { font-size: 15px; }
    /* novel-viewer を画面幅いっぱいに広げる */
    .single-vertical-wrap {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .single-body h2 { font-size: clamp(18px, 5vw, 26px); }
    .single-body h3 { font-size: clamp(15px, 4vw, 20px); }
    .single-title.work-title { margin-bottom: 32px; }
    .single-more-button { font-size: clamp(20px, 6vw, 30px); }

    /* ── Text archive ──────────────────────────────────────────────────────── */
    .text-archive-list         { margin-left: -16px; margin-right: -16px; }
    .text-archive-item         { padding: 16px 16px; }
    .text-archive-item-title   { font-size: clamp(13px, 3.8vw, 16px); }
    .text-archive-year-heading { padding: 14px 16px; }
    .text-archive-year-num     { font-size: clamp(15px, 4vw, 20px); }

    /* ── Page (About etc.) ─────────────────────────────────────────────────── */
    .page-content:not(.page-content--single)    { font-size: 14px; }
    .page-content:not(.page-content--single) h1 { font-size: clamp(24px, 8vw, 40px); margin-bottom: 28px; }

    /* ── Terms ──────────────────────────────────────────────────────────────── */
    .terms-dl dd { font-size: 14px; }
}

/* Tablet (641-900): ロゴを右上寄せ */
@media (min-width: 641px) and (max-width: 900px) {
    .sidebar-nav {
        flex: 1 1 auto;
        width: auto;
        margin-right: 12px;
    }
    .sidebar .anon-login-logo {
        order: 3;
        margin-left: auto;
    }
    body:not(.no-hero) #logo {
        left: auto;
        right: 24px;
        top: calc(var(--section-header-h) / 2);
        width: 30px;
        height: 30px;
        transform: translateY(-50%);
    }
}

@media (max-width: 640px) {
    .single-share.is-fixed {
        top: calc(var(--section-header-h) * 2);
    }
    body:not(.no-hero) #logo {
        width: 75px;
        height: auto;
        top: calc((var(--section-header-h) - 75px) / 2);
        left: 16px;
    }
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.content--404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
.not-found {
    text-align: center;
}
.not-found__code {
    font-family: 'anon-dash', 'Aratana', sans-serif;
    font-size: clamp(80px, 18vw, 160px);
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink);
    margin: 0 0 16px;
}
.not-found__msg {
    font-size: clamp(14px, 2vw, 18px);
    color: var(--ink);
    opacity: 0.6;
    margin: 0 0 40px;
}
.not-found__back {
    display: inline-block;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.not-found__back:hover { opacity: 1; }

/* ── Danmaku (Thanks page) ─────────────────────────────────────────────── */
#danmaku-stage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3; /* sidebar z-index:4 の下 → 左ナビの裏に消える */
}
.danmaku-item {
    position: absolute;
    left: 0;
    white-space: nowrap;
    font-weight: 400;
    color: var(--ink);
    will-change: transform;
    transition-property: transform;
    transition-timing-function: linear;
    line-height: 1;
}







/* ── Terms（特定商取引法） ──────────────────────────────────────────────── */
.terms-heading {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 48px;
}
.terms-dl {
    display: grid;
    grid-template-columns: 10em 1fr;
    gap: 0;
    font-size: clamp(13px, 1.2vw, 15px);
    line-height: 1.8;
    color: var(--ink);
}
.terms-dl dt {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--mute);
    line-height: calc(16px * 1.8);
    padding: 24px 16px 24px 0;
    border-top: 1px solid var(--rule);
    align-self: start;
}
.terms-dl dd {
    margin: 0;
    padding: 24px 0;
    border-top: 1px solid var(--rule);
    font-size: 16px;
    line-height: calc(16px * 1.8);
}
.terms-dl dd p {
    margin: 0 0 0.6em;
}
.terms-dl dd p:last-child { margin-bottom: 0; }
.terms-price-list {
    margin: 0.4em 0 0;
    padding-left: 1.4em;
}
.terms-price-list li {
    padding: 2px 0;
}
.terms-dl dd a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    transition: border-color 0.15s;
}
.terms-dl dd a:hover { border-bottom-color: var(--ink); }
@media (max-width: 640px) {
    .terms-dl {
        grid-template-columns: 1fr;
    }
    .terms-dl dt {
        padding-bottom: 4px;
        border-top: 1px solid var(--rule);
    }
    .terms-dl dd {
        padding-top: 0;
        padding-bottom: 20px;
        border-top: 0;
    }
}

/* ── ログイン画面スタイル ──────────────────────────────────────────────────── */
@font-face {
    font-family: "Aratana";
    src: url("font/Aratana.woff2") format("woff2"),
         url("font/Aratana.woff") format("woff"),
         url("font/Aratana.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    --font: 'anon-dash', "Aratana", "dnp-shuei-gothic-gin-std", "Yu Gothic", "YuGothic",
            "Hiragino Sans", "Noto Sans JP", sans-serif;
    --ink: #1f1f1f;
    --mute: #afafaf;
    --bg: #efefef;
    --rule: rgba(0, 0, 0, 0.08);
    --surface: #ffffff;
    --dim: #efefef;
    --sidebar-w: 200px;
    --section-title-size: clamp(22px, 3.2vw, 38px);
    --section-header-h: calc(var(--section-title-size) + 18px);
    --body-font: "Aratana", "dnp-shuei-gothic-gin-std", "Yu Gothic", "YuGothic",
                 "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* wp-login 上部グレー帯は通常ページと同じ見た目に統一 */
body.login .section-header,
body.login .section-title,
body.login .section-title .marquee-track,
body.login .site-search__input {
    font-family: var(--font);
    font-weight: 400;
}

/* wp-login でもマーキーが必ず見えるように固定（SWPM共通DOM対応） */
body.login .swpm-header-marquee-wrap {
    color: var(--ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
body.login .swpm-header-marquee {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    white-space: nowrap !important;
    animation: swpmHeaderMarquee var(--marquee-dur, 12s) linear infinite !important;
    animation-play-state: running !important;
}
body.login .swpm-header-marquee .section-marquee-item {
    margin-right: var(--section-marquee-gap, 120px) !important;
}

body.login .section-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

body.login .section-header .site-search__input {
    border-color: rgba(0, 0, 0, 0.3);
}
body.login .section-header form.site-search {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    body.login .section-header.is-stuck {
        display: grid !important;
        grid-template-columns: minmax(96px, 1fr) auto !important;
        column-gap: 8px !important;
        align-items: center !important;
    }

    /* モバイル login: タイトル領域を確保してマーキーが見えるようにする */
    body.login .swpm-header-marquee-wrap {
        min-width: 96px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
    body.login .swpm-header-marquee {
        --marquee-dur: 10s;
        gap: 56px !important;
        max-width: none !important;
    }
    body.login .swpm-header-marquee .section-marquee-item {
        margin-right: 0 !important;
        font-size: var(--section-title-size) !important;
        line-height: 1 !important;
        color: var(--ink) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    body.login .section-header .site-search__input {
        width: clamp(92px, 30vw, 132px);
    }
}

body.login .section-header .site-search__input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

body.login {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400 !important;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* wp-login の本文はシステムゴシック固定（太さ暴れ対策） */
body.login #login {
    font-family: var(--body-font) !important;
    font-weight: 400 !important;
}

/* ただし dashicons は専用フォントを維持（目アイコン崩れ防止） */
body.login #login .dashicons,
body.login #login .dashicons::before {
    font-family: "dashicons" !important;
    font-weight: normal !important;
}

#login {
    width: min(480px, calc(100vw - 88px));
    padding: 0 0 28px;
    margin: 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.login h1 { display: none; }

.login form {
    margin-top: 0;
    padding: 24px;
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.login label {
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.3;
    color: #8f8f8f;
    letter-spacing: 0;
    font-weight: 400;
    font-family: var(--font);
}

.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--ink);
    padding: 12px 12px;
    font-family: var(--body-font);
    font-size: 16px;
}
.login form .input,
.login form input[type="text"],
.login form input[type="password"] {
    font-size: 16px;
    line-height: 1.6;
    font-family: var(--body-font);
    font-weight: 400;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: none;
}

/* Autofillの青背景・縮小文字を無効化 */
.login input:-webkit-autofill,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:focus,
.login input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ink);
    font-size: 16px;
    font-family: var(--body-font);
    transition: background-color 9999s ease-out 0s;
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    box-shadow: 0 0 0 1000px var(--bg) inset;
}

.wp-core-ui .button-primary {
    width: 100%;
    min-height: 42px;
    border-radius: 0;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    text-shadow: none;
    box-shadow: none;
    font-family: var(--font);
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 400;
}
.wp-core-ui .button.button-primary {
    font-size: 16px;
    line-height: 1.3;
}

.login #nav,
.login #backtoblog,
.login .message,
.login #login_error,
.login .success {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.login #login_error strong,
.login .message strong,
.login .success strong,
.login #nav strong,
.login #backtoblog strong,
.login p strong,
.login strong {
    font-weight: 400;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
    background: #0f0f0f;
    border-color: #0f0f0f;
}

.login #nav a,
.login #backtoblog a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

.login #nav a:hover,
.login #backtoblog a:hover {
    border-bottom-color: var(--ink);
    opacity: 0.72;
}

.login .message,
.login #login_error,
.login .success {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    background: #efefef;
    color: var(--ink);
    margin: 0 0 14px;
    padding: 12px 14px;
}

.anon-login-shell {
    position: fixed;
    inset: 0;
    z-index: 1;
}

/* 左メニューは /about/ と同じ shared-ui.css / style.css の共通ルールを使用 */

.language-switcher,
.language-switcher select {
    display: none !important;
}

/* wp-login の Caps Lock 警告を非表示 */
body.login #capslock,
body.login #capslock-text,
body.login .capslock,
body.login .caps-lock,
body.login .caps-lock-warning,
body.login [class*="capslock"],
body.login [class*="caps-lock"],
body.login [id*="capslock"],
body.login [id*="caps-lock"] {
    display: none !important;
}

/* wp-login 固定セット（IDベースでブレを抑える） */
body.login #login {
    width: min(480px, calc(100vw - 88px));
}

body.login #login form#loginform {
    width: 100%;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--rule);
    background: transparent;
    box-shadow: none;
}

body.login #login form#loginform p {
    margin: 0 0 14px;
}

body.login #login form#loginform p:last-of-type {
    margin-bottom: 0;
}

body.login #login form#loginform label {
    display: block;
    margin: 0 0 8px;
    font-family: var(--font);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--mute);
    font-weight: 400;
}

body.login #login form#loginform input[type="text"],
body.login #login form#loginform input[type="password"],
body.login #login form#loginform input[type="email"],
body.login #login form#loginform .input {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 12px 12px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    box-shadow: none;
    border-radius: 0;
}

body.login #login form#loginform .wp-pwd {
    display: flex;
    align-items: stretch;
}

body.login #login form#loginform .wp-pwd .input-password-wrap {
    flex: 1 1 auto;
}

body.login #login form#loginform .wp-pwd .button.wp-hide-pw {
    width: 42px;
    min-height: 42px;
    margin: 0 0 0 -1px;
    padding: 0;
    border: 1px solid var(--rule);
    border-left: 0;
    background: transparent;
    color: var(--mute);
    border-radius: 0;
    box-shadow: none;
}

body.login #login form#loginform .wp-pwd .button.wp-hide-pw .dashicons {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 1;
}

body.login #login form#loginform .wp-pwd .button.wp-hide-pw .dashicons::before {
    content: "👁";
    font-family: var(--font);
    font-size: 15px;
    line-height: 1;
}

body.login #login form#loginform input[type="text"]:focus,
body.login #login form#loginform input[type="password"]:focus,
body.login #login form#loginform input[type="email"]:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: none;
}

body.login #login form#loginform .forgetmenot {
    margin: 6px 0 14px;
}

body.login #login form#loginform .forgetmenot label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font);
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute);
    letter-spacing: 0;
}

body.login #login form#loginform input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid var(--rule);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

body.login #login form#loginform input[type="checkbox"]:checked {
    background: var(--ink);
    box-shadow: inset 0 0 0 2px var(--bg);
}

body.login #login form#loginform p.submit {
    margin: 0;
    clear: both;
}

body.login #login form#loginform p.submit .button {
    width: 100%;
    min-height: 42px;
    margin: 0;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: 400;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}

body.login #login .button,
body.login #login .button-secondary {
    min-height: 36px;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
}

body.login #login #nav,
body.login #login #backtoblog {
    margin: 12px 0 0;
    padding: 0;
    font-family: var(--font);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--mute);
}

body.login #login #nav a,
body.login #login #backtoblog a {
    color: var(--mute);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    font-weight: 400;
}

body.login #login #nav a:hover,
body.login #login #backtoblog a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

body.login #login #login_error,
body.login #login .message,
body.login #login .success {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink);
    background: #efefef;
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

/* wp-login 全体の太字を抑制 */
body.login,
body.login #login,
body.login #login *,
body.login #login label,
body.login #login p,
body.login #login a,
body.login #login .button,
body.login #login .button-primary,
body.login #login strong,
body.login #login b {
    font-weight: 400;
    font-style: normal;
}

/* wp-login: /login/ に寄せたタイポグラフィ */
body.login #loginform label,
body.login #login form label {
    display: block;
    margin: 0 0 8px;
    font-family: var(--font);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--mute);
    font-weight: 400;
}

body.login #loginform .input,
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #loginform input[type="email"] {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

body.login .forgetmenot label,
body.login p.forgetmenot label {
    display: inline-block;
    margin: 0;
    font-family: var(--font);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--mute);
    font-weight: 400;
}

/* テキスト要素は明示的に本文フォントへ（* セレクタを使わず安全に） */
body.login #login p,
body.login #login a,
body.login #login label,
body.login #login .button,
body.login #login .button-primary,
body.login #login .message,
body.login #login #login_error,
body.login #login .success {
    font-family: var(--body-font) !important;
    font-weight: 400 !important;
}

/* ─────────────────────────────────────────────────────────
   /login/ (SWPM) 最終上書き
   style.css 側の汎用ルールより後段で確定させる
───────────────────────────────────────────────────────── */
body.swpm-login-page .page-body .swpm-login-widget-form p:has(input[type="text"], input[type="email"], input[type="password"]) > label,
body.swpm-login-page .page-body form[id*="swpm-login"] p:has(input[type="text"], input[type="email"], input[type="password"]) > label,
body.swpm-login-page .page-body form[name*="swpm-login"] p:has(input[type="text"], input[type="email"], input[type="password"]) > label,
body.swpm-login-page .page-body form[action*="login"] p:has(input[type="text"], input[type="email"], input[type="password"]) > label {
    display: block !important;
    margin: 0 0 8px !important;
    font-family: var(--font) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--mute) !important;
    font-weight: 400 !important;
}

body.swpm-login-page .page-body input[type="checkbox"] + label,
body.swpm-login-page .page-body .swpm-remember-me input[type="checkbox"] + label,
body.swpm-login-page .page-body .rememberme input[type="checkbox"] + label,
body.swpm-login-page .page-body .forgetmenot input[type="checkbox"] + label {
    display: inline-block !important;
    margin: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle;
    font-family: var(--font) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--mute) !important;
    font-weight: 400 !important;
}

body.swpm-login-page .page-body .swpm-remember-me br,
body.swpm-login-page .page-body .rememberme br,
body.swpm-login-page .page-body .forgetmenot br,
body.swpm-login-page .page-body p:has(input[type="checkbox"]) br {
    display: none !important;
}

body.swpm-login-page .page-body .swpm-login-widget-action-msg,
body.swpm-login-page .page-body .swpm-login-widget-action-msg *,
body.swpm-login-page .page-body > p,
body.swpm-login-page .page-body .swpm-login-links-outside,
body.swpm-login-page .page-body .swpm-login-links-outside *,
body.swpm-login-page .page-body .swpm-login-links-outside p,
body.swpm-login-page .page-body .swpm-login-links-outside div,
body.swpm-login-page .page-body .swpm-login-links-outside li {
    font-family: var(--font) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--mute) !important;
    font-weight: 400 !important;
}

body.swpm-login-page .page-body .swpm-login-widget-action-msg a,
body.swpm-login-page .page-body .swpm-login-widget-action-msg li a,
body.swpm-login-page .page-body .swpm-login-widget-action-msg p a,
body.swpm-login-page .page-body > p a,
body.swpm-login-page .page-body .swpm-login-links-outside a {
    color: var(--mute) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--rule) !important;
}

body.swpm-login-page .page-body .swpm-login-links-outside {
    margin-top: 16px !important;
}

body.swpm-login-page .page-body .swpm-login-links-outside a {
    display: inline-block !important;
    line-height: 1.6 !important;
}

body.swpm-login-page .page-body .swpm-login-links-outside a + a {
    margin-top: 8px !important;
}

body.swpm-login-page .page-body .swpm-login-links-outside > * + * {
    margin-top: 8px !important;
}

/* /login/ の「会員について」導線は常に非表示 */
body.swpm-login-page .page-body a#register.swpm-login-form-register-link,
body.swpm-login-page .page-body .swpm-login-form-register-link,
body.swpm-login-page .page-body .swpm-login-widget-register-link {
    display: none !important;
}

/* /login/ パスワード入力文字が白/透明になる環境差分を抑止 */
body.swpm-login-page .page-body input[type="password"],
body.swpm-login-page .page-body .swpm-login-widget-form input[type="password"],
body.swpm-login-page .page-body form[id*="swpm-login"] input[type="password"],
body.swpm-login-page .page-body form[name*="swpm-login"] input[type="password"],
body.swpm-login-page .page-body form[action*="login"] input[type="password"] {
    font-family: 'anon-dash', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #1f1f1f !important;
    -webkit-text-fill-color: #1f1f1f !important;
    caret-color: #1f1f1f !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* wp-login 標準フォームでもマスク記号の表示を安定化 */
body.login #login form#loginform input[type="password"],
body.login #loginform input[type="password"],
body.login .wp-pwd input[type="password"] {
    font-family: 'anon-dash', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #1f1f1f !important;
    -webkit-text-fill-color: #1f1f1f !important;
    caret-color: #1f1f1f !important;
    text-shadow: none !important;
}

body.swpm-login-page .page-body input[type="password"]:-webkit-autofill,
body.swpm-login-page .page-body input[type="password"]:-webkit-autofill:hover,
body.swpm-login-page .page-body input[type="password"]:-webkit-autofill:focus,
body.swpm-login-page .page-body input[type="password"]:-webkit-autofill:active {
    -webkit-text-fill-color: #1f1f1f !important;
    caret-color: #1f1f1f !important;
    box-shadow: 0 0 0 1000px var(--bg) inset !important;
}

@media (max-width: 900px) {
    :root { --sidebar-w: 0px; }

    .u-hide-mobile,
    .nav-mobile-hide {
        display: none !important;
    }

    body.login {
        padding-top: 0;
    }

    #login {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: calc(100vw - 24px);
        max-width: none;
        margin: 0;
        padding: 0 0 28px;
    }

    .login #login form,
    .login form#loginform {
        width: 100%;
        padding: 22px 18px 18px;
    }

}


/* ── Contact Form 7 ─────────────────────────────────────────────────────── */
.page-body .wpcf7 {
    margin-top: 40px;
}

.page-body .wpcf7-form {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* 各フィールド行 */
.page-body .wpcf7-form > p {
    margin: 0 0 28px;
}
.page-body .wpcf7-form > p:last-of-type {
    margin-bottom: 0;
}

/* ラベル */
.page-body .wpcf7-form label {
    display: block;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--mute);
}

/* コントロールラップ */
.page-body .wpcf7-form-control-wrap {
    display: block;
    margin-top: 8px;
}

/* テキスト・メール入力 */
.page-body .wpcf7-form-control.wpcf7-text,
.page-body .wpcf7-form-control.wpcf7-email {
    display: block;
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    padding: 12px 12px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.6;
    letter-spacing: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s;
}
.page-body .wpcf7-form-control.wpcf7-text:focus,
.page-body .wpcf7-form-control.wpcf7-email:focus {
    border-color: var(--ink);
}

/* テキストエリア */
.page-body .wpcf7-form-control.wpcf7-textarea {
    display: block;
    width: 100%;
    min-height: 180px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    padding: 12px 12px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.8;
    letter-spacing: 0;
    outline: none;
    box-shadow: none;
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s;
}
.page-body .wpcf7-form-control.wpcf7-textarea:focus {
    border-color: var(--ink);
}
body:is(.page-id-3119, .page-contact) .page-body .wpcf7-form-control.wpcf7-textarea {
    margin-bottom: 16px;
}

/* 送信ボタン */
.page-body .wpcf7-form-control.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 42px;
    padding: 0 24px;
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    border-radius: 0;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.page-body .wpcf7-form-control.wpcf7-submit:hover {
    background: transparent;
    color: var(--ink);
}

/* Contact 送信ボタン: 幅固定・非反転 */
.page-id-3119 .page-body .wpcf7-form-control.wpcf7-submit {
    width: 200px;
    min-width: 200px;
    justify-content: center;
}
.page-id-3119 .page-body .wpcf7-form-control.wpcf7-submit:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* バリデーションエラー */
.page-body .wpcf7-not-valid {
    border-color: var(--ink) !important;
}
.page-body .wpcf7-not-valid-tip {
    display: block;
    margin-top: 5px;
    font-family: var(--font);
    font-size: 11px;
    color: var(--ink);
    letter-spacing: 0;
}

/* 送信結果メッセージ */
.page-body .wpcf7-response-output {
    margin: 24px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--rule);
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink);
    letter-spacing: 0;
    line-height: 1.6;
    background: transparent;
}
.page-body .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--ink);
}
.page-body .wpcf7-form.failed .wpcf7-response-output,
.page-body .wpcf7-form.invalid .wpcf7-response-output {
    border-color: var(--ink);
}

/* スピナー非表示 */
.page-body .wpcf7-spinner {
    display: none;
}

@media (max-width: 480px) {
    .page-body .wpcf7 {
        margin-top: 28px;
    }
    .page-body .wpcf7-form > p {
        margin-bottom: 20px;
    }
}

/* Contact / Confirm 共通調整 */
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7 {
    max-width: 760px;
}
/* contact: <br> なしでも項目間に余白を確保 */
body:is(.page-id-3119, .page-contact) .page-body .wpcf7-form > p:first-of-type > label {
    display: block;
    margin-bottom: 12px;
}
body:is(.page-id-3119, .page-contact) .page-body .wpcf7-form > p:first-of-type > label:last-of-type {
    margin-bottom: 0;
}

body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form > p:first-of-type > label:nth-of-type(-n+3) {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
}
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form > p:first-of-type > label:nth-of-type(-n+3) br {
    display: none;
}
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form > p:first-of-type > label:nth-of-type(-n+3) > .wpcf7-form-control-wrap {
    margin-top: 0;
    min-width: 0;
}
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form > p:first-of-type > label:nth-of-type(-n+3) .wpcf7-form-control.wpcf7-text,
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form > p:first-of-type > label:nth-of-type(-n+3) .wpcf7-form-control.wpcf7-email {
    width: 100%;
}

body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form-control.wpcf7-submit {
    display: block;
    width: 200px;
    min-width: 200px;
    margin: 0 auto;
}
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form-control.wpcf7-submit:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-response-output {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--mute) !important;
}
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form.sent .wpcf7-response-output,
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form.failed .wpcf7-response-output,
body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form.invalid .wpcf7-response-output {
    border: 0 !important;
    color: var(--mute) !important;
}

/* /confirm/ の未入力メッセージを馴染ませる */
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form > p {
    margin-bottom: 0;
    color: var(--mute);
}

body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-details {
    max-width: 640px;
    margin: 0 auto;
    padding: 14px 14px 10px;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-row {
    margin: 0 0 12px;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-row:last-child {
    margin-bottom: 0;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-key {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
    margin-bottom: 4px;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-val {
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Confirm: label ベース構造（推奨） */
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm {
    max-width: 760px;
    margin: 0 auto;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm .cf7-confirm-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink);
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm .cf7-confirm-line > span:first-child,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm .cf7-confirm-block > span:first-child {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--mute);
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm .cf7-confirm-block {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink);
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm .cf7-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
    margin-top: 20px;
}

/* /confirm/ 専用: 戻る + 送信 ボタンレイアウト */
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions br {
    display: none !important;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions > p {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* CF7 が自動挿入する p ラッパを無効化して、ボタンを直接グリッドに乗せる */
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions p {
    display: contents;
    margin: 0;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions input[class*="previous"],
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wpcf7-previous,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wp7c7-previous,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions input[class*="previous"]:hover,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wpcf7-previous:hover,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wp7c7-previous:hover,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions input[type="button"]:hover {
    border-color: var(--rule);
    background: transparent;
    color: var(--ink);
}
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wpcf7-submit,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wp7c7-submit,
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions input[type="submit"],
body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions button[type="submit"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form > p:first-of-type > label:nth-of-type(-n+3) {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    body:is(.page-id-3119, .page-id-3129, .page-contact, .page-confirm) .page-body .wpcf7-form-control.wpcf7-submit {
        width: 100%;
        min-width: 0;
    }

    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-details {
        padding: 12px;
    }
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-val {
        font-size: 13px;
    }
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm .cf7-confirm-line,
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm .cf7-confirm-block {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions input[class*="previous"],
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wpcf7-previous,
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wp7c7-previous,
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions input[type="button"],
    body:is(.page-id-3129, .page-confirm) .page-body .wpcf7-form .cf7-confirm-actions .wpcf7-submit {
        width: 100%;
        min-width: auto;
    }
}