/* =============================================
   Otoha - メインCSS（白テーマ）
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=Outfit:wght@400;600;800&display=swap');

:root {
    --otoha-bg:        #ffffff;
    --otoha-bg2:       #f7f7f9;
    --otoha-bg3:       #eeeeF2;
    --otoha-primary:   #f0c30f;
    --otoha-accent:    #222222;
    --otoha-text:      #1a1a1a;
    --otoha-muted:     #777788;
    --otoha-border:    #e5e5ea;
    --otoha-radius:    12px;
    --otoha-font-ja:   'Zen Kaku Gothic New', sans-serif;
    --otoha-font-en:   'Outfit', sans-serif;
}

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

body {
    background: var(--otoha-bg);
    color: var(--otoha-text);
    font-family: var(--otoha-font-ja);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ===== レイアウト ===== */
.otoha-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== ヘッダー ===== */
.otoha-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 3px solid var(--otoha-primary);
}

.otoha-header .otoha-container {
    padding: 0 24px;
}

.otoha-header__inner {
    display: flex;
    align-items: stretch;
    height: 56px;
}

/* ロゴ */
.otoha-logo {
    font-family: var(--otoha-font-en);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: #fff;
    background: var(--otoha-accent);
    padding: 0 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.otoha-logo em {
    font-style: normal;
    color: var(--otoha-primary);
}

.otoha-logo img {
    height: 36px;
    width: auto;
}

/* PCナビ */
.otoha-nav-wrap {
    flex: 1;
    display: flex;
    align-items: stretch;
}

.otoha-nav {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.otoha-nav li {
    display: flex;
    align-items: stretch;
}

.otoha-nav a {
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--otoha-text);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.otoha-nav a:hover {
    background: var(--otoha-primary);
    color: var(--otoha-accent);
}

/* ハンバーガーボタン */
.otoha-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 56px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

.otoha-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--otoha-accent);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.otoha-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.otoha-hamburger.is-active span:nth-child(2) { opacity: 0; }
.otoha-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイルメニュー */
.otoha-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 85vw);
    height: 100%;
    background: var(--otoha-accent);
    z-index: 200;
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
}

.otoha-mobile-menu.is-open { right: 0; }

.otoha-mobile-menu__inner { padding: 72px 0 40px; }

.otoha-mobile-nav { list-style: none; }

.otoha-mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }

.otoha-mobile-nav a {
    display: block;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    transition: background 0.2s, color 0.2s;
}

.otoha-mobile-nav a:hover {
    background: rgba(255,255,255,0.08);
    color: var(--otoha-primary);
}

.otoha-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}

.otoha-mobile-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

/* ===== ヒーロー ===== */
.otoha-hero {
    background: var(--otoha-accent);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.otoha-hero::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 360px;
    height: 360px;
    background: var(--otoha-primary);
    border-radius: 50%;
    opacity: 0.12;
    pointer-events: none;
}

.otoha-hero__label {
    display: inline-block;
    font-family: var(--otoha-font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--otoha-primary);
    margin-bottom: 16px;
}

.otoha-hero__title {
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 16px;
    color: #fff;
}

.otoha-hero__title em {
    font-style: normal;
    color: var(--otoha-primary);
}

.otoha-hero__desc {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    max-width: 480px;
}

/* ===== セクション ===== */
.otoha-section { padding: 56px 0; }

.otoha-section__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--otoha-border);
    padding-bottom: 12px;
}

.otoha-section__title {
    font-family: var(--otoha-font-en);
    font-size: 18px;
    font-weight: 800;
    color: var(--otoha-accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.otoha-section__title::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 4px;
    background: var(--otoha-primary);
    border-radius: 2px;
}

.otoha-section__more {
    font-size: 12px;
    font-weight: 700;
    color: var(--otoha-muted);
    margin-left: auto;
    border: 1.5px solid var(--otoha-border);
    padding: 4px 14px;
    border-radius: 20px;
    transition: all 0.2s;
    font-family: var(--otoha-font-en);
}

.otoha-section__more:hover {
    border-color: var(--otoha-accent);
    color: var(--otoha-accent);
}

/* ===== 番組グリッド ===== */
.otoha-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.otoha-program-card {
    background: #fff;
    border-radius: var(--otoha-radius);
    overflow: hidden;
    border: 1.5px solid var(--otoha-border);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.otoha-program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    border-color: var(--otoha-primary);
}

.otoha-program-card__thumb {
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
    background: var(--otoha-bg2);
}

.otoha-program-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.otoha-program-card:hover .otoha-program-card__thumb img { transform: scale(1.05); }

.otoha-program-card__thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: var(--otoha-bg2);
}

.otoha-program-card__body { padding: 14px 16px 10px; }

.otoha-program-card__title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    line-height: 1.4;
    color: var(--otoha-accent);
}

.otoha-program-card__desc {
    font-size: 12px;
    color: var(--otoha-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.otoha-program-card__count {
    font-family: var(--otoha-font-en);
    font-size: 11px;
    color: var(--otoha-muted);
    font-weight: 600;
    margin-top: 8px;
}

/* ミニプレイヤー */
.otoha-program-card__latest {
    border-top: 1.5px solid var(--otoha-border);
    padding: 10px 14px;
    background: var(--otoha-bg2);
}

.otoha-program-card__latest-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--otoha-muted);
    margin-bottom: 7px;
    font-family: var(--otoha-font-en);
    font-weight: 700;
}

.otoha-mini-player { display: flex; align-items: center; gap: 10px; }

.otoha-mini-player__btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--otoha-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s, background 0.2s;
    color: var(--otoha-accent);
}

.otoha-mini-player__btn:hover {
    transform: scale(1.1);
    background: var(--otoha-accent);
    color: #fff;
}

.otoha-mini-player__btn svg { width: 13px; height: 13px; fill: currentColor; margin-left: 2px; }

.otoha-mini-player__info { flex: 1; min-width: 0; }

.otoha-mini-player__title {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--otoha-accent);
}

