/**
 * PRIMA Media - 2025-2026 Editorial Design
 *
 * Design Philosophy:
 * - 「美術館のような体験を、Webで実現する」
 * - ビーズが主役。UIは主張しない。
 * - Kinfolkの余白美学 × Cerealの写真第一主義
 * - Barely There UI（極限ミニマリズム）
 *
 * Tagline: 「小さな玉に、大きな美学」
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
    /* Colors - Monochrome + Gold Accent */
    --prima-black: #171717;
    --prima-gray-900: #262626;
    --prima-gray-700: #404040;
    --prima-gray-600: #525252;
    --prima-gray-500: #737373;
    --prima-gray-400: #a3a3a3;
    --prima-gray-300: #d4d4d4;
    --prima-gray-200: #e5e5e5;
    --prima-gray-100: #f5f5f5;
    --prima-gray-50: #fafafa;
    --prima-white: #ffffff;
    --prima-gold: #b8860b;
    --prima-gold-light: #d4a84b;

    /* Typography */
    --font-heading: 'Noto Serif JP', Georgia, serif;
    --font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Cormorant Garamond', Georgia, serif;

    /* Spacing - Museum-like Scale (generous whitespace) */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
    --space-2xl: 120px;

    /* Layout */
    --container-max: 1200px;
    --container-content: 680px;
    --container-hero: 900px;
    --header-height: 56px;

    /* Transitions - Kinfolk Style */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 200ms var(--ease-out-expo);
    --transition-normal: 400ms var(--ease-out-expo);
    --transition-slow: 600ms var(--ease-out-expo);
}

/* ==========================================================================
   Base Reset
   ========================================================================== */

.prima-front {
    margin: 0;
    padding: 0;
    background: var(--prima-white);
    color: var(--prima-black);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.prima-front a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.prima-front img {
    max-width: 100%;
    height: auto;
    display: block;
}

.prima-front ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Header - Minimal Fixed
   ========================================================================== */

.prima-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--prima-gray-100);
}

.prima-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--space-md);
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Logo - Center */
.prima-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.prima-header__logo a {
    display: block;
}

.prima-header__logo-text {
    font-family: var(--font-accent);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--prima-black);
}

/* Menu Button - Minimal */
.prima-header__menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.prima-header__menu-btn span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--prima-black);
    transition: var(--transition-fast);
}

.prima-header__menu-btn:hover span {
    background: var(--prima-gray-500);
}

/* Search Button */
.prima-header__search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--prima-black);
    transition: color var(--transition-fast);
}

.prima-header__search-btn:hover {
    color: var(--prima-gray-500);
}

.prima-header__search-btn svg {
    width: 18px;
    height: 18px;
}

/* Category Nav - Desktop Only */
.prima-category-nav {
    display: none;
    border-top: 1px solid var(--prima-gray-100);
}

@media (min-width: 768px) {
    .prima-category-nav {
        display: block;
    }
}

.prima-category-nav ul {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    padding: 12px 0;
}

.prima-category-nav a {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--prima-gray-500);
    position: relative;
}

.prima-category-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--prima-black);
    transition: width var(--transition-normal);
}

.prima-category-nav a:hover {
    color: var(--prima-black);
}

.prima-category-nav a:hover::after {
    width: 100%;
}

/* ==========================================================================
   Main Content
   ========================================================================== */

.prima-main {
    padding-top: calc(var(--header-height) + 44px);
}

@media (min-width: 768px) {
    .prima-main {
        padding-top: calc(var(--header-height) + 48px);
    }
}

/* ==========================================================================
   Hero Video - YouTube埋め込み（16:9比率維持）
   ========================================================================== */

.prima-hero-video {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto var(--space-lg);
    padding: 0 var(--space-md);
}

@media (min-width: 768px) {
    .prima-hero-video {
        padding: 0 var(--space-lg);
        margin-bottom: var(--space-xl);
    }
}

.prima-hero-video__container {
    position: relative;
    width: 100%;
    /* 16:9 アスペクト比を維持 */
    aspect-ratio: 16 / 9;
    background: var(--prima-black);
    overflow: hidden;
}

