@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Shippori+Mincho:wght@400;700&display=swap');

/* ================================================================
   カラーテーマ変数
================================================================ */
/* デフォルト */
:root {
    --page-bg: #ffffff;
    --paper-bg: #ffffff;
    --accent-bg: #ffffff;
    --ink: #001f3f;
    --tx-body: #001f3f;
    --tx-title: #001f3f;
    --tx-mid: #001f3f;
    --tx-label: #001f3f;
    --tx-sub: #001f3f;
    --tx-hint: #001f3f;
    --tx-muted: #001f3f;
    --rule: #001f3f;
    --rule-soft: #001f3f;
    --rule-faint: #001f3f;
    --danger: #001f3f;
    --danger-hover: #001f3f;
    --reset-color: #001f3f;
    --reset-hover-bg: rgba(0, 31, 63, 0.1);
    --btn-bg: #001f3f;
    --btn-color: #ffffff;
}

/* レトロ */
[data-theme="retro"] {
    --page-bg: #b4a070;
    --paper-bg: #f0ddb0;
    --accent-bg: #e4d0a0;
    --ink: #3a2010;
    --tx-body: #281808;
    --tx-title: #3c2810;
    --tx-mid: #5c3c1c;
    --tx-label: #8a5c2c;
    --tx-sub: #7a4c24;
    --tx-hint: #9a6c30;
    --tx-muted: #be9050;
    --rule: #b08840;
    --rule-soft: #ccaa68;
    --rule-faint: #e4d4a0;
    --danger: #902000;
    --danger-hover: #a83000;
    --reset-color: #902000;
    --reset-hover-bg: #f5e4d5;
    --btn-bg: #3a2010;
    --btn-color: #f0ddb0;
}

/* サイバー */
[data-theme="cyber"] {
    --page-bg: #08101c;
    --paper-bg: #101c2c;
    --accent-bg: #18243a;
    --ink: #00e0ff;
    --tx-body: #c0dcf4;
    --tx-title: #88c8f0;
    --tx-mid: #5090c0;
    --tx-label: #3870a0;
    --tx-sub: #4878a8;
    --tx-hint: #4888b0;
    --tx-muted: #3870a0;
    --rule: #1a3450;
    --rule-soft: #142840;
    --rule-faint: #102030;
    --danger: #ff4040;
    --danger-hover: #ff6060;
    --reset-color: #ff8888;
    --reset-hover-bg: rgba(255, 64, 64, .12);
    --btn-bg: #00e0ff;
    --btn-color: #08101c;
}

/* ネオン */
[data-theme="neon"] {
    --page-bg: #040308;
    --paper-bg: #0a0612;
    --accent-bg: #10081c;
    --ink: #ff00ff;
    --tx-body: #f0d0ff;
    --tx-title: #e080ff;
    --tx-mid: #c050e8;
    --tx-label: #8828b8;
    --tx-sub: #9830c8;
    --tx-hint: #9040c8;
    --tx-muted: #7828a8;
    --rule: #280c48;
    --rule-soft: #1c0838;
    --rule-faint: #14062c;
    --danger: #ff5000;
    --danger-hover: #ff7020;
    --reset-color: #ff6040;
    --reset-hover-bg: rgba(255, 80, 64, .12);
    --btn-bg: #ff00ff;
    --btn-color: #040308;
}

/* マカロン */
[data-theme="macaron"] {
    --page-bg: #d5ebd3;
    --paper-bg: #fffcf9;
    --accent-bg: #ffefed;
    --ink: #eca0b6;
    --tx-body: #5e5055;
    --tx-title: #a2add0;
    --tx-mid: #7e7075;
    --tx-label: #eca0b6;
    --tx-sub: #8e8085;
    --tx-hint: #b8b0b4;
    --tx-muted: #dbd5d7;
    --rule: #f7d6e0;
    --rule-soft: #fbebf0;
    --rule-faint: #fdf5f7;
    --danger: #f2ba7e;
    --danger-hover: #e5a565;
    --reset-color: #a2add0;
    --reset-hover-bg: #f0f3fa;
    --btn-bg: #eca0b6;
    --btn-color: #ffffff;
}

/* キラキラ */
[data-theme="kirakira"] {
    --page-bg: #ece4f4;
    --paper-bg: #fefaff;
    --accent-bg: #f5eeff;
    --ink: #b89400;
    --tx-body: #1e1000;
    --tx-title: #3a2400;
    --tx-mid: #785800;
    --tx-label: #aa8000;
    --tx-sub: #947000;
    --tx-hint: #c8a820;
    --tx-muted: #e0cc60;
    --rule: #d4b030;
    --rule-soft: #e8cc68;
    --rule-faint: #f8f0c0;
    --danger: #cc1166;
    --danger-hover: #dd2277;
    --reset-color: #cc1166;
    --reset-hover-bg: #fde8f2;
    --btn-bg: #b89400;
    --btn-color: #fefaff;
}