.otoha-mini-player__duration {
    font-family: var(--otoha-font-en);
    font-size: 11px;
    color: var(--otoha-muted);
}

/* ===== エピソードリスト ===== */
.otoha-episode-list { display: flex; flex-direction: column; gap: 2px; }

.otoha-episode-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 1.5px solid var(--otoha-border);
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}

.otoha-episode-item:hover {
    background: var(--otoha-bg2);
    border-color: var(--otoha-primary);
}

.otoha-episode-item__num {
    font-family: var(--otoha-font-en);
    font-size: 12px;
    color: var(--otoha-muted);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 600;
}

.otoha-episode-item__thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--otoha-bg2);
}

.otoha-episode-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.otoha-episode-item__info { flex: 1; min-width: 0; }

.otoha-episode-item__title {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--otoha-accent);
}

.otoha-episode-item__meta {
    font-size: 12px;
    color: var(--otoha-muted);
    margin-top: 2px;
    display: flex;
    gap: 12px;
}

.otoha-episode-item__play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--otoha-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    color: var(--otoha-muted);
}

.otoha-episode-item:hover .otoha-episode-item__play {
    border-color: var(--otoha-primary);
    background: var(--otoha-primary);
    color: var(--otoha-accent);
}

.otoha-episode-item__play svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }

/* ===== フルプレイヤー ===== */
.otoha-player {
    padding: 4px 0;
    margin: 8px 0;
}

.otoha-player__tabs { display: flex; gap: 8px; margin-bottom: 16px; }

.otoha-tab {
    background: transparent;
    border: 1.5px solid var(--otoha-border);
    border-radius: 20px;
    color: var(--otoha-muted);
    cursor: pointer;
    padding: 6px 18px;
    font-size: 13px;
    font-family: var(--otoha-font-ja);
    font-weight: 700;
    transition: all 0.2s;
}

.otoha-tab--active, .otoha-tab:hover {
    background: var(--otoha-primary);
    border-color: var(--otoha-primary);
    color: var(--otoha-accent);
}

.otoha-pane { display: none; }
.otoha-pane--active { display: block; }

.otoha-audio-element { width: 100%; height: 44px; border-radius: 8px; }

