@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 1. 全体・共通レイアウト
************************************/
/* 背景透過 */
.main, .sidebar {
  background-color: #ffffff00;
}

/* ページタイトル非表示 */
.entry-title {
  display: none;
}

.content-in {
  width: 50%;
}

/* 見出し (大) */
.title {
  color: #364e96;
  padding: 1.2em 0 0.5em;
  border-top: solid 3px #364e96;
  border-bottom: solid 3px #364e96;
  margin: 0 0 2em 0;
}
.title p {
  text-align: center;
  font-size: 1.5em;
}

/* 見出し (小) */
.ko-midashi {
  background: #E1F5EE;
  color: #085041;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
}


/************************************
** 2. ヘッダー・フッター
************************************/
.logo-text {
  text-align: left;
  padding-left: 10px;
  padding: 5px 0 20px;
}

#header .site-name-text {
  font-size: 15px;
  font-weight: bold;
}

.footer-bottom {
  margin-top: 0px !important;
  font-size: 70%;
}

.footer-bottom-content {
  float: none;
  text-align: center;
}

/* フッタータイトル非表示 */
.footer-bottom-logo .site-name-text {
  display: none;
}


/************************************
** 3. Contact Form 7 基本設定
************************************/
:root {
  --cf7-accent: #26998E;
}

/* 段落の余白調整 */
.wpcf7-form p {
  margin-bottom: 0.3em !important;
}
.wpcf7-form p:has(.wpcf7-radio),
.wpcf7-form p:has(.wpcf7-checkbox),
.wpcf7-form input[type="text"] {
  margin-bottom: 1.5em !important;
}
.wpcf7-form p:has(.wpcf7-submit) {
  margin-top: 5em !important;
}

/* バリデーションエラー時の枠線 */
.wpcf7-not-valid input[type="radio"],
.wpcf7-not-valid input[type="checkbox"] {
  border-color: #dc3232;
}

/* 送信ボタン */
.wpcf7-form .wpcf7-submit {
  width: 40% !important;
  background-color: #033A6A !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 0 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  display: block !important;
  margin: 0 auto !important;
  transition: background-color 0.2s ease !important;
}
.wpcf7-form .wpcf7-submit:hover {
  background-color: #1a5a93 !important;
}


/************************************
** 4. Contact Form 7 カスタムデザイン（丸ボタン型）
** （ラジオボタン ＆ お食事チェックボックス）
************************************/
#meal-area {
  transition: opacity 0.3s ease;
}

.wpcf7-radio .wpcf7-list-item,
#meal .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0 32px 0 0;
}

.wpcf7-radio .wpcf7-list-item label,
#meal .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* 丸い外枠 */
.wpcf7-radio .wpcf7-list-item input[type="radio"],
#meal .wpcf7-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.wpcf7-radio .wpcf7-list-item:hover input[type="radio"],
#meal .wpcf7-list-item:hover input[type="checkbox"] {
  border-color: var(--cf7-accent);
}

/* 選択時の状態 */
.wpcf7-radio .wpcf7-list-item input[type="radio"]:checked,
#meal .wpcf7-list-item input[type="checkbox"]:checked {
  background: #fff;
  border: 1px solid var(--cf7-accent);
}

/* 選択時の中心マーク（塗りつぶし） */
.wpcf7-radio .wpcf7-list-item input[type="radio"]:checked::after,
#meal .wpcf7-list-item input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cf7-accent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ラベルテキスト */
.wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label,
#meal .wpcf7-list-item .wpcf7-list-item-label {
  font-size: 18px;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  top: 2px;
}
.wpcf7-radio .wpcf7-list-item:has(input[type="radio"]:checked) .wpcf7-list-item-label,
#meal .wpcf7-list-item:has(input[type="checkbox"]:checked) .wpcf7-list-item-label {
  color: var(--cf7-accent);
}


/************************************
** 5. 承諾確認・委任状チェックボックス（共通デザイン）
************************************/
/* 承諾確認（.wpcf7-acceptance）と委任状チェック（#proxy-check）を共通化 */
.wpcf7-acceptance,
#proxy-area .wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wpcf7-acceptance .wpcf7-list-item,
#proxy-area .wpcf7-checkbox .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 1.5em 0 0 0;
}

.wpcf7-acceptance .wpcf7-list-item label,
#proxy-area .wpcf7-checkbox .wpcf7-list-item label {
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

/* 四角い枠 */
.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"],
#proxy-area .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wpcf7-acceptance .wpcf7-list-item:hover input[type="checkbox"],
#proxy-area .wpcf7-checkbox .wpcf7-list-item:hover input[type="checkbox"] {
  border-color: var(--cf7-accent);
}

.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]:checked,
#proxy-area .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"]:checked {
  background: #fff;
  border: 1px solid var(--cf7-accent);
}