/* YouTube iframe をコンテナいっぱいに */
.prima-hero-video__container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* キャッチフレーズ（動画の上部に配置） */
.prima-hero-video__catchphrase {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.8;
    text-align: center;
    color: var(--prima-gray-600);
    margin: 0 0 var(--space-md);
}

@media (min-width: 768px) {
    .prima-hero-video__catchphrase {
        font-size: 14px;
        letter-spacing: 0.08em;
        margin-bottom: var(--space-lg);
    }

    /* PC版では改行を非表示 */
    .prima-hero-video__catchphrase br.sp-only {
        display: none;
    }
}

/* 動画下のフッター（YouTube導線） */
.prima-hero-video__footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-xs) 0;
}

.prima-hero-video__youtube-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--prima-gray-400);
    transition: color var(--transition-fast);
}

.prima-hero-video__youtube-link:hover {
    color: var(--prima-black);
}

.prima-hero-video__youtube-link svg {
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.prima-hero-video__youtube-link:hover svg {
    opacity: 1;
}

/* フォールバック: aspect-ratio非対応ブラウザ用 */
@supports not (aspect-ratio: 16 / 9) {
    .prima-hero-video__container {
        padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
        height: 0;
    }
}

/* ==========================================================================
   Tagline - 「小さな玉に、大きな美学」
   ========================================================================== */

.prima-tagline {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    margin: 0 auto var(--space-lg);
    max-width: var(--container-content);
}

@media (min-width: 768px) {
    .prima-tagline {
        padding: var(--space-xl) var(--space-md);
        margin-bottom: var(--space-xl);
    }
}

.prima-tagline p {
    font-family: var(--font-accent);
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.08em;
    color: var(--prima-gray-500);
    margin: 0;
}

@media (min-width: 768px) {
    .prima-tagline p {
        font-size: 18px;
    }
}

/* ==========================================================================
   Featured Story - メインビジュアル（画像比率維持）
   既存アイキャッチは1200×800（3:2）なのでその比率を維持
   ========================================================================== */

.prima-featured {
    margin: 0 auto var(--space-xl);
    padding: 0 var(--space-md);
    max-width: var(--container-hero);
}

@media (min-width: 768px) {
    .prima-featured {
        margin-bottom: var(--space-xl);
        padding: 0 var(--space-lg);
    }
}

.prima-featured__link {
    display: block;
    cursor: pointer;
}

.prima-featured__image {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--prima-gray-50);
}

/* 画像の自然なサイズを尊重 */
.prima-featured__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-slow);
}

.prima-featured__link:hover .prima-featured__image img {
    transform: scale(1.02);
}

.prima-featured__content {
    padding: var(--space-md) 0 0;
    text-align: center;
    max-width: var(--container-content);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .prima-featured__content {
        padding: var(--space-lg) 0 0;
    }
}

.prima-featured__category {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--prima-gray-400);
    margin-bottom: var(--space-xs);
}

.prima-featured__title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin: 0 0 var(--space-sm);
    color: var(--prima-black);
    transition: color var(--transition-fast);
}

@media (min-width: 768px) {
    .prima-featured__title {
        font-size: 22px;
    }
}

.prima-featured__link:hover .prima-featured__title {
    color: var(--prima-gold);
}

.prima-featured__excerpt {
    font-size: 14px;
    line-height: 1.8;
    color: var(--prima-gray-500);
    margin: 0;
}

@media (min-width: 768px) {
    .prima-featured__excerpt {
        font-size: 15px;
    }
}

/* ==========================================================================
   Section Header
   ========================================================================== */

.prima-section-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    .prima-section-header {
        margin-bottom: var(--space-xl);
    }
}

.prima-section-title {
    font-family: var(--font-accent);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--prima-gray-400);
    margin: 0;
}

/* ==========================================================================
   Article Grid - Masonry-like Layout
   ========================================================================== */

.prima-articles {
    padding: 0 var(--space-md);
    max-width: var(--container-max);
    margin: 0 auto var(--space-xl);
}