.otoha-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.otoha-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* ===== フッター ===== */
.otoha-footer {
    background: var(--otoha-accent);
    padding: 40px 0;
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.otoha-footer__logo {
    font-family: var(--otoha-font-en);
    font-weight: 800;
    font-size: 20px;
    color: var(--otoha-primary);
    margin-bottom: 10px;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
    .otoha-nav-wrap  { display: none; }
    .otoha-hamburger { display: flex; }

    .otoha-program-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .otoha-hero { padding: 40px 0; }
    .otoha-episode-item__num { display: none; }
}

@media (max-width: 480px) {
    .otoha-program-grid { grid-template-columns: 1fr 1fr; }
    .otoha-container { padding: 0 16px; }
}

/* ===== 番組詳細ページ ===== */
.otoha-program-hero {
    background: var(--otoha-accent);
    padding: 48px 0;
}

.otoha-program-hero__inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* カバー画像 */
.otoha-program-hero__cover {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.otoha-program-hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.otoha-program-hero__cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

/* 番組情報 */
.otoha-program-hero__info {
    flex: 1;
    color: #fff;
}

.otoha-program-hero__label {
    font-family: var(--otoha-font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--otoha-primary);
    margin-bottom: 10px;
}

.otoha-program-hero__title {
    font-size: clamp(22px, 4vw, 40px);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 8px;
}

.otoha-program-hero__author {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 14px;
}

.otoha-program-hero__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 16px;
}

.otoha-program-hero__meta {
    font-family: var(--otoha-font-en);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 24px;
}

/* アクションボタン */
.otoha-program-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.otoha-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.otoha-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.otoha-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.otoha-btn--spotify {
    background: #1DB954;
    color: #fff;
}

.otoha-btn--apple {
    background: #9933CC;
    color: #fff;
}

.otoha-btn--rss {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

/* レスポンシブ */
@media (max-width: 640px) {
    .otoha-program-hero__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .otoha-program-hero__cover {
        width: 160px;
        height: 160px;
    }

    .otoha-program-hero__desc { max-width: 100%; }

    .otoha-program-hero__actions { justify-content: center; }
}

/* ===== 番組詳細ページ ===== */
.otoha-program-hero {
    background: var(--otoha-accent);
    padding: 48px 0;
}

.otoha-program-hero__inner {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.otoha-program-hero__cover {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.otoha-program-hero__cover img { width:100%; height:100%; object-fit:cover; }

.otoha-program-hero__cover-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:56px;
}

.otoha-program-hero__info { flex:1; color:#fff; }

.otoha-program-hero__label {
    font-family: var(--otoha-font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--otoha-primary);
    margin-bottom: 8px;
}

.otoha-program-hero__title {
    font-size: clamp(20px, 4vw, 36px);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 6px;
}

.otoha-program-hero__author {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 10px;
}

.otoha-program-hero__meta {
    font-family: var(--otoha-font-en);
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

/* 2カラムレイアウト（サイドバーあり） */
.otoha-program-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}

/* 1カラムレイアウト（サイドバーなし） */
.otoha-program-layout--full {
    display: block;
}

/* 番組説明 */
.otoha-program-desc {
    background: var(--otoha-bg2);
    border-radius: var(--otoha-radius);
    padding: 24px;
    border: 1.5px solid var(--otoha-border);
    font-size: 15px;
    line-height: 1.8;
    color: var(--otoha-text);
}

/* エピソードカード */
.otoha-episode-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.otoha-episode-card {
    background: #fff;
    border-radius: var(--otoha-radius);
    border: 1.5px solid var(--otoha-border);
    overflow: hidden;
    display: flex;
    gap: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.otoha-episode-card:hover {
    border-color: var(--otoha-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.otoha-episode-card__thumb {
    width: 120px;
    flex-shrink: 0;
}

.otoha-episode-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.otoha-episode-card__body {
    padding: 18px 20px;
    flex: 1;
    min-width: 0;
}

.otoha-episode-card__meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.otoha-episode-card__num {
    font-family: var(--otoha-font-en);
    font-size: 11px;
    font-weight: 700;
    background: var(--otoha-primary);
    color: var(--otoha-accent);
    padding: 2px 8px;
    border-radius: 4px;
}

.otoha-episode-card__date,
.otoha-episode-card__duration {
    font-family: var(--otoha-font-en);
    font-size: 12px;
    color: var(--otoha-muted);
}

.otoha-episode-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.otoha-episode-card__title a {
    color: var(--otoha-accent);
    transition: color 0.2s;
}

.otoha-episode-card__title a:hover { color: var(--otoha-primary); }

.otoha-episode-card__desc {
    font-size: 14px;
    color: var(--otoha-muted);
    line-height: 1.7;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.otoha-episode-card__more {
    font-size: 12px;
    font-weight: 700;
    color: var(--otoha-accent);
    font-family: var(--otoha-font-en);
    display: inline-block;
    margin-top: 8px;
    transition: color 0.2s;
}

.otoha-episode-card__more:hover { color: var(--otoha-primary); }

/* シークバー付きプレイヤー */
.otoha-seekplayer {
    margin: 12px 0;
    background: var(--otoha-bg2);
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid var(--otoha-border);
}

.otoha-seekplayer__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.otoha-seekplayer__btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--otoha-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s, background 0.2s;
    color: var(--otoha-accent);
}

.otoha-seekplayer__btn:hover {
    transform: scale(1.08);
    background: var(--otoha-accent);
    color: #fff;
}

.otoha-seekplayer__btn svg { width:14px; height:14px; fill:currentColor; }
.otoha-seekplayer__btn .icon-play { margin-left:2px; }

.otoha-seekplayer__timeline { flex:1; }

.otoha-seekplayer__progress {
    position: relative;
    height: 4px;
    background: var(--otoha-border);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 6px;
}

.otoha-seekplayer__bar {
    height: 100%;
    background: var(--otoha-primary);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none;
}

.otoha-seekplayer__thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--otoha-accent);
    border: 2px solid var(--otoha-primary);
    border-radius: 50%;
    pointer-events: none;
    transition: left 0.1s linear;
}

.otoha-seekplayer__times {
    display: flex;
    justify-content: space-between;
    font-family: var(--otoha-font-en);
    font-size: 11px;
    color: var(--otoha-muted);
}

/* サイドバー */
.otoha-sidebar {
    position: sticky;
    top: 72px;
}

.otoha-program-sidebar {
    position: sticky;
    top: 72px;
}

.otoha-widget {
    background: #fff;
    border: 1.5px solid var(--otoha-border);
    border-radius: var(--otoha-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.otoha-widget__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--otoha-accent);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--otoha-primary);
    font-family: var(--otoha-font-en);
}

/* レスポンシブ */
@media (max-width: 900px) {
    .otoha-program-layout {
        grid-template-columns: 1fr;
    }

    .otoha-program-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .otoha-program-hero__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .otoha-program-hero__cover { width:160px; height:160px; }

    .otoha-episode-card { flex-direction: column; }

    .otoha-episode-card__thumb { width:100%; height:180px; }
}

/* =============================================
   プレイヤー 4スタイル
   ============================================= */

/* 共通ベース */
.otoha-seekplayer {
    border-radius: 12px;
    padding: 16px 20px;
    margin: 12px 0;
}

.otoha-seekplayer__progress {
    position: relative;
    height: 4px;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 6px;
}

.otoha-seekplayer__bar {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    pointer-events: none;
    transition: width 0.1s linear;
}

.otoha-seekplayer__thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    transition: left 0.1s linear;
}

.otoha-seekplayer__times {
    display: flex;
    justify-content: space-between;
    font-family: var(--otoha-font-en);
    font-size: 11px;
    margin-bottom: 14px;
}

.otoha-seekplayer__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* 再生ボタン */
.otoha-seekplayer__btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.otoha-seekplayer__btn:hover { transform: scale(1.08); }

.otoha-seekplayer__btn svg { width:20px; height:20px; fill:currentColor; }
.otoha-seekplayer__btn .icon-play { margin-left:2px; }

/* スキップボタン */
.otoha-seekplayer__skip {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: opacity 0.2s, transform 0.2s;
    padding: 4px;
}

.otoha-seekplayer__skip:hover { opacity: 0.75; transform: scale(1.1); }

.otoha-seekplayer__skip svg { width:22px; height:22px; fill:currentColor; }

.otoha-seekplayer__skip span {
    font-family: var(--otoha-font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* =============================================
   DARK スタイル（デフォルト）
   ============================================= */
.otoha-seekplayer--dark {
    background: #1a1a2e;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.otoha-seekplayer--dark .otoha-seekplayer__progress {
    background: rgba(255,255,255,0.12);
}

.otoha-seekplayer--dark .otoha-seekplayer__bar {
    background: var(--otoha-primary);
}

.otoha-seekplayer--dark .otoha-seekplayer__thumb {
    background: #fff;
    border: 2px solid var(--otoha-primary);
}

.otoha-seekplayer--dark .otoha-seekplayer__times {
    color: rgba(255,255,255,0.5);
}

.otoha-seekplayer--dark .otoha-seekplayer__btn {
    background: var(--otoha-primary);
    color: #1a1a2e;
}

.otoha-seekplayer--dark .otoha-seekplayer__skip {
    color: rgba(255,255,255,0.7);
}

/* =============================================
   NEON スタイル（ピンク・グラデーション）
   ============================================= */
.otoha-seekplayer--neon {
    background: linear-gradient(135deg, #e91e8c 0%, #ff6b6b 100%);
    box-shadow: 0 4px 24px rgba(233,30,140,0.4);
}

.otoha-seekplayer--neon .otoha-seekplayer__progress {
    background: rgba(255,255,255,0.25);
}

.otoha-seekplayer--neon .otoha-seekplayer__bar {
    background: #fff;
}

.otoha-seekplayer--neon .otoha-seekplayer__thumb {
    background: #fff;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
}

.otoha-seekplayer--neon .otoha-seekplayer__times {
    color: rgba(255,255,255,0.7);
}

.otoha-seekplayer--neon .otoha-seekplayer__btn {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
}

.otoha-seekplayer--neon .otoha-seekplayer__btn:hover {
    background: rgba(255,255,255,0.4);
}

.otoha-seekplayer--neon .otoha-seekplayer__skip {
    color: rgba(255,255,255,0.85);
}

/* =============================================
   MIDNIGHT スタイル（ネイビー・パープル）
   ============================================= */
.otoha-seekplayer--midnight {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    box-shadow: 0 4px 24px rgba(48,43,99,0.5);
}

.otoha-seekplayer--midnight .otoha-seekplayer__progress {
    background: rgba(255,255,255,0.1);
}

.otoha-seekplayer--midnight .otoha-seekplayer__bar {
    background: linear-gradient(90deg, #a78bfa, #7c3aed);
}

.otoha-seekplayer--midnight .otoha-seekplayer__thumb {
    background: #a78bfa;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(167,139,250,0.8);
}

.otoha-seekplayer--midnight .otoha-seekplayer__times {
    color: rgba(167,139,250,0.7);
}

.otoha-seekplayer--midnight .otoha-seekplayer__btn {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124,58,237,0.5);
}

.otoha-seekplayer--midnight .otoha-seekplayer__skip {
    color: rgba(167,139,250,0.8);
}

/* =============================================
   LIGHT スタイル（ホワイト・ミニマル）
   ============================================= */
.otoha-seekplayer--light {
    background: #fff;
    border: 1.5px solid #e5e5ea;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.otoha-seekplayer--light .otoha-seekplayer__progress {
    background: #e5e5ea;
}

.otoha-seekplayer--light .otoha-seekplayer__bar {
    background: var(--otoha-accent);
}

.otoha-seekplayer--light .otoha-seekplayer__thumb {
    background: var(--otoha-accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

.otoha-seekplayer--light .otoha-seekplayer__times {
    color: #aaa;
}

.otoha-seekplayer--light .otoha-seekplayer__btn {
    background: var(--otoha-accent);
    color: #fff;
}

.otoha-seekplayer--light .otoha-seekplayer__skip {
    color: #aaa;
}

.otoha-seekplayer--light .otoha-seekplayer__skip:hover {
    color: var(--otoha-accent);
}

/* =============================================
   エピソードカード 4スタイル別デザイン
   ============================================= */

/* --- Dark --- */
.otoha-episode-card--dark {
    background: #1a1a2e;
    border-color: rgba(255,255,255,0.08);
    color: #f0f0f0;
}
.otoha-episode-card--dark:hover {
    border-color: var(--otoha-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.otoha-episode-card--dark .otoha-episode-card__title a { color: #fff; }
.otoha-episode-card--dark .otoha-episode-card__title a:hover { color: var(--otoha-primary); }
.otoha-episode-card--dark .otoha-episode-card__desc { color: rgba(255,255,255,0.55); }
.otoha-episode-card--dark .otoha-episode-card__date,
.otoha-episode-card--dark .otoha-episode-card__duration { color: rgba(255,255,255,0.4); }
.otoha-episode-card--dark .otoha-episode-card__more { color: var(--otoha-primary); }

/* --- Neon --- */
.otoha-episode-card--neon {
    background: #1a0a14;
    border-color: rgba(233,30,140,0.2);
    color: #f0f0f0;
}
.otoha-episode-card--neon:hover {
    border-color: #e91e8c;
    box-shadow: 0 4px 20px rgba(233,30,140,0.2);
}
.otoha-episode-card--neon .otoha-episode-card__num {
    background: linear-gradient(135deg, #e91e8c, #ff6b6b);
    color: #fff;
}
.otoha-episode-card--neon .otoha-episode-card__title a { color: #fff; }
.otoha-episode-card--neon .otoha-episode-card__title a:hover { color: #ff6b9d; }
.otoha-episode-card--neon .otoha-episode-card__desc { color: rgba(255,255,255,0.55); }
.otoha-episode-card--neon .otoha-episode-card__date,
.otoha-episode-card--neon .otoha-episode-card__duration { color: rgba(255,255,255,0.4); }
.otoha-episode-card--neon .otoha-episode-card__more { color: #ff6b9d; }

/* --- Midnight --- */
.otoha-episode-card--midnight {
    background: linear-gradient(135deg, #0f0c29, #1a1545);
    border-color: rgba(167,139,250,0.15);
    color: #e2e0ff;
}
.otoha-episode-card--midnight:hover {
    border-color: #a78bfa;
    box-shadow: 0 4px 20px rgba(124,58,237,0.2);
}
.otoha-episode-card--midnight .otoha-episode-card__num {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
}
.otoha-episode-card--midnight .otoha-episode-card__title a { color: #e2e0ff; }
.otoha-episode-card--midnight .otoha-episode-card__title a:hover { color: #a78bfa; }
.otoha-episode-card--midnight .otoha-episode-card__desc { color: rgba(226,224,255,0.55); }
.otoha-episode-card--midnight .otoha-episode-card__date,
.otoha-episode-card--midnight .otoha-episode-card__duration { color: rgba(167,139,250,0.6); }
.otoha-episode-card--midnight .otoha-episode-card__more { color: #a78bfa; }

/* --- Light --- */
.otoha-episode-card--light {
    background: #fff;
    border-color: #e5e5ea;
}
.otoha-episode-card--light:hover {
    border-color: var(--otoha-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.otoha-episode-card--light .otoha-episode-card__title a { color: var(--otoha-accent); }
.otoha-episode-card--light .otoha-episode-card__desc { color: var(--otoha-muted); }
.otoha-episode-card--light .otoha-episode-card__more { color: var(--otoha-accent); }

/* =============================================
   ミニプレイヤー 4スタイル別
   ============================================= */

/* --- Dark --- */
.otoha-program-card__latest--dark {
    background: #1a1a2e;
    border-top-color: rgba(255,255,255,0.08);
}
.otoha-program-card__latest--dark .otoha-program-card__latest-label {
    color: rgba(255,255,255,0.35);
}
.otoha-mini-player--dark .otoha-mini-player__title { color: #fff; }
.otoha-mini-player--dark .otoha-mini-player__duration { color: rgba(255,255,255,0.4); }
.otoha-mini-player--dark .otoha-mini-player__btn {
    background: var(--otoha-primary);
    color: #1a1a2e;
}

/* --- Neon --- */
.otoha-program-card__latest--neon {
    background: linear-gradient(135deg, #e91e8c22, #ff6b6b11);
    border-top-color: rgba(233,30,140,0.2);
}
.otoha-program-card__latest--neon .otoha-program-card__latest-label {
    color: rgba(233,30,140,0.6);
}
.otoha-mini-player--neon .otoha-mini-player__title { color: #fff; }
.otoha-mini-player--neon .otoha-mini-player__duration { color: rgba(255,255,255,0.4); }
.otoha-mini-player--neon .otoha-mini-player__btn {
    background: linear-gradient(135deg, #e91e8c, #ff6b6b);
    color: #fff;
}

/* --- Midnight --- */
.otoha-program-card__latest--midnight {
    background: linear-gradient(135deg, #0f0c29, #1a1545);
    border-top-color: rgba(167,139,250,0.15);
}
.otoha-program-card__latest--midnight .otoha-program-card__latest-label {
    color: rgba(167,139,250,0.5);
}
.otoha-mini-player--midnight .otoha-mini-player__title { color: #e2e0ff; }
.otoha-mini-player--midnight .otoha-mini-player__duration { color: rgba(167,139,250,0.6); }
.otoha-mini-player--midnight .otoha-mini-player__btn {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
}

/* --- Light --- */
.otoha-program-card__latest--light {
    background: var(--otoha-bg2);
    border-top-color: var(--otoha-border);
}
.otoha-program-card__latest--light .otoha-program-card__latest-label {
    color: var(--otoha-muted);
}
.otoha-mini-player--light .otoha-mini-player__title { color: var(--otoha-accent); }
.otoha-mini-player--light .otoha-mini-player__duration { color: var(--otoha-muted); }
.otoha-mini-player--light .otoha-mini-player__btn {
    background: var(--otoha-accent);
    color: #fff;
}

/* =============================================
   チャプターリスト
   ============================================= */
.otoha-chapters {
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0;
}

.otoha-chapters__head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 16px;
    font-family: var(--otoha-font-en);
}

.otoha-chapters__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.otoha-chapters__item {
    border-top: 1px solid rgba(255,255,255,0.06);
}

.otoha-chapters__btn {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-align: left;
    transition: background 0.15s;
    font-family: var(--otoha-font-ja);
}

.otoha-chapters__time {
    font-family: var(--otoha-font-en);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    width: 52px;
}

.otoha-chapters__label {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
}

.otoha-chapters__play {
    font-size: 10px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.otoha-chapters__btn:hover .otoha-chapters__play { opacity: 1; }

.otoha-chapters__item.is-active .otoha-chapters__play {
    opacity: 1;
}

/* --- Dark --- */
.otoha-chapters--dark { background: #12121e; }
.otoha-chapters--dark .otoha-chapters__head { color: rgba(255,255,255,0.4); }
.otoha-chapters--dark .otoha-chapters__item { border-top-color: rgba(255,255,255,0.05); }
.otoha-chapters--dark .otoha-chapters__btn { color: rgba(255,255,255,0.8); }
.otoha-chapters--dark .otoha-chapters__btn:hover { background: rgba(255,255,255,0.05); }
.otoha-chapters--dark .otoha-chapters__time { color: var(--otoha-primary); }
.otoha-chapters--dark .otoha-chapters__play { color: var(--otoha-primary); }
.otoha-chapters--dark .otoha-chapters__item.is-active .otoha-chapters__btn { background: rgba(240,195,15,0.08); }

/* --- Neon --- */
.otoha-chapters--neon { background: #1a0a14; }
.otoha-chapters--neon .otoha-chapters__head { color: rgba(233,30,140,0.5); }
.otoha-chapters--neon .otoha-chapters__item { border-top-color: rgba(233,30,140,0.1); }
.otoha-chapters--neon .otoha-chapters__btn { color: rgba(255,255,255,0.8); }
.otoha-chapters--neon .otoha-chapters__btn:hover { background: rgba(233,30,140,0.08); }
.otoha-chapters--neon .otoha-chapters__time { color: #ff6b9d; }
.otoha-chapters--neon .otoha-chapters__play { color: #ff6b9d; }
.otoha-chapters--neon .otoha-chapters__item.is-active .otoha-chapters__btn { background: rgba(233,30,140,0.12); }

/* --- Midnight --- */
.otoha-chapters--midnight { background: #0c0a20; }
.otoha-chapters--midnight .otoha-chapters__head { color: rgba(167,139,250,0.4); }
.otoha-chapters--midnight .otoha-chapters__item { border-top-color: rgba(167,139,250,0.08); }
.otoha-chapters--midnight .otoha-chapters__btn { color: rgba(226,224,255,0.8); }
.otoha-chapters--midnight .otoha-chapters__btn:hover { background: rgba(167,139,250,0.08); }
.otoha-chapters--midnight .otoha-chapters__time { color: #a78bfa; }
.otoha-chapters--midnight .otoha-chapters__play { color: #a78bfa; }
.otoha-chapters--midnight .otoha-chapters__item.is-active .otoha-chapters__btn { background: rgba(124,58,237,0.15); }

/* --- Light --- */
.otoha-chapters--light { background: var(--otoha-bg2); border: 1.5px solid var(--otoha-border); }
.otoha-chapters--light .otoha-chapters__head { color: var(--otoha-muted); }
.otoha-chapters--light .otoha-chapters__item { border-top-color: var(--otoha-border); }
.otoha-chapters--light .otoha-chapters__btn { color: var(--otoha-text); }
.otoha-chapters--light .otoha-chapters__btn:hover { background: rgba(0,0,0,0.04); }
.otoha-chapters--light .otoha-chapters__time { color: var(--otoha-accent); }
.otoha-chapters--light .otoha-chapters__play { color: var(--otoha-accent); }
.otoha-chapters--light .otoha-chapters__item.is-active .otoha-chapters__btn { background: rgba(0,0,0,0.06); }

/* =============================================
   エピソード詳細ページ
   ============================================= */

/* パンくず */
.otoha-episode-hero__breadcrumb {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
}

.otoha-episode-hero__breadcrumb a {
    color: var(--otoha-primary);
    text-decoration: none;
}

.otoha-episode-hero__breadcrumb a:hover {
    text-decoration: underline;
}

/* パーソナリティー */
.otoha-episode-hero__personalities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 14px;
}

.otoha-episode-hero__personality {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 前後ナビゲーション */
.otoha-episode-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--otoha-border);
}

.otoha-episode-nav__item a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--otoha-bg2);
    border: 1.5px solid var(--otoha-border);
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
    text-decoration: none;
}

.otoha-episode-nav__item a:hover {
    border-color: var(--otoha-primary);
    background: #fff;
}

.otoha-episode-nav__item--next a {
    text-align: right;
}

.otoha-episode-nav__dir {
    font-size: 11px;
    font-weight: 700;
    color: var(--otoha-muted);
    font-family: var(--otoha-font-en);
    letter-spacing: 0.5px;
}

.otoha-episode-nav__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--otoha-accent);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 480px) {
    .otoha-episode-nav {
        grid-template-columns: 1fr;
    }
    .otoha-episode-nav__item--next a {
        text-align: left;
    }
}

/* =============================================
   ページネーション
   ============================================= */
.otoha-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--otoha-border);
}

.otoha-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--otoha-font-en);
    border: 1.5px solid var(--otoha-border);
    color: var(--otoha-text);
    transition: all 0.2s;
    text-decoration: none;
}

.otoha-pagination .page-numbers:hover {
    border-color: var(--otoha-accent);
    color: var(--otoha-accent);
}

.otoha-pagination .page-numbers.current {
    background: var(--otoha-accent);
    border-color: var(--otoha-accent);
    color: #fff;
}

.otoha-pagination .page-numbers.dots {
    border-color: transparent;
    pointer-events: none;
}

/* ナビアイコン */
.otoha-nav a i,
.otoha-mobile-nav a i {
    font-size: 13px;
    width: 16px;
    text-align: center;
}

/* =============================================
   パンくずリスト
   ============================================= */
.otoha-breadcrumb {
    margin-bottom: 12px;
}

.otoha-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.otoha-breadcrumb__item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

.otoha-breadcrumb__item + .otoha-breadcrumb__item::before {
    content: '›';
    margin-right: 6px;
    color: rgba(255,255,255,0.3);
}

.otoha-breadcrumb__item a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.otoha-breadcrumb__item a:hover {
    color: var(--otoha-primary);
}

.otoha-breadcrumb__item span {
    color: rgba(255,255,255,0.4);
}

/* 固定ページ用パンくず（白背景） */
.otoha-page-hero .otoha-breadcrumb__item,
.otoha-page-hero .otoha-breadcrumb__item a { color: rgba(255,255,255,0.6); }

/* =============================================
   固定ページ
   ============================================= */
.otoha-page-hero {
    background: var(--otoha-accent);
    padding: 40px 0;
    min-height: 160px;
    display: flex;
    align-items: center;
}

.otoha-page-hero__title {
    font-size: clamp(22px, 4vw, 40px);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

.otoha-page-content {
    max-width: 860px;
    font-size: 15px;
    line-height: 1.9;
}

.otoha-page-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 2em 0 0.8em;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--otoha-primary);
    color: var(--otoha-accent);
}

.otoha-page-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 1.6em 0 0.6em;
    color: var(--otoha-accent);
}

.otoha-page-content p { margin-bottom: 1.2em; }

.otoha-page-content a {
    color: var(--otoha-accent);
    text-decoration: underline;
}

.otoha-page-content ul,
.otoha-page-content ol {
    padding-left: 1.5em;
    margin-bottom: 1.2em;
}

.otoha-page-content li { margin-bottom: 0.4em; }

.otoha-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
}

/* =============================================
   通常投稿カード（home.php / index.php用）
   ============================================= */
.otoha-post-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.otoha-post-card {
    display: flex;
    gap: 24px;
    background: #fff;
    border-radius: var(--otoha-radius);
    border: 1.5px solid var(--otoha-border);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.otoha-post-card:hover {
    border-color: var(--otoha-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.otoha-post-card__thumb {
    width: 200px;
    flex-shrink: 0;
}

.otoha-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.otoha-post-card__body {
    padding: 20px 20px 20px 0;
    flex: 1;
}

.otoha-post-card__meta {
    font-family: var(--otoha-font-en);
    font-size: 12px;
    color: var(--otoha-muted);
    margin-bottom: 8px;
}

.otoha-post-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.otoha-post-card__title a {
    color: var(--otoha-accent);
    transition: color 0.2s;
}

.otoha-post-card__title a:hover { color: var(--otoha-primary); }

.otoha-post-card__desc {
    font-size: 14px;
    color: var(--otoha-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .otoha-post-card { flex-direction: column; }
    .otoha-post-card__thumb { width: 100%; height: 180px; }
    .otoha-post-card__body { padding: 16px; }
}

/* =============================================
   フォント改善（Noto Sans JP + DM Sans）
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=DM+Sans:wght@400;600;800&display=swap');

:root {
    --otoha-font-ja: 'Noto Sans JP', sans-serif;
    --otoha-font-en: 'DM Sans', sans-serif;
}

/* =============================================
   パンくず（コンテンツエリア・白背景版）
   ============================================= */
.otoha-section .otoha-breadcrumb {
    margin-bottom: 20px;
}

.otoha-section .otoha-breadcrumb__item,
.otoha-section .otoha-breadcrumb__item span {
    color: var(--otoha-muted);
}

.otoha-section .otoha-breadcrumb__item a {
    color: var(--otoha-accent);
}

.otoha-section .otoha-breadcrumb__item a:hover {
    color: var(--otoha-primary);
}

.otoha-section .otoha-breadcrumb__item + .otoha-breadcrumb__item::before {
    color: var(--otoha-border);
}

/* ヒーロー内のパンくずは非表示に */
.otoha-program-hero .otoha-breadcrumb { display: none; }
.otoha-page-hero .otoha-breadcrumb { display: none; }

/* =============================================
   続きを読む・詳しく見るボタン
   ============================================= */
.otoha-btn-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--otoha-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}

.otoha-btn-more::after {
    content: '→';
}

.otoha-btn-more:hover {
    background: var(--otoha-primary);
    color: var(--otoha-accent);
    transform: translateX(2px);
}

/* 旧クラスも統一 */
.otoha-episode-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--otoha-accent);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}

.otoha-episode-card__more::after { content: '→'; }

.otoha-episode-card__more:hover {
    background: var(--otoha-primary);
    color: var(--otoha-accent) !important;
    transform: translateX(2px);
}

/* =============================================
   記事一覧カード（テーマカラー対応）
   ============================================= */
.otoha-post-card {
    background: #fff;
    border-radius: var(--otoha-radius);
    border: 1.5px solid var(--otoha-border);
    overflow: hidden;
    display: flex;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.otoha-post-card:hover {
    border-color: var(--otoha-primary);
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.otoha-post-card__thumb {
    width: 200px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.otoha-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.otoha-post-card:hover .otoha-post-card__thumb img {
    transform: scale(1.05);
}

.otoha-post-card__body {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.otoha-post-card__meta {
    font-family: var(--otoha-font-en);
    font-size: 11px;
    font-weight: 600;
    color: var(--otoha-muted);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.otoha-post-card__meta::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 3px;
    background: var(--otoha-primary);
    border-radius: 2px;
}

.otoha-post-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.otoha-post-card__title a {
    color: var(--otoha-accent);
    transition: color 0.2s;
}

.otoha-post-card__title a:hover { color: var(--otoha-primary); }

.otoha-post-card__desc {
    font-size: 14px;
    color: var(--otoha-muted);
    line-height: 1.7;
    margin-bottom: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   ウィジェット全般デザイン
   ============================================= */
.otoha-widget {
    background: #fff;
    border: 1.5px solid var(--otoha-border);
    border-radius: var(--otoha-radius);
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.otoha-widget__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--otoha-accent);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--otoha-primary);
    font-family: var(--otoha-font-en);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* カレンダーウィジェット */
.otoha-widget .wp-calendar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.otoha-widget .wp-calendar-table th {
    text-align: center;
    padding: 6px 4px;
    font-weight: 700;
    color: var(--otoha-muted);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.otoha-widget .wp-calendar-table td {
    text-align: center;
    padding: 6px 4px;
    border-radius: 4px;
}

.otoha-widget .wp-calendar-table td a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--otoha-primary);
    color: var(--otoha-accent);
    border-radius: 50%;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

.otoha-widget .wp-calendar-table td a:hover {
    background: var(--otoha-accent);
    color: #fff;
}

.otoha-widget .wp-calendar-table #today {
    background: var(--otoha-bg2);
    border-radius: 4px;
    font-weight: 700;
    color: var(--otoha-accent);
}

.otoha-widget .wp-calendar-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
}

.otoha-widget .wp-calendar-nav a {
    color: var(--otoha-accent);
    font-weight: 700;
    text-decoration: none;
}

.otoha-widget .wp-calendar-nav a:hover { color: var(--otoha-primary); }

/* テキストウィジェット */
.otoha-widget p { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }

/* リストウィジェット（最近の投稿等） */
.otoha-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.otoha-widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--otoha-border);
    font-size: 13px;
    line-height: 1.5;
}

.otoha-widget ul li:last-child { border-bottom: none; }

.otoha-widget ul li a {
    color: var(--otoha-accent);
    text-decoration: none;
    transition: color 0.2s;
}

.otoha-widget ul li a:hover { color: var(--otoha-primary); }

/* 検索ウィジェット */
.otoha-widget .search-form {
    display: flex;
    gap: 6px;
}

.otoha-widget .search-field {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--otoha-border);
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.otoha-widget .search-field:focus { border-color: var(--otoha-accent); }

.otoha-widget .search-submit {
    padding: 8px 14px;
    background: var(--otoha-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.otoha-widget .search-submit:hover { background: var(--otoha-primary); color: var(--otoha-accent); }

@media (max-width: 640px) {
    .otoha-post-card { flex-direction: column; }
    .otoha-post-card__thumb { width: 100%; height: 180px; }
    .otoha-post-card__body { padding: 16px; }
}

/* =============================================
   エピソードアクションボタン（ラジオ風）
   ============================================= */
.otoha-ep-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.otoha-ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    font-family: var(--otoha-font-en);
    letter-spacing: 0.3px;
}

.otoha-ep-btn i { font-size: 14px; }

/* メインボタン */
.otoha-ep-btn:not(.otoha-ep-btn--ghost) {
    background: var(--otoha-accent);
    color: #fff;
}

.otoha-ep-btn:not(.otoha-ep-btn--ghost):hover {
    background: var(--otoha-primary);
    color: var(--otoha-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ゴーストボタン */
.otoha-ep-btn--ghost {
    background: transparent;
    color: var(--otoha-accent);
    border: 1.5px solid var(--otoha-border);
}

.otoha-ep-btn--ghost:hover {
    border-color: var(--otoha-accent);
    background: var(--otoha-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* ダーク系スタイルのボタン */
.otoha-episode-card--dark .otoha-ep-btn:not(.otoha-ep-btn--ghost) { background: var(--otoha-primary); color: #1a1a2e; }
.otoha-episode-card--dark .otoha-ep-btn--ghost { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
.otoha-episode-card--dark .otoha-ep-btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.4); }

.otoha-episode-card--neon .otoha-ep-btn:not(.otoha-ep-btn--ghost) { background: linear-gradient(135deg,#e91e8c,#ff6b6b); color: #fff; }
.otoha-episode-card--neon .otoha-ep-btn--ghost { color: rgba(255,255,255,0.7); border-color: rgba(233,30,140,0.3); }
.otoha-episode-card--neon .otoha-ep-btn--ghost:hover { background: rgba(233,30,140,0.2); border-color: #e91e8c; color: #fff; }

.otoha-episode-card--midnight .otoha-ep-btn:not(.otoha-ep-btn--ghost) { background: linear-gradient(135deg,#7c3aed,#a78bfa); color: #fff; }
.otoha-episode-card--midnight .otoha-ep-btn--ghost { color: rgba(167,139,250,0.8); border-color: rgba(167,139,250,0.2); }
.otoha-episode-card--midnight .otoha-ep-btn--ghost:hover { background: rgba(124,58,237,0.2); border-color: #a78bfa; color: #fff; }

/* 番組名リンク */
.otoha-episode-card__program {
    font-size: 11px;
    font-weight: 700;
    color: var(--otoha-primary);
    text-decoration: none;
    background: rgba(0,0,0,0.06);
    padding: 2px 8px;
    border-radius: 10px;
}

.otoha-episode-card__program:hover { opacity: 0.8; }

/* エピソードカードタイトル - テーマカラー＋アンダーライン */
.otoha-episode-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.otoha-episode-card__title a {
    color: var(--otoha-primary);
    text-decoration: underline;
    text-decoration-color: var(--otoha-primary);
    text-underline-offset: 3px;
    transition: opacity 0.2s;
}

.otoha-episode-card__title a:hover { opacity: 0.75; }

/* ダーク・Neon・Midnightはタイトルを明るく */
.otoha-episode-card--dark .otoha-episode-card__title a,
.otoha-episode-card--neon .otoha-episode-card__title a,
.otoha-episode-card--midnight .otoha-episode-card__title a {
    color: var(--otoha-primary);
    text-decoration-color: var(--otoha-primary);
}

/* 説明文とのギャップ調整 */
.otoha-episode-card__desc {
    font-size: 13px;
}

/* ナビゲーション - 現在のページをテーマカラー背景 */
.otoha-nav li.current-menu-item > a,
.otoha-nav li.current-page-ancestor > a,
.otoha-nav li.current-menu-ancestor > a {
    background: var(--otoha-primary);
    color: var(--otoha-accent);
}

.otoha-mobile-nav li.current-menu-item > a,
.otoha-mobile-nav li.current-page-ancestor > a {
    color: var(--otoha-primary);
    background: rgba(255,255,255,0.08);
}

/* 番組グリッド レスポンシブ調整 */
.otoha-program-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .otoha-program-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .otoha-program-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
    .otoha-program-grid { grid-template-columns: 1fr; }
}

/* =============================================
   Contact Form 7 スタイル（テーマカラー対応）
   ============================================= */

/* フォーム全体 */
.wpcf7 {
    font-family: var(--otoha-font-ja);
}

.wpcf7 form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ラベル */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* テキスト・メール・URL・電話 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-family: var(--otoha-font-ja);
    color: var(--otoha-text);
    background: #fff;
    border: 1.5px solid var(--otoha-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.6;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    border-color: var(--otoha-accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.wpcf7 textarea {
    min-height: 160px;
    resize: vertical;
}

/* チェックボックス・ラジオ */
.wpcf7 .wpcf7-checkbox label,
.wpcf7 .wpcf7-radio label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 6px;
}

.wpcf7 .wpcf7-checkbox input[type="checkbox"],
.wpcf7 .wpcf7-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--otoha-accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--otoha-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--otoha-font-ja);
    border: none;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}

.wpcf7 input[type="submit"]:hover {
    background: var(--otoha-primary);
    color: var(--otoha-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.wpcf7 input[type="submit"]:active {
    transform: translateY(0);
}

/* リセットボタン */
.wpcf7 input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: transparent;
    color: var(--otoha-muted);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--otoha-font-ja);
    border: 1.5px solid var(--otoha-border);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 10px;
}

.wpcf7 input[type="reset"]:hover {
    border-color: var(--otoha-muted);
    color: var(--otoha-accent);
}

/* バリデーションエラー */
.wpcf7 .wpcf7-not-valid {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229,62,62,0.1) !important;
}

.wpcf7 .wpcf7-not-valid-tip {
    display: block;
    color: #e53e3e;
    font-size: 12px;
    margin-top: 4px;
}

/* 送信完了メッセージ */
.wpcf7 .wpcf7-response-output {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    border: none !important;
}

.wpcf7 .wpcf7-mail-sent-ok {
    background: #f0fdf4;
    color: #166534;
    border-left: 4px solid #22c55e !important;
}

.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-spam-blocked {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #ef4444 !important;
}

.wpcf7 .wpcf7-validation-errors {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid #f59e0b !important;
}

/* スピナー */
.wpcf7 .wpcf7-spinner {
    margin-left: 10px;
}

/* =============================================
   番組タグ
   ============================================= */
.otoha-program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0 8px;
}

.otoha-program-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--otoha-accent);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* =============================================
   SNSボタン
   ============================================= */
.otoha-program-sns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.otoha-sns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    font-size: 16px;
}

.otoha-sns-btn:hover {
    transform: scale(1.15);
    opacity: 0.9;
}

/* =============================================
   番組個別埋め込みコード
   ============================================= */
.otoha-program-embed {
    background: #fff;
    border: 1.5px solid var(--otoha-border);
    border-radius: var(--otoha-radius);
    padding: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}

.otoha-program-embed iframe,
.otoha-program-embed > * {
    max-width: 100%;
}

/* サイドバーラップ（埋め込み＋通常サイドバー） */
.otoha-sidebar-wrap {
    position: sticky;
    top: 72px;
}

@media (max-width: 900px) {
    .otoha-sidebar-wrap { position: static; }
}
