@charset "utf-8";

#mail-catch { width:90%; max-width: 1200px; margin:0 auto 60px auto; text-align: center; }
#mail-catch h3 {width: 100%; position: relative; display: inline-block; margin-bottom:65px; font-size: 31px; text-align: center; letter-spacing: 0.13em; line-height: 0.3;}
#mail-catch h3:before { content: ''; position: absolute; bottom: -33px; display: inline-block; width: 50px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #F00;}
#mail-catch .catch { clear:both; display: inline-block; margin: 0 auto 1em auto; padding: 0 0.2em; text-align: center; font-size:31px; color:#000; background: linear-gradient(transparent 50%, #DDD 50%); letter-spacing: 0.1em;}
#mail-catch p { font-size: 18px; line-height: 1.75;}
#mail-catch .box { width: 100%; max-width:640px; margin:0 auto 30px; padding: 20px; border: 1px solid #FF0000;}
#mail-catch .box h4{ font-size: 17px; margin-bottom: 0.5em;}
#mail-catch .box p { font-size: 17px; margin-bottom: 0;}
#mail-catch .photo {text-align: center;}
#mail-catch .photo img { margin: 10px auto;}
#mail-form { clear:both; width:90%; max-width: 1200px; margin:0 auto 80px auto; position: relative; padding:60px 15px 40px 15px; border-top: solid 2px black; border-bottom: solid 2px black; text-align: center;}
#mail-form:before, #mail-form:after{ content: ''; position: absolute; top: -12px; width: 2px; height: -webkit-calc(100% + 24px); height: calc(100% + 24px); background-color: black;}
#mail-form:before {left: 10px;}
#mail-form:after {right: 10px;}

@media only screen and (max-width:960px) {
    #mail-catch h3 { font-size: 25px; margin-bottom:40px;}
    #mail-form { padding:30px 15px 20px 15px;}
}

@media only screen and (max-width: 640px) {
    #mail-catch .catch { font-size:21px; background: none; text-decoration:underline; text-decoration-color:#DDD; text-decoration-thickness:5px;}
}

