/*パーソナリティ全体を囲ってるやつハム*/
.personality-section {
  max-width: 2000px;   /* 好きな幅で制限 */
  margin: 0 auto;      /* 横中央に配置 */
  padding: 50px 20px;  /* 上下左右の余白 */
  box-sizing: border-box;
 
 
}



/*パーソナリティ全体を囲ってるやつハム*/



/*名前ソートボタン*/
.sort-buttons-wrapper {
  
  
  width: 100%;               /* 画面幅に応じて縮む */
  max-width: 680px;         /* 最大幅は680px */
  margin: 0 auto 70px auto;           /* 横中央に配置 */
}

.sort-buttons {
  display: flex;
  flex-wrap: wrap;           /* 横に並んだら折り返す */

  gap: 10px;                 /* ボタン間のスペース */
}

.sort-buttons button {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左に文字、右にアイコン */
  width: 100px;   /* 横長ボタン */
  height: 50px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: bold;
  background-color: #fff;         /* 背景は白 */
  border: 3px solid #000000;         /* ← ここでボーダー追加 */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
}

.sort-buttons button:hover {
  background-color: #eee;
  border-color: #00000;  /* ホバー時にボーダー色変更 */
  transform: translateY(-2px);
}

.sort-buttons button .toggle-icon {
  width: 16px;
  height: 16px;
  background-color: #999; /* 仮アイコン */
  border-radius: 50%;
}







/*名前ソートボタン*/



/*パーソナリティカードの方の全体*/





.cards-container {

   display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* カードの最小幅220px */
  gap: 5px;  /* カード間の隙間 */
  justify-items: center; /* カードをセル内で中央揃え */


}



/*パーソナリティカードの方の全体終わりん*/

/*パーソナリティカードそれぞれのデザイン*/





.personality-card {
  width: 140px;
  padding: 10px 0;  /* 上下10px、左右0に変更 */
  text-align: center;
  box-sizing: border-box;
}


.personality-card img {
  width: 140px;           /* さらに小さく */
  height: 140px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  margin: 0 auto 30px auto ;
	border: 8px solid #FFA500;  /* ボーダーを追加（色・太さ変更可能） */
  box-sizing: border-box;     /* ボーダー込みでサイズを維持 */
}




.personality-card p {
  margin: 2px 0;
  font-size: 14px;
  color: #666;
}


.personality-detail {
  display: none;         /* 最初は非表示 */
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  text-align: left;
}

.personality-card.active {
  transform: scale(1.05);  /* カード拡大 */
}

.personality-card.active .personality-detail {
  display: block;         /* 詳細情報表示 */
}

/*パーソナリティカードそれぞれのデザイン*/


/*パーソナリティカード拡大時の表示*/





.personality-card h3,
.personality-card p {
  margin: 5px 0;          /* 上下の余白 */
  color: #333;
  text-align: left;        /* 左揃え */
  padding-left: 0;         /* 必要なら余白リセット */
	
}


/* 名前（h3）はそのまま仮アイコンと並ぶ */
.personality-card h3 {
   display: flex;
  justify-content: space-between; /* 左テキストと右アイコン */
  align-items: flex-start;         /* 上に揃える */
  margin: 5px 0 10px;
  font-size: 22px;
  line-height: 1.2;                /* 行間を調整 */
  position: relative;              /* アイコン調整用 */
}

/* 仮アイコン */
.personality-card h3 .icon {
 
  
  flex-shrink: 0;
	 margin: 0;                       /* flex-start なのでマージンリセット */
  transform: translateY(50%);       /* 必要なら微調整 */
	
	 vertical-align: top;  /* これで1行目の上に揃う */
	
}





/* 番組名（オレンジ色＋下の放送時間と密着気味に） */
.personality-card .program-name {
  color: #FFA500;
  font-weight: bold;
  margin: 0 0 2px 0;   /* 名前との余白は残しつつ、下は狭め */
  line-height: 1.2;
}

/* 放送時間（番組名との間をさらに狭める） */
.personality-card .show-time {
  margin: 0;           /* 余白を詰める */
  font-size: 14px;
  line-height: 1.1;
  color: #666;
}





/*モーダル*/

/* モーダル全体の背景 */
.personality-modal {
  display: none; /* JSで切り替え */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7); /* 背景を暗く */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 中央のカード */
.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeInScale 0.3s ease;
	/* 番組名と同じオレンジ */
}

/* 写真 */
.modal-content img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 6px solid #FFA500; /* カードと統一感 */
}

/* 名前 */
.modal-content h3 {
  font-size: 24px;
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}


/* 放送時間 */
.modal-content .time {
  font-size: 16px;
  color: #555;

}

/* 閉じるボタン */
.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #333;
	  font-weight: 700; /* ← これを追加 */
  cursor: pointer;
  transition: color 0.2s;
	
}
.modal-close:hover {
  color: #FFA500;
}

/* 表示時のアニメーション */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



.modal-content .program-name,
.modal-content .time {
  text-align: left;
  margin: 2px 0;        /* 上下の余白を少なめに */
  line-height: 1.2;     /* 行間を狭める */
  padding-left: 10px;   /* 左にちょっとスペース */
}


.modal-content img {
  margin-bottom: 0px; /* 元々空きが大きい場合はここで調整 */
}

#modalName {
  margin-top: 0;       /* 上は写真にくっつける */
  margin-bottom: 20px; /* 下に少し余白をつける（数字は調整可能） */
}



