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

   #w_contact

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

#w_contact {padding: 10px 5% 10px;position: relative;z-index: 1;text-align: center;}
#w_contact h3 {margin: 0 auto;font-size: 25px; letter-spacing: 2.5px;line-height: 1.9;text-align: center;/* font-family: 'Catamaran', sans-serif; */}
/* --- .conceptArea --- */
#w_contact .descriptionArea { position: relative; z-index: 1; margin: 20px auto 0; }
#w_contact .descriptionArea p { font-size: 14px; line-height: 2.4; letter-spacing: 2px; margin-top: 1em; }

@media only screen and (max-width: 800px) { 
#w_contact { padding: 60px 5% 80px;}
#w_contact h3 { margin: 0 auto; font-size: 20px;}
}
@media only screen and (max-width: 738px) { 
#w_contact { padding: 50px 5% 70px;}
#w_contact h3 { font-size: 18px; letter-spacing: 2px; line-height: 1.8; }
/* --- .conceptArea --- */
#w_contact .descriptionArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; }
#w_contact .descriptionArea p { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-top: 1em; }
#w_contact .descriptionArea p br { display:none; }
}

@media only screen and (max-width: 414px) { 
#w_contact { padding: 40px 5% 60px;}
#w_contact h3 { font-size: 15px; letter-spacing: 2px; line-height: 1.8; text-align: center; }
#w_contact .descriptionArea p { font-size: 12px;}
}









/* ----------------------------------------------------------
   
   FORM
   
   ---------------------------------------------------------- */
 
#w_contact_form {padding: 80px 5%;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; *//* background:url(../images/noise.png) repeat; *//* background: #fafafa; */}
#w_contact_form:before {position: absolute;top: -1px;left: 0%;right: 0%;width: 100%;height: 0;content: "";border-top: #ededed 1px solid;z-index: 2;}
#w_contact_form p{font-size: 17px;}

@media only screen and (max-width: 800px) {
#w_contact_form { padding: 80px 5%; }
}
@media only screen and (max-width: 738px) { 
#w_contact_form{padding: 70px 5%;/* background: url(../images/noise2.png) repeat #fefefe; */}
}
@media only screen and (max-width: 414px) { 
#w_contact_form { padding: 60px 5%; }
}



/* --- .contentBox --- */
#w_contact_form .formArea {position: relative;z-index: 2;padding: 60px 10%;} 
  
#w_contact_form .formArea:before { position: absolute; top: 7px; left: 0; bottom: 7px; right:0; content: ""; border: #ddd 1px solid; background:#fefefe;z-index: -2; }
#w_contact_form .formArea:after {position: absolute;top: 0;left: 7px;bottom: 0;right:7px;content: "";/* border: #ddd 1px dotted; */z-index: -2;}

@media only screen and (max-width: 800px) {
#w_contact_form .formArea { padding:50px 5%; } 
}
@media only screen and (max-width: 738px) {
#w_contact_form .formArea { padding:40px 5%; } 
}


/* -----------------------------
   .detailBox
   ----------------------------- */
#w_contact_form .formBox { padding: 40px 0; text-align: left; border-top: #ddd 1px dashed; }  
#w_contact_form .formBox .leftBox { float: left; width: 25%; }
#w_contact_form .formBox .leftBox h3 {font-size: 14px; font-family: "Ã¦Â¸Â¸Ã¦ËœÅ½Ã¦Å“Â", YuMincho, "Ã£Æ’â€™Ã£Æ’Â©Ã£â€šÂ®Ã£Æ’Å½Ã¦ËœÅ½Ã¦Å“Â ProN W3", "Hiragino Mincho ProN", "HGÃ¦ËœÅ½Ã¦Å“ÂE", "Ã¯Â¼Â­Ã¯Â¼Â³ Ã¯Â¼Â°Ã¦ËœÅ½Ã¦Å“Â", "Ã¯Â¼Â­Ã¯Â¼Â³ Ã¦ËœÅ½Ã¦Å“Â", Verdana, serif; letter-spacing: 1px;}
#w_contact_form .formBox .rightBox {/* float: right; */width: 70%;/* border-left: #ddd 1px dotted; */padding: 0 5%;margin: 0 15%;}

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