/* さくら */
[data-theme="sakura"] {
    --page-bg: #eedada;
    --paper-bg: #fff8fa;
    --accent-bg: #fceef4;
    --ink: #982040;
    --tx-body: #1c080e;
    --tx-title: #3c1020;
    --tx-mid: #701838;
    --tx-label: #a84060;
    --tx-sub: #903858;
    --tx-hint: #c87898;
    --tx-muted: #e0a8c0;
    --rule: #d088a8;
    --rule-soft: #e4b0c8;
    --rule-faint: #f5e0ec;
    --danger: #cc3300;
    --danger-hover: #dd4411;
    --reset-color: #cc3300;
    --reset-hover-bg: #fff0ee;
    --btn-bg: #982040;
    --btn-color: #fff8fa;
}

/* シティポップ */
[data-theme="citypop"] {
    --page-bg: #ffb7b2;
    --paper-bg: #2a2a4a;
    --accent-bg: #32325a;
    --ink: #ffda79;
    --tx-body: #e0e0ff;
    --tx-title: #ff9ee5;
    --tx-mid: #c0c0e0;
    --tx-label: #7bf2da;
    --tx-sub: #a0a0c0;
    --tx-hint: #8080a0;
    --tx-muted: #505070;
    --rule: #5e5e8e;
    --rule-soft: #424266;
    --rule-faint: #323250;
    --danger: #ff6b81;
    --danger-hover: #ff4757;
    --reset-color: #7bf2da;
    --reset-hover-bg: rgba(123, 242, 218, 0.15);
    --btn-bg: #ff9ee5;
    --btn-color: #2a2a4a;
}

/* ヴェイパー */
[data-theme="vapor"] {
    --page-bg: #0a0020;
    --paper-bg: #140030;
    --accent-bg: #1e0048;
    --ink: #ff71ce;
    --tx-body: #a8e8ff;
    --tx-title: #e88aff;
    --tx-mid: #cc50ff;
    --tx-label: #8820c8;
    --tx-sub: #7818b0;
    --tx-hint: #9040c8;
    --tx-muted: #6828a0;
    --rule: #4c10a0;
    --rule-soft: #380c78;
    --rule-faint: #280858;
    --danger: #ff4400;
    --danger-hover: #ff6600;
    --reset-color: #ff71ce;
    --reset-hover-bg: rgba(255, 113, 206, .12);
    --btn-bg: #ff71ce;
    --btn-color: #0a0020;
}

/* 炎 */
[data-theme="flame"] {
    --page-bg: #0c0806;
    --paper-bg: #1a100a;
    --accent-bg: #241408;
    --ink: #ff7200;
    --tx-body: #ffe8c0;
    --tx-title: #ffb040;
    --tx-mid: #e07020;
    --tx-label: #c05010;
    --tx-sub: #d06018;
    --tx-hint: #a84010;
    --tx-muted: #803008;
    --rule: #3a200e;
    --rule-soft: #2c1808;
    --rule-faint: #201008;
    --danger: #ff4400;
    --danger-hover: #ff6600;
    --reset-color: #ff7200;
    --reset-hover-bg: rgba(255, 114, 0, .12);
    --btn-bg: #ff7200;
    --btn-color: #0c0806;
}

/* 8bit */
[data-theme="8bit"] {
    --page-bg: #e0d8c8;
    --paper-bg: #fcf1d8;
    --accent-bg: #f0e4c8;
    --ink: #a80000;
    --tx-body: #3c3c3c;
    --tx-title: #a80000;
    --tx-mid: #686868;
    --tx-label: #a80000;
    --tx-sub: #808080;
    --tx-hint: #909090;
    --tx-muted: #b0b0b0;
    --rule: #d8a000;
    --rule-soft: #e8c878;
    --rule-faint: #f0dfa8;
    --danger: #d80000;
    --danger-hover: #ff0000;
    --reset-color: #a80000;
    --reset-hover-bg: rgba(168, 0, 0, 0.1);
    --btn-bg: #a80000;
    --btn-color: #fcf1d8;
}

/* ハッカー */
[data-theme="hacker"] {
    --page-bg: #050505;
    --paper-bg: #0a0a0a;
    --accent-bg: #111111;
    --ink: #00ff00;
    --tx-body: #00cc00;
    --tx-title: #00ff00;
    --tx-mid: #00aa00;
    --tx-label: #00dd00;
    --tx-sub: #008800;
    --tx-hint: #006600;
    --tx-muted: #004400;
    --rule: #005500;
    --rule-soft: #003300;
    --rule-faint: #002200;
    --danger: #ff0000;
    --danger-hover: #ff3333;
    --reset-color: #00ff00;
    --reset-hover-bg: rgba(0, 255, 0, 0.15);
    --btn-bg: #00ff00;
    --btn-color: #000000;
}

/* チョコミント */
[data-theme="chocomint"] {
    --page-bg: #81d8d0;
    --paper-bg: #a2e8d6;
    --accent-bg: #8addca;
    --ink: #3e2723;
    --tx-body: #4e342e;
    --tx-title: #3e2723;
    --tx-mid: #5d4037;
    --tx-label: #3e2723;
    --tx-sub: #6d4c41;
    --tx-hint: #795548;
    --tx-muted: #8d6e63;
    --rule: #5d4037;
    --rule-soft: #795548;
    --rule-faint: #8d6e63;
    --danger: #ef5350;
    --danger-hover: #f44336;
    --reset-color: #3e2723;
    --reset-hover-bg: rgba(62, 39, 35, 0.1);
    --btn-bg: #3e2723;
    --btn-color: #a2e8d6;
}