.description {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  text-align: left;
}

.social-links {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.social-links a img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.2s;
}

.social-links a img:hover {
  transform: scale(1.1);
}




/* モーダル内の番組タイトル */
.modal-content .program-name {
  color: #FFA500;       /* オレンジ色 */
  font-weight: bold;
  font-size: 16px;
  text-align: left;     /* 左揃え */
  margin: 10px 0 5px 0;
  display: block;
}


/* モーダル内のパーソナリティ名 */
#personalityModal #modalName {
  font-size: 20px;
  font-weight: bold;
  text-align: left;   /* 左揃え */
  margin: 15px 0 5px 0;
  color: #333;
}

/* モーダル内の番組名 */
#personalityModal #modalProgram {
  font-size: 16px;
  font-weight: bold;
  color: #FFA500;      /* オレンジ色 */
  text-align: left;
  margin: 5px 0;
}

/* モーダル内の放送時間 */
#personalityModal #modalTime {
  font-size: 14px;
  color: #666;
  text-align: left;
  margin: 0 0 15px 0;
  display: block;
}

/* モーダル説明文 */
#personalityModal #modalDescription {
  font-size: 14px;
  color: #333;
  text-align: left;
  margin-bottom: 15px;
}

/* SNSアイコン */
#personalityModal .modal-sns {
  display: flex;
  gap: 10px;
}

#personalityModal .modal-sns a img {
  width: 24px;
  height: 24px;
}




#personalityModal .modal-sns a img {
  width: 24px;
  height: 24px;
  border: none;       /* ← これでボーダー消す */
  border-radius: 0;   /* 必要なら角丸もリセット */
}


.modal-close {
  position: absolute;
  top:20px;
  right: 20px;
  width: 30px;       /* ボタンの幅 */
  height: 30px;      /* ボタンの高さ */
  cursor: pointer;
}

.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;        /* 線の太さ */
  height: 100%;      /* 線の長さ */
  background-color: #000000;
  transform-origin: center;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ホバー時の色変更 */
.modal-close:hover::before,
.modal-close:hover::after {
  background-color: #FFA500;
}



/*モーダル*/

/*パーソナリティカード拡大時の表示*/





/*レスポンシブ*/



@media (max-width: 600px) {
	
	
   .cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 横2列に固定 */
    gap: 10px;             /* カード間の隙間 */
    justify-content: center; /* グリッド全体を中央に */
    justify-items: center;   /* 各カードも中央揃え */
  }


	 .personality-card {
    width: 100%;
    max-width: 140px;
    padding: 10px 0;  /* 左右0に調整 */
  }

  .modal-content {
    padding: 15px;
  }

  .modal-content h3 {
    font-size: 18px;
  }

  .modal-content .program-name,
  .modal-content #modalProgram {
    font-size: 14px;
  }

  .modal-content #modalTime {
    font-size: 12px;
  }

  .modal-close {
    top: 15px;
    right: 15px;
  }
}

/* デフォルトはボタン表示、セレクト非表示 */
.sort-select {
  display: none;
}

/* スマホサイズで切り替え */
@media (max-width: 600px) {
  .sort-buttons {
    display: none;
  }

  .sort-select {
    display: block;
    width: 100%;
    padding: 16px;
    padding-right: 50px; /* 右側に矢印スペースを少し広めに確保 */
    font-size: 18px;
    margin-bottom: 20px;
    color: black;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold;
    border-radius: 13px;
    border: 3px solid black;
    background: white;

    appearance: none;      /* Chrome, Safari, Opera用 */
    -moz-appearance: none; /* Firefox用 */
    -webkit-appearance: none; /* 古いSafari用 */
    position: relative;

    /* 自作矢印画像を設定 */
    background-image: url('../img/toggle.svg'); /* SVGのパスを変更 */
    background-repeat: no-repeat;
    background-position: right 15px center; /* 右端中央に配置 */
    background-size: 24px 24px;            /* 矢印サイズ調整 */
}

	  
	  /* セレクトの矢印を自作する場合 */


	.sort-select::after {
  content: "▼";         /* 表示したい矢印文字、絵文字もOK */
  position: absolute;
  right: 10px;           /* 右端の余白 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;  /* クリックを妨げない */
  color: #333;           /* 矢印の色 */
  font-size: 12px;       /* 矢印のサイズ */
}

	
  
	  
	  
	  
 
}



.personality-icon {
  width: 20px !important;
  height: 20px !important;
 
  margin-left: 6px !important;
  object-fit: contain !important;
  display: inline-block !important;
	 background: none !important;
  border: none !important;
  border-radius: 0 !important;
	
	  
  flex-shrink: 0;
	 margin: 0;                       /* flex-start なのでマージンリセット */
  transform: translateY(20%);       /* 必要なら微調整 */
	
	 vertical-align: top;  /* これで1行目の上に揃う */
}
.modal-sns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
    width: auto;       /* 横幅は親に合わせず自動 */
}

.modal-sns a img {
    width: auto !important;       /* 横幅自動 */
    max-width: none !important;   /* 親幅制限を解除 */
    height: 15px!important;                /* 縦だけ大きく */
    object-fit: contain;          /* 縦横比崩さず表示 */
    display: block;
    margin: 0;
}


/* 番組名の下の時間だけ色を変える */
.personality-modal #modalProgram .program-time {
    color: #949494 ;  /* 好きな色に変更できる */
    font-size: 0.9em ;  /* 番組名より少し小さくする場合 */
}