#w_contact_form .formBox { padding: 40px 2.5% ; text-align: left; border-top: #ddd 1px dashed; }
#w_contact_form .formBox:first-child { padding: 0 2.5% 40px; border-top:none;  }
#w_contact_form .formBox .leftBox { float: none; width: 100%; }
#w_contact_form .formBox .leftBox h3 {text-align:center; }
#w_contact_form .formBox .rightBox {float: none;width: 100%;border-left: none;padding: 25px 0 0;margin: 0;}
}



/* -----------------------------
   
   .detailArea
   
   ----------------------------- */
   
#form .detailArea { margin-top: 30px; position: relative; z-index: 4; }
/* h3, h4*/
#form .detailArea h3 { font-size: 15px; font-family: "Ã¦Â¸Â¸Ã¦ËœÅ½Ã¦Å“Â", YuMincho, "Ã£Æ’â€™Ã£Æ’Â©Ã£â€šÂ®Ã£Æ’Å½Ã¦ËœÅ½Ã¦Å“Â ProN W3", "Hiragino Mincho ProN", "HGÃ¦ËœÅ½Ã¦Å“ÂE", "Ã¯Â¼Â­Ã¯Â¼Â³ Ã¯Â¼Â°Ã¦ËœÅ½Ã¦Å“Â", "Ã¯Â¼Â­Ã¯Â¼Â³ Ã¦ËœÅ½Ã¦Å“Â"; font-weight: bold; letter-spacing: 1px; line-height: 1.8; }
#form .detailArea h4 { font-size: 15px; font-weight: bold; letter-spacing: 1px; }
#form .detailArea h5.quiz { margin: 5px 0; font-size: 16px; /*line-height:1; */ letter-spacing: 2px; }
#form .detailArea h5.quiz span { font-size: 14px; letter-spacing: 0; }

/* -----------------------------
   .detailBox
   ----------------------------- */
#form .detailBox { padding: 40px 0; text-align: left; border-top: #a276c9 1px dotted; }

/* -----------------------------
   .leftBox, .rightBox
   ----------------------------- */   
#form .detailBox .leftBox { float: left; width: 15%; }
#form .detailBox .rightBox { float: right; width: 80%; border-left: #a276c9 1px dotted; padding-left: 5%; }


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

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

ol.formlist li ol.plan { font-size:0; margin:-10px -10px 0; padding:0; }
ol.formlist li ol.plan li { display:inline-block; margin:20px 10px 0;padding:0; }
@media only screen and (max-width: 414px) {
ol.formlist li ol.plan { margin:0 -5px; padding:0; }
ol.formlist li ol.plan li { margin:10px 5px 0;padding:0; }	
}
/* -----------------------------
   
   form
   
   ----------------------------- */

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

.contact-form > dt {
	position: absolute;
	padding: 1.8em 0 0 10px;
}

.contact-form > dd {
	position: relative;
	padding: 1em 0 1em 12em;
	margin-bottom: 60px;
	border-bottom: 1px solid #4d4d4d;
}

.contact-form > dd > i {
	color: #999;
	display: block;
	cursor: text;
	position: absolute;
	bottom: 1.8em;
	z-index: -1;
}
.contact-form > dd.active > i {
	display: none;
}
.contact-confirm .contact-form > dd > i {
	display: none;
}

.contact-confirm .contact-form > dd > span {
	display: block;
	line-height: 3.6em;
	min-height: 3.6em;
}
.contact-confirm .contact-form > dd > span {
	display: block;
	line-height: 3.6em;
}
.contact-confirm .contact-form > dd.message > span {
	line-height: 2;
	padding: 1em 0;
	min-height: 1.6em;
}

.contact-form .contact-form > dd .error {
	color: red;
	position: absolute;
	top: -1.5em;
}

.contact-form > dd.active textarea {
	height: 18em;
}

.contact-complete {
	min-height: 480px;
}


.contact-form_btn {
	margin-bottom: 120px;
}

.contact-form .c-submitset > li:first-child {
	display: none;
}

.contact-confirm .c-submitset > li:first-child > .c-submit {
	background-color: #808080;
}
.contact-confirm .c-submitset > li:first-child > .c-submit:before {
	background-color: #666;
}

   

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: 30px 0 5px; position: relative; }

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

