/*
 * retro.css — 90年代風レトロデザイン (ベース: 橙色 #ff8000 を厳守)
 * 参照: docs/cms-spec.md 4.6 / retro_design_plan.md
 */

:root {
    --retro-orange-base: #ff8000;
    --retro-orange-dark: #cc6600;
    --retro-orange-light: #ffa64d;
    --retro-navy: #000080;
    --retro-win-gray: #c0c0c0;
    --retro-win-light: #ffffff;
    --retro-win-dark: #808080;
    --retro-win-darker: #000000;
    --retro-yellow: #ffff00;
    --retro-red: #cc0000;
    --retro-link-blue: #0000ee;
    --retro-link-visited: #551a8b;
}

/* 点滅テキスト (2Hz < 3Hz 安全マージン確保) */
.blink-text {
    animation: blink-opacity 0.5s step-end infinite;
}

@keyframes blink-opacity {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 工事中バナー: background-positionではなく擬似要素のtransformスライドで合成層GPU処理 */
.construction-banner {
    position: relative;
    overflow: hidden;
    color: #111111;
    font-weight: bold;
    text-align: center;
    padding: 0.75em 1em;
    border: 3px solid #111111;
    text-shadow: 1px 1px 0 #ffffff;
    background-color: #ffe000;
    z-index: 1;
}

.construction-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -56px;
    width: calc(100% + 112px);
    height: 100%;
    background-image: repeating-linear-gradient(
        45deg,
        #ffe000 0,
        #ffe000 20px,
        #111111 20px,
        #111111 40px
    );
    z-index: -1;
    animation: construction-stripe-shift 4s linear infinite;
    will-change: transform;
}

@keyframes construction-stripe-shift {
    from { transform: translateX(0); }
    to { transform: translateX(56px); }
}

.visitor-counter {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-weight: bold;
    border: 2px inset #808080;
    padding: 0.25em 0.6em;
    background: #001a00;
    color: #00ff40;
    letter-spacing: 1px;
}

.kiriban-banner {
    display: none;
    border: 2px dashed #cc0000;
    padding: 0.5em 1em;
    color: #111111;
    background: #fff6d8;
}

/*
 * --- ヘッダーロゴ帯(RetroElements::siteLogo()) ---
 * WordArt風タイトル・チロルのスクロール文言・レインボー罫線。
 * .site-header-table は装飾用table(role="presentation")のラッパーで、
 * cellpadding/cellspacing/border/width等の非推奨HTML属性は使わずCSSのみでサイズ・余白を制御する。
 */
.site-header-table {
    border-collapse: collapse;
    width: 100%;
    border: 0;
}

.site-header-table td {
    padding: 0;
}

.title-cell {
    text-align: center;
    padding: 10px 6px;
    overflow: hidden;
}

/* ロゴ画像(WebP)。幅は親に追従し、縦横比はCSSで固定してレイアウトずれを防ぐ。 */
.site-logo-img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 1000 / 440;
}

/* 橙背景の上でもコントラストが取れるよう、白地+濃紺文字の箱にする。 */
.subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: #000080;
    background: #ffffff;
    border: 2px solid #000080;
    padding: 2px 10px;
    margin-top: 6px;
}

/*
 * .marquee-wrap: marqueeタグ(非推奨・停止手段なし)の代替。CSSアニメーションでスクロールさせ、
 * prefers-reduced-motionでは下の媒体クエリでアニメーションを止め、静的な左寄せ表示に切り替える。
 */
.marquee-wrap {
    background: #000080;
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 0;
}

