@charset "utf-8";

/* --------------------------------------------


form　メールフォーム（オリジナル）共通スタイル　202508


---------------------------------------------- */
.selectDrink,
.selectDay,
.selectTime {
 display: none;
 opacity: 0.65;
 pointer-events: none;
}

.selectDrink[class*="validate"],
.selectDay[class*="validate"],
.selectTime[class*="validate"] {
 display: block;
 opacity: 1;
 pointer-events: all;
 /* border: 2px solid red !important;
 background-color: rgb(255, 201, 201)!important; */
}

.formError {
 display: none !important;
}

.formError:has(+ [class*="validate"]) {
 display: block !important;
}

#ui-datepicker-div {
 width: 360px !important;
}

.ui-datepicker-header {
 height: 40px !important;
 padding: 10px !important;
}

.ui-datepicker-header a {
 width: 36px !important;
 height: 36px !important;
 padding: 10px !important;
}

#ui-datepicker-div td * {
 padding: 5px !important;
}


@media only screen and (max-width:640px) {
 #ui-datepicker-div {
  width: 560px !important;
 }

 #ui-datepicker-div * {
  font-size: 1.4rem !important;
 }

 .ui-datepicker-header {
  height: 60px !important;
 }

 .ui-datepicker-header a {
  width: 50px !important;
  height: 50px !important;
 }

 #ui-datepicker-div td * {
  padding: 10px !important;
 }
}


/* --------------------------------------------

入力エリア

---------------------------------------------- */
.formWrap {
 margin: 20px auto 150px !important;
}

.form_message {
 text-align: center;
 padding: 30px 0;
 ;
 border-bottom: 1px solid var(--color-blue2);
}

.form__wrap__question {
 position: relative;
 padding: 20px 20px;
 margin: 0 -20px;
 text-align: justify;
 font-weight: 500;
 background: #f2f0eb;
}

.form__wrap__question img {
 float: left;
 display: block;
 width: 140px;
 margin: -30px 10px 0 0;
}


@media only screen and (max-width:640px) {

 .form__wrap__question img {
  width: 220px;
  margin: 0px 10px 0 -30px;
 }
}



/* --------------------------------------------

formレイアウト

---------------------------------------------- */
.formWrap {
 margin: 20px auto 40px;
}

.formWrap dl {
 width: auto;
 max-width: 760px;
 padding: 40px 0;
}

.formWrap dt {
 float: left;
 width: 11em;
 padding: 10px 0;
}

.formWrap dd {
 margin-bottom: 30px;
 padding: 10px 0 10px 11em;
}

.formWrap dd .c-red span {
 display: inline-block;
 color: #9B2529;
 border: 1px solid rgba(155, 37, 41, 0.4);
 background: rgb(249, 229, 230);
 width: 4em;
 margin: 0 0.5em 0.5em 0;
 text-align: center;
 font-weight: 600;
}




/* 確認画面
---------------------------------------------- */
.formWrap dl.form_check dt {
 width: 14em;
}

.formWrap dl.form_check dd {
 padding: 10px 0 10px 14em;
 word-break: break-all;
}

.formWrap dl.form_check dd:nth-of-type(1),
.formWrap dl.form_check dd:nth-of-type(2),
.formWrap dl.form_check dd:nth-of-type(3),
.formWrap dl.form_check dd:nth-of-type(4),
.formWrap dl.form_check dd:nth-of-type(5) {
 white-space: pre-line;
}


@media only screen and (max-width:640px) {

 .formWrap dt,
 .formWrap dl.form_check dt {
  float: none;
  width: 100%;
  padding: 10px 0;
 }

 .formWrap dd,
 .formWrap dl.form_check dd {
  margin-bottom: 30px;
  padding: 10px 0 10px 0;
 }
}


/* --------------------------------------------

必須マーク

---------------------------------------------- */
.required {
 display: inline-block;
 width: 1.5em;
 margin: 0 0 0 0.5em;
 text-align: center;
 font-size: 1.1rem;
 color: #db4421;
 background: rgba(219, 68, 33, 0.2);
}


@media only screen and (max-width:640px) {
 .required {
  width: 60px !important;
 }
}



/* --------------------------------------------

入力エリアのサイズ制御

---------------------------------------------- */
.input-size-s,
.input-size-m,
.input-size-l,
.input-size-ll {
 display: inline-block;
 vertical-align: baseline;
}

.input-size-s {
 width: 6em;
}

.input-size-m {
 width: 11em;
}

.input-size-l {
 width: 16em;
}

.input-size-ll {
 width: 26em;
}