/* ハロウィン */
[data-theme="halloween"] {
    --page-bg: #14141e;
    --paper-bg: #1c1c28;
    --accent-bg: #2a2a3c;
    --ink: #ff6b00;
    --tx-body: #e0e0e0;
    --tx-title: #ff9100;
    --tx-mid: #c0c0c0;
    --tx-label: #ab47bc;
    --tx-sub: #9e9e9e;
    --tx-hint: #757575;
    --tx-muted: #616161;
    --rule: #8a2be2;
    --rule-soft: #6a1b9a;
    --rule-faint: #4a148c;
    --danger: #f44336;
    --danger-hover: #e53935;
    --reset-color: #ff6b00;
    --reset-hover-bg: rgba(255, 107, 0, 0.15);
    --btn-bg: #8a2be2;
    --btn-color: #ffffff;
}

/* 紺シンプル */
[data-theme="navy-simple"] {
    --page-bg: #ffffff;
    --paper-bg: #ffffff;
    --accent-bg: #ffffff;
    --ink: #001f3f;
    --tx-body: #001f3f;
    --tx-title: #001f3f;
    --tx-mid: #001f3f;
    --tx-label: #001f3f;
    --tx-sub: #001f3f;
    --tx-hint: #001f3f;
    --tx-muted: #001f3f;
    --rule: #001f3f;
    --rule-soft: #001f3f;
    --rule-faint: #001f3f;
    --danger: #001f3f;
    --danger-hover: #001f3f;
    --reset-color: #001f3f;
    --reset-hover-bg: rgba(0, 31, 63, 0.1);
    --btn-bg: #001f3f;
    --btn-color: #ffffff;
}

/* 紅シンプル */
[data-theme="crimson-simple"] {
    --page-bg: #ffffff;
    --paper-bg: #ffffff;
    --accent-bg: #ffffff;
    --ink: #6b1a1a;
    --tx-body: #6b1a1a;
    --tx-title: #6b1a1a;
    --tx-mid: #6b1a1a;
    --tx-label: #6b1a1a;
    --tx-sub: #6b1a1a;
    --tx-hint: #6b1a1a;
    --tx-muted: #6b1a1a;
    --rule: #6b1a1a;
    --rule-soft: #6b1a1a;
    --rule-faint: #6b1a1a;
    --danger: #6b1a1a;
    --danger-hover: #6b1a1a;
    --reset-color: #6b1a1a;
    --reset-hover-bg: rgba(107, 26, 26, 0.1);
    --btn-bg: #6b1a1a;
    --btn-color: #ffffff;
}

/* 緑シンプル */
[data-theme="green-simple"] {
    --page-bg: #ffffff;
    --paper-bg: #ffffff;
    --accent-bg: #ffffff;
    --ink: #1a4a2a;
    --tx-body: #1a4a2a;
    --tx-title: #1a4a2a;
    --tx-mid: #1a4a2a;
    --tx-label: #1a4a2a;
    --tx-sub: #1a4a2a;
    --tx-hint: #1a4a2a;
    --tx-muted: #1a4a2a;
    --rule: #1a4a2a;
    --rule-soft: #1a4a2a;
    --rule-faint: #1a4a2a;
    --danger: #1a4a2a;
    --danger-hover: #1a4a2a;
    --reset-color: #1a4a2a;
    --reset-hover-bg: rgba(26, 74, 42, 0.1);
    --btn-bg: #1a4a2a;
    --btn-color: #ffffff;
}

/* ピンクシンプル */
[data-theme="pink-simple"] {
    --page-bg: #ffffff;
    --paper-bg: #ffffff;
    --accent-bg: #ffffff;
    --ink: #8b2070;
    --tx-body: #8b2070;
    --tx-title: #8b2070;
    --tx-mid: #8b2070;
    --tx-label: #8b2070;
    --tx-sub: #8b2070;
    --tx-hint: #8b2070;
    --tx-muted: #8b2070;
    --rule: #8b2070;
    --rule-soft: #8b2070;
    --rule-faint: #8b2070;
    --danger: #8b2070;
    --danger-hover: #8b2070;
    --reset-color: #8b2070;
    --reset-hover-bg: rgba(139, 32, 112, 0.1);
    --btn-bg: #8b2070;
    --btn-color: #ffffff;
}

/* モノクロ */
[data-theme="monochrome"] {
    --page-bg: #ffffff;
    --paper-bg: #ffffff;
    --accent-bg: #ffffff;
    --ink: #000000;
    --tx-body: #000000;
    --tx-title: #000000;
    --tx-mid: #000000;
    --tx-label: #000000;
    --tx-sub: #000000;
    --tx-hint: #000000;
    --tx-muted: #000000;
    --rule: #000000;
    --rule-soft: #000000;
    --rule-faint: #000000;
    --danger: #000000;
    --danger-hover: #000000;
    --reset-color: #000000;
    --reset-hover-bg: rgba(0, 0, 0, 0.1);
    --btn-bg: #000000;
    --btn-color: #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page-bg);
    font-family: 'Noto Serif JP', serif;
    color: var(--tx-body);
}

