/*
Theme Name: Lightning Child Sample
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

/**
/**
 * entry-fee.css
 *
 * 「円」の後に人数に応じた補足メッセージを表示する。
 * JavaScriptで #yen に data-passenger-id を付与して分岐。
 */

#yen[data-passenger-id="opt-1"]::after {
  content: "（同乗者1名分のイベント入場料が含まれています）";
  font-size: 12px;
  color: #666;
  margin-left: 0.5em;
}

#yen[data-passenger-id="opt-2"]::after {
  content: "（同乗者2名分のイベント入場料が含まれています）";
  font-size: 12px;
  color: #666;
  margin-left: 0.5em;
}

#yen[data-passenger-id="opt-3"]::after {
  content: "（同乗者3名分のイベント入場料が含まれています）";
  font-size: 12px;
  color: #666;
  margin-left: 0.5em;
}

#yen[data-passenger-id="opt-4"]::after {
  content: "（同乗者4名分のイベント入場料が含まれています）";
  font-size: 12px;
  color: #666;
  margin-left: 0.5em;
}

/* ----------------------------------------
　 親テーマから子テーマに移植
　 ヘッダーロゴ・ナビゲーション配置調整
   Contact Form 7 表示調整（PC/スマホ/透過）
   Purpose: PCはテーブルの秩序を保ち、スマホはカード風に。
            フォーム背景は透明にしてページ背景を透過。
   Author: 宏幸 用カスタム
   Updated: 2025-09-26
   注意: 透過によりページ背景が透けます。文字色とボーダーで視認性を確保してください。
   ---------------------------------------- */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🖼️ ヘッダーロゴ・ナビゲーション配置調整
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#site-header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.site-header-logo {
  display: block;
  margin: 0 auto;
  max-width: 160px;
  height: auto;
}
.global-nav-layout--left-to-right,
.global-nav--layout--float-right {
  margin-left: auto;
  margin-right: auto;
  width: 30em;
  text-align: center;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 600px) {
  .site-header-logo {
    max-width: 120px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🖼️ ヘッダーロゴ・ナビゲーション配置調整
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#site-header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.site-header-logo {
  display: block;
  margin: 0 auto;
  max-width: 160px;
  height: auto;
}
.global-nav-layout--left-to-right,
.global-nav--layout--float-right {
  margin-left: auto;
  margin-right: auto;
  width: 30em;
  text-align: center;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 600px) {
  .site-header-logo {
    max-width: 120px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 Contact Form 7 表示調整CSS（親テーマ不要）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 🧱 全体のボックスサイズ安定化 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 📋 Contact Form 7 基本構造の初期化 */
.wpcf7-form {
  margin: 0;
  padding: 0;
}
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

/* 📋 フォーム全体（PC表示） */
.table-contactform7 {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  background-color: transparent;
}

/* 入力エリア幅最大 */
.wpcf7-form-control {
   width: 100%;
}

/* 📎 セル共通（PC表示） */
.table-contactform7 th,
.table-contactform7 td {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: transparent !important;
  color: #222;
  vertical-align: top;
  font-weight: bold;
}

/* 📎 左列（項目）幅指定（PCのみ） */
@media screen and (min-width: 900px) {
  .table-contactform7 th {
    width: 28%;
  }
}

/* 🧾 入力欄の基本スタイル（PC・スマホ共通） */
.table-contactform7 input,
.table-contactform7 select,
.table-contactform7 textarea {
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.95);
  color: #222;
  font-size: 14px;
}

/* 🧾 幅を揃える項目（郵便番号・同乗者人数・計算欄） */
.wpcf7 input[name="zip-code"],
.wpcf7 input[name="calculated-01"],
.wpcf7 select[name="menu-01"],
.wpcf7 select[name="passenger-count"] {
  width: 30% !important;
  background-color: #FFFFFF;
  margin-left: 8px;
  margin-right: 8px;
}

/* 🧾 その他の入力欄は左右均等に最大幅で表示 */
.table-contactform7 input:not([name="zip-code"]):not([name="calculated-01"]):not([name="menu-01"]):not([name="passenger-count"]),
.table-contactform7 select:not([name="menu-01"]):not([name="passenger-count"]),
.table-contactform7 textarea {
 width: calc(100% - 16px) !important; 
 margin-left: 8px; margin-right: 8px;
} 
/* 🧾 必須・任意・計算ラベルの共通デザイン
   - ラベルを「独立したブロック」にして背景色が確実に見えるようにする
   - inline-block にすることで、透明背景のフォームでも色が埋もれない
*/
/* 🧾 必須・任意・計算ラベルの共通デザイン */
.required-contactform7,
.unrequired-contactform7,
.calculated-contactform7 {
  padding: 5px;               /* ラベル内の余白（上下左右） */
  border-radius: 3px;         /* ラベルの角丸 */
  margin-right: 3px;          /* ラベル同士の間隔 */
  font-size: 12px;            /* ラベル文字サイズ */
  display: inline-block;      /* 背景色を確実に表示するための独立ブロック化 */
}

/* 🔴 必須ラベル（赤） */
.required-contactform7 {
  background-color: #DE8686 !important;  /* 背景色（赤系） */
  color: #fff;                            /* 白文字 */
}

/* 🔵 任意ラベル（青） */
.unrequired-contactform7 {
  background-color: #99CCFF !important;  /* 背景色（青系） */
  color: #fff;                            /* 白文字 */
}

/* 🟢 計算ラベル（エントリーフィー合計）
   - 他CSSによる透明化・非表示化を完全に上書きして確実に表示させる
*/
.calculated-contactform7 {
  background-color: #009933 !important;  /* 緑を確実に適用 */
  color: #fff !important;                /* 白文字を確実に適用 */
  display: inline-block !important;      /* display:none の上書き */
  opacity: 1 !important;                 /* opacity:0 の上書き */
  visibility: visible !important;        /* visibility:hidden の上書き */
}
/* 🧾 補足説明 */
.title-contactform7ctm {
  font-size: 13px;
  color: #333;
}

/* 📤 送信ボタン */
.custom-button input[type="submit"] {
  display: block;
  width: 70%;
  margin: 0 auto;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  background: #DE8686;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.custom-button input[type="submit"]:hover {
  background: #6faebd;
}

/* 🖋 プレースホルダー調整（枠に収める） */
::placeholder {
  font-size: 13px;
  line-height: 1.2;
  padding-left: 2px;
  color: #999;
}
#zip::placeholder {
  font-size: smaller;
}

@media screen and (max-width: 900px) {
  ::placeholder {
    font-size: 13px;
    line-height: 1.2;
  }
}

/* 通常時のプレースホルダー色（安心感のあるグレー）とフェード効果 */
input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999; /* 通常時の色（視覚的な安心感） */
  transition: color 0.3s ease; /* フォーカス時に自然に変化するように */
}

