/*
Theme Name: Kokin Theme
Theme URI: https://koto-kokin.com/
Description: 箏カルテットKokin専用テーマ - 音楽の躍動をコンセプトに
Author: Kokin Project
Version: 1.0
License: GPL v2 or later
Text Domain: kokin-theme
*/

/* ========================================
   基本設定
======================================== */
:root {
    /* メインカラー - モダン×温かみ */
    --color-primary: #7D6B5D;      /* 温かいトープ - 見出し・アクセント */
    --color-secondary: #C9A86C;    /* 柔らかいゴールド - 装飾 */
    --color-accent: #D4A574;       /* 温かいテラコッタ - 強調 */

    /* テキストカラー - 読みやすさ重視 */
    --color-text: #4A4543;         /* 温かみのあるダークブラウン */
    --color-text-light: #7A7572;   /* 柔らかいグレーブラウン */
    --color-heading: #3D3836;      /* 深みのあるブラウン */

    /* 背景カラー - 温かいニュートラル */
    --color-dark: #3D3836;
    --color-light: #FFFCF8;        /* 温かいオフホワイト */
    --color-gray: #5A5654;

    /* フォント */
    --font-main: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    --font-accent: "Noto Serif JP", "Hiragino Mincho ProN", serif;

    /* 温かいベースカラー */
    --warm-cream: #FDF8F3;
    --warm-beige: #F5EDE4;
    --warm-sand: #EDE4D8;
    --warm-rose: #F2E8E4;

    /* おコト遊BASE!!カラー */
    --ws-orange: #FF8B5A;
    --ws-teal: #5BC0BE;

    /* 箏カルテットKokinカラー */
    --kokin-gold: #E8C56B;
    --kokin-dark: #2C2416;
    --kokin-brown: #6B5344;

    /* 背景 */
    --color-bg: #FFFCF8;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    background: linear-gradient(180deg,
        #FFFCF8 0%,
        #FDF8F3 20%,
        #F5EDE4 40%,
        #F2E8E4 60%,
        #EDE4D8 80%,
        #E8DDD4 100%
    );
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.8;
    overflow-x: hidden;
    min-height: 100vh;
}

/* 水面揺らぎ背景 - 温かみのある色調 */
.water-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(180deg,
        #FFFCF8 0%,
        #FDF8F3 20%,
        #F5EDE4 40%,
        #F2E8E4 60%,
        #EDE4D8 80%,
        #E8DDD4 100%
    );
}

.water-bg::before,
.water-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(253, 248, 243, 0.4) 0%,
        rgba(245, 237, 228, 0.3) 33%,
        rgba(242, 232, 228, 0.3) 66%,
        rgba(237, 228, 216, 0.4) 100%
    );
    animation: waterMove1 20s ease-in-out infinite, waterScale1 40s ease-in-out infinite;
}

.water-bg::after {
    animation: waterMove2 17s ease-in-out infinite reverse, waterScale2 34s ease-in-out infinite;
    opacity: 0.7;
}

/* 3つ目のレイヤー - 温かいアクセント */
.water-bg-layer3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(212, 165, 116, 0.08) 0%,
        rgba(201, 168, 108, 0.06) 50%,
        rgba(212, 165, 116, 0.08) 100%
    );
    animation: waterMove3 23s ease-in-out infinite, waterScale3 46s ease-in-out infinite;
    opacity: 0.6;
}

/* 移動アニメーション（位置・形状のみ） */
@keyframes waterMove1 {
    0%, 100% {
        translate: 0 0;
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        translate: 8% 5%;
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        translate: -5% 8%;
        border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
    }
    75% {
        translate: 5% -5%;
        border-radius: 70% 30% 50% 50% / 30% 70% 40% 60%;
    }
}

@keyframes waterMove2 {
    0%, 100% {
        translate: 0 0;
        rotate: 0deg;
        border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    }
    33% {
        translate: -6% 6%;
        rotate: 3deg;
        border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%;
    }
    66% {
        translate: 6% -6%;
        rotate: -3deg;
        border-radius: 50% 50% 40% 60% / 50% 50% 50% 50%;
    }
}

/* サイズ変化アニメーション（ゆっくり） */
@keyframes waterScale1 {
    0%, 100% {
        scale: 0.7;
    }
    50% {
        scale: 1;
    }
}

@keyframes waterScale2 {
    0%, 100% {
        scale: 0.8;
    }
    50% {
        scale: 1.05;
    }
}

@keyframes waterScale3 {
    0%, 100% {
        scale: 0.9;
    }
    50% {
        scale: 1.1;
    }
}

/* 3つ目のレイヤー用移動アニメーション */
@keyframes waterMove3 {
    0%, 100% {
        translate: 0 0;
        rotate: 0deg;
        border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
    }
    25% {
        translate: -7% 4%;
        rotate: -2deg;
        border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
    }
    50% {
        translate: 4% -6%;
        rotate: 1deg;
        border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%;
    }
    75% {
        translate: -3% -4%;
        rotate: 2deg;
        border-radius: 45% 55% 60% 40% / 55% 45% 40% 60%;
    }
}

/* ========================================
   波紋エフェクト
======================================== */
.ripple-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border: 1px solid rgba(201, 168, 108, 0.25);
    border-radius: 50%;
    animation: ripple-expand 4s ease-out infinite;
}

@keyframes ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        width: 600px;
        height: 600px;
        opacity: 0;
        margin-left: -300px;
        margin-top: -300px;
    }
}

/* ========================================
   弦の振動エフェクト
======================================== */
.string-vibration {
    position: relative;
}

.string-vibration::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
    animation: vibrate 0.5s ease-in-out infinite alternate;
}

@keyframes vibrate {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(1.5); }
}

/* ========================================
   パルスエフェクト（穏やかな光）
======================================== */
.pulse {
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(201, 168, 108, 0.15);
    }
    50% {
        box-shadow: 0 0 25px rgba(201, 168, 108, 0.3);
    }
}

/* ========================================
   ヘッダー
======================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, transparent 100%);
    transition: background 0.3s ease;
}

.site-header.scrolled {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.site-logo img {
    height: 50px;
    width: auto;
}

.site-logo-text {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    color: var(--color-secondary);
    text-decoration: none;
}

/* ========================================
   ナビゲーション
======================================== */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-nav a {
    color: var(--color-heading);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--color-secondary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-nav a:hover {
    color: var(--color-secondary);
}

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

/* ========================================
   ヒーローセクション
======================================== */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.4);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-family: var(--font-accent);
    font-size: 4rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    color: #FFFAF5;
    text-shadow:
        0 2px 4px rgba(0,0,0,0.5),
        0 4px 20px rgba(0,0,0,0.3);
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.5s;
}

.hero-tagline {
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    color: #F5E8D8;
    font-weight: 500;
    text-shadow:
        0 1px 3px rgba(0,0,0,0.6),
        0 3px 15px rgba(0,0,0,0.3);
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.8s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   セクション共通
======================================== */
.section {
    padding: 100px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-family: var(--font-accent);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: 0.2em;
    position: relative;
    color: var(--color-heading);
    font-weight: 500;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-secondary);
    margin: 20px auto 0;
}

/* ========================================
   コンテンツエリア
======================================== */
.content-area {
    padding: 120px 40px 80px;
    max-width: 900px;
    margin: 0 auto;
}

/* ページフェードイン */
.page-fade-in {
    animation: pageFadeIn 0.8s ease-out forwards;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-title {
    font-family: var(--font-accent);
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 0.15em;
    color: var(--color-secondary);
    margin-bottom: 50px;
}

.content-area h1,
.content-area h2 {
    font-family: var(--font-accent);
    color: var(--color-secondary);
    margin-bottom: 30px;
}

.content-area h1 {
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 0.15em;
}

.content-area h2 {
    font-size: 1.8rem;
    margin-top: 60px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-secondary);
}

.content-area h3 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-top: 40px;
    margin-bottom: 15px;
}

.content-area p {
    margin-bottom: 20px;
    color: var(--color-text);
}

.content-area ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.content-area li {
    margin-bottom: 10px;
}

.content-area hr {
    border: none;
    border-top: 1px solid rgba(201, 168, 108, 0.25);
    margin: 40px 0;
}

.content-area img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 30px 0;
}

/* ========================================
   ギャラリー
======================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.gallery-item {
    overflow: hidden;
    border-radius: 12px;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
    margin: 0;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* ========================================
   ボタン
======================================== */
.btn {
    display: inline-block;
    padding: 15px 40px;
    background: rgba(255,252,248,0.7);
    border: 1.5px solid var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-weight: 500;
    backdrop-filter: blur(5px);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transition: left 0.3s ease;
    z-index: -1;
}

.btn:hover {
    color: white;
}

.btn:hover::before {
    left: 0;
}

.btn-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* ========================================
   SNSリンク
======================================== */
.sns-links {
    display: flex;
    gap: 25px;
    justify-content: center;
    margin-top: 30px;
}

.sns-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1.5px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255,252,248,0.7);
    backdrop-filter: blur(5px);
}

.sns-links a svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.sns-links a:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
    border-color: var(--color-primary);
}

.sns-links a:hover svg {
    transform: scale(1.05);
}

/* ========================================
   メンバーカード
======================================== */
.member-card {
    background: rgba(255,252,248,0.7);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(201, 168, 108, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.member-card:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 10px 40px rgba(201, 168, 108, 0.15);
    background: rgba(255,252,248,0.9);
}

.member-card h3 {
    color: var(--color-secondary);
    margin-top: 0;
}

/* ========================================
   メンバーページ（カスタム）
======================================== */
.member-page-custom {
    overflow-x: hidden;
}

/* イントロセクション */
.member-intro {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 40px 60px;
    text-align: center;
    transition: opacity 0.5s ease;
}

.member-intro.scrolled-past {
    opacity: 0.3;
}

.member-intro .page-title {
    font-family: var(--font-accent);
    font-size: 3rem;
    letter-spacing: 0.2em;
    color: var(--color-heading);
    margin-bottom: 40px;
}

.member-group-image {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.member-group-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.scroll-hint {
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--color-text-light);
    letter-spacing: 0.1em;
    animation: scrollHintBounce 2s ease-in-out infinite;
}

@keyframes scrollHintBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* メンバー個別セクション */
.member-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    position: relative;
}