/* ================================================================
   用紙全体
================================================================ */
.resume-wrapper {
    width: calc(100vw - 96px);
    max-width: 1400px;
    aspect-ratio: 297 / 210;
    margin: 16px auto 32px;
    position: relative;
}

.resume-paper {
    position: absolute;
    top: 0;
    left: 0;
    width: 1400px;
    height: 990px;
    transform-origin: top left;
    transform: scale(var(--resume-scale, 1));
    overflow: hidden;
    box-shadow: 0 6px 48px rgba(28, 25, 23, .12), 0 1px 4px rgba(28, 25, 23, .07);
    border: 1.5px solid var(--ink);
    background: var(--paper-bg);
}

.resume-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ================================================================
   2カラムレイアウト（JIS履歴書準拠）
================================================================ */
.resume-columns {
    display: flex;
    flex: 1;
}

/* 左列：ヘッダー + 氏名情報 + 音楽歴 */
.resume-col-left {
    flex: 1;
    min-width: 0;
    border-right: 1.5px solid var(--ink);
    display: flex;
    flex-direction: column;
}

/* 右列：最近の曲 + アーティスト + 自己PR */
.resume-col-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ================================================================
   左列：ヘッダー
================================================================ */
.resume-header {
    border-bottom: 2px double var(--ink);
    padding: 10px 20px 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.resume-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .6em;
    font-family: 'Shippori Mincho', serif;
    margin: 0;
}

.resume-date {
    font-size: .85rem;
    color: var(--tx-mid);
    letter-spacing: .05em;
}

.resume-url {
    font-size: .65rem;
    color: var(--tx-muted);
    letter-spacing: .03em;
}

/* ================================================================
   左列：氏名・写真ブロック
================================================================ */
.info-row {
    display: flex;
    border-bottom: 1.5px solid var(--ink);
}

.name-block {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.name-sub-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.name-sub-row:last-child {
    border-bottom: none;
}

.field-label {
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--tx-label);
}

.name-input,
.furigana-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    color: var(--tx-body);
    font-family: 'Noto Serif JP', serif;
    padding: 2px 0;
    line-height: 1.4;
    vertical-align: middle;
}

.name-input {
    font-size: 2rem;
}

.furigana-input {
    font-size: 1rem;
    color: var(--tx-mid);
}

.name-input:focus,
.furigana-input:focus {
    border-bottom: 1px solid var(--ink);
}

/* ================================================================
   左列：音楽歴テーブル
 ================================================================ */
.history-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.col-header {
    display: flex;
    align-items: center;
    background: var(--accent-bg);
    border-bottom: 1px solid var(--ink);
    padding: 4px 12px;
    gap: 10px;
}

.col-header-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--tx-title);
    white-space: nowrap;
}

/* 時代グループ（セル結合相当） */
.era-group {
    display: flex;
    border-bottom: 1px solid var(--rule);
}

.era-group:last-child {
    border-bottom: none;
}

.row-era {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    writing-mode: vertical-rl;
    letter-spacing: .12em;
    color: var(--tx-mid);
    background: var(--accent-bg);
    border-right: 1px solid var(--rule);
}

.era-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 音楽歴の1行 */
.history-row {
    display: flex;
    border-bottom: 1px solid var(--rule-soft);
    height: 63px;
    overflow: hidden;
    padding: 4px 0;
}

.history-row:last-child {
    border-bottom: none;
}

/* ================================================================
   右列：各セクション
 ================================================================ */
.right-section {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.right-section-grow {
    flex: 1;
    border-bottom: none;
}

.section-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--tx-title);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--rule);
}


.pr-area {
    width: 100%;
    border: none;
    resize: none;
    font-family: 'Noto Serif JP', serif;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--tx-mid);
    background: transparent;
    outline: none;
    flex: 1;
    padding: 2px 0;
    min-height: 38px;
}

/* ================================================================
   フッター
 ================================================================ */
.resume-footer {
    padding: 14px 40px;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: center;
}

/* ================================================================
   ツールバー（サイト上部・デバイス別）
 ================================================================ */
.desktop-toolbar {
    max-width: 1400px;
    width: calc(100vw - 96px);
    margin: 32px auto -4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 500;
}

.mobile-toolbar {
    display: none;
    /* デフォルト非表示 */
}

.toolbar-left {
    display: flex;
    gap: 12px;
}

