@charset "UTF-8";
/*
Theme Name: My Blog Theme Child
Theme URI: https://example.com/
Author: Nagi
Author URI: https://example.com/
Description: My Blog Themeのカスタマイズ用子テーマです。独自デザインの調整はこちらに記述します。
Template: my-blog-theme
Version: 1.0.0
Text Domain: my-blog-theme-child
*/

/* --------------------------------------------------------------------------
 * ここから下に独自カスタマイズCSSを自由に追記できます
 * （親テーマのCSSはfunctions.phpの処理によって自動的に読み込まれます）
 * -------------------------------------------------------------------------- */

 /* ==========================================================================
   Contact Form 7 お問い合わせフォームのカスタマイズ
   ========================================================================== */

/* フォーム全体の枠組み */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 10px 0;
}

/* ラベルと入力項目のブロック化 */
.wpcf7-form label {
  display: block;
  font-weight: bold;
  font-size: 15px;
  color: #333333;
  margin-bottom: 20px;
}

/* テキスト入力欄・メールアドレス欄・本文テキストエリアのスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 15px;
  margin-top: 8px;
  font-size: 15px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  background-color: #fafafa;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

/* テキストエリアの高さ調整 */
.wpcf7-form textarea {
  height: 160px;
  resize: vertical; /* 縦方向のみリサイズ許可 */
}

/* フォーカス時（クリック・入力中）のハイライト効果 */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  border-color: #0066cc;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
  outline: none;
}

/* 送信ボタンのカスタマイズ */
.wpcf7-form input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 30px auto 0;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #0066cc;
  border: none;
  border-radius: 30px; /* 丸みのあるモダンなボタン */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

/* 送信ボタン ホバー時（マウスを乗せたとき） */
.wpcf7-form input[type="submit"]:hover {
  background-color: #004999;
  transform: translateY(-2px); /* 軽く浮き上がるアニメーション */
}

/* エラーメッセージ・完了メッセージの装飾 */
.wpcf7-response-output {
  margin-top: 25px !important;
  padding: 15px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  text-align: center;
}

/* 送信成功メッセージ（緑系） */
.wpcf7-form.sent .wpcf7-response-output {
  background-color: #e6f4ea;
  border: 1px solid #a8dab5 !important;
  color: #137333;
}

/* 入力エラーメッセージ（赤系） */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
  background-color: #fce8e6;
  border: 1px solid #fad2cf !important;
  color: #c5221f;
}

/* 入力必須エラー箇所の注記メッセージ */
.wpcf7-not-valid-tip {
  color: #d93025;
  font-size: 12px;
  margin-top: 5px;
  font-weight: normal;
}

/* ==========================================================================
   サイドバー 検索バーのスタイリング
   ========================================================================== */

/* 検索ブロック全体の高さを抑えて中央寄せ */
.wp-block-search {
  margin-bottom: 25px;
}

/* 検索入力エリアとボタンを横並びでスマートに配置 */
.wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 6px;
  overflow: hidden;
  background-color: #ffffff;
}

/* テキスト入力欄の高さ調整 */
.wp-block-search__input {
  height: 42px !important; /* 太さをすっきり抑える */
  padding: 0 12px !important;
  font-size: 14px;
  border: none !important; /* 外枠の重複を防ぐ */
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  flex: 1;
}

/* 送信（検索）ボタンの高さと見た目調整 */
.wp-block-search__button {
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background-color: #0066cc !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wp-block-search__button:hover {
  background-color: #004999 !important;
}