.marquee-wrap span {
    display: inline-block;
    padding-left: 100%;
    color: #00ff00;
    font-weight: bold;
    font-size: 13px;
    animation: marquee-scroll 14s linear infinite;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.rainbow-hr {
    height: 5px;
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
    border: 0;
    margin: 0;
}

.eyecatch { margin: 0 0 1em; }
.eyecatch-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/*
 * prefers-reduced-motion 対応: 必ず上の基本ルールより後に置くこと(同一詳細度の上書きはCSS記載順で決まるため)。
 */
@media (prefers-reduced-motion: reduce) {
    .blink-text,
    .construction-banner {
        animation: none !important;
    }

    .marquee-wrap span {
        animation: none;
        padding-left: 8px;
    }

    .starfield {
        animation: none;
    }
}

/*
 * ページ全体の背景: 橙地に、棘丸ゴシックの「音質派」を斜めに薄く繰り返す。
 * ロゴタイルは重ねない。本文とサイドバーは白地。
 */
body {
    /* 完全画像レス: CSSのみ(インラインSVGタイル)で描くピクセル壁紙 + 斜め「音質派」文字 */
    background-color: #ff8000;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%2523ff9a2e%22%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22/%3E%3Crect%20x%3D%22112%22%20y%3D%2240%22%20width%3D%2216%22%20height%3D%228%22/%3E%3Crect%20x%3D%2232%22%20y%3D%22136%22%20width%3D%228%22%20height%3D%228%22/%3E%3Crect%20x%3D%22136%22%20y%3D%22144%22%20width%3D%228%22%20height%3D%228%22/%3E%3C/g%3E%3Cg%20fill%3D%22%2523f06a00%22%3E%3Crect%20x%3D%2248%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22/%3E%3Crect%20x%3D%22152%22%20y%3D%2272%22%20width%3D%228%22%20height%3D%228%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2280%22%20width%3D%228%22%20height%3D%228%22/%3E%3C/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523e01000%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%22113%22%20y%3D%2213%22%20width%3D%226%22%20height%3D%226%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2890%2C%2090%29%20rotate%28-28%29%20scale%280.0166%2C%20-0.0166%29%20translate%28-3072%2C%20-1224%29%22%20fill%3D%22%2523e65c00%22%20fill-opacity%3D%220.42%22%3E%3Cpath%20d%3D%22M653%201038Q578%201199%20479%201372H404Q284%201372%20164%201252V1625Q284%201505%20404%201505H942V1624Q942%201706%201024.0%201706.0Q1106%201706%201106%201624V1505H1644Q1764%201505%201884%201625V1252Q1764%201372%201644%201372H1559Q1494%201192%201395%201038H1706Q1826%201038%201946%201158V787Q1876%20857%201805%20886Q1686%20648%201686%20528V76Q1686%20-44%201806%20-164H1522V-76H526V-164H242Q362%20-44%20362%2076V528Q362%20648%20243%20886Q172%20857%20102%20787V1158Q222%201038%20342%201038ZM657%201372Q749%201208%20825%201038H1214Q1324%201197%201393%201372ZM526%20414H1522V635H526ZM526%20287V55H1522V287ZM1804%20887Q1755%20907%201706%20907H342Q293%20907%20244%20887Q483%20768%20602%20768H1446Q1565%20768%201804%20887Z%22%20transform%3D%22translate%280%2C%200%29%22/%3E%3Cpath%20d%3D%22M1126%201563Q1530%201569%201860%201645L1898%201520Q1626%201459%201274%201442Q1272%201423%201271.0%201404.0Q1270%201385%201268%201368H1720Q1840%201368%201960%201488V1125Q1840%201245%201720%201245H1686V1136Q1686%201059%201609.0%201059.0Q1532%201059%201532%201136V1245H1247Q1219%201123%201151%201042L1008%201102Q1089%201198%201113%201354Q1126%201439%201126%201563ZM281%201563Q684%201569%201014%201645L1051%201520Q779%201459%20426%201442Q424%201423%20424.0%201404.0Q424%201385%20422%201368H819Q939%201368%201059%201488V1405Q1059%201245%20899%201245H840V1136Q840%201059%20763.0%201059.0Q686%201059%20686%201136V1245H403Q380%201128%20330%201028H1515Q1635%201028%201875%201148Q1755%20908%201755%20788V410Q1755%20290%201875%2050Q1635%20170%201515%20170H1307Q1692%2055%201931%20-66L1862%20-190Q1603%20-57%201214%2066L1257%20170H788L838%2080Q610%20-66%20174%20-174L119%20-45Q498%2047%20729%20170H533Q413%20170%20173%2050Q293%20290%20293%20410V965Q244%20888%20176%20821L92%20973Q223%201110%20261%201314Q281%201422%20281%201563ZM457%20774H1591V905H457ZM457%20666V532H1591V666ZM457%20424V293H1591V424Z%22%20transform%3D%22translate%282048%2C%200%29%22/%3E%3Cpath%20d%3D%22M129%20-68Q330%20219%20453%20565L584%20510Q459%20134%20254%20-152ZM156%201178Q353%201033%20526%20870L432%20762Q268%20918%2063%201071ZM494%201239Q326%201396%20160%201522L252%201628Q442%201485%20588%201348ZM1970%20811Q1827%20659%201665%20547Q1761%20214%201966%20-20L1853%20-150Q1672%2061%201564.0%20369.5Q1456%20678%201436%201069L1249%201051V97Q1249%20-23%201369%20-143H972Q1092%20-23%201092%2097V1038Q978%201032%20866%201032Q857%20405%20738%2054Q699%20-62%20647%20-158L514%20-63Q674%20239%20708%20777Q721%20972%20721%201223V1509Q1296%201509%201843%201628L1880%201491Q1453%201392%20866%201374V1165Q1266%201171%201660%201236Q1785%201256%201894%201282L1927%201151Q1774%201114%201581%201087Q1591%20870%201630%20692Q1769%20794%201876%20909Z%22%20transform%3D%22translate%284096%2C%200%29%22/%3E%3C/g%3E%3C/svg%3E");
    image-rendering: pixelated;
}

header,
.breadcrumbs,
footer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 2カラム構成: メイン本文は左、サイドバー(aside)は右 */
.site-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 12px auto;
    padding: 0 10px;
    box-sizing: border-box;
}

main {
    flex: 1 1 0;
    min-width: 0;
    background: #ffffff;
    padding: 24px;
    margin: 0;
    box-sizing: border-box;
}

aside {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    padding: 20px;
    margin: 0;
    box-sizing: border-box;
}

@media (max-width: 860px) {
    .site-content {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 0;
    }
    main {
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
    }
    aside {
        width: 100%;
        margin-top: 12px;
    }
}

/*
 * --- 追加レトロ要素(ウェルカムバナー・ウェブリング・ゲストブック・星空背景) ---
 */

