@charset "utf-8";

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


form　メールフォーム共通スタイル


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

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

フォームヘッダー

---------------------------------------------- */
.form__header {
 width: 90%;
 max-width: 960px;
 margin: 0 auto 60px;
 text-align: center;
}

.form__header h2 {
 margin-bottom: 20px;
 font-size: 1.8rem;
 text-align: center;
}

.form__header p {
 text-align: center;
}

.form__hdeader__attention {
 max-width: 600px;
 margin: auto;
 font-size: 1.4rem;
 border: 1px solid #c8c8c8;
}

.form__hdeader__attention span:nth-of-type(1) {
 display: block;
 padding: 0.2em 5%;
 text-align: center;
 border-bottom: 1px solid #c8c8c8;
 background: #ffefc4;
}

.form__hdeader__attention span:nth-of-type(2) {
 display: block;
 padding: 1em 5% 1em;
 text-align: center;
}

.form__hdeader__attention span:nth-of-type(2) b {}



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

 .form__header p {}
}



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

ステップバー

---------------------------------------------- */
.form-stepBar {
 position: relative;
 display: flex;
 margin: 2em auto 2em;
 width: 80%;
 max-width: 700px;
 text-align: center;
 overflow: hidden;
 font-size: 1.4rem;
 color: #a5a5a5;
 *zoom: 1;
}

.form-stepBar .step {
 position: relative;
 width: calc(100% / 3);
 white-space: nowrap;
 text-align: center;
 line-height: 46px;
 text-align: center;
 padding: 0 0em 0 0em;
 background-color: #eee;
}

.form-stepBar .step:before,
.form-stepBar .step:after {
 position: absolute;
 left: -6px;
 display: block;
 content: '';
 background-color: #eee;
 border-left: 2px solid #fff;
 width: 12px;
 height: 24px;
}

.form-stepBar .step:after {
 top: 0;
 -moz-transform: skew(30deg);
 -ms-transform: skew(30deg);
 -webkit-transform: skew(30deg);
 transform: skew(30deg);
}

.form-stepBar .step:before {
 bottom: 0;
 -moz-transform: skew(-30deg);
 -ms-transform: skew(-30deg);
 -webkit-transform: skew(-30deg);
 transform: skew(-30deg);
}

.form-stepBar .step:first-child {
 -moz-border-radius-topleft: 4px;
 -webkit-border-top-left-radius: 4px;
 border-top-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 border-bottom-left-radius: 4px;
}

.form-stepBar .step:first-child:before,
.form-stepBar .step:first-child:after {
 content: none;
}

.form-stepBar .step:last-child {
 -moz-border-radius-topright: 4px;
 -webkit-border-top-right-radius: 4px;
 border-top-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 border-bottom-right-radius: 4px;
}

.form-stepBar .step.current {
 color: #FFF;
 background-color: #919191;
}

.form-stepBar .step.current:before,
.form-stepBar .step.current:after {
 background-color: #919191;
}


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






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

入力エリア

---------------------------------------------- */
.form__wrap {
 width: 90%;
 max-width: 700px;
 margin: 0 auto 150px;
}

.form__wrap__text {
 text-align: center;
}

.linkBtn-arrow {
 margin: 20px auto 20px;
}

.form__text {
 margin-bottom: 30px;
 text-align: center;
 color: #db4421;
}

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

.form__wrap__question + dt {
 margin-top: 30px;
}

.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__wrap .linkBtn-text[href*="privacy"] {
 max-width:350px;
 width: 350px;
}
@media only screen and (max-width:640px) {
.form__wrap .linkBtn-text[href*="privacy"] {
 max-width:570px;
 width: 570px;
}
}*/


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

必須マーク

---------------------------------------------- */
.required__yes,
.required__no {
 display: inline-block !important;
 width: 40px !important;
 margin: 0 0.5em 0 0;
 padding: 0 0.4em;
 text-align: center;
 font-size: 1.2rem;
 line-height: 1.6;
}

.required__no {
 content: "任意";
 color: #000;
 border: 1px solid #c8c8c8;
 background: rgba(200, 200, 200, 0.2);
}

.required__yes {
 content: "必須";
 color: #db4421;
 border: 1px solid #db4421;
 background: rgba(219, 68, 33, 0.2);
}


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

 .required__yes,
 .required__no {
  width: 60px !important;
 }
}


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

formレイアウト

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

.form__list dt {}

.form__list dd {
 margin-bottom: 30px;
 padding: 0.5em 0;
}

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



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

確認画面

---------------------------------------------- */
.form__list-check {}

.form__list-check dt {
 padding-top: 24px;
 font-weight: 600;
 border-top: 1px solid #c8c8c8;
}

.form__list-check dd {
 margin: 8px 0 24px;
 font-size: 1.4rem;
 white-space: pre-line;
 word-break: break-all;

}

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



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

入力エリアのスタイル

---------------------------------------------- */
.form__list dd input[type="text"],
.form__list dd input[type="tel"],
.form__list dd input[type="email"],
.form__list dd input[type="password"],
.form__list dd input[type="date"],
.form__list dd select,
.form__list dd textarea {
 display: block;
 width: 100% !important;
 padding: 0.8em;
 font-size: 1.4rem;
 border: 1px solid #c8c8c8;
 background: rgba(200, 200, 200, 0.2);
 margin: 0 0% 6px 0;
}

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

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

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

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

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

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

