@charset "utf-8";


#contact_txt {padding: 90px 5%; position: relative; z-index: 1; text-align: center;}
@media only screen and (max-width: 950px) {
#contact_txt { padding: 80px 5%; }
}
@media only screen and (max-width: 736px) { 
#contact_txt { padding: 70px 5%; }
}
@media only screen and (max-width: 414px) { 
#contact_txt { padding: 60px 5%; }
}

#contact_txt .txtArea { margin: 0 auto; max-width: 650px; text-align: left;}
#contact_txt .txtArea .linkArea { margin-top: 40px;}
@media only screen and (max-width: 768px) { 
#contact_txt .txtArea .linkArea { margin-top: 30px;}
}










#contact_form { padding: 90px 5%;position: relative; z-index: 1;}
#contact_form:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: "";background: #f3f4f6; z-index: -1;}

@media only screen and (max-width: 950px) {
#contact_form { padding: 80px 5%; }
}
@media only screen and (max-width: 736px) { 
#contact_form { padding: 70px 5%; }
}
@media only screen and (max-width: 414px) { 
#contact_form { padding: 60px 5%; }
}


/* .formArea */
#contact_form .formArea { background: #fefefe;}
#contact_form .formBox { padding: 50px 5%; text-align: left; position: relative; z-index: 1; } 
#contact_form .formBox:before { position: absolute; top: 0; left: 5%; right: 5%; height: 0; content: ""; border-top: #ddd 1px solid; z-index: -1;}
#contact_form .formBox:first-child:before { border-top: none;}
/* .leftBox */
#contact_form .formBox .leftBox { float: left; width: 25%; }
#contact_form .formBox .leftBox h3 { font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 1px; position: relative; z-index: 1;}
/* .rightBox */
#contact_form .formBox .rightBox { float: right; width: 70%; padding-left: 5%;position: relative; z-index: 1; }
#contact_form .formBox .rightBox:before { position: absolute; top: -25px; left: 0; bottom: -25px; width: 0; content: ""; border-left: #ddd 1px solid; z-index: -1;}



@media only screen and (max-width: 950px) {
#contact_form .formBox{ padding:40px 5%}
}
@media only screen and (max-width: 768px) {
#contact_form .formBox .leftBox { float: none; width: 100%; }
#contact_form .formBox .leftBox h3 { padding-bottom: 20px;}
#contact_form .formBox .rightBox { float: none; width: 100%; padding: 0; }
#contact_form .formBox .rightBox:before {  display: none;}
}
@media only screen and (max-width: 736px) {
#contact_form .formBox{padding:35px 5%}
#contact_form .formBox .leftBox h3 { text-align: center;}

}











/* -----------------------------
   
   ol.formlist
   
   ----------------------------- */

ol.formlist { width: 100%; margin: -35px auto 0; list-style:none;}
ol.formlist li { list-style: none; margin-top: 35px; }

ol.formlist li ol.two { margin:-10px 0 0; padding:0; }
ol.formlist li ol.two li { display: block; width: 100%; margin: 15px 0 0;}

ol.formlist li ol.notice { margin:5px 0 0; padding:0; }
ol.formlist li ol.notice li { margin-top: 3px; padding-left:1.25em; font-size: 13px; letter-spacing: 1px; line-height: 1.8; position:relative; }
ol.formlist li ol.notice li:before { position:absolute; top:0; left:0; width:10px; display:block; content:"※"; }

ul.notice { margin-bottom: 5px;}
ul.notice li { font-size: 13px; }
@media only screen and (max-width: 768px) {
ol.formlist { margin: -30px auto 0;}
ol.formlist li { margin-top: 30px; }
ul.notice li { font-size: 12px; }
}
@media only screen and (max-width: 736px) {
ol.formlist { margin: -25px auto 0;}
ol.formlist li { margin-top: 25px; }

ul.notice li { font-size: 11px; }
}

