/* ======================================================= */
/* 1. ベーススタイル（デスクトップ向け：1201px以上） */
/* ------------------------------------------------------- */

/* --- カラー変数を使用した汎用スタイル --- */
.anime-text {
    color: var(--anime-card-text-default-color);
}

.back-color {
    background-color: var(--anime-cardsection-backdefault-color);
}

.anime-meta-text {
    color: var(--anime-card-metainfo-default-color);
}

/* --- フレックスコンテナ --- */
.top-contents-column {
    display: flex;
}

.contents {
    display: flex;
    flex-direction: column;
}

.main-group-sec {
    display: flex;
    flex-direction: row; /* デスクトップ：横並び */
    height: 800px; /* デスクトップ：高さ固定 */
}

/* --- 公開ビュー（public view） --- */
.main-usersite {
    display: block;
    width: 100%;
}

.usercontent {
    color: var(--anime-theme-dark-text);
}

.usercontent h1 {
    color: var(--anime-card-text-default-color);
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-size: xx-large; /* デスクトップ：最大のフォントサイズ */
    display: block;
    font-weight: 300;
}

.usercontent span {
    color: var(--anime-theme-dark-text);
    font-weight: 300;
}

.usercontent a {
    color: var(--anime-theme-dark-accent);
    font-weight: 300;
    text-decoration: none;
}

.usercontent div {
    display: block;
    color: var(--anime-theme-dark-text);
    font-weight: 300;
}

.usercontent main {
    display: block;
    color: var(--anime-theme-dark-text);
    font-family: sans-serif;
}

/* === コンテンツのラッパー === */
.container {
    padding: 20px;
    min-width: 800px; /* デスクトップ：最小幅を確保 */
    margin: 0 auto;
}

.containerhtml {
    padding: 20px;
}

/* === 戻るリンクなど === */
.back-link {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    color: #3f51b5;
    font-weight: bold;
}

.back-link:hover {
    text-decoration: underline;
}

/* === 公開ページ一覧リスト === */
.page-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-list li {
    background: #fff;
    margin-bottom: 12px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background 0.2s;
}

.page-list li:hover {
    background: #f0f4ff;
}

.page-list li a {
    color: #3f51b5;
    font-weight: bold;
    text-decoration: none;
}

.page-list li a:hover {
    text-decoration: underline;
}

.page-list li small {
    color: #777;
    display: block;
    margin-top: 6px;
    font-size: 12px;
}

/* ======================================================= */
/* 2. 広めのタブレット（max-width: 1200px以下） */
/* ======================================================= */
@media (max-width: 1200px) {
    .container, .containerhtml {
        padding: 18px;
        min-width: 550px; /* 最小幅を解除 */
    }
}


/* ======================================================= */
/* 3. 狭めのタブレット（max-width: 991px以下） */
/* ======================================================= */
@media (max-width: 991px) {
    .container, .containerhtml {
        padding: 15px;
        min-width: 500px;
    }
    
    .usercontent h1 {
        font-size: x-large;
    }

    .page-list li {
        padding: 12px;
    }
}


/* ======================================================= */
/* 4. 広めのモバイル（max-width: 767px以下） */
/* ======================================================= */
@media (max-width: 767px) {
    .container, .containerhtml {
        padding: 10px;
        min-width: 650px;
    }

    .page-list li {
        margin-bottom: 8px;
        padding: 10px;
    }

    .back-link {
        margin-top: 10px;
        font-size: 14px;
    }
}


/* ======================================================= */
/* 5. 狭めのモバイル（max-width: 575px以下） */
/* ======================================================= */
@media (max-width: 575px) {
    .container, .containerhtml {
        padding: 8px;
        min-width: 400px;
    }
    
    .usercontent h1 {
        font-size: large;
    }
    
    .usercontent span, .usercontent a, .usercontent div, .usercontent main {
        font-size: 14px;
    }
}

@media (max-width: 385px) {
    .container, .containerhtml {
        min-width: 350px;
    }
}