/* ページ全体の基本的なスタイル */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Pinterest風のフォントに近いものを指定 */
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0; /* 背景色 */
}

.pinterrest-row {
    column-count: 2; /* 表示するカラム数（画面幅に応じて変更推奨） */
    gap: 20px; /* アイテム間の隙間 */
}

/* 新しいランキング横並び用レイアウト */
.pinterest-row, .pinterest-raw {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    /*gap: 40px;*/
    width: 100%;
    max-width: 900px;
    margin: 0 auto 30px auto;
}

.pinterest-col {
    flex: 1 1 0;
    min-width: 320px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 画像グリッドのコンテナ */
.pinterest-grid {
    /* CSS Columns を使った簡易的なMasonryレイアウト */
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    column-count: 1; /* 表示するカラム数（画面幅に応じて変更推奨） */
    column-gap: 20px; /* カラム間の隙間 */
}

.pinterest-badge {
    position: absolute;
    top: -1px;
    left: -2px;
    width: 30% !important;
    /* height: 28% !important; */
    aspect-ratio: 1 / 1; /* アスペクト比を4:3に設定 */
    z-index: 2;
    pointer-events: none; /* バッジがクリックを邪魔しないように */
}

/* 各画像アイテム */
.pinterest-item {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    position: relative; /* バッジを絶対配置するために追加 */
    background-color: white;
    margin-bottom: 20px; /* アイテム間の縦の隙間 */
    break-inside: avoid-column; /* カラム内でアイテムが途中で途切れないようにする */
    border-radius: 16px; /* 角丸 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 影 */
    overflow: hidden; /* 角丸や影を正しく表示するため */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* ホバーエフェクト用 */
}

.pinterest-item:hover {
    transform: translateY(-5px); /* 少し浮き上がるエフェクト */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 画像 */
.pinterest-item-main {
    //width: 100%; /* 親要素の幅に合わせる */
    //witdh: 200px;
    height: 257px; /* 固定サイズにする場合はここを調整 */
    //height: auto; /* アスペクト比を維持 */
    display: block; /* 画像下の余分なスペースを削除 */

    object-fit: cover; /* アスペクト比を維持したまま、要素を完全に覆う */
    object-position: top; /* 中央を基準に表示（デフォルト値なので省略可） */
}

/* 画像のキャプションや情報（オプション） */
.pinterest-item .caption {
    padding: 15px;
    font-size: 0.9em;
    color: #333;
}

.pinterest-item .caption h3 {
    margin: 0 0 8px 0;
    font-size: 1em;
    font-weight: bold;
}

.pinterest-item .caption p {
    margin: 0;
    font-size: 0.85em;
    color: #666;
}



.vote-button {
  /* フォントとパディング */
  font-family: 'M PLUS Rounded 1c', sans-serif; /* Google FontsのM PLUS Rounded 1cを使用 */
  font-size: 10px;
  font-weight: bold;
  color: white;
  padding: 7px 11px;

  /* 背景のグラデーション */
  background: linear-gradient(45deg, #ff6b6b, #feca57);

  /* ボーダーと角丸 */
  border: none;
  border-radius: 50px;

  /* 影（立体感を出す）*/
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  /* カーソルとトランジション */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* マウスホバー時のエフェクト */
.vote-button:hover {
  transform: translateY(-3px); /* 少し上に移動 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* 影を濃くする */
  background: linear-gradient(45deg, #ff4757, #ff9f43); /* 背景色を少し変える */
}

/* クリック時のエフェクト */
.vote-button:active {
  transform: translateY(1px); /* 少し下に移動 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 影を薄くする */
}


.cawaiirank-dialog::backdrop {
    backdrop-filter: blur(8px);
}

.cawaiirank-dialog {
    box-shadow: 0px 20px 36px 0px rgba(0, 0, 0, 0.6);
}


/* レスポンシブ対応 (画面幅に応じてカラム数を変更) */
@media (max-width: 1200px) {
    .pinterest-raw {
        column-count: 2;
    }
    .pinterest-grid {
        column-count: 1;
    }
    .pinterest-badge {
        width: 30% !important;
    }
}

@media (max-width: 900px) {
    .pinterest-row, .pinterest-raw {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .pinterest-col {
        max-width: 100%;
        width: 100%;
    }
    .pinterest-grid {
        max-width: 100%;
    }
}

@media (max-width: 800px) {
    .pinterest-raw {
        column-count: 1;
    }
    .pinterest-grid {
        column-count: 1;
    }
    .pinterest-badge {
        width: 30% !important;
    }
}

@media (max-width: 500px) {
    .pinterest-row, .pinterest-raw {
        flex-direction: column;
        gap: 16px;
        padding: 0 2vw;
    }
    .pinterest-col {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .pinterest-grid {
        max-width: 100%;
    }
    .weekly-ranking-list {
        padding: 12px 4px;
    }
}