@charset "UTF-8";
@media screen and (min-width: 768px),print { /*----------------------------------------- h2 画像 ------------------------------------------*/
.cc-ttl-Box-01 { background: url('../images/form/h2.jpg') top center no-repeat , url('../images/index/h-bg.jpg') top center ; }
/* PC用 共通して使える -------------------------------------*/
/*lead  -------------------------------------*/
#lead{ margin-bottom: 20px; width: 800px; }

.req-top{ width: 800px; margin: 60px auto 0; background: url('../images/request/top-bg.jpg') top center ; padding: 150px 90px 40px; position: relative; }
.req-top .top-ttl{ position: absolute; top: -30px; left: 10px; }
.req-top ul{ background: #fff; padding: 50px 0 50px 50px ;}
.req-top ul li{ margin-bottom: 15px; position: relative; z-index: 99; }
.req-top .abs01{ position: absolute; bottom: -15px; left: 5px; }
.req-top .abs02{ position: absolute; bottom: 0; right: 5px;  }
.next-point{ position: relative; z-index: 100; margin-top: -15px; text-align: center; margin-bottom: -40px; }
.req-foot{ width: 800px; margin: 0 auto 35px; background: #fff ; position: relative; padding: 45px 25px; border: 5px solid #f39800; }
.req-foot .foot-ttl{ margin-bottom: 25px; text-align: center; }
.req-foot .foot-img{ text-align: center; margin-bottom: 35px; }
.req-foot .foot-txt{ text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 30px; }
.req-foot .foot-txt02{ text-align: center; padding: 20px 0; width: 700px; background: #f39800; font-size: 18px; font-weight: bold; color: #fff; margin: 0 auto; border-radius: 10px;  }
.req-foot .f-abs{ position: absolute; right: 20px; bottom: 45px; }
.req-tel{ text-align: center; margin-bottom: 35px; }

#end-bnr2{margin-bottom: 100px; position: relative;  top: 50px; width: 100%; min-width: 1100px; background: url("../images/common/end-banner.jpg")repeat; }
#end-bnr2 .inner{ width: 1100px; margin: 0 auto; position: relative;  padding-bottom: 30px;}
#end-bnr2 .inner h3{ text-align: center; position: relative; top: -20px; }
#end-bnr2 .inner .text-box{ line-height: 230%; margin-bottom:100px;  text-align: center; font-weight: bold; font-size: 18px;padding-top: 10px; }
#end-bnr2 .inner .text-box span{ background: linear-gradient(transparent 80%, #406f79 80%);}
#end-bnr2 .inner .img01{ position: absolute; top: 100px; left: 220px;}
#end-bnr2 .inner .img02{ position: absolute; top: 130px; left: 530px;}
#end-bnr2 .inner .img03{ position: absolute; top: 275px; left: 0;}
#end-bnr2 .inner .img04{ position: absolute; top: 275px; left: 380px;}
#end-bnr2 .inner .img05{ position: absolute; top: 275px; left: 760px;}
#end-bnr2 .inner .img06{ position: absolute; bottom: 0px; left: 926px;}
#end-bnr2 .inner .text-box2{ text-align: center; font-weight: bold;  }

.borderwrap{ width: 100%; margin: 0 auto 30px auto; }

#tel h4{ font-size:28px;  border: #999 1px solid; text-align: center; padding: 10px; }
#tel h4::before{ content: url(../images/form/tel.jpg); left: -10px; top: 10px; position: relative;}
#tel { margin-bottom: 100px; width: 800px; margin-left: auto; margin-right: auto; }
#tel .ttl { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #ffffff; font-size: 23px; font-weight: 700; background: #333; padding-left: 20px; margin-bottom: 36px; }

#form { width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 100px; padding: 30px 20px; background: #c7c7c7; }
#form .Box { background: #fff; padding: 30px; }
#form h4{ font-size:28px; margin-bottom: 30px; border: #999 1px solid; text-align: center; padding: 10px; }
#form ul{ width: 700px; margin:0 auto 45px; color: #898989;  }
#form li span{ color: #eb6100; }
#form h4:before{ content: url(../images/form/mail.jpg); left: -10px; top: 10px; position: relative;}
#form table{ margin:0 auto 55px; }
#form table th{ width: 35%; background:#e6e6e7;  vertical-align: top!important; text-align: left; padding: 25px; border-bottom: 1px solid #dcdddd; outline: 1px solid #fff;  }
#form table th span{ color: #eb6100; }
#form table td{ width: 65%; background:#fff;  vertical-align: top!important; text-align: left; padding: 25px 0 25px 25px; border-bottom: 1px solid #dcdddd;   }
#form table td input{ height: 30px; }
#form table td .form-check-label input{ height: auto; margin-bottom: ; }
#form table td .form-check-input{ height: 10px; }
#form table textarea{ height: 160px; width: 400px; }
#form .from-btn-01{ text-align: center; }
#form .from-btn-02 .button-back{ float: left; margin-left: 20px }
#form .from-btn-02 .button-go{ float: right; margin-right: 20px; }

}

@media screen and (max-width: 767px) { /*lead  -------------------------------------*/

#lead { width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 10%; }
/* tel -------------------------------------*/
#tel { margin-bottom: 10%; width: 90%; margin-left: auto; margin-right: auto; }
#tel .ttl { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #ffffff; font-size: 1.8rem; font-weight: 700; background: #333; padding-left: 2%;  margin-bottom: 6%; line-height: 1.45; padding-top: 2%; padding-bottom: 2%; }
/* form -------------------------------------*/
.form-Box{ width: 100%; }
.req-top{ width:100%; margin: 60px auto 0; background: url('../images/request/top-bg.jpg') top center ; padding: 25% 3% 15%; position: relative; }
.req-top .top-ttl{ position: absolute; top: -20px;  }
.req-top ul{ background: #fff; padding: 2%; }
.req-top ul li{ margin-bottom: 15px; position: relative; z-index: 99; }
.req-top .abs01{ position: absolute; bottom: -15px; left: 5px; width: 15%; }
.req-top .abs02{ position: absolute; bottom: 0; right: 5px; width: 15%;  }
.next-point{ position: relative; z-index: 100; margin: 0 auto ; width: 20%; text-align: center; }
.req-foot{ width:100%; margin: 0 auto 35px; background: #fff ; position: relative; padding: 15% 3%; border: 5px solid #f39800; }
.req-foot .foot-ttl{ margin-bottom: 25px; text-align: center; }
.req-foot .foot-img{ text-align: center; margin-bottom: 35px; }
.req-foot .foot-txt{ text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 30px; }
.req-foot .foot-txt02{ text-align: center; padding: 20px 0; width:100%; background: #f39800; font-size: 18px; font-weight: bold; color: #fff; margin: 0 auto; border-radius: 10px;}
.req-foot .f-abs{ position: absolute; right: 10px; bottom: 45px; width: 15%; }
.req-tel{ text-align: center; margin-bottom: 35px; }

#end-bnr2{margin-bottom: 100px;    position: relative;  top: 50px; width: 100%; min-width: 1100px; background: url("../images/common/end-banner.jpg")repeat; }
#end-bnr2 .inner{ width: 1100px; margin: 0 auto; position: relative;  padding-bottom: 30px;}
#end-bnr2 .inner h3{ text-align: center; position: relative; top: -20px; }
#end-bnr2 .inner .text-box{ line-height: 230%; margin-bottom:100px;  text-align: center; font-weight: bold; font-size: 18px;padding-top: 10px; }
#end-bnr2 .inner .text-box span{ background: linear-gradient(transparent 80%, #406f79 80%);}
#end-bnr2 .inner .img01{ position: absolute; top: 100px; left: 220px;}
#end-bnr2 .inner .img02{ position: absolute; top: 130px; left: 530px;}
#end-bnr2 .inner .img03{ position: absolute; top: 275px; left: 0;}
#end-bnr2 .inner .img04{ position: absolute; top: 275px; left: 380px;}
#end-bnr2 .inner .img05{ position: absolute; top: 275px; left: 760px;}
#end-bnr2 .inner .img06{ position: absolute; bottom: 0px; left: 926px;}
#end-bnr2 .inner .text-box2{ text-align: center; font-weight: bold;  }

.borderwrap{ width: 100%; margin: 0 auto 30px auto; }

#tel h4{ font-size:28px;  border: #999 1px solid; text-align: center; padding: 10px; }
#tel h4::before{ content: url(../images/form/tel.jpg); left: -10px; top: 10px; position: relative;}
#tel { margin-bottom: 100px; width: 800px; margin-left: auto; margin-right: auto; }
#tel .ttl { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #ffffff; font-size: 23px; font-weight: 700; background: #333; padding-left: 20px; margin-bottom: 36px; }

#form { width:100%; margin-left: auto; margin-right: auto; margin-bottom: 100px; padding:7% 3%; background: #c7c7c7; }
#form .Box { width:100%; margin-left: auto; margin-right: auto; background: #fff;  }
#form h4{ font-size:28px; margin-bottom: 30px; border: #999 1px solid; text-align: center; padding:7% 3%; }
#form ul{ width:100%; margin:0 auto 45px; color: #898989;  }
#form li span{ color: #eb6100; }
#form h4:before{ content: url(../images/form/mail.jpg); left: -10px; top: 10px; position: relative;}
#form .Box{ background: #fff; padding:7% 3%; width:100%; margin: 0 auto; }
#form table{ margin:0 auto 55px; width:100%; }
#form table th span{ color: #eb6100; }
#form table th{ background:#e6e6e7;}
#form input[type="text"],
#form input[type="email"],
#form input[type="tel"],
#form input[type="date"],
#form select,
#form textarea {width: 99%; margin-bottom: 2%; font-size: 16px; padding: 1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
#form input.input-txt1 {width: 30%; }
#form textarea {min-height: 120px;}
/*
#form table td{ background:#fff; display: block; vertical-align: top!important; text-align: left; padding: 5% ; border-bottom: 1px solid #dcdddd; }
#form table td input{ height: 50px; margin-bottom: 3%; }
#form table td .form-check-label input{ height: auto; margin-bottom: ; }
#form table td .form-check-input{ height: 10px; }
#form table textarea{ height: 160px; width:100%; }*/
#form .from-btn-01{ text-align: center; }
#form .from-btn-02 .button-back{ float: left; margin-left: 20px }
#form .from-btn-02 .button-go{ float: right; margin-right: 20px; }

#form { width: 98%; margin-left: auto; margin-right: auto; }
#form .Box { width: 100%; margin-left: auto; margin-right: auto; }
#form .ttl { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #ffffff; font-size: 1.8rem; font-weight: 700; background: #333; padding-left: 2%;  margin-bottom: 6%; line-height: 1.45; padding-top: 2%; padding-bottom: 2%; }

}

@media screen and (max-width: 321px) { #tel .ttl { font-size: 1.6rem; }
#form .ttl { font-size: 1.6rem; } }

/*----------------------------------------- フォームの選択肢（Contact Form 7） ------------------------------------------*/
/* WordPress 移行（2026-10）：CF7 は class:form-check-input を入力欄でなく外側の span に付け、選択肢を span.wpcf7-list-item で包むため、
   上の「#form table td .form-check-input」などが入力欄に当たらない。現行（label を並べ、チェックボックスは <br> で改行）と同じ見た目にする。
   include_parts/cf7_style.php の <style> から移した */
@media screen and (min-width: 768px),print { /* 高さの指定は PC だけ（スマホは CF7 のままで現行と同じ大きさになる） */
#form table td .wpcf7-radio input{ height: 10px; }
#form table td .wpcf7-checkbox input{ height: auto; }
}
#form .wpcf7-list-item{ margin: 0; }
#form .wpcf7-radio .wpcf7-list-item{ display: inline; }
#form .wpcf7-radio .wpcf7-list-item + .wpcf7-list-item::before{ content: " "; white-space: pre; }
#form .wpcf7-radio .wpcf7-list-item + .wpcf7-list-item{ margin-left: 10px; } /* 現行 page/form.css の form label + label */
#form .wpcf7-checkbox .wpcf7-list-item{ display: block; }
#form .wpcf7-list-item-label::before,
#form .wpcf7-list-item-label::after{ content: none; }
#form .wpcf7-not-valid-tip,
#form .wpcf7-response-output,
#form .screen-reader-response{ display: none; }