.member-content-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    position: relative;
}

/* バストアップイラスト */
.member-illust {
    flex: 0 0 50%;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    margin-right: 0;
    z-index: 1;
}

.member-section.active .member-illust {
    opacity: 1;
    transform: translateX(0);
}

.illust-frame {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-width: 480px;
    background-image: url('/wp-content/uploads/2025/12/member-transparent.png');
    background-size: 600% auto;
    background-position: var(--illust-position, 0%) var(--illust-y, 20%);
    background-repeat: no-repeat;
    border-radius: 16px;
}

/* メンバー情報 */
.member-info {
    flex: 1;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
    position: relative;
    z-index: 2;
    padding: 20px 0;
}

.member-section.active .member-info {
    opacity: 1;
    transform: translateX(0);
}

.member-name {
    margin-bottom: 25px;
}

.member-name .name-ja {
    display: block;
    font-family: var(--font-accent);
    font-size: 2.2rem;
    color: var(--color-primary);
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.member-name .name-en {
    display: block;
    font-size: 1rem;
    color: var(--color-text-light);
    letter-spacing: 0.15em;
    font-weight: 400;
}

.member-meta {
    margin-bottom: 20px;
    padding: 15px 20px;
    background: rgba(255,252,248,0.7);
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.member-meta p {
    margin: 5px 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.member-bio {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--color-text);
}

/* メンバー番号インジケーター */
.member-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-accent);
    font-size: 0.9rem;
    color: var(--color-text-light);
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
}

.member-section.active .member-indicator {
    opacity: 1;
}

.member-indicator .current {
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 500;
}

/* レスポンシブ（モバイル） */
@media (max-width: 768px) {
    .member-intro {
        padding: 100px 20px 40px;
    }

    .member-intro .page-title {
        font-size: 2rem;
    }

    .member-section {
        padding: 40px 15px;
        min-height: auto;
        padding-bottom: 60px;
    }

    .member-content-wrapper {
        flex-direction: row;
        gap: 15px;
        align-items: flex-start;
    }

    .member-illust {
        flex: 0 0 42%;
        margin-right: 0;
        transform: translateX(-30px);
    }

    .member-section.active .member-illust {
        transform: translateX(0);
    }

    .illust-frame {
        width: 100%;
        max-width: none;
        aspect-ratio: 3 / 4;
        background-size: 600% auto;
        background-position: var(--illust-position, 0%) var(--illust-y, 20%);
    }

    .member-info {
        flex: 1;
        transform: translateX(30px);
        padding: 10px 0;
    }

    .member-section.active .member-info {
        transform: translateX(0);
    }

    .member-name {
        margin-bottom: 15px;
    }

    .member-name .name-ja {
        font-size: 1.3rem;
    }

    .member-name .name-en {
        font-size: 0.8rem;
    }

    .member-bio {
        font-size: 0.85rem;
        line-height: 1.8;
    }

    .member-meta {
        display: none;
    }

    .member-indicator {
        bottom: 20px;
    }
}

/* ========================================
   フッター
======================================== */
.site-footer {
    background: rgba(255,252,248,0.8);
    padding: 60px 40px 30px;
    text-align: center;
    margin-top: 80px;
    backdrop-filter: blur(10px);
}

.footer-nav {
    margin-bottom: 30px;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    gap: 30px;
    list-style: none;
}

.footer-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--color-primary);
}

.copyright {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .main-nav ul {
        gap: 15px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 60px 20px;
    }

    .content-area {
        padding: 100px 20px 60px;
    }
}

/* ========================================
   PROJECT KOKIN - NEW DESIGN SYSTEM
   ワークショップ（ポップ）+ アンサンブル（ウォーム）統合
======================================== */

/* 共通カラー変数 */
:root {
    /* 共通アクセント */
    --common-gold: #C9A86C;
    --common-gold-light: #D4B77A;

    /* ワークショップゾーン（ポップ） */
    --ws-primary: #FF8B5A;
    --ws-primary-light: #FFA07A;
    --ws-primary-dark: #E67348;
    --ws-secondary: #5BC0BE;
    --ws-secondary-light: #7DD3D1;
    --ws-bg: #FFF8F0;
    --ws-bg-card: #FFFFFF;
    --ws-text: #2D2D2D;
    --ws-text-light: #666666;
}