@media (min-width: 768px) {
    .prima-articles {
        padding: 0 var(--space-lg);
        margin-bottom: var(--space-2xl);
    }
}

.prima-article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .prima-article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg) var(--space-md);
    }
}

@media (min-width: 1024px) {
    .prima-article-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl) var(--space-lg);
    }
}

/* ==========================================================================
   Article Card - Clean & Minimal
   ========================================================================== */

.prima-card {
    position: relative;
}

.prima-card__link {
    display: block;
    cursor: pointer;
}

.prima-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin: 0;
    background: var(--prima-gray-50);
}

.prima-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-slow), opacity var(--transition-fast);
}

.prima-card__link:hover .prima-card__image img {
    transform: scale(1.03);
}

.prima-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--prima-gray-100) 0%, var(--prima-gray-50) 100%);
}

.prima-card__content {
    padding: var(--space-sm) 0 0;
}

.prima-card__category {
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--prima-gray-400);
    margin-bottom: 4px;
}

.prima-card__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin: 0;
    color: var(--prima-black);
    transition: color var(--transition-fast);

    /* 2行で切り詰め */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .prima-card__title {
        font-size: 15px;
    }
}

.prima-card__link:hover .prima-card__title {
    color: var(--prima-gold);
}

/* ==========================================================================
   Section Footer / View All Button
   ========================================================================== */

.prima-section-footer {
    text-align: center;
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {
    .prima-section-footer {
        margin-top: var(--space-xl);
    }
}

.prima-btn {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 14px 40px;
    border: 1px solid var(--prima-gray-300);
    background: transparent;
    color: var(--prima-black);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.prima-btn:hover {
    border-color: var(--prima-black);
    background: var(--prima-black);
    color: var(--prima-white);
}

/* ==========================================================================
   Footer - Minimal
   ========================================================================== */

.prima-footer {
    background: var(--prima-gray-50);
    padding: var(--space-lg) var(--space-md);
    margin-top: var(--space-2xl);
}

.prima-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .prima-footer__inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

.prima-footer__copyright {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--prima-gray-400);
}

.prima-footer__nav {
    display: flex;
    gap: var(--space-md);
}

.prima-footer__nav a {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--prima-gray-400);
}

.prima-footer__nav a:hover {
    color: var(--prima-black);
}

/* ==========================================================================
   Overlays - Menu & Search
   ========================================================================== */

.prima-menu-overlay,
.prima-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.prima-menu-overlay.is-active,
.prima-search-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.prima-menu-overlay__inner,
.prima-search-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg);
}

.prima-menu-overlay__close,
.prima-search-overlay__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--prima-black);
    padding: 0;
    transition: color var(--transition-fast);
}

.prima-menu-overlay__close:hover,
.prima-search-overlay__close:hover {
    color: var(--prima-gray-500);
}

/* Menu Overlay Nav */
.prima-menu-overlay__nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.prima-menu-overlay__nav a {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--prima-black);
}

.prima-menu-overlay__nav a:hover {
    color: var(--prima-gold);
}

/* Search Overlay */
.prima-search-form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    max-width: 400px;
    border-bottom: 1px solid var(--prima-gray-300);
    padding-bottom: var(--space-xs);
}

.prima-search-form__input {
    flex: 1;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.02em;
    border: none;
    background: transparent;
    outline: none;
    color: var(--prima-black);
}

.prima-search-form__input::placeholder {
    color: var(--prima-gray-300);
}

.prima-search-form__submit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--prima-black);
    padding: 0;
    transition: color var(--transition-fast);
}