@media only screen and (max-width:640px) {
 .input-size-s {}

 .input-size-m {
  width: 11em;
 }

 .input-size-l {
  width: 100%;
 }

 .input-size-ll {
  width: 100%;
 }
}



/* --------------------------------------------

入力エリアのスタイル

---------------------------------------------- */

.formWrap dd input[type="text"],
.formWrap dd input[type="tel"],
.formWrap dd input[type="email"],
.formWrap dd input[type="password"],
.formWrap dd input[type="date"],
.formWrap dd select,
.formWrap dd textarea {
 width: 100% !important;
 padding: 0.8em;
 border: 1px solid #c8c8c8;
 background: rgba(255, 255, 255, 1);
 margin: 0 0% 6px 0;
}

.formWrap dd input[type="date"] {
 padding: 0 0.8em;
}

.formWrap dd input[type="text"],
.formWrap dd input[type="tel"],
.formWrap dd input[type="email"],
.formWrap dd nput[type="password"],
.formWrap dd input[type="date"],
.formWrap dd select {
 height: 50px;
 line-height: 1;
}

.formWrap dd>p {
 /*margin-bottom: 0.5em;*/
 padding-bottom: 0 !important;
 margin-bottom: 0 !important;
 font-size: 1.4rem;
 line-height: 1.4;
}

.formWrap dd>p span.formWrap__txt {
 display: inline-block;
 line-height: 50px;
}

.formWrap-check dd>p {
 font-size: 1.6rem;
 line-height: 2;
}

.formWrap dd>p>br {
 /*display: none;*/
}

.formWrap dd span {
 display: block;
}

.formWrap dd span input[type="tel"] {
 display: inline-block;
 width: 84%;
}


.formWrap .formWrap-required+dd input[type="text"],
.formWrap .formWrap-required+dd input[type="tel"],
.formWrap .formWrap-required+dd input[type="email"],
.formWrap .formWrap-required+dd input[type="password"],
.formWrap .formWrap-required+dd input[type="date"],
.formWrap .formWrap-required+dd select {
 background: #fbece8;
}

@media only screen and (max-width:640px) {

 .formWrap dd input[type="text"],
 .formWrap dd input[type="tel"],
 .formWrap dd input[type="email"],
 .formWrap dd nput[type="password"],
 .formWrap dd input[type="date"],
 .formWrap dd select {
  height: 70px;
 }
}



/* 
チェックボックス・ラジオボタン
---------------------------------------------- */
.wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form-control.wpcf7-radio {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin: 0 !important;
}

.wpcf7-list-item {
 width: 100% !important;
 min-width: none;
 margin: 0 !important;
}


@media only screen and (max-width:640px) {
 .wpcf7-list-item {
  width: 100% !important;
 }

}


input[type="radio"] {
 -webkit-appearance: radio;
}

input[type="checkbox"] {
 -webkit-appearance: checkbox;
}

.formWrap dd input[type="radio"],
.formWrap dd input[type="checkbox"] {
 /*display: none;*/
 width: 1em;
}

.formWrap dd input[type="radio"]+span.wpcf7-list-item-label,
.formWrap dd input[type="checkbox"]+span.wpcf7-list-item-label {
 display: inline-block;
 width: 100%;
 height: 50px;
 margin: 0 0% 0.6em -17px;
 cursor: pointer;
 padding: 0 0.5em;
 border: 1px solid #c8c8c8;
 background: #f2f2f2;
}

/* 
チェックボックス・ラジオボタン　選択時
---------------------------------------------- */
.formWrap dd input[type="radio"]:checked+span.wpcf7-list-item-label,
.formWrap dd input[type="checkbox"]:checked+span.wpcf7-list-item-label {
 background: #fff;
}

.formWrap dd input[type="radio"]+span.wpcf7-list-item-label::before,
.formWrap dd input[type="checkbox"]+span.wpcf7-list-item-label::before {
 display: inline-block;
 content: "";
 width: 50px;
 height: 50px;
 margin-right: 1%;
 vertical-align: middle;
 background: url("../_image/form/check_off.png") top center no-repeat;
 background-size: contain;
}

.formWrap dd input[type="radio"]:checked+span.wpcf7-list-item-label::before,
.formWrap dd input[type="checkbox"]:checked+span.wpcf7-list-item-label::before {
 background: url("../_image/form/check_on.png") top center no-repeat;
 background-size: contain;
}

.formWrap .formWrap-required+dd input[type="radio"]+span.wpcf7-list-item-label,
.formWrap .formWrap-required+dd input[type="checkbox"]+span.wpcf7-list-item-label {
 background: #fbece8;
}

