@charset "utf-8";

/*==============================

contact.css

*==============================*/
/*-------------------------------------------------------
main_visual
-------------------------------------------------------*/
#main_visual { background-color:#333; }
#main_visual #main_visual_cont { margin:0 auto; text-align:center; width:1080px; }

/*-------------------------------------------------------
contact
-------------------------------------------------------*/
#contact { padding:0 50px 50px; }


#contact .lead { color:#17388b; margin:30px auto; line-height:1.6; }

/*-------------------------------------------------------
form(common)
-------------------------------------------------------*/
#contact #infoForm {
width:100%;
margin:0 auto;
position:relative;
text-align:left;
}

#contact #infoForm table {
border-top:1px solid #ccc;
width:100%;
}
#contact #infoForm table th {
background-color:#efefef;
border-bottom:1px solid #fff;
padding:15px 10px;
font-weight:700;
font-size:85%;
text-align:right;
vertical-align:middle;
width:20%;
}
#contact #infoForm table th.hissu {
font-size:85%;
font-weight:600;
color:#f00;
padding:15px 15px 15px 0;
width:5%;
}
#contact #infoForm table td {
background-color:#fff;
border-bottom:1px solid #ccc;
font-size:108%;
text-align:left;
padding:15px 0 15px 20px;
vertical-align:middle;
}
#contact #infoForm table td input[type="text"] { padding:10px; }
#contact #infoForm table td input[type="text"].long { width:95%; }
#contact #infoForm table td input[type="text"].middle { width:40%; }
#contact #infoForm table td input[type="text"].short { width:20%; }
#contact #infoForm table td.ex { color:#666; font-size:79%; padding:10px 20px 10px 10px; }
#contact #infoForm table td p { margin-top:5px; color:#333; font-size:93%; }
#contact #infoForm table td .error { background-image:url(../images/common/i_caution.png); background-position: left center; background-repeat: no-repeat; background-size:16px 16px; color:#e6001a; margin-bottom:10px; padding-left:20px; letter-spacing:normal; font-size:79%; }


/*--- radio ---*/
#contact #infoForm table td .radio01-input { display: none; }
#contact #infoForm table td .radio01-parts {
display:inline-block;
position:relative;
padding:5px 40px;
border-radius:8px;
margin-right:10px;
}
#contact #infoForm table td .radio01-parts::before {
background-color:#fff;
content: "";
display: block;
position: absolute;
top: 10px;
left: 7px;
width: 15px;
height: 15px;
border: 1px solid #999;
border-radius: 50%;
}
#contact #infoForm table td .radio01-input:checked + .radio01-parts { color: #17388b; }
#contact #infoForm table td .radio01-input:checked + .radio01-parts::after{
content: "";
display: block;
position: absolute;
top: 13px;
left: 10px;
width: 11px;
height: 11px;
background:#17388b;
border-radius: 50%;
}

/*--- checkbox ---*/
#contact #infoForm table td ul.checkbox {
letter-spacing:-.40em;
}

#contact #infoForm table td ul.checkbox li {
display: block;
margin-right: 0;
margin-top: 10px;
margin-left: 0;
letter-spacing:normal;
}

#contact #infoForm table td ul.checkbox li label {
display: block;
width:120px;
}

#contact .checkbox01 { display:none; }

#contact .checkbox01-parts {
display: block;
position: relative;
padding:10px 40px 10px 35px;
background-color:#fff;
border: 1px solid #ccc;
border-radius: 4px;
}
#contact .checkbox01-parts:hover { cursor:pointer; }

#contact .checkbox01-parts::before {
content: "";
display: block;
position: absolute;
top: 11px;
left: 12px;
width: 15px;
height: 15px;
border: 1px solid #999;
border-radius: 4px;
}

#contact .checkbox01:checked + .checkbox01-parts {
color: #333;
background-color:#17388b;
}

#contact .checkbox01:checked + .checkbox01-parts::after {
content: "";
display: block;
position: absolute;
top: 6px;
left: 16px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #333;
border-right: 3px solid #333;
}

