/*
menu
  メニュー画面用のCSS。
*/

:root {
  /* --- 和風・くすみ系カラー --- */

  --main-bg: #ebece3;   /* 全体の背景 */
  --frame-bg: #c4bab7;   /* 胡粉色（ごふんいろ）: 和紙のような生成り */
  --desc-bg: #f3eade;   /* 白練（しろねり）: さらに淡い背景 */
  --accent: #264653;    /* 藍鉄（あいてつ）: 落ち着いた青 */
  --accent2: #671d24;    /* 藍鉄（あいてつ）: 落ち着いた青 */

  --radius-lg: 16px;
  --radius-md: 12px;
}

/* 全体調整 */
body {
  background: var(--main-bg);
}

main.container {
  max-width: 1000px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.headline{
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}

.tips{
  font-size: clamp(1.0rem, 3.5vw, 1.6rem);
  color: #271f18;
  background: #fff;
  padding: 0.6rem;
  border-radius: 6px;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.cheer-info{
  font-size: clamp(1.0rem, 3.5vw, 1.6rem);
  color: #f3f0ed;
  background: #8d8d8d;
  padding: 0.6rem;
  border-radius: 6px;
  margin-top: 1.0rem;
  margin-bottom: 1.5rem;
}

/* 共通見出し */
.section-title {
  margin-bottom: 0.5rem;
}

.section-subtitle {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  color: #333;
}

/* ========== 現シーズンのキャラ ========== */

/* タイトル全体の行 */
.season-title-row {
  display: flex;
  flex-direction: row;      /* PCでは横並び */
  justify-content: center;  /* 中央揃え */
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* 季節全体の枠 */
.season-section {
  background: var(--frame-bg);
  border-radius: 12px;
  padding: 1.2rem 1.2rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 「今日の日付」：幅に応じてフォントを縮める＋最悪は省略 */
.season-title-todayname {
  max-width: 100%;
  min-width: 0;                 /* ←重要 */
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;          /* 1行に収める（折り返したいなら nowrap を消す） */
}

/* 季節名（大きい字） */
.season-title-seasonname {
  font-size: clamp(1.1rem, 4vw, 2.0rem);
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

/* 期間（小さい字） */
.season-title-term {
  font-size: clamp(0.9rem, 3.2vw, 1.6rem);
  color: #555;
  white-space: nowrap;
}

/* ▼ モバイルで縦並びにする */
@media (max-width: 640px) {
  .season-title-row {
    flex-direction: column;   /* 縦並び */
    gap: 0.1rem;
  }
}

/* ピックアップキャラコンテナ */
.season-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 0.2rem;
}

/* 各キャラカード（レスポンシブ） */

.season-card {
  display: flex;
  flex-direction: column;  /* ← これで縦並び */
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--desc-bg);

  /* カード自体のレスポンシブ幅（必要なら調整） */
  flex: 1 1 320px;
  min-width: 0;
}

/* アイコンと情報を横並びにする */
.season-member-wrap {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.season-icon-wrap { /* 大きさを決めるための枠 */
  flex: 0 0 96px;
  display: flex;
  justify-content: center;
  align-items: center;   /* アイコンを上下中央揃え */
}

.season-icon { /* 各キャラのアイコン */
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.season-info {
  flex: 1;
  display: flex;
  flex-direction: column;  /* ← これで縦並び */
  justify-content: center;
  gap: 0.25rem;            /* 行間を少し */
  min-width: 0;
}

/* 名前・天気アイコンを横並びにする行 */
.season-headline-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ← 左右に分ける */
  gap: 0.5rem;
  margin-bottom: 0;
  min-width: 0; /* ←重要 */
}

/* 各セルを均等幅に */
.season-headline-item {
  flex: 1 1 0;
}

/* 名前 */
.season-headline-left {
  flex: 1 1 auto;     /* 名前側を自然に広げる */
  text-align: left;
  min-width: 0; /* ←重要：ellipsisが効くために必要 */
}

/* アイコン */
.season-headline-right {
  flex: 0 0 auto;     /* アイコンの幅を確保して固定 */
  text-align: right;
}

/* 名前の文字表記 */
.season-headline-name {
  white-space: nowrap;     /* ← 改行しない */
  display: inline-block;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700%;
  color: #333;
}

/* 32x32px アイコン（元160x160を縮小表示） */
.season-headline-icon {
  width: 32px;
  height: 32px;
  object-fit: cover;
}

/* 名前の下の小さい文字 */
.season-subtext {
  margin: 0 0 0.3rem;
  color: #555;
  /* フォントサイズはコンテンツの大きさに合わせて可変 */
  font-size: clamp(1.2rem, 3.2vw, 2.1rem);
}

/* 今日・履歴ボタン行 */
.season-button-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.1rem;
  width: 100%;
}

/* ボタン風リンク（均等幅） */
.season-button-link {
  flex: 1;                     /* ← 横幅を均等に広げる */
  padding: 0.4rem 0.6rem;
  text-align: center;
  text-decoration: none;
  background: var(--accent);         /* 少し青みのある背景 */
  color: #eee;
  border-radius: 6px;
  font-size: 1.4rem;
  border: 1px solid #d4dbff;
  transition: background 0.2s, color 0.2s;
}

/* ホバー効果（Milligramの薄味に合わせたトーン） */
.season-button-link:hover {
  background: #d5dbff;
  color: #222;
}

/* 応援エリア：カード内で横いっぱい、下段に配置 */
.season-cheer {
  width: 100%;            /* ← 横いっぱい */
  display: flex;
  justify-content: center; 
}

/* 応援ボタン */
.season-cheer .cheer-btn {
  width: 100%;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.2;
  border: 2px solid rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;  /* 縦だけ少し小さく */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

/* hover */
.season-cheer .cheer-btn:hover {
  background: #c4c4c4; /* accent を少し濃く */
}

/* さらに小さい端末では、タイトルは縦積み＋省略を弱める等も可能 */
@media (max-width: 360px) {
  .season-title-row {
    gap: 0.2rem;
  }
  .season-headline-icon {
    width: 24px;
    height: 24px;
  }
}

/* フッター（メンバー全員についての処理） */

.season-footer {
  display: flex;
  flex-direction: column;  /* ← これで縦並び */
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--desc-bg);
}

.season-footer .row {
  align-items: stretch; /* 高さを揃える（デフォルトだが明示） */
}

.season-footer-col {
  display: flex;
  align-items: center;     /* ← 上下中央 */
  justify-content: center; /* ← 左右中央 */
  text-align: center;
}

/* 中身は全幅に伸ばす */
.season-footer-label{
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.7rem;
}

/* リンクも全幅ボタン化 */
.season-footer-link{
  display: block;
  width: 100%;
  font-size: 1.4rem;
}

/* ========== ナビゲーションカード ========== */

.nav-section {
  margin-bottom: 0.2rem;
}

.nav-column {
  margin-bottom: 0.8rem;
}

.nav-card {
  display: block;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  background: #c9dcd2;
  border: 1px solid #e2e5f0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.nav-card-secondary {
  background: #e8d6d6;
}

.nav-card-third {
  background: #efedf8;
}

.nav-card-fourth {
  background: #e8e8e8;
}

.nav-card h3 {
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.nav-card p {
  margin: 0;
  font-size: 1.3rem;
  color: #666;
}

.nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* 水巫データセクション */

/* 全体の枠 */
.character-section {
  background: var(--frame-bg);
  border-radius: 12px;
  padding: 1.2rem 1.2rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* タイトルの行 */
.character-title-row {
  display: flex;
  flex-direction: row;      /* PCでは横並び */
  justify-content: center;  /* 中央揃え */
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* タイトル */
.character-title {
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}


/* 水巫データコンテナ */
.maiden-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 0.2rem;
}

/* 各キャラカード（レスポンシブ） */
.maiden-card {
  display: flex;
  align-items: stretch; /* 左右のカラムを同じ高さに */
  gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--desc-bg);
  flex: 1 1 180px;     /* 最小幅を指定しつつ、横に並べる */
  min-width: 0;        /* はみ出し防止 */
}

/* テキスト側 */
.maiden-info {
  flex: 1;
}

.maiden-name {
  white-space: nowrap;     /* ← 改行しない */
  display: inline-block;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  font-weight: 700%;
  color: #333;
}

/* リスト全体のリセット（マーカー無し・余白調整） */
.maiden-nav-container ul {
  list-style: none;    /* 先頭の記号を消す */
  margin: 0;
  padding: 0;
}

/* 行間と余白を少し詰める */
.maiden-nav-container li {
  line-height: 1.4;    /* 通常っぽい行間 */
  margin: 0.15rem 0;
}

/* 最上位のリストをアクセント色の帯に */
.maiden-nav-container > ul > li {
  width: 100%;               /* 必須：幅いっぱい */
  background: #264653;       /* アクセント背景 */
  color: #fff;
  border-radius: 4px;
  padding: 0;
  overflow: hidden;          /* 角丸がサブリストまで綺麗に効く */
}

/* ▼ 最上位 li 内のリンク or テキスト部分をブロック化して全幅 clickable に */
.maiden-nav-container > ul > li > a {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
}

.maiden-nav-container > ul > li > a:hover {
  background: #1e3a45;   /* hover 強調（任意） */
}

/* ▼ 「ハイスコア」の部分はテキストなので、それも全幅ブロック化 */
.maiden-nav-container > ul > li:not(:has(a)) {
  padding: 0.5rem 0.75rem;
}

/* ▼ サブリスト（字下げ） */
.maiden-nav-container > ul > li > ul {
  padding: 0.5rem 0.75rem 0.5rem 1.5rem; /* 内側に余白を追加 */
  background: #355c72;  /* サブリスト背景（アクセントの少し明るい色） */
}

/* サブリストの文字 */
.maiden-nav-container > ul > li > ul > li {
  opacity: 0.9;
  margin: 0.2rem 0;
  color: #fff;
}

.notice{
  font-size: clamp(1.1rem, 3.5vw, 1.8rem);
}

input.password-form{
  background-color: white;
}

input.word-form{
  background-color: white;
}

.submit {
  background-color: #5599f1;
  border-width: 0;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 20%;
  width: 180px;
  height: 40px;
  font-size: 1.5rem;
}

.to-menu {
  align-items: center;
  border-width: 0;
  justify-content: center;
  text-decoration: none;
  border-radius: 20%;
  width: 180px;
  height: 40px;
  font-size: 1.5rem;
}