/* 
 * membership.css
 * 会員ランクアップグレードページ用のスタイル
 */

/* メンバーシップセクション */
#secMembership {
  padding: 60px 0;
  background-color: #f9f9f9;
}

/* 現在の会員ランク表示 */
.current_rank_box {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.current_rank_box h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.rank_info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.rank_label {
  font-size: 1.1rem;
  color: #6c757d;
}

.rank_name {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0.5rem 2rem;
  border-radius: 30px;
  background-color: #e9ecef;
  color: #495057;
}

.rank_name.rank_2 {
  background-color: #d4edda;
  color: #155724;
}

.rank_name.rank_3 {
  background-color: #fff3cd;
  color: #856404;
}

.rank_name.rank_4 {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* ランク表コンテナ */
.rank_table_container {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rank_table_container h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text);
  text-align: center;
}

.table_description {
  text-align: center;
  color: #6c757d;
  margin-bottom: 2rem;
}

/* ランク表ラッパー（横スクロール対応） */
.rank_table_wrapper {
  overflow-x: auto;
  margin-bottom: 2rem;
}

/* ランク表 */
.rank_table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background-color: #fff;
}

.rank_table th,
.rank_table td {
  padding: 1rem;
  text-align: center;
  border: 1px solid #e9ecef;
}

.rank_table th {
  background-color: #f8f9fa;
  font-weight: bold;
  font-size: 1rem;
}

/* 機能列 */
.feature_col {
  width: 20%;
  text-align: left !important;
  background-color: #f8f9fa;
}

.feature_name {
  text-align: left !important;
  font-weight: 500;
  color: #333;
}

/* ランク列 */
.rank_col {
  width: 16%;
}

.rank_col.free {
  background-color: #f8f9fa;
}

.rank_col.regular {
  background-color: #e8f5e9;
}

.rank_col.gold {
  background-color: #fffbf0;
}

.rank_col.platinum {
  background-color: #e3f2fd;
}

.rank_col.introducible {
  background-color: #fce4ec;
}

/* チェックマーク */
.rank_check {
  vertical-align: middle;
  font-size: 0.9rem;
  color: #6c757d;
}

.icon_circle,
.icon_cross,
.icon_triangle {
  font-size: 1.5rem;
  font-weight: bold;
}

.icon_circle {
  color: #28a745;
}

.icon_cross {
  color: #dc3545;
}

.icon_triangle {
  color: #ffc107;
}

.rank_check small {
  display: block;
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* 価格行 */
.rank_check.price {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--main);
}

/* 女性用テーブル */
.female_table .rank_col {
  width: 26.6%;
}

/* アップグレードアクション */
.upgrade_actions {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

.upgrade_actions h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.upgrade_actions p {
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.upgrade_actions .button {
  min-width: 200px;
}

/* 最上位ランクメッセージ */
.max_rank_message {
  padding: 1.5rem;
  background-color: #d1ecf1;
  border-radius: 8px;
  color: #0c5460;
}

.max_rank_message p {
  margin: 0;
  font-weight: 500;
}

/* 注意事項 */
.membership_notes {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.membership_notes h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
  border-bottom: 2px solid var(--main);
  padding-bottom: 0.5rem;
}

.membership_notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.membership_notes li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: #495057;
  line-height: 1.6;
}

.membership_notes li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--main);
  font-weight: bold;
}

/* お問い合わせセクション */
.contact_section {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.contact_section h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.contact_section p {
  color: #6c757d;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.contact_buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.contact_buttons .button {
  min-width: 200px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  #secMembership {
    padding: 40px 0;
  }
  
  .current_rank_box,
  .rank_table_container,
  .membership_notes,
  .contact_section {
    padding: 1.5rem;
  }
  
  .current_rank_box h2,
  .rank_table_container h2 {
    font-size: 1.25rem;
  }
  
  .rank_name {
    font-size: 1.25rem;
    padding: 0.375rem 1.5rem;
  }
  
  .rank_table th,
  .rank_table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }
  
  .icon_circle,
  .icon_cross,
  .icon_triangle {
    font-size: 1.25rem;
  }
  
  .rank_check small {
    font-size: 0.625rem;
  }
  
  .rank_check.price {
    font-size: 0.9rem;
  }
  
  .contact_buttons {
    flex-direction: column;
  }
  
  .contact_buttons .button {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .rank_info {
    flex-direction: column;
  }
  
  .rank_label {
    font-size: 1rem;
  }
  
  .rank_table {
    min-width: 500px;
  }
  
  .rank_table th,
  .rank_table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
  }
  
  .feature_name {
    font-size: 0.8rem;
  }
  
  .icon_circle,
  .icon_cross,
  .icon_triangle {
    font-size: 1rem;
  }
  
  .upgrade_actions h3,
  .membership_notes h3,
  .contact_section h3 {
    font-size: 1.1rem;
  }
}

/* アニメーション */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.button_bgmain:hover {
  animation: pulse 0.3s ease-in-out;
}

/* 横スクロールインジケータ */
.rank_table_wrapper {
  position: relative;
}

.rank_table_wrapper::-webkit-scrollbar {
  height: 8px;
}

.rank_table_wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.rank_table_wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.rank_table_wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}