/* 全体のレイアウトを整える */
html, body {
    background-color: #fff5f9; /* 優しいピンク */
    color: #333;
    font-family: 'Sawarabi Gothic', sans-serif;
    margin: 0;
    padding: 0;
}
  
/* TOP画像（被り回避・隙間なし） */
.header2 {
    background-color: #fff0f5; /* ライトピンク */
    border: none;
    padding: 0;
}

.header2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block; /* ← 画像下の余白を除去（inline-block対策） */
}
  .sidebar {
    background-color: #e9ecef;
    padding: 20px;
    height: 300px; /* 適宜調整 */
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  /* メインコンテンツ */
.main-content {
    width: 100%;
    max-width: 1500px; /* 必要に応じて調整（例: 960px, 1200px） */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 0 !important;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.15); /* やさしいピンクの影 */
}
  /* メインコンテンツの調整 */
.container-custom {
    display: flex;
    justify-content: center;
    background-color: #fff5f9;
    background-image: radial-gradient(#ffd6e0 1.0px, transparent 0.8px);
    background-size: 20px 20px;
    padding: 10px 10px 40px 10px;
    margin-top: 0 !important;
}
  
  /* TOP画像*/
  .top-image {
    width: 100%;
    text-align: center;
  }
  
  /* サーチフォーム*/
.search-container {
    margin-top: 20px;
    text-align: center;
    width: 100%;
}
  
  .search-container form {
    display: flex;
    gap: 10px;
    align-items: center;
}
.search-container input {
    flex: 1;
    min-width: 0;
}

.search-container button {
    white-space: nowrap;
}
  
  .search-form {
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #ced4da;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  
/* 入力フィールド */
.search-input {
    flex: 1;
    border: 1px solid #ced4da;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 検索フォーム外枠の横幅調整 */
.search-form-wrapper {
    width: 50%;
    max-width: 500px;
}
  
/* 検索ボタン */
.search-button {
    background-color: #ff69b4;
    color: white;
    padding: 10px 25px;
    font-size: 16px;
    border: none;
    border-radius: 25px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}
  
.search-button:hover {
    background-color: #e055a0;
}

  /* ランキング*/
  .image-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #c0b0a0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px; /* 画像の高さ（適宜変更） */
  }
  
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミング */
  }
  
  .rank {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: yellow;
    color: black;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 50%;
    font-size: 14px;
  }
  
  /* サイドバー */
  .sidebar {
    background-color: #fce4ec; /* 淡いピンク */
    border-right: 1px solid #f8a1b0;
    padding: 20px;
    width: 250px; /* 固定幅 */
    height: 100vh; /* 画面の高さいっぱいにする */
    position: sticky;
    top: 0;
  }
  
  .sidebar.fixed {
    position: fixed;
    top: 0;
    height: 100vh; /* 画面いっぱいに固定 */
    overflow-y: auto;
  }
  
  .group-card {
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .group-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
.group-card-custom {
    background: linear-gradient(135deg,
        #ffe4ec 0%,
        #fdddec 25%,
        #fcd3e7 45%,
        #f3d0ef 60%,
        #e4e1f9 75%,
        #d7f0f6 90%,
        #e0f9f1 100%);
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    padding: 12px;
    transition: transform 0.3s ease;
}

.group-card-custom:hover {
    transform: translateY(-4px);
}

.group-img-wrapper {
    position: relative; /* 必須：バッジの絶対位置の基準 */
    overflow: visible;  /* ← ここをvisibleに変更！ */
    width: 100%;
    aspect-ratio: 4 / 3; /* ← 旧: 41/33（=1.24）→ 新: 4/3（=1.33） */
    border-radius: 12px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
}

.group-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.group-name-box {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-family: 'Sawarabi Gothic', sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin: 4px;
    color: #000;
    font-size: 1rem; /* ← 旧: 0.95rem → 少し拡大 */
    padding: 4px 1px; /* 少し余裕を持たせる */
}

.vote-count {
    font-size: 0.9rem !important; /* ← 旧: 0.85rem */
    margin-top: 6px;
    margin-bottom: 6px;
}

  .rank-label {
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 999px;
  }
.rank-badge {
    position: absolute;
    top: -14px;
    left: -6px;
    padding: 4px 14px;
    background: linear-gradient(to right, #ff99cc, #ffccff);
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
    font-family: 'Sawarabi Gothic', sans-serif;
    border: 2px solid #fff;
}

/* ▼ お知らせ全体を中央寄せして3/5幅に */
.news-wrapper {
    background-color: #fffafd;
    border: 1px solid #ffe0ea;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

/* ▼ スクロール付きお知らせ表示欄（最大5件分の高さ） */
.news-wrapper .list-group {
    max-height: 11rem;  /* 調整可能。2.2rem × 5件 */
    overflow-y: auto !important;
    display: block !important;   /* Bootstrapのul的displayを強制解除 */
    padding: 0 !important;
    border: none !important;
    border-radius: 5px;
    background-color: transparent !important;
}

/* 各お知らせ項目（縦詰め＆横スクロールしない） */
.news-item {
    border: 1px solid #ffe0f0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 5px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    background-color: #ffffff;
    gap: 4px !important;
    margin-bottom: 0 !important;
    margin: 2px 0 !important;
}
.news-wrapper .list-group-item {
    margin: 0 !important;
    border: 1px solid #ffe0f0 !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    background-color: #fff !important;
}
.news-wrapper .list-group-item + .list-group-item {
    margin-top: 0 !important;
}

.news-item:hover {
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.2);
    transform: translateY(-2px);
}

.news-item.list-group-item {
    border: none !important;
}

/* 日付 */
.news-date {
    color: #999;
    font-size: 0.8rem;
}

/* タイトル */
.news-headline {
    font-size: 0.95rem;
    font-weight: 300;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-wrapper .text-end a {
    font-size: 0.85rem;
    font-weight: 500;
}

.news-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #d63384;
    font-family: 'Sawarabi Gothic', sans-serif;
    position: relative;
    display: flex;
    align-items: center;
}

.news-link {
    color: #d63384;
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.3s;
}

.news-link:hover {
    color: #b02165;
}

.news-title::after {
    content: '';
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(to right, #ff99cc, transparent);
    margin-left: 10px;
    border-radius: 999px;
}

.calendar-buttons {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(to right, #ffe0ec, #fff0f5) !important;
    background-color: #ffe0ec !important; /* ← グラデーション無効時対策 */
}

.calendar-btn:hover {
    background: linear-gradient(to right, #ffe4ec, #fff8fb); /* ほんのり変化 */
    box-shadow: 0 2px 6px rgba(255, 182, 193, 0.2); /* 少し浮く程度 */
    color: #c2185b;
}
.calendar-btn {
    flex: 1;
    text-align: center;
    background: linear-gradient(to right, #fff5f9, #fff0f5); /* ごく淡いグラデ */
    color: #d63384;
    font-weight: 500;
    padding: 10px 10px;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid #ffe4ec;
    font-family: 'Sawarabi Gothic', sans-serif;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60px;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(255, 182, 193, 0.1);
}

.btn-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.btn-subtext {
    font-size: 0.75rem;
    color: #555;
    font-weight: normal;
    line-height: 1;
}

.nav-tabs .nav-link.active {
  background-color: #ffe4ec;
  color: #d63384;
  font-weight: bold;
  border: 1px solid #ffc0cb;
}
/* ダミーボタンの見た目だけ維持して非アクティブに */
.dummy-btn {
    pointer-events: none;
    opacity: 0;
}

.calendar-img {
    max-width: 40%;
    height: auto;
}
/* タブ全体に丸みを出す */
.nav-tabs .nav-link {
    border-radius: 20px 20px 0 0 !important;
    border: 1px solid #ffc0cb;
    background-color: #fff;
    margin-right: 8px;
    padding: 10px 20px;
    font-weight: bold;
    color: #555;
    transition: all 0.3s ease;
}

/* アクティブ時の色（ピンク系） */
.nav-tabs .nav-link.active {
    background-color: #ffe4ec;
    border-color: #ff99cc #ff99cc #fff5f9;
    color: #d63384;
    border-radius: 24px 24px 0 0 !important;
}

/* モバイル時に幅100%にする */
@media (max-width: 576px) {
    .search-form-custom {
        width: 90%;
    }
}

@media (max-width: 768px) {
  .main-content {
    padding: 8px;
  }

  .calendar-btn {
    flex: 1 1 100%;
    font-size: 0.9rem;
    padding: 10px;
    height: auto;
  }

  .btn-title {
    font-size: 1rem;
  }

  .btn-subtext {
    font-size: 0.7rem;
  }

  .group-card-custom {
    padding: 8px;           /* 既存12px → 8px */
    border-radius: 10px;
  }

  .news-title {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {

.container-custom {
    padding: 1px 8px 20px 8px !important;
    background-color: #fff5f9 !important;
    background-image: radial-gradient(#ffd6e0 1.0px, transparent 0.8px);
    background-size: 20px 20px;
  }
  .container,
  .news-wrapper.container {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  
  /* 外周のcontainerの余白も少し縮めて */
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.1);
  }
    /* お知らせの最大高さを約半分に調整（5件 → 2〜3件分） */
  .news-wrapper .list-group {
    max-height: 7.5rem; /* 通常2.5rem × 3件 */
  }


  /* 各お知らせアイテムの高さと文字サイズを調整 */
  .news-item {
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    gap: 1px; /* 間隔も少しだけ */
  }
  .news-date {
    font-size: 0.8rem;    /* 見やすくする */
    min-width: 68px; /* ← さらに縮める */
  }

  .news-date-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  .news-headline {
    font-size: 0.85rem;
    max-width: 100%; /* ← タイトルを広げる */
  }
  .news-wrapper {
    padding: 12px 10px;
    box-shadow: 0 1px 4px rgba(255, 182, 193, 0.08);
    border-radius: 8px;
  }

  .news-wrapper .news-link {
    font-size: 0.8rem;
    margin-top: 4px;
  }

  .news-title {
    font-size: 1rem;
    margin-bottom: 0 !important;
    padding-left: 2px;
  }
  .news-header {
    margin-top: 8px !important; /* ← 上に少し余白追加 */
    padding: 0 12px; /* ← 左右に余白を追加 */
  }

  .news-title::after {
    display: none; /* モバイルでは横線を省略してスッキリ */
  }
  .news-link {
    font-size: 0.8rem;
    padding-right: 2px; 
  }
  
    .calendar-buttons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .calendar-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: 40px; /* ← 高さを確保 */
  }
    .btn-title,
  .btn-subtext {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  .calendar-img {
    max-width: 100%;
}
.header2 img {
    width: 100%;
    height: 220px; /* ← 好みに応じて高さ調整（例: 220〜280px） */
    object-fit: cover; /* 横が切れてもOKにする */
    display: block;
  }
  .ranking-row {
    --bs-gutter-x: .35rem;  /* 左右の間隔 */
    --bs-gutter-y: .50rem;  /* 上下の間隔 */
  }
  .group-name-box {
    margin: 2px;            /* 既存4px → 2px */
    padding: 1px 1px;      /* 既存4px 14px → 少し詰める */
    font-size: .95rem;
  }
  .vote-count {
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: .85rem !important;
  }
  .rank-badge {
    top: -10px;             /* 既存-14px → 少し上の余白を戻す */
    left: -4px;
    padding: 3px 10px;
    font-size: .85rem;
  }
  
}

/* 修正版：X（旧Twitter）共有ボタンのスタイル */
.x-share-button {
    display: block; /* ← 中央配置用 */
    width: fit-content; /* コンテンツの幅に合わせる */
    margin: 20px auto; /* ← 中央寄せ */
    background: linear-gradient(to right, #ff99cc, #ffc0cb);
    color: white;
    font-weight: bold;
    padding: 10px 24px;
    font-size: 1rem;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.x-share-button:hover {
    background: linear-gradient(to right, #ff80b3, #ffb6c1);
    transform: scale(1.03);
    color: #fff;
}

/* Bootstrapの .ms-3 を上書き */
.override-ms3 {
  margin-left: 0 !important;
}

.x-share-subtext {
  font-size: 0.70rem;
  color: #fff;
  margin-top: 4px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}