@charset "UTF-8";


/* ---------------------------------------------------------------- *
お問い合わせフォームの設定
* ---------------------------------------------------------------- */

#formbtn{
text-align: center;
margin: 0px;
padding-top: 10px;
}
#formbtn table{
text-align: center;
margin: 0px;
padding: 0px;
}
.w100 {
width: 100px;
margin: 0px;
padding: 0px;
}
.w200 {
width: 200px;
margin: 0px;
padding: 0px;
}
.w480 {
width: 460px;
margin: 0px;
padding: 0px;
}
span.red {
color: #F00 !important;
}




/*プラグインContact Form 7のエラーメッセージ*/
.wpcf7-not-valid-tip {
	color: #F00 !important;
	font-size: 9px !important;
	margin-bottom: 0px;
	border-top-style: none !important;
	border-right-style: none !important;
	border-bottom-style: none !important;
	border-left-style: none !important;
	z-index: 1000 !important;
	padding: 0px !important;
	text-align: left !important;
	display: block;
	position: absolute;
	bottom: -40px;
}
.wpcf7-validation-errors {
width: 100% !important;
padding: 2% !important;
margin-left: 0px !important;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.wpcf7-not-valid-tip {
font-size: 7px !important;
bottom: -35px;
}
.wpcf7-validation-errors {
padding: 1% !important;
}
}

/* テキストフォームの設定 */
.wpcf7-text,.wpcf7-number{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
border: 1px solid #AAAAAA;
background-color: #FFFFFF;
margin: 0;
border-radius: 5px;
font-size: 14px !important;
}
.length-s{
width: 120px;
}
.length-ws{
width: 145px;
}
.length-sm{
width: 200px;
}
.length-m2{
width: 250px;
}
.length-m{
width: 300px;
}
.length-l{
width: 100%;
}
/* テキストフォームのフォーカス時の設定 */
.wpcf7-text:focus{
background-color: #FFF;
}

/* テキストエリアの設定 */
.wpcf7-textarea{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
border: 1px solid #AAAAAA;
background-color: #FFFFFF;
margin: 0;
border-radius: 5px;
width: 100%;
font-size: 14px !important;
}

/* テキストエリアのフォーカス時の設定 */
.wpcf7-textarea:focus{
background-color: #FFF;
}

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix{
overflow:hidden;
}

/*ラジオボタン・チェックボックスの改行*/
.c_item span.wpcf7-list-item {
display: block;
}

@media screen and (max-width: 767px) {
.wpcf7-text{
width: 100%;
}
.length-s{
width: 50%;
}
.length-ws{
width: 46%;
}
.length-m{
width: 100%;
}
.length-m2{
width: 49%;
}
.length-l{
width: 100%;
}
.wpcf7-text .wpcf7-form-control {
padding: 0px;
width: 100% ;
height: auto;
}

.wpcf7-textarea{
width: 100% ;
}
}



/* フォームデザイン */
.contact_F {

}
.contact_F input:hover,
textarea:hover {
background: #ededed;
}

.contact_F input.submit{
clear: both;
border: none;
font-size: 16px;
color: #FFFFFF;
background-color: #ED6C00;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border-radius: 5px;
}
.contact_F input.submit:hover {
cursor: pointer;
background-color: #ED6C00;
}

/*iPhone用*/
.contact_F input[type="submit"] {
-webkit-appearance: none;
}
.contact_F input[type="reset"] {
-webkit-appearance: none;
}
.contact_F input[type="button"] {
-webkit-appearance: none;
}

.contact_F textarea {
height: 200px;
}
@media screen and (max-width: 767px) {
.contact_F textarea {
width: 100%;
height: 200px;
border: 1px #DDDDDD solid;
margin: 0px;
padding: 10px;
background: #FFFFFF;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
transition: background 1s ease;
}
.contact_F input.submit {
font-size: 15px;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
}
.contact_F input,
textarea,
select {
}
}




/*ファイルボタンカスタマイズ*/
/*input[type="file"] {
display: none;
}*/
.contact_F input[type="file"] {
/*font-size: 14px;*/
}
.contact_F label.file-button {
padding: 10px 40px;
/*color: #ffffff;*/
background-color: #E1E1E1;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 7px;
display: block;
text-align: center;
}
.contact_F label.file-button span {
}
@media screen and (max-width: 767px) {
.contact_F label.file-button {
width: 100%;
}
}



.contact_F span.wpcf7-list-item {
display: block;
}
.contact_F label {
position: relative;
padding-left: 10px;
padding-top: 3px;
}



