@charset "UTF-8";
/* CSS Document */

/**********************************************************
* お問い合わせフォーム
**********************************************************/

form {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 100px 0 60px;}
.cform--wrap {width: 960px;}
.contact__title {margin-bottom: 50px;}
.contact__title img {height: 35px;}
.cform__contents--wrap{font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; margin: 70px 0;}
.cform__contents{position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; background-color: #eaeaea; border: solid 1px #4b4b4b;}
.cform__title{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 260px;}
.required-srt {font-size: 1.2rem; padding: 5px; background-color: #ffe600; color: #4b4b4b; border-radius: 3px; margin-left: 10px;}
.form__text , .form__textarea {-webkit-box-flex: 1;-ms-flex: 1;flex: 1; padding: 20px; background-color: #fff;}
.form__text {line-height: 1;}
.form__textarea {line-height: 2; height: 16em; resize: vertical;}
.form__btn {font-family: 'Noto Sans JP', sans-serif; font-size: 1.5rem; line-height: 1; text-align: center; background: #000; color: #fff; display: block; width: 360px; padding: 25px 0; margin: 100px auto 0;}
.cform__contents--error{position: absolute; top: 50%; right: 40px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.3rem; line-height: 1; color: #ff1d1d;}
::-webkit-input-placeholder{color: #b4b4b4;}
::-moz-placeholder{color: #b4b4b4;}
:-ms-input-placeholder{color: #b4b4b4;}
::-ms-input-placeholder{color: #b4b4b4;}
::placeholder{color: #b4b4b4;}

/*　確認ページ　*/
.cform__contents.confirm{background-color: #eaeaea; border: none;}
.form__text.confirm{background-color: #f4f4f4; line-height: 1.5; white-space: pre-wrap;}
.confirm__btn--wrap{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.5rem; line-height: 1; text-align: center; color: #fff; margin: 100px 0 70px;}
.back__btn , div input[name=send]{display: block; width: 240px; padding: 25px 0; background: #000;}

/*　サンクスページ　*/
.cform--wrap.thanks {display: block; margin: 0 auto; padding: 100px 0 60px;}
a.thanks__btn{display: block; width: 360px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.5rem; line-height: 1; text-align: center; color: #fff; margin: 100px auto 70px; padding: 25px 0; background: #000;}


@media only screen and (max-width:680px) {
form {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; padding: 70px 20px 30px;}
.cform--wrap {width: 100%;}
.contact__title img {height: 30px;}
.cform__contents--wrap{margin: 30px 0 70px;}
.cform__contents{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.cform__title{width: 100%; padding: 10px 0;}
.form__text , .form__textarea {-webkit-box-flex: 0;-ms-flex: 0;flex: 0; width: 100%;}
.form__btn {width: min(100vw - 40px, 360px); margin: 50px auto 0;}
.cform__contents--error{top: 20px; right: 15px;}

/*　確認ページ　*/
.confirm__btn--wrap{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; row-gap: 30px; margin: 70px 0;}
.back__btn , div input[name=send]{width: min(100vw - 40px, 360px);}

/*　サンクスページ　*/
.cform--wrap.thanks {display: block; margin: 0; padding: 70px 20px;}
a.thanks__btn{width: min(100vw - 40px, 360px); margin: 70px auto 30px; padding: 25px 0;}
}