:root {
    --chart-color-yellow: rgba(255, 205, 86, 1);
}

.time-period-buttons {
    --time-period-min-width: 140px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--time-period-min-width), 1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    align-items: stretch;
}

.time-period-buttons__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 1rem;
    margin: 0;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.time-period-buttons__button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.time-period-buttons__button:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

@media (max-width: 992px) {
    .time-period-buttons {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .time-period-buttons {
        --time-period-min-width: 130px;
        gap: 0.5rem;
    }

    .time-period-buttons__button {
        min-height: 42px;
        font-size: 0.9rem;
        padding: 0.55rem 0.9rem;
    }
}

/* その他のスタイルはそのまま */
.video-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.upload-date, .last-date {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

table.dataTable td {
    font-size: 14px;
}

table.dataTable thead th {
    font-size: 14px;
}

#video-details-table {
    white-space: nowrap;
}

.stats-table {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
}

.stats-table th, .stats-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.stats-table th {
    background-color: #f2f2f2;
}

/* モバイル用スタイル */
@media only screen and (max-width: 600px) {
    .upload-date, .last-date {
        margin-bottom: 10px;
    }

    .stats-table {
        width: 100%;
    }

    th.sorting{
        padding-right:9px!important;
    }

    th.sorting::after,
    th.sorting::before {
        display: none !important;
    }
}

/*Videos.html*/
.title-cell {
    display: flex;
    flex-direction: column;
    word-break: break-word; /* 長い単語を折り返す */
}

.title-cell .top {
    font-weight: bold;
    margin-bottom: 2px;
}

.title-cell .bottom {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ccc;
    margin-top: 2px;
    padding-top: 5px;
}

.title-cell .plot_bottom {
    display: flex;
    justify-content: space-between; /* 左右に要素を配置 */
    align-items: center; /* 縦方向の中央揃え */
    font-size: 0.9em;
    color: #555;
}

.title-cell .left {
    text-align: left; /* 左端に揃える */
    flex: 1; /* 左側の要素が左端に固定される */
}

.title-cell .right {
    text-align: right; /* 右端に揃える */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.bottom .first-row {
    display: flex;
    justify-content: flex-start;
}

.bottom .second-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 5px;
    gap: 20px; /* 要素間に適度な余白を追加 */
}

.stats {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* 左寄せ */
    gap: 10px; /* 要素間に適度な余白を追加 */
}

.stats span {
    text-align: left; /* 左揃え */
    white-space: nowrap; /* デスクトップでは折り返さない */
}

/* 指標ごとの文字色を指定 */
.view-count {
    width:100px;
    color: #2c3e50; /* 落ち着いたダークブルー */
}

.like-count {
    width:80px;
    color: #27ae60; /* 落ち着いたグリーン */
}

.comment-count {
    width:70px;
    color: #8e44ad; /* 落ち着いたパープル */
}

.recent24h-count {
    width:100px;
    color: #ff7f50; /* コーラル */
}

.videos-page .milestone-progress {
    display: none;
    margin-left: 8px;
    color: #0f766e;
    white-space: nowrap;
}

.videos-page #video-table-container.is-milestone-sort .milestone-progress {
    display: inline;
}

.favorite-icon {
    cursor: pointer;
}

/* Flexboxレイアウトを使用して横並びにする */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dt-container .dt-length,
.dt-container .dt-search {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
}

/* デフォルトでフレックスコンテナに配置する */
.dataTables_wrapper .dataTables_length,
.dt-container .dt-length {
    flex: 1;
}

.dataTables_wrapper .dataTables_filter,
.dt-container .dt-search {
    flex: 2;
    justify-content: flex-end;
}

/* モバイル画面対応の調整 */
@media (max-width: 530px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dt-container .dt-length,
    .dt-container .dt-search {
        display: block;
        margin-bottom: 1rem;
        text-align: center;
    }
}

#viewCountChartTitle {
    font-size: 1.5rem; /* 適切なサイズに調整 */
    text-align: center; /* 画面中央に配置 */
    margin-top: 1rem;
    margin-bottom: 0.5rem; /* チャートとの間に余白を追加 */
}

.sort-link {
    color: #CCCCCC;
    text-decoration: underline; /* 下線を追加 */
    margin-left: 3px;
    margin-right: 3px;
    cursor: pointer; /* マウスカーソルをポインタに変更 */
}

.sort-link:hover {
    color: #FFFFFF;
}

.selected-sort {
    color: #4682B4;
    font-weight: bold; /* 太字に変更 */
}

/* チェックボックスのスタイル */
.checkbox-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.checkbox-group .form-check {
    margin-right: 20px; /* 適切な余白を追加 */
}

.checkbox-group .form-check-label {
    white-space: nowrap;
}

.form-check-label {
    font-size: 1em;
    color: #333;
}

