/* 基本リセット */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #ffffff;
    color: #000000;
    margin: 0;
    padding: 0;
    overflow: hidden; /* PCでは全体スクロール禁止 */
}

a { color: #000000; text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; padding: 0; margin: 0; }

/* 左右分割レイアウト */
.split-layout {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* --- 左サイドバー（固定） --- */
.sidebar {
    width: 250px;
    height: 100%;
    border-right: 1px solid #000000;
    background-color: #fff;
    flex-shrink: 0;
    overflow-y: auto;
    z-index: 10;
}

.sidebar-inner {
    padding: 40px 30px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ロゴのサイズ調整 (小さく) */
.logo { 
    margin-bottom: 40px; 
    text-align: left; /* PCでは左揃え */
}
.logo img {
    height: 35px; /* ここでサイズ変更: 35px */
    width: auto;
    display: block;
}

/* ナビゲーション */
.nav-main li { margin-bottom: 10px; }
.nav-main a { 
    font-size: 1.0em; 
    font-weight: normal; 
    display: block; 
    word-break: break-word; /* 長いテキストを折り返し */
    line-height: 1.4;
}
.nav-main a.active { font-weight: bold; }
.sidebar-footer { 
    font-size: 0.7em; 
    color: #666; 
    margin-top: auto;
    padding-top: 40px;
}

.sns-links {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column; /* 縦に一列に配置 */
    gap: 10px; /* リンク間の間隔 */
}

.sns-links a {
    display: block; /* ブロック要素にして縦に並べる */
    margin-right: 0; /* 横方向のマージンを削除 */
    color: #000000;
    text-decoration: none;
    font-size: 0.9em;
}

.sns-links a:hover {
    text-decoration: underline;
}

.sns-links a:last-child {
    margin-right: 0;
}

/* --- 右メインコンテンツ --- */
.main-content {
    flex-grow: 1;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden; /* 横スクロールを防ぐ */
    /* 右端にpaddingを入れないことで、hrが右端まで届くようにする */
    /* padding-topを115pxに設定して、SORTのベースラインを左メニューの"info"に揃える（40px sidebar padding + 35px logo height + 40px logo margin） */
    padding: 45px 0 40px 60px; 
    box-sizing: border-box;
    transition: opacity 0.2s ease-in-out;
}

.content-wrapper { 
    width: 100%; 
}

/* ページ見出しのベースラインをロゴの底に揃える（.controls内のh2に移動したため、このスタイルは使用されない） */
.content-wrapper > h2 {
    margin-top: -40px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
    padding-top: 0;
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
}

/* コンテンツ内部のパディングで余白を作る */
.controls, .list-item, .detail-content, .page-title, .text-block {
    padding-right: 60px; /* ここで右の余白を確保 */
}

/* profileページのテキストブロック */
.text-block {
    padding-right: 60px;
    line-height: 1.8;
}

.text-block p {
    text-align: left;
    word-spacing: 0;
    letter-spacing: 0;
    text-justify: none;
    font-size: 0.9em;
}

/* FILTER */
.controls { 
    margin-bottom: 20px; 
    margin-top: 0; /* FILTERのベースラインを左メニューの"info"に揃える（main-contentのpadding-topで調整済み） */
    display: flex;
    gap: 40px;
    align-items: baseline;
}

.controls > h2 {
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
    font-size: 2rem; /* PC表示用のデフォルトサイズ */
    font-weight: 900;
}
.filter { 
    font-size: 0.8em; 
    margin-bottom: 10px; 
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-wrap: wrap;
    line-height: 1.4; /* 左メニューの"info"と同じline-heightに揃える */
}
.label { 
    font-weight: bold; 
    margin-right: 10px; 
    flex: 0 0 60px;
    min-width: 60px;
}
/* JS用のクラススタイル */
.sort-option, .filter-option { 
    cursor: pointer; 
    color: #888; 
    margin-right: 0;
    text-decoration: none;
}
.sort-option.active, .filter-option.active { text-decoration: underline; color: #000; }
.filter-option:hover {
    text-decoration: underline;
}
.separator { 
    color: #000; 
    margin-left: 0;
    margin-right: 5px;
    padding: 0;
    display: inline;
}

/* リスト区切り線 (画面右端まで伸ばす) */
hr {
    border: none;
    border-top: 1px solid #000000;
    margin: 0;
    width: 100%;
}
.separator-top { margin-bottom: 0; }
.separator-bottom { margin-top: 20px; }

/* セクションラベル（PICK UP/NEXT LIVE） */
.section-label {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    font-size: 0.7em;
    font-weight: normal;
    padding: 4px 8px;
    margin: 0 0 15px 0;
    letter-spacing: 0.05em;
}

/* セクションラベルの上下マージン調整（hrやwork-listの後にある場合） */
hr + .section-label,
.work-list + .section-label {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* リストアイテム */
.list-item {
    padding: 15px 0 15px 0;
    padding-right: 60px; /* 右余白 */
    transition: background-color 0.2s;
}
.list-item:hover { background-color: #f9f9f9; }

/* profileページのメンバー表示用（クリック不可） */
.profile .list-item {
    cursor: default;
}
.profile .list-item:hover {
    background-color: transparent;
}

/* profileページの画像コンテナ */
.profile-image-container {
    flex: 0 0 auto;
    margin-right: 60px; /* PC表示で右側にマージンを追加 */
    max-width: 300px; /* PC表示で画像の最大幅を制限（はみ出し防止） */
    box-sizing: border-box;
}

.profile-image-container img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}

/* profileページのメンバー表示レイアウト */
.profile .item-row {
    align-items: center;
}

.profile .item-title {
    flex: 0 1 auto;
    min-width: 180px;
    max-width: 250px;
}

.profile .item-meta {
    flex: 1 1 auto;
    min-width: 120px;
}

.profile .item-links {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 140px;
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95em;
    gap: 30px;
    flex-wrap: nowrap;
}

.item-title { 
    flex: 1 1 auto; 
    font-weight: bold; 
    min-width: 0; 
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0;
}

.new-flag {
    font-size: 0.7em;
    font-weight: normal;
    color: #666;
    margin-left: 8px;
    white-space: nowrap;
}
.item-meta { 
    flex: 0 1 auto; 
    color: #555; 
    font-size: 0.8em; 
    min-width: 100px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
}
.item-category {
    flex: 0 0 auto;
    color: #555;
    font-size: 0.9em;
    min-width: 100px;
    white-space: nowrap;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
}
.item-year { 
    flex: 0 0 auto; 
    text-align: left; 
    font-size: 0.85em;
    font-variant-numeric: tabular-nums; 
    font-feature-settings: "tnum"; 
    letter-spacing: 0; 
    box-sizing: border-box;
    white-space: nowrap;
    margin-right: 0;
    margin-left: 20px; /* 日付を右に移動 */
    min-width: 100px;
}

/* LIVEページ専用スタイル */
.work-list .item-date {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0;
    white-space: nowrap;
    min-width: 110px;
    margin-right: 0;
}

.work-list .item-title {
    flex: 1 1 auto;
    font-weight: bold;
    min-width: 200px;
    margin-right: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    flex-shrink: 1;
}

/* PODCASTページ専用スタイル（PC表示） */
@media (min-width: 769px) {
    /* PODCASTページのタイトルを1行に収める */
    #work-list .item-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* VIDEOページのタイトル内の改行を非表示（PC表示） */
    #work-list .item-title br {
        display: none !important;
    }
}

.work-list .item-guests {
    flex: 0 1 auto;
    color: #777;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 200px;
    margin-right: 0;
}

.work-list .item-venue {
    flex: 0 0 auto;
    color: #555;
    font-size: 0.9em;
    white-space: nowrap;
    min-width: 150px;
    margin-right: 0;
}

.work-list .item-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0;
    white-space: nowrap;
    min-width: 180px;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
}
.item-links { 
    flex: 0 0 auto; 
    text-align: left; 
    display: flex; 
    gap: 10px; 
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-width: 100px;
    margin-left: 0;
}
.item-link { 
    flex: 0 0 auto;
    font-size: 0.8em; 
    text-decoration: underline; 
    white-space: nowrap; 
    text-align: left;
    min-width: 80px;
}

/* INFO、DISCOGRAPHY、VIDEOページでitem-linkが直接item-rowの子要素の場合 */
.item-row > .item-link {
    flex: 0 0 auto;
    min-width: 100px;
    margin-left: 0;
}

/* Contact Form Styles */
.contact-form {
    padding: 40px 0;
    padding-right: 60px; /* 右端とのマージン */
    max-width: 600px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.95em;
}

.form-group .required {
    color: #ff0000;
}

.form-group input[type="text"],
.form-group input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 1em;
    box-sizing: border-box;
    font-family: inherit;
}

.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 1em;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.form-submit {
    margin-top: 30px;
}

.form-submit button {
    padding: 12px 40px;
    background-color: #000;
    color: #fff;
    border: none;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
}

.form-submit button:hover {
    background-color: #333;
}

.form-message {
    padding: 20px;
    margin-bottom: 30px;
    border-left: 4px solid;
}

.form-message.success {
    background-color: #f0f0f0;
    border-left-color: #000;
}

.form-message.success p {
    margin: 0;
    color: #000;
}

.form-message.error {
    background-color: #ffe0e0;
    border-left-color: #ff0000;
}

.form-message.error p {
    margin: 0;
    color: #ff0000;
}

/* 詳細エリア */
.detail-content {
    display: none;
    padding: 20px 0 20px 0;
    padding-right: 60px; /* 右余白 */
    margin-left: 0; 
    margin-top: 10px;
    font-size: 0.9em;
    line-height: 1.8;
}
.detail-content.active { display: block; }

.detail-content-inner {
    position: relative;
}

/* 詳細エリア内の画像（タイトルと本文の間、左揃え） */
.detail-image {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 20px;
}

/* フライヤー画像 */
.flyer-image {
    width: 100%;
    max-width: 400px;
    object-fit: cover;
    display: block;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 25px;
    border-radius: 0;
}

/* アルバムジャケット画像（詳細エリア内） */
.album-jacket {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 20px;
    border-radius: 0;
}

/* YouTube埋め込みプレーヤー */
.youtube-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    height: 0;
    margin: 20px 0;
    overflow: hidden;
    box-sizing: border-box;
}

.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* タブレット対応 */
@media (max-width: 1024px) and (min-width: 769px) {
    .sidebar {
        width: 220px; /* タブレットでは少し狭く */
    }
    
    .sidebar-inner {
        padding: 35px 25px;
    }
    
    .main-content {
        /* padding-topを115pxに設定して、SORTのベースラインを左メニューの"info"に揃える（40px sidebar padding + 35px logo height + 40px logo margin） */
        padding: 115px 0 35px 50px;
    }
    
    .controls {
        margin-top: 0; /* SORTのベースラインを左メニューの"info"に揃える（main-contentのpadding-topで調整済み） */
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 30px;
        font-size: 1.8rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .content-wrapper > h2 {
        margin-top: -40px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
        padding-top: 0;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 30px;
        font-size: 1.8rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .controls, .list-item, .detail-content, .page-title, .text-block {
        padding-right: 50px;
    }
    
    /* タブレット表示での画像位置調整 */
    .detail-image {
        margin-right: 0;
        margin-left: 0;
    }
    
    /* フライヤー画像（タブレット表示：4:5のアスペクト比を維持） */
    .flyer-image {
        max-width: 400px;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 25px;
    }
    
    /* アルバムジャケット画像（タブレット表示） */
    .album-jacket {
        max-width: 400px;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 25px;
    }
    
    /* タブレット表示でのPROFILE画像のマージン調整 */
    .profile-image-container {
        margin-right: 50px;
        max-width: 280px; /* タブレット表示で画像の最大幅を制限（はみ出し防止） */
        box-sizing: border-box;
    }
    
    .item-row {
        gap: 25px;
        justify-content: flex-start;
    }
    
    .item-title {
        flex: 1 1 auto;
        max-width: none;
        margin-right: 0;
    }
    
    .item-meta {
        flex: 0 0 auto;
        min-width: 120px;
        margin-right: 0;
        margin-left: 0;
    }
    
    .item-category {
        flex: 0 0 auto;
        min-width: 100px;
        margin-right: 0;
        margin-left: 0;
    }
    
    .item-year {
        flex: 0 0 auto;
        min-width: 100px;
        margin-right: 0;
        margin-left: 0;
    }
    
    .item-links {
        flex: 0 0 auto;
        min-width: 100px;
        margin-left: 0;
    }
    
    
    .work-list .item-row {
        gap: 20px;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .work-list .item-title {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9em;
    }
    
    .work-list .item-year {
        flex: 0 0 auto;
        min-width: 90px;
        white-space: nowrap;
        font-size: 0.85em;
    }
    
    .work-list .item-link {
        flex: 0 0 auto;
        min-width: 80px;
        white-space: nowrap;
        font-size: 0.8em;
    }
    
    .item-row > .item-link {
        flex: 0 0 auto;
        min-width: 100px;
        margin-left: 0;
    }
    
    .detail-content {
        margin-left: 0;
        margin-top: 10px;
    }
    
    /* LIVEとPODCASTページ専用スタイル（タブレット） */
    .work-list .item-row {
        gap: 20px;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .work-list .item-title {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9em;
    }
    
    .work-list .item-meta {
        flex: 0 1 auto;
        min-width: 120px;
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.8em;
    }
    
    .work-list .item-year {
        flex: 0 0 auto;
        min-width: 90px;
        white-space: nowrap;
        font-size: 0.85em;
    }
    
    .work-list .item-link {
        flex: 0 0 auto;
        min-width: 80px;
        white-space: nowrap;
        font-size: 0.8em;
    }
    
    /* PODCASTページのタイトルを1行に収める（タブレット） */
    #work-list .item-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* iPad Air / iPad Pro対応（820px以上1366px以下） */
@media (min-width: 820px) and (max-width: 1366px) {
    /* LIVEとPODCASTページ専用スタイル（iPad Air / iPad Pro） */
    .work-list .item-row {
        gap: 20px;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .work-list .item-title {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9em;
    }
    
    .work-list .item-meta {
        flex: 0 1 auto;
        min-width: 120px;
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.8em;
    }
    
    .work-list .item-year {
        flex: 0 0 auto;
        min-width: 90px;
        white-space: nowrap;
        font-size: 0.85em;
    }
    
    .work-list .item-link {
        flex: 0 0 auto;
        min-width: 80px;
        white-space: nowrap;
        font-size: 0.8em;
    }
    
    /* PODCASTページのタイトルを1行に収める（iPad Air / iPad Pro） */
    #work-list .item-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
}

/* iPad Air 10.9インチ/11インチ横向き（1180px以上1366px以下）の調整 */
@media (min-width: 1180px) and (max-width: 1366px) {
    .work-list .item-meta {
        max-width: 300px;
    }
}

/* スマホ対応 - PCと同じ左右分割レイアウトを維持 */
@media (max-width: 768px) {
    body { 
        overflow: hidden; /* スマホでも全体スクロール禁止 */
    }
    
    /* 左右分割レイアウトを維持 */
    .split-layout { 
        flex-direction: row; /* 縦並びではなく横並びを維持 */
        height: 100vh;
        width: 100vw;
    }
    
    /* サイドバーの幅を画面比率に合わせて調整 */
    .sidebar { 
        width: 28%; /* スマホでは28%の幅（35%から縮小） */
        min-width: 100px; /* 最小幅を設定 */
        max-width: 160px; /* 最大幅を設定 */
        height: 100vh;
        border-right: 1px solid #000000;
        border-bottom: none;
        flex-shrink: 0;
    }
    
    .sidebar-inner { 
        padding: 25px 12px 20px 12px; /* 上側のパディングを少し増やしてロゴ位置を調整 */
        height: 100%;
        flex-direction: column; /* 縦並びを維持 */
        justify-content: flex-start;
    }
    
    /* ロゴサイズと位置を調整 */
    .logo { 
        margin-bottom: 20px; 
        text-align: left; /* ロゴを左揃え */
    }
    .logo img {
        height: 26px; /* スマホでは少し小さく */
        margin: 0; /* 左揃え */
    }
    
    /* ナビゲーション */
    .nav-main li { 
        margin-bottom: 12px; /* 行送りを広げる */
    }
    .nav-main a { 
        font-size: 0.85em; /* フォントサイズは元のまま */
        font-weight: normal; 
        display: block; 
    }
    
    /* サイドバーフッター */
    .sidebar-footer { 
        font-size: 0.6em; /* フォントサイズを小さく */
        margin-top: auto;
        padding-top: 20px;
    }
    
    .sidebar-footer p {
        white-space: nowrap;
    }
    
    .sns-links {
        margin-bottom: 10px;
        line-height: 1.6; /* 行間を調整 */
        display: flex;
        flex-direction: column; /* 縦に一列に配置 */
        gap: 10px; /* リンク間の間隔を大きくする */
    }
    
    .sns-links a {
        font-size: 0.75em; /* SNSリンクも小さく */
        margin-right: 0; /* 横方向のマージンを削除 */
        margin-bottom: 0; /* 縦方向のマージンを削除（gapで管理） */
        display: block; /* ブロック要素にして縦に並べる */
        word-break: break-word; /* 長いテキストを折り返し */
    }
    
    /* メインコンテンツ */
    .main-content { 
        flex-grow: 1;
        height: 100vh;
        overflow-y: scroll;
        /* padding-topを71pxに設定して、SORTのベースラインを左メニューの"info"に揃える（25px sidebar padding + 26px logo height + 20px logo margin） */
        padding: 71px 0 20px 20px;
        box-sizing: border-box;
    }
    
    /* コンテンツ内部のパディング */
    .controls, .list-item, .detail-content, .page-title, .text-block {
        padding-right: 20px !important; /* 右余白を統一（左側のマージン20pxと同じ） */
    }
    
    /* hr要素を右端まで伸ばす */
    hr {
        margin-left: 0;
        margin-right: 0;
        width: 100%; /* 右端まで伸ばす */
    }
    
    .controls {
        margin-top: 0; /* SORTのベースラインを左メニューの"info"に揃える（main-contentのpadding-topで調整済み） */
    }
    
    .filter {
        line-height: 1.4; /* 左メニューの"info"と同じline-heightに揃える */
    }
    
    .content-wrapper > h2 {
        margin-top: -20px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
        padding-top: 0;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    /* profileページのテキストブロック */
    .text-block {
        padding-right: 20px !important; /* 右端から離す（左側のマージン20pxと同じ） */
        line-height: 1.8;
    }
    
    .text-block p {
        text-align: left;
        word-spacing: 0;
        letter-spacing: 0;
        text-justify: none;
        font-size: 0.85em;
    }
    
    .profile-image-container {
        flex: 1 1 100% !important;
        margin-top: 20px;
        text-align: left;
        margin-right: 0;
        width: calc(100% - 20px); /* 右側のマージンを考慮して縮小 */
        max-width: calc(100% - 20px);
        box-sizing: border-box;
    }
    
    .profile-image-container img {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0;
    }
    
    /* SORT & FILTER */
    .controls { 
        margin-bottom: 10px; 
        margin-top: 0; /* SORTのベースラインを左メニューの"info"に揃える（main-contentのpadding-topで調整済み） */
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 20px;
    }
    
    /* LIVEとVIDEOページのスマホ表示時は縦並び */
    .controls-vertical-mobile {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .controls-vertical-mobile > h2 {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .filter {
        line-height: 1.4; /* 左メニューの"info"と同じline-heightに揃える */
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 20px;
        font-size: 1.5rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
        white-space: nowrap; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* DISCOGRAPHYページのアルバムサムネイル（スマートフォン表示時のみ） */
    .album-thumbnail {
        display: none; /* PC表示では非表示 */
    }
    
    /* VIDEOページのサムネイルは常に非表示 */
    .video-thumbnail {
        display: none !important;
    }
    
    /* スマートフォン表示時のみDISCOGRAPHYページのサムネイルを表示 */
    @media (max-width: 768px) {
        .album-thumbnail {
            display: block;
            width: 90px;
            height: 90px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        /* DISCOGRAPHYページのitem-rowにサムネイルを追加した場合のレイアウト調整 */
        #work-list .item-row {
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            position: relative;
        }
        
        /* DISCOGRAPHYページのタイトル */
        #work-list .item-row .album-thumbnail + .item-title {
            flex: 1 1 auto;
        }
        
        /* DISCOGRAPHYページのサムネイル */
        #work-list .item-row .album-thumbnail {
            margin-left: 12px;
            order: 999; /* 右側に配置 */
        }
    }
    
    /* iPhone 12 Pro / iPhone 13 / iPhone 14（390px以下）のスマホ表示 */
    @media (max-width: 390px) {
        .controls-vertical-mobile > h2 {
            font-size: 0.9rem !important;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100vw - 160px - 30px);
            letter-spacing: -0.015em;
            font-weight: 700 !important;
        }
        
        .controls > h2 {
            font-size: 0.9rem !important;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100vw - 160px - 30px);
            letter-spacing: -0.015em;
            font-weight: 700 !important;
        }
    }
    
    /* 横幅393px以下：左メニューの文字を小さくして1行表示（スマホ表示内） */
    @media (max-width: 393px) {
        .nav-main a {
            font-size: 0.7em !important; /* フォントサイズを小さく */
            white-space: nowrap !important; /* 1行で表示 */
            word-break: normal !important; /* 改行を防ぐ */
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
        }
        
        .nav-main li {
            margin-bottom: 10px;
        }
    }
    
    /* iPhone 12 Pro Max / iPhone 13 Pro Max / iPhone 14 Plus（428px以下）のスマホ表示 */
    @media (max-width: 428px) and (min-width: 391px) {
        .controls-vertical-mobile > h2 {
            font-size: 0.95rem !important;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100vw - 160px - 30px);
            letter-spacing: -0.01em;
            font-weight: 700 !important;
        }
        
        .controls > h2 {
            font-size: 0.95rem !important;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100vw - 160px - 30px);
            letter-spacing: -0.01em;
            font-weight: 700 !important;
        }
    }
    
    
    .content-wrapper > h2 {
        margin-top: -20px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
        padding-top: 0;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .filter {
        line-height: 1.4; /* 左メニューの"info"と同じline-heightに揃える */
    }
    
    .content-wrapper > h2 {
        margin-top: -20px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
        padding-top: 0;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    .filter { 
        font-size: 0.7em; 
        margin-bottom: 8px; 
        display: flex;
        flex-wrap: wrap;
    }
    
    /* セクションラベル（スマホ表示） */
    .section-label {
        font-size: 0.65em;
        padding: 3px 6px;
        margin: 8px 0 12px 0;
    }
    
    /* Contact Form - Mobile */
    .contact-form {
        padding: 30px 0;
        padding-right: 20px; /* 右端とのマージン（左側のマージン20pxと同じ） */
        max-width: 100%;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        font-size: 0.9em;
        margin-bottom: 6px;
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 12px;
        font-size: 0.95em;
    }
    
    .form-submit {
        margin-top: 25px;
    }
    
    .form-submit button {
        width: 100%;
        padding: 14px;
        font-size: 0.95em;
    }
    
    .form-message {
        padding: 15px;
        margin-bottom: 25px;
        font-size: 0.9em;
    }
    
    .form-message p {
        margin: 0;
        line-height: 1.5;
    }
    
    /* リストアイテム */
    .list-item {
        padding: 12px 0 12px 0;
        padding-right: 20px;
    }
    
    .item-row {
        font-size: 0.85em;
        flex-wrap: wrap;
        gap: 6px 0;
        align-items: baseline;
        justify-content: flex-start;
    }
    
    .item-title { 
        flex: 1 1 100%; 
        font-weight: bold; 
        font-size: 0.9em;
        min-width: 0;
        margin-bottom: 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
    
    .new-flag {
        font-size: 0.65em;
        font-weight: normal;
        color: #666;
        margin-left: 6px;
        white-space: nowrap;
    }
    .item-meta { 
        flex: 1 1 auto; 
        color: #555; 
        font-size: 0.8em; 
        min-width: 0;
        margin-right: 8px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
    
    /* liveページ専用：3列レイアウト */
    .work-list:not(.profile) .item-meta {
        flex: 1 1 100%;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .work-list:not(.profile) .item-year {
        flex: 0 0 auto;
        margin-right: 12px;
        margin-bottom: 0;
        margin-left: 0;
    }
    
    /* LIVEページ専用スタイル（スマホ） */
    .work-list .item-date {
        flex: 0 0 auto;
        margin-right: 12px;
        margin-bottom: 0;
    }
    
    .work-list .item-title {
        flex: 1 1 100%;
        margin-bottom: 4px;
        font-size: 1.1em; /* 記事のタイトルをもっと大きくする */
    }
    
    .work-list .item-guests {
        flex: 0 0 100%;
        color: #777;
        font-size: 0.85em;
        margin-right: 0;
        margin-bottom: 4px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
    }
    
    .work-list .item-venue {
        flex: 0 0 auto;
        margin-right: 12px;
        margin-bottom: 0;
    }
    
    .work-list .item-time {
        flex: 0 0 auto;
        margin-right: 12px;
        margin-bottom: 0;
        margin-left: 0;
    }
    
    .item-year { 
        flex: 0 0 auto; 
        text-align: left; 
        font-size: 1.0em; /* タイトルに付随して大きくする */
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        letter-spacing: 0;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        box-sizing: border-box;
        margin-right: 15px;
        white-space: nowrap;
        line-height: 1.4;
        vertical-align: baseline;
    }
    .item-links { 
        flex: 0 0 auto; 
        text-align: left; 
        display: flex; 
        gap: 6px; 
        justify-content: flex-start; 
        flex-wrap: wrap;
    }
    .item-link { 
        flex: 0 0 auto;
        font-size: 1.0em; /* タイトルに付随して大きくする */
        text-decoration: underline; 
        white-space: nowrap;
        text-align: left;
        line-height: 1.4;
        vertical-align: baseline;
    }
    
    /* 詳細エリア */
    .detail-content {
        padding: 15px 0 15px 0;
        padding-right: 20px;
        margin-left: 0;
        margin-top: 8px;
        font-size: 0.8em;
        line-height: 1.6;
    }
    
    /* 詳細エリア内の画像（スマホ表示：左揃えで大きく） */
    .detail-image {
        float: none;
        max-width: 100%;
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        margin-top: 15px;
        margin-bottom: 15px;
        display: block;
    }
    
    /* フライヤー画像（スマホ表示：4:5のアスペクト比を維持、スクリーンショット用に最適化） */
    .flyer-image {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 20px;
        border-radius: 0;
    }
    
    /* アルバムジャケット画像（スマホ表示） */
    .album-jacket {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 20px;
        border-radius: 0;
    }
    
    /* YouTube埋め込み */
    .youtube-embed { 
        margin: 15px 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .youtube-embed iframe {
        width: 100%;
        height: 100%;
    }
    
    /* ページタイトル */
    h2 {
        font-size: 1.5rem !important; /* タイトルを少し小さく */
        margin-bottom: 20px !important;
    }
    
    /* profileページのコントロール（タイトル部分） */
    .profile-controls {
        padding-right: 20px !important; /* 右端から離す（左側のマージン20pxと同じ） */
        margin-bottom: 10px !important; /* PROFILEとaldo van eyckの間隔を詰める */
    }
    
    /* profileページの画像とテキストレイアウト */
    .text-block {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        padding-right: 20px !important; /* 右端から離す（左側のマージン20pxと同じ） */
        box-sizing: border-box;
    }
    
    /* profileページの親要素（flex container）のpadding-rightを削除 */
    .content-wrapper > div[style*="display: flex"] {
        padding-right: 0 !important;
        margin-bottom: 30px !important; /* PROFILEとコンテンツの間隔を詰める */
    }
    
    .text-block p {
        text-align: left;
        word-spacing: 0;
        letter-spacing: 0;
        text-justify: none;
    }
    
    .text-block p:first-child {
        margin-bottom: 10px !important; /* PROFILEとaldo van eyckの間隔を詰める */
    }
    
    .profile-image-container {
        flex: 1 1 100% !important;
        margin-top: 20px;
        text-align: left;
        margin-right: 0;
        width: calc(100% - 20px); /* 右側のマージンを考慮して縮小 */
        max-width: calc(100% - 20px);
        box-sizing: border-box;
    }
    
    .profile-image-container img {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0;
    }
    
    /* profileページのメンバー表示レイアウト */
    .profile .item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .profile .item-title {
        flex: 0 0 auto;
        min-width: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
        font-size: 1.1em; /* 記事のタイトルをもっと大きくする */
    }
    
    .profile .item-meta {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
        text-align: left;
    }
    
    .profile .item-links {
        flex: 0 0 auto;
        margin-left: 0;
        width: 100%;
        display: flex;
        gap: 10px;
    }
}

/* ページャー */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    padding: 20px 0;
    flex-wrap: wrap;
}

.pagination-link {
    padding: 8px 12px;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.pagination-link:hover {
    background-color: #f0f0f0;
}

.pagination-link.active {
    background-color: #000;
    color: #fff;
}

/* PC表示でのページャー位置をフッターのテキストの底に合わせる */
@media (min-width: 769px) {
    .main-content {
        position: relative;
        padding-bottom: 40px; /* 元のpadding-bottomに戻す */
    }
    
    .pagination {
        position: static; /* 通常のフロー内に配置 */
        margin: 0;
        margin-top: 0px; /* 最終記事との間隔を詰める */
        margin-bottom: -35px; /* メインコンテンツのpadding-bottom(40px)を考慮して、下部から5px上に配置 */
        padding: 0;
        align-items: flex-end; /* ボタンの底を揃える */
    }
}

/* スマホ表示でのページャー */
@media (max-width: 768px) {
    .pagination {
        gap: 6px;
        margin: 30px 0;
        padding: 15px 0;
    }
    
    .pagination-link {
        padding: 6px 10px;
        font-size: 0.8em;
    }
}

/* iPhone SE対応（375px以下） */
@media (max-width: 375px) {
    .sidebar { 
        width: 30%; /* iPhone SEに適したサイズ（少し広めに） */
        min-width: 100px;
        max-width: 140px;
        overflow-x: hidden; /* 横スクロールを防ぐ */
    }
    
    .sidebar-inner { 
        padding: 22px 10px 18px 10px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .logo { 
        margin-bottom: 20px; 
        text-align: left;
    }
    .logo img {
        height: 24px;
        width: auto;
        max-width: 100%;
        margin: 0;
        display: block;
    }
    
    .nav-main {
        margin: 0;
        padding: 0;
    }
    
    .nav-main li { 
        margin-bottom: 10px;
        padding: 0;
    }
    
    .nav-main a { 
        font-size: 0.7em !important; /* フォントサイズを小さく */
        line-height: 1.3;
        white-space: nowrap !important; /* 1行で表示 */
        word-break: normal !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        padding: 0;
    }
    
    .main-content { 
        padding: 60px 0 18px 15px; 
    }
    
    .controls {
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 14px;
    }
    
    .controls-vertical-mobile {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }
    
    .controls-vertical-mobile > h2 {
        margin-right: 0;
        margin-bottom: 3px;
        font-size: 0.85rem !important; /* フォントサイズをさらに小さくして1行に収める */
        white-space: nowrap !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 140px - 30px); /* サイドバー幅とパディングを考慮 */
        box-sizing: border-box;
        letter-spacing: -0.02em; /* 文字間を詰める */
        font-weight: 700 !important; /* フォントウェイトを少し軽く */
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 15px;
        font-size: 0.85rem !important; /* フォントサイズをさらに小さくして1行に収める */
        line-height: 1 !important;
        display: inline-block;
        vertical-align: baseline;
        white-space: nowrap !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 140px - 30px); /* サイドバー幅とパディングを考慮 */
        box-sizing: border-box;
        letter-spacing: -0.02em; /* 文字間を詰める */
        font-weight: 700 !important; /* フォントウェイトを少し軽く */
    }
    
    /* インラインスタイルを上書き（より強力なセレクタ） */
    .controls-vertical-mobile > h2[style] {
        font-size: 0.85rem !important; /* さらに小さく */
        white-space: nowrap !important;
        letter-spacing: -0.02em !important; /* 文字間を詰める */
        font-weight: 700 !important;
    }
    
    .controls > h2[style] {
        font-size: 0.85rem !important; /* さらに小さく */
        white-space: nowrap !important;
        letter-spacing: -0.02em !important; /* 文字間を詰める */
        font-weight: 700 !important;
    }
    
    .controls, .list-item, .detail-content, .page-title, .text-block {
        padding-right: 15px !important;
    }
    
    .item-row {
        font-size: 0.72em;
        flex-wrap: wrap;
        gap: 5px 0;
        align-items: baseline;
        justify-content: flex-start;
    }
    
    .item-title { 
        flex: 1 1 100%; 
        font-size: 1.05em;
        min-width: 0;
        margin-bottom: 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
    
    .item-meta { 
        flex: 1 1 auto; 
        font-size: 0.68em; 
        min-width: 0;
        margin-right: 8px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
    
    .item-year { 
        flex: 0 0 auto; 
        font-size: 0.95em;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        letter-spacing: 0;
        text-align: left;
        margin-right: 12px;
        white-space: nowrap;
        line-height: 1.35;
    }
    
    .item-link { 
        flex: 0 0 auto;
        font-size: 0.95em;
        white-space: nowrap;
        text-align: left;
        line-height: 1.35;
    }
    
    .sidebar-footer { 
        font-size: 0.55em;
        padding-top: 20px;
        margin-top: auto;
        color: #666;
    }
    
    .sidebar-footer p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        font-size: 0.9em;
    }
    
    .sns-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .sns-links a {
        font-size: 0.7em;
        line-height: 1.4;
        word-break: break-word;
        display: block;
        color: #000000;
        text-decoration: none;
    }
    
    .sns-links a:hover {
        text-decoration: underline;
    }
    
    .filter {
        font-size: 0.68em;
        line-height: 1.4;
    }
    
    .text-block {
        padding-right: 15px !important;
        line-height: 1.7;
    }
    
    .text-block p {
        font-size: 0.82em;
    }
    
    .detail-content {
        padding-right: 15px;
        font-size: 0.82em;
        line-height: 1.6;
    }
}

/* iPhone 12 Pro / iPhone 13 / iPhone 14対応（390px以下） */
@media (min-width: 376px) and (max-width: 390px) {
    .controls-vertical-mobile > h2 {
        font-size: 0.9rem !important; /* フォントサイズを小さくして1行に収める */
        white-space: nowrap !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 160px - 30px); /* サイドバー幅とパディングを考慮 */
        box-sizing: border-box;
        letter-spacing: -0.015em; /* 文字間を詰める */
        font-weight: 700 !important;
    }
    
    .controls > h2 {
        font-size: 0.9rem !important; /* フォントサイズを小さくして1行に収める */
        white-space: nowrap !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 160px - 30px); /* サイドバー幅とパディングを考慮 */
        box-sizing: border-box;
        letter-spacing: -0.015em; /* 文字間を詰める */
        font-weight: 700 !important;
    }
    
    /* インラインスタイルを上書き */
    .controls-vertical-mobile > h2[style] {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.015em !important;
        font-weight: 700 !important;
    }
    
    .controls > h2[style] {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.015em !important;
        font-weight: 700 !important;
    }
}

/* 横幅393px以下：左メニューの文字を小さくして1行表示 */
@media (max-width: 393px) {
    .nav-main a {
        font-size: 0.7em !important; /* フォントサイズを小さく */
        white-space: nowrap !important; /* 1行で表示 */
        word-break: normal !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }
    
    .nav-main li {
        margin-bottom: 10px;
    }
    
    /* サイドバーの幅を調整してメニューが収まるように */
    .sidebar {
        min-width: 90px;
    }
    
    .sidebar-inner {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* iPhone 12 Pro Max / iPhone 13 Pro Max / iPhone 14 Plus対応（428px以下） */
@media (min-width: 391px) and (max-width: 428px) {
    .controls-vertical-mobile > h2 {
        font-size: 0.95rem !important; /* フォントサイズを小さくして1行に収める */
        white-space: nowrap !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 160px - 30px); /* サイドバー幅とパディングを考慮 */
        box-sizing: border-box;
        letter-spacing: -0.01em; /* 文字間を少し詰める */
        font-weight: 700 !important;
    }
    
    .controls > h2 {
        font-size: 0.95rem !important; /* フォントサイズを小さくして1行に収める */
        white-space: nowrap !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 160px - 30px); /* サイドバー幅とパディングを考慮 */
        box-sizing: border-box;
        letter-spacing: -0.01em; /* 文字間を少し詰める */
        font-weight: 700 !important;
    }
    
    /* インラインスタイルを上書き */
    .controls-vertical-mobile > h2[style] {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.01em !important;
        font-weight: 700 !important;
    }
    
    .controls > h2[style] {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.01em !important;
        font-weight: 700 !important;
    }
}

/* Galaxyシリーズ対応（小さい画面・折りたたみデバイス） */
@media (max-width: 360px) {
    .sidebar { 
        width: 24%; /* さらに狭く（Galaxy Fold折りたたみ時など） */
        min-width: 80px;
        max-width: 110px;
    }
    
    .sidebar-inner { 
        padding: 18px 8px 12px 8px;
    }
    
    .logo { 
        margin-bottom: 15px; 
        text-align: left;
    }
    .logo img {
        height: 20px;
        margin: 0;
    }
    
    .nav-main li { 
        margin-bottom: 10px;
    }
    
    .nav-main a { 
        font-size: 0.7em !important; /* フォントサイズを小さく */
        white-space: nowrap !important; /* 1行で表示 */
        word-break: normal !important; /* 改行を防ぐ */
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }
    
    .main-content { 
        padding: 53px 0 15px 12px; 
    }
    
    .controls {
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 12px;
    }
    
    .controls-vertical-mobile {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .controls-vertical-mobile > h2 {
        margin-right: 0;
        margin-bottom: 2px;
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 12px;
        font-size: 1.2rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .controls, .list-item, .detail-content, .page-title, .text-block {
        padding-right: 12px !important;
    }
    
    .item-row {
        font-size: 0.7em;
        flex-wrap: wrap;
        gap: 4px 0;
        align-items: baseline;
        justify-content: flex-start;
    }
    
    .item-title { 
        flex: 1 1 100%; 
        font-size: 1.0em;
        min-width: 0;
        margin-bottom: 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
    }
    
    .item-meta { 
        flex: 1 1 auto; 
        font-size: 0.65em; 
        min-width: 0;
        margin-right: 6px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
    }
    
    .item-year { 
        flex: 0 0 auto; 
        font-size: 0.9em;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        letter-spacing: 0;
        text-align: left;
        margin-right: 10px;
        white-space: nowrap;
        line-height: 1.3;
    }
    
    .item-link { 
        flex: 0 0 auto;
        font-size: 0.9em;
        white-space: nowrap;
        text-align: left;
        line-height: 1.3;
    }
    
    .sidebar-footer { 
        font-size: 0.5em;
        padding-top: 12px;
    }
    
    .sns-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .sns-links a {
        font-size: 0.65em;
    }
}

/* 非常に小さな画面（縦長スマホなど） */
@media (max-width: 480px) {
    .sidebar { 
        width: 26%; /* さらに狭く（32%から縮小） */
        min-width: 90px;
        max-width: 130px;
    }
    
    .sidebar-inner { 
        padding: 20px 8px 15px 8px; /* 上側のパディングを調整 */
    }
    
    /* ロゴ位置を調整 */
    .logo { 
        margin-bottom: 18px; 
        text-align: left;
    }
    .logo img {
        height: 22px;
        margin: 0;
    }
    
    .nav-main li { 
        margin-bottom: 12px; /* 行送りを広げる */
    }
    
    .nav-main a { 
        font-size: 0.75em; /* フォントサイズは元のまま */
    }
    
    .main-content { 
        /* padding-topを60pxに設定して、SORTのベースラインを左メニューの"info"に揃える（20px sidebar padding + 22px logo height + 18px logo margin） */
        padding: 60px 0 15px 15px; 
    }
    
    .controls {
        margin-top: 0; /* SORTのベースラインを左メニューの"info"に揃える（main-contentのpadding-topで調整済み） */
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 15px;
    }
    
    /* LIVEとVIDEOページのスマホ表示時は縦並び */
    .controls-vertical-mobile {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .controls-vertical-mobile > h2 {
        margin-right: 0;
        margin-bottom: 3px;
    }
    
    .filter {
        line-height: 1.4; /* 左メニューの"info"と同じline-heightに揃える */
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 15px;
        font-size: 1.3rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .content-wrapper > h2 {
        margin-top: -18px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
        padding-top: 0;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .controls, .list-item, .detail-content, .page-title, .text-block {
        padding-right: 15px !important; /* 右余白を統一（左側のマージン15pxと同じ） */
    }
    
    /* 詳細エリア内の画像（小さな画面：左揃えで大きく） */
    .detail-image {
        float: none;
        max-width: 100%;
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        margin-top: 15px;
        margin-bottom: 15px;
        display: block;
    }
    
    /* フライヤー画像（小さな画面：4:5のアスペクト比を維持、スクリーンショット用に最適化） */
    .flyer-image {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 20px;
        border-radius: 0;
    }
    
    /* アルバムジャケット画像（小さな画面） */
    .album-jacket {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 20px;
        border-radius: 0;
    }
    
    /* profileページのコントロール（タイトル部分） */
    .profile-controls {
        padding-right: 15px !important; /* 右端から離す（左側のマージン15pxと同じ） */
        margin-bottom: 10px !important; /* PROFILEとaldo van eyckの間隔を詰める */
    }
    
    /* profileページの親要素（flex container）のpadding-rightを削除 */
    .content-wrapper > div[style*="display: flex"] {
        padding-right: 0 !important;
        margin-bottom: 30px !important; /* PROFILEとコンテンツの間隔を詰める */
    }
    
    /* profileページのテキストブロック */
    .text-block {
        padding-right: 15px !important; /* 右端から離す（左側のマージン15pxと同じ） */
        line-height: 1.6;
        box-sizing: border-box;
    }
    
    .text-block p {
        text-align: left;
        word-spacing: 0;
        letter-spacing: 0;
        text-justify: none;
        font-size: 0.8em;
    }
    
    .profile-image-container {
        margin-right: 0;
        width: calc(100% - 15px); /* 右側のマージンを考慮して縮小 */
        max-width: calc(100% - 15px);
        box-sizing: border-box;
    }
    
    .profile-image-container img {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* YouTube埋め込み（480px以下） */
    .youtube-embed { 
        margin: 15px 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .youtube-embed iframe {
        width: 100%;
        height: 100%;
    }
    
    .item-row {
        font-size: 0.75em;
        flex-wrap: wrap;
        gap: 5px 0;
        align-items: baseline;
        justify-content: flex-start;
    }
    
    /* profileページのメンバー表示レイアウト（480px以下） */
    .profile .item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .profile .item-title {
        flex: 0 0 auto;
        min-width: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
        font-size: 1.1em; /* 記事のタイトルをもっと大きくする */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    
    .profile .item-meta {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
        text-align: left;
    }
    
    .profile .item-links {
        flex: 0 0 auto;
        margin-left: 0;
        width: 100%;
        display: flex;
        gap: 10px;
    }
    
    .item-title { 
        flex: 1 1 100%; 
        font-size: 1.1em; /* 記事のタイトルをもっと大きくする */
        min-width: 0;
        margin-bottom: 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
    
    .new-flag {
        font-size: 0.6em;
        font-weight: normal;
        color: #666;
        margin-left: 5px;
        white-space: nowrap;
    }
    .item-meta { 
        flex: 1 1 auto; 
        font-size: 0.7em; 
        min-width: 0;
        margin-right: 6px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
    
    /* liveページ専用：3列レイアウト */
    .work-list:not(.profile) .item-meta {
        flex: 1 1 100%;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .work-list:not(.profile) .item-year {
        flex: 0 0 auto;
        margin-right: 10px;
        margin-bottom: 0;
        margin-left: 0;
    }
    
    .item-year { 
        flex: 0 0 auto; 
        font-size: 1.0em; /* タイトルに付随して大きくする */
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        letter-spacing: 0;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        box-sizing: border-box;
        margin-right: 12px;
        white-space: nowrap;
        line-height: 1.4;
        vertical-align: baseline;
    }
    .item-links { 
        flex: 0 0 auto; 
        display: flex; 
        gap: 4px; 
        justify-content: flex-start; 
        flex-wrap: wrap;
        text-align: left;
    }
    .item-link { 
        flex: 0 0 auto;
        font-size: 1.0em; /* タイトルに付随して大きくする */
        white-space: nowrap;
        text-align: left;
        line-height: 1.4;
        vertical-align: baseline;
    }
    
    h2 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }
    
    /* profileページのメンバー表示レイアウト */
    /* profileページのメンバー表示レイアウト（横長スマホ） */
    .profile .item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .profile .item-title {
        flex: 0 0 auto;
        min-width: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
    }
    
    .profile .item-meta {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
        text-align: left;
    }
    
    .profile .item-links {
        flex: 0 0 auto;
        margin-left: 0;
        width: 100%;
        display: flex;
        gap: 10px;
    }
}

/* ページャー */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    padding: 20px 0;
    flex-wrap: wrap;
}

.pagination-link {
    padding: 8px 12px;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.pagination-link:hover {
    background-color: #f0f0f0;
}

.pagination-link.active {
    background-color: #000;
    color: #fff;
}

/* スマホ表示でのページャー */
@media (max-width: 768px) {
    .pagination {
        gap: 6px;
        margin: 30px 0;
        padding: 15px 0;
    }
    
    .pagination-link {
        padding: 6px 10px;
        font-size: 0.8em;
    }
}

/* Galaxy Tab対応（768px以上1024px以下） */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Galaxy TabでLIVEとPODCASTページが崩れないように調整 */
    .work-list .item-row {
        gap: 18px;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .work-list .item-title {
        flex: 1 1 auto;
        min-width: 140px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.88em;
    }
    
    .work-list .item-meta {
        flex: 0 1 auto;
        min-width: 110px;
        max-width: 240px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.78em;
    }
    
    .work-list .item-year {
        flex: 0 0 auto;
        min-width: 85px;
        white-space: nowrap;
        font-size: 0.83em;
    }
    
    .work-list .item-link {
        flex: 0 0 auto;
        min-width: 75px;
        white-space: nowrap;
        font-size: 0.78em;
    }
    
    /* PODCASTページのタイトルを1行に収める（Galaxy Tab） */
    #work-list .item-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
}

/* Surface Pro 7対応（912px以上1368px以下） */
@media (min-width: 912px) and (max-width: 1368px) {
    
    .work-list .item-row {
        gap: 20px;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .work-list .item-title {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9em;
    }
    
    .work-list .item-year {
        flex: 0 0 auto;
        min-width: 90px;
        white-space: nowrap;
        font-size: 0.85em;
    }
    
    .work-list .item-link {
        flex: 0 0 auto;
        min-width: 80px;
        white-space: nowrap;
        font-size: 0.8em;
    }
}

/* Surface Duo対応（540px以上720px以下） */
@media (min-width: 540px) and (max-width: 720px) {
    
    #work-list .item-row .item-year {
        margin-right: 12px !important;
    }
    
    #work-list .item-title br {
        display: none !important; /* 改行を非表示 */
    }
    
    .work-list .item-title {
        flex: 1 1 auto;
        min-width: 140px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9em;
    }
    
    .work-list .item-year {
        flex: 0 0 auto;
        min-width: 90px;
        white-space: nowrap;
        font-size: 0.85em;
    }
    
    .work-list .item-link {
        flex: 0 0 auto;
        min-width: 80px;
        white-space: nowrap;
        font-size: 0.8em;
    }
}

/* Galaxy Z Fold 5対応（折りたたみ時: 280px以上653px以下） */
@media (min-width: 280px) and (max-width: 653px) {
}

/* Galaxy Z Fold 5対応（展開時: 1768px以上） */
@media (min-width: 1768px) {
    
    .work-list .item-row {
        gap: 20px;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .work-list .item-title {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.95em;
    }
    
    .work-list .item-year {
        flex: 0 0 auto;
        min-width: 90px;
        white-space: nowrap;
        font-size: 0.9em;
    }
    
    .work-list .item-link {
        flex: 0 0 auto;
        min-width: 80px;
        white-space: nowrap;
        font-size: 0.85em;
    }
}

/* Samsung Galaxy S8+対応（360px以上400px以下） */
@media (min-width: 360px) and (max-width: 400px) {
}

/* iPad Mini対応（768px以上1024px以下、縦向き） */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
}

/* Galaxyシリーズ横向き・横長スマホ（ランドスケープモード）対応 */
@media (max-width: 915px) and (orientation: landscape) {
    .sidebar { 
        width: 22%; /* 横長ではさらに狭く（28%から縮小） */
        min-width: 120px;
        max-width: 150px;
    }
    
    .sidebar-inner { 
        padding: 18px 10px 15px 10px; /* 上側のパディングを調整 */
    }
    
    /* ロゴ位置を調整 */
    .logo {
        margin-bottom: 12px;
        text-align: left;
    }
    
    .logo img {
        height: 20px;
        margin: 0;
    }
    
    .nav-main li { 
        margin-bottom: 12px; /* 行送りを広げる */
    }
    
    .nav-main a { 
        font-size: 0.75em; /* フォントサイズは元のまま */
    }
    
    .main-content { 
        /* padding-topを50pxに設定して、SORTのベースラインを左メニューの"info"に揃える（18px sidebar padding + 20px logo height + 12px logo margin） */
        padding: 50px 0 15px 15px; 
    }
    
    .controls {
        margin-top: 0; /* SORTのベースラインを左メニューの"info"に揃える（main-contentのpadding-topで調整済み） */
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 12px;
    }
    
    /* LIVEとVIDEOページのスマホ表示時は縦並び */
    .controls-vertical-mobile {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .controls-vertical-mobile > h2 {
        margin-right: 0;
        margin-bottom: 2px;
    }
    
    .filter {
        line-height: 1.4; /* 左メニューの"info"と同じline-heightに揃える */
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 12px;
        font-size: 1.2rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .content-wrapper > h2 {
        margin-top: -12px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
        padding-top: 0;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .sidebar-footer { 
        font-size: 0.55em;
        padding-top: 15px;
    }
    
    .sidebar-footer p {
        white-space: nowrap;
    }
    
    .sns-links {
        display: flex;
        flex-direction: column; /* 縦に一列に配置 */
        gap: 10px; /* リンク間の間隔を大きくする */
    }
    
    .sns-links a {
        font-size: 0.7em;
        margin-right: 0; /* 横方向のマージンを削除 */
        margin-bottom: 0; /* 縦方向のマージンを削除（gapで管理） */
        display: block; /* ブロック要素にして縦に並べる */
    }
    
    .main-content { 
        /* padding-topを60pxに設定して、SORTのベースラインを左メニューの"info"に揃える（20px sidebar padding + 22px logo height + 18px logo margin） */
        padding: 60px 0 15px 15px; 
    }
    
    .controls {
        margin-top: 0; /* SORTのベースラインを左メニューの"info"に揃える（main-contentのpadding-topで調整済み） */
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
    }
    
    /* LIVEとVIDEOページのスマホ表示時は縦並び */
    .controls-vertical-mobile {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .controls-vertical-mobile > h2 {
        margin-right: 0;
        margin-bottom: 2px;
    }
    
    .filter {
        line-height: 1.4; /* 左メニューの"info"と同じline-heightに揃える */
    }
    
    .controls > h2 {
        margin: 0;
        margin-right: 10px;
        font-size: 1.1rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .content-wrapper > h2 {
        margin-top: -18px; /* ロゴのmargin-bottom分だけ上に移動して、ベースラインをロゴの底に揃える */
        padding-top: 0;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
    
    .controls, .list-item, .detail-content, .page-title, .text-block {
        padding-right: 15px !important; /* 右余白を統一（左側のマージン15pxと同じ） */
    }
    
    /* Contact Form - Landscape Mobile */
    .contact-form {
        padding-right: 15px; /* 右端とのマージン（左側のマージン15pxと同じ） */
    }
    
    /* profileページのコントロール（タイトル部分） */
    .profile-controls {
        padding-right: 15px !important; /* 右端から離す（左側のマージン15pxと同じ） */
        margin-bottom: 10px !important; /* PROFILEとaldo van eyckの間隔を詰める */
    }
    
    /* profileページの親要素（flex container）のpadding-rightを削除 */
    .content-wrapper > div[style*="display: flex"] {
        padding-right: 0 !important;
        margin-bottom: 30px !important; /* PROFILEとコンテンツの間隔を詰める */
    }
    
    /* profileページのテキストブロック */
    .text-block {
        padding-right: 15px !important; /* 右端から離す（左側のマージン15pxと同じ） */
        line-height: 1.6;
        box-sizing: border-box;
    }
    
    .text-block p {
        text-align: left;
        word-spacing: 0;
        letter-spacing: 0;
        text-justify: none;
        font-size: 0.8em;
    }
    
    .profile-image-container {
        margin-right: 0;
        width: calc(100% - 15px); /* 右側のマージンを考慮して縮小 */
        max-width: calc(100% - 15px);
        box-sizing: border-box;
    }
    
    .profile-image-container img {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* YouTube埋め込み（横長スマホ） */
    .youtube-embed { 
        margin: 15px 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .youtube-embed iframe {
        width: 100%;
        height: 100%;
    }
    
    .controls { 
        margin-bottom: 15px; 
    }
    
    .filter {
        display: flex;
        flex-wrap: wrap;
        font-size: 0.7em;
        margin-bottom: 8px;
    }
    
    /* Contact Form - Small Mobile */
    .contact-form {
        padding: 25px 0;
        padding-right: 15px; /* 右端とのマージン（左側のマージン15pxと同じ） */
    }
    
    .form-group {
        margin-bottom: 18px;
    }
    
    .form-group label {
        font-size: 0.85em;
        margin-bottom: 5px;
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 10px;
        font-size: 0.9em;
    }
    
    .form-submit button {
        padding: 12px;
        font-size: 0.9em;
    }
    
    .form-message {
        padding: 12px;
        margin-bottom: 20px;
        font-size: 0.85em;
    }
    
    .list-item {
        padding: 10px 0 10px 0;
    }
    
    .item-row {
        font-size: 0.8em;
        flex-wrap: wrap;
        gap: 5px 0;
        align-items: baseline;
        justify-content: flex-start;
    }
    
    .item-title {
        flex: 1 1 100%;
        margin-bottom: 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
        font-size: 1.1em; /* 記事のタイトルをもっと大きくする */
    }
    
    .item-meta {
        flex: 1 1 auto;
        margin-right: 8px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
    
    /* liveページ専用：3列レイアウト */
    .work-list:not(.profile) .item-meta {
        flex: 1 1 100%;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .work-list:not(.profile) .item-year {
        flex: 0 0 auto;
        margin-right: 10px;
        margin-bottom: 0;
        margin-left: 0;
    }
    
    .item-year {
        flex: 0 0 auto;
        text-align: left;
        font-size: 1.0em; /* タイトルに付随して大きくする */
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        letter-spacing: 0;
        margin-right: 12px;
        white-space: nowrap;
        line-height: 1.4;
        vertical-align: baseline;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
    }
    
    .item-links {
        flex: 0 0 auto;
    }
    
    .item-link {
        font-size: 1.0em; /* タイトルに付随して大きくする */
    }
    
    h2 {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;
    }
    
    /* profileページのメンバー表示レイアウト */
    /* profileページのメンバー表示レイアウト（横長スマホ480px以下） */
    .profile .item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .profile .item-title {
        flex: 0 0 auto;
        min-width: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
        font-size: 1.1em; /* 記事のタイトルをもっと大きくする */
    }
    
    .profile .item-meta {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 0;
        line-height: 1.3;
        width: 100%;
        text-align: left;
    }
    
    .profile .item-links {
        flex: 0 0 auto;
        margin-left: 0;
        width: 100%;
        display: flex;
        gap: 10px;
    }
}

/* ページャー */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    padding: 20px 0;
    flex-wrap: wrap;
}

.pagination-link {
    padding: 8px 12px;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.pagination-link:hover {
    background-color: #f0f0f0;
}

.pagination-link.active {
    background-color: #000;
    color: #fff;
}

/* スマホ表示でのページャー */
@media (max-width: 768px) {
    .pagination {
        gap: 6px;
        margin: 30px 0;
        padding: 15px 0;
    }
    
    .pagination-link {
        padding: 6px 10px;
        font-size: 0.8em;
    }
}