/* リセットと基本設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    /* サイト全体の背景色 */
    background-color: #F8F8F8; 
    color: #333;
    line-height: 1.6;
    overflow-x: hidden; /* ★修正: 横方向のスクロールを禁止 */
}

/* --- ヘッダー画像とトップ情報ブロックの調整 --- */

/* ヘッダー全体 (画像格納用) の調整 */
.header {
    width: 100%; 
    max-width: 100%;
    padding: 0; /* 余白をゼロにして画面の端まで広げる */
    margin: 0;
    text-align: center;
}

/* ヘッダー画像のスタイル */
.header-image {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    height: auto; 
    display: block; 
}

/* ★修正: トップ情報ブロック（保有者数、ボタンなど）の調整 */
.info-block-top {
    padding: 20px 15px;
    text-align: center; 
    margin-top: -15px; /* 画像と情報の間隔を微調整 */
}

.info-block-top .subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
}

.info-block-top p {
    margin: 5px 0;
    font-size: 16px;
    font-weight: 700;
}

.info-block-top .large-number {
    font-size: 20px;
    font-weight: 900;
    color: #000;
}

.description-text {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
    padding: 0 15px;
}

/* OpenSea ボタンの再現 */
.opensea-button {
    display: inline-block; 
    background-color: #00BFFF; /* 鮮やかな青色 */
    color: white;
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
    padding: 15px 30px;
    margin: 20px auto;
    border-radius: 50px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 1.2;
}

.opensea-button:hover {
    opacity: 0.9;
}


/* --- 階級コンテナとブロック --- */
#rank-container {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

.rank-block {
    background-color: #FFF;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* 階級ヘッダー（色分けされた部分） */
.rank-header {
    color: white;
    padding: 15px;
    text-align: center;
}

.rank-header h2 {
    font-size: 24px;
    font-weight: 900;
    margin: 0;
}

.rank-header .rank-range {
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
}

/* 階級画像と説明文セクション */
.rank-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rank-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%; /* 円形に */
    margin-bottom: 15px;
    border-style: solid;
    border-width: 5px; /* ボーダーの太さ */
}

/* 階級画像ごとのボーダー色の指定 */
.rank-image.長老 { border-color: #FFD700; }
.rank-image.名主 { border-color: #4169E1; }
.rank-image.領主 { border-color: #FFA500; }
.rank-image.しょう屋 { border-color: #3CB371; }
.rank-image.村長 { border-color: #4169E1; }

.rank-description {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

/* ユーザーリスト */
.user-list {
    list-style: none;
    padding: 0 20px 20px;
    margin: 0;
    text-align: center;
}

.user-list li {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed #DDD;
}

.user-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* 階級ブロックごとの背景色の適用 */
.bg-長老 { background-color: #8B008B; }
.bg-名主 { background-color: #4169E1; }
.bg-領主 { background-color: #DAA520; }
.bg-しょう屋 { background-color: #3CB371; }
.bg-村長 { background-color: #FF8C00; }
.bg-その他 { background-color: #DC143C; } /* 1~9点の「その他」も追加 */


/* デスクトップ表示用（最大幅を調整） */
@media (min-width: 768px) {
    /* サイト全体の表示幅をデスクトップでも適度な幅に制限し、中央寄せにする */
    #rank-container, .info-block-top {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}