ol.formlist li ol.plan { font-size:0; margin:-20px -5px 0; padding:0; }
ol.formlist li ol.plan li { display:inline-block; margin:20px 5px 0;padding:0; }
@media only screen and (max-width: 736px) {
ol.formlist li ol.plan { margin:-2px; padding:0; }
ol.formlist li ol.plan li { margin:0;padding:0; width: 49.5%; border:#fefefe 2px solid; }	
}
@media only screen and (max-width: 350px) {
ol.formlist li ol.plan { margin:-2px 0 0; padding:0; }
ol.formlist li ol.plan li { display: block; margin:2px 0 0;padding:0; width: auto; border:none; }	
}

/* -----------------------------
   
   form
   
   ----------------------------- */

form { font-size: 14px; letter-spacing: 1px; }
input,
button,
textarea/*,
select*/ { -webkit-appearance: none; border-radius: 0; }
input,
select { vertical-align: middle; }

@media only screen and (max-width: 738px) {
form { font-size: 13px;  }
}
@media only screen and (max-width: 414px) {
form { font-size: 12px;  }
}

/* ----- label ----- */
label { display: block; font-weight: bold; font-size: 14px; letter-spacing: 1px; line-height: 1.8; margin: 0 0 10px; position: relative; }

@media only screen and (max-width: 768px) {
label { font-size: 13px;  }
}
@media only screen and (max-width: 736px) {
label { font-size: 12px; margin: 0 0 5px; }
}

/* ----- input ----- */
input.st { margin: 0; padding: 10px; /*border: #111 1px solid;*/border: #111 1px dotted; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; }
/* input */
input.col-100 { max-width: 100%; display: block; }
input.col-half { max-width: 450px; display: block; }
input:focus { border: #111 1px solid; }
input.other { margin: 0; padding: 5px 10px; border: #7eccd6 1px solid; background: #f8f8f8; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; max-width: 400px; }

/* ----- select ----- */
select { border: #ddd 1px solid; background: #fefefe; padding: 5px 10px; letter-spacing: 1px; }
option { border: #ddd 1px solid; margin: -1px 0 0; padding: 5px; font-weight: normal; line-height: 1; }

/* ----- textarea ----- */
textarea { width: 100%; line-height: 1.7; padding: 10px; letter-spacing: 1px; border: #111 1px dotted; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
textarea.detail { height: 20em; }
textarea:focus { border: #111 1px solid; }

/* ----- span / br ----- */
span.small-category { display: block; margin-top: 5px; vertical-align: 0; }
span.birthday { padding: 0 15px 0 5px; vertical-align: 0; }
span.block { display: block; vertical-align: 0; }
br.block-1150 { display: none; }
span.import { color: #F7776D; padding-left: 5px; font-weight:500; }
p.small { font-size: 12px; line-height: 1.8; margin-top: 5px; }

.mustTxt { margin-top: 5px; font-size: 12px; font-weight: bold; color: #fefefe; background: #e803a4; width: 50px; height: 20px; line-height: 20px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }


/* ----- .radio,.checkbox ----- */

input[type=radio], input[type=checkbox] {display: none;}
.radio,
.checkbox { box-sizing: border-box; position: relative; display: inline-block; margin:0; padding: 10px 15px 10px 42px; border: #ddd 1px solid;vertical-align: middle; cursor: pointer; z-index:2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}

.radio:hover,
.checkbox:hover { border: #111 1px solid;}
.radio:hover:after,
.checkbox:hover:after { border-color: #111; }
.radio:after,
.checkbox:after { position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 1px solid #aaa; border-radius: 0; content: ''; background:#fefefe; z-index:-1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.radio:after {border-radius: 100%; }
.radio:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 19px; display: block; margin-top: -6px; width: 10px; height: 10px; border-radius: 100%; background: #111; content: ''; opacity: 0; }

input[type=radio]:checked + .radio:before { opacity: 1; }
.checkbox:before {  position: absolute; top: 50%; left: 21px; display: block; margin-top: -8px; width: 5px; height: 9px; border-right: 2px solid #111; border-bottom: 2px solid #111; content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
input[type=checkbox]:checked + .checkbox:before { opacity: 1; }

label.radio {font-size: 14px;}
@media only screen and (max-width: 768px) {
label.radio {font-size: 13px;}
.radio,
.checkbox { padding: 15px 10px 15px 30px; }
.radio:after { left: 10px; display: block; margin-top: -8px; width: 14px; height: 14px; }
.radio:before { left: 13px; display: block; margin-top: -5px; width: 10px; height: 10px; border-radius: 100%;  }

}
@media only screen and (max-width: 736px) {
label.radio {font-size: 12px;}
}

/* ----- label ----- */
ol.formlist li ol.plan li label { display: block; font-weight: 500; font-size: 13px; letter-spacing: 1px; line-height: 1.8; margin: 0; position: relative; }
@media only screen and (max-width: 736px) {
ol.formlist li ol.plan li label { font-size: 12px; letter-spacing: 0.5px;  }
}










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

   .btnArea

   ----------------------------- */
   
#contact_form .btnArea { display: block; padding: 50px 5%; text-align: center; position: relative; z-index: 1; }
#contact_form .btnArea:before { position: absolute; top: 0; left: 5%; right: 5%; height: 0; content: ""; border-top: #ddd 1px solid; z-index: -1;}

#contact_form .submitbtn,
#contact_form .resetbtn { display: inline-block; width:350px; max-width:100%; padding: 0; margin:0 10px; color:#fefefe; background:#111; border:#111 2px solid; font-size: 14px; text-decoration: none; text-align:center; font-weight:500; line-height: 65px; letter-spacing: 1px; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }


/* ----- .submitbtn ----- */
#contact_form .submitbtn { color:#fefefe; background:#111; border:#111 2px solid;}
/*#contact_form .submitbtn:hover { color:#fefefe; background: #f6bac3; border:#f6bac3 1px solid; }*/
/* ----- .resetbtn ----- */
#contact_form .resetbtn { color:#111; background:#fefefe; }
/*#contact_form .resetbtn:hover { color:#ff878d; background: #fff1f1;background:none; border:#f6bac3 1px solid; }*/

@media only screen and (max-width: 950px) {
#contact_form .btnArea{ padding:30px 5% 40px}
#contact_form .submitbtn,
#contact_form .resetbtn{ width:300px; max-width:100%; margin:10px 10px 0; font-size: 14px; line-height: 60px; }
}
@media only screen and (max-width: 768px) {
#contact_form .btnArea:before { left: 0; right: 0;}
}
@media only screen and (max-width: 736px) {
#contact_form .btnArea{padding:25px 5% 35px}
#contact_form .submitbtn,
#contact_form .resetbtn { display: block; font-size: 13px; line-height: 50px; margin:10px auto 0;}	
}





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

   .formWrap

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

.formWrap { padding: 50px 5%;}
.formWrap p { text-align: center;}
@media only screen and (max-width: 950px) {
.formWrap{ padding:40px 5%;}
}
@media only screen and (max-width: 736px) {
.formWrap{ padding:35px 5%;}
.formWrap p { text-align: left;}
}

/* -----------------------------
   
   table.formTable
   
   ----------------------------- */
   
table.formTable { width: 100%; border-collapse: collapse; text-align: left; overflow: hidden; font-size: 14px; letter-spacing: 1px; line-height: 2;}
table.formTable th,td { padding: 15px 25px; border: #ddd 1px solid;}
table.formTable tr { border: #ddd 1px solid; }
table.formTable th{width:30%; background: #f3f4f6; font-weight: 700;}

.noticeTxt { margin: 20px auto 0; width: 100%; }
.noticeTxt p { margin-top:10px; padding: 12px 15px; color: #F7776D; background:#fdf1f0; }






@media only screen and (max-width: 800px) {
table.formTable { font-size: 13px; }
}
@media only screen and (max-width: 738px) {
table.formTable { margin: 20px auto 0; font-size: 12px; letter-spacing: 1px; line-height: 2;}
table.formTable tr { border:none; border-top: 10px solid transparent;}
table.formTable th { padding: 10px 5%; display:block; width: 100%; border: #ddd 1px solid; border-bottom:#ddd 1px dotted;}
table.formTable td { padding: 10px 5%; display:block; border: #ddd 1px solid; border-top:none; }
.noticeTxt p { text-align:left; }

}



#contact_form .btnArea2 { display: block; padding: 50px 0 0; text-align: center; position: relative; z-index: 1; }
@media only screen and (max-width: 950px) {
#contact_form .btnArea2{ padding:40px 5% 0;}
}
@media only screen and (max-width: 736px) {
#contact_form .btnArea2{ padding:35px 5% 0;}
}