body {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #fff6f1, #ffe6f0);
  color: #5c3a3a;
  text-align: center;
}

body.home-bg {
  background-image: url("images/bg-rainbow-sky.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ヘッダー */
header {
  background-color: #ffe1ec;
  padding: 2rem 1rem;
  border-bottom: 3px dashed #f6c2d3;
}

h1 {
  font-size: 2rem;
  color: #d37b9c;
  margin-bottom: 0.5rem;
}

/* メイン */
main {
  padding: 2rem;
}
ul {
  list-style: none;   /* ← これが“点”を消す魔法！ */
  padding-left: 0;    /* ← 左の余白もスッキリさせるならこれもおすすめ！ */
}


fieldset {
  background-color: #fff9f6;
  border: 2px dashed #f8b9ca;
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.person {
  margin-bottom: 1.5rem;
}

input,
select,
button {
  font-size: 1rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
  border: 1px solid #f2c1cd;
  background-color: #fffefc;
}

.menu-links {
  background: #fffdf8;
  border: 3px dashed #ffc9c9;
  padding: 2rem;
  border-radius: 1.5rem;
  margin: 2rem auto;
  max-width: 600px;
  box-shadow: 0 0 15px #ffdede88;
  position: relative;
}

.menu-links h2 {
  font-size: 1.5rem;
  color: #d45b84;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 2px #fff;
}

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

.menu-links li {
  margin: 1rem 0;
}

.menu-links li a {
  background-color: #ffe8ee;
  padding: 0.8rem 1.4rem;
  border-radius: 2rem;
  color: #5c3a3a;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.menu-links li a:hover {
  background-color: #fbbbd5;
  transform: scale(1.05);
}

.kids-menu {
  background: #fdf9ff;
  border: 3px dashed #cfaaff;
  padding: 2rem;
  border-radius: 1.5rem;
  margin: 3rem auto 2rem;
  max-width: 600px;
  box-shadow: 0 0 15px #e0c9f888;
  text-align: center;
}

.kids-menu h2 {
  font-size: 1.3rem;
  color: #a16bc7;
  margin-bottom: 1rem;
}

.kids-menu ul {
  list-style: none;
  padding: 0;
}

.kids-menu li {
  margin: 1rem 0;
}

.kids-menu li a {
  background-color: #ede2ff;
  padding: 0.8rem 1.4rem;
  border-radius: 2rem;
  color: #5c3a7a;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.kids-menu li a:hover {
  background-color: #d8c1ff;
  transform: scale(1.05);
}


button {
  background-color: #ffd6e6;
  color: #5c3a3a;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0.6rem 1.2rem;
  border: none;
}

button:hover {
  background-color: #fcbdd5;
}

/* 占い結果 */
#result {
  background-color: #fff0f7;
  padding: 2rem;
  margin-top: 2rem;
  border: 2px dashed #f6b4c4;
  border-radius: 1rem;
}

/* おまじないカードページ背景 */
body.omajinai-bg {
  background: linear-gradient(to bottom, #d6d0ff, #fff0fa);
  color: #4b3752;
}

/* カード表示エリア */
.card-area {
  margin: 2rem auto;
  max-width: 700px;
  padding: 2rem;
  background: #fffafc;
  border: 2px dashed #dcb4da;
  border-radius: 1rem;
  font-size: 1.2rem;
  line-height: 1.8;
  box-shadow: 0 0 20px #eed9f9aa;
  transition: all 0.5s ease;
  word-break: keep-all;
  line-break: strict;
}

a.button-link {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #ffd6e6;
  color: #5c3a3a;
  border-radius: 1.5rem;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-top: 1rem;
}

a.button-link:hover {
  background-color: #fcbdd5;
}

.sns-links {
  background-color: #fff7fb;
  border: 2px dashed #f7b8d4;
  border-radius: 1rem;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 600px;
  box-shadow: 0 0 10px #fcd8eb88;
}

.sns-links h2 {
  font-size: 1.3rem;
  color: #cc6699;
  margin-bottom: 1rem;
}

.sns-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sns-links li a {
  background-color: #ffe1ec;
  padding: 0.6rem 1rem;
  border-radius: 1rem;
  color: #5c3a3a;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.sns-links li a:hover {
  background-color: #fcbdd5;
}

body.today-bg {
  background: linear-gradient(to bottom, #fdf6ff, #fff0f5);
  color: #4b3752;
}
#result {
  background-color: #fff9fc;
  border: 3px dashed #f8c6e4;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  box-shadow: 0 0 20px #fdd3ec80;
  text-align: center;
  line-height: 1.8;
}
button {
  background-color: #ffd6e6;
  color: #5c3a3a;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1rem;
}

button:hover {
  background-color: #fcbdd5;
  transform: scale(1.05);
}
#fortune-message {
  font-size: 1.2rem;
  font-weight: bold;
  color: #c75a91;
  margin-bottom: 1rem;
}

body.name-bg {
  background: linear-gradient(to bottom, #fffaf9, #fff0f4);
  color: #4b3752;
}
#result {
  background-color: #fff7fb;
  border: 3px dashed #e4aacc;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  box-shadow: 0 0 15px #f3c7de88;
  text-align: center;
  line-height: 1.8;
}
#name-message {
  font-size: 1.2rem;
  color: #b65789;
  font-weight: bold;
  margin-bottom: 1rem;
}
button {
  background-color: #ffd6e6;
  color: #5c3a3a;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1rem;
}

button:hover {
  background-color: #fcbdd5;
  transform: scale(1.05);
}

body.mirai-bg {
  background: linear-gradient(to bottom, #fff0f5, #f7faff);
  color: #4b3752;
}
#result {
  background-color: #fefaff;
  border: 3px dashed #d8b7ff;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  box-shadow: 0 0 20px #dbcfff88;
  text-align: center;
  line-height: 1.8;
}
#future-message {
  font-size: 1.2rem;
  font-weight: bold;
  color: #a05ea4;
  margin-bottom: 1rem;
}
#future-keyword,
#future-advice {
  color: #6b4c7a;
  font-weight: bold;
}
button {
  background-color: #f3d6ff;
  color: #5c3a6a;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1rem;
}

