/* 柔らかくフレンドリーなFAQデザイン - 最終調整版 */
:root {
  /* 優しいカラーパレット */
  --primary: #60a5fa;         /* 空色 */
  --primary-hover: #3b82f6;   /* 濃い空色 */
  --primary-light: #e0f2fe;   /* 薄い空色 */
  --secondary: #f97316;       /* オレンジ */
  --secondary-hover: #ea580c; /* 濃いオレンジ */
  --secondary-light: #fff7ed; /* 薄いオレンジ */
  --accent: #8b5cf6;          /* パープル */
  --accent-hover: #7c3aed;    /* 濃いパープル */
  --accent-light: #f5f3ff;    /* 薄いパープル */
  --neutral-50: #fafafa;      /* 最も薄いグレー */
  --neutral-100: #ffffff;     /* 白 */
  --neutral-200: #f1f5f9;     /* 背景色 - 調整済み */
  --neutral-300: #e2e8f0;     /* 境界線 */
  --neutral-400: #94a3b8;     /* 薄いテキスト */
  --neutral-500: #64748b;     /* 中間テキスト */
  --neutral-600: #475569;     /* 標準テキスト */
  --neutral-700: #334155;     /* 強調テキスト */
  --neutral-800: #1e293b;     /* 見出し */
  --neutral-900: #0f172a;     /* 最も濃いテキスト */
  
  /* UI要素 */
  --font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.09);
  --transition: all 0.3s ease;
}

/* ベース設定 - 背景色を調整 */
body {
  color: var(--neutral-600);
  font-family: var(--font-family);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--neutral-200);
}

/* ヘッダーとコンテンツのスペーシング */
main#main-content {
  padding-top: 60px;
  background-color: var(--neutral-200);
}

main#main-content .wrap {
  padding-top: 30px;
  max-width: 960px;
  margin: 0 auto;
}

/* セクションスタイル */
.section {
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: 0 auto 2rem;
  padding: 1.75rem;
  border: none;
  transition: var(--transition);
}

.section:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* 見出し */
.section h2 {
  color: var(--neutral-800);
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-light);
  position: relative;
}

/* チャットエリア */
#free_chat_area, #fixed_area, #fixed_chat_area {
  background-color: var(--neutral-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-300);
  padding: 1.25rem;
  max-height: 450px;
  min-height: 150px;
  overflow-y: auto;
  margin-bottom: 1.25rem;
  scroll-behavior: smooth;
}

/* メッセージバブル共通 */
.bubble {
padding: 0.875rem 1.125rem;
  border-radius: var(--radius-lg);
  margin: 0.875rem 0;
  max-width: 80%;
  box-shadow: var(--shadow-sm);
  word-wrap: break-word;
  position: relative;
  clear: both;
  line-height: 1.6;
  transition: var(--transition);
  text-align: left; /* フキダシ内のテキストを左寄せに */
}

/* ユーザーメッセージ */
.user {
  background-color: var(--accent-light);
  color: var(--neutral-700);
  float: right;
  border-bottom-right-radius: var(--radius-sm);
  font-size: 1rem;
}

/* ボットメッセージ */
.bot {
  background-color: var(--primary-light);
  color: var(--neutral-700);
  float: left;
  border-bottom-left-radius: var(--radius-sm);
  text-align: left; /* テキストを左寄せにする */
  font-size: 1rem;
}

/* 入力フォーム - サイズ拡大版 */
#free_question_form {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

input[type="text"] {
  flex: 1;
  padding: 1rem 1.25rem;  /* パディングを拡大 */
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-100);
  font-size: 1rem;  /* フォントサイズを拡大 */
  color: var(--neutral-800);
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  height: 3.25rem;  /* 入力欄の高さを確保 */
}

