@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.logo-text {
    text-align: left;
    padding-left: 10px;
    padding: 5px 0 20px;
}

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

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


/*背景透過*/
/*.header-container,*/ .main, .sidebar/*, .footer*/ {
    background-color: #ffffff00;
}



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

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

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


/* バリデーションエラー時の枠線（ラジオ・チェックボックス共通） */
.wpcf7-not-valid input[type="radio"],
.wpcf7-not-valid input[type="checkbox"] {
  border-color: #dc3232;
}

/* meal-area の表示トランジション（任意） */
#meal-area {
  transition: opacity 0.3s ease;
}

/************************************************************************************************/


/* =============================================
   Contact Form 7 カスタムスタイル
   ============================================= */

:root {
  --cf7-accent: #26998E;
}

/* -----------------------------------------------
   送信ボタン
----------------------------------------------- */
.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;
}

/* -----------------------------------------------
   ラジオボタン
----------------------------------------------- */
.wpcf7-radio .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0 32px 0 0;
}

.wpcf7-radio .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"] {
  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"] {
  border-color: var(--cf7-accent);
}

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

.wpcf7-radio .wpcf7-list-item input[type="radio"]: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 {
  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 {
  color: var(--cf7-accent);
}

.content-in {
  width: 50%;
}

.wpcf7-form p:has(.wpcf7-submit) {
  margin-top: 5em !important;
}

.ko-midashi {
  background: #E1F5EE;
  color: #085041;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
}

.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;
}

/* -----------------------------------------------
   お食事チェックボックス（ラジオボタンと同じ丸デザイン）
----------------------------------------------- */
#meal .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0 32px 0 0;
}

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

#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;
}

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

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

#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%);
}

#meal .wpcf7-list-item .wpcf7-list-item-label {
  font-size: 18px;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  top: 2px;
}

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

/* -----------------------------------------------
   承諾確認（チェックボックス）
   既存のラジオボタンのデザインと統一
----------------------------------------------- */
.wpcf7-acceptance .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 1.5em 0 0 0;
}

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

.wpcf7-acceptance .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;
  margin: 0;
  padding: 0;
  flex-shrink: 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"] {
  border-color: var(--cf7-accent);
}

.wpcf7-acceptance .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 {
  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 {
  font-size: 18px;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  top: 2px;
}

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

/* -----------------------------------------------
   承諾確認のエラーメッセージ
----------------------------------------------- */
.wpcf7-acceptance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wpcf7-acceptance .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;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


.confirm-check{
    margin: 0;
    padding: 0;
}
/************************************************************************************************/

/*タイトル*/
.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;
 　
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}