.form__list dd span {
 /*display: block;*/
}

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


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

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

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



/* 
チェックボックス・ラジオボタン
---------------------------------------------- */
.form__list dd input[type="radio"] {
 /*-webkit-appearance: radio;*/
}

.form__list dd input[type="checkbox"] {
 /*-webkit-appearance: checkbox;*/
}

.form__list dd input[type="radio"],
.form__list dd input[type="checkbox"] {
 /*display: none;*/
 position: absolute;
 top: 0px;
 left: 0;
 width: 100%;
}

.form__list dd label {
 position: relative;
 display: block;
 width: 100%;
 margin: 0 0% 4px;
 cursor: pointer;
}

.form__list .form__list-required + dd label {}

.form__list dd label input[type="radio"] + span,
.form__list dd label input[type="checkbox"] + span {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 align-items: center;

 /*position: absolute;
 left: 0;
 top: 0;*/
 width: 100%;
 height: 50px;
 font-size: 1.4rem;
 line-height: 1.2;
 background: #f2f2f2;
 border: 1px solid #c8c8c8;
}

.form__list .form__list-required + dd label input[type="radio"] + span,
.form__list .form__list-required + dd label input[type="checkbox"] + span {
 background: #fbece8;
 border: 1px solid #c8c8c8;
}

.form__list dd label input[type="radio"] + span::before,
.form__list dd label input[type="checkbox"] + span::before {
 display: inline-block;
 content: "";
 width: 50px;
 height: 50px;
 background-image: url("../_image/form/check_off.png");
 background-repeat: no-repeat;
 background-position: top center;
 background-size: contain;
}


@media only screen and (max-width:640px) {
 .form__list dd label {}

 .form__list dd label input[type="radio"] + span,
 .form__list dd label input[type="checkbox"] + span {
  height: 70px;
 }

 .form__list dd label input[type="radio"] + span::before,
 .form__list dd label input[type="checkbox"] + span::before {
  width: 70px;
  height: 70px;
 }
}


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

.form__list dd label input[type="radio"]:checked + span::before,
.form__list dd label input[type="checkbox"]:checked + span::before {
 background-image: url("../_image/form/check_on.png");
}

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

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



/* 
サムネイル付き　チェックボックス・ラジオボタン
---------------------------------------------- */
.form__list dd label input[type="radio"] + span.label-thum,
.form__list dd label input[type="checkbox"] + span.label-thum {
 position: relative;
 height: auto;
 padding-bottom: 10px;
 vertical-align: text-top;
 white-space: nowrap;
 line-height: 1.4;
}

.form__list dd label input[type="radio"] + span.label-thum p,
.form__list dd label input[type="checkbox"] + span.label-thum p {
 text-align: center;
}

.form__list dd label input[type="radio"] + span.label-thum img,
.form__list dd label input[type="checkbox"] + span.label-thum img {
 display: block;
 width: 300px;
 margin: -50px auto 0;
}


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

 .form__list dd label input[type="radio"] + span.label-thum,
 .form__list dd label input[type="checkbox"] + span.label-thum {}

 .form__list dd label input[type="radio"] + span.label-thum img,
 .form__list dd label input[type="checkbox"] + span.label-thum img {
  width: 65%;
  margin: -70px auto -10px;
 }
}




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

.form__list dd select {}



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



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

送信前注意事項

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


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

その他　詳細入力欄

---------------------------------------------- */
/*.form__list .detailOuter,
#media_free + label + #media_free_detail,
#media_other + label + #media_other_detail,
#media_syokai + label + #media_syokai_detail {
 display: none;
 visibility: hidden;
 opacity: 0.2;
 padding: 0 0em 0.5em;
}*/

.form__list .detailOuter {
 display: none;
 padding: 0px 0 10px 10px;
}

.form__list .detailOuter.show {
 display: block;
}

.form__list .detailOuter p {
 margin-bottom: 0.5em;
 font-size: 1.3rem;
}

.form__list dd .detailOuter input[type="text"],
.form__list dd .detailOuter input[type="tel"],
.form__list dd .detailOuter input[type="email"],
.form__list dd .detailOuter nput[type="password"],
.form__list dd .detailOuter select {
 height: 40px;
}


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

 .form__list dd .detailOuter input[type="text"],
 .form__list dd .detailOuter input[type="tel"],
 .form__list dd .detailOuter input[type="email"],
 .form__list dd .detailOuter nput[type="password"],
 .form__list dd .detailOuter select {
  height: 60px;
 }

}


/*
input[name=media[]][value=フリーペーパー]:checked ~ #media_free_detailOuter{
 display: block;
 visibility: visible;
 background: #ff0!important;
}

#media_free:checked + label + div + #media_free_detail,
#media_other:checked + label + #media_other_detailOuter,
#media_other:checked + label + div + #media_other_detail,
#media_syokai:checked + label + #media_syokai_detailOuter,
#media_syokai:checked + label + div + #media_syokai_detail,
#media_free:checked + label + #media_free_detail,
#media_other:checked + label + #media_other_detail,
#media_syokai:checked + label + #media_syokai_detail,
#content04:checked + label + #content04_detailOuter,
#content04:checked + label + div + #content04_detail

*/






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

送信ボタン

---------------------------------------------- */
.form__button {
 height: 60px !important;
 margin: 20px auto;
 font-size: 1.6rem;
 background: #000;
 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;
}


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



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

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

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

.form__wrap-conf .form__list 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) {}