.site-topbar { text-align: center; padding: 10px 8px 0; }
@font-face {
    font-family: "Toge Maru Gothic";
    src: url("toge-maru-regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
.welcome-banner-row {
    display: block;
    text-align: center;
    margin: 6px 0 8px;
    width: 100%;
    overflow: hidden;
}

.counter-row {
    display: block;
    text-align: center;
    margin: 4px 0 8px;
    width: 100%;
}

.welcome-banner {
    text-align: center;
    font-family: "Toge Maru Gothic", sans-serif;
    font-weight: 400;
    font-size: 1.4em;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 2px 2px 0 #ffffff, -2px -2px 0 #ffffff, -2px 2px 0 #ffffff, 2px -2px 0 #ffffff, 0 2px 0 #ffffff, 0 -2px 0 #ffffff, 2px 0 0 #ffffff, -2px 0 0 #ffffff;
    display: inline-block !important;
    animation: welcome-shuttle 6s ease-in-out infinite !important;
    will-change: transform;
    transform-origin: center center;
}

@keyframes welcome-shuttle {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    3% { transform: translate3d(-110px, -8px, 0) rotate(0deg); }
    6% { transform: translate3d(0, 0, 0) rotate(0deg); }
    9% { transform: translate3d(110px, -8px, 0) rotate(0deg); }
    12% { transform: translate3d(0, 0, 0) rotate(0deg); }
    15% { transform: translate3d(-120px, -8px, 0) rotate(0deg); }
    18% { transform: translate3d(0, 0, 0) rotate(0deg); }
    21% { transform: translate3d(120px, -8px, 0) rotate(0deg); }
    24% { transform: translate3d(0, 0, 0) rotate(0deg); }
    27% { transform: translate3d(-110px, -8px, 0) rotate(0deg); }
    30% { transform: translate3d(0, 0, 0) rotate(0deg); }
    33% { transform: translate3d(110px, -8px, 0) rotate(0deg); }
    36% { transform: translate3d(0, 0, 0) rotate(0deg); }
    37%, 48% { transform: translate3d(0, 0, 0) rotate(0deg); }
    52% { transform: translate3d(0, -14px, 0) rotate(180deg); }
    56% { transform: translate3d(0, 0, 0) rotate(360deg); }
    60% { transform: translate3d(0, -8px, 0) rotate(540deg); }
    64% { transform: translate3d(0, 0, 0) rotate(720deg); }
    65%, 72% { transform: translate3d(0, 0, 0) rotate(720deg); }
    75% { transform: translate3d(-110px, -8px, 0) rotate(720deg); }
    78% { transform: translate3d(0, 0, 0) rotate(720deg); }
    81% { transform: translate3d(110px, -8px, 0) rotate(720deg); }
    84% { transform: translate3d(0, 0, 0) rotate(720deg); }
    87% { transform: translate3d(-100px, -8px, 0) rotate(720deg); }
    90% { transform: translate3d(0, 0, 0) rotate(720deg); }
    93% { transform: translate3d(100px, -8px, 0) rotate(720deg); }
    96% { transform: translate3d(0, 0, 0) rotate(720deg); }
    100% { transform: translate3d(0, 0, 0) rotate(720deg); }
}

@media (max-width: 600px) {
    .welcome-banner {
        animation-name: welcome-shuttle-mobile !important;
    }
}

@keyframes welcome-shuttle-mobile {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    3% { transform: translate3d(-35px, -5px, 0) rotate(0deg); }
    6% { transform: translate3d(0, 0, 0) rotate(0deg); }
    9% { transform: translate3d(35px, -5px, 0) rotate(0deg); }
    12% { transform: translate3d(0, 0, 0) rotate(0deg); }
    15% { transform: translate3d(-40px, -5px, 0) rotate(0deg); }
    18% { transform: translate3d(0, 0, 0) rotate(0deg); }
    21% { transform: translate3d(40px, -5px, 0) rotate(0deg); }
    24% { transform: translate3d(0, 0, 0) rotate(0deg); }
    27% { transform: translate3d(-35px, -5px, 0) rotate(0deg); }
    30% { transform: translate3d(0, 0, 0) rotate(0deg); }
    33% { transform: translate3d(35px, -5px, 0) rotate(0deg); }
    36% { transform: translate3d(0, 0, 0) rotate(0deg); }
    37%, 48% { transform: translate3d(0, 0, 0) rotate(0deg); }
    52% { transform: translate3d(0, -10px, 0) rotate(180deg); }
    56% { transform: translate3d(0, 0, 0) rotate(360deg); }
    60% { transform: translate3d(0, -6px, 0) rotate(540deg); }
    64% { transform: translate3d(0, 0, 0) rotate(720deg); }
    65%, 72% { transform: translate3d(0, 0, 0) rotate(720deg); }
    75% { transform: translate3d(-35px, -5px, 0) rotate(720deg); }
    78% { transform: translate3d(0, 0, 0) rotate(720deg); }
    81% { transform: translate3d(35px, -5px, 0) rotate(720deg); }
    84% { transform: translate3d(0, 0, 0) rotate(720deg); }
    87% { transform: translate3d(-30px, -5px, 0) rotate(720deg); }
    90% { transform: translate3d(0, 0, 0) rotate(720deg); }
    93% { transform: translate3d(30px, -5px, 0) rotate(720deg); }
    96% { transform: translate3d(0, 0, 0) rotate(720deg); }
    100% { transform: translate3d(0, 0, 0) rotate(720deg); }
}

.webring-nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5em;
    border: 2px solid #111111;
    background: #ffffff;
    padding: 0.5em 1em;
    margin: 0.5em 0;
}

/*
 * .guestbook-link: ヘッダー課題のときに意図的に見送ったボタン風ベベル(.win-btn等)は
 * このファイルに存在しない(再利用元なし)ため、フラットな枠線のみで構成する。
 */
.guestbook-link {
    text-align: center;
    background: #fdfdf0;
    border: 1px solid #999999;
    padding: 0.4em;
    margin: 0.5em auto;
}

/*
 * .starfield: 本文(main/aside)の白背景の下、orange body背景の上に重なる固定の星空レイヤー。
 * main/asideは自身のbackground:#ffffffで不透明に覆うため、starfieldの上に隠れる心配はない。
 * クリックを奪わないようpointer-events:noneにし、横スクロールを生まないようinsetで固定する。
 * 星の模様は工事中バナーの斜めストライプと同じ手法(repeating-linear-gradient)で作る。
 */
.starfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: transparent;
    background-image:
        radial-gradient(circle, #ffffff 1px, transparent 1.5px),
        radial-gradient(circle, #ffffff 1px, transparent 1.5px);
    background-size: 60px 60px, 90px 90px;
    background-position: 0 0, 30px 40px;
    animation: starfield-twinkle 3.5s ease-in-out infinite;
}

@keyframes starfield-twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.9;
    }
}