.prima-search-form__submit:hover {
    color: var(--prima-gray-500);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.prima-front a:focus-visible,
.prima-front button:focus-visible,
.prima-front input:focus-visible {
    outline: 2px solid var(--prima-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .prima-front *,
    .prima-front *::before,
    .prima-front *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Selection
   ========================================================================== */

.prima-front ::selection {
    background: var(--prima-gold-light);
    color: var(--prima-black);
}

/* ==========================================================================
   SWELL Theme Overrides - 記事ページ・固定ページ共通
   「美術館のような静謐さ」をSWELLのテンプレートに適用
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global Typography & Colors
   -------------------------------------------------------------------------- */

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #171717;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: #d4a84b;
    color: #171717;
}

/* --------------------------------------------------------------------------
   Header - シンプルに
   -------------------------------------------------------------------------- */

.l-header {
    box-shadow: none;
    border-bottom: 1px solid #f5f5f5;
}

.l-fixHeader {
    box-shadow: none;
    border-bottom: 1px solid #f5f5f5;
}

/* ナビゲーション - 控えめに */
.c-gnav > li > a {
    font-size: 12px;
    letter-spacing: 0.08em;
}

.c-gnav a::after {
    background: #b8860b;
}

/* --------------------------------------------------------------------------
   Breadcrumb - 控えめに
   -------------------------------------------------------------------------- */

.p-breadcrumb {
    background: transparent;
    border-bottom: 1px solid #f5f5f5;
}

.p-breadcrumb__list {
    font-size: 11px;
    color: #a3a3a3;
}

.p-breadcrumb a {
    color: #a3a3a3;
}

.p-breadcrumb a:hover {
    color: #b8860b;
}

/* --------------------------------------------------------------------------
   Article Header - 記事タイトル
   -------------------------------------------------------------------------- */

.p-articleHead.c-postTitle {
    text-align: center;
    margin-bottom: 32px;
}

.c-postTitle__ttl {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: #171717;
}

@media (min-width: 768px) {
    .c-postTitle__ttl {
        font-size: 28px;
    }
}

/* メタ情報（カテゴリ・日付） - 控えめに */
.p-articleMetas {
    justify-content: center;
}

.p-articleMetas.-top {
    margin-bottom: 24px;
}

.c-categoryList a {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #e5e5e5;
    color: #737373;
    padding: 4px 12px;
}

.c-categoryList a:hover {
    border-color: #b8860b;
    color: #b8860b;
}

.c-postTimes {
    font-size: 11px;
    color: #a3a3a3;
    letter-spacing: 0.05em;
}

/* カテゴリバッジ - シンプルに */
.c-postThumb__cat {
    background-color: #171717;
    background-image: none;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Article Thumbnail - アイキャッチ画像
   画像の自然なサイズを維持（切れない）
   -------------------------------------------------------------------------- */

.p-articleThumb {
    margin: 0 auto 48px;
    max-width: 900px;
}

.p-articleThumb__img {
    width: 100%;
    height: auto;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Article Content - 本文
   -------------------------------------------------------------------------- */

.post_content {
    font-size: 15px;
    line-height: 2;
    color: #333;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .post_content {
        font-size: 16px;
    }
}

/* 見出し h2 - シンプルな下線 */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #171717;
    border: none;
    background: none;
    padding: 0 0 12px 0;
    margin: 64px 0 24px;
    position: relative;
}

@media (min-width: 768px) {
    .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
        font-size: 22px;
    }
}

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #171717;
}

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 0;
    height: 1px;
    background: #e5e5e5;
}

/* 見出し h3 - ミニマル */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #171717;
    padding: 0;
    margin: 48px 0 16px;
    border: none;
    background: none;
}

@media (min-width: 768px) {
    .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
        font-size: 18px;
    }
}

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
    display: none;
}

/* 見出し h4 */
.post_content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #171717;
    margin: 32px 0 12px;
}

/* 段落 */
.post_content p {
    margin-bottom: 24px;
}

/* リスト */
.post_content ul,
.post_content ol {
    margin-bottom: 24px;
}

.post_content li {
    margin-bottom: 8px;
}

/* 引用 */
.post_content blockquote {
    border-left: 3px solid #e5e5e5;
    padding: 16px 24px;
    margin: 32px 0;
    background: #fafafa;
    font-style: italic;
    color: #525252;
}

.post_content blockquote::before {
    display: none;
}

