/* === ベーススタイル === */
body {
  margin: 0;
  padding: 0;
  font-family: 'Serif', Arial, sans-serif;
  background: linear-gradient(to bottom, #5d4037, #fff3e6); /* 木目調と光 */
  color: #333;
}

/* === ヒーローセクション（トップ部分） === */
header.hero {
  text-align: center; /* セクション全体を中央揃え */
  padding: 50px 20px;
  background: linear-gradient(to bottom, #ffcc99, #fff7e6);
  color: #5d4037;
  font-family: 'Serif', Arial, sans-serif;
  position: relative;
}

header.hero h1 {
  font-size: 3em;
  color: #ffffff; /* 明るいオレンジ */
  text-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.5);
  animation: glow 1.5s infinite alternate;
  margin-bottom: 10px;
}

header.hero p {
  font-size: 1.5em;
  margin-top: 10px;
  color: #ffffff; /* 明るい白に変更 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* テキスト影を追加 */
}

header.hero .hero-content {
  position: relative;
  z-index: 2;
  animation: fadeIn 2s ease-in-out;
}

header.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('images/hero-background.jpg') no-repeat center center/cover;
  z-index: 1;
  opacity: 0.7;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.6), 0 0 20px rgba(255, 69, 0, 0.4);
  }
  to {
    text-shadow: 0 0 25px rgba(255, 165, 0, 1), 0 0 35px rgba(255, 69, 0, 0.7);
  }
}

/* === サイト説明文セクション === */
.site-info {
  text-align: center; /* テキストを中央揃え */
  margin: 20px auto; /* セクション全体を中央寄せ */
  padding: 30px 20px;
  background: linear-gradient(to bottom, #fff3e6, #ffcc99); /* 優しい色合い */
  color: #333;
  border-radius: 10px;
  max-width: 800px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.site-info h2 {
  font-size: 2em;
  color: #a52a2a;
  margin-bottom: 15px;
  font-family: 'Serif', Arial, sans-serif;
}

.site-info p {
  font-size: 1.2em;
  line-height: 1.6;
  margin: 10px 0;
}

/* プライバシーセクションのスタイル */
.privacy-section {
  max-width: 600px;
  margin: 20px auto; /* 中央揃え */
  padding: 15px;
  background: #fff; /* 背景色を白に */
  border: 1px solid #d3a58f; /* ソフトな枠線 */
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center; /* テキストを中央揃え */
}

.privacy-section p {
  font-size: 1em;
  margin-bottom: 10px;
  color: #333; /* テキストカラーを濃いグレーに */
}

.privacy-section label {
  display: flex;
  align-items: center;
  justify-content: center; /* チェックボックスとテキストを中央揃え */
  font-size: 1em;
  color: #5d4037; /* テキストカラーをブラウン系に */
}

.privacy-section input[type="checkbox"] {
  margin-right: 10px; /* チェックボックスとテキストの間に余白 */
}

/* === フォームセクション === */
.form-section {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #ff7f50;
}

/* === フォームのラベル === */
form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #5d4037; /* 落ち着いたブラウン系の色 */
  font-size: 1em;
}

/* === 入力フィールドとセレクトボックス === */
form input,
form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #d3a58f; /* 柔らかいブラウン系の枠線 */
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #fff7f0; /* 薄いクリーム色 */
  font-size: 1em;
  color: #333;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

form input:focus,
form select:focus {
  background-color: #ffeee0; /* さらに明るい背景色 */
  border-color: #ff7f50; /* オレンジ系でアクセント */
  outline: none;
}

/* === ボタンのスタイル === */
form button {
  background-color: #ff7f50; /* 柔らかいオレンジ系 */
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボタンに軽い影を追加 */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

form button:hover {
  background-color: #ff6347; /* 濃いオレンジ */
  transform: translateY(-2px); /* 少し浮き上がるような効果 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 影を強調 */
}

form button:active {
  background-color: #e55335; /* さらに濃いオレンジ */
  transform: translateY(0); /* 元に戻す */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を控えめに */
}

/* === 結果セクション === */
.result-section {
  background: #fff7f0;
  padding: 30px;
  margin: 20px auto;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.result-section h2 {
  font-size: 1.8em;
  color: #a52a2a;
  margin-bottom: 20px;
}

.result-section p {
  font-size: 1.2em;
  line-height: 1.6;
  margin: 10px 0;
  color: #333;
}

.result-section .back-link {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #ff7f50;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.result-section .back-link:hover {
  background-color: #ff6347;
}

.result-section p {
    margin-bottom: 10px; /* 段落間の余白 */
    line-height: 1.6;    /* 行間 */
}
.notice-text {
  font-size: 1em;
  color: #d35400; /* 落ち着いたオレンジ色 */
  margin-bottom: 15px;
  text-align: center;
  line-height: 1.4;
  font-weight: bold;
}
/* === ローディングアニメーション === */
.loading-container {
  display: none; /* 初期状態では非表示 */
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
  z-index: 9999;
}

.loading-container.active {
  display: flex; /* 表示時にはフレックスボックスを有効化 */
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ffffff; /* 外枠の白色 */
  border-top: 6px solid #ff7f50; /* オレンジ色 */
  border-radius: 50%;
  animation: spin 1s linear infinite; /* 無限に回転するアニメーション */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.footer-container {
  text-align: center;
  font-size: 0.9em;
  color: #666;
}
.footer-container a {
  color: #ff7f50; /* オレンジ色でリンクを目立たせる */
  text-decoration: none; /* 下線を消す */
}

.footer-container a:hover {
  color: #ff6347; /* ホバー時に濃いオレンジ色 */
  text-decoration: underline; /* ホバー時に下線を追加 */
}