/* ========================================
   トップページ - project kokin
======================================== */
.page-template-default.page-id-47 .hero-section,
.home .hero-section {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFE8D6 30%, #E8F4F3 70%, #F5EDE4 100%);
    padding: 120px 40px 80px;
    text-align: center;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-section h1 {
    font-family: var(--font-accent);
    font-size: 3.5rem;
    color: var(--color-heading);
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

.hero-section .tagline {
    font-size: 1.3rem;
    color: var(--color-text-light);
    letter-spacing: 0.2em;
}

/* 2大コンテンツ Bento Grid */
.two-contents {
    padding: 80px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.content-card {
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.content-card:hover {
    transform: translateY(-8px);
}

/* ワークショップカード（ポップ） */
.content-card.workshop {
    background: linear-gradient(135deg, #FFF0E8 0%, #FFE8D6 100%);
    border: 2px solid rgba(255, 139, 90, 0.3);
}

.content-card.workshop:hover {
    box-shadow: 0 15px 40px rgba(255, 139, 90, 0.2);
    border-color: var(--ws-primary);
}

.content-card.workshop h3 {
    color: var(--ws-primary);
    font-family: 'Nunito', var(--font-main);
    font-size: 1.8rem;
    font-weight: 700;
}

.content-card.workshop .btn {
    background: var(--ws-primary);
    color: white;
    border: none;
}

.content-card.workshop .btn:hover {
    background: var(--ws-primary-dark);
}

/* 箏カルテットカード（ウォーム） */
.content-card.kokin {
    background: linear-gradient(135deg, #FDF8F3 0%, #F5EDE4 100%);
    border: 2px solid rgba(201, 168, 108, 0.3);
}

.content-card.kokin:hover {
    box-shadow: 0 15px 40px rgba(201, 168, 108, 0.2);
    border-color: var(--color-secondary);
}

.content-card.kokin h3 {
    color: var(--color-primary);
    font-family: var(--font-accent);
    font-size: 1.8rem;
}

.content-card.kokin .btn {
    background: var(--color-primary);
    color: white;
    border: none;
}

/* サポートCTA */
.support-cta {
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--warm-beige) 100%);
    padding: 60px 40px;
    text-align: center;
    margin: 60px 0;
    border-radius: 20px;
}

.support-cta h2 {
    color: var(--color-heading);
    margin-bottom: 20px;
}

.btn-primary {
    display: inline-block;
    padding: 18px 50px;
    background: var(--common-gold);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-primary:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(201, 168, 108, 0.3);
}

/* ========================================
   ワークショップページ（ポップデザイン）
======================================== */
.page-template-default[class*="workshop"] .content-area,
.page-id-48 .content-area {
    background: var(--ws-bg);
}

.workshop-hero {
    background: linear-gradient(135deg, #FFE8D6 0%, #E8F4F3 50%, #FFF0E8 100%);
    padding: 120px 40px 80px;
    text-align: center;
    border-radius: 0 0 40px 40px;
}

.workshop-hero h1 {
    font-family: 'Nunito', var(--font-main);
    font-size: 3rem;
    color: var(--ws-primary);
    font-weight: 700;
}

.workshop-hero .tagline {
    color: var(--ws-secondary);
    font-size: 1.2rem;
}

.about-workshop {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
}

.about-workshop h2 {
    color: var(--ws-primary);
    font-family: 'Nunito', var(--font-main);
}

.about-workshop h2::after {
    background: var(--ws-primary);
}

/* ワークショップ用カード */
.event-card--workshop {
    background: var(--ws-bg-card);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(255, 139, 90, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    margin-bottom: 30px;
}

.event-card--workshop:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(255, 139, 90, 0.2);
}

.event-card__badge {
    display: inline-block;
    background: var(--ws-primary);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.event-card__cta {
    display: inline-block;
    background: var(--ws-primary);
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.event-card__cta:hover {
    background: var(--ws-primary-dark);
}

/* アクティビティリスト */
.activities {
    background: rgba(255, 139, 90, 0.05);
    padding: 60px 40px;
    border-radius: 20px;
    margin: 40px 0;
}

.activities h2 {
    color: var(--ws-primary);
    text-align: center;
}

.activities ul {
    max-width: 600px;
    margin: 30px auto 0;
    list-style: none;
    padding: 0;
}

.activities li {
    padding: 15px 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 15px;
    border-left: 4px solid var(--ws-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.activities li strong {
    color: var(--ws-primary);
}

/* ========================================
   箏カルテットKokin（水面揺らぎ背景）
======================================== */
.kokin-hero {
    position: relative;
}

.kokin-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    z-index: 0;
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.6) 20%,
        rgba(0,0,0,0.8) 50%,
        rgba(0,0,0,0.6) 80%,
        rgba(0,0,0,0) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.6) 20%,
        rgba(0,0,0,0.8) 50%,
        rgba(0,0,0,0.6) 80%,
        rgba(0,0,0,0) 100%
    );
}

.kokin-hero .hero-content {
    position: relative;
    z-index: 1;
}

.kokin-hero + section h2 {
    font-family: var(--font-accent);
    color: var(--color-secondary);
}

/* メンバーグリッド */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.member-grid .member-card {
    text-align: center;
}

.member-grid .member-card h3 {
    font-family: var(--font-accent);
    color: var(--color-primary);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

/* ========================================
   サポートページ
======================================== */
.support-hero {
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--common-gold-light) 50%, var(--warm-beige) 100%);
    padding: 120px 40px 80px;
    text-align: center;
}

.support-hero h1 {
    color: var(--color-heading);
}

.support-intro {
    max-width: 800px;
    margin: 60px auto;
    text-align: center;
}

.support-options {
    max-width: 800px;
    margin: 40px auto;
}

.option-card {
    background: rgba(255, 252, 248, 0.9);
    border: 1px solid rgba(201, 168, 108, 0.3);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
}

.option-card h3 {
    color: var(--common-gold);
    font-family: var(--font-accent);
    margin-bottom: 15px;
}

/* ========================================
   メンバーページ
======================================== */
.members-hero {
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--warm-beige) 100%);
    padding: 120px 40px 80px;
    text-align: center;
}

.kokin-members,
.guest-performers {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

.member-detail {
    background: rgba(255, 252, 248, 0.9);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    border-left: 4px solid var(--common-gold);
}

.member-detail h3 {
    color: var(--color-primary);
    font-family: var(--font-accent);
    font-size: 1.4rem;
    margin-bottom: 10px;
}

/* ========================================
   投稿一覧（カテゴリ別）
======================================== */
.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.post-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.post-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-card__content {
    padding: 25px;
}

.post-card__category {
    display: inline-block;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.post-card__category--workshop {
    background: rgba(255, 139, 90, 0.1);
    color: var(--ws-primary);
}

.post-card__category--performance {
    background: rgba(201, 168, 108, 0.1);
    color: var(--common-gold);
}

.post-card__title {
    font-size: 1.1rem;
    color: var(--color-heading);
    margin-bottom: 10px;
    line-height: 1.5;
}

.post-card__date {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* ========================================
   レスポンシブ - 新デザイン
======================================== */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.2rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .content-card {
        padding: 40px 30px;
    }

    .workshop-hero h1 {
        font-size: 2rem;
    }

    .two-contents {
        padding: 60px 20px;
    }

    .support-cta {
        padding: 40px 20px;
        margin: 40px 15px;
    }

    .member-grid {
        grid-template-columns: 1fr;
    }

    .post-list {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PROJECT KOKIN - COMPLETE DESIGN SYSTEM
======================================== */

/* 背景 */
.pk-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFFCF8 0%, #FDF8F3 30%, #F5EDE4 60%, #EDE4D8 100%);
    z-index: -1;
}

/* ヘッダー */
.pk-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 40px;
    z-index: 1000;
    background: transparent;
    transition: all 0.3s ease;
}

.pk-header.scrolled {
    background: rgba(255, 252, 248, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    padding: 15px 40px;
}

.pk-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pk-header__logo {
    font-family: 'Nunito', var(--font-main);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: 0.05em;
}

.pk-header__menu {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.pk-header__menu a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.pk-header__menu a:hover {
    color: var(--color-primary);
}

.pk-header__menu-ws:hover { color: var(--ws-primary) !important; }
.pk-header__menu-ens:hover { color: var(--color-secondary) !important; }

.pk-header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.pk-header__toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-primary);
    transition: all 0.3s ease;
}

/* ヒーローセクション */
.pk-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 40px 80px;
    background: linear-gradient(135deg, #FFF8F0 0%, #FFE8D6 25%, #E8F4F3 50%, #F5EDE4 75%, #FDF8F3 100%);
}

.pk-hero__inner {
    max-width: 900px;
    text-align: center;
}

.pk-hero__brand {
    margin-bottom: 60px;
}

.pk-hero__title {
    font-family: 'Nunito', var(--font-main);
    font-size: 4rem;
    font-weight: 700;
    color: #2C2416;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    animation: fadeInUp 1s ease forwards;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.9),
        0 0 40px rgba(255, 255, 255, 0.7),
        0 2px 4px rgba(255, 255, 255, 0.8);
}

.pk-hero__tagline {
    font-size: 1.3rem;
    color: #3D3836;
    letter-spacing: 0.15em;
    animation: fadeInUp 1s ease 0.2s forwards;
    opacity: 0;
    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* イベントカード */
.pk-hero__event {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease 0.4s forwards;
    opacity: 0;
}

.pk-hero__event-label {
    display: inline-block;
    background: linear-gradient(135deg, var(--ws-primary), var(--ws-secondary));
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.pk-hero__event-title {
    font-family: var(--font-accent);
    font-size: 2.5rem;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.pk-hero__event-subtitle {
    font-size: 1.2rem;
    color: var(--ws-primary);
    font-weight: 600;
    margin-bottom: 20px;
}

.pk-hero__event-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.pk-hero__event-date,
.pk-hero__event-location {
    font-size: 1.1rem;
    color: var(--color-text);
}

.pk-hero__event-btn {
    display: inline-block;
    background: var(--ws-primary);
    color: white;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pk-hero__event-btn:hover {
    background: var(--ws-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 139, 90, 0.3);
}

/* セクションタイトル */
.pk-section-title {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.pk-section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--common-gold);
    margin: 15px auto 0;
    border-radius: 2px;
}

.pk-section-title--workshop::after { background: var(--ws-primary); }
.pk-section-title--kokin::after { background: var(--color-secondary); }

/* コンセプト */
.pk-about {
    padding: 100px 40px;
    text-align: center;
}

.pk-about__inner {
    max-width: 800px;
    margin: 0 auto;
}

.pk-about__lead {
    font-family: var(--font-accent);
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 25px;
}

.pk-about__text {
    font-size: 1.1rem;
    line-height: 2;
    color: var(--color-text);
}

/* 2大コンテンツ */
.pk-contents {
    padding: 80px 40px;
    background: rgba(255, 255, 255, 0.5);
}

.pk-contents__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.pk-contents__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.pk-card {
    padding: 50px 40px;
    border-radius: 24px;
    text-align: center;
    transition: all 0.4s ease;
}

.pk-card--workshop {
    background: linear-gradient(135deg, #FFF5F0 0%, #FFE8D6 100%);
    border: 2px solid rgba(255, 139, 90, 0.2);
}

.pk-card--workshop:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(255, 139, 90, 0.2);
    border-color: var(--ws-primary);
}

.pk-card--kokin {
    background: linear-gradient(135deg, #FFFCF8 0%, #F5EDE4 100%);
    border: 2px solid rgba(201, 168, 108, 0.2);
}

.pk-card--kokin:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(201, 168, 108, 0.2);
    border-color: var(--color-secondary);
}

.pk-card__icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.pk-card__title {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.pk-card--workshop .pk-card__title {
    font-family: 'Nunito', var(--font-main);
    color: var(--ws-primary);
}

.pk-card--kokin .pk-card__title {
    font-family: var(--font-accent);
    color: var(--color-primary);
}

.pk-card__subtitle {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.pk-card__text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 30px;
}

.pk-card__btn {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pk-card__btn--workshop {
    background: var(--ws-primary);
    color: white;
}

.pk-card__btn--workshop:hover {
    background: var(--ws-primary-dark);
}

.pk-card__btn--kokin {
    background: var(--color-primary);
    color: white;
}

.pk-card__btn--kokin:hover {
    background: var(--color-heading);
}

/* 最新の活動 */
.pk-latest {
    padding: 80px 40px;
}

.pk-latest__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.pk-latest__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.pk-post-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pk-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pk-post-card__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.pk-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.pk-post-card__content {
    padding: 20px;
}

.pk-post-card__cat {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.pk-post-card__cat--workshop {
    background: rgba(255, 139, 90, 0.1);
    color: var(--ws-primary);
}

.pk-post-card__cat--kokin {
    background: rgba(201, 168, 108, 0.1);
    color: var(--common-gold);
}

.pk-post-card__title {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.pk-post-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

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

.pk-post-card__date {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* 特集記事 */
.pk-features {
    padding: 60px 40px;
    background: rgba(201, 168, 108, 0.05);
}

.pk-features__inner {
    max-width: 800px;
    margin: 0 auto;
}

.pk-feature-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    border-left: 4px solid var(--common-gold);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pk-feature-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

.pk-feature-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-feature-card__title {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.pk-feature-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.pk-feature-card__excerpt {
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 20px;
}

.pk-feature-card__link {
    color: var(--common-gold);
    text-decoration: none;
    font-weight: 500;
}

/* サポートCTA */
.pk-support-cta {
    padding: 80px 40px;
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--warm-beige) 100%);
    text-align: center;
}

.pk-support-cta__inner {
    max-width: 600px;
    margin: 0 auto;
}

.pk-support-cta__title {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    margin-bottom: 20px;
}

.pk-support-cta__text {
    color: var(--color-text);
    margin-bottom: 30px;
}

.pk-support-cta__btn {
    display: inline-block;
    background: var(--common-gold);
    color: white;
    padding: 18px 50px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pk-support-cta__btn:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

/* メンバープレビュー */
.pk-members-preview {
    padding: 80px 40px;
    text-align: center;
}

.pk-members-preview__inner {
    max-width: 600px;
    margin: 0 auto;
}

.pk-members-preview__text {
    color: var(--color-text);
    margin-bottom: 30px;
}

.pk-members-preview__btn {
    display: inline-block;
    background: transparent;
    color: var(--color-primary);
    padding: 14px 40px;
    border: 2px solid var(--color-primary);
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pk-members-preview__btn:hover {
    background: var(--color-primary);
    color: white;
}

/* SNS */
.pk-sns {
    padding: 60px 40px;
    text-align: center;
}

.pk-sns__text {
    color: var(--color-text-light);
    margin-bottom: 25px;
}

.pk-sns__links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.pk-sns__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.pk-sns__link svg {
    width: 22px;
    height: 22px;
}

.pk-sns__link:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

/* フッター */
.pk-footer {
    background: rgba(61, 56, 54, 0.95);
    color: white;
    padding: 60px 40px 30px;
}

.pk-footer__inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.pk-footer__logo {
    font-family: 'Nunito', var(--font-main);
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
}

.pk-footer__tagline {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 30px;
}

.pk-footer__nav ul {
    display: flex;
    justify-content: center;
    gap: 30px;
    list-style: none;
    margin-bottom: 30px;
}

.pk-footer__nav a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.pk-footer__nav a:hover {
    color: white;
}

.pk-footer__sns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.pk-footer__sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.pk-footer__sns svg {
    width: 18px;
    height: 18px;
}

.pk-footer__sns a:hover {
    background: white;
    color: var(--color-primary);
}

.pk-footer__copyright {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ページヒーロー */
.pk-page-hero {
    padding: 150px 40px 80px;
    text-align: center;
}

.pk-page-hero--workshop {
    background: linear-gradient(135deg, #FFE8D6 0%, #E8F4F3 50%, #FFF0E8 100%);
}

.pk-page-hero--kokin {
    background: linear-gradient(135deg, #FDF8F3 0%, #F5EDE4 50%, #EDE4D8 100%);
}

.pk-page-hero--members,
.pk-page-hero--support {
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--warm-beige) 100%);
}

.pk-page-hero__title {
    font-size: 3rem;
    margin-bottom: 15px;
}

.pk-page-hero--workshop .pk-page-hero__title {
    font-family: 'Nunito', var(--font-main);
    color: var(--ws-primary);
}

.pk-page-hero--kokin .pk-page-hero__title {
    font-family: var(--font-accent);
    color: var(--color-primary);
}

.pk-page-hero__tagline {
    font-size: 1.2rem;
    color: var(--color-text-light);
}

.pk-page-hero__link {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 30px;
    background: rgba(201, 168, 108, 0.15);
    border: 1px solid var(--color-secondary);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pk-page-hero__link:hover {
    background: var(--color-secondary);
    color: white;
    transform: translateY(-2px);
}

/* ページコンテンツ */
.pk-page-content {
    padding: 60px 40px;
}

.pk-page-content__inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* イントロ */
.pk-intro {
    text-align: center;
    margin-bottom: 60px;
}

.pk-intro__lead {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.pk-intro__text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-text);
}

/* 投稿セクション */
.pk-posts-section {
    margin-bottom: 60px;
}

.pk-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* イベントカード */
.pk-event-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
}

.pk-event-card--workshop {
    border-left: 4px solid var(--ws-primary);
}

.pk-event-card--kokin {
    border-left: 4px solid var(--color-secondary);
}

.pk-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pk-event-card__badge {
    display: inline-block;
    background: var(--ws-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

.pk-event-card__badge--kokin {
    background: var(--color-secondary);
}

.pk-event-card__title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.pk-event-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.pk-event-card__date {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.pk-event-card__btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--ws-primary);
    color: white;
}

.pk-event-card__btn--kokin {
    background: var(--color-primary);
}

/* アーカイブカード */
.pk-archive-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.pk-archive-card:hover {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.pk-archive-card__title {
    font-size: 1rem;
    margin-bottom: 8px;
}

.pk-archive-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.pk-archive-card__date {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* アクティビティ */
.pk-activities {
    background: rgba(255, 139, 90, 0.05);
    border-radius: 20px;
    padding: 50px;
    margin-top: 40px;
}

.pk-activities__list {
    max-width: 600px;
    margin: 30px auto 0;
    list-style: none;
    padding: 0;
}

.pk-activities__list li {
    background: white;
    padding: 18px 25px;
    border-radius: 12px;
    margin-bottom: 12px;
    border-left: 4px solid var(--ws-primary);
}

.pk-activities__list strong {
    color: var(--ws-primary);
}

/* メンバーグリッド */
.pk-members-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.pk-member-detail {
    background: white;
    border-radius: 16px;
    padding: 30px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pk-member-detail--guest {
    background: rgba(255, 255, 255, 0.7);
}

.pk-member-detail__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pk-member-detail__info h3 {
    font-size: 1.2rem;
    color: var(--color-heading);
    margin-bottom: 5px;
}

.pk-member-detail__info h3 span {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
    font-weight: 400;
}

.pk-member-detail__role {
    font-size: 0.85rem;
    color: var(--common-gold);
    margin-bottom: 10px;
}

.pk-member-detail__info p:last-child {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.7;
}

/* チームグリッド */
.pk-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.pk-team-member {
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

/* サポートページ */
.pk-support-intro {
    text-align: center;
    margin-bottom: 60px;
}

.pk-support-intro__lead {
    font-size: 1.2rem;
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 15px;
}

.pk-support-events__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.pk-support-event {
    background: white;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
}

.pk-support-event__date {
    display: inline-block;
    background: var(--ws-primary);
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.pk-support-event h3 {
    font-size: 1.2rem;
    color: var(--color-heading);
    margin-bottom: 8px;
}

.pk-option-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 25px;
    border-left: 4px solid var(--common-gold);
}

.pk-option-card h3 {
    font-size: 1.3rem;
    color: var(--color-heading);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.pk-option-card__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--common-gold);
    color: white;
    border-radius: 50%;
    font-size: 1rem;
}

.pk-option-card__detail {
    background: rgba(201, 168, 108, 0.1);
    padding: 20px;
    border-radius: 12px;
    margin-top: 15px;
}

.pk-support-contact {
    text-align: center;
    margin-top: 60px;
}

.pk-support-contact__email {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-top: 20px;
}

/* 記事詳細 */
.pk-single {
    padding: 120px 40px 80px;
    max-width: 800px;
    margin: 0 auto;
}

.pk-single__header {
    margin-bottom: 40px;
}

.pk-single__meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.pk-single__cat {
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.85rem;
}

.pk-single__cat--workshop {
    background: rgba(255, 139, 90, 0.1);
    color: var(--ws-primary);
}

.pk-single__cat--kokin {
    background: rgba(201, 168, 108, 0.1);
    color: var(--common-gold);
}

.pk-single__date {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.pk-single__title {
    font-family: var(--font-accent);
    font-size: 2.2rem;
    color: var(--color-heading);
    line-height: 1.4;
}

.pk-single__content {
    line-height: 2;
    color: var(--color-text);
}

.pk-single__content h2 {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    color: var(--color-heading);
    margin: 50px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--common-gold);
}

.pk-single__content h3 {
    font-size: 1.2rem;
    color: var(--color-primary);
    margin: 35px 0 15px;
}

.pk-single__content p {
    margin-bottom: 20px;
}

.pk-single__content ul,
.pk-single__content ol {
    margin: 20px 0 20px 25px;
}

.pk-single__content li {
    margin-bottom: 10px;
}

.pk-single__content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 30px 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(125, 107, 93, 0.1);
    border: 1px solid rgba(201, 168, 108, 0.2);
}

.pk-single__content th,
.pk-single__content td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.15);
}

.pk-single__content tr:last-child th,
.pk-single__content tr:last-child td {
    border-bottom: none;
}

.pk-single__content th {
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--warm-beige) 100%);
    color: var(--color-heading);
    font-weight: 600;
    text-align: left;
    width: 30%;
    vertical-align: top;
}

.pk-single__content td {
    background: white;
    color: var(--color-text);
    line-height: 1.7;
}

.pk-single__content tr:hover td {
    background: rgba(253, 248, 243, 0.5);
}

/* WordPressブロックテーブル */
.pk-single__content .wp-block-table {
    margin: 30px 0;
}

.pk-single__content .wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(125, 107, 93, 0.1);
    border: 1px solid rgba(201, 168, 108, 0.25);
}

.pk-single__content .wp-block-table th,
.pk-single__content .wp-block-table td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.15);
    border-right: none;
    border-left: none;
    border-top: none;
}

.pk-single__content .wp-block-table tr:last-child th,
.pk-single__content .wp-block-table tr:last-child td {
    border-bottom: none;
}

.pk-single__content .wp-block-table th {
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--warm-beige) 100%);
    color: var(--color-heading);
    font-weight: 600;
    text-align: left;
    width: 28%;
    vertical-align: top;
}

.pk-single__content .wp-block-table td {
    background: white;
    color: var(--color-text);
    line-height: 1.8;
}

.pk-single__content .wp-block-table tr:hover td {
    background: rgba(253, 248, 243, 0.6);
    transition: background 0.2s ease;
}

.pk-single__content .wp-block-table figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
}

/* 記事内画像 */
.pk-single__content figure {
    margin: 40px auto;
    max-width: 600px;
    text-align: center;
}

.pk-single__content figure.wp-block-image {
    display: block;
    margin: 40px auto;
    max-width: 600px;
}

.pk-single__content figure img,
.pk-single__content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: block;
    margin: 0 auto;
}

.pk-single__content figcaption {
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
    margin-top: 12px;
    padding: 0 10px;
    line-height: 1.6;
}

/* 画像ギャラリー（横並び） */
.pk-single__content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.pk-single__content .wp-block-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* アイキャッチ画像 */
.pk-single__thumbnail {
    margin-bottom: 30px;
}

.pk-single__thumbnail img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .pk-single__content figure img,
    .pk-single__content img {
        border-radius: 8px;
    }

    .pk-single__thumbnail img {
        max-height: 250px;
        border-radius: 12px;
    }
}

.pk-single__footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(201, 168, 108, 0.2);
}

.pk-single__back {
    color: var(--color-primary);
    text-decoration: none;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .pk-header {
        padding: 15px 20px;
    }

    .pk-header__toggle {
        display: flex;
    }

    .pk-header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: white;
        padding: 80px 30px 30px;
        transition: right 0.3s ease;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
    }

    .pk-header__nav.active {
        right: 0;
    }

    .pk-header__menu {
        flex-direction: column;
        gap: 25px;
    }

    .pk-hero {
        padding: 100px 20px 60px;
    }

    .pk-hero__title {
        font-size: 2.5rem;
    }

    .pk-hero__event {
        padding: 30px 25px;
    }

    .pk-hero__event-title {
        font-size: 1.8rem;
    }

    .pk-contents__grid {
        grid-template-columns: 1fr;
    }

    .pk-latest__grid {
        grid-template-columns: 1fr;
    }

    .pk-page-hero {
        padding: 120px 20px 60px;
    }

    .pk-page-hero__title {
        font-size: 2rem;
    }

    .pk-page-content {
        padding: 40px 20px;
    }

    .pk-single {
        padding: 100px 20px 60px;
    }

    .pk-single__title {
        font-size: 1.6rem;
    }

    .pk-footer__nav ul {
        flex-direction: column;
        gap: 15px;
    }
}

/* ========================================
   箏カルテットKokin ランディングページ
   ========================================
   元のデザイン（水面揺らぎ背景）を復元
======================================== */

.kokin-landing {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.kokin-landing .pk-bg,
.kokin-landing .pk-header,
.kokin-landing .pk-main,
.kokin-landing .pk-footer {
    display: none;
}

/* ヘッダー */
.kokin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 20px 40px;
}

.kokin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.kokin-nav__back {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.kokin-nav__back:hover {
    color: var(--color-secondary);
}

.kokin-nav__menu {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.kokin-nav__menu a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.kokin-nav__menu a:hover {
    color: var(--color-secondary);
}

/* アバウトセクション */
.kokin-about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
    position: relative;
    z-index: 1;
}

.kokin-about__inner {
    max-width: 700px;
    text-align: center;
    background: rgba(253, 248, 243, 0.85);
    padding: 60px 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(125, 107, 93, 0.1);
}

.kokin-about h2 {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    margin-bottom: 20px;
}

.kokin-about__lead {
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: 30px;
    font-weight: 500;
}

.kokin-about__text {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 40px;
}

.kokin-about__btn {
    display: inline-block;
    padding: 14px 40px;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.kokin-about__btn:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
}

.kokin-about__links {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.kokin-about__btn--secondary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.kokin-about__btn--secondary:hover {
    background: var(--color-primary);
    color: white;
}

/* ギャラリーセクション */
.kokin-gallery {
    padding: 100px 40px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.kokin-gallery h2 {
    font-family: var(--font-accent);
    font-size: 2.5rem;
    color: var(--color-heading);
    margin-bottom: 50px;
    letter-spacing: 0.2em;
}

.kokin-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.kokin-gallery__item {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 252, 248, 0.7);
    aspect-ratio: 4/3;
}

.kokin-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.kokin-gallery__item:hover img {
    transform: scale(1.05);
}

/* SNSセクション */
.kokin-sns {
    padding: 100px 40px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.kokin-sns h2 {
    font-family: var(--font-accent);
    font-size: 2.5rem;
    color: var(--color-heading);
    margin-bottom: 20px;
    letter-spacing: 0.2em;
}

.kokin-sns__text {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: 40px;
}

.kokin-sns__links {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.kokin-sns__link {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(253, 248, 243, 0.9);
    border-radius: 50%;
    color: var(--color-primary);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(125, 107, 93, 0.1);
}

.kokin-sns__link svg {
    width: 28px;
    height: 28px;
}

.kokin-sns__link:hover {
    background: var(--color-secondary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(201, 168, 108, 0.3);
}

/* フッター */
.kokin-footer {
    padding: 40px;
    text-align: center;
    position: relative;
    z-index: 1;
    background: rgba(253, 248, 243, 0.9);
}

.kokin-footer p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 15px;
}

.kokin-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.kokin-footer a:hover {
    color: var(--color-secondary);
}

/* アクティブなメニュー */
.kokin-nav__menu a.active {
    color: var(--color-secondary);
    font-weight: 600;
}

/* ========================================
   箏カルテットKokin サブページ
======================================== */

.kokin-page {
    min-height: 100vh;
    padding: 120px 40px 80px;
    position: relative;
    z-index: 1;
}

.kokin-page__content {
    max-width: 800px;
    margin: 0 auto;
}

.kokin-page__title {
    font-family: var(--font-accent);
    font-size: 3rem;
    color: var(--color-heading);
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: 60px;
}

.kokin-page__body {
    background: rgba(253, 248, 243, 0.9);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(125, 107, 93, 0.1);
    margin-bottom: 40px;
}

/* WordPress コンテンツスタイリング */
.kokin-wp-content h2 {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-secondary);
}

.kokin-wp-content h2:first-child {
    margin-top: 0;
}

.kokin-wp-content h3 {
    font-family: var(--font-accent);
    font-size: 1.25rem;
    color: var(--color-heading);
    margin: 30px 0 15px;
}

.kokin-wp-content p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-text);
    margin-bottom: 15px;
}

.kokin-wp-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
}

.kokin-wp-content .wp-block-image {
    margin: 30px 0;
}

.kokin-wp-content .wp-block-image figcaption {
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-top: 10px;
}

.kokin-wp-content ul,
.kokin-wp-content ol {
    margin: 20px 0;
    padding-left: 25px;
}

.kokin-wp-content li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 8px;
}

.kokin-wp-content .wp-block-button__link {
    display: inline-block;
    padding: 12px 30px;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.kokin-wp-content .wp-block-button__link:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
}

.kokin-wp-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 25px 0;
}