.btn { margin:40px auto 20px; text-align:center; }
.btn ul { display:inline-block; margin: 0 auto; text-align:center; }
.btn ul li {
background-color: #f1f1f1;
border-radius: 2px;
box-shadow: 0 0 2px 1px #dddddd inset;
-moz-box-shadow: 0 0 2px 1px #dddddd inset;
-webkit-box-shadow: 0 0 2px 1px #dddddd inset;
margin: 0 20px;
padding: 5px;
display:inline-block;
}
.btn ul li span {
border: 2px solid #4a9baa;
border-radius: 2px;
display: block;
position:relative;
}
.btn ul li input {
background: #5ec5d7;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlYzVkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyOGEwYjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #5ec5d7 0%, #28a0b6 100%);
background: -webkit-linear-gradient(top, #5ec5d7 0%,#28a0b6 100%);
background: linear-gradient(to bottom, #5ec5d7 0%,#28a0b6 100%);
border-radius: 2px;
border: none;
box-shadow: 0 0 2px 0 #ffffff inset;
-moz-box-shadow: 0 0 2px 0 #ffffff inset;
-webkit-box-shadow: 0 0 2px 0 #ffffff inset;
display: block;
font-size: 100%;
font-weight: 600;
padding: 15px 80px;
text-shadow: none;
color: #fff;
position: relative;
width:auto;
}
.btn ul li input:hover {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlYzVkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyOGEwYjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #28a0b6 0%, #5ec5d7 100%);
background: -webkit-linear-gradient(top, #28a0b6 0%,#5ec5d7 100%);
background: linear-gradient(to bottom, #28a0b6 0%,#5ec5d7 100%);
}
.btn ul li span:before {
content: url(../images/common/i_ar_link_white.png);
position: absolute;
background-size:8px 12px;
width: 8px;
height: 12px;
right: 15px;
top: 50%;
margin-top:-12px;
z-index: 3;
}

#privacy { text-align:center; margin:30px auto 0; padding:0; background-color:#fff; }
#privacy dl { padding:40px; border:1px solid #ccc; }
#privacy dl dt { font-size:85%; font-weight:600; line-height:1.8; text-align:left; }
#privacy dl dd { text-align:left; font-size:79%; line-height:1.8; margin-top:10px; }

.text-danger {
    color:red;
}

/*-------------------------------------------------------
confirm
-------------------------------------------------------*/
.btn ul li.back {
background-color: #f1f1f1;
border-radius: 2px;
box-shadow: 0 0 2px 1px #dddddd inset;
-moz-box-shadow: 0 0 2px 1px #dddddd inset;
-webkit-box-shadow: 0 0 2px 1px #dddddd inset;
margin: 0 auto;
padding: 5px;
display:inline-block;
}
.btn ul li.back span {
border: 2px solid #ddd;
border-radius: 2px;
display: block;
position:relative;
}
.btn ul li.back input {
background: #ededed;
background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%);
background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
border-radius: 2px;
border: none;
box-shadow: 0 0 2px 0 #ffffff inset;
-moz-box-shadow: 0 0 2px 0 #ffffff inset;
-webkit-box-shadow: 0 0 2px 0 #ffffff inset;
display: block;
font-size: 100%;
font-weight: 600;
padding: 15px 80px;
text-shadow: none;
color: #333;
position: relative;
width:auto;
}
.btn ul li.back input:hover {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 100%);
background: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 100%);
background: linear-gradient(to bottom, #eeeeee 1%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
}
.btn ul li.back span:before {
content: url(../images/common/i_ar_link_blue_back.png);
position: absolute;
background-size:8px 12px;
width: 8px;
height: 12px;
left: 15px;
top: 50%;
margin-top:-12px;
z-index: 3;
}

#contact.confirm #infoForm table th {
padding:35px 20px;
width:25%;
}

#contact.confirm #infoForm table td {
background-color:#fff;
border-bottom:1px solid #ccc;
font-size:93%;
text-align:left;
padding:35px 20px 35px 20px;
vertical-align:middle;
}

/*-------------------------------------------------------
thanks
-------------------------------------------------------*/
.thanks {
background-color:#fff;
background-image:url(../images/contact/bg_thanks.png);
background-position:left top;
background-repeat:no-repeat;
min-width:712px;
min-height:517px;
display:flex;
align-items:center;
justify-content:flex-end;
margin:0 auto;
text-align:center;
position:relative;
}

.thanks:after {
background-image:url(../images/common/logo.png);
background-position:left top;
background-repeat:no-repeat;
background-size:191px 62px;
content: "";
display: block;
position: absolute;
bottom: 20px;
right: 20px;
width: 191px;
height: 62px;

}

.thanks .thanks_cont { padding:30px 50px; position:relative; }
.thanks .thanks_cont p { line-height:1.8; font-size:85%; margin-top:30px; }
.thanks .thanks_cont p:first-child { font-size:100%; margin-top:0; }