/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: 
Author URI: 
Description: Child theme for Kadence - Artist Site
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* =======================================================
   DESIGN TOKEN REFERENCE  ―  Global Palette Role Map
   =======================================================
   Kadenceパネルで設定したパレット値と役割の対応表。
   CSS内ではフォールバック値を必ずこの値に揃えること。

   palette1  (#3182CE) : Brand Primary        ― アクセント・リンク・ボーダーハイライト
   palette2  (#2B6CB0) : Brand Primary Dark   ― ホバー・強調
   palette3  (#1A202C) : Dark Shell           ― ヘッダー/フッター背景・オーバーレイ
   palette4  (#2D3748) : Body Text            ― 見出し・本文
   palette5  (#4A5568) : Secondary Text       ― サブラベル・キャプション
   palette6  (#718096) : Muted Text           ― 日付・説明・メタ情報
   palette7  (#EDF2F7) : Border / Divider     ― 区切り線・カードボーダー
   palette8  (#F7FAFC) : Surface BG           ― パネル背景・カード薄背景（クール系）
   palette9  (#FFFFFF) : Pure White           ― カード・モーダル白
   palette10 (#FAF8F5) : Warm Surface         ― body背景・暖色サーフェス ※要Kadenceパネル設定
   palette11 (#13612E) : Category: Singer     ― シンガーバッジ・緑系アクセント
   palette12 (#1159AF) : Category: VoiceActor ― 声優バッジ・情報系ブルー
   palette13 (#B82105) : Danger / Alert       ― エラー・緊急ステータス
   palette14 (#F7630C) : SNS Orange           ― ブログ・暖色リンク
   palette15 (#F5A524) : Warning / Warm       ― 注意・ウォームアクセント
   ======================================================= */

/**
 * Kadence Child Theme Stylesheet
 * Artist Site Customization - Ken-On Style
 */

/* =====================================================
   セクション固有カスタムプロパティ
   パレットに収まらない用途別トークンをここで定義する
   ===================================================== */
:root {
    /* --- お知らせ・お問い合わせ系 ネイビーカラー --- */
    --color-info-navy: #27496d;
    /* お知らせ見出し・フィルターボタン */
    --color-info-navy-dark: #1f4d78;
    /* フォームボタン・CTA */
    --color-info-text-body: #203246;
    /* お知らせ本文見出しテキスト */
    --color-info-text-muted: #5f6b7a;
    /* 日付・説明 */
    --color-info-text-subtle: #44576b;
    /* サマリー文章 */
    --color-info-bg-light: #eef3f8;
    /* フィルターボタン・バッジ背景 */
    --color-info-bg-card: #e9f2fb;
    /* カードタイプバッジ背景 */
    --color-info-border: #d9e3ee;
    /* お知らせ区切り線 */
    --color-info-border-strong: #e6edf5;
    /* お知らせ詳細ボーダー */

    /* --- アーティストページ専用 (ダークシェル) --- */
    --artist-shell-bg: #111111;
    /* アーティストページの超ダーク背景 */

    /* --- SNS ブランドカラー (パレット管理外) --- */
    --color-sns-twitter: #1da1f2;
    --color-sns-instagram-from: #f58529;
    --color-sns-instagram-to: #8134af;
    --color-sns-blog: #ff6b35;
    --color-sns-fanclub: #6f42c1;
}


/* 全体デザイン設定 */
body {
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    background-color: var(--global-palette8, #faf8f5);
    color: var(--global-palette4, #2c2c2e);
    -webkit-font-smoothing: antialiased;
}

/* ヘッダー・フッターの調整 */
.site-header {
    background: var(--global-palette3, #1A202C) !important;
    /* パレット共有回避のため固定 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.site-header a,
.site-header .site-title,
.site-header .main-navigation ul li a {
    color: #ffffff !important;
    /* パレット共有回避のため白に固定 */
}

.site-header a:hover {
    color: var(--global-palette1, #3182CE) !important;
    /* ローズゴールド */
}

.site-footer {
    background: var(--global-palette3, #1A202C);
    border-top: 3px solid var(--global-palette1, #3182CE);
    color: var(--global-palette6, #a0a0a5);
    padding: 60px 0 30px;
}

.site-footer a {
    color: var(--global-palette6, #a0a0a5);
}

.site-footer a:hover {
    color: var(--global-palette1, #3182CE);
}

/* ===================================
   ヒーローカルーセル（全幅対応）
   =================================== */

.hero-carousel-section {
    width: 100%;
    margin: 0 0 60px 0;
    /* 下にのみ余白を追加 */
    padding: 0;
    position: relative;
}

.hero-carousel {
    width: 100%;
    margin: 0;
}

.hero-carousel .splide__track {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.hero-carousel .splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.hero-carousel .splide__slide {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

/* トランジションが効いているか確認用 */
.hero-carousel.is-active .splide__list {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-duration: 800ms;
}

/* アクションボタン（リンク用丸ボタン） */
.hero-carousel__action-btn {
    position: absolute;
    bottom: clamp(15px, 4vw, 30px);
    /* 画面サイズに合わせて位置を調整 */
    right: clamp(15px, 4vw, 30px);
    width: 60px;
    height: 60px;
    background: var(--global-palette1, #3182CE);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.hero-carousel__action-btn:hover {
    background: #ffffff;
    color: var(--global-palette1, #3182CE);
    transform: scale(1.15) rotate(45deg);
    /* 矢印が右上を向くような演出 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.hero-carousel__action-btn svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 768px) {
    .hero-carousel__action-btn {
        width: 48px;
        height: 48px;
    }

    .hero-carousel__action-btn svg {
        width: 22px;
        height: 22px;
    }
}

/* 背景画像スライド（よりワイドに、高さを控えめに） */
.hero-carousel__slide-bg {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 550;
    /* さらに横長に（1020/289よりも少し高さを確保） */
    background-size: cover;
    background-position: center top;
    overflow: hidden;
    /* パンアニメーション（移動範囲を限定して左右をより見せる） */
    animation: pan-effect 20s ease-in-out infinite alternate;
}

@keyframes pan-effect {
    0% {
        background-position: 20% 0%;
    }

    /* 開始位置を少し内側に */
    100% {
        background-position: 80% 0%;
    }

    /* 終了位置を少し内側に */
}

/* 隠しimg（アスペクト比計算用） */
.hero-carousel__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 550;
    display: block;
    object-fit: cover;
    visibility: hidden;
}

/* --- タブレット (769px ~ 1019px)
   アスペクト比で画像全体を表示（クリップなし）
   ------------------------------------------ */
@media (max-width: 1019px) {
    .hero-carousel__slide-bg {
        height: auto;
        aspect-ratio: 1020 / 289;
        overflow: visible;
        /* クリップしない */
    }

    .hero-carousel__image {
        height: auto;
        aspect-ratio: 1020 / 289;
    }
}

/* --- スマホ (〜768px)
   16:9で全体が見える
   ------------------------------------------ */
@media (max-width: 768px) {
    .hero-carousel__slide-bg {
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: visible;
    }

    .hero-carousel__image {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* カルーセルコントロールのカスタマイズ */
.hero-carousel__arrow {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.hero-carousel__arrow:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.1);
}

.hero-carousel__arrow--prev {
    left: 20px;
}

.hero-carousel__arrow--next {
    right: 20px;
}

.hero-carousel__pagination {
    bottom: 20px;
}

.hero-carousel__page {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #ddd;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    transition: all 0.3s ease;
}

.hero-carousel__page.is-active {
    background: #fff;
    transform: scale(1.2);
}

/* アーティスト一覧ページ */
.artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.artist-card {
    background: var(--global-palette9, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    border: 1px solid var(--global-palette7, #f0edeb);
}

.artist-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}

.artist-card__image {
    width: 100%;
    height: 237px;
    background: #f5f5f5;
    display: block;
    position: relative;
    overflow: hidden;
}

.artist-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.3s ease;
}

.artist-card:hover .artist-card__image img {
    transform: scale(1.05);
}

/* 画像がない場合のみプレースホルダーを表示 */
.artist-card__image:not(:has(img))::before {
    content: "No Image";
    color: #999;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* フォールバック：JavaScript用クラス */
.artist-card__image.no-image::before {
    content: "No Image";
    color: #999;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.artist-card__content {
    padding: 20px;
}

.artist-card__title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

.artist-card__title a {
    color: var(--global-palette4, #2D3748);
    text-decoration: none;
    transition: color 0.3s ease;
}

.artist-card__title a:hover {
    color: var(--global-palette1, #3182CE);
}

.artist-card__kana {
    color: var(--global-palette6, #718096);
    font-size: 14px;
    margin-bottom: 10px;
}

.artist-card__image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.artist-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-card__content {
    padding: 20px;
}

.artist-card__title {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.artist-card__title a {
    color: var(--global-palette4, #2D3748);
    text-decoration: none;
}

.artist-card__title a:hover {
    color: var(--global-palette1, #3182CE);
}

.artist-card__kana {
    font-size: 0.9rem;
    color: var(--global-palette6, #718096);
    margin-bottom: 10px;
}

.artist-card__roles {
    font-size: 0.85rem;
    color: var(--global-palette1, #3182CE);
    font-weight: 500;
}

/* 詳細ページ */
.artist-single {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.artist-single__header {
    text-align: center;
    margin-bottom: 2rem;
}

.artist-single__title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.artist-single__kana {
    font-size: 1.1rem;
    color: var(--global-palette6, #718096);
    margin-bottom: 1rem;
    font-weight: 800;
}

.artist-single__roles {
    font-size: 1.1rem;
    color: var(--global-palette1, #3182CE);
    margin-bottom: 2rem;
}

.artist-single__image {
    text-align: center;
}

.artist-single__image img {
    max-width: 300px;
    height: auto;
    border-radius: 8px;
}


.artist-info-item {
    display: flex;
    margin-bottom: 15px;
}

.artist-info-label {
    font-weight: 600;
    color: var(--global-palette4, #2D3748);
    margin-right: 10px;
    min-width: 100px;
}

.artist-info-value {
    color: var(--global-palette6, #718096);
}

.artist-single__profile {
    margin-top: 40px;
}

.artist-single__profile h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--global-palette1, #3182CE);
    color: var(--global-palette4, #333);
    padding-bottom: 10px;
}

.artist-profile-text {
    line-height: 1.8;
    color: var(--global-palette4, #2D3748);
}

/* ページタイトル */
.page-title {
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 2px solid var(--global-palette1, #3182CE);
    padding-bottom: 15px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .artist-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .artist-single__title {
        font-size: 2rem;
    }

    .site-container {
        padding: 0 15px;
    }

    /* モバイルでサイドバーを確実に非表示 */
    .site-main .widget-area {
        display: none !important;
    }

    .site-main .content-area {
        width: 100% !important;
        max-width: none !important;
    }

    /* モバイルでのコンテンツ幅調整 */
    .artist-single {
        padding: 20px 0;
    }

    .artist-card__content {
        padding: 15px;
    }

    .artist-single__title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .artist-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .site-container {
        padding: 0 10px;
    }

    .artist-single {
        padding: 15px 0;
    }

    .artist-card__content {
        padding: 12px;
    }

    .artist-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .artist-info-label {
        margin-right: 0;
        margin-bottom: 5px;
        min-width: auto;
    }

    .artist-info-value {
        font-size: 0.9rem;
    }
}

/* Artist Archive Styles */
.artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.artist-card {
    background: var(--global-palette9, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    border: 1px solid var(--global-palette7, #f0edeb);
}

.artist-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}

.artist-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.artist-card__thumbnail {
    position: relative;
    padding-top: 75%;
    /* 4:3 aspect ratio */
    overflow: hidden;
}

.artist-card__thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artist-card:hover .artist-card__thumbnail img {
    transform: scale(1.05);
}

.artist-card__content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.artist-card__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.artist-card__title a {
    color: inherit;
    text-decoration: none;
}

.artist-card__title a:hover {
    color: var(--global-palette1, #3182CE);
}

.artist-card__kana {
    font-size: 0.9rem;
    color: var(--global-palette6, #718096);
    margin-bottom: 0.75rem;
}

.artist-card__type {
    margin-top: auto;
}

.artist-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.artist-type--singer {
    background-color: color-mix(in srgb, var(--global-palette11, #13612E) 15%, white);
    color: var(--global-palette11, #13612E);
}

.artist-type--voice_actor {
    background-color: color-mix(in srgb, var(--global-palette12, #1159AF) 15%, white);
    color: var(--global-palette12, #1159AF);
}

.no-content {
    text-align: center;
    padding: 3rem 0;
    color: var(--global-palette6, #718096);
}

/* Single Artist Styles */
.artist-profile {
    max-width: 800px;
    margin: 0 auto;
}

.artist-profile__header {
    text-align: center;
    margin-bottom: 2rem;
}

.artist-profile__thumbnail {
    max-width: 300px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
}

.artist-profile__thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.artist-profile__content {
    padding: 0 1rem;
}

.artist-profile__header-info {
    text-align: center;
    margin-bottom: 3rem;
}

.artist-profile__title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.artist-profile__roles {
    margin-bottom: 1rem;
    text-align: center;
}

.artist-profile__roles-label {
    font-weight: 600;
    color: var(--global-palette4, #2D3748);
    margin-right: 0.5rem;
}

.artist-profile__roles-text {
    color: var(--global-palette1, #3182CE);
    font-size: 1.1rem;
}

.artist-profile__kana {
    font-size: 1.1rem;
    color: var(--global-palette6, #718096);
    margin-bottom: 1rem;
}

.artist-profile__info {
    margin: 2rem 0;
}

.artist-profile__info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.artist-profile__info-item:last-child {
    border-bottom: none;
}

.artist-profile__info-label {
    font-weight: 600;
    color: var(--global-palette4, #2D3748);
    min-width: 120px;
}

.artist-profile__info-value {
    color: var(--global-palette6, #718096);
    text-align: right;
}

.artist-profile__description {
    margin: 2rem 0;
    line-height: 1.8;
}

.artist-section__title {
    font-size: 1.5rem;
    margin: 3rem 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--global-palette1, #3182CE);
}

.artist-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}

.artist-social__link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--global-palette1, #3182CE);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

.artist-social__link:hover {
    background-color: #005a87;
    color: white;
}

.artist-works__list,
.artist-qualifications__list,
.artist-career__list,
.artist-movies__list {
    margin: 1.5rem 0;
}

.artist-works__item,
.artist-qualifications__item,
.artist-career__item,
.artist-movies__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.artist-works__item:last-child,
.artist-qualifications__item:last-child,
.artist-career__item:last-child,
.artist-movies__item:last-child {
    border-bottom: none;
}

.artist-movies__link {
    color: var(--global-palette1, #3182CE);
    text-decoration: none;
}

.artist-movies__link:hover {
    text-decoration: underline;
}

.artist-works__category {
    margin: 2rem 0;
}

.artist-works__category-title {
    font-size: 1.2rem;
    margin: 1.5rem 0 1rem 0;
    color: var(--global-palette4, #2D3748);
}

.artist-discography__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.artist-discography__item {
    text-align: center;
}

.artist-discography__cover {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.artist-discography__cover img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.artist-discography__item:hover .artist-discography__cover img {
    transform: scale(1.05);
}

.artist-discography__title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.artist-discography__type {
    font-size: 0.9rem;
    color: var(--global-palette6, #718096);
}

/* 作品リスト用スタイル */
.works-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 1.5rem 0;
}

.work-item {
    background: var(--global-palette8, #F7FAFC);
    border: 1px solid var(--global-palette7, #e9ecef);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--global-palette6, #495057);
    transition: all 0.3s ease;
}

.work-item:hover {
    background: var(--global-palette7, #e9ecef);
    transform: translateY(-2px);
}

/* ディスコグラフィーグリッド */
.discography-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.discography-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.discography-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.discography-cover {
    position: relative;
    padding-top: 100%;
    /* 正方形 */
    overflow: hidden;
    background: var(--global-palette8, #F7FAFC);
}

.discography-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.discography-item:hover .discography-cover img {
    transform: scale(1.05);
}

.discography-cover.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--global-palette7, #EDF2F7);
}

.no-image-text {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
}

.discography-info {
    padding: 1rem;
    text-align: center;
}

.discography-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: var(--global-palette4, #2D3748);
}

.discography-type {
    font-size: 0.85rem;
    color: var(--global-palette1, #3182CE);
    font-weight: 500;
    background: #e8f4f8;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
}

/* レスポンシブ対応 */
/* ディスコグラフィー グリッド+スライダー対応 */
.singer-discography__group {
    margin-bottom: 3rem;
}

/* PC用グリッド（768px以上で表示） */
.singer-discography__grid--desktop {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .singer-discography__grid--desktop {
        display: grid;
    }

    /* PC: 4列 */
    @media (min-width: 1200px) {
        .singer-discography__grid--desktop {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* タブレット: 3列 */
    @media (min-width: 768px) and (max-width: 1199px) {
        .singer-discography__grid--desktop {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

/* スマホ用スライダー（767px以下で表示） */
.singer-discography__slider--mobile {
    display: block;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .singer-discography__slider--mobile {
        display: none;
    }
}

/* スライダーのスタイル */
.singer-discography .splide {
    padding: 0 20px;
}

.singer-discography .splide__track {
    overflow: visible;
}

.singer-discography .splide__slide {
    padding: 0 8px;
}

.singer-discography .splide__slide:first-child {
    padding-left: 0;
}

.singer-discography .splide__slide:last-child {
    padding-right: 0;
}

/* スマホでのアルバムカード調整 */
@media (max-width: 767px) {
    .singer-discography .album-card {
        margin: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .album-card__jacket {
        width: 100%;
        height: 0;
        padding-top: 100%;
        /* 正方形を維持 */
        position: relative;
    }

    .album-card__jacket .album-card__img,
    .album-card__jacket .album-card__no-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .album-card__info {
        padding: 1rem;
    }

    .album-card__title {
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .album-card__type {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
        text-align: center;
    }

    .album-card__date {
        font-size: 0.8rem;
    }
}

/* スライダー矢印のカスタマイズ */
.singer-discography .splide__arrow {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.singer-discography .splide__arrow--prev {
    left: -10px;
}

.singer-discography .splide__arrow--next {
    right: -10px;
}

.singer-discography .splide__arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.singer-discography .splide__arrow svg {
    width: 16px;
    height: 16px;
    fill: #333;
}

/* ページネーション（非表示） */
.singer-discography .splide__pagination {
    display: none;
}

/* Album Cards */
.album-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.album-card__jacket {
    width: 100%;
    height: 0;
    padding-top: 100%;
    /* 正方形を維持 */
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.album-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.album-card:hover .album-card__img {
    transform: scale(1.05);
}

.album-card__no-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-card__no-image::after {
    content: "📀";
    font-size: 3rem;
    color: #adb5bd;
}

.album-card__info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.album-card__type {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--global-palette1, #3182CE);
    color: #fff;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.album-card__type--シングル {
    background: var(--global-palette11, #13612E);
    /* Singer 緑 */
}

.album-card__type--配信シングル {
    background: var(--global-palette12, #1159AF);
    /* Infoブルー */
}

.album-card__type--アルバム {
    background: var(--global-palette1, #3182CE);
    /* Brand Primary */
}

.album-card__type--ベスト {
    background: var(--global-palette13, #B82105);
    /* Dangerレッド */
}

.album-card__type--カバーアルバム {
    background: var(--global-palette14, #F7630C);
    /* SNS Orange */
}

.album-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--global-palette4, #2D3748);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    flex: 1;
}

.album-card__date {
    font-size: 0.9rem;
    color: #6c757d;
    color: var(--global-palette6, #718096);
    margin: 0;
}

.album-discography__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

/* ディスコグラフィーセクション全体 */
.singer-discography {
    margin: 3rem 0;
}

.singer-discography__heading {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--global-palette4, #2D3748);
    border-bottom: 3px solid var(--global-palette1, #3182CE);
    padding-bottom: 1rem;
}

.singer-discography__type {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: var(--global-palette1, #3182CE);
    border-left: 4px solid var(--global-palette1, #3182CE);
    padding-left: 1rem;
    background: var(--global-palette8, #F7FAFC);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
}

@media (max-width: 768px) {
    .discography-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .discography-info {
        padding: 0.75rem;
    }

    .discography-title {
        font-size: 0.9rem;
    }

    .discography-type {
        font-size: 0.8rem;
    }

    .works-list {
        gap: 8px;
    }

    .work-item {
        font-size: 0.85rem;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    .discography-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .discography-info {
        padding: 0.5rem;
    }

    .discography-title {
        font-size: 0.85rem;
    }

    .discography-type {
        font-size: 0.75rem;
        padding: 3px 6px;
    }

    .works-list {
        gap: 6px;
    }

    .work-item {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

@media (max-width: 768px) {
    .artist-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }

    .artist-card__content {
        padding: 1rem;
    }

    .artist-profile__title {
        font-size: 2rem;
    }

    .artist-profile__info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .artist-profile__info-value {
        text-align: left;
    }

    .artist-social__links {
        justify-content: center;
    }

    .artist-discography__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
}

/* Artist Single Layout */
.artist-single__main-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas:
        "photo sns"
        "info info"
        "media media"
        "announcements announcements";
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Mobile responsive styles for artist single layout */
@media (max-width: 768px) {
    .artist-single__main-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "sns"
            "info"
            "media"
            "announcements";
        gap: 1.5rem;
    }

    .artist-single__left-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .artist-single__image {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    .artist-single__image img {
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 200px;
        object-fit: contain;
        object-position: center;
        border-radius: 8px;
    }

    .artist-single__sns {
        width: 100%;
    }

    .artist-single__info {
        padding: 1rem;
    }

    .artist-single__media-box {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .artist-single__main-layout {
        gap: 1rem;
    }

    .artist-single__image img {
        max-width: 280px;
        height: auto;
        min-height: 180px;
        object-fit: contain;
        object-position: center;
        border-radius: 8px;
    }

    .artist-single__sns,
    .artist-single__info {
        padding: 0.75rem;
    }

    .artist-single__media-box {
        margin: 0 -10px;
        padding: 0 10px;
    }
}

.artist-single__left-column {
    grid-area: photo;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.artist-single__image {
    order: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.artist-single__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.artist-single__info {
    grid-area: info;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--artist-page-panel-border, var(--global-palette7, #e9ecef));
    background: var(--artist-page-panel-bg, var(--global-palette8, transparent));
}

.artist-info-item {
    display: flex;
    margin-bottom: 0.75rem;
}

.artist-info-item:last-child {
    margin-bottom: 0;
}

.artist-info-item--stacked {
    display: block;
}

.artist-info-label {
    font-weight: 600;
    min-width: 80px;
    color: var(--global-palette4, #333);
}

.artist-info-value {
    color: var(--global-palette6, #718096);
}

.artist-info-value--stacked {
    margin-top: 0.35rem;
    line-height: 1.8;
}

.artist-info-value--stacked p {
    margin: 0 0 0.5rem;
}

.artist-info-value--stacked p:last-child {
    margin-bottom: 0;
}

.artist-single__media-box {
    grid-area: media;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* SNS Links */
.artist-single__sns {
    grid-area: sns;
    padding: 1.5rem;
    border-radius: 8px;

    flex: 1;
    display: flex;
    flex-direction: column;
}

.artist-single__sns h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: var(--global-palette4, #2D3748);
}

.sns-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1;
    align-items: flex-start;
}

.sns-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 25px;
}

/* ===================================
   バナーウィジェット
   =================================== */

.banner-widget {
    margin-bottom: 1.5rem;
}

.banner-widget a {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.banner-widget a:hover {
    opacity: 0.85;
}

.banner-widget__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.banner-widget__text {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--global-palette4, #2D3748);
    text-align: center;
    line-height: 1.4;
}

/* サイドバー内のウィジェット間隔調整 */
.primary-sidebar .widget {
    margin-bottom: 2rem;
}

.primary-sidebar .widget:last-child {
    margin-bottom: 0;
}

.sns-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: var(--global-palette1, #3182CE);
    border-color: var(--global-palette1, #3182CE);
}

.sns-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.sns-label {
    font-weight: 600;
}

/* SNS Type Specific Colors */
.sns-link--twitter:hover {
    background: #1da1f2;
    color: white;
    border-color: #1da1f2;
}

.sns-link--instagram:hover {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
    color: white;
    border-color: #dd2a7b;
}

.sns-link--blog:hover {
    background: var(--color-sns-blog, #FF6B35);
    color: white;
    border-color: var(--color-sns-blog, #FF6B35);
}

.sns-link--fanclub:hover {
    background: var(--color-sns-fanclub, #6F42C1);
    color: white;
    border-color: var(--color-sns-fanclub, #6F42C1);
}

/* ===================================
   ページ全体の背景色調整（高詳細度で上書き）
   =================================== */

body.content-style-unboxed .site.content-bg,
body.content-style-unboxed .content-bg {
    background: var(--global-palette9, #FFFFFF) !important;
}

.single-singer,
.single-voice-actor,
.single-voice_actor {
    --artist-page-shell-bg: var(--artist-shell-bg, #111111);
    --artist-page-surface-bg: var(--global-palette9, #ffffff);
    --artist-page-panel-bg: var(--global-palette8, #F7FAFC);
    --artist-page-panel-border: var(--global-palette7, #e9ecef);
}

body.single-singer.content-style-unboxed .site.content-bg,
body.single-singer.content-style-unboxed .content-bg,
body.single-voice-actor.content-style-unboxed .site.content-bg,
body.single-voice-actor.content-style-unboxed .content-bg,
body.single-voice_actor.content-style-unboxed .site.content-bg,
body.single-voice_actor.content-style-unboxed .content-bg {
    background: var(--artist-page-shell-bg) !important;
}

.single-singer .artist-single,
.single-voice-actor .artist-single,
.single-voice_actor .artist-single {
    padding: clamp(24px, 4vw, 48px);
    border-radius: 20px;
    background: var(--artist-page-surface-bg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* ===================================
   トップページの余白リセット（ヘッダーべた付け用）
   =================================== */
.home #primary.content-area,
.home .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.home .content-container {
    padding-top: 0 !important;
}

/* ===================================
   Artist Page Fixed Navigation Bar
   =================================== */
.artist-fixed-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(28, 28, 30, 0.85);
    /* ダーク背景 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3);
    padding: env(safe-area-inset-bottom) 0;
    /* iPhoneのノッチ対応 */
}

.artist-fixed-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 70px;
}

.fixed-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    /* 白背景の丸いボタン */
    margin: 10px;
    /* ボタン間に隙間を作る */
    border-radius: 40px;
    border: none;
    color: var(--global-palette3, #1A202C);
    /* 文字色はダークに */
    font-family: var(--global-font-secondary, 'Outfit', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fixed-nav-btn:last-child {
    border-right: none;
}

.fixed-nav-btn__icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.fixed-nav-btn:hover {
    background: var(--global-palette1, #3182CE);
    /* ホバーでローズゴールドに */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.fixed-nav-btn:active {
    transform: translateY(0);
}

.fixed-nav-btn:hover .fixed-nav-btn__icon {
    transform: scale(1.2) translateY(-2px);
}

/* ページ最下部のボタンと被らないように余白を追加 */
.singular-singer .site-content,
.singular-voice-actor .site-content,
.singular-voice_actor .site-content {
    padding-bottom: 80px;
}

@media (max-width: 768px) {
    .artist-fixed-nav__inner {
        height: 64px;
    }

    .fixed-nav-btn__label {
        font-size: 10px;
    }
}

/* MP3 and Movies */
.artist-single__movies {
    display: none;
    /* ページ内からは非表示（モーダル移行したため） */
}

/* Movie Modal specific */
.movie-modal .mp3-modal__panel {
    max-width: 900px;
}

.movie-modal .movie-embed {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.movie-modal .movie-embed iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.movie-modal .movie-slide {
    padding: 0 10px;
}

.movie-modal .movie-title {
    margin-bottom: 15px;
    font-size: 18px;
    text-align: center;
}

.artist-single__mp3 h2,
.artist-single__mp3 h3,
.artist-single__movies h2,
.artist-single__movies h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: var(--global-palette4, #333);
    border-bottom: 2px solid var(--global-palette3, #1A202C);
    padding-bottom: 10px;
}

.mp3-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mp3-item {
    background: var(--artist-page-panel-bg, var(--global-palette8, transparent));
    border: 1px solid var(--artist-page-panel-border, var(--global-palette7, #e9ecef));
    border-radius: 14px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
    transition: all 0.3s ease;
}

.mp3-item:hover {
    border-color: var(--global-palette1, #3182CE);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.mp3-item__meta {
    min-width: 0;
}

.mp3-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--global-palette4, #333);
    margin: 0;
    padding: 0;
}

.mp3-player {
    width: 100%;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.mp3-description {
    font-size: 0.9rem;
    color: var(--global-palette6, #666);
    margin: 8px 0 0;
    padding: 0;
    line-height: 1.65;
}

.movie-embed {
    margin-top: 15px;
}

.movie-embed iframe {
    width: 100%;
    max-width: 560px;
    height: 315px;
    border-radius: 8px;
    border: none;
}

.movie-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.movie-link:hover {
    transform: scale(1.02);
}

.movie-thumbnail {
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.movie-placeholder {
    width: 560px;
    height: 315px;
    background: var(--global-palette7, #EDF2F7);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--global-palette6, #718096);
    font-size: 1.1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.movie-link:hover .movie-placeholder {
    background: #dee2e6;
}

/* Responsive for MP3 and Movie Areas */
@media (max-width: 768px) {

    .artist-single__mp3,
    .artist-single__movies {
        margin: 30px 0;
        padding: 20px;
    }

    .artist-single__mp3 h2,
    .artist-single__mp3 h3,
    .artist-single__movies h2,
    .artist-single__movies h3 {
        font-size: 1.3rem;
    }

    .mp3-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .mp3-title {
        font-size: 1rem;
    }

    .mp3-player {
        width: 100%;
    }

    .mp3-description {
        margin-top: 6px;
    }

    .mp3-title,
    .movie-title {
        font-size: 1.1rem;
    }

    .movie-embed iframe {
        height: 250px;
    }

    .movie-thumbnail {
        width: 100%;
    }

    .movie-placeholder {
        width: 100%;
        height: 250px;
    }
}

@media (max-width: 480px) {

    .artist-single__mp3,
    .artist-single__movies {
        margin: 20px 0;
        padding: 15px;
    }

    .mp3-item {
        padding: 14px;
        gap: 10px;
    }

    .mp3-title {
        font-size: 0.95rem;
    }

    .mp3-description {
        font-size: 0.85rem;
    }

    .mp3-title,
    .movie-title {
        font-size: 1rem;
    }

    .movie-embed iframe {
        height: 200px;
    }

    .movie-placeholder {
        height: 200px;
        font-size: 1rem;
    }
}

/* ===================================
   Kadence Content Spacing Integration
   =================================== */

/* Apply spacing to main content sections within artist single pages */
.single-singer .artist-single__content>*,
.single-voice-actor .artist-single__content>*,
.single-voice_actor .artist-single__content>* {
    margin-bottom: var(--global-content-spacing, 12rem);
}

.single-singer .artist-single__content>*:last-child,
.single-voice-actor .artist-single__content>*:last-child,
.single-voice_actor .artist-single__content>*:last-child {
    margin-bottom: 0;
}

/* ===================================
   Announcement
   =================================== */

.announcement-archive__header {
    margin-bottom: 30px;
}

.front-page-headlines {
    margin: 48px 0 64px;
}

.front-page-headlines__header {
    margin-bottom: 24px;
}

.front-page-headlines__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-info-border);
}

.front-page-headlines__item {
    border-bottom: 1px solid var(--color-info-border);
}

.front-page-headlines__link {
    display: block;
    padding: 18px 0;
    color: inherit;
    text-decoration: none;
}

.front-page-headlines__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.front-page-headlines__type {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--color-info-navy);
}

.front-page-headlines__type--announcement {
    background: #c84b31;
}

.front-page-headlines__date {
    color: var(--color-info-text-muted);
    font-size: 14px;
}

.front-page-headlines__title {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.6;
}

.front-page-headlines__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.front-page-headlines__actions a {
    color: var(--color-info-navy);
    font-weight: 700;
    text-decoration: none;
}

.front-page-headlines__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.front-page-headlines__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #d9e3ee;
    border-radius: 999px;
    background: #fff;
    color: var(--color-info-navy);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.front-page-headlines__filter.is-active,
.front-page-headlines__filter:hover,
.front-page-headlines__filter:focus-visible {
    background: var(--color-info-navy);
    border-color: var(--color-info-navy);
    color: #fff;
    outline: none;
}

.front-page-headlines__empty {
    color: var(--color-info-text-muted);
    margin: 16px 0 0;
}

.announcement-archive__lead {
    text-align: center;
    color: var(--color-info-text-muted);
    margin: -10px 0 25px;
}

.announcement-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}

.announcement-filter__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-info-bg-light);
    color: var(--color-info-navy);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.announcement-filter__link.is-active {
    background: var(--color-info-navy);
    color: #fff;
}

.announcement-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 30px 0;
}

.announcement-list--compact {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.announcement-card {
    background: var(--global-palette9, #fff);
    border: 1px solid var(--global-palette7, #f0edeb);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
}

.announcement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(181, 115, 107, 0.12);
    border-color: var(--global-palette1, #3182CE);
}

.announcement-card__inner {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.announcement-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #edf4fb 0%, #dfeaf8 100%);
    overflow: hidden;
}

.announcement-card__media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.3s ease;
}

.announcement-card__media:hover::after {
    background: rgba(255, 255, 255, 0);
}

.announcement-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.announcement-card__placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a7f95;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.announcement-card__status {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(176, 30, 45, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.announcement-card__content {
    padding: 18px;
}

.announcement-card__meta,
.announcement-single__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.announcement-card__type {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--color-info-bg-card);
    color: var(--color-info-navy-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.announcement-card__date,
.announcement-single__date {
    color: var(--color-info-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.announcement-card__title {
    margin: 0 0 12px;
    font-size: 1.15rem;
    line-height: 1.45;
    color: #203246;
}

.announcement-card__summary {
    margin: 0 0 14px;
    color: #44576b;
    line-height: 1.7;
}

.announcement-card__artists {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.announcement-card__artist,
.announcement-single__artist-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f4f7fa;
    color: #334a62;
    font-size: 12px;
    text-decoration: none;
}

.announcement-card__excerpt {
    color: #55697e;
    line-height: 1.7;
    font-size: 0.95rem;
}

.announcement-single {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 0 50px;
}

.announcement-single__header {
    margin-bottom: 28px;
}

.announcement-single__title {
    margin: 0 0 12px;
    font-size: 2.2rem;
    line-height: 1.3;
}

.announcement-single__summary {
    color: #506476;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.announcement-single__artists {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.announcement-single__thumbnail {
    margin-bottom: 30px;
}

.announcement-single__thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
    object-fit: cover;
    object-position: top;
}

.announcement-single__fallback-image {
    max-height: 520px;
}

.announcement-single__body {
    background: #fff;
    border: 1px solid #d9e3ee;
    border-radius: 18px;
    padding: 26px;
}

.announcement-single__details {
    display: grid;
    gap: 10px;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6edf5;
}

.announcement-single__detail {
    color: #42576c;
    line-height: 1.7;
}

.announcement-single__detail strong {
    display: inline-block;
    min-width: 90px;
    color: #203246;
    margin-right: 10px;
}

.announcement-single__content {
    color: #27384a;
    line-height: 1.9;
}

.announcement-single__cta {
    margin-top: 28px;
}

.announcement-single__cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--color-info-navy-dark);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.announcement-empty {
    text-align: center;
    color: #617285;
    margin: 40px 0;
}

.artist-single__announcements {
    grid-area: announcements;
    margin-top: 0;
    width: 100%;
    min-width: 0;
}

.artist-single__announcements h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--global-palette1, #3182CE);
    color: var(--global-palette4, #333);
    padding-bottom: 10px;
}

.artist-single__announcements-link {
    margin-top: 18px;
}

.artist-single__announcements-link a {
    color: var(--color-info-navy-dark);
    font-weight: 700;
    text-decoration: none;
}

.announcement-list--compact {
    grid-template-columns: 1fr;
    gap: 16px;
}

.announcement-list--compact .announcement-card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(39, 73, 109, 0.08);
    min-height: 220px;
}

.announcement-list--compact .announcement-card__inner {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
}

.announcement-list--compact .announcement-card__media {
    aspect-ratio: auto;
    min-height: 100%;
    height: 100%;
}

.announcement-list--compact .announcement-card__image {
    height: 100%;
}

.announcement-list--compact .announcement-card__placeholder {
    min-height: 100%;
    padding: 20px;
}

.announcement-list--compact .announcement-card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    padding: 16px 18px;
}

.announcement-list--compact .announcement-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.announcement-list--compact .announcement-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

.announcement-list--compact .announcement-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
}

.front-page-headlines__cards {
    margin-top: 20px;
}

/* 記事一覧のレスポンシブ設定 */
/* 小さい画面：1列 */
@media (max-width: 480px) {

    .announcement-list,
    .announcement-list--compact {
        grid-template-columns: 1fr;
    }

    .announcement-list--compact .announcement-card__inner {
        grid-template-columns: 1fr;
    }

    .announcement-list--compact .announcement-card__media {
        aspect-ratio: 16 / 9;
    }
}

/* 中間画面：2列 */
@media (min-width: 481px) and (max-width: 1024px) {
    .announcement-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .announcement-list--compact {
        grid-template-columns: repeat(2, 1fr);
    }

    .announcement-list--compact .announcement-card__inner {
        grid-template-columns: 1fr;
    }

    .announcement-list--compact .announcement-card__media {
        aspect-ratio: 16 / 9;
    }
}

/* 大きい画面：2列 */
@media (min-width: 1025px) {
    .announcement-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .announcement-list--compact {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ===================================
   MP3 モーダル
   =================================== */

/* --- トリガーボタン --- */
.artist-single__mp3-trigger {
    display: flex;
    align-items: center;
}

.mp3-open-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 4rem;
    background: var(--global-palette8, #F7FAFC);
    /* サーフェス背景（palette7はボーダー用） */
    color: var(--global-palette4, #2D3748);
    border: 1px solid var(--global-palette7, #EDF2F7);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mp3-open-btn:hover,
.mp3-open-btn:focus-visible {
    background: var(--global-palette7, #EDF2F7);
    border-color: var(--global-palette1, #3182CE);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(49, 130, 206, 0.2);
    outline: none;
}

.mp3-open-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s ease;


    background: white;
    color: black;
    border: 1px solid #ddd;
    margin: 20px auto;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);



}

.mp3-open-btn:hover .mp3-open-btn__icon {
    background: rgba(255, 255, 255, 0.3);
}

.mp3-open-btn__label {
    flex: 1;
}

.mp3-open-btn__count {
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* --- モーダル本体 --- */
.mp3-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mp3-modal[hidden] {
    display: none;
}

.mp3-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: pointer;
}

.mp3-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--artist-page-surface-bg, #fff);
    border-radius: 20px;
    width: 100%;
    max-width: 540px;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    animation: mp3ModalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes mp3ModalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mp3-modal.is-closing .mp3-modal__panel {
    animation: mp3ModalOut 0.18s ease both;
}

@keyframes mp3ModalOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
}

/* --- モーダルヘッダー --- */
.mp3-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--artist-page-panel-border, #e9ecef);
    flex-shrink: 0;
}

.mp3-modal__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--global-palette4, #333);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp3-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--artist-page-panel-bg, #f8f9fa);
    color: var(--global-palette4, #555);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.mp3-modal__close:hover,
.mp3-modal__close:focus-visible {
    background: var(--global-palette7, #EDF2F7);
    color: #000;
    outline: none;
}

/* --- モーダルボディ（スクロール） --- */
.mp3-modal__body {
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    overscroll-behavior: contain;
}

/* モーダル内 mp3-list はgapをやや狭く */
.mp3-modal__body .mp3-list {
    gap: 12px;
}

.mp3-modal__body .mp3-item {
    border-radius: 12px;
    padding: 14px 16px;
}

/* --- レスポンシブ --- */
@media (max-width: 600px) {
    .mp3-modal__panel {
        max-height: 88dvh;
        border-radius: 16px;
    }

    .mp3-open-btn {
        width: 100%;
        justify-content: center;
    }

    .mp3-modal__header {
        padding: 1rem 1.25rem 0.875rem;
    }

    .mp3-modal__body {
        padding: 1rem 1.25rem 1.25rem;
    }
}

/* ===================================
   作品一覧（カード型UI）
   =================================== */
.work-card {
    padding: 22px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    transition: 0.3s;
}

.work-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.work-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.1rem;
    color: var(--global-palette4, #2D3748);
    border-bottom: 2px solid var(--global-palette7, #EDF2F7);
    padding-bottom: 8px;
}

.work-card p {
    margin: 0;
    line-height: 1.6;
    color: var(--global-palette4, #555);
}




/* ========================================
   Contact Form 7 Modern Styling
   ======================================== */
.wpcf7 form {
    --cf7-bg: #f6f9fc;
    --cf7-card-bg: #ffffff;
    --cf7-border: #d9e3ef;
    --cf7-border-strong: #b4c7dd;
    --cf7-text: #1e2f42;
    --cf7-muted: #5f7288;
    --cf7-primary: #1f4d78;
    --cf7-primary-dark: #163a5e;
    --cf7-focus-ring: rgba(31, 77, 120, 0.18);
    --cf7-danger: #ca2d2d;
    max-width: 980px;
    margin: 0 auto;
    padding: 16px;
    color: var(--cf7-text);
}

.wpcf7 form .cf7-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--cf7-bg) 100%);
    border: 1px solid var(--cf7-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: 0 10px 28px rgba(18, 45, 73, 0.08);
}

.wpcf7 form .cf7-section-title {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cf7-border);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cf7-primary-dark);
}

.wpcf7 form .cf7-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wpcf7 form .cf7-field-group {
    margin-bottom: 16px;
}

.wpcf7 form .cf7-field-group:last-child {
    margin-bottom: 0;
}

.wpcf7 form .cf7-field-group>label {
    display: inline-block;
    margin-bottom: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cf7-text);
}

.wpcf7 form .cf7-required {
    color: var(--cf7-danger);
    font-weight: 700;
}

.wpcf7 form .cf7-input,
.wpcf7 form .cf7-select,
.wpcf7 form textarea,
.wpcf7 form input[type="date"] {
    width: 100%;
    appearance: none;
    border: 1px solid var(--cf7-border-strong);
    border-radius: 10px;
    background: var(--cf7-card-bg);
    color: var(--cf7-text);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wpcf7 form .cf7-input,
.wpcf7 form .cf7-select,
.wpcf7 form input[type="date"] {
    height: 48px;
    padding: 0 14px;
}

.wpcf7 form textarea {
    min-height: 170px;
    resize: vertical;
    padding: 12px 14px;
}

.wpcf7 form .cf7-select {
    background-image:
        linear-gradient(45deg, transparent 50%, #6a7c92 50%),
        linear-gradient(135deg, #6a7c92 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.wpcf7 form .cf7-input::placeholder,
.wpcf7 form textarea::placeholder {
    color: #91a2b5;
}

.wpcf7 form .cf7-input:focus,
.wpcf7 form .cf7-select:focus,
.wpcf7 form textarea:focus,
.wpcf7 form input[type="date"]:focus {
    outline: none;
    border-color: var(--cf7-primary);
    box-shadow: 0 0 0 4px var(--cf7-focus-ring);
    background-color: #ffffff;
}

.wpcf7 form .cf7-file {
    width: 100%;
    border: 1px dashed var(--cf7-border-strong);
    border-radius: 10px;
    padding: 12px;
    background: #f9fbfd;
}

.wpcf7 form .cf7-note {
    margin: 8px 0 0;
    font-size: 0.86rem;
    color: var(--cf7-muted);
}

.wpcf7 form .cf7-privacy-section {
    background: #f1f6fb;
}

.wpcf7 form .cf7-privacy-section .wpcf7-list-item {
    margin: 0;
}

.wpcf7 form .cf7-privacy-section a {
    color: var(--cf7-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wpcf7 form .cf7-submit-wrap {
    text-align: center;
    margin-top: 24px;
}

.wpcf7 form .cf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #245e95 0%, #163a5e 100%);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(22, 58, 94, 0.28);
    transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.wpcf7 form .cf7-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(22, 58, 94, 0.32);
    filter: saturate(1.08);
}

.wpcf7 form .cf7-submit:active {
    transform: translateY(0);
}

.wpcf7 form .cf7-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--cf7-focus-ring), 0 12px 26px rgba(22, 58, 94, 0.28);
}

.wpcf7 form .wpcf7-spinner {
    margin-left: 10px;
}

.wpcf7 form .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 0.84rem;
    color: var(--cf7-danger);
}

.wpcf7 form .wpcf7-not-valid {
    border-color: #d96060;
    box-shadow: 0 0 0 4px rgba(217, 96, 96, 0.14);
}

.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.92rem;
}

@media (max-width: 768px) {
    .wpcf7 form {
        padding: 10px;
    }

    .wpcf7 form .cf7-section {
        padding: 18px 14px;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .wpcf7 form .cf7-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .wpcf7 form .cf7-submit {
        width: 100%;
        min-width: 0;
    }
}

/* ========================================
   モバイルサイドバーオフキャンバス
   ======================================== */

/* サイドバートグルボタン（左下固定） */
.mobile-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #fff;
    border: 2px solid var(--global-palette7, #e9ecef);
    border-radius: 50%;
    cursor: pointer;
    padding: 12px;
    color: var(--global-palette4, #333);
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mobile-sidebar-toggle:hover {
    color: var(--global-palette1, #3182CE);
    border-color: var(--global-palette1, #3182CE);
    transform: translateY(-2px);
}

.mobile-sidebar-toggle svg {
    display: block;
}

/* オフキャンバスコンテナ */
.mobile-sidebar-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-sidebar-offcanvas.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

/* オーバーレイ */
.mobile-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-offcanvas.is-open .mobile-sidebar-overlay {
    opacity: 1;
}

/* サイドバーコンテンツ（右からスライドイン） */
.mobile-sidebar-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-sidebar-offcanvas.is-open .mobile-sidebar-content {
    transform: translateX(0);
}

/* 閉じるボタン */
.mobile-sidebar-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--global-palette4, #2D3748);
    transition: color 0.3s ease;
    z-index: 10;
}

.mobile-sidebar-close:hover {
    color: var(--global-palette1, #3182CE);
}

.mobile-sidebar-close svg {
    display: block;
}

/* サイドバー内部コンテンツ */
.mobile-sidebar-inner {
    padding: 60px 20px 20px;
}

/* サイドバー内のウィジェットスタイル調整 */
.mobile-sidebar-inner .widget {
    margin-bottom: 24px;
}

.mobile-sidebar-inner .widget:last-child {
    margin-bottom: 0;
}

.mobile-sidebar-inner .widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--global-palette4, #2D3748);
}

.mobile-sidebar-inner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-sidebar-inner li {
    margin-bottom: 8px;
}

.mobile-sidebar-inner a {
    color: var(--global-palette4, #2D3748);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-sidebar-inner a:hover {
    color: var(--global-palette1, #3182CE);
}

/* バナーウィジェット調整 */
.mobile-sidebar-inner .banner-widget {
    margin-bottom: 16px;
}

.mobile-sidebar-inner .banner-widget img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* レスポンシブ：1024px以下でモバイルサイドバー表示 */
@media (max-width: 1024px) {
    .mobile-sidebar-toggle {
        display: block;
    }

    /* サイドバーを確実に非表示（複数のセレクタで対応） */
    .site-main .widget-area,
    .site-main aside,
    #secondary,
    .sidebar-primary,
    .content-area~aside {
        display: none !important;
    }

    .site-main .content-area,
    .content-area {
        width: 100% !important;
        max-width: none !important;
        flex: 1 !important;
    }

    /* Kadenceレイアウト調整 */
    .entry-content-wrap,
    .site-container .content-wrapper {
        flex-direction: column !important;
    }
}

@media (min-width: 1025px) {
    .mobile-sidebar-toggle {
        display: none;
    }

    .mobile-sidebar-offcanvas {
        display: none;
    }
}

/* ========================================
   Kadenceモバイルメニューの色設定上書き
   ======================================== */
.popup-drawer .drawer-inner {
    background: var(--global-palette4, #090c10) !important;
    color: var(--global-palette9, #fff) !important;
}

/* ========================================
   アーティストバナー（カード型横方向配置）
   ======================================== */

.artist-single__banners {
    margin: 2rem 0;
}

.artist-single__banners h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: var(--global-palette4, #2D3748);
    border-bottom: 2px solid var(--global-palette1, #3182CE);
    padding-bottom: 0.5rem;
}

.banner-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.banner-carousel::-webkit-scrollbar {
    height: 6px;
}

.banner-carousel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.banner-carousel::-webkit-scrollbar-thumb {
    background: var(--global-palette1, #3182CE);
    border-radius: 3px;
}

.banner-item {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.banner-item__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.banner-item__image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--global-palette8, #F7FAFC);
}

.banner-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.banner-item:hover .banner-item__image img {
    transform: scale(1.05);
}

.banner-item__content {
    padding: 1rem;
}

.banner-item__text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--global-palette4, #2D3748);
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .artist-single__banners {
        margin: 1.5rem 0;
    }

    .artist-single__banners h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .banner-carousel {
        gap: 1rem;
        padding: 0.5rem;
    }

    .banner-item {
        width: 240px;
    }

    .banner-item__image {
        height: 140px;
    }

    .banner-item__content {
        padding: 0.75rem;
    }

    .banner-item__text {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .banner-item {
        width: 200px;
    }

    .banner-item__image {
        height: 120px;
    }

    .banner-item__content {
        padding: 0.5rem;
    }

    .banner-item__text {
        font-size: 0.8rem;
    }
}





/* ---- 会社概要ページ ---- */
.company-profile {
    max-width: 700px;
    margin: 2rem auto;
    font-size: 15px;
    line-height: 1.7;
}

.co-section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 1rem;
}

.co-table {
    width: 100%;
    border-collapse: collapse;
}

.co-table tr {
    border-bottom: 1px solid #eee;
}

.co-table tr:first-child {
    border-top: 1px solid #eee;
}

.co-table th {
    width: 9rem;
    padding: .65rem 1rem .65rem 0;
    font-weight: 600;
    font-size: 13px;
    color: #888;
    vertical-align: top;
    white-space: nowrap;
}

.co-table td {
    padding: .65rem 0;
    font-size: 15px;
}

.co-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 2rem 0;
}

.co-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.co-items li {
    padding: .5rem 0;
    font-size: 15px;
    border-bottom: 1px solid #eee;
}

.co-items li:last-child {
    border-bottom: none;
}

.co-map {
    margin-top: 2rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}

/* ===================================
   Front Page Artist Sections
   =================================== */
.front-page-artists {
    margin-top: 100px;
    margin-bottom: 100px;
}

.front-page-artists__header {
    margin-bottom: 60px;
    text-align: center;
}

.front-page-artists__header .page-title {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
    font-family: 'Outfit', sans-serif;
}

.front-page-artists__header .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--global-palette1, #3182CE);
}

.front-page-artists__actions {
    margin-top: 60px;
    text-align: center;
}

.front-page-artists__actions a {
    display: inline-block;
    padding: 16px 60px;
    background: var(--global-palette3, #1A202C);
    color: #ffffff !important;
    border-radius: 40px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.front-page-artists__actions a:hover {
    background: var(--global-palette1, #3182CE);
    color: #ffffff !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(181, 115, 107, 0.35);
}

@media (max-width: 768px) {
    .front-page-artists {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .front-page-artists__header .page-title {
        font-size: 1.8rem;
    }
}

/* ===================================
   Compressed Artist Grid (Top Page)
   =================================== */
.front-page-artists.is-compressed {
    margin-top: 0px;
    margin-bottom: 60px;
}

.front-page-artists.is-compressed .front-page-artists__header {
    margin-bottom: 30px;
}

.front-page-artists.is-compressed .artist-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.front-page-artists.is-compressed .artist-card {
    border-radius: 8px;
}

.front-page-artists.is-compressed .artist-card__title {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.front-page-artists.is-compressed .artist-card__kana {
    font-size: 0.75rem;
}

.front-page-artists.is-compressed .artist-card__content {
    padding: 12px 10px;
}

.front-page-artists.is-compressed .front-page-artists__actions {
    margin-top: 30px;
}

.front-page-artists.is-compressed .front-page-artists__actions a {
    padding: 10px 30px;
    font-size: 11px;
}

/* ===================================
   Information (Headlines) Header Style
   =================================== */
.front-page-headlines__header {
    text-align: center;
    margin-bottom: 50px;
    border-bottom: none;
}

.front-page-headlines__header .page-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: var(--global-palette3, #1A202C);
}

.front-page-headlines__header .page-subtitle {
    display: block;
    font-size: 1rem;
    color: var(--global-palette1, #3182CE);
    font-weight: 500;
    letter-spacing: 0.3em;
}

@media (max-width: 768px) {
    .front-page-artists.is-compressed .artist-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Mobile: 3 columns */
        gap: 12px;
    }

    .front-page-headlines__header .page-title {
        font-size: 2rem;
    }
}

/* ===================================
   Editorial Artist Grid Style (Title Card)
   =================================== */
.front-page-artists--editorial {
    margin-top: 20px;
    margin-bottom: 20px;
}

.artist-grid__header-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.header-card__inner {
    text-align: center;
    width: 100%;
}

.header-card__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--global-palette1, #3182CE);
    /* ローズゴールド */
    margin-bottom: 15px;
    line-height: 1;
}

.header-card__link {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--global-palette3, #1A202C);
    text-decoration: none;
    padding: 6px 16px;
    border: 1px solid var(--global-palette3, #1A202C);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.header-card__link:hover {
    background: var(--global-palette3, #1A202C);
    color: #ffffff;
}

@media (max-width: 768px) {
    .front-page-artists--editorial {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .artist-grid__header-card {
        padding: 10px;
        grid-column: span 3;
        /* Mobile: Title spans across 3 columns to be clear */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        margin-bottom: 10px;
    }

    .header-card__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-card__title {
        font-size: 1.2rem;
        margin-bottom: 0;
    }
}

/* ===================================
   Artist Card Overlay (Maximum Compression)
   =================================== */
.artist-card--overlay {
    background: #000;
    aspect-ratio: 3 / 4;
}

.artist-card--overlay .artist-card__inner {
    height: 100%;
}

.artist-card--overlay .artist-card__link {
    display: block;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.artist-card--overlay .artist-card__thumbnail {
    height: 100%;
}

.artist-card--overlay .artist-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.artist-card--overlay:hover .artist-card__thumbnail img {
    transform: scale(1.1);
}

.artist-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    pointer-events: none;
}

.artist-card__info {
    text-align: center;
}

.artist-card__name {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.artist-card__kana {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.65rem;
    font-weight: 500;
}

/* タイトルカードもオーバーレイ形式に合わせて調整 */
.front-page-artists--editorial .artist-grid__header-card {
    aspect-ratio: 3 / 4;
    background: var(--global-palette8, #f8f8f8);
    border-radius: 8px;
}

.front-page-artists--editorial.is-compressed .artist-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

@media (max-width: 768px) {
    .front-page-artists--editorial.is-compressed .artist-grid {
        grid-template-columns: repeat(4, 1fr);
        /* Mobile: 4 columns for max density */
        gap: 6px;
    }

    .artist-card__name {
        font-size: 0.75rem;
    }

    .artist-card__kana {
        display: none;
        /* Mobile is too small for kana */
    }

    .front-page-artists--editorial .artist-grid__header-card {
        grid-column: span 4;
        aspect-ratio: auto;
        height: 50px;
    }
}

/* ===================================
   Square Artist Cards (Top Page)
   =================================== */
.artist-card--overlay {
    aspect-ratio: 1 / 1;
    /* 正方形に変更 */
}

.artist-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.artist-section-header__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--global-palette1, #3182CE);
    line-height: 1;
    margin: 0;
}

.artist-section-header__link {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--global-palette5, #666);
    text-decoration: none;
    transition: color 0.3s ease;
}

.artist-section-header__link:hover {
    color: var(--global-palette1, #3182CE);
}

@media (max-width: 768px) {
    .artist-section-header {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .artist-section-header__title {
        font-size: 1rem;
    }

    .front-page-artists--compact.is-compressed .artist-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
}


/* ===================================
   Unified Studio Texture Style
   =================================== */
/* サイト全体にノイズを適用 */
body {
    background-color: var(--global-palette10, #FAF8F5) !important;
    /* Warm Surface (palette10) */
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.05;
    z-index: 9999;
    /* すべての上にノイズを重ねて質感を統合 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* サイト全体を包むラッパーに対して、左右のソフトな影を付与（独立感を解消） */
#page {
    background: transparent;
    max-width: 1300px;
    /* 少し広めに設定 */
    margin: 0 auto;
    box-shadow:
        -20px 0 60px -20px rgba(0, 0, 0, 0.08),
        20px 0 60px -20px rgba(0, 0, 0, 0.08);
}

/* ヘッダーとフッターの幅を調整して統合 */
.site-header,
.site-footer {
    width: 100%;
}

/* ===================================
   Archive Page Grid Styles (Refined Size)
   =================================== */
.artist-grid--archive {
    display: grid !important;
    /* 一覧ページでは一人ひとりを大きく見せるために minmax を 260px に拡大 */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 30px !important;
    margin: 40px 0 !important;
}

@media (max-width: 768px) {
    .artist-grid--archive {
        /* スマホでも「しっかり」見せるために 2列 に変更 */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* 一覧ページでもカードが正方形になるように強制 */
.artist-grid--archive .artist-card--overlay {
    aspect-ratio: 1 / 1 !important;
}

/* ============================================================
   [統合済み] Modern & Glamorous Full Identity
   → 重複削除: body/body::before/#page は上の「Unified Studio Texture」に統合済み
   ============================================================ */

/* トップページのみ全周に縁を追加（角丸） */
.home .site-container {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
    padding: 20px 15px !important;
}

/* 2. Modern Header Dropdowns (Glassmorphism) */
.header-navigation .sub-menu {
    border-radius: 12px !important;
    overflow: hidden;
    margin-top: 0 !important;
    padding-top: 12px !important;
    /* Bridge padding */
    background: transparent !important;
}

.header-navigation .sub-menu::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 28, 30, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.header-navigation .sub-menu li a {
    padding: 12px 24px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

.header-navigation .sub-menu li a:hover {
    background: rgba(181, 115, 107, 0.15) !important;
    color: var(--global-palette1, #3182CE) !important;
    padding-left: 28px !important;
}

/* 3. Glamorous Artist Cards (Overlay + Frame + Glow) */
.artist-card--overlay {
    padding: 6px;
    /* White frame border */
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.artist-card--overlay .artist-card__link {
    border-radius: 6px;
}

.artist-card--overlay .artist-card__link::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 2;
    border-radius: 4px;
    transition: all 0.5s ease;
}

.artist-card--overlay:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 25px rgba(181, 115, 107, 0.4);
}

/* 4. Archive Specific Grid (Larger Size) */
.artist-grid--archive {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 40px !important;
    margin: 60px 0 !important;
}

@media (max-width: 768px) {
    .artist-grid--archive {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* ===================================
   Mobile Refinements (Compression & Border)
   =================================== */
@media (max-width: 768px) {

    /* 1. 白枠のスリム化 */
    .artist-card--overlay {
        padding: 4px !important;
        /* スマホでは細めの枠にして写真を大きく見せる */
    }

    /* 2. カード内のインラインフレームも微調整 */
    .artist-card--overlay .artist-card__link::after {
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
    }

    /* 3. フロントページのグリッド密度を3カラムに緩和（一人を大きく） */
    .front-page-artists--editorial.is-compressed .artist-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* 4. アーカイブページのグリッドも3カラムで見やすく（2列だと間延びする場合のバランス） */
    .artist-grid--archive {
        grid-template-columns: repeat(2, 1fr) !important;
        /* アーカイブはさらに大きく2列を維持 */
        gap: 12px !important;
    }

    /* 5. 名前オーバーレイのサイズ調整 */
    .artist-card__name {
        font-size: 0.8rem;
    }
}

/* トップページのアーティスト一覧（スマホ）: 3カラムに固定 */
@media (max-width: 768px) {

    /* フロントページの全てのアーティストセクションに対して */
    .front-page-artists .artist-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin: 20px 0 !important;
    }

    /* 1行目が見出しカード（editorial）の場合も3列幅に合わせる */
    .front-page-artists--editorial .artist-grid__header-card {
        grid-column: span 3 !important;
        height: auto !important;
        padding: 15px 0 !important;
    }
}