.reset-btn {
    background: var(--paper-bg);
    color: var(--reset-color);
    border: 1.5px solid var(--reset-color);
    padding: 12px 24px;
    font-family: 'Noto Serif JP', serif;
    font-size: .8rem;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .2s, color .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reset-btn:hover {
    background: var(--reset-hover-bg);
}

.gen-btn {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1.5px solid var(--btn-bg);
    padding: 12px 48px;
    font-family: 'Noto Serif JP', serif;
    font-size: .8rem;
    letter-spacing: .3em;
    cursor: pointer;
    transition: opacity .2s, letter-spacing .2s;
}

.gen-btn:hover {
    opacity: .82;
    letter-spacing: .35em;
}

.danger-btn {
    background: var(--danger);
    border-color: var(--danger);
}

.danger-btn:hover {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

.tb-text {
    display: none;
}


/* ================================================================
   モーダル
 ================================================================ */
.modal-bg {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-box {
    background: var(--paper-bg);
    width: 100%;
    max-width: 500px;
    box-shadow: 0 8px 40px rgba(28, 25, 23, .22);
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.modal-head {
    padding: 14px 18px;
    border-bottom: 1.5px solid var(--rule-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--accent-bg);
}

.modal-title {
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--tx-label);
}

.modal-close:hover {
    color: var(--tx-body);
}

.modal-body {
    padding: 14px 18px;
}

.modal-search {
    display: flex;
    border: 1px solid var(--ink);
}

.modal-input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-family: 'Noto Serif JP', serif;
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.modal-search-btn {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    padding: 12px 20px;
    font-size: .9rem;
    letter-spacing: .15em;
    cursor: pointer;
    font-family: 'Noto Serif JP', serif;
}

.modal-results {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 12px;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--rule-faint);
    transition: background .15s;
}

.result-item:hover {
    background: var(--accent-bg);
}

.result-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 4px;
}

.result-name {
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.result-artist {
    font-size: .8rem;
    color: var(--tx-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 共通の自動省略スタイル */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 音楽歴スロット内の楽曲情報 */
.slot-track-info {
    font-size: .85rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    min-width: 0;
}

/* ================================================================
   音楽歴行の内部（スロットコンテンツ）
 ================================================================ */
.row-note {
    flex: 1;
    border: none;
    font-family: 'Noto Serif JP', serif;
    font-size: .85rem;
    line-height: 1;
    color: var(--tx-title);
    background: transparent;
    outline: none;
    padding: 0;
    width: 100%;
}

.row-note::placeholder {
    color: var(--tx-muted);
}

/* ================================================================
   ベスト/最近の曲スロット行
 ================================================================ */
.best-slots-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}


/* ================================================================
   エクスポート専用スタイル
 ================================================================ */
.resume-export-wrapper {
    padding: 60px;
    background: var(--page-bg);
    display: inline-block;
}

.is-exporting .resume-paper {
    border: 4px solid var(--ink) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    transform: none !important;
    position: relative !important;
}

/* テーマ別の特殊な枠線デザイン */
[data-theme="cyber"] .is-exporting .resume-paper {
    border: 4px solid var(--ink) !important;
    box-shadow: 0 0 30px var(--ink), inset 0 0 15px var(--ink) !important;
}

[data-theme="neon"] .is-exporting .resume-paper {
    border: 4px solid var(--ink) !important;
    box-shadow: 0 0 40px var(--ink), 0 0 10px #fff !important;
}

[data-theme="retro"] .is-exporting .resume-paper {
    border: 8px double var(--ink) !important;
}

[data-theme="8bit"] .is-exporting .resume-paper {
    border: 6px ridge var(--ink) !important;
}

[data-theme="hacker"] .is-exporting .resume-paper {
    border: 3px solid var(--ink) !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.4) !important;
}

[data-theme="vapor"] .is-exporting .resume-paper {
    border: 5px solid var(--ink) !important;
    box-shadow: 8px 8px 0 var(--tx-title), -8px -8px 0 var(--tx-label) !important;
}

[data-theme="citypop"] .is-exporting .resume-paper {
    border: 5px solid var(--ink) !important;
    border-radius: 4px !important;
}

/* ================================================================
   レスポンシブ（スマホ：1カラム、入力特化型UI）
 ================================================================ */
@media (max-width: 680px) {
    body {
        background: var(--page-bg) !important;
        padding-bottom: 100px !important;
    }

    html body .resume-wrapper {
        width: 100% !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 32px 32px !important;
    }

    html body .resume-paper {
        margin: 0 !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    /* 2カラム → 1カラム */
    html body .resume-columns {
        flex-direction: column !important;
        gap: 12px !important;
        display: flex !important;
    }

    html body .resume-col-left,
    html body .resume-col-right {
        width: 100% !important;
        flex: none !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ヘッダーのスタック表示 */
    html body .resume-header {
        padding: 20px 16px 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center !important;
        /*border: 1.5px solid var(--ink) !important;*/
        border-radius: 0 !important;
        /*background: var(--paper-bg) !important;*/
        border-bottom: none !important;
        display: flex !important;
    }

    html body .resume-title {
        font-size: 1.6rem !important;
        letter-spacing: 0.3em !important;
        margin: 0 !important;
        display: block !important;
    }

    html body .resume-date {
        font-size: 0.85rem !important;
        position: static !important;
        display: block !important;
    }

    /* プロフィールを全幅で縦並びに（写真を上に） */
    html body .info-row {
        flex-direction: column !important;
        border: 1.5px solid var(--ink) !important;
        border-radius: 0 !important;
        display: flex !important;
        gap: 0 !important;
        background: var(--paper-bg) !important;
    }

    html body .name-block {
        width: 100% !important;
        flex: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: transparent !important;
    }

    /* 写真部分を独立させて上に & 小さく中央揃え */
    html body .resume-wrapper .resume-paper .resume-columns .resume-col-left .info-row>div[style*="width:105px"] {
        width: 100% !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 16px !important;
        height: auto !important;
        order: -1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 写真スロット自体のサイズ制限（正方形に変更） */
    html body .resume-wrapper .resume-paper .resume-columns .resume-col-left .info-row>div[style*="width:105px"]>div[style*="width:100%"] {
        width: 100px !important;
        height: 100px !important;
        padding-top: 0 !important;
        /* インラインの padding-top: 100% をリセット */
        margin: 0 auto !important;
        position: relative !important;
    }

    html body .name-sub-row {
        padding: 14px 16px !important;
        background: transparent !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        border-bottom: 1.5px solid var(--ink) !important;
    }

    html body .name-input {
        font-size: 1.8rem !important;
        text-align: center !important;
        padding: 8px 0 !important;
    }

    /* アカウント入力 */
    html body .info-row textarea.furigana-input {
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        padding: 4px 0 !important;
        font-size: 0.9rem !important;
        resize: none !important;
        overflow: hidden !important;
        white-space: pre-wrap !important;
        word-break: break-all !important;
        box-sizing: border-box !important;
    }

    /* 音楽歴セクション */
    .history-section {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: var(--paper-bg) !important;
        border: 1.5px solid var(--ink) !important;
        border-radius: 0 !important;
    }

    /* 見出し（カード化） */
    html body .col-header {
        border: none !important;
        border-bottom: 1px solid var(--ink) !important;
        border-radius: 0 !important;
        background: var(--accent-bg) !important;
        padding: 12px 16px !important;
        justify-content: center !important;
    }

    html body .col-header-label {
        font-size: 1rem !important;
    }

    .era-group {
        flex-direction: column !important;
        border: none !important;
        border-bottom: 1px solid var(--rule) !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        overflow: hidden !important;
        display: flex !important;
    }

    .era-group:last-child {
        border-bottom: none !important;
    }

    .row-era {
        width: 100% !important;
        height: auto !important;
        padding: 8px 12px !important;
        writing-mode: horizontal-tb !important;
        border-right: none !important;
        border-bottom: 1.5px solid var(--ink) !important;
        font-size: 0.95rem !important;
        font-weight: bold !important;
        background: var(--accent-bg) !important;
    }

    .history-row {
        height: auto !important;
        min-height: 72px !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--rule-soft) !important;
        align-items: center !important;
        display: flex !important;
        gap: 12px !important;
    }

    .history-row:last-child {
        border-bottom: none !important;
    }

    .history-row [id^="slot-container-"] {
        flex: 1 !important;
        width: auto !important;
        height: auto !important;
        min-height: 56px !important;
        align-items: center !important;
        overflow: visible !important;
    }

    /* ジャケット画像部分（空・入力済み両方の先頭div）を56x56に固定 */
    .history-row [id^="slot-container-"]>div:first-child {
        width: 56px !important;
        height: 56px !important;
        flex: 0 0 56px !important;
    }

    .history-row .slot-empty,
    .history-row .jacket-img-container img {
        width: 56px !important;
        height: 56px !important;
        object-fit: cover !important;
    }

    .history-row .slot-track-info {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
    }

    .history-row .row-note {
        font-size: 0.95rem !important;
    }

    /* 右列：カラム内セクション */
    html body .resume-col-right .right-section {
        border: 1.5px solid var(--ink) !important;
        margin: 0 !important;
        padding: 16px 14px !important;
        background: var(--paper-bg) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html body .resume-col-right .right-section:last-child {
        border: 1.5px solid var(--ink) !important;
    }

    /* ベスト曲スロットを1列・横並びに変更（一問一曲風） */
    html body .best-slots-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* 各スロットコンテナ（画像＋テキスト）を横並びに */
    html body .best-slots-row [id^="slot-container-"] {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* ジャケット画像・空スロットのサイズ固定 */
    html body .best-slots-row .slot-empty,
    html body .best-slots-row div[style*="width:100%;padding-top:100%"],
    html body .best-slots-row img {
        width: 56px !important;
        height: 56px !important;
        flex: 0 0 56px !important;
        padding-top: 0 !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    /* テキスト部分の調整 */
    html body .best-slots-row div[style*="padding-top:4px"],
    html body .best-slots-row div[style*="padding-top:6px"] {
        padding-top: 0 !important;
        flex: 1 !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    /* 右セクション内の横並び指定を強制解除 */
    html body .resume-col-right .right-section[style*="flex-direction:row"] {
        flex-direction: column !important;
        display: flex !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    html body .resume-col-right .right-section[style*="flex-direction:row"]>div {
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        flex: none !important;
    }

    html body .resume-col-right .right-section[style*="flex-direction:row"]>div:last-child {
        border-bottom: none !important;
    }

    /* 一問一曲を1列に */
    html body .resume-col-right .right-section>div[style*="flex-wrap:wrap"]>div {
        width: 100% !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 1px solid var(--rule-faint) !important;
        padding: 0 0 12px 0 !important;
        margin: 0 0 12px 0 !important;
    }

    html body .resume-col-right .right-section>div[style*="flex-wrap:wrap"]>div:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* PR・ジャンル入力 */
    .pr-area {
        min-height: 140px !important;
        padding: 12px !important;
        background: var(--accent-bg) !important;
        border: 1px solid var(--rule) !important;
        border-radius: 0 !important;
    }

    /* ツールバーの切り替え */
    .desktop-toolbar {
        display: none !important;
    }

    .mobile-toolbar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--paper-bg) !important;
        backdrop-filter: none !important;
        margin: 0 !important;
        padding: 10px 10px 16px !important;
        z-index: 10000 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important;
        border-top: 1.5px solid var(--ink) !important;
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        gap: 8px !important;
        align-items: flex-end !important;
    }


    .gen-btn {
        flex: 1 !important;
        height: 52px !important;
        padding: 0 10px !important;
        font-size: 1.0rem !important;
        border-radius: 8px !important;
        font-weight: bold !important;
    }

    .theme-toggle-btn {
        width: 64px !important;
        height: auto !important;
        padding: 4px 0 !important;
        border-radius: 8px !important;
        border: none !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
    }


    .theme-menu {
        flex: 0 0 64px !important;
    }

    .reset-btn {
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    /* ツールバー内のテキストはデスクトップ版では非表示 */
    .tb-text {
        display: block !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: inherit !important;
        letter-spacing: normal !important;
        margin-top: 2px !important;
    }



    .tb-icon {
        display: block !important;
        margin: 0 auto !important;
        width: 1.4rem !important;
        height: 1.4rem !important;
    }

    .danger-btn {
        flex: 0 0 52px !important;
        width: 52px !important;
        height: auto !important;
        padding: 4px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: var(--danger) !important;
        border: none !important;
        gap: 1px !important;
    }

    /* 重複していたテーマボタンの固定サイズ指定を削除 */
    .theme-toggle-btn {
        width: 64px !important;
        height: auto !important;
        padding: 4px 0 !important;
    }

    .theme-current-dot {
        margin: 0 !important;
        width: 22px !important;
        height: 22px !important;
    }

}

.best-slots-row>* {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    width: 0;
}

/* ================================================================
   テーマセレクター
================================================================ */
.theme-menu {
    position: relative;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--paper-bg);
    color: var(--tx-title);
    border: 1px solid var(--rule);
    padding: 12.5px 16px;
    font-family: 'Noto Serif JP', serif;
    font-size: .75rem;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .15s;
}

.theme-toggle-btn:hover {
    background: var(--accent-bg);
}

.theme-current-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid var(--ink);
}

/* ---- パネルヘッダー ---- */
.theme-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--accent-bg);
    border-bottom: 1px solid var(--rule-soft);
}

.theme-panel-title {
    font-family: 'Noto Serif JP', serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tx-title);
}

.theme-panel-close {
    background: transparent;
    border: none;
    color: var(--tx-mid);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s, transform .2s;
}

.theme-panel-close:hover {
    color: var(--danger);
    transform: scale(1.1);
}

/* ---- デスクトップ: 共通パネル ---- */
.theme-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--paper-bg);
    border: 1.5px solid var(--ink);
    box-shadow: 0 12px 60px rgba(0, 0, 0, .3);
    width: 90%;
    max-width: 420px;
    z-index: 11000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    border-radius: 0;
    overflow: hidden;
}

.theme-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.theme-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10500;
    display: none;
}