/* フォーカス時（入力中）はプレースホルダーを透明にする */
input:focus::placeholder,
textarea:focus::placeholder,
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder,
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  color: transparent; /* 入力中は静かに消えるように透明化 */
}

/* addr（your-address1）だけはプレースホルダーを消さずに残す */
#addr::placeholder,
#addr::-webkit-input-placeholder,
#addr::-moz-placeholder {
  color: #999 !important; /* 強制的に通常色を維持して除外 */
}

/* 📱 スマホ表示：カード型＋交互背景＋枠線＋角丸＋太字復元 */
@media screen and (max-width: 900px) {
  .table-contactform7 {
    display: block;
    border-spacing: 0;
    padding: 0;
  }

  .table-contactform7 tbody,
  .table-contactform7 tr {
    display: block;
    width: 100%;
    margin-bottom: 0;
    border-radius: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .table-contactform7 tr:nth-child(odd) {
    background-color: #d5c3e2 !important;
  }

  .table-contactform7 tr:nth-child(even) {
    background-color: #d6c6f0 !important;
  }

  .table-contactform7 th,
  .table-contactform7 td {
    background-color: transparent !important;
    padding: 4px 6px;
    border: none;
    display: block;
    width: 100%;
  }

  .table-contactform7 th {
    font-weight: bold; /* ✅ スマホ表示でも太字を維持 */
  }

  .table-contactform7 input,
  .table-contactform7 select,
  .table-contactform7 textarea {
    padding: 6px 8px;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* ----------------------------------------------------
   スマホ表示時（幅480px以下）のみ適用
   お名前欄4項目（セイ・メイ・姓・名）の
   プレースホルダー文字サイズを小さくして
   スマホで切れないように調整する
---------------------------------------------------- */
@media (max-width: 480px) {
  input[name="your-sei"]::placeholder,
  input[name="your-mei"]::placeholder,
  input[name="your-familyname"]::placeholder,
  input[name="your-firstname"]::placeholder {
    font-size: 11px;
  }
}

/* CF7 が自動生成する hidden の p 余白を消す */
.table-contactform7 td > p {
  margin: 0 !important;
  padding: 0 !important;
}