@charset "UTF-8";

/* タイトル中央配置 */
._txt1 {
  display: flex;
  justify-content: center; /* 横方向中央 */
  /* 必要なら高さ指定も可能 */
}

/* 検索フォームを右上に配置 */
#searchInput, #searchBtn {
  position: fixed;
  top: 60px;       /* 上からの距離 */
  z-index: 10000;  /* オーバーレイより上に表示 */
  height: 30px;    /* 高さを統一 */
  font-size: 16px; /* テキストサイズを揃える */
}

#searchInput {
  right: 79px;     /* ボタンの左側に配置 */
  width: 200px;    /* 検索ボックスの幅 */
  height: 25px;    /* 高さ微調整 */
}

#searchBtn {
  right: 20px;     /* 右端に配置 */
  width: 50px;     /* ボタン幅 */
}


body {
  background: #FFF7F5; /* ピーチミルク系の柔らかい色 */
  color: #4B3F3A;      /* 読みやすいブラウン */
}


/* ===== 優しい母親イメージの配色（変数） ===== */
:root {
  --bg: #FFF7F5;                  /* ピーチミルク系の背景 */
  --text: #4B3F3A;                /* 読みやすいブラウン */
  --field-bg: #FFFDFC;            /* 入力欄の背景（ほぼ白） */
  --field-border: #E7D8D6;        /* 入力欄の枠線（淡いベージュ） */
  --placeholder: #9C8F89;         /* プレースホルダー色 */
  --primary: #EFA7A4;             /* ボタンの基本色（やさしいピンク） */
  --primary-hover: #E59794;       /* ホバー時少し濃く */
  --shadow-soft: rgba(243, 182, 179, 0.4); /* ピンク系の柔らかい影 */
}

/* ===== 背景＆本文色（未設定なら適用） ===== */
body {
  background: var(--bg);
  color: var(--text);
}

/* ===== 検索フォーム（右上固定は既存設定を活かしつつ見た目強化） ===== */
#searchInput, #searchBtn {
  font-size: 16px;     /* 既存と合わせて読みやすく */
  border-radius: 10px; /* 角をやわらかく */
}

/* テキスト入力欄の見た目 */
#searchInput {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--text);
  padding: 6px 10px;   /* ふんわり余白 */
  box-shadow: 0 2px 6px var(--shadow-soft);
}
#searchInput::placeholder {
  color: var(--placeholder);
}
/* フォーカス時はやさしく強調 */
#searchInput:focus {
  outline: none;
  border-color: #EFBDBB; /* 少しピンク寄りに */
  box-shadow: 0 0 0 3px rgba(239, 167, 164, 0.25);
}

/* 検索ボタンの見た目 */
#searchBtn {
  background: var(--primary);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 6px var(--shadow-soft);
  transition: background 0.2s ease, transform 0.08s ease, box-shadow 0.2s ease;
}
/* ホバー・押下のフィードバック */
#searchBtn:hover {
  background: var(--primary-hover);
}
#searchBtn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px var(--shadow-soft);
}

/* ===== 検索結果オーバーレイがある場合の柔らかさ（任意） ===== */
#searchOverlay {
  background: rgba(75, 63, 58, 0.35); /* やわらかいブラウン系の半透明 */
}
#searchResults {
  background: #ffffff;
  border: 1px solid #F2E6E5;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

/* 閉じるボタンも柔らかくしたい場合（任意） */
#closeBtn {
  background: #E8C9C7;   /* 穏やかなローズベージュ */
  color: var(--text);
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  transition: opacity 0.2s ease;
}
#closeBtn:hover { opacity: 0.95; }

/* ===== モバイル向け微調整（画面幅が狭いとき） ===== */
@media (max-width: 480px) {
  #searchInput {
    right: 90px;  /* ボタンの左に余白確保 */
    width: 150px;
  }
  #searchBtn {
    right: 16px;
    width: 64px;
  }
}