.theme-backdrop.is-open {
    display: block;
}

/* ---- 2カラムグリッド ---- */
.theme-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

/* ---- カードスタイルのオプション ---- */
.theme-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    background: var(--accent-bg);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: 'Noto Serif JP', serif;
    font-size: .8rem;
    letter-spacing: .02em;
    color: var(--tx-title);
    cursor: pointer;
    text-align: left;
    transition: transform .1s, border-color .15s, background .15s;
}

.theme-option:hover {
    border-color: var(--ink);
    background: var(--paper-bg);
}

.theme-option:active {
    transform: scale(0.97);
}

.theme-option.active {
    background: var(--paper-bg);
    border: 2px solid var(--ink);
    font-weight: 700;
}

.theme-option.active .theme-option-dot {
    box-shadow: 0 0 0 2px var(--paper-bg), 0 0 0 4px var(--ink);
}

.theme-option.active .theme-option-label {
    font-weight: 700;
}

/* ---- ドット ---- */
.theme-option-dot {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid var(--ink);
}

.theme-option-label {
    font-size: .7rem;
    line-height: 1;
    white-space: nowrap;
}

/* ---- バックドロップ ---- */
.theme-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 9998;
    backdrop-filter: blur(2px);
}

.theme-backdrop.is-open {
    display: block;
}