input[type="text"]:focus {
  border-color: var(--accent); /* フォーカス時の色を紫に変更 */
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

input[type="text"]::placeholder {
  color: var(--neutral-400);
  font-size: 1rem;  /* プレースホルダーフォントサイズ調整 */
}

/* ボタン基本スタイル */
button {
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-lg);
  background-color: var(--accent);  /* 全体的にパープルをデフォルトに変更 */
  color: white;
  font-weight: 500;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: block;
  width: 100%;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

button:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* 送信ボタン - 調整版 */
#free_question_form button {
  width: auto;
  min-width: 7rem;
  font-size: 1rem;  /* フォントサイズ調整 */
  height: 3.25rem;  /* 入力欄と高さを合わせる */
  padding: 0 1.5rem;  /* 左右の幅を調整 */
  font-weight: 600;  /* やや太く */
  letter-spacing: 0.01em;  /* 文字間隔調整 */
}

/* "入力中..." 表示 */
.typing {
  opacity: 0.7;
  display: inline-block;
  position: relative;
  padding-left: 2rem;
  animation: gentle-pulse 2s infinite ease-in-out;
}

.typing::before {
  content: '🤔';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

@keyframes gentle-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

/* カテゴリーボタン - 前バージョンのまま */
.category_button {
  background-color: var(--primary-light);
  color: var(--primary-hover);
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-md);
  text-align: left;
  margin-bottom: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--primary);
}

.category_button:hover {
  background-color: var(--primary);
  color: white;
  transform: translateY(-1px);
}

/* 質問ボタン - 前バージョンのまま */
.question_button {
  background-color: var(--secondary-light);
  color: var(--secondary-hover);
  text-align: left;
  margin-bottom: 0.625rem;
  font-weight: normal;
  border: 1px solid var(--secondary);
}

.question_button:hover {
  background-color: var(--secondary);
  color: white;
}

/* 戻るボタン */
.back_button {
  background-color: var(--neutral-300);
  color: var(--neutral-700);
  width: auto;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}

.back_button:hover {
  background-color: var(--neutral-400);
  color: var(--neutral-100);
}

/* カテゴリタイトル */
.category_title {
  color: var(--primary);  /* 前バージョンのまま */
  margin: 1.25rem 0 0.875rem;
  font-size: 1.125rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--primary-light);  /* 前バージョンのまま */
 text-align: left; /* 明示的に左寄せに設定 */
}

/* リンク */
a {
  color: var(--accent);  /* 紫系に変更 */
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-hover);  /* 紫系に変更 */
  text-decoration: underline;
}

/* スクロールバー */
#free_chat_area::-webkit-scrollbar,
#fixed_area::-webkit-scrollbar,
#fixed_chat_area::-webkit-scrollbar {
  width: 8px;
}

#free_chat_area::-webkit-scrollbar-track,
#fixed_area::-webkit-scrollbar-track,
#fixed_chat_area::-webkit-scrollbar-track {
  background: var(--neutral-200);
  border-radius: 10px;
}

#free_chat_area::-webkit-scrollbar-thumb,
#fixed_area::-webkit-scrollbar-thumb,
#fixed_chat_area::-webkit-scrollbar-thumb {
  background: var(--primary-light);  /* 前バージョンのまま */
  border-radius: 10px;
  border: 2px solid var(--primary);  /* 前バージョンのまま */
}

#free_chat_area::-webkit-scrollbar-thumb:hover,
#fixed_area::-webkit-scrollbar-thumb:hover,
#fixed_chat_area::-webkit-scrollbar-thumb:hover {
  background: var(--primary);  /* 前バージョンのまま */
}

/* クリアフィックス */
#free_chat_area::after,
#fixed_chat_area::after {
  content: "";
  display: table;
  clear: both;
}

/*
#menseki {
  background-color: #fff8e1;
  border-left: 3px solid #ffbe0b;
  padding: 16px;
}
#menseki summary {
  color: #3a86ff;
  cursor: pointer;
  margin-bottom: 8px;
}
#menseki details {
  margin-top: 12px;
}
#goriyou-chuies {
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.1);
  text-align: left;
}
*/