/* ボタンとテーブルの間の余白 */
.table-responsive {
    margin-top: 20px;
}

/* YouTubeアイコンのスタイル */
.youtube-icon {
    width: auto;
    height: 16px;
    cursor: pointer;
    vertical-align: middle; /* 行内要素として中央に揃える */
    display: inline-block; /* 行内ブロック要素として扱う */
}

.track-details-table {
    table-layout: fixed; /* 列幅を固定する */
    width: 100%; /* テーブル全体をコンテナに合わせる */
}

.track-details-table th, .track-details-table td {
    word-wrap: break-word; /* 長いテキストを折り返す */
    white-space: normal; /* 折り返し可能にする */
    padding: 10px;
    vertical-align: middle;
}

.track-details-table th.col-4 {
    width: 30%; /* Attributeの列幅 */
}

.track-details-table th.col-8 {
    width: 70%; /* Valueの列幅 */
}

/* videos の統計表示をモバイルで2列レイアウトに */
@media only screen and (max-width: 600px) {
    .stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .view-count { grid-column: 1; grid-row: 1; width: auto; }
    .recent24h-count { grid-column: 1; grid-row: 2; width: auto; }
    .like-count { grid-column: 2; grid-row: 1; width: auto; }
    .comment-count { grid-column: 2; grid-row: 2; width: auto; }
    .videos-page .milestone-progress {
        grid-column: 1 / span 2;
        grid-row: 3;
        width: auto;
        margin-left: 0;
    }
}
:root {
    --page-font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Segoe UI', sans-serif;
    --page-bg: #f4f6fb;
    --page-header-bg: linear-gradient(135deg, #f8fafc, #eef2ff);
    --page-header-border: rgba(148, 163, 184, 0.24);
    --page-header-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --page-header-max-width: 900px;
    --page-header-margin: 1.5rem auto 2rem;
    --page-header-padding: 1.5rem 1rem;
    --page-header-padding-sm: 1.25rem 0.75rem;
    --page-header-radius: 1rem;
    --page-header-inner-gap: 1rem;
    --page-header-content-max-width: 720px;
    --page-header-extra-max-width: 720px;
    --page-title-size: clamp(1.85rem, 1.2vw + 1.4rem, 2.4rem);
    --page-title-size-sm: 1.75rem;
    --page-title-gap: 0.65rem;
    --page-title-letter-spacing: 0.01em;
    --page-title-color: #111827;
    --page-subtitle-size: clamp(0.98rem, 0.15vw + 0.92rem, 1.08rem);
    --page-subtitle-color: #64748b;
    --page-eyebrow-size: 0.75rem;
    --page-text: #0f172a;
    --page-muted: #64748b;
    --page-focus-ring: 0 0 0 0.2rem rgba(13, 110, 253, 0.3);
}

body.page-theme {
    background: var(--page-bg);
    color: var(--page-text);
    font-family: var(--page-font-family);
    line-height: 1.6;
}

.page-header {
    box-sizing: border-box;
    width: min(100%, var(--page-header-max-width));
    max-width: calc(100vw - 1.5rem);
    margin: var(--page-header-margin) !important;
    padding: var(--page-header-padding);
    border-radius: var(--page-header-radius);
    border: 1px solid var(--page-header-border);
    background: var(--page-header-bg);
    box-shadow: var(--page-header-shadow);
    text-align: center;
}

.page-header__inner {
    display: flex;
    flex-direction: column;
    gap: var(--page-header-inner-gap);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-header__main {
    min-width: 0;
    width: 100%;
    max-width: var(--page-header-content-max-width);
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.page-header__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--page-title-gap);
    justify-content: center;
    max-width: 100%;
    margin: 0 auto 0.5rem;
}

.page-header__extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: var(--page-header-extra-max-width);
    margin-right: auto;
    margin-left: auto;
}

.page-header--split .page-header__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-header--split .page-header__extra {
    align-items: center;
    justify-content: center;
}

.page-header__eyebrow {
    margin: 0 0 0.5rem;
    letter-spacing: 0.2em;
    font-size: var(--page-eyebrow-size);
    font-weight: 600;
    color: var(--page-muted);
    text-transform: uppercase;
}

.page-header__title {
    margin: 0;
    font-size: var(--page-title-size);
    line-height: 1.3;
    letter-spacing: var(--page-title-letter-spacing);
    color: var(--page-title-color);
}

.page-header__title-text {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.page-header__subtitle {
    margin: 0;
    color: var(--page-subtitle-color);
    font-size: var(--page-subtitle-size);
    line-height: 1.7;
}

.page-header__title-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    font-size: 0.7em;
    color: var(--bs-primary);
    background-color: rgba(13, 110, 253, 0.1);
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
}

.page-header__title-link:hover,
.page-header__title-link:focus-visible {
    color: #0a58ca;
    background-color: rgba(13, 110, 253, 0.2);
    text-decoration: none;
}