.kokin-wp-content .wp-block-group {
    margin: 30px 0;
    padding: 25px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
}

.kokin-wp-content .wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-secondary);
    margin: 40px 0;
    opacity: 0.5;
}

.kokin-wp-content blockquote {
    border-left: 4px solid var(--color-secondary);
    padding-left: 20px;
    margin: 25px 0;
    font-style: italic;
    color: var(--color-text-light);
}

.kokin-page__section {
    margin-bottom: 40px;
}

.kokin-page__section:last-child {
    margin-bottom: 0;
}

.kokin-page__section h2 {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-secondary);
}

.kokin-page__lead {
    font-size: 1.2rem;
    color: var(--color-secondary);
    font-weight: 500;
    margin-bottom: 20px;
}

.kokin-page__section p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-text);
    margin-bottom: 15px;
}

.kokin-page__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kokin-page__list li {
    padding: 12px 0 12px 25px;
    position: relative;
    font-size: 1.05rem;
    color: var(--color-text);
    border-bottom: 1px solid rgba(201, 168, 108, 0.2);
}

.kokin-page__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--color-secondary);
    border-radius: 50%;
}

.kokin-page__btn {
    display: inline-block;
    padding: 14px 35px;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.kokin-page__btn:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
}

.kokin-page__nav {
    text-align: center;
    margin-top: 40px;
}