/* 免責事項 */
details {
  margin-top: 0.75rem;
}

details summary {
  color: var(--accent);  /* 紫系に変更 */
  cursor: pointer;
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

details summary::before {
  content: '📝';
  margin-right: 0.5rem;
  font-size: 1rem;
}

details summary:hover {
  color: var(--accent-hover);  /* 紫系に変更 */
  text-decoration: underline;
}

details[open] summary {
  margin-bottom: 0.75rem;
}

details > div {
  padding: 1rem;
  background-color: var(--neutral-50);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section {
    padding: 1.25rem;
  }
  
  .bubble {
    max-width: 85%;
  }
  
  #free_question_form {
    flex-direction: column;
  }
  
  #free_question_form button {
    width: 100%;
    margin-top: 0.5rem;
  }
  main#main-content {
    padding-top: unset;
  }
}

/* ヘッダー固定の調整 */
header {
  z-index: 100;
  position: relative;
}

/* 空の状態表示 */
.empty-state {
  text-align: center;
  color: var(--neutral-400);
  padding: 3rem 1.5rem;
  font-size: 1rem;
  background-color: var(--neutral-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--neutral-300);
}

.empty-state::before {
  content: '✨';
  display: block;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* アニメーションと動きを追加するCSS - 既存のデザインを維持 */

/* 1. メッセージ表示アニメーション - 下からふわっと現れる効果 */
@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bubble {
  animation: bubble-in 0.3s ease-out;
}

/* 2. タイピングインジケーターのドットアニメーション */
@keyframes typing-dots {
  0% { opacity: 0.2; }
  20% { opacity: 1; }
  40% { opacity: 0.2; }
  100% { opacity: 0.2; }
}

.typing {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 2.5rem;
}

.typing::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  width: 1.5rem;
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.typing::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  width: 1.5rem;
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
  background-image: radial-gradient(circle, var(--primary) 3px, transparent 0),
                    radial-gradient(circle, var(--primary) 3px, transparent 0),
                    radial-gradient(circle, var(--primary) 3px, transparent 0);
  background-position: 0px center, 8px center, 16px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  animation: typing-dots 1.5s infinite linear;
}

/* 3. ボタンクリック時の波紋効果 */
button {
  position: relative;
  overflow: hidden;
}

button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.4s, opacity 0.8s;
}

button:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* 4. リンクホバー時のアンダーラインアニメーション */
a {
  position: relative;
  display: inline-block;
  padding: 0 0.125rem;
}

a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--accent-hover);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

a:hover {
  text-decoration: none !important; /* 元の下線スタイルを無効化 */
}

a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* 5. 詳細表示時の展開アニメーション */
@keyframes details-show {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

details[open] > div {
  animation: details-show 0.3s ease-out;
}

details summary::before {
  transition: transform 0.3s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

/* 6. ホバー、フォーカス時の視覚的フィードバック強化 */
input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}

.category_button:hover,
.question_button:hover {
  transform: translateY(-1px) translateX(3px);
}

.back_button:hover {
  transform: translateX(-3px);
}

.section:hover {
  transform: translateY(-2px);
}

/* 7. 「空の状態」表示のキラキラエフェクト */
@keyframes sparkle {
  0%, 100% { opacity: 0.7; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(5deg); }
}

.empty-state::before {
  animation: sparkle 3s infinite;
}

/* ボットとユーザーメッセージの吹き出し形状 */
.bot::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 16px;
  height: 16px;
  background-color: var(--primary-light);
  clip-path: polygon(100% 0, 100% 100%, 0% 100%);
}

.user::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: var(--accent-light);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

p.goriyou-chui {
  margin-bottom: 1em;
  text-align: left !important;
}

/* レスポンシブ対応 - 小さい画面では一部のエフェクトを無効化 */
@media (max-width: 480px) {
  .bubble::after {
    display: none;
  }
}