/*
    Theme Name:     Twenty Twenty-Five Child
    Template:       twentytwentyfive
*/

/* ---- LP専用 CSS（lp001） ---- */
/* 親要素のpaddingを削除（全幅表示したい要素がある場合） */
.page-template-lp001 .has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 全幅表示用クラス - 最大幅645pxで中央寄せ */
.lp-fullwidth {
  width: 100% !important;
  max-width: 645px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================================
   WordPress画像ブロックの最大幅を645pxに制限
================================== */
/* 画像ブロック全体の制限 */
body .wp-block-image,
body figure.wp-block-image {
  max-width: 645px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 画像要素自体の制限 */
body .wp-block-image img,
body figure.wp-block-image img {
  max-width: 645px !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================================
   LP共通スタイル
================================== */
/* 共通背景色 */
body.page-template-lp001,
body.page-template-lp001 {
  background-color: #F8F7F5;
}

/* LP本体のみにpadding-topを適用 */
body.page-template-lp001 {
  padding-top: 70px;
}

/* ==================================
   Contact Form 7 スタイル
================================== */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* Contact Form 7が自動生成するpタグのマージンをリセット */
.wpcf7-form p {
  margin: 0;
}

/* form-label内のpタグも中央寄せ */
.form-label p {
  display: flex;
  align-items: center;
  margin: 0;
}

/* 必須ラベル */
.required {
  background-color: #E25A43;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  margin-right: 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

/* フォーム行 */
.form-row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}

.form-label {
  font-weight: bold;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

/* 2列レイアウト */
.form-row--half {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.form-col {
  flex: 1;
}

/* 入力フィールド */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  margin-top: 4px;
}

.wpcf7-form select {
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M0 0l6 8 6-8z" fill="%23333"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ラジオボタン */
.wpcf7-form .wpcf7-radio {
  display: flex;
  gap: 20px;
  margin-top: 4px;
  flex-direction: row;
}

.wpcf7-form .wpcf7-list-item {
  margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
  font-weight: normal;
  font-size: 16px;
}

.wpcf7-form input[type="radio"] {
  margin-right: 6px;
}

/* 送信ボタン */
.form-submit {
  text-align: center;
  margin-top: 30px;
}

/* プライバシーポリシー同意文 */
.form-submit__notice {
  font-size: 13px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 12px;
}

.form-submit__notice a {
  color: #89745D;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.form-submit__notice a:hover {
  opacity: 0.7;
}

.submit-button {
  background-color: #E25A43;
  color: #fff;
  padding: 18px 60px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
  display: block;
  margin: 0 auto;
}

.submit-button:hover {
  opacity: 0.85;
}

/* 小文字のヘルプテキスト */
.wpcf7-form small {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

/* 注釈の直後の入力欄はmargin-topをリセット */
.wpcf7-form small + select,
.wpcf7-form small + input {
  margin-top: 0;
}

/* バリデーションエラー */
.wpcf7-form .wpcf7-not-valid-tip {
  color: #E25A43;
  font-size: 13px;
  margin-top: 4px;
}

.wpcf7-form .wpcf7-response-output {
  margin: 20px 0;
  padding: 12px;
  border-radius: 4px;
}

.wpcf7-form .wpcf7-mail-sent-ok {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.wpcf7-form .wpcf7-validation-errors {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .wpcf7-form {
    padding: 15px;
  }
}

/* =========================================================
   スマホ表示修正：日付・時刻の横並び崩れ防止
   ========================================================= */
@media screen and (max-width: 768px) {

  /* ----------------------------------------------
     1. テキスト入力・日付・選択リストの共通リセット
     ---------------------------------------------- */
  /* ラジオボタンへの影響を防ぎつつ、統一スタイルを適用 */
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="date"],
  .wpcf7-form select,
  .wpcf7-form textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important; /* iOSの特殊装飾を削除 */
    appearance: none !important;
    border-radius: 4px !important;
    height: 44px !important; /* ★高さ統一 */
    line-height: 1.3 !important;
    margin: 0 !important;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 14px !important; /* 横並び時の文字切れを防ぐ */
  }

  /* ----------------------------------------------
     2. 構造の修正と横並びの強制
     ---------------------------------------------- */
  /* CF7が出力するpタグのマージンをリセット (崩れの原因対策) */
  .form-row--half .form-col p {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 横並びコンテナの設定 */
  .form-row--half {
    display: flex !important;
    flex-wrap: nowrap !important; /* 折り返し禁止 */
    gap: 8px !important; /* 間の隙間 */
    align-items: center !important;
    width: 100% !important;
  }

  /* 3. 日付と時間を完全に均等に配分する設定 */
  .form-row--half .form-col {
    /* 伸びる(1), 縮む(1), 基準幅(0%)。これで完全に50%ずつに割り振られます */
    flex: 1 1 0% !important;

    width: 50% !important;
    min-width: 0 !important; /* ★日付入力欄が勝手に幅を広げるのを停止 */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 4. 個別要素の調整 */
  .form-row--half .form-col input[type="date"] {
    padding: 0 5px !important; /* 左右の余白を詰める */
    text-align: left;
  }

  .form-row--half .form-col select {
    background-position: right 8px center !important;
    padding-right: 20px !important;
  }

  /* ----------------------------------------------
     5. ラジオボタンの保護 (念のため再掲)
     ---------------------------------------------- */
  /* ラジオボタンは元のスタイル（小さな丸）を維持 */
  .wpcf7-form input[type="radio"] {
      width: auto !important;
      height: auto !important;
      -webkit-appearance: radio !important;
      appearance: radio !important;
  }
}