.kokin-page__posts {
    margin-top: 60px;
}

.kokin-page__posts h2 {
    font-family: var(--font-accent);
    font-size: 1.8rem;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: 40px;
}

/* 投稿グリッド */
.kokin-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.kokin-post-card {
    background: rgba(253, 248, 243, 0.95);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(125, 107, 93, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kokin-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(125, 107, 93, 0.15);
}

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

.kokin-post-card__content {
    padding: 20px;
}

.kokin-post-card__content time {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.kokin-post-card__content h3 {
    font-size: 1rem;
    margin-top: 8px;
    line-height: 1.5;
}

.kokin-post-card__content h3 a {
    color: var(--color-heading);
    text-decoration: none;
}

.kokin-post-card__content h3 a:hover {
    color: var(--color-secondary);
}

/* イベントリスト */
.kokin-events-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.kokin-event-item {
    display: flex;
    gap: 30px;
    background: rgba(253, 248, 243, 0.95);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(125, 107, 93, 0.1);
}

.kokin-event-item__thumb {
    flex: 0 0 200px;
}

.kokin-event-item__thumb img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}

.kokin-event-item__content {
    flex: 1;
}

.kokin-event-item__date {
    font-size: 0.9rem;
    color: var(--color-secondary);
    font-weight: 600;
}

.kokin-event-item__title {
    font-size: 1.3rem;
    margin: 10px 0;
}

.kokin-event-item__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.kokin-event-item__title a:hover {
    color: var(--color-secondary);
}

.kokin-event-item__excerpt {
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: 15px;
}

.kokin-event-item__btn {
    display: inline-block;
    padding: 10px 25px;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.kokin-event-item__btn:hover {
    background: var(--color-secondary);
}

.kokin-no-events {
    text-align: center;
    padding: 60px 40px;
    background: rgba(253, 248, 243, 0.9);
    border-radius: 16px;
    color: var(--color-text-light);
    font-size: 1.1rem;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .kokin-header {
        padding: 15px 20px;
    }

    .kokin-nav {
        flex-direction: column;
        gap: 15px;
    }

    .kokin-nav__menu {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .kokin-about {
        padding: 80px 20px;
    }

    .kokin-about__inner {
        padding: 40px 25px;
    }

    .kokin-about h2 {
        font-size: 1.6rem;
    }

    .kokin-about__text {
        font-size: 0.95rem;
    }

    .kokin-gallery {
        padding: 60px 20px;
    }

    .kokin-gallery__grid {
        grid-template-columns: 1fr;
    }

    .kokin-sns {
        padding: 60px 20px;
    }

    .kokin-sns__links {
        gap: 20px;
    }

    .kokin-sns__link {
        width: 50px;
        height: 50px;
    }

    .kokin-sns__link svg {
        width: 24px;
        height: 24px;
    }

    /* サブページ */
    .kokin-page {
        padding: 100px 20px 60px;
    }

    .kokin-page__title {
        font-size: 2rem;
    }

    .kokin-page__body {
        padding: 30px 20px;
    }

    .kokin-posts-grid {
        grid-template-columns: 1fr;
    }

    .kokin-event-item {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .kokin-event-item__thumb {
        flex: none;
    }

    .kokin-event-item__thumb img {
        height: 180px;
    }
}


/* ========================================
   おコト遊BASE!! スタイル
   ポップで楽しいデザイン
======================================== */

/* カラー変数 */
:root {
    /* おコト遊BASE!! カラー */
    --ws-primary: #FF8B5A;       /* オレンジ */
    --ws-primary-dark: #E67347;
    --ws-secondary: #5BC0BE;     /* ティール */
    --ws-secondary-dark: #3A9C9A;
    --ws-accent: #FFD166;        /* イエロー */
    --ws-bg: #FFF9F5;            /* 温かいホワイト */
    --ws-bg-alt: #FFF0E8;        /* 薄いオレンジ */
}

/* おコト遊BASE!!ページ共通 */
.asobase-page {
    background: linear-gradient(180deg, var(--ws-bg) 0%, var(--ws-bg-alt) 100%);
    min-height: 100vh;
}

/* セクションタイトル */
.asobase-section-title {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.asobase-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--ws-primary), var(--ws-secondary));
    margin: 0.8rem auto 0;
    border-radius: 2px;
}

/* ボタン */
.asobase-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.asobase-btn--primary {
    background: linear-gradient(135deg, var(--ws-primary), var(--ws-primary-dark));
    color: white;
    box-shadow: 0 4px 15px rgba(255, 139, 90, 0.3);
}

.asobase-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 139, 90, 0.4);
}