/*
 * --- モバイル横はみ出し対策(375px幅で固定幅iframe・長いpre・広い表が本文を押し広げないようにする) ---
 */
html,
body {
    max-width: 100%;
    overflow-x: clip; /* hiddenだとbodyがスクロールコンテナになり position:sticky が効かない */
}

main,
aside {
    min-width: 0;
    overflow-wrap: anywhere;
}

main img,
main iframe,
main video,
main embed,
aside img,
aside iframe,
aside video,
aside embed {
    max-width: 100%;
}

main img,
aside img {
    height: auto;
}

main iframe,
aside iframe {
    width: 100%;
}

/* 16:9 にするのは動画系だけ。楽曲派.com などの埋め込みは height 属性の固定高さを活かす(崩すと編曲欄などが切れる) */
main iframe[src*="youtube"],
main iframe[src*="youtu.be"],
main iframe[src*="vimeo"],
main iframe[src*="nicovideo"],
aside iframe[src*="youtube"],
aside iframe[src*="youtu.be"],
aside iframe[src*="vimeo"],
aside iframe[src*="nicovideo"] {
    height: auto;
    aspect-ratio: 16 / 9;
}

main pre,
aside pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    font-family: Consolas, Menlo, "Courier New", monospace;
}

/* コードブロックの「コピー」ボタン(retro.js initCodeBlocks) */
.code-wrap { position: relative; max-width: 100%; margin: 0 0 1em; border: 1px solid #888; background: #f6f6f6; }
.code-bar { display: flex; justify-content: space-between; align-items: center; min-height: 24px; padding: 2px 4px; background: #d4d0c8; border-bottom: 1px solid #888; }
.code-lang { font: 12px/1.4 Consolas, Menlo, monospace; color: #222; }
.code-wrap > pre { margin: 0; padding: 8px 10px; background: #f6f6f6; color: #24292e; border: 0; }
.code-copy {
    font: 12px/1.4 "MS PGothic", sans-serif;
    padding: 1px 6px;
    color: #000;
    background: #e8e5de;
    border: 2px outset #fff;
    cursor: pointer;
}
.code-copy:active { border-style: inset; }
.code-copy:focus-visible { outline: 2px solid #00f; outline-offset: 1px; }
.code-copy-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
main pre code.hljs { padding: 0; background: transparent; }

main table,
aside table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
}

/* 本番(Luxeritas)の `.post td,.post th` と同じ罫線・余白。見えやすいよう色だけ少し濃くする */
main table td,
main table th {
    padding: 8px 10px;
    border: 1px solid #aaa;
    /* main の overflow-wrap:anywhere のままだと列が1文字幅まで潰れる */
    overflow-wrap: normal;
}

main table th {
    text-align: left;
}

/* リンクだけのセル(SNSリンク表など)は、狭いカラム内でも「Showroo/m」のように途中で折らない。はみ出しは table の横スクロールで受ける */
main table td:has(> a:only-child) {
    white-space: nowrap;
}

/* 一覧リンクのタップ領域(最低24px)を確保する */
main li > a,
aside li > a {
    display: inline-block;
    padding-block: 0.35em;
}

/*
 * --- ヘッダーナビ: 白地+濃紺文字(#000080 on #ffffff = 約16:1, WCAG AAA) ---
 * リンクは最小高44pxのタップ領域。hover/focusで下線。
 */
.site-nav {
    background: #ffffff;
    padding: 0 8px;
    border: 2px outset #c0c0c0;
}

.nav-row { display: flex; align-items: stretch; }
.nav-nudge {
    flex: 0 0 36px;
    border: 0;
    border-right: 1px solid #cccccc;
    background: #f7f7f7;
    color: #000080;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.nav-nudge[data-nav-dir="1"] { border-right: 0; border-left: 1px solid #cccccc; }
.nav-nudge:disabled { opacity: 0.35; cursor: default; }
.nav-clip { flex: 1; min-width: 0; overflow: hidden; }
.nav-clip > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0 4px;
    width: max-content;
}

.site-nav li { position: relative; flex: 0 0 auto; }
/* JS前とJS無効時は通常の縦リスト。is-xmbが付いてからだけ、子はホバーで親の直下に出す。 */
.site-nav .nav-submenu { position: static; display: block; }
.nav-submenu {
    background: #fff;
    border: 2px solid #222;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
    min-width: 11em;
    padding: 4px 0;
}
.nav-submenu ul { list-style: none; margin: 0; padding: 0; }
.nav-submenu a { display: block; padding: 6px 12px; color: #111; text-decoration: none; white-space: nowrap; }
.nav-submenu a:hover { background: #ffe0c0; }
.site-nav.is-xmb .nav-submenu { display: none; }
.site-nav.is-xmb li.has-children:hover > .nav-submenu,
.site-nav.is-xmb li.has-children:focus-within > .nav-submenu {
    display: block;
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 13rem;
    max-width: min(24rem, calc(100vw - 16px));
    max-height: 70vh;
    overflow: auto;
    background: #ffffff;
    border: 2px outset #808080;
    box-shadow: 3px 3px 0 #000080;
}
.site-nav .nav-submenu ul { display: block; }
.site-nav .nav-submenu li { display: block; }
.site-nav .nav-submenu a { display: flex; white-space: normal; }
.site-nav [aria-current="page"] { background: #ffff99; outline: 2px solid #000080; }


/* ===== Rinker 商品ボックス(本番 yyi-rinker と同じ構造・見た目) ===== */
.yyi-rinker-contents {
    margin: 1em 0;
    max-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.yyi-rinker-box { display: flex; align-items: center; padding: 0.5em 0; }
.yyi-rinker-image { flex: 0 0 30%; margin: 2%; text-align: center; }
.yyi-rinker-image img, .yyi-rinker-contents img { max-width: 100%; height: auto; border: none; }
.yyi-rinker-info { flex: 1 1 0; min-width: 0; padding: 0 3%; }
.yyi-rinker-title { margin: 0 0 0.3em; font-weight: bold; line-height: 1.4; overflow-wrap: anywhere; }
.yyi-rinker-detail { font-size: 0.8em; color: #595959; }
.yyi-rinker-detail .credit-box:empty, .yyi-rinker-detail .price-box:empty { display: none; }
.yyi-rinker-links { list-style: none; margin: 0.4em 0 0; padding: 0; }
.yyi-rinker-links li {
    position: relative;
    display: block;
    margin: 0 0 0.5em;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    text-align: center;
    font-weight: bold;
}
.yyi-rinker-links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 0.7em;
    box-sizing: border-box;
    color: #000;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.yyi-rinker-links li:hover { opacity: 0.9; }
.yyi-rinker-links li img { position: absolute; }
.amazonkindlelink { background: #90caf9; }
.amazonlink { background: #ffc266; }
.rakutenlink { background: #ff7c74; }
.rakutenlink a { color: #fff; }
.yahoolink { background: #95cad7; }
.mercarilink { background: #ff0211; }
.mercarilink a { color: #fff; }
.freelink1, .freelink2, .freelink3, .freelink4 { background: #70347c; }
.freelink1 a, .freelink2 a, .freelink3 a, .freelink4 a { color: #fff; }
@media (max-width: 468px) {
    .yyi-rinker-box { display: block; padding: 0.5em 0 0; }
    .yyi-rinker-image { margin: 0 auto 0.5em; width: auto; }
    .yyi-rinker-info { padding: 0 5% 0.2em; text-align: center; }
}

/* ===== アコーディオン(Luxeritas の wp-block-luxe-blocks-accordion。チェックボックス方式) ===== */
.wp-block-luxe-blocks-accordion .acl { cursor: pointer; }
.wp-block-luxe-blocks-accordion .acl .act { min-width: 0; overflow-wrap: anywhere; }
.wp-block-luxe-blocks-accordion .acl .aci { min-width: 1.5em; display: flex; align-items: center; justify-content: center; }
.wp-block-luxe-blocks-accordion .aci::before { content: "\25BC"; font-size: 0.8em; }
.wp-block-luxe-blocks-accordion .acb:checked + .acl .aci::before { content: "\25B2"; }
.wp-block-luxe-blocks-accordion .acl:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.wp-block-luxe-blocks-accordion .acc { display: none; padding: 0 15px; box-sizing: border-box; overflow-x: auto; }
.wp-block-luxe-blocks-accordion .acb:checked + .acl + .acc { display: block; }
.wp-block-luxe-blocks-accordion .acc iframe { max-width: 100%; }
#bbs-dialog { border: 1px solid #003366; padding: 1em; max-width: 24rem; }
#bbs-dialog::backdrop { background: rgba(0,0,0,0.35); }

@media (max-width: 640px) {
    .site-nav { padding: 0 4px; }
    .nav-clip > ul { gap: 0 2px; }
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
    padding-inline: 4px;
    color: #000080;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
    text-decoration: underline;
}

/* --- サイト内検索フォーム --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-search {
    display: flex;
    gap: 6px;
    background: #ffffff;
    padding: 6px 8px;
}

.site-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    box-sizing: border-box;
    background: #ffffff;
    color: #111111;
    border: 2px inset #808080;
    padding: 2px 6px;
    font-size: 16px;
}

.site-search button {
    min-height: 36px;
    color: #111111;
    background: #f0f0f0;
    border: 2px outset #c0c0c0;
    padding: 2px 12px;
    font-size: 16px;
}

/* 埋め込み(Instagram等)がインラインstyleの固定幅で横にはみ出すのを抑える。YouTube等のiframeは上の16:9指定を維持 */
main .instagram-media,
main iframe {
    min-width: 0 !important;
    max-width: 100% !important;
}

.site-xmb { position: fixed; inset: 0; z-index: 80; color: #fff; background: #04101c; overflow: hidden; }
.site-xmb[hidden] { display: none; }
.site-xmb a { color: inherit; text-decoration: none; }
.site-xmb-wave { position: absolute; inset: -20%; background: radial-gradient(50% 30% at 75% 45%, rgba(190,240,255,.55), transparent 60%), radial-gradient(40% 28% at 20% 70%, rgba(20,90,180,.65), transparent 70%), linear-gradient(#071525, #02060c); }
.site-xmb-ribbon { position: absolute; left: -15%; right: -15%; top: 34%; height: 220px; border-radius: 50%; background: linear-gradient(180deg, transparent, rgba(210,245,255,.75) 42%, rgba(60,150,230,.25) 58%, transparent); transform: rotate(-7deg); }
.site-xmb-cats { position: absolute; top: 18%; left: 0; right: 0; height: 130px; }
.site-xmb-cat { position: absolute; top: 0; width: 92px; text-align: center; cursor: pointer; user-select: none; color: #fff; text-decoration: none; }
.site-xmb-cat:hover { color: #fff; text-decoration: none; }
.site-xmb-cat:focus-visible, .site-xmb-item:focus-visible { outline: 2px solid #8ec5ff; outline-offset: 2px; }
.site-xmb-orb { width: 54px; height: 54px; margin: 0 auto 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fd4ff 28%, #1d6cb5 70%, #08315c); box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.35); transition: box-shadow .15s ease; }
.site-xmb-cat.on .site-xmb-orb { box-shadow: 0 0 24px rgba(160,220,255,.85), inset 0 0 0 2px #fff; }
.site-xmb-cat span { display: block; font-size: 12px; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.site-xmb-items { position: absolute; top: calc(18% + 140px); bottom: 52px; left: 0; right: 0; overflow: hidden; }
.site-xmb-item { position: absolute; left: 0; height: 36px; line-height: 36px; padding: 0 18px; font-size: 16px; white-space: nowrap; cursor: pointer; user-select: none; color: #fff; text-decoration: none; border-radius: 4px; }
.site-xmb-item:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.15); }
.site-xmb-item.on { background: linear-gradient(90deg, rgba(255,255,255,.22), transparent 80%); font-weight: 700; }
.site-xmb-help { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; font-size: 13px; text-shadow: 0 1px 2px #000; }
.site-xmb-back { font: inherit; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.4); padding: 6px 10px; cursor: pointer; margin-left: 10px; }
.site-xmb-back:hover { background: rgba(255,255,255,.2); }

main .has-text-align-center, main p.aligncenter, main div.aligncenter { text-align: center; }
main .has-text-align-right, main p.alignright, main div.alignright { text-align: right; }
main .has-text-align-left, main p.alignleft, main div.alignleft { text-align: left; }
main .aligncenter, main .aligncenter img { display: block; margin-left: auto; margin-right: auto; }
main img.alignright, main figure.alignright, main .wp-block-image.alignright { float: right; margin: 0 0 .6em 1em; }
main img.alignleft, main figure.alignleft, main .wp-block-image.alignleft { float: left; margin: 0 1em .6em 0; }
main blockquote { margin: 1em 0; padding: .8em 1em .8em 1.1em; border-left: 8px solid #e07020; background: #fff8ee; }
main blockquote cite, main .quote-source { display: block; margin-top: .6em; text-align: right; font-style: normal; }
main .btn-copy { display: inline-block; margin-top: .4em; padding: 2px 10px; border: 2px outset #ddd; background: #f7f7f7; cursor: pointer; font-size: 13px; }
main .btn-copy.is-copied { background: #def5d8; }
main .copy-text { margin: 0; }
main li > p { margin: .2em 0; }
main ol, main ul { margin: .4em 0; }
main .wp-block-embed.is-provider-twitter .wp-block-embed__wrapper { margin: 0; }
/* figure 既定の左右40px余白が、引用・アコーディオン内の埋め込みを狭めて(375pxで約189px)右端を切るのを防ぐ */
main figure { margin: .6em 0; }
main iframe.x-embed {
    display: block;
    width: 550px;
    max-width: 100%;
    height: 240px;
    aspect-ratio: auto;
    margin: 0 auto;
    border: 0;
    overflow: hidden;
}
.sns-share svg { width: 1.15em; height: 1.15em; display: block; }
.sns-share a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin-right: 6px; border-radius: 4px; color: #fff; text-decoration: none; font-weight: 700; }
.sns-share-x { background: #111; }
.sns-share-facebook { background: #1877f2; }
.sns-share-hatena { background: #00a4de; }
.sns-share-pocket { background: #ef3f56; }
.sns-share-line { background: #06c755; }
.toc summary { cursor: pointer; font-weight: 700; }

main .instagram-media {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

main,
aside {
    position: relative;
    overflow-x: clip;
}

.mix-ranking > h2 { text-align: center; }

/* 旧 Luxeritas の記事内ランキング。サムネ左、金銀銅の順位、横並び。 */
.mix-ranking .sga-ranking {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: number;
}
.mix-ranking .sga-ranking li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    text-align: left;
    counter-increment: number;
}
.mix-ranking .sga-ranking li:before {
    content: counter(number);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: #c9a227;
}
.mix-ranking .sga-ranking li.sga-ranking-list-1:before { background: #d4af37; }
.mix-ranking .sga-ranking li.sga-ranking-list-2:before { background: #a8a8a8; }
.mix-ranking .sga-ranking li.sga-ranking-list-3:before { background: #b87333; }
.mix-ranking .sga-ranking .ranking-img {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: #f3f3f3;
}
.mix-ranking .sga-ranking .ranking-img img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
}
.mix-ranking .sga-ranking li > a {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.45;
    text-decoration: none;
}
@media (max-width: 600px) {
    .mix-ranking .sga-ranking .ranking-img,
    .mix-ranking .sga-ranking .ranking-img img {
        flex-basis: 96px;
        width: 96px;
        height: 96px;
    }
}


/*
 * ==========================================================================
 * 90年代・レトロデザイン強化スタイル (ベース: 橙色 #ff8000 を厳守)
 * ==========================================================================
 */

/* リンク色設定 (古の定番: 未訪問は青 #0000ee、訪問済は紫 #551a8b) */
main a:not([class]),
aside a:not([class]),
.post-list a {
    color: var(--retro-link-blue);
    text-decoration: underline;
}

main a:not([class]):visited,
aside a:not([class]):visited,
.post-list a:visited {
    color: var(--retro-link-visited);
}

/* 見出し装飾: 派手な下線・ゴツい文字影・わずかな傾斜 */
main h1,
main h2,
article h1,
article h2 {
    position: relative;
    color: #000080;
    font-weight: 900;
    text-shadow: 2px 2px 0px #ffe066, 3px 3px 0px #ff8000;
    border-bottom: 3px double #000080;
    padding-bottom: 4px;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

main h3,
article h3 {
    color: #b33c00;
    border-left: 8px solid var(--retro-orange-base);
    border-bottom: 1px dashed var(--retro-orange-dark);
    padding: 2px 8px;
    margin-top: 1em;
}

/* Windows 95風立体パネル (main / aside) */


/* ボタンのWin95風ベベル統一 */
button,
input[type="button"],
input[type="submit"],
.btn-copy,
.site-search button {
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
}

/* 訪問者カウンターの強化 (LCD風ボックス) */
.visitor-counter {
    box-shadow: inset 0 0 8px rgba(0, 255, 100, 0.4);
    margin-top: 4px;
}

/*
 * ==========================================================================
 * Luxeritas / Gutenberg ボタン風リンク・カラムレイアウト復元
 * ==========================================================================
 */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px 24px;
    margin: 1.5em auto;
    max-width: 680px;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 600px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex: 1 1 0;
        min-width: 240px;
        max-width: 320px;
    }
}
@media (max-width: 599px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100%;
        width: 100%;
    }
}
.wp-block-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    gap: 12px;
}
.wp-block-buttons.is-content-justification-center,
.wp-block-buttons[style*="justify-content: center"],
.wp-block-buttons[style*="justify-content:center"] {
    justify-content: center;
}
.wp-block-buttons.is-content-justification-left {
    justify-content: flex-start;
}
.wp-block-buttons.is-content-justification-right {
    justify-content: flex-end;
}
.wp-block-buttons.is-content-justification-space-between {
    justify-content: space-between;
}

.wp-block-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}
.wp-block-button.aligncenter {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.wp-block-button.wp-block-button__width-75,
.wp-block-button.has-custom-width.wp-block-button__width-75 {
    width: 100%;
    max-width: 280px;
}
.wp-block-button.wp-block-button__width-50,
.wp-block-button.has-custom-width.wp-block-button__width-50 {
    width: 100%;
    max-width: 240px;
}
.wp-block-button.wp-block-button__width-100 {
    width: 100%;
}
.wp-block-button.has-custom-width {
    width: 100%;
    max-width: 280px;
}
.wp-block-button.has-custom-width .wp-block-button__link {
    width: 100%;
}

/* ボタン風リンク本体 (Gutenberg / Luxeritas / 汎用 .button, .btn, .btn01 a) */
.wp-block-button__link,
.wp-element-button,
main a.wp-block-button__link,
aside a.wp-block-button__link,
a.button,
a.btn,
.btn01 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0.6em 1.2em;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    border-radius: 9999px;
    border: 2px outset rgba(255, 255, 255, 0.5);
    background-color: #2b3035;
    color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    word-break: break-word;
}
.wp-block-button__link *,
.wp-element-button *,
a.button *,
a.btn * {
    color: inherit !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
main a.wp-block-button__link:hover,
aside a.wp-block-button__link:hover,
a.button:hover,
a.btn:hover,
.btn01 a:hover {
    filter: brightness(1.12);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    text-decoration: none !important;
}
.wp-block-button__link:active,
.wp-element-button:active,
main a.wp-block-button__link:active,
aside a.wp-block-button__link:active,
a.button:active,
a.btn:active,
.btn01 a:active {
    filter: brightness(0.95);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: translateY(1px);
    border-style: inset;
}

/* スタイルバリエーション */
.wp-block-button.is-style-squared .wp-block-button__link,
.wp-block-button__link.is-style-squared {
    border-radius: 0 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
    background-color: transparent !important;
    border: 2px solid currentColor !important;
    box-shadow: none;
}

/* 記事内で使用されているカラーパレット */
.has-dodgerblue-background-color { background-color: #1264c7 !important; color: #ffffff !important; }
.has-red-background-color { background-color: #c91a25 !important; color: #ffffff !important; }
.has-black-background-color { background-color: #1a1a1a !important; color: #ffffff !important; }
.has-orange-background-color { background-color: #ffa500 !important; color: #000000 !important; }
.has-springgreen-background-color { background-color: #00e676 !important; color: #000000 !important; }
.has-navy-background-color { background-color: #000080 !important; color: #ffffff !important; }
.has-blue-background-color { background-color: #0044cc !important; color: #ffffff !important; }
.has-white-background-color { background-color: #ffffff !important; color: #111111 !important; }

/* 記事内で使用されているグラデーションパレット */
.has-blush-bordeaux-gradient-background {
    background: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%) !important;
    color: #ffffff !important;
}
.has-midnight-gradient-background {
    background: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%) !important;
    color: #ffffff !important;
}
.has-blush-light-purple-gradient-background {
    background: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 236) 100%) !important;
    color: #000000 !important;
}
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
    background: linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%) !important;
    color: #ffffff !important;
}
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
    background: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%) !important;
    color: #000000 !important;
}

/* テキスト色指定の上書き */
.has-white-color, a.has-white-color { color: #ffffff !important; }
.has-black-color, a.has-black-color { color: #000000 !important; }

/*
 * ==========================================================================
 * サイドバー・ウィジェット (WordPress Luxeritas互換)
 * ==========================================================================
 */
.widget {
    margin-bottom: 24px;
}
.side-title {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 12px;
    padding: 6px 10px;
    background: #f7f7f7;
    border-left: 4px solid #ff8000;
    color: #111111;
}
.snsf-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.snsf-list li {
    margin: 0;
    list-style: none;
}
.snsf a {
    display: inline-block;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff !important;
    border-radius: 3px;
    transition: opacity 0.2s;
}
.snsf a:hover {
    opacity: 0.85;
}
.snsf.twitter a { background: #000000; }
.snsf.instagram a { background: #e1306c; }
.snsf.youtube a { background: #ff0000; }
.snsf.rss a { background: #ff8c00; }
.snsf.feedly a { background: #2bb24c; }

.side-post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.side-post-item {
    list-style: none;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #dddddd;
}
.side-post-link {
    display: flex;
    gap: 10px;
    text-decoration: none !important;
    color: #222222 !important;
    align-items: flex-start;
}
.side-post-link:hover .side-post-title {
    color: #0066cc !important;
    text-decoration: underline !important;
}
.side-post-thumb img {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
.side-post-title {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.widget_categories select {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #ffffff;
}
.widget_search .search-form {
    display: flex;
    gap: 4px;
}
.widget_search .search-field {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    font-size: 13px;
}
.widget_search .search-submit {
    padding: 6px 12px;
    background: #333333;
    color: #ffffff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}
.widget_search .search-submit:hover {
    background: #555555;
}

/* ===== ブログカード (BlogcardStage 出力) ===== */
.blogcard {
    margin: 1em 0;
    max-width: 100%;
}

.blogcard-href {
    display: block;
    position: relative;
    box-sizing: border-box;
    min-height: 116px;
    padding: 8px 8px 8px 120px;
    background: var(--retro-win-light);
    color: #000;
    text-decoration: none;
    border: 2px solid;
    border-color: var(--retro-win-light) var(--retro-win-dark) var(--retro-win-dark) var(--retro-win-light);
    outline: 1px solid var(--retro-win-darker);
    overflow: hidden;
}

.blogcard-href:hover {
    background: #ffffe0;
}

.blogcard-href .blogcard-img {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--retro-win-dark);
}

.blogcard-href .blog-card-title {
    margin: 0 0 4px;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.4;
    color: var(--retro-link-blue);
    overflow-wrap: anywhere;
}

.blogcard-href .blog-card-desc {
    margin: 0 0 4px;
    font-size: 0.85em;
    line-height: 1.5;
    color: #333;
    overflow-wrap: anywhere;
}

.blogcard-href .blogcard-link {
    margin: 0;
    font-size: 0.75em;
    color: var(--retro-win-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blogcard-href .blogcard-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .blogcard-href {
        min-height: 88px;
        padding-left: 88px;
    }
    .blogcard-href .blogcard-img {
        width: 72px;
        height: 72px;
    }
}








/* 記事の日付行・前後ナビ */
main p.meta { margin: 0 0 .8em; font-size: 13px; color: #555; }
main p.meta .date + .date { margin-left: 1em; }
main p.meta .date + .date::before { content: "更新: "; }
#pnavi { display: flex; gap: 8px; margin: 1.5em 0; }
#pnavi .next, #pnavi .prev { flex: 1 1 0; min-width: 0; }
#pnavi .next { order: 2; text-align: right; }
#pnavi a { display: block; padding: 8px 10px; border: 2px outset #ddd; background: #f7f7f7; text-decoration: none; overflow-wrap: anywhere; }
#pnavi .next-arrow::before { content: "\2192 "; }
#pnavi .prev-arrow::before { content: "\2190 "; }
#pnavi .next-arrow, #pnavi .prev-arrow { font-size: 12px; margin-top: 4px; }
@media (max-width: 600px) { #pnavi { flex-direction: column; } #pnavi .next { order: 0; } }

/* --- パンくず: 橙ヘッダー/背景柄の上で読めるよう、専用の白地ストリップにする(黒/#0000cc on #fff) --- */
.breadcrumbs {
    background: #ffffff;
    border: 2px outset #c0c0c0;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 4px 10px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222222;
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.breadcrumbs li { color: #222222; }
.breadcrumbs li + li::before { content: ">"; margin: 0 .5em; color: #444444; }
.breadcrumbs a { color: #0000cc; text-decoration: underline; display: inline-block; padding-block: 4px; }
.breadcrumbs a:hover, .breadcrumbs a:focus { background: #ffffe0; }

/* --- サイドバー追従目次(記事ページ・サイドバーが本文の横にあるときだけ追従) --- */
.side-toc-sticky { margin-bottom: 16px; border: 1px solid #cccccc; padding: 8px; background: #ffffff; }
.side-toc ul { margin: 0; padding-left: 1.2em; }
.side-toc a.is-current { background: #ffff99; font-weight: 700; }
@media (min-width: 861px) {
    .site-content > aside:has(.side-toc-sticky) { align-self: stretch; }
    .side-toc-sticky { position: sticky; z-index: 5; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}

/* --- XMB: タッチ端末で明示的に開くボタン + オーバーレイ内スワイプ --- */
.site-xmb { touch-action: none; overscroll-behavior: contain; }
.nav-clip { touch-action: pan-y; }