/* 画像 - 自然なサイズ維持 */
.post_content .wp-block-image {
    margin: 32px 0;
}

.post_content .wp-block-image img {
    height: auto;
}

.post_content .wp-block-image figcaption {
    font-size: 12px;
    color: #737373;
    text-align: center;
    margin-top: 8px;
}

/* テーブル */
.post_content table {
    border-collapse: collapse;
    width: 100%;
    margin: 24px 0;
}

.post_content th,
.post_content td {
    border: 1px solid #e5e5e5;
    padding: 12px 16px;
    font-size: 14px;
}

.post_content th {
    background: #fafafa;
    font-weight: 500;
}

/* リンク */
.post_content a {
    color: #5e81ba;
    text-decoration: none;
}

.post_content a:hover {
    color: #b8860b;
}

/* --------------------------------------------------------------------------
   TOC - 目次
   -------------------------------------------------------------------------- */

.p-toc {
    border: none;
    background: #fafafa;
    padding: 24px 32px;
    margin: 48px auto;
}

.p-toc.-border {
    border: none;
}

.p-toc__ttl {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #737373;
}

.p-toc__ttl::before {
    display: none;
}

.p-toc__list a {
    color: #525252;
    font-size: 14px;
}

.p-toc__list a:hover {
    color: #b8860b;
}

/* --------------------------------------------------------------------------
   Author Box - 著者セクション
   -------------------------------------------------------------------------- */

.p-authorBox {
    background: #fafafa;
    border: none;
    padding: 32px;
    margin: 48px 0;
}

.p-authorBox__title {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #a3a3a3;
    margin-bottom: 16px;
}

.p-authorBox__name {
    font-size: 16px;
    font-weight: 500;
    color: #171717;
}

.p-authorBox__desc {
    font-size: 14px;
    line-height: 1.8;
    color: #525252;
}

/* --------------------------------------------------------------------------
   Related Posts - 関連記事
   -------------------------------------------------------------------------- */

.p-relatedPosts {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid #f5f5f5;
}

.p-relatedPosts__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a3a3a3;
    text-align: center;
    margin-bottom: 32px;
}

.p-relatedPosts .p-postList__thumb {
    box-shadow: none;
}

.p-relatedPosts .p-postList__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.p-relatedPosts .p-postList__item:hover .p-postList__title {
    color: #b8860b;
}

/* --------------------------------------------------------------------------
   Prev/Next Links - 前後記事リンク
   -------------------------------------------------------------------------- */