/* ---- モバイル: ボトムシート ---- */
@media (max-width: 680px) {
    .theme-panel {
        position: fixed;
        inset: 0;
        left: 0 !important;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100% !important;
        height: 100vh !important;
        transform: scale(1.1) translateY(10px) !important;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding-bottom: env(safe-area-inset-bottom, 20px);
        transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .3s;
        opacity: 0;
        min-width: unset;
        display: flex;
        flex-direction: column;
        z-index: 11000;
    }

    .theme-panel.is-open {
        transform: scale(1) translateY(0) !important;
        opacity: 1;
    }

    .theme-panel-header {
        padding: calc(env(safe-area-inset-top, 20px) + 16px) 20px 16px;
        border-bottom: 1.5px solid var(--ink);
    }

    .theme-option-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 20px;
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }

    .theme-option {
        padding: 14px 12px;
        gap: 12px;
        border-radius: 4px;
    }

    .theme-option-dot {
        width: 20px;
        height: 20px;
    }

    .theme-option-label {
        font-size: .68rem;
    }
}

/* ================================================================
   ガイドセクション（PNG出力対象外・ページ下部）
================================================================ */
.guide-section {
    width: calc(100vw - 48px);
    max-width: 1400px;
    margin: 0 auto 64px;
    font-family: 'Noto Serif JP', serif;
    color: var(--tx-body);
}