/*  CHECKBOX */
.contact_F label span {
margin-left: 20px;
margin-right: 20px;
/*display: inline-block;*/
}
.contact_F label input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.contact_F label input[type="checkbox"] + span::before, label input[type="checkbox"] + span::after {
position: absolute;
top: 3px;/*調整用*/
/*top: 0;*/
left: 0;
display: inline-block;
content: '';
box-sizing: border-box;
}
.contact_F label input[type="checkbox"] + span::before {
z-index: 0;
background-color: #FFFFFF;
width: 22px;
height: 22px;
border: 2px #ED6C00 solid;
border-radius: 0px;
/*position: absolute;*/
}
.contact_F label input[type="checkbox"] + span::after {
z-index: 1;
margin: 5px 8px;
width: 6px;
height: 9px;
/*position: absolute;*/
}
.contact_F label input[type="checkbox"]:checked + span::before {
background-color: #ED6C00;
}
.contact_F label input[type="checkbox"]:checked + span::after {
border: 2px solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 2;
}

.contact_F span.wpcf7-list-item {
margin-bottom: 7px;
}
@media screen and (max-width: 767px) {
.contact_F span.wpcf7-list-item {

}
}





/* RADIO BUTTON */
.contact_F label input[type="radio"] {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.contact_F label input[type="radio"] + span::before {
position: absolute;
display: inline-block;
content: '';
box-sizing: border-box;
border-radius: 20px;
}
.contact_F label input[type="radio"] + span::before {
z-index: 0;
top: 3px;/*調整用*/
/*top: 0;*/
left: 0;
background-color: #FFFFFF;
width: 20px;
height: 20px;
border: 2px #ED6C00 solid;
}
.contact_F label input[type="radio"]:checked + span::before {
border-width: 7px;
}


/*フォームスタイル　プルダウンメニュー*/
.contact_F .inverse{
background: #000;
padding: 20px 0;
color: #fff;
}

.contact_F .select-wrap {
position: relative;
/*max-width: 300px;*/
}
/*.contact_F .select-wrap::before {
position   : absolute;
content    : "";
width: 12px;
height: 10px;
background-color: #666666;
clip-path: polygon(0 0, 100% 0, 50% 100%);
right: 15px;
z-index: 1;
top: 20px;
}*/
select{
outline: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
height: 50px;
padding: 8px 12px;
border: 1px solid #AAAAAA;
width: 100%;
border-radius: 5px;
}
select option{
background-color: #fff;
color: #333;
}
select::-ms-expand {
display: none;
}
select:-moz-focusring { 
color: transparent; 
text-shadow: 0 0 0 #828c9a;
}
.contact_F .select-wrap.select-primary:before{
color:#fff;
}
.contact_F .select-wrap.select-primary > select{
background:#0084B4;
color:#fff;
border-color:#0084B4;
}
.contact_F .select-wrap.select-primary > select:-moz-focusring { 
color: transparent; 
text-shadow: 0 0 0 #fff;
}

.contact_F .select-wrap.select-inverse:before{
color:#fff;
}
.contact_F .select-wrap.select-inverse > select{
color:#fff;
border-color: #fff;
}

.contact_F .select-wrap.select-inverse > select:-moz-focusring { 
color: transparent; 
text-shadow: 0 0 0 #fff;
}




/*placeholder文字色変更*/
.contact_F input[type="text"]::placeholder {
color: #CCCCCC;
}
.contact_F input[type="textarea"]::placeholder {
color: #CCCCCC;
}
/* Chrome, Safari */
.contact_F input::-webkit-input-placeholder{
color: #CCCCCC;
}
/* Firefox */
.contact_F input::-moz-placeholder{
color: #CCCCCC;
}
/* Firefox 18以前 */
.contact_F input:-moz-placeholder{
color: #CCCCCC;
}
/* Microsoft Edge */
.contact_F input[type="text"]::-ms-input-placeholder {
color: #CCCCCC;
}

.contact_F ::-webkit-input-placeholder { color: #CCCCCC; }
.contact_F :-ms-input-placeholder { color: #CCCCCC !important; }
.contact_F ::-moz-placeholder { color: #CCCCCC; opacity: 1; }
.contact_F ::placeholder {
color: #CCCCCC;
opacity: 1;
}
.contact_F :focus::-webkit-input-placeholder { color: transparent; }
.contact_F :focus:-ms-input-placeholder { color: transparent; }
.contact_F :focus::-moz-placeholder { color: transparent; }
.contact_F :focus::placeholder {
color: transparent;
}




/* セクションc_contact */
.c_contact{
margin-top: 60px;
margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.c_contact{
margin-top: 30px;
margin-bottom: 30px;
}
}


/* お問い合わせフォーム */
.contact_F{
width: 100%;
border-radius: 0px;
padding: 0px;
box-sizing: border-box;
margin-bottom: 0px;
}
.contact_F h2{
color: #ED6C00;
font-size: 20px;
font-weight: bold;
border: 1px solid #ED6C00;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
@media screen and (max-width: 767px) {
.contact_F{
padding: 0px;
margin-bottom: 0px;
}
.contact_F h2{
font-size: 4.4vw;
}
}

.contact_F ul.in_form {
display: grid;
gap: 0px;
grid-template-columns: 1fr;
margin-bottom: 0px;
}
.contact_F ul.in_form label {
font-weight: normal;
cursor: pointer;
}
.contact_F ul.in_form li.item {
padding-top: 10px;
padding-bottom: 10px;
z-index: 0;
}


.contact_F ul.in_form li.item .in_desc {

}
.contact_F ul.in_form li.item p a:link {
text-decoration: underline;
}
.contact_F ul.in_form li.item.accept .in_desc {
text-align: center;
}

/*カレンダー*/
.contact_F ul.in_form li.item .calset {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
}
/*人数*/
.contact_F ul.in_form li.item .family {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
}

@media(max-width: 767px){
.contact_F ul.in_form {
gap: 0px;
}
.contact_F ul.in_form li.item {
flex-direction: column;
display: block;
padding-top: 7px;
padding-bottom: 7px;
}

/*人数*/
.contact_F ul.in_form li.item .family {
width: 100%;
grid-template-columns: 1fr 1fr;
}
}



.contact_F .in_desc input {
margin-right: 10px;
margin-bottom: 0px;
}


/* 住所だけ下に余白を作る */
/*.contact_F li.item-address .in_desc input{
margin-bottom: 10px;
}
*/


/* 入力済み（単体） */
.contact_F .in_desc .is-filled{
background-color:#D5E7D5;
}

/* CF7のエラーが付いている入力はピンク最優先 */
.contact_F .wpcf7-not-valid{
background-color:#F4D1D0 !important;
}

/* hoverで#edededに戻るのを防ぐ */
.contact_F .in_desc input.wpcf7-form-control:hover,
.contact_F .in_desc textarea:hover,
.contact_F .in_desc select:hover{
background-color: inherit;
}

.contact_F .in_desc input.wpcf7-form-control,
.contact_F .in_desc textarea,
.contact_F .in_desc select{
transition: background-color .2s ease;
}









/* ===== 必須バッジ：共通 ===== */
.contact_F .cf7-field{
  position: relative;
  display: block;
}

/* input / textarea / select の右側にバッジぶんの余白 */
.contact_F .cf7-field.is-required .wpcf7-form-control{
  padding-right: 70px; /* まずはこのくらい。必要なら増やす */
}

/* 既存の select は padding が別管理なので select も明示 */
.contact_F .cf7-field.is-required select{
  padding-right: 90px; /* 矢印＋必須があるので少し多め */
}

/* バッジ本体 */
.contact_F .cf7-field.is-required::after{
  content: "必須";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #ED6C00;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

/* textarea は中央より上が自然 */
.contact_F .cf7-field.is-required .wpcf7-textarea + *{} /* 何もしない（保険） */
.contact_F .cf7-field.is-required:has(textarea)::after{
  top: 18px;
  transform: none;
}

/* ===== selectの矢印と必須が被る場合の調整 ===== */
/* 既存：.select-wrap::before が right:15px なので、必須と干渉しやすい。
   矢印を少し左へ移動 */
.contact_F .select-wrap::before{
  right: 58px; /* 必須（右12px）と被らない位置に */
}

/* スマホで詰まる時は少し小さく */
@media (max-width: 767px){
  .contact_F .cf7-field.is-required .wpcf7-form-control{
    padding-right: 64px;
  }
  .contact_F .cf7-field.is-required::after{
    font-size: 11px;
    padding: 5px 9px;
    right: 10px;
  }
  .contact_F .select-wrap::before{
    right: 54px;
  }
}


/* ========= PC: calset内は各セルいっぱいに伸ばす ========= */
@media (min-width: 768px){

  /* CF7のwrapがinline扱いでも伸びるように強制 */
  .contact_F .in_desc.calset > .wpcf7-form-control-wrap,
  .contact_F .in_desc.calset > .select-wrap{
    display: block;
    width: 100%;
    min-width: 0; /* グリッドで潰れ防止 */
  }

  /* カレンダー（第一希望日）の input を列幅いっぱいに */
  .contact_F .in_desc.calset .wpcf7-text.length-m{
    width: 100% !important; /* ←length-m(300px)をここだけ無効化 */
  }

  /* selectも列幅いっぱいに（右の必須位置も安定） */
  .contact_F .in_desc.calset select{
    width: 100%;
  }
}