.page-header__title-link:focus-visible {
    outline: none;
    box-shadow: var(--page-focus-ring);
}

.related-pages {
    margin: 2rem 0;
    padding: 0;
}

.related-pages__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    text-align: left;
}

.related-pages__title {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.related-pages__intro {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}

.related-pages__grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.related-pages__link {
    display: flex;
    min-height: 72px;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.95rem;
    border: 1px solid rgba(13, 110, 253, 0.22);
    border-radius: 0.5rem;
    color: #0f172a;
    background: #f8fafc;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.related-pages__link:hover {
    border-color: rgba(13, 110, 253, 0.45);
    background: #eef6ff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
    color: #0f172a;
    text-decoration: none;
    transform: translateY(-1px);
}

.related-pages__link:active {
    transform: translateY(0);
}

.related-pages__link:focus-visible {
    outline: none;
    box-shadow: var(--page-focus-ring);
}

.related-pages__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.08);
}

.related-pages__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.related-pages__label {
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.related-pages__description {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.detail-seo {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 4px solid #0d6efd;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.detail-seo__title {
    margin: 0 0 0.75rem;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.detail-seo__copy {
    margin: 0;
    color: #334155;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.detail-seo__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.detail-seo__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    color: #334155;
    background: #f1f5f9;
    font-size: 0.9rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.detail-seo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.detail-seo__actions .btn {
    min-height: 44px;
}

@media (max-width: 576px) {
    .page-header {
        padding: var(--page-header-padding-sm);
    }

    .page-header--split .page-header__inner {
        align-items: center;
        text-align: center;
    }

    .page-header--split .page-header__title-row {
        justify-content: center;
    }

    .page-header--split .page-header__extra {
        justify-content: center;
    }

    .page-header__title {
        font-size: var(--page-title-size-sm);
    }

    .related-pages {
        margin: 1.5rem 0;
    }

    .related-pages__grid {
        gap: 0.5rem;
        grid-template-columns: 1fr;
    }

    .related-pages__header {
        margin-bottom: 0.75rem;
    }

    .related-pages__intro {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .related-pages__link {
        min-height: 72px;
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .related-pages__icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .detail-seo {
        margin: 1rem 0;
        padding: 1rem;
    }

    .detail-seo__copy {
        line-height: 1.7;
    }

    .detail-seo__meta {
        gap: 0.4rem;
        margin-top: 0.75rem;
    }

    .detail-seo__actions .btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .related-pages__link {
        transition: none;
    }
}
:root {
    --mypage-accent: #155eef;
    --mypage-accent-soft: #e7efff;
    --mypage-border: #c9d7f2;
    --mypage-text: #14213d;
    --mypage-muted: #55627a;
    --mypage-surface: #ffffff;
    --mypage-danger: #c62828;
}

.auth-login-modal__providers,
.mypage-guest__actions {
    display: grid;
    gap: 0.75rem;
}

.auth-login-modal__provider-btn,
.mypage-provider-button,
.mypage-save-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--mypage-border);
    background: var(--mypage-surface);
    color: var(--mypage-text);
    font-weight: 600;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.auth-login-modal__provider-btn:hover,
.mypage-provider-button:hover,
.mypage-save-button:hover {
    border-color: rgba(21, 94, 239, 0.44);
    box-shadow: 0 10px 24px rgba(21, 94, 239, 0.12);
    color: var(--mypage-text);
    transform: translateY(-1px);
}

.auth-login-modal__provider-btn:active,
.mypage-provider-button:active,
.mypage-save-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(21, 94, 239, 0.16);
}

.auth-login-modal__provider-btn:focus-visible,
.mypage-provider-button:focus-visible,
.mypage-save-button:focus-visible,
.mypage-delete-button:focus-visible {
    outline: 3px solid rgba(21, 94, 239, 0.28);
    outline-offset: 2px;
}

.mypage-save-button.is-loading,
.mypage-save-button.is-saved,
.mypage-save-button.is-error {
    border-color: transparent;
}

.mypage-save-button.is-loading {
    background: #eef4ff;
    color: #274690;
}

.mypage-save-button.is-saved {
    background: linear-gradient(135deg, #155eef, #1f7ae0);
    color: #ffffff;
}

.mypage-save-button.is-error {
    background: #fff2f2;
    color: var(--mypage-danger);
    border-color: rgba(198, 40, 40, 0.24);
}

.mypage-save-button:disabled {
    background: #eef1f6;
    color: #7a8598;
    border-color: #d4dae5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .auth-login-modal__provider-btn,
    .mypage-provider-button,
    .mypage-save-button {
        transition: none;
    }

    .auth-login-modal__provider-btn:hover,
    .mypage-provider-button:hover,
    .mypage-save-button:hover {
        transform: none;
    }
}