.guide-block {
    padding: 40px 48px;
}

.guide-rule {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 0 48px;
}

.guide-heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: 'Shippori Mincho', serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .25em;
    color: var(--tx-title);
    margin: 0 0 24px;
    padding-bottom: 10px;
    border-bottom: 2px double var(--ink);
}

.guide-heading-num {
    font-size: .85rem;
    letter-spacing: .1em;
    color: var(--tx-muted);
    font-weight: 400;
    flex-shrink: 0;
}

.guide-body {
    font-size: .9rem;
    line-height: 2;
    letter-spacing: .05em;
    color: var(--tx-body);
    margin: 0 0 16px;
}

.guide-body:last-child {
    margin-bottom: 0;
}

.guide-body--lead {
    color: var(--tx-mid);
    font-size: .88rem;
    margin-bottom: 24px;
}

.guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule-faint);
}

.guide-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.guide-step-num {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .05em;
    flex-shrink: 0;
    width: 36px;
    text-align: right;
    padding-top: 2px;
    line-height: 1;
}

.guide-step-body {
    flex: 1;
    min-width: 0;
}

.guide-step-title {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tx-title);
    margin-bottom: 6px;
}

.guide-step-desc {
    font-size: .85rem;
    line-height: 1.9;
    letter-spacing: .04em;
    color: var(--tx-sub);
    margin: 0;
}

.guide-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 14px 18px;
    background: var(--accent-bg);
    border-left: 3px solid var(--rule);
}

.guide-note-icon {
    font-size: .85rem;
    color: var(--tx-muted);
    flex-shrink: 0;
    line-height: 1.9;
}

.guide-note p {
    font-size: .8rem;
    line-height: 1.9;
    letter-spacing: .04em;
    color: var(--tx-muted);
    margin: 0;
}

.guide-policy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--rule-faint);
}

.guide-policy-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--rule-faint);
}

.guide-policy-item:nth-child(odd) {
    padding-right: 32px;
    border-right: 1px solid var(--rule-faint);
}

.guide-policy-item:nth-child(even) {
    padding-left: 32px;
}

.guide-policy-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.guide-policy-title {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--tx-title);
    margin: 0 0 6px;
}

@media (max-width: 680px) {
    .guide-section {
        width: 100%;
        margin: 0 0 100px;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .guide-block {
        padding: 28px 20px;
    }

    .guide-rule {
        margin: 0 20px;
    }

    .guide-heading {
        font-size: 1rem;
        letter-spacing: .15em;
        gap: 12px;
        margin-bottom: 18px;
    }

    .guide-body {
        font-size: .88rem;
        line-height: 1.9;
    }

    .guide-step {
        flex-direction: column;
        gap: 8px;
        padding: 18px 0;
    }

    .guide-step-num {
        width: auto;
        text-align: left;
        font-size: 1.1rem;
    }

    .guide-step-title {
        font-size: .88rem;
    }

    .guide-step-desc {
        font-size: .83rem;
    }

    .guide-note {
        flex-direction: column;
        gap: 4px;
        padding: 12px 14px;
    }

    .guide-policy-grid {
        grid-template-columns: 1fr;
    }

    .guide-policy-item:nth-child(odd) {
        padding-right: 0;
        border-right: none;
    }

    .guide-policy-item:nth-child(even) {
        padding-left: 0;
    }

    .guide-policy-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--rule-faint);
    }

    .guide-policy-item:last-child {
        border-bottom: none;
    }
}

.site-footer {
    text-align: center;
    padding: 24px 0 48px;
    font-family: 'Noto Serif JP', serif;
    font-size: .8rem;
    color: var(--tx-muted);
    letter-spacing: .08em;
}

.site-footer-sep {
    margin: 0 10px;
    opacity: .4;
}

.site-footer-link {
    color: var(--tx-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer-link:hover {
    color: var(--tx-body);
}

@media (max-width: 680px) {
    .site-footer {
        padding-bottom: 120px;
    }
}