html {
            overflow-x: hidden;
        }
        body {
            font-family: "Noto Sans JP", sans-serif;
            color: #111;
            background-color: #fff;
            overflow-x: hidden;
        }

        /* Custom Scrollbar for News Ticker */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Text Clamp */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Detail View */
        .view-section {
            display: none;
        }
        .view-section.active {
            display: block;
        }

        /* Blog Content Styles */
        .article-body h2 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #111;
        }
        .article-body h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            padding-left: 1rem;
            border-left: 4px solid #111;
        }
        .article-body p {
            margin-bottom: 1.5rem;
            line-height: 1.8;
            color: #333;
        }
        .article-body ul {
            list-style: disc;
            padding-left: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .article-body pre {
            background: #f5f5f5;
            padding: 1rem;
            overflow-x: auto;
            margin-bottom: 1.5rem;
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
        }

        /* ============================================
           SWELL-STYLE SINGLE ARTICLE
           Adapted to Kowann monochrome palette
           ============================================ */

        /* --- Breadcrumb --- */
        .p-breadcrumb {
            padding-top: 8px;
            background: #FAFAFA;
            font-size: 0.6875rem;
            color: #9CA3AF;
        }
        .p-breadcrumb__list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            list-style: none;
            padding: 12px 0;
            max-width: 780px;
            margin: 0 auto;
            padding-left: 16px;
            padding-right: 16px;
        }
        .p-breadcrumb__item {
            display: inline-flex;
            align-items: center;
        }
        .p-breadcrumb__item:not(:last-child)::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 10px;
            margin: 0 8px;
            background: #E5E5E5;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
        .p-breadcrumb__text {
            text-decoration: none;
            color: #525252;
            font-size: 0.6875rem;
            transition: color 0.2s;
        }
        a.p-breadcrumb__text:hover {
            color: #111111;
        }
        .p-breadcrumb__item:last-child .p-breadcrumb__text {
            color: #9CA3AF;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 400px;
            display: inline-block;
        }

        /* --- Article Layout --- */
        .l-mainContent.l-article {
            max-width: 780px;
            margin: 0 auto;
            padding: 0 16px 48px;
        }
        .l-mainContent__inner {
            width: 100%;
        }

        /* --- Post Head --- */
        .p-articleHead {
            margin-bottom: 16px;
        }
        .c-postTitle__ttl {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: clamp(1.5rem, 4vw, 2rem);
            font-weight: 700;
            line-height: 1.6;
            letter-spacing: -0.01em;
            color: #111111;
        }

        /* --- Article Meta --- */
        .p-articleMetas {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 0.8125rem;
            color: #9CA3AF;
            margin-bottom: 24px;
        }
        .c-categoryList__link {
            display: inline-block;
            font-family: 'Manrope', sans-serif;
            font-size: 0.6875rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            background: #111111;
            color: #FAFAFA;
            padding: 3px 12px;
            border-radius: 2px;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .c-categoryList__link:hover {
            opacity: 0.8;
        }
        .c-postTimes {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .c-postTimes__posted {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8125rem;
            color: #9CA3AF;
        }
        .c-postTimes__posted svg {
            flex-shrink: 0;
            opacity: 0.5;
        }
        .p-articleMetas__author {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8125rem;
            color: #9CA3AF;
        }
        .p-articleMetas__author svg {
            flex-shrink: 0;
            opacity: 0.5;
        }

        /* --- Article Thumbnail --- */
        .p-articleThumb {
            margin-bottom: 24px;
        }
        .p-articleThumb__img {
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 4px;
        }

        /* --- Share Buttons --- */
        .c-shareBtns {
            margin-bottom: 24px;
        }
        .c-shareBtns.-top {
            margin-bottom: 24px;
        }
        .c-shareBtns.-bottom {
            margin-top: 24px;
            margin-bottom: 48px;
        }
        .c-shareBtns__message {
            padding: 0.25em 0 0.75em;
            text-align: center;
            width: 100%;
        }
        .c-shareBtns__message .__text {
            display: inline-block;
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.5;
            color: #525252;
            padding: 0 1.5em;
            position: relative;
        }
        .c-shareBtns__message .__text::before,
        .c-shareBtns__message .__text::after {
            background-color: currentcolor;
            bottom: 0;
            content: '';
            display: block;
            height: 1.5em;
            position: absolute;
            width: 1px;
        }
        .c-shareBtns__message .__text::before {
            left: 0;
            transform: rotate(-40deg);
        }
        .c-shareBtns__message .__text::after {
            right: 0;
            transform: rotate(40deg);
        }
        .c-shareBtns__list {
            display: flex;
            gap: 4px;
            list-style: none;
        }
        /* 下部共有列は画面中央寄せ。いいね(#share-like-host)はその右端(コピーの右)に入る */
        #share-list-bottom {
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        /* いいね(共有列内)。角丸ピルで♡＋件数。共有スクエアと高さを揃える */
        .c-shareBtns__item.-like .reader-like-btn {
            height: 40px;
            padding: 0 16px;
            border-radius: 8px;
        }
        .c-shareBtns__item {
            flex: none;
        }
        .c-shareBtns__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            text-decoration: none;
            cursor: pointer;
            border: none;
            transition: opacity 0.2s;
            font-family: inherit;
            font-size: inherit;
            padding: 0;
        }
        .c-shareBtns__btn:hover {
            opacity: 0.8;
        }
        .c-shareBtns__item.-twitter-x .c-shareBtns__btn {
            background: #0a0a0a;
            color: #fff;
        }
        .c-shareBtns__item.-facebook .c-shareBtns__btn {
            background: #1877f2;
            color: #fff;
        }
        .c-shareBtns__item.-hatebu .c-shareBtns__btn {
            background: #00a4de;
            color: #fff;
        }
        .c-shareBtns__item.-line .c-shareBtns__btn {
            background: #06c755;
            color: #fff;
        }
        .c-shareBtns__item.-copy .c-shareBtns__btn {
            background: #525252;
            color: #fff;
        }
        .c-shareBtns__item.-copy .c-shareBtns__btn.-done {
            background: #111111;
        }
        .c-shareBtns__item.-copy {
            position: relative;
        }
        .c-shareBtns__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        /* --- Post Content --- */
        .post_content {
            max-width: 100%;
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1rem;
            line-height: 1.8;
            color: #111111;
        }
        .post_content > * {
            clear: both;
            margin-bottom: 2em;
        }
        .post_content > :first-child {
            margin-top: 0 !important;
        }
        .post_content > :last-child {
            margin-bottom: 0 !important;
        }
        .post_content p {
            margin-top: 0;
            margin-bottom: 0;
        }
        .post_content > p + p {
            margin-top: 1.5em;
        }
        .post_content ol,
        .post_content ul {
            margin-top: 1.5em;
            margin-bottom: 1.5em;
            padding-left: 1.5em;
        }
        .post_content ul {
            list-style: disc;
        }
        .post_content ol {
            list-style: decimal;
        }
        .post_content li {
            line-height: 1.5;
            margin: 0.25em 0;
        }
        .post_content a {
            color: #0a66c2;
            text-decoration: underline;
            text-underline-offset: 2px;
            word-break: break-all;
            transition: color 0.15s ease;
        }
        .post_content a:hover {
            color: #064a93;
        }

        .post_content strong {
            font-weight: 700;
        }
        .post_content img {
            display: block;
            max-width: 100%;
            max-height: 60vh;
            width: auto;
            height: auto;
            margin: 1.5em auto;
            object-fit: contain;
        }

        /* h2 — left border */
        .post_content h2 {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1.4em;
            font-weight: 700;
            line-height: 1.4;
            background: none;
            border-left: solid 4px #111111;
            border-bottom: none;
            padding: .5em 0 .5em 16px;
            margin: 4em 0 2em;
            position: relative;
            z-index: 1;
        }
        /* h3 — 2-color bottom underline */
        .post_content h3 {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1.3em;
            font-weight: 700;
            line-height: 1.4;
            border-left: none;
            padding: 0 .5em .5em;
            margin: 3em 0 2em;
            position: relative;
        }
        .post_content h3::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            display: block;
            pointer-events: none;
            background: repeating-linear-gradient(90deg, #111111 0%, #111111 29.3%, rgba(150,150,150,.2) 29.3%, rgba(150,150,150,.2) 100%);
        }
        /* h4 — bottom border */
        .post_content h4 {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1.2em;
            font-weight: 700;
            line-height: 1.4;
            padding-bottom: 8px;
            border-bottom: 2px solid #E5E5E5;
            margin: 3em 0 1.5em;
        }

        /* Blockquote */
        .post_content blockquote {
            position: relative;
            background: #F5F5F5;
            border-left: none;
            padding: 1.5em 2em;
            margin: 2em 0;
            font-style: normal;
        }
        .post_content blockquote > * {
            position: relative;
            z-index: 1;
        }
        .post_content blockquote::before {
            content: '\201C';
            top: 8px;
            left: 14px;
            font-family: Georgia, serif;
            font-size: 3rem;
            color: #E5E5E5;
            line-height: 1;
            position: absolute;
            z-index: 0;
        }
        .post_content blockquote::after {
            content: '\201D';
            bottom: 0;
            right: 14px;
            font-family: Georgia, serif;
            font-size: 3rem;
            color: #E5E5E5;
            line-height: 1;
            position: absolute;
            z-index: 0;
        }
        .post_content blockquote p {
            font-size: 0.9375rem;
            line-height: 1.8;
            color: #525252;
            margin: 0;
        }
        .post_content blockquote cite {
            display: block;
            font-size: 0.8em;
            margin-top: 1em;
            font-style: normal;
            opacity: 0.8;
            color: #9CA3AF;
        }

        /* Table */
        .post_content table {
            border: none;
            border-collapse: collapse;
            line-height: 1.6;
            max-width: 100%;
            text-align: left;
            width: 100%;
            margin: 2em 0;
        }
        .post_content td,
        .post_content th {
            border: 1px solid #E5E5E5;
            padding: 0.5em 0.75em;
            vertical-align: top;
        }
        .post_content th {
            background-color: hsla(0, 0%, 59%, 0.05);
            font-weight: 700;
        }
        .post_content thead td,
        .post_content thead th {
            background-color: #111111;
            color: #FAFAFA;
        }

        /* Code */
        .post_content :not(pre) > code {
            background: #f7f7f7;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 2px;
            color: #333;
            display: inline-flex;
            align-items: center;
            font-family: Menlo, Consolas, メイリオ, sans-serif;
            font-size: 0.9em;
            letter-spacing: 0;
            line-height: 1;
            margin: 0 0.5em;
            padding: 0.25em 0.5em;
        }
        .post_content pre {
            overflow-x: auto;
            padding: 0.5em;
            background: #F5F5F5;
            font-family: Menlo, Consolas, メイリオ, sans-serif;
            font-size: 0.875rem;
            line-height: 1.7;
            margin: 2em 0;
        }
        .post_content hr {
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            margin: 2.5em 0;
        }
        .post_content img {
            max-width: 100%;
            height: auto;
        }
        .post_content figure {
            margin: 2em 0;
        }
        .post_content figcaption {
            font-size: 0.8em;
            margin-top: 0.5em;
            opacity: 0.8;
            text-align: center;
        }

        /* --- Article Foot / Tags --- */
        .p-articleFoot {
            border-top: 1px solid #E5E5E5;
            padding-top: 24px;
            margin-top: 24px;
        }
        .c-tagList {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .c-tagList__link {
            display: inline-block;
            font-size: 0.75rem;
            color: #525252;
            text-decoration: none;
            border: 1px solid #E5E5E5;
            padding: 3px 10px;
            border-radius: 2px;
            transition: background 0.2s, color 0.2s;
        }
        .c-tagList__link:hover {
            background: #F5F5F5;
            color: #111111;
        }

        /* --- After Article --- */
        .l-articleBottom {
            margin-top: 24px;
        }
        .l-articleBottom__section {
            margin-bottom: 48px;
        }
        .l-articleBottom__section:last-child {
            margin-bottom: 0;
        }
        .l-articleBottom__title.c-secTitle {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #111111;
            border-bottom: 2px solid #111111;
            padding-bottom: 10px;
            margin-bottom: 24px;
        }

        /* --- Prev/Next Navigation --- */
        .p-pnLinks {
            align-items: stretch;
            display: flex;
            justify-content: space-between;
            list-style: none;
            margin: 2em 0;
        }
        .p-pnLinks__item {
            font-size: 13px;
            position: relative;
            width: 49%;
        }
        .p-pnLinks__item::before {
            content: '';
            display: block;
            height: 0.5em;
            pointer-events: none;
            position: absolute;
            top: 50%;
            width: 0.5em;
            z-index: 1;
        }
        .p-pnLinks__item.-prev::before {
            border-bottom: 1px solid;
            border-left: 1px solid;
            color: #fff;
            left: 0.35em;
            transform: rotate(45deg) translateY(-50%);
        }
        .p-pnLinks__item.-next .p-pnLinks__link {
            justify-content: flex-end;
        }
        .p-pnLinks__item.-next::before {
            border-bottom: 1px solid;
            border-right: 1px solid;
            color: #fff;
            right: 0.35em;
            transform: rotate(-45deg) translateY(-50%);
        }
        .p-pnLinks__item.-next:first-child {
            margin-left: auto;
        }
        .p-pnLinks__link {
            align-items: center;
            color: inherit;
            display: flex;
            height: 100%;
            line-height: 1.4;
            min-height: 4em;
            padding: 0.6em 1em 0.5em;
            position: relative;
            text-decoration: none;
            transition: box-shadow 0.25s;
            width: 100%;
        }
        .p-pnLinks .-prev .p-pnLinks__link {
            border-left: 1.25em solid #111111;
        }
        .p-pnLinks .-next .p-pnLinks__link {
            border-right: 1.25em solid #111111;
        }
        .p-pnLinks__title {
            font-size: 0.9375rem;
            font-weight: 500;
            color: #111111;
            line-height: 1.4;
            transition: transform 0.25s;
        }
        .-prev > .p-pnLinks__link:hover .p-pnLinks__title {
            transform: translateX(4px);
        }
        .-next > .p-pnLinks__link:hover .p-pnLinks__title {
            transform: translateX(-4px);
        }
        .p-pnLinks .-prev .p-pnLinks__link:hover {
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        .p-pnLinks .-next .p-pnLinks__link:hover {
            box-shadow: -1px 1px 2px rgba(0,0,0,0.1);
        }

        /* --- Author Box --- */
        .p-authorBox {
            border: 1px solid #E5E5E5;
            border-radius: 4px;
            padding: 5vw;
        }
        .p-authorBox__l {
            margin: 0 0 1em;
            text-align: center;
        }
        .p-authorBox__avatar {
            width: 100px;
            height: 100px;
            border: 2px solid #E5E5E5;
            border-radius: 50%;
            background: #F5F5F5;
            object-fit: cover;
            margin: 0 auto;
        }
        .p-authorBox__name {
            color: inherit;
            display: block;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.2;
            margin-top: 8px;
            text-decoration: none;
        }
        .p-authorBox__follow {
            margin-top: 12px;
        }
        .p-authorBox__follow:empty {
            display: none;
        }
        .p-authorBox__profileLink {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            margin-top: 10px;
            font-size: 12px;
            font-weight: 700;
            color: #6b7280;
            text-decoration: none;
            transition: color 0.15s ease;
        }
        .p-authorBox__profileLink:hover {
            color: #111;
        }
        .p-authorBox__profileLink svg {
            width: 14px;
            height: 14px;
        }
        .p-authorBox__r {
            width: 100%;
        }
        .p-authorBox__desc {
            font-size: 0.8125rem;
            line-height: 1.8;
            color: #525252;
            width: 100%;
            margin: 0;
            white-space: pre-line;
            word-break: break-word;
        }
        .p-authorBox__desc a {
            color: #0a66c2;
            text-decoration: underline;
            text-underline-offset: 2px;
            word-break: break-all;
            transition: color 0.15s ease;
        }
        .p-authorBox__desc a:hover {
            color: #064a93;
        }

        /* --- Author Profile: avatar（Tailwind w-20/h-20 がビルドに無いため明示指定） --- */
        #profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 9999px;
            background-color: #f0f0f0;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            flex-shrink: 0;
            overflow: hidden;
        }

        /* プロフィール文の改行・リンク（Tailwind whitespace-pre-line がビルドに無いため明示）。著者ボックスと同処理 */
        #profile-bio {
            white-space: pre-line;
            word-break: break-word;
        }
        #profile-bio a {
            color: #0a66c2;
            text-decoration: underline;
            text-underline-offset: 2px;
            word-break: break-all;
            transition: color 0.15s ease;
        }
        #profile-bio a:hover {
            color: #064a93;
        }

        /* --- Author Profile: 記事をアイコン状タイルのグリッドで表示 --- */
        .profile-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px 16px;
        }
        .profile-tile {
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }
        .profile-tile__thumb {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 14px;
            background: #f2f2f2;
            overflow: hidden;
        }
        .profile-tile__thumb img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .profile-tile:hover .profile-tile__thumb img {
            transform: scale(1.05);
        }
        .profile-tile__title {
            margin: 8px 2px 0;
            font-size: 0.8125rem;
            font-weight: 700;
            line-height: 1.45;
            color: #1a1a1a;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.15s ease;
        }
        .profile-tile:hover .profile-tile__title {
            color: #737373;
        }
        .profile-tile__meta {
            margin: 4px 2px 0;
            font-size: 0.625rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #9ca3af;
        }
        @media (max-width: 640px) {
            .profile-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px 12px;
            }
        }

        /* ===== Mobile Menu（エディトリアル再デザイン：全画面・左寄せ大型） ===== */
        .m-menu__inner {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            max-width: 520px;
            margin: 0 auto;
            padding: 22px 26px calc(26px + env(safe-area-inset-bottom, 0px));
            display: flex;
            flex-direction: column;
        }
        .m-menu__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            margin-bottom: 14px;
        }
        .m-menu__label {
            font-family: 'Manrope', 'Noto Sans JP', sans-serif;
            font-weight: 800;
            font-size: 13px;
            letter-spacing: 0.38em;
            color: #111;
        }
        .m-menu__close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            margin-right: -10px;
            color: #111;
            background: none;
            border: none;
            cursor: pointer;
        }
        .m-menu__close svg { width: 26px; height: 26px; }
        .m-menu__nav {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: column;
        }
        .m-menu__link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 17px 2px;
            border-top: 1px solid #ececec;
            color: #111;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }
        .m-menu__link:first-child { border-top: none; }
        .m-menu__linkText {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .m-menu__linkMain {
            font-size: 21px;
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: 0.01em;
            color: #111;
        }
        .m-menu__linkSub {
            font-family: 'Manrope', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: #b0b0b0;
        }
        .m-menu__arrow {
            width: 20px;
            height: 20px;
            color: #cfcfcf;
            flex-shrink: 0;
            transition: transform 0.2s ease, color 0.2s ease;
        }
        .m-menu__link:hover .m-menu__arrow,
        .m-menu__link:active .m-menu__arrow {
            color: #111;
            transform: translate(2px, -2px);
        }
        .m-menu__account {
            flex-shrink: 0;
            padding-top: 18px;
            margin-top: 14px;
            border-top: 2px solid #111;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .m-menu__loginBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 15px;
            background: #111;
            color: #fff;
            border: none;
            border-radius: 9999px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }
        .m-menu__loginBtn svg { width: 18px; height: 18px; }
        .m-menu__acct {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .m-menu__acctName {
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            color: #111;
        }
        .m-menu__acctActions {
            display: flex;
            gap: 10px;
        }
        .m-menu__acctLink {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px;
            border: 1px solid #111;
            border-radius: 9999px;
            font-size: 13px;
            font-weight: 700;
            color: #111;
            background: #fff;
            cursor: pointer;
        }
        .m-menu__acctLink svg { width: 16px; height: 16px; }
        .m-menu__acctLink.-muted { border-color: #d8d8d8; color: #888; }
        .m-menu__staff {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            font-size: 12.5px;
            font-weight: 700;
            color: #9ca3af;
            text-decoration: none;
            padding: 2px;
        }
        .m-menu__staff svg { width: 15px; height: 15px; }

        /* --- Related Posts --- */
        .p-postList.p-relatedPosts.-type-card {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            list-style: none;
        }
        .p-postList__item {
            display: flex;
        }
        .p-postList__link {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #E5E5E5;
            transition: box-shadow 0.2s, border-color 0.2s;
            width: 100%;
        }
        .p-postList__link:hover {
            border-color: #9CA3AF;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
        }
        .p-postList__thumb {
            width: 100%;
            flex-shrink: 0;
        }
        .p-postList__body {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .p-postList__meta {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .p-postList__cat {
            font-family: 'Manrope', sans-serif;
            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            background: #111111;
            color: #FAFAFA;
            padding: 2px 8px;
            border-radius: 2px;
        }
        .p-postList__times {
            font-size: 0.75rem;
            color: #9CA3AF;
        }
        .p-postList__title {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 0.875rem;
            font-weight: 700;
            color: #111111;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 0;
        }

        /* --- Back to list button in article --- */
        .p-backToList {
            text-align: center;
            margin-top: 48px;
        }
        .p-backToList__btn {
            display: inline-block;
            background: #111111;
            color: #fff;
            padding: 12px 32px;
            border-radius: 9999px;
            font-weight: 700;
            font-size: 0.875rem;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: background 0.2s;
        }
        .p-backToList__btn:hover {
            background: #262626;
        }

        /* ===== SWELL Article Responsive ===== */
        @media (min-width: 600px) {
            .p-authorBox {
                align-content: stretch;
                display: flex;
                justify-content: space-between;
                padding: 1.5em;
            }
            .p-authorBox__l {
                margin-bottom: 0;
                width: 160px;
                text-align: center;
            }
            .p-authorBox__r {
                border-left: 1px solid #E5E5E5;
                display: flex;
                flex-direction: column;
                padding-left: 1.5em;
                width: calc(100% - 160px - 1.5em);
            }
        }
        @media not all and (min-width: 600px) {
            .p-authorBox {
                text-align: center;
            }
        }
        @media (max-width: 900px) {
            .p-postList.p-relatedPosts.-type-card {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 480px) {
            .p-breadcrumb__item:last-child .p-breadcrumb__text {
                max-width: 200px;
            }
            .c-postTitle__ttl {
                font-size: 1.25rem;
            }
            .p-articleMetas {
                gap: 8px;
                font-size: 0.75rem;
            }
            .l-mainContent.l-article {
                padding: 0 16px 24px;
            }
            .post_content h2 {
                font-size: 1.2em;
                padding: .5em 0 .5em 12px;
            }
            .post_content h3 {
                font-size: 1.1em;
                padding: 0 .5em .5em;
            }
            .post_content blockquote {
                padding: 1.25em 1.5em;
            }
            .post_content blockquote::before {
                font-size: 2.5rem;
                left: 8px;
            }
            .post_content blockquote::after {
                font-size: 2.5rem;
                right: 8px;
            }
            .c-shareBtns__btn {
                width: 36px;
                height: 36px;
            }
            .c-shareBtns__icon svg {
                width: 16px;
                height: 16px;
            }
            .p-pnLinks__item {
                font-size: 3vw;
            }
            .p-postList.p-relatedPosts.-type-card {
                grid-template-columns: 1fr;
            }
        }

        /* --- Click Animations --- */
        /* General Click Effect */
        .click-anim:active {
            transform: scale(0.95);
            opacity: 0.8;
            transition: transform 0.05s ease-in-out, opacity 0.05s;
        }
        /* Subtle Click Effect for Text Links */
        .click-text:active {
            transform: scale(0.98);
            color: #525252; /* gray-600 */
            transition: transform 0.05s ease-in-out, color 0.05s;
        }
        /* Card Click Effect */
        .click-card {
            transition: transform 0.2s ease-out, box-shadow 0.2s ease;
        }
        .click-card:active {
            transform: scale(0.98);
        }

        /* Sliding Underline Animation */
        .underline-nav-container {
            position: relative;
        }
        .sliding-underline {
            position: absolute;
            bottom: 0;
            height: 4px; /* Thickness */
            background-color: #111;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            opacity: 0; /* Hidden initially */
            z-index: 10;
        }

        /* Active state style for navigation items */
        .nav-item.active, .category-item.active {
            color: #111;
        }
        /* Category bar items idle state */
        .category-item {
            color: #9CA3AF; /* gray-400 */
            transition: color 0.2s;
        }
        .category-item:hover {
            color: #525252; /* gray-600 */
        }
        .category-item.active {
            color: #111;
        }

        /* ===== Page Loader (inline in content area) ===== */
        .page-loader {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 240px;
            transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .page-loader.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            min-height: 0;
            height: 0;
            overflow: hidden;
        }
        /* (#42) 骨格(ヒーロー/見出し/サイドバー)を常時表示するため、
           かつての .page-loader:not(.is-hidden) ~ * { display:none } は撤去。
           ローダーは #article-list-container 内に限定し、LCP を Firestore 応答から切り離す。 */

        /* (#21/#22) 記事リストの空状態・エラー状態 */
        .empty-state,
        .error-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 8px;
            padding: 56px 20px;
            min-height: 240px;   /* ローダー(240px)と高さを揃え、置換時の縦ジャンプを抑制 */
        }
        .empty-state__icon,
        .error-state__icon {
            font-size: 30px;
            line-height: 1;
            margin-bottom: 4px;
            opacity: 0.55;
        }
        .empty-state__title,
        .error-state__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111;
        }
        /* 状態描画時にフォーカスを受け取る見出し: 既定アウトラインを抑制しつつ可視フォーカスを付与 */
        .empty-state__title:focus,
        .error-state__title:focus {
            outline: none;
        }
        .empty-state__title:focus-visible,
        .error-state__title:focus-visible {
            outline: 2px solid #111;
            outline-offset: 4px;
            border-radius: 4px;
        }
        .error-state__title {
            color: #b91c1c;
        }
        .empty-state__desc,
        .error-state__desc {
            font-size: 0.8rem;
            color: #6b7280;
        }
        .empty-state__btn,
        .error-state__btn {
            margin-top: 12px;
            padding: 10px 28px;
            border: 0;
            border-radius: 9999px;
            background: #111;
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .empty-state__btn:hover,
        .error-state__btn:hover {
            background: #374151;
        }
        .empty-state__btn:focus-visible,
        .error-state__btn:focus-visible {
            outline: 2px solid #111;
            outline-offset: 2px;
        }
        .page-loader__inner {
            text-align: center;
        }
        .page-loader__bar {
            width: 120px;
            height: 1px;
            background: #E5E5E5;
            margin: 20px auto 16px;
            overflow: hidden;
            position: relative;
        }
        .page-loader__bar-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0;
            background: #111;
            animation: loaderBar 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        @keyframes loaderBar {
            0% { left: 0; width: 0; }
            50% { left: 0; width: 100%; }
            100% { left: 100%; width: 0; }
        }
        /* 動きに敏感なユーザー向け: ローダーアニメーションを止め静的インジケータにする */
        @media (prefers-reduced-motion: reduce) {
            .page-loader__bar-fill {
                animation: none;
                width: 40%;
                left: 30%;
            }
        }

        /* ===== PDF Viewer ===== */
        .pdf-viewer {
            margin: 0 -16px;
            background: #f0f0f0;
            border: 1px solid #e5e5e5;
        }
        .pdf-viewer__pages {
            padding: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
        .pdf-viewer__canvas {
            max-width: 100%;
            box-shadow: 0 2px 16px rgba(0,0,0,0.12);
            background: white;
            display: block;
        }
        .pdf-viewer__toolbar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 12px 16px;
            background: #111;
            color: #fff;
            font-size: 13px;
        }
        .pdf-viewer__nav-btn {
            background: none;
            border: 1px solid rgba(255,255,255,0.25);
            color: #fff;
            padding: 6px 16px;
            font-size: 12px;
            font-weight: 500;
            font-family: 'Noto Sans JP', sans-serif;
            cursor: pointer;
            border-radius: 2px;
            transition: 0.2s;
        }
        .pdf-viewer__nav-btn:hover:not(:disabled) {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.5);
        }
        .pdf-viewer__nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        .pdf-viewer__page-info {
            font-family: 'Fira Code', monospace;
            font-size: 12px;
            letter-spacing: 0.05em;
            min-width: 80px;
            text-align: center;
        }
        .pdf-viewer__download {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: 1px solid rgba(255,255,255,0.25);
            color: #fff;
            padding: 6px 16px;
            font-size: 12px;
            font-weight: 500;
            font-family: 'Noto Sans JP', sans-serif;
            cursor: pointer;
            border-radius: 2px;
            text-decoration: none;
            transition: 0.2s;
            margin-left: auto;
        }
        .pdf-viewer__download:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.5);
        }
        .pdf-viewer__iframe {
            width: 100%;
            min-height: 80vh;
            border: none;
            display: block;
            background: #fff;
        }
        @media (max-width: 480px) {
            .pdf-viewer {
                margin: 0 -16px;
            }
            .pdf-viewer__pages {
                padding: 12px;
            }
            .pdf-viewer__toolbar {
                flex-wrap: wrap;
                gap: 8px;
                padding: 10px 12px;
            }
            .pdf-viewer__download {
                margin-left: 0;
                width: 100%;
                justify-content: center;
            }
        }

        /* Subscriber-only restricted content */
        .subscriber-restricted__excerpt {
            position: relative;
        }
        .subscriber-restricted__fade {
            height: 120px;
            margin-top: -120px;
            position: relative;
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
            pointer-events: none;
        }
        .subscriber-restricted__cta {
            text-align: center;
            padding: 48px 24px;
            border: 1px solid #e5e5e5;
            background: #fafafa;
            margin-top: 0;
        }
        .subscriber-restricted__btn {
            display: inline-block;
            padding: 12px 32px;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
            border-radius: 9999px;
            transition: opacity 0.2s;
        }
        .subscriber-restricted__btn:hover {
            opacity: 0.8;
        }
        /* 本文内(.post_content a=青)に置かれるため詳細度を上げて白黒を確定させる */
        .subscriber-restricted__cta a.subscriber-restricted__btn--primary {
            background: #111;
            color: #fff;
        }
        .subscriber-restricted__cta a.subscriber-restricted__btn--secondary {
            background: #fff;
            color: #111;
            border: 1px solid #111;
        }
        .subscriber-restricted__cta a.subscriber-restricted__btn--primary:hover,
        .subscriber-restricted__cta a.subscriber-restricted__btn--secondary:hover {
            opacity: 0.8;
        }

        /* ===== Banner Ad Carousel ===== */
        .banner-carousel {
            overflow: hidden;
            position: relative;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            background: #fafafa;
        }
        .banner-carousel__label {
            position: absolute;
            top: 4px;
            left: 8px;
            font-size: 9px;
            font-weight: 700;
            color: #999;
            letter-spacing: 0.05em;
            z-index: 2;
        }
        .banner-carousel__track {
            display: flex;
            transition: transform 0.5s ease;
        }
        .banner-carousel__item {
            flex-shrink: 0;
            width: 200px;
            padding: 8px 4px;
        }
        .banner-carousel__item a {
            display: block;
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 4px;
            background: #e5e5e5;
        }
        .banner-carousel__item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        @media (max-width: 768px) {
            .banner-carousel__item {
                width: 150px;
                padding: 6px 3px;
            }
        }