/* ----- input ----- */
input.st { margin: 0; padding: 10px; border: #ddd 1px solid; 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.col-address1 { max-width: 80px; margin: 0 5px 0 0; padding: 10px; border: #ddd 1px solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
input.col-address2 { max-width: 120px; margin: 0 0 0 5px; padding: 10px; border: #ddd 1px solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
input.col-address { max-width: 120px; margin: 0; padding: 10px; border: #ddd 1px solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
input:focus { border: #7eccd6 solid 1px; }
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: #ddd 1px solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
textarea.talentname { height: 5em; }
textarea.small { height: 10em; }
textarea.detail { height: 15em; }
textarea:focus { border: #7eccd6 solid 1px; }

/* ----- 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: #fefefe;background: #2ea2aa;border-radius: 5px;padding-left: 5px;padding-right: 5px;padding: 2px 5px;margin-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; }

input[type=radio], input[type=checkbox] {display: none;}

/* ----- .radio,.checkbox ----- */
.radio,
.checkbox {box-sizing: border-box;position: relative;display: inline-block;margin:0;padding: 10px 15px 10px 42px;/* border-radius: 8px; */background: #f5f5f5;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 { background: #f0fafe; }
.radio:hover:after,
.checkbox:hover:after { border-color: #7eccd6; }
.radio:after,
.checkbox:after { position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 1px solid #bbb; 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: #7eccd6; 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 #7eccd6; border-bottom: 2px solid #7eccd6; 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; }


input[type=liquidation], input[type=checkbox] {display: none;}

/* ----- .liquidation,.checkbox ----- */
.liquidation,
.checkbox {box-sizing: border-box;position: relative;display: inline-block;margin:0;padding: 10px 15px 10px 42px;/* border-radius: 8px; */background: #f5f5f5;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;}
.liquidation:hover,
.checkbox:hover { background: #f0fafe; }
.liquidation:hover:after,
.checkbox:hover:after { border-color: #7eccd6; }
.liquidation:after,
.checkbox:after { position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 1px solid #bbb; 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;}
.liquidation:after {border-radius: 100%; }
.liquidation: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: #7eccd6; content: ''; opacity: 0; }
input[type=liquidation]:checked + .liquidation:before { opacity: 1; }
.checkbox:before {  position: absolute; top: 50%; left: 21px; display: block; margin-top: -8px; width: 5px; height: 9px; border-right: 2px solid #7eccd6; border-bottom: 2px solid #7eccd6; 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; }


form#mail_form dl dt span.required{
	background: #102542;
	color:#fff;
	padding: 3px;
	border-radius: 5px;
	margin-right: 5px;
}





/* ----- 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: 738px) {
ol.formlist li ol.plan li label { font-size: 12px;  }
ol.formlist li ol.plan li label { margin: 0; position: relative; }
}


/* ul.notice */
ol.formlist ul.notice { margin: 0 0 5px; padding: 0; list-style: none;text-align: left;}
ol.formlist ul.notice li { margin-top:3px; padding-left: 1.5em; font-size: 14px; letter-spacing: 1px; line-height: 2; position:relative; }
ol.formlist ul.notice li:before { position:absolute; top:0; left:0; content: "Ã¢â‚¬Â»"; z-index:0;}
@media only screen and (max-width: 800px) {
ol.formlist ul.notice li { font-size: 13px; }
}
@media only screen and (max-width: 738px) {
ol.formlist ul.notice li { font-size: 12px; }
}



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

   .btnArea

   ----------------------------- */
   
#w_contact_form .btnArea { display: block; text-align: center; padding: 30px 0 40px; text-align: center; border-top: #ddd 1px dashed; }
#w_contact_form .submitbtn,
#w_contact_form .resetbtn { display: inline-block; padding: 0; margin:10px 1% 0; font-size: 13px; text-decoration: none; text-align:center; padding:0; line-height: 50px; letter-spacing: 1px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 5px;
 width:275px; max-width:100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
/* ----- .submitbtn ----- */
#w_contact_form .submitbtn { color:#fefefe; background:#111; border:#111 1px solid;}
#w_contact_form .submitbtn:hover { color:#999; background: #ccc; border:#ccc 1px solid; }
/* ----- .resetbtn ----- */
#w_contact_form .resetbtn { color:#111; background:none; border: #111 1px solid; }
#w_contact_form .resetbtn:hover { color:#333; background: #fefefe;background:none; border:#ccc 1px solid; }


@media only screen and (max-width: 800px) {
#w_contact_form .submitbtn:hover { color:#fefefe; background:#111; border:#111 1px solid; }
#w_contact_form .resetbtn:hover { color:#111; background:none; border: #111 1px solid; }
}
@media only screen and (max-width: 738px) {
#w_contact_form .btnArea { padding: 30px 0 15px; }
}

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

   #formWrap

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

.formWrap { position: relative; z-index: 4; text-align:center; }
.formWrap h4 { margin: 0; padding: 0; font-size: 14px; font-weight: 500; line-height: 2.2; letter-spacing: 1px;}
@media only screen and (max-width: 800px) {
.formWrap h4 { font-size: 13px; line-height: 2; }
}
@media only screen and (max-width: 738px) {
.formWrap h4 { padding:0 5%; font-size: 12px; line-height: 2; text-align:left; }
}



/*@media screen and (max-width: 768px) {
#formWrap { text-align:left; }
}
*/


/* -----------------------------
   
   table.formTable
   
   ----------------------------- */
   
table.formTable { width: 100%; margin: 30px auto 0; border-collapse: collapse; text-align: left; overflow: hidden; font-size: 14px; letter-spacing: 1px; line-height: 2; background:#fefefe; }
table.formTable tr { border: #ddd 1px solid; }
table.formTable th { padding: 15px; font-weight: bold; background: #fafafa ; width: 30%; }
table.formTable td { padding: 15px; border-left: #ddd 1px dotted; }

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


#w_contact_form .formWrap .btnArea { margin-top:40px; }

@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; }

}



/* -----------------------------
   
   .confirmTxt
   
   ----------------------------- */
   
.confirmArea { margin: 0 auto; max-width: 600px; }
.confirmTxt { margin: 40px auto 0; width: 100%; }
.confirmTxt p { margin-top: -1px; padding: 15px 5%; color: #e803a4; border: #e803a4 1px solid; line-height: 1.8; }

/*@media screen and (max-width: 768px) {
.confirmTxt { margin: 35px auto 0; }
}
@media screen and (max-width: 738px) {
.confirmTxt { margin: 30px auto 0; }
}*/


/* -----------------------------
   
   #form .txtArea
   
   ----------------------------- */
#form .txtArea { padding: 0; position: relative; z-index: 4; text-align: left; }


/* -----------------------------
   .applyArea2
   ----------------------------- */

#form .applyArea { border-top: #a276c9 1px dotted; margin-top: 45px; position: relative; z-index: 4; }
/* h3, h4*/
#form .applyArea h3 { font-size: 15px; font-family: font-family: "æ¸¸æ˜Žæœ", YuMincho, "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProN W3", "Hiragino Mincho ProN", "HGæ˜ŽæœE", "ï¼­ï¼³ ï¼°æ˜Žæœ", "ï¼­ï¼³ æ˜Žæœ"; font-weight: bold; letter-spacing: 1px; line-height: 1.8; }
#form .applyArea h4 { font-size: 15px; font-weight: normal; letter-spacing: 1px; line-height: 1.8; }


/* -----------------------------
   .applyBox, .applyBox2
   ----------------------------- */
   
#form .applyBox,
#form .applyBox2 { padding: 35px 0; text-align: left; }
#form .applyBox { border-bottom: none; }
#form .applyBox2 { border-top: #a276c9 1px dotted; }


/* -----------------------------
   .leftBox, .rightBox
   ----------------------------- */
   
#form .applyBox .leftBox,
#form .applyBox2 .leftBox { float: left; width: 20%; }
#form .applyBox .rightBox,
#form .applyBox2 .rightBox { float: right; width: 75%; border-left: #a276c9 1px dotted; padding-left: 5%; }
/* ul li */
#form .applyBox ul { list-style: disc; margin: 0; padding: 0; padding-left: 1em; }
#form .applyBox ul li { font-size: 14px; font-weight: normal; letter-spacing: 1px; line-height: 1.9; margin-bottom: 5px; }
#form .applyBox ul li:last-child { margin-bottom: 0; }
#form .applyBox ul li a { border-bottom: #111 1px dotted; }
#form .applyBox ul li a:hover { color: #fefefe; background: #111; border-bottom: #111 1px solid; }
/* ul li ul */
#form .applyBox ul li ul { list-style: decimal }
#form .applyBox ul li ul li { margin-bottom: 0; }
/* table */
#form table.info { border-collapse: collapse; margin-top: 10px; font-size: 13px; letter-spacing: 1px; line-height: 1.9; }
#form table.info tr { padding-bottom: 3px; display: block; }
#form table.info tr:last-child { margin-bottom: 0; }
#form table.info th { width: 90px; }
#form .linkArea { border-top: #a276c9 1px dotted; margin-top: 0px; padding-top: 30px; }