.asobase-btn--secondary {
    background: linear-gradient(135deg, var(--ws-secondary), var(--ws-secondary-dark));
    color: white;
    box-shadow: 0 4px 15px rgba(91, 192, 190, 0.3);
}

.asobase-btn--outline {
    background: transparent;
    color: var(--ws-primary);
    border: 2px solid var(--ws-primary);
}

.asobase-btn--outline:hover {
    background: var(--ws-primary);
    color: white;
}

.asobase-btn--white {
    background: white;
    color: var(--ws-primary);
}

.asobase-btn--white:hover {
    background: var(--ws-bg);
}

/* ========================================
   おコト遊BASE!! ヒーロー
======================================== */
.asobase-hero {
    padding: 100px 20px 60px;
    background: linear-gradient(135deg, var(--ws-bg) 0%, var(--ws-bg-alt) 100%);
}

.asobase-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.asobase-hero__label {
    display: inline-block;
    background: var(--ws-secondary);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.asobase-hero__title {
    font-family: var(--font-accent);
    font-size: 3.5rem;
    color: var(--ws-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.asobase-hero__tagline {
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.asobase-hero__lead {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.asobase-hero__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.asobase-hero__visual {
    position: relative;
}

.asobase-hero__visual img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(255, 139, 90, 0.2);
}

/* ========================================
   おコト遊BASE!! コンセプト
======================================== */
.asobase-concept {
    padding: 80px 20px;
    background: white;
}

.asobase-concept__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.asobase-concept__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 2rem;
}

.asobase-concept__lead {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.asobase-concept__text p {
    margin-bottom: 1rem;
    line-height: 1.9;
}

.asobase-concept__image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ========================================
   おコト遊BASE!! 体験カード
======================================== */
.asobase-activities {
    padding: 80px 20px;
    background: var(--ws-bg);
}

.asobase-activities__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.asobase-activities__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.asobase-activity-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.asobase-activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(255, 139, 90, 0.15);
}

.asobase-activity-card__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.asobase-activity-card__title {
    font-size: 1.2rem;
    color: var(--color-heading);
    margin-bottom: 0.8rem;
}

.asobase-activity-card__text {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

/* ========================================
   おコト遊BASE!! イベントカード
======================================== */
.asobase-upcoming {
    padding: 80px 20px;
    background: white;
}

.asobase-upcoming__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.asobase-upcoming__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 2rem;
}

.asobase-event-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--ws-bg);
    padding: 24px;
    border-radius: 12px;
    border-left: 4px solid var(--ws-primary);
}

.asobase-event-card__badge {
    background: var(--ws-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.asobase-event-card__title {
    font-size: 1.1rem;
}

.asobase-event-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.asobase-event-card__title a:hover {
    color: var(--ws-primary);
}

.asobase-event-card__date {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.asobase-event-card__btn {
    background: var(--ws-primary);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.asobase-event-card__btn:hover {
    background: var(--ws-primary-dark);
}

.asobase-event-card__thumb img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin: 0 auto;
}

.asobase-upcoming__more,
.asobase-archive-preview__more {
    text-align: center;
}

.asobase-no-posts {
    text-align: center;
    color: var(--color-text-light);
    padding: 40px 20px;
}

/* ========================================
   おコト遊BASE!! 活動記録
======================================== */
.asobase-archive-preview {
    padding: 80px 20px;
    background: var(--ws-bg);
}

.asobase-archive-preview__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.asobase-archive-preview__lead {
    text-align: center;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.asobase-archive-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 2rem;
}

.asobase-report-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.asobase-report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.asobase-report-card__thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.asobase-report-card__content {
    padding: 16px;
}

.asobase-report-card__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.asobase-report-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.asobase-report-card__title a:hover {
    color: var(--ws-primary);
}

.asobase-report-card__date {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* ========================================
   おコト遊BASE!! ギャラリー
======================================== */
.asobase-gallery {
    padding: 80px 20px;
    background: white;
}

.asobase-gallery__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.asobase-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.asobase-gallery__item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.asobase-gallery__item:hover img {
    transform: scale(1.05);
}

/* ========================================
   おコト遊BASE!! サポートCTA
======================================== */
.asobase-support {
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--ws-primary), var(--ws-secondary));
    text-align: center;
}

.asobase-support__inner {
    max-width: 700px;
    margin: 0 auto;
}

.asobase-support__title {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
}

.asobase-support__text {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* ========================================
   おコト遊BASE!! 戻るリンク
======================================== */
.asobase-back {
    padding: 60px 20px;
    background: var(--ws-bg);
    text-align: center;
}

.asobase-back__text {
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.asobase-back__link {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--ws-secondary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.asobase-back__link:hover {
    color: var(--ws-secondary-dark);
}

.asobase-back__link--home {
    color: var(--color-text-light);
}

.asobase-back__or {
    color: var(--color-text-light);
    margin: 0.5rem 0;
}

/* ========================================
   おコト遊BASE!! ABOUTページ
======================================== */
.asobase-page-hero {
    padding: 120px 20px 60px;
    background: linear-gradient(135deg, var(--ws-primary), var(--ws-secondary));
    text-align: center;
}

.asobase-page-hero__label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.asobase-page-hero__title {
    font-family: var(--font-accent);
    font-size: 3rem;
    color: white;
    margin-bottom: 0.5rem;
}

.asobase-page-hero__subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

/* ABOUTメイン */
.asobase-about-main {
    padding: 80px 20px;
    background: white;
}

.asobase-about-main__inner {
    max-width: 900px;
    margin: 0 auto;
}

.asobase-about-intro {
    text-align: center;
    margin-bottom: 60px;
}

.asobase-about-intro__title {
    font-family: var(--font-accent);
    font-size: 1.8rem;
    color: var(--color-heading);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.asobase-about-intro__text {
    font-size: 1.1rem;
    color: var(--color-text);
}

/* コンセプト */
.asobase-about-concept {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.asobase-about-concept__title {
    font-size: 1.4rem;
    color: var(--ws-primary);
    margin-bottom: 1rem;
}

.asobase-about-concept__content p {
    margin-bottom: 1rem;
    line-height: 1.9;
}

.asobase-about-concept__image img {
    width: 100%;
    border-radius: 12px;
}

.asobase-about-concept__image figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-top: 0.5rem;
}

/* 3つの特徴 */
.asobase-about-features {
    margin-bottom: 60px;
}

.asobase-about-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.asobase-feature-box {
    background: var(--ws-bg);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
}

.asobase-feature-box__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.asobase-feature-box__title {
    font-size: 1.1rem;
    color: var(--color-heading);
    margin-bottom: 0.8rem;
}

.asobase-feature-box__text {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

/* 体験内容詳細 */
.asobase-about-activities {
    padding: 80px 20px;
    background: var(--ws-bg);
}

.asobase-about-activities__inner {
    max-width: 900px;
    margin: 0 auto;
}

.asobase-activity-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.asobase-activity-detail--reverse {
    direction: rtl;
}

.asobase-activity-detail--reverse > * {
    direction: ltr;
}

.asobase-activity-detail__image img {
    width: 100%;
    border-radius: 12px;
}

.asobase-activity-detail h4 {
    font-size: 1.3rem;
    color: var(--ws-primary);
    margin-bottom: 1rem;
}

.asobase-activity-detail p {
    line-height: 1.8;
    margin-bottom: 1rem;
}

.asobase-activity-detail ul {
    padding-left: 1.5rem;
}

.asobase-activity-detail li {
    margin-bottom: 0.5rem;
}

/* 参加者の声 */
.asobase-about-voices {
    padding: 80px 20px;
    background: white;
}

.asobase-about-voices__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.asobase-about-voices__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.asobase-voice-card {
    background: var(--ws-bg);
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid var(--ws-secondary);
}

.asobase-voice-card__text {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.asobase-voice-card__author {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* FAQ */
.asobase-about-faq {
    padding: 80px 20px;
    background: var(--ws-bg);
}

.asobase-about-faq__inner {
    max-width: 800px;
    margin: 0 auto;
}

.asobase-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.asobase-faq-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.asobase-faq-item__question {
    padding: 20px 24px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.asobase-faq-item__question::-webkit-details-marker {
    display: none;
}

.asobase-faq-item__question::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--ws-primary);
}

.asobase-faq-item[open] .asobase-faq-item__question::after {
    content: '-';
}

.asobase-faq-item__answer {
    padding: 0 24px 20px;
    line-height: 1.8;
    color: var(--color-text);
}

/* CTA */
.asobase-about-cta {
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--ws-secondary), var(--ws-primary));
    text-align: center;
}

.asobase-about-cta__inner {
    max-width: 600px;
    margin: 0 auto;
}

.asobase-about-cta__title {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
}

.asobase-about-cta__text {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.asobase-about-cta__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   箏カルテットKokin 追加スタイル
======================================== */
.kokin-activities-preview {
    padding: 80px 20px;
    text-align: center;
}

.kokin-activities-preview h2 {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    margin-bottom: 2rem;
}

.kokin-activities-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto 2rem;
}

.kokin-activity-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.kokin-activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.kokin-activity-card__thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.kokin-activity-card__content {
    padding: 16px;
}

.kokin-activity-card__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.kokin-activity-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.kokin-activity-card__date {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.kokin-activities-preview__more {
    margin-top: 2rem;
}

.kokin-events-preview {
    padding: 80px 20px;
    text-align: center;
}

.kokin-events-preview h2 {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    margin-bottom: 2rem;
}

.kokin-events-preview__inner {
    max-width: 600px;
    margin: 0 auto 2rem;
}

.kokin-upcoming-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 16px;
    border-left: 4px solid var(--color-secondary);
}

.kokin-upcoming-card__badge {
    display: inline-block;
    background: var(--color-secondary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.kokin-upcoming-card__title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.kokin-upcoming-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.kokin-upcoming-card__date {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.kokin-no-events {
    color: var(--color-text-light);
    padding: 40px 20px;
}

.kokin-events-preview__more {
    margin-top: 1rem;
}

.kokin-cross-link {
    padding: 60px 20px;
    text-align: center;
}

.kokin-cross-link__text {
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.kokin-cross-link__link {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--ws-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.kokin-cross-link__link:hover {
    color: var(--ws-primary-dark);
}

/* ========================================
   ドロップダウンメニュー（ホバー展開）
======================================== */
.pk-header__dropdown {
    position: relative;
}

.pk-header__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    min-width: 160px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 1000;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.pk-header__dropdown:hover .pk-header__dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.pk-header__dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.pk-header__dropdown-menu--ws li a:hover {
    background: var(--ws-bg);
    color: var(--ws-primary);
}

.pk-header__dropdown-menu--kokin li a:hover {
    background: var(--warm-beige);
    color: var(--color-primary);
}

/* ドロップダウン矢印 */
.pk-header__dropdown > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.pk-header__dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* ========================================
   トップページカード改善
======================================== */
.pk-card__visual {
    height: 200px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.pk-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pk-card:hover .pk-card__visual img {
    transform: scale(1.05);
}

.pk-card__body {
    padding: 24px;
}

.pk-card__label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.pk-card__label--workshop {
    background: var(--ws-bg-alt);
    color: var(--ws-primary);
}

.pk-card__label--kokin {
    background: var(--warm-beige);
    color: var(--color-primary);
}

.pk-card__features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.pk-card__features li {
    padding: 4px 0;
    padding-left: 1.2rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.pk-card__features li::before {
    content: '・';
    position: absolute;
    left: 0;
}

.pk-contents__lead {
    text-align: center;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

/* ========================================
   レスポンシブ（おコト遊BASE!!）
======================================== */
@media (max-width: 768px) {
    .asobase-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .asobase-hero__title {
        font-size: 2.5rem;
    }

    .asobase-hero__buttons {
        justify-content: center;
    }

    .asobase-concept__content {
        grid-template-columns: 1fr;
    }

    .asobase-activities__grid {
        grid-template-columns: 1fr;
    }

    .asobase-archive-preview__grid {
        grid-template-columns: 1fr;
    }

    .asobase-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .asobase-about-concept {
        grid-template-columns: 1fr;
    }

    .asobase-about-features__grid {
        grid-template-columns: 1fr;
    }

    .asobase-activity-detail {
        grid-template-columns: 1fr;
    }

    .asobase-activity-detail--reverse {
        direction: ltr;
    }

    .asobase-about-voices__grid {
        grid-template-columns: 1fr;
    }

    .kokin-activities-preview__grid {
        grid-template-columns: 1fr;
    }

    .pk-header__dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        background: var(--warm-beige);
        border-radius: 0;
        min-width: auto;
    }

    /* モバイル: タップで開いた親のサブメニューを表示（hover非対応端末対策） */
    .pk-header__dropdown.open .pk-header__dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .pk-header__dropdown.open > a::after {
        transform: rotate(180deg);
    }

    .asobase-event-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pk-hero--fullscreen {
        min-height: 100svh;
    }
}


/* ========================================
   フルスクリーンヒーロー
======================================== */
.pk-hero--fullscreen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.pk-hero--fullscreen .pk-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

.pk-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pk-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    animation: heroReveal 1.5s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes heroReveal {
    0% {
        filter: brightness(0.7);
    }
    100% {
        filter: brightness(1);
    }
}

/* ヒーロー白いベール */
.pk-hero__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: heroVeil 1s ease-out forwards;
    animation-delay: 1.5s;
}

@keyframes heroVeil {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.pk-hero__scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 0.85rem;
    opacity: 0.8;
    animation: bounce 2s infinite;
}

.pk-hero__scroll-hint svg {
    width: 24px;
    height: 24px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* コンテンツイントロ */
.pk-contents-intro {
    padding: 80px 20px 40px;
    text-align: center;
    background: var(--color-bg);
}

.pk-contents-intro__inner {
    max-width: 800px;
    margin: 0 auto;
}

/* ========================================
   スクロール連動エフェクト（Reveal）
======================================== */
.reveal-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reveal-section__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.reveal-section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transition: filter 0.8s ease;
}

.reveal-section.is-active .reveal-section__bg img {
    filter: brightness(1);
}

/* 白いベール（40%透過） */
.reveal-section__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.reveal-section.is-active .reveal-section__bg::after {
    opacity: 1;
}

.reveal-section__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
    max-width: 800px;
}

.reveal-section__title {
    font-family: var(--font-accent);
    font-size: 2.5rem;
    color: #2C2416;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.9),
        0 0 40px rgba(255, 255, 255, 0.7),
        0 2px 4px rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease 0.3s;
    font-weight: 700;
}

.reveal-section__title--right {
    transform: translateX(50px);
}

.reveal-section.is-active .reveal-section__title {
    opacity: 1;
    transform: translateX(0);
}

.reveal-section__text {
    font-size: 1.2rem;
    color: #3D3836;
    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(255, 255, 255, 0.6);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.5s;
    margin-top: 1rem;
    font-weight: 500;
}

.reveal-section.is-active .reveal-section__text {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section__label {
    display: inline-block;
    padding: 6px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.2s;
}

.reveal-section__label--workshop {
    background: var(--ws-orange);
    color: white;
}

.reveal-section__label--kokin {
    background: var(--kokin-gold);
    color: var(--kokin-dark);
}

.reveal-section.is-active .reveal-section__label {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section__desc {
    font-size: 1rem;
    color: #4A4543;
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.9),
        0 0 25px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.6s;
    margin-top: 1.5rem;
    line-height: 1.8;
    font-weight: 500;
}

.reveal-section.is-active .reveal-section__desc {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section__btn {
    display: inline-block;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.7s, background 0.3s ease, transform 0.3s ease;
}

.reveal-section.is-active .reveal-section__btn {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section__btn--workshop {
    background: var(--ws-orange);
    color: white;
}

.reveal-section__btn--workshop:hover {
    background: #e67a4a;
    transform: translateY(-3px);
}

.reveal-section__btn--kokin {
    background: var(--kokin-gold);
    color: var(--kokin-dark);
}

.reveal-section__btn--kokin:hover {
    background: #d4a84a;
    transform: translateY(-3px);
}

/* ワークショップ用リビール */
.reveal-section--workshop {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Kokin用リビール */
.reveal-section--kokin {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
}

.reveal-section--kokin .reveal-section__bg img {
    object-position: center 25%;
}

/* 2つの活動カード - スクロールで出現 */
.pk-card--reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

.pk-card--reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pk-card--reveal:nth-child(2) {
    transition-delay: 0.2s;
}

/* ========================================
   フェードインアニメーション
======================================== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease;
}

.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease;
}

.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ========================================
   レスポンシブ - リビールセクション
======================================== */
@media (max-width: 768px) {
    .pk-hero--fullscreen {
        min-height: 100svh;
    }

    .pk-hero__title {
        font-size: 2rem;
    }

    .pk-hero__tagline {
        font-size: 1rem;
    }

    .pk-hero__event {
        padding: 20px;
    }

    .pk-hero__event-title {
        font-size: 1.3rem;
    }

    .pk-hero__scroll-hint {
        bottom: 20px;
        font-size: 0.75rem;
    }

    .pk-contents-intro {
        padding: 60px 15px 30px;
    }

    .reveal-section {
        min-height: 70vh;
    }

    .reveal-section__content {
        padding: 20px;
    }

    .reveal-section__title {
        font-size: 1.8rem;
    }

    .reveal-section__text {
        font-size: 1rem;
    }

    .reveal-section__desc {
        font-size: 0.9rem;
    }

    .reveal-section__btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .pk-hero__title {
        font-size: 1.6rem;
    }

    .reveal-section__title {
        font-size: 1.5rem;
    }

    .reveal-section__label {
        font-size: 0.75rem;
        padding: 4px 14px;
    }
}

/* ========================================
   特集セクション - もっと見るリンク
======================================== */
.pk-features__more {
    text-align: center;
    margin-top: 40px;
}

.pk-features__more-link {
    display: inline-block;
    color: var(--color-primary);
    font-size: 0.95rem;
    text-decoration: none;
    padding: 12px 30px;
    border: 1px solid var(--color-primary);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.pk-features__more-link:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ========================================
   箏カルテット - スケジュールセクション
======================================== */
.kokin-schedule {
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.kokin-schedule h2 {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.kokin-schedule__lead {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 40px;
}

.kokin-schedule__list {
    max-width: 700px;
    margin: 0 auto;
}

.kokin-schedule__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kokin-schedule__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.kokin-schedule__date {
    font-family: var(--font-accent);
    font-size: 0.9rem;
    color: var(--color-secondary);
    white-space: nowrap;
}

.kokin-schedule__title {
    font-size: 1rem;
    margin: 0;
    text-align: left;
    flex: 1;
}

.kokin-schedule__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.kokin-schedule__title a:hover {
    color: var(--color-primary);
}

.kokin-schedule__empty {
    color: var(--color-text-light);
    font-size: 0.95rem;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
}

.kokin-schedule__more {
    margin-top: 30px;
}

.kokin-schedule__btn {
    display: inline-block;
    color: var(--color-primary);
    font-size: 0.9rem;
    text-decoration: none;
    padding: 10px 25px;
    border: 1px solid var(--color-primary);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.kokin-schedule__btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ========================================
   箏カルテット - 活動記録セクション
======================================== */
.kokin-archive {
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    background: rgba(255, 252, 248, 0.4);
}

.kokin-archive h2 {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.kokin-archive__lead {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 40px;
}

.kokin-archive__list {
    max-width: 700px;
    margin: 0 auto;
}

.kokin-archive__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 25px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    margin-bottom: 12px;
    border-left: 3px solid var(--color-secondary);
    transition: transform 0.3s ease;
}

.kokin-archive__item:hover {
    transform: translateX(5px);
}

.kokin-archive__date {
    font-size: 0.85rem;
    color: var(--color-text-light);
    white-space: nowrap;
}

.kokin-archive__title {
    font-size: 0.95rem;
    margin: 0;
    text-align: left;
    flex: 1;
}

.kokin-archive__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.kokin-archive__title a:hover {
    color: var(--color-primary);
}

.kokin-archive__more {
    margin-top: 30px;
}

.kokin-archive__btn {
    display: inline-block;
    color: var(--color-primary);
    font-size: 0.9rem;
    text-decoration: none;
    padding: 10px 25px;
    border: 1px solid var(--color-primary);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.kokin-archive__btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ========================================
   箏カルテット - ページリード
======================================== */
.kokin-page__lead {
    font-size: 1.1rem;
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: 40px;
}

/* ========================================
   箏カルテット - イベントリスト（EVENT）
======================================== */
.kokin-event-list {
    max-width: 800px;
    margin: 0 auto;
}

.kokin-event-card {
    display: flex;
    gap: 25px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kokin-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.kokin-event-card__thumb {
    flex-shrink: 0;
    width: 200px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
}

.kokin-event-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.kokin-event-card:hover .kokin-event-card__thumb img {
    transform: scale(1.05);
}

.kokin-event-card__body {
    flex: 1;
    text-align: left;
}

.kokin-event-card__badge {
    display: inline-block;
    background: var(--color-secondary);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.kokin-event-card__date {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.kokin-event-card__title {
    font-size: 1.1rem;
    margin: 0 0 10px;
    line-height: 1.5;
}

.kokin-event-card__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.kokin-event-card__title a:hover {
    color: var(--color-primary);
}

.kokin-event-card__excerpt {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.kokin-event-card__link {
    color: var(--color-primary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.kokin-event-card__link:hover {
    opacity: 0.7;
}

.kokin-event-empty {
    text-align: center;
    color: var(--color-text-light);
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
}

/* ========================================
   箏カルテット - 活動リスト（ACTIVITIES）
======================================== */
.kokin-activities-list {
    max-width: 800px;
    margin: 0 auto;
}

.kokin-activity-card {
    display: flex;
    gap: 25px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-secondary);
    transition: transform 0.3s ease;
}

.kokin-activity-card:hover {
    transform: translateX(5px);
}

.kokin-activity-card__thumb {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
}

.kokin-activity-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kokin-activity-card__body {
    flex: 1;
    text-align: left;
}

.kokin-activity-card__date {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.kokin-activity-card__title {
    font-size: 1.05rem;
    margin: 0 0 10px;
    line-height: 1.5;
}

.kokin-activity-card__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.kokin-activity-card__title a:hover {
    color: var(--color-primary);
}

.kokin-activity-card__excerpt {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.kokin-activity-card__link {
    color: var(--color-primary);
    font-size: 0.85rem;
    text-decoration: none;
}

/* ========================================
   箏カルテット - ページナビゲーション
======================================== */
.kokin-page__nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.kokin-page__btn--secondary {
    background: transparent;
    border-color: var(--color-text-light);
    color: var(--color-text-light);
}

.kokin-page__btn--secondary:hover {
    background: var(--color-text-light);
    color: #fff;
}

/* ========================================
   カテゴリアーカイブ
======================================== */
.pk-archive {
    padding: 60px 20px 80px;
    background: var(--color-bg);
}

.pk-archive__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.pk-archive__grid {
    display: grid;
    gap: 25px;
}

.pk-archive__grid--workshop {
    grid-template-columns: 1fr;
}

.pk-archive__grid--kokin {
    grid-template-columns: 1fr;
}

.pk-archive__grid--features,
.pk-archive__grid--default {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.pk-archive-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pk-archive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.pk-archive-card--workshop {
    border-left: 4px solid var(--ws-orange);
}

.pk-archive-card--kokin {
    border-left: 4px solid var(--color-secondary);
}

.pk-archive-card--features {
    flex-direction: column;
}

.pk-archive-card__thumb {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
}

.pk-archive-card--features .pk-archive-card__thumb {
    width: 100%;
    height: 180px;
}

.pk-archive-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-archive-card__body {
    flex: 1;
}

.pk-archive-card__date {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.pk-archive-card__title {
    font-size: 1rem;
    margin: 0 0 10px;
    line-height: 1.5;
}

.pk-archive-card__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.pk-archive-card__title a:hover {
    color: var(--color-primary);
}

.pk-archive-card__excerpt {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 10px;
}

.pk-archive-card__link {
    color: var(--color-primary);
    font-size: 0.85rem;
    text-decoration: none;
}

.pk-archive__empty {
    text-align: center;
    color: var(--color-text-light);
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
}

.pk-archive__back {
    text-align: center;
    margin-top: 50px;
}

.pk-archive__back-link {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.pk-archive__back-link:hover {
    color: var(--color-primary);
}

/* ページネーション */
.pk-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
}

.pk-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.pk-pagination .page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

/* ========================================
   レスポンシブ - 新規セクション用
======================================== */
@media (max-width: 768px) {
    .kokin-schedule__item,
    .kokin-archive__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .kokin-event-card,
    .kokin-activity-card {
        flex-direction: column;
    }

    .kokin-event-card__thumb,
    .kokin-activity-card__thumb {
        width: 100%;
        height: 180px;
    }

    .pk-archive-card {
        flex-direction: column;
    }

    .pk-archive-card__thumb {
        width: 100%;
        height: 160px;
    }

    .kokin-page__nav {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   あそベース サブページ用
======================================== */
.asobase-page--subpage {
    background: linear-gradient(180deg, #FFF8F0 0%, #FFFCF8 100%);
    min-height: 100vh;
}

.pk-page-hero__label {
    font-size: 0.9rem;
    color: var(--ws-orange);
    margin-bottom: 10px;
}

.pk-page-hero__label a {
    color: inherit;
    text-decoration: none;
}

.pk-page-hero__label a:hover {
    text-decoration: underline;
}

.asobase-list-section {
    padding: 60px 20px 80px;
}

.asobase-list-section__inner {
    max-width: 900px;
    margin: 0 auto;
}

.asobase-event-list,
.asobase-archive-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.asobase-list-card {
    display: flex;
    gap: 25px;
    padding: 25px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.asobase-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.asobase-list-card__thumb {
    flex-shrink: 0;
    width: 220px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
}

.asobase-list-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.asobase-list-card:hover .asobase-list-card__thumb img {
    transform: scale(1.05);
}

.asobase-list-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.asobase-list-card__badge {
    display: inline-block;
    width: fit-content;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.asobase-list-card__badge--upcoming {
    background: var(--ws-orange);
    color: #fff;
}

.asobase-list-card__badge--archive {
    background: var(--ws-teal);
    color: #fff;
}

.asobase-list-card__date {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.asobase-list-card__title {
    font-size: 1.15rem;
    margin: 0 0 12px;
    line-height: 1.5;
}

.asobase-list-card__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.asobase-list-card__title a:hover {
    color: var(--ws-orange);
}

.asobase-list-card__excerpt {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 15px;
    flex: 1;
}

.asobase-list-card__link {
    color: var(--ws-orange);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.asobase-list-card__link:hover {
    opacity: 0.7;
}

.asobase-list-empty {
    text-align: center;
    color: var(--color-text-light);
    padding: 80px 20px;
    background: #fff;
    border-radius: 16px;
    font-size: 1rem;
}

.asobase-list-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.asobase-btn--text {
    background: transparent;
    border: none;
    color: var(--color-text-light);
    padding: 12px 20px;
}

.asobase-btn--text:hover {
    color: var(--ws-orange);
    background: transparent;
}

@media (max-width: 768px) {
    .asobase-list-card {
        flex-direction: column;
    }

    .asobase-list-card__thumb {
        width: 100%;
        height: 200px;
    }

    .asobase-list-nav {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================
   箏アンサンブルKokin：左右2カラム（左=PNG／右=コンテンツ・背景イラストなし）
   ============================================ */
.pk-kokin-split {
    padding: 80px 5%;
    background: transparent;
}
.pk-kokin-split__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
}
.pk-kokin-split__image {
    flex: 0 0 45%;
    max-width: 45%;
}
.pk-kokin-split__image img {
    width: 100%;
    height: auto;
    display: block;
}
.pk-kokin-split__content {
    flex: 1;
    text-align: left;
}
.pk-kokin-split__title {
    font-family: var(--font-accent);
    font-size: 2.5rem;
    font-weight: 700;
    color: #2C2416;
    margin: 16px 0 8px;
}
.pk-kokin-split__text {
    color: #3D3836;
    font-size: 1.1rem;
    margin-bottom: 16px;
}
.pk-kokin-split__desc {
    color: #4A4543;
    line-height: 1.9;
    margin-bottom: 28px;
}
/* リビール用クラス流用時の初期opacity:0を打ち消し常時表示（バッジ・ボタンの復活） */
.pk-kokin-split .reveal-section__label,
.pk-kokin-split .reveal-section__btn {
    opacity: 1;
    transform: none;
}
@media (max-width: 768px) {
    .pk-kokin-split__inner { flex-direction: column; gap: 28px; }
    .pk-kokin-split__image,
    .pk-kokin-split__content { width: 100%; flex: none; max-width: 100%; }
    .pk-kokin-split__content { text-align: center; }
}

/* ============================================
   koto-ensemble ACTIVITIESプレビュー：サムネイル上・タイトル下の縦カード
   （横並び用 .kokin-activity-card__thumb(180x120) の衝突を当グリッド限定で上書き）
   ============================================ */
.kokin-activities-preview__grid .kokin-activity-card { display: block; }
.kokin-activities-preview__grid .kokin-activity-card__thumb {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: 0;
}
.kokin-activities-preview__grid .kokin-activity-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   トップ：記事一覧へのリンク（最新の活動の下）
   ============================================ */
.pk-cat-links {
    padding: 40px 5% 20px;
}
.pk-cat-links__inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.pk-cat-links__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}
.pk-cat-links__item {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    color: #2C2416;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}
.pk-cat-links__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}