button:hover {
  background-color: #e8c2ff;
  transform: scale(1.05);
}

body.zenshi-bg {
  background: linear-gradient(to bottom, #f3f0ff, #fffafc);
  color: #403a52;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
#result {
  background-color: #fcf8ff;
  border: 3px dashed #c8b8e8;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 620px;
  margin: 2rem auto;
  box-shadow: 0 0 20px #d4c6f080;
  text-align: center;
  line-height: 1.8;
}
#zenshi-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #7b5ca4;
  margin-bottom: 1rem;
}

#zenshi-story {
  font-size: 1rem;
  color: #5a4d66;
  margin-bottom: 1rem;
}

#zenshi-message {
  color: #a674b0;
  font-weight: bold;
}
button {
  background-color: #e9d4ff;
  color: #4e2a65;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1rem;
}

button:hover {
  background-color: #dbc5ff;
  transform: scale(1.05);
}

body.tarot-bg {
  background: linear-gradient(to bottom, #f4f0ff, #fff5fb);
  color: #4a3952;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
#result {
  background-color: #fef9ff;
  border: 3px dashed #d7b9ff;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 620px;
  margin: 2rem auto;
  box-shadow: 0 0 20px #dec9ff80;
  text-align: center;
  line-height: 1.8;
}
#card-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #7a4cad;
}

#card-meaning {
  font-size: 1rem;
  font-style: italic;
  color: #5c4a6e;
}

#yuzu-message {
  font-size: 1rem;
  font-weight: bold;
  color: #a367b8;
  margin-top: 1rem;
}
button {
  background-color: #ecd4ff;
  color: #4e2c5a;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1rem;
}

button:hover {
  background-color: #d8c1f9;
  transform: scale(1.05);
}

body.seiza-bg {
  background: linear-gradient(to bottom, #f0f5ff, #fff0f8);
  color: #3d3555;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
#result {
  background-color: #fcfaff;
  border: 3px dashed #c8bdf5;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 620px;
  margin: 2rem auto;
  box-shadow: 0 0 20px #d6ccff88;
  text-align: center;
  line-height: 1.8;
}
#zodiac-name {
  font-size: 1.4rem;
  font-weight: bold;
  color: #6a4fb3;
}

#monthly,
#firstHalf,
#secondHalf,
#luckyColor,
#luckyItem {
  color: #59487c;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
button {
  background-color: #e1d5ff;
  color: #4a3a64;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1rem;
}

button:hover {
  background-color: #d5c8ff;
  transform: scale(1.05);
}

/* フッター */
footer {
  background-color: #ffe1ec;
  padding: 1rem;
  font-size: 0.9rem;
  color: #925c5c;
  margin-top: 3rem;
  border-top: 2px dashed #f6c2d3;
}

footer a {
  color: #cc6688;
  text-decoration: none;
  margin: 0 0.5rem;
}

footer a:hover {
  text-decoration: underline;
}