/* レ点の作成（共通） */
.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]:checked::after,
#proxy-area .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 6px;
  height: 13px;
  border: solid var(--cf7-accent);
  border-width: 0 3px 3px 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ラベルテキスト */
.wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label,
#proxy-area .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label {
  font-size: 18px;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  margin-left: 8px !important;
}

.wpcf7-acceptance .wpcf7-list-item:has(input[type="checkbox"]:checked) .wpcf7-list-item-label,
#proxy-area .wpcf7-checkbox .wpcf7-list-item:has(input[type="checkbox"]:checked) .wpcf7-list-item-label {
  color: var(--cf7-accent);
}

/* エラーメッセージのアニメーション */
.wpcf7-acceptance .wpcf7-not-valid-tip,
#proxy-area .wpcf7-checkbox .wpcf7-not-valid-tip {
  display: block;
  color: #dc3232;
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  padding-left: 2px;
  line-height: 1.4;
  animation: fadeIn 0.3s ease;
}


/************************************
** 6. 委任状エリア（#proxy-area）の個別調整
************************************/
#proxy-area {
  margin-top: 1em;
}

#proxy-area p {
  margin-top: 0.5em !important;
  margin-bottom: 0.8em !important;
  line-height: 1.3 !important;
}

#proxy-area .ko-midashi {
  margin-bottom: 0 !important;
}

#proxy-area input[type="text"] {
  margin-top: 2px !important;
  margin-bottom: 0.8em !important;
}

#proxy-area .proxy-acceptance-box {
  margin-top: 5px !important;
  margin-bottom: 2em !important; 
}
#proxy-area .proxy-acceptance-box .wpcf7-checkbox .wpcf7-list-item {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 2行テキスト（委任状）用：四角を上揃え */
#proxy-area .wpcf7-checkbox .wpcf7-list-item label {
  display: flex !important;
  align-items: flex-start !important;
  line-height: 1.5 !important;
}
#proxy-area .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"] {
  margin-top: 3px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}
#proxy-area .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label {
  top: 0 !important;
}


/************************************
** 7. 確認チェック（.confirm-check）の個別調整
************************************/
.confirm-check {
  margin: 0;
  padding: 0;
}

/* 1行テキスト用：四角を上下中央揃え */
.confirm-check .wpcf7-acceptance .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1;
}
.confirm-check .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
  margin: 0 !important;
}
.confirm-check .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label {
  top: 0 !important;
  font-size: 20px !important; /* 「入力内容を確認しました」の文字サイズ調整 */
}

/* 氏名入力枠と確認チェックボックスの隙間調整 */
#attend-area input[type="text"],
#proxy-area input[type="text"] {
  margin-bottom: 5px !important; 
}

#attend-area p:last-child,
#proxy-area p:last-child {
  margin-bottom: 0 !important;
}

.confirm-check .wpcf7-acceptance .wpcf7-list-item {
  margin-top: 0.7em !important;
}

/* 送信ボタン上の余白調整 */
.wpcf7-form p:has(.wpcf7-submit) {
  margin-top: 2em !important;
}

/* =========================================
   氏名の枠と「入力内容を確認しました」の隙間を半分に
   ========================================= */

/* 出席・委任エリアの「氏名入力枠」下の余白を減らす */
#attend-area input[type="text"],
#proxy-area input[type="text"] {
  margin-bottom: 5px !important; 
}

/* 入力枠を囲んでいる pタグ 自体の余白を消去 */
#attend-area p:last-child,
#proxy-area p:last-child {
  margin-bottom: 0 !important;
}

/* 「入力内容を確認しました」チェックボックス自体の上の余白を半分に */
.confirm-check .wpcf7-acceptance .wpcf7-list-item {
  margin-top: 0.7em !important;
}

/* =========================================
   「入力内容を確認しました」のテキストを若干大きく
   ========================================= */
.confirm-check .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label {
  font-size: 20px !important; /* 元の18pxから20pxに拡大 */
  
  /* ↓もし文字を太くして目立たせたい場合は、下の行の /* と */ を消してください */
  /* font-weight: bold !important; */
}

/* =========================================
   送信ボタンの上の余白を減らして上に引き上げる
   ========================================= */
.wpcf7-form p:has(.wpcf7-submit) {
  margin-top: 2em !important; /* 元の 5em から 2em に縮小 */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1023px以下 */
@media screen and (max-width: 1023px) {
  #header .logo-text {
    text-align: center;
    padding-left: 0;
  }
  .footer-bottom {
    margin-top: -20px !important;
  }
}

/* 834px以下 */
@media screen and (max-width: 834px) {
  .content-in {
    width: 80%;
  }
  .title {
    padding: 0.8em 0 0.3em;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  /* 必要ならばここにコードを書く */
}