.p-pnLinks {
    margin: 48px 0;
    padding: 32px 0;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.p-pnLinks__link {
    border: none;
    background: #fafafa;
    padding: 16px;
}

.p-pnLinks .-prev .p-pnLinks__link,
.p-pnLinks .-next .p-pnLinks__link {
    border: 1px solid #e5e5e5;
}

.p-pnLinks .-prev .p-pnLinks__link:hover,
.p-pnLinks .-next .p-pnLinks__link:hover {
    border-color: #b8860b;
}

.p-pnLinks__title {
    font-size: 13px;
    color: #171717;
}

/* --------------------------------------------------------------------------
   Share Buttons - シェアボタン
   -------------------------------------------------------------------------- */

.c-shareBtns__list {
    border: none;
    padding: 0;
    gap: 8px;
}

.c-shareBtns__btn {
    border: 1px solid #e5e5e5;
    border-radius: 0;
}

.c-shareBtns__btn:hover {
    border-color: #171717;
}

/* --------------------------------------------------------------------------
   Footer - フッター
   -------------------------------------------------------------------------- */

.l-footer {
    background: #fafafa;
    border-top: 1px solid #f5f5f5;
}

.l-footer a {
    color: #525252;
}

.l-footer a:hover {
    color: #b8860b;
}

/* --------------------------------------------------------------------------
   Page Title - 固定ページタイトル（Aboutなど）
   -------------------------------------------------------------------------- */

.c-pageTitle {
    text-align: center;
    margin-bottom: 48px;
}

.c-pageTitle__inner {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #171717;
}

@media (min-width: 768px) {
    .c-pageTitle__inner {
        font-size: 28px;
    }
}

.c-pageTitle[data-style="b_bottom"]::after {
    display: none;
}

/* --------------------------------------------------------------------------
   About Page - 既存インラインスタイルとの調和
   -------------------------------------------------------------------------- */

.page-id-57 .post_content {
    max-width: 800px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Focus States - アクセシビリティ
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid #b8860b;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Table - wp-block-table（記事内テーブル）
   「美術館のような静謐さ」を維持したミニマルなテーブルデザイン
   ========================================================================== */

/* テーブルコンテナ - 横スクロール対応 */
figure.wp-block-table {
    margin: 32px 0;
    padding: 0;
    overflow: visible;
}

figure.wp-block-table > table,
.wp-block-table > table,
.post_content .wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    background: #fff;
    /* 上下の罫線のみ（シンプル） */
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

@media (min-width: 768px) {
    figure.wp-block-table > table,
    .wp-block-table > table,
    .post_content .wp-block-table table {
        font-size: 15px;
    }
}

/* モバイル横スクロール */
@media (max-width: 767px) {
    figure.wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* スクロールヒント（右側にフェード） */
        background:
            linear-gradient(to right, #fff 30%, transparent),
            linear-gradient(to left, #fff 30%, transparent),
            linear-gradient(to right, rgba(0,0,0,0.05), transparent 20px),
            linear-gradient(to left, rgba(0,0,0,0.05), transparent 20px);
        background-position: left, right, left, right;
        background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }

    figure.wp-block-table > table,
    .wp-block-table > table {
        min-width: 500px;
    }
}

/* ヘッダー行 (thead) */
figure.wp-block-table thead,
.wp-block-table thead,
.post_content .wp-block-table thead {
    background: #fafafa;
}

figure.wp-block-table th,
.wp-block-table th,
.post_content .wp-block-table th {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: #171717;
    text-align: left;
    border-bottom: 2px solid #e5e5e5;
    white-space: nowrap;
}

@media (min-width: 768px) {
    figure.wp-block-table th,
    .wp-block-table th,
    .post_content .wp-block-table th {
        padding: 16px 20px;
        font-size: 14px;
    }
}

/* ボディセル (td) */
figure.wp-block-table td,
.wp-block-table td,
.post_content .wp-block-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
    figure.wp-block-table td,
    .wp-block-table td,
    .post_content .wp-block-table td {
        padding: 16px 20px;
    }
}

/* 最終行は下線なし（テーブル枠線と重複防止） */
figure.wp-block-table tbody tr:last-child td,
.wp-block-table tbody tr:last-child td,
.post_content .wp-block-table tbody tr:last-child td {
    border-bottom: none;
}

/* 行ホバー - 淡いゴールドで上品に */
figure.wp-block-table tbody tr:hover td,
.wp-block-table tbody tr:hover td,
.post_content .wp-block-table tbody tr:hover td {
    background-color: rgba(184, 134, 11, 0.04);
}

/* 最初の列（見出し列として使われる場合） */
figure.wp-block-table td:first-child,
.wp-block-table td:first-child,
.post_content .wp-block-table td:first-child {
    font-weight: 500;
    color: #171717;
}

/* has-fixed-layout（固定幅テーブル） */
figure.wp-block-table table.has-fixed-layout,
.wp-block-table table.has-fixed-layout {
    table-layout: fixed;
}

/* キャプション */
figure.wp-block-table figcaption,
.wp-block-table figcaption {
    margin-top: 12px;
    font-size: 12px;
    color: #737373;
    text-align: center;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   SWELLテーマのテーブルスタイル上書き
   -------------------------------------------------------------------------- */

/* SWELLデフォルトのボーダー・背景をリセット */
.post_content table:not([class]) th,
.post_content table:not([class]) td {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}

.post_content table:not([class]) th {
    background: #fafafa;
    border-bottom: 2px solid #e5e5e5;
}

.post_content table:not([class]) tbody tr:last-child td {
    border-bottom: none;
}

.post_content table:not([class]) tbody tr:hover td {
    background-color: rgba(184, 134, 11, 0.04);
}

/* SWELLのストライプテーブル上書き */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: transparent;
}

.wp-block-table.is-style-stripes tbody tr:hover td {
    background-color: rgba(184, 134, 11, 0.04);
}

/* --------------------------------------------------------------------------
   SWELLスクロールラッパー内テーブル
   -------------------------------------------------------------------------- */

.swell-table-scroll-wrapper,
.swell-accordion-table-wrapper {
    margin: 32px 0;
}

.swell-table-scroll-wrapper figure.wp-block-table,
.swell-accordion-content figure.wp-block-table,
.swell-accordion-inner figure.wp-block-table {
    margin: 0;
}

/* --------------------------------------------------------------------------
   theadなしテーブル（tbody内の最初の行をヘッダーとして扱う）
   SWELLエディタで作成されたテーブルの多くがこのパターン
   -------------------------------------------------------------------------- */

/* tbody内の最初の行をヘッダースタイルに */
figure.wp-block-table tbody tr:first-child td,
.wp-block-table tbody tr:first-child td,
.post_content .wp-block-table tbody tr:first-child td,
.swell-table-scroll-wrapper table tbody tr:first-child td,
.swell-accordion-inner table tbody tr:first-child td {
    background: #fafafa !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: #171717;
    border-bottom: 2px solid #e5e5e5;
}

@media (min-width: 768px) {
    figure.wp-block-table tbody tr:first-child td,
    .wp-block-table tbody tr:first-child td,
    .post_content .wp-block-table tbody tr:first-child td,
    .swell-table-scroll-wrapper table tbody tr:first-child td,
    .swell-accordion-inner table tbody tr:first-child td {
        font-size: 14px;
    }
}

/* ヘッダー行はホバーエフェクト無効 */
figure.wp-block-table tbody tr:first-child:hover td,
.wp-block-table tbody tr:first-child:hover td,
.post_content .wp-block-table tbody tr:first-child:hover td,
.swell-table-scroll-wrapper table tbody tr:first-child:hover td,
.swell-accordion-inner table tbody tr:first-child:hover td {
    background: #fafafa !important;
}

/* SWELLデフォルトの青いヘッダースタイルを完全にリセット */
.swell-table-scroll-wrapper table th,
.swell-table-scroll-wrapper table td,
.swell-accordion-inner table th,
.swell-accordion-inner table td {
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .swell-table-scroll-wrapper table th,
    .swell-table-scroll-wrapper table td,
    .swell-accordion-inner table th,
    .swell-accordion-inner table td {
        padding: 16px 20px;
        font-size: 15px;
    }
}

/* ヘッダー行の下線を太く */
.swell-table-scroll-wrapper table tbody tr:first-child td,
.swell-accordion-inner table tbody tr:first-child td {
    border-bottom: 2px solid #e5e5e5 !important;
}

/* 最終行は下線なし */
.swell-table-scroll-wrapper table tbody tr:last-child td,
.swell-accordion-inner table tbody tr:last-child td {
    border-bottom: none !important;
}

/* データ行のホバー */
.swell-table-scroll-wrapper table tbody tr:not(:first-child):hover td,
.swell-accordion-inner table tbody tr:not(:first-child):hover td {
    background-color: rgba(184, 134, 11, 0.04) !important;
}

/* 最初の列を見出し風に */
.swell-table-scroll-wrapper table tbody tr:not(:first-child) td:first-child,
.swell-accordion-inner table tbody tr:not(:first-child) td:first-child {
    font-weight: 500;
    color: #171717;
}

/* テーブル全体の枠線 */
.swell-table-scroll-wrapper table,
.swell-accordion-inner table {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-collapse: separate;
    border-spacing: 0;
}

/* --------------------------------------------------------------------------
   アクセシビリティ: フォーカス状態
   -------------------------------------------------------------------------- */

figure.wp-block-table a:focus-visible {
    outline: 2px solid #b8860b;
    outline-offset: 2px;
}