@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Raleway:800&display=swap');

/* ========== 全体 ========== */
body {
  font-family: 'Raleway', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  background-color: #F4F4EF;
  color: #5B545C;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
}

/* ========== ドット柄背景 ========== */
.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #F4F4EF;
  opacity: 0.6;
  z-index: -1;
}

.Polka_v2 {
  background-image: radial-gradient(#B0A8A6 2px, transparent 2px), radial-gradient(#B0A8A6 2px, transparent 2px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* ========== ヘッダー ========== */
header {
  padding: 4em 0 3em 0;
  position: relative;
  z-index: 100;
}

h1 {
  font-size: 3.2rem;
  font-family: 'Impact', sans-serif;
  margin: 0;
  color: #5B545C;
  text-shadow: none;
  letter-spacing: 2px;
}

/* ========== ナビゲーション（HOMEボタン） ========== */
/* 🌟 ここが消えてしまっていたので復活させました！ */
.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1.5em;
  margin-top: 1.5em; /* タイトル(h1)との間に少し隙間を作りました */
}

.navbar a {
  text-decoration: none;
  color: #5B545C;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 10px 28px;
  border-radius: 40px;
  background: #ffffff;
  border: 2px solid #5B545C;
  box-shadow: 4px 4px 0px #5B545C;
  transition: all 0.2s ease;
  display: inline-block; /* ボタンとしてしっかりクリックできるようにする魔法 */
}

.navbar a:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #ffb71c;
  border-color: #ffb71c;
  color: #ffb71c;
}

/* ========== 各項目のタイトル(h2) ========== */
h2 {
  font-size: 1.8rem;
  margin: 1.5em 0 1em 0;
  color: #5B545C;
  letter-spacing: 3px;
  font-weight: bold; 
}

/* ========== サブページのレイアウト ========== */
.subpage-container {
  margin-top: 3em; 
  margin-bottom: 5em;
  padding: 0 2em;
}

/* ========== 文字だけカードのリスト（縦一列） ========== */
.text-card-list {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  max-width: 500px;
  margin: 0 auto 3em auto;
}

.text-card {
  display: block;
  background: #ffffff;
  padding: 1.2em 1.5em;
  border-radius: 12px;
  text-decoration: none;
  color: #5B545C;
  font-size: 1.1rem;
  font-weight: bold;
  border: 2px solid #5B545C;
  box-shadow: 4px 4px 0px #5B545C;
  transition: all 0.3s ease;
}

.text-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #ffb71c;
  border-color: #ffb71c;
  color: #ffb71c;
  background-color: #ffffff;
}

/* ========== [修正] 最後の特別な重要カード(UPS) ========== */

/* （ここは変更なし）特別なカード(Featured)の通常状態のデザイン */
.text-card.text-card-featured {
  border-color: #ffb71c;
  box-shadow: 6px 6px 0px #ffb71c;
  padding: 1.8em 2em;
  font-size: 1.3rem;
  position: relative;
  margin-top: 1.5em;
}

/* （ここは変更なし）特別なカードのホバー時の挙動 */
.text-card.text-card-featured:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0px #ffb71c;
  color: #ffb71c;
  background-color: #ffffff;
}