/* メインボックス
-------------------------------------------------- */
.main { background-color:#fff; width:100%; padding:20px 0 ; margin: 0 auto; border:1px solid #333; border-top:none;}
.main p { text-align:left; margin:0 15px 10px 15px;}

.main .entry { border:2px solid #F00; width:95%; margin:10px auto; padding:10px;}
.main .entry p { margin:0; color:#F00; font-size:16px; font-weight:bold; text-align:center;}

/* ===================================================================
 フォーム
=================================================================== */
.formWrap { width:94%; margin:0 auto 30px auto; text-align:center;}
.formWrap p { margin: 0 auto 1em auto; padding: 0; text-align: left;}
.formWrap em { font-style: normal; font-weight: bold; color: #D80000;}

/* Table
-------------------------------------------------- */
.formTable { width:100%; margin: 0 auto 20px auto; border-collapse: collapse; border-spacing: 0; }
.formTable:after { content:" "; display:block; clear:both;} 
.formTable em { font-size:13px; font-weight:bold; color:#F00; font-style:normal; }
.formTable th,
.formTable td { padding: 10px 15px; border: 1px solid #CCC; vertical-align: middle;}
.formTable th { width: 250px; text-align: left; vertical-align: middle; background:#EEE;}
.formTable td { text-align: left; line-height: 1.5; }
.formTable.secure td { vertical-align: middle;}
.formTable td span { font-size: small;}	
.formTable th span { font-size: 12px; }

/* 必須 */
.formTable th span { float:right; margin: 0 0 0 8px; padding: 3px 4px; background: #F00; color: #FFF; font-size: 11px; font-weight: normal; line-height:1; vertical-align: middle; display: inline-block;}

@media only screen and (max-width:640px) { 
    .formTable { }
	.formTable tr { display:block; margin:0; padding: 5px 0; }
	.formTable th, .formTable td { display:list-item; list-style: none; width:100%; padding:5px 2px; border:none; }
    .formTable th { font-size: 16px; margin-bottom:0.3em; padding: 5px;}
    .formTable td {font-size: 14px;}
    .formTable td span { width: 100%; float: none; font-size: 14px;}
    .formTable td a i{ width: 1em; float: right; font-size:31px;}
}

/* Form fields, general styles first.
-------------------------------------------------- */
btn, input, select, textarea { margin: 0 0 2px 0; vertical-align: baseline; font-size:16px;}
btn, input { line-height: normal;}

btn,
html input[type="btn"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: btn; cursor: pointer;}
btn[disabled],
input[disabled] { cursor: default;}
input[type="checkbox"],
input[type="radio"] { padding: 0;}

label { margin-right:0.5em;}

@media only screen and (min-width:641px) { 
    label { white-space:nowrap; }
}

button, textarea, select, input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="number"] { border: 1px solid #BBB; font-family: inherit; }
input, textarea { color: #141412;}
input:focus, textarea:focus { border: 1px solid #BBB!important; outline: 0; background-color: #FFFEE9!important;}

form input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], form textarea{ width: 98%; }
form input[type="text"].input_m,
form input[type="tel"].input_m,
form input[type="email"].input_m, 
form input[type="url"].input_m, 
form input[type="date"].input_m, 
form input[type="number"].input_m { width: 50%;}
form input[type="text"].input_s,
form input[type="tel"].input_s,
form input[type="email"].input_s, 
form input[type="url"].input_s, 
form input[type="date"].input_s, 
form input[type="number"].input_s { width: 30%;}
form input[type="text"].input_xs,
form input[type="tel"].input_xs,
form input[type="email"].input_xs, 
form input[type="url"].input_xs, 
form input[type="date"].input_xs, 
form input[type="number"].input_xs { width: 20%;}

@media only screen and (max-width: 640px){
	form input[type="text"].input_m,
	form input[type="tel"].input_m,
	form input[type="email"].input_m, 
	form input[type="url"].input_m, 
	form input[type="date"].input_m, 
	form input[type="number"].input_m { width: 98%;}
	form input[type="text"].input_s,
	form input[type="tel"].input_s,
	form input[type="email"].input_s, 
	form input[type="url"].input_s, 
	form input[type="date"].input_s, 
	form input[type="number"].input_s { width: 50%;}
	form input[type="text"].input_xs,
	form input[type="tel"].input_xs,
	form input[type="email"].input_xs, 
	form input[type="url"].input_xs, 
	form input[type="date"].input_xs, 
	form input[type="number"].input_xs { width: 30%;}
}

/* Buttons
-------------------------------------------------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] { padding: 13px 20px 10px!important; border-radius: 5px; letter-spacing:0.1em; line-height:1; text-decoration: none; display: inline-block; }

@media only screen and (max-width: 640px){
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"] {
		padding: 13px 13px 11px!important;  }
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
 background: #FFF; border: 1px solid #BBB; font-size: 16px!important; color: #111; 
 background: -moz-linear-gradient(top, #FFF, #EEE);
 background: -webkit-linear-gradient(top, #FFF, #EEE);
 background: linear-gradient(to bottom, #FFF, #EEE);
}

button,
input[type="button"][name=back]{
 background: #FFF; border: 1px solid #BBB; font-size: 14px!important; color: #111; 
 background: -moz-linear-gradient(top, #FFF, #EEE);
 background: -webkit-linear-gradient(top, #FFF, #EEE);
 background: linear-gradient(to bottom, #FFF, #EEE);
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;
-webkit-transition: all .3s; transition: all .3s;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;
-webkit-transition: all .3s; transition: all .3s;
}

#submit-wraper.is-disabled input[type="submit"],
#submit-wraper.is-disabled input[type="submit"]:hover,
#submit-wraper.is-disabled input[type="submit"]:focus,
#submit-wraper.is-disabled input[type="submit"]:active
{
background-color: #D8D8D8 !important;
border: 1px solid #D8D8D8;
cursor: default;
filter: alpha(opacity=100); -moz-opacity:1; opacity: 1;
}


/* エラー
-------------------------------------------------- */
.errMsgMain { border: #f12 2px solid; color: #f12; padding: 10px 30px 0 30px; margin-bottom: 30px;}
.errMsgMain ul{ padding: 15px; margin: 0!important; text-align: left; color: #f12; font-size: 100%; font-weight: bold;}
.errtxt-main-wrap {}
.errtxt-main-wrap p {}

@media only screen and (max-width: 640px){
	.errMsgMain { margin: 0 auto 20px; padding: 5px 10px; }
}

form .errtxt { background: url("parts/ico_error.gif") no-repeat 0 1px; font-size: 90%; margin-bottom: 5px!important; padding: 4px 5px 3px 5px;}
form .errtxt span { display: block; color: #E8541F; font-weight: bold; line-height: 0.8; padding-left: 18px;}
form input.error,
form select.error,
form textarea.error,
form input[type="checkbox"].error + label,
form input[type="radio"].error + label { background-color: #fff1f1; border: 1px solid #eecfcf;}

/* パンくず
-------------------------------------------------- */
.progress { overflow: hidden; background-color: #AAA; border-radius: 4px; height: 30px; margin: 50px 0 30px;}
.progress li { list-style: none; display:table-cell; position:relative; background:#AAA; }
.progress li.progress-bar.current:last-child:before,
.progress li.progress-bar.current:last-child:after{ display:none;}
.progress li.progress-bar.current:before,
.progress li.progress-bar.current:after{ content: ""; position: absolute; width: 0; height: 0; margin: auto;}
.progress li.progress-bar.current:before{top:-15px; right:-1em; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 30px 0 30px 1em; z-index: 10;}
.progress li.progress-bar.current:after{ top:-15px; right:-.8em; border-style: solid; border-color: transparent transparent transparent #FF0000; border-width: 30px 0 30px 1em; z-index: 10;}

.progress-bar { float: left; width: 0; height: 100%; line-height:30px; color: #fff; text-align: center; background-color: #AAA; -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease;}
.progress-bar.current { width: 36%; background-color: #FF0000;}
.progress-bar.no-current1 {width:32%; background-color:#CCC; color: #000;}
.progress-bar.no-current2 {width:32%; background-color:#CCC; color: #000;}

@media only screen and (max-width: 640px){
    .progress li { font-size: 13px;}
}

/* */
.heigth_em10 { height: 10em;}

/* プライバシーポリシー
-------------------------------------------------- */
.privacy_policy{ margin: 50px auto 30px auto; width: 100%; font-size:90%; }
.privacy_policy h3 {width: 100%; position: relative; display: inline-block; margin:0 auto 50px auto; font-size: 21px; text-align: center; letter-spacing: 0.13em; line-height: 0.3;}
.privacy_policy h3:before { content: ''; position: absolute; bottom: -23px; display: inline-block; width: 50px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #F00;}
.privacy_policy p { }

.acceptance { margin-top: 5px; padding: 10px; height: 200px; background-color: #F9F9F9; border: 1px solid #E5E5E5; overflow-y: scroll;}
.acceptance ol { margin: 0; padding: 0; font-weight: normal; list-style:none;}
.acceptance li { font-weight: normal;}
.acceptance h4 { margin-top: 18px; margin-bottom: 4px;}

@media only screen and (max-width:640px){
    .privacy_policy h3 { font-size: 19px;}
	.privacy_policy{ width: 100%; }
}