.formWrap .formWrap-required+dd input[type="radio"]:checked+span.wpcf7-list-item-label,
.formWrap .formWrap-required+dd input[type="checkbox"]:checked+span.wpcf7-list-item-label {
 background: #fff9f8 !important;
}


@media only screen and (max-width:640px) {

 .formWrap dd input[type="radio"]+span.wpcf7-list-item-label,
 .formWrap dd input[type="checkbox"]+span.wpcf7-list-item-label {
  width: 99.9%;
  height: 70px;
  margin-left: -1.2em;
 }

 .formWrap dd input[type="radio"]+span.wpcf7-list-item-label::before,
 .formWrap dd input[type="checkbox"]+span.wpcf7-list-item-label::before {
  width: 70px;
  height: 70px;
 }
}



/* 
横いっぱい　チェックボックス・ラジオボタン
---------------------------------------------- */
.formWrap dd input[type="radio"]+span.label-wide,
.formWrap dd input[type="checkbox"]+span.label-wide {
 width: 100%;
}



/* 
プルダウン
---------------------------------------------- */
.formWrap dd select {
 cursor: pointer;
 padding: 0.8em !important;
}

.formWrap dd select {}



/* 
テキストエリア
---------------------------------------------- */
.formWrap dd textarea {
 height: 200px;
 resize: vertical;
}



/* --------------------------------------------

送信前注意事項

---------------------------------------------- */
.form__attention p {
 font-size: 1.4rem;
 color: #db4421;
}




/* --------------------------------------------

送信ボタン

---------------------------------------------- */
.form_button {
 height: 60px !important;
 margin: 20px auto;
 font-size: 1.6rem;
 background: var(--color-blue);
 cursor: pointer;
 overflow: hidden;
 transition: 0.5s;
}

.form_button input[type="submit"] {
 display: block;
 width: 100%;
 text-align: center;
 line-height: 60px !important;
 color: #fff;
 cursor: pointer;
}

.form_button:hover {
 background: #626262;
}

.form_button:hover input[type="submit"] {}


@media only screen and (max-width:640px) {
 .form_button {
  height: 80px !important;
 }

 .form_button input[type="submit"] {
  line-height: 80px !important;
 }
}


/*
戻るボタン
---------------------------------------------- */
.form_button-back {
 width: 10em;
 margin: 2em auto 0;
 text-align: center;
 border: none;
 background: none;
}

.form_button-back::before {
 content: "";
 display: inline-block;
 width: 5px;
 height: 5px;
 margin: -0.3em 0.6em 0 0;
 vertical-align: middle;
 border: 1px solid #000;
 border-width: 1px 1px 0px 0px;
 transition: 0.3s;
 transform: rotate(45deg);
}

.form_button-back:hover::before {
 transform: translateX(4px) rotate(45deg);
}

.form_button-back input[type="button"] {
 font-size: 1.4rem;
 border: none;
 background: none;
 cursor: pointer;
}




/* --------------------------------------------

入力内容チェック

---------------------------------------------- */
.wpcf7-not-valid-tip {
 margin: 0 0 1em;
 color: #dc3232;
 font-size: 1.4rem;
 font-weight: 500;
 display: block;
 padding: 0.2em 1em;
 background: rgba(227, 84, 84, 0.21);
 border: 2px solid rgba(235, 109, 109, 0.61) !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
 border-color: #e35454 !important;
}

.wpcf7 form .wpcf7-response-output {
 margin: 1em 0.5em 1em;
 padding: 0.2em 1em;
 text-align: center;
 color: #dc3232;
 font-weight: 500;
 background: rgba(227, 84, 84, 0.21);
 border: 2px solid rgba(235, 109, 109, 0.61) !important;
}

.current-check {
 height: 1px;
 opacity: 0.1;
 overflow: hidden;
}

/* --------------------------------------------



---------------------------------------------- */
/*.form__wrap-conf .formWrap dt,
.form__wrap-conf .formWrap dd {
 padding: 0.5em;
}

.form__wrap-conf .formWrap dt::before {
 display: none;
}

.form__wrap-conf .formWrap dd {
 padding: 0.8em 0.5em;
 border: 1px solid #c8c8c8;
 background: rgba(200, 200, 200, 0.2);
}

.form__wrap-conf .formWrap dd:empty {
 border: none;
 background: none;
}


.form__attention {
 width: 95%;
 max-width: 600px;
 margin: 0 auto 3em;
 color: #db4421;
}

.form__attention > p {
 margin-bottom: 0.5em;
}

.form__attention > ul li {
 padding-left: 0.5em;
 text-indent: -0.5em;
}
*/




@media only screen and (max-width:640px) {}