@charset "UTF-8";

/*-- user_connect base --*/
body {
	font-family: Memo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 1.2;
	color: #736A61;
	background: #A7B8D0;
	-webkit-font-smoothing: antialiased;
}
/*
a:link   { color: #336699; }

a:visited { color:  #336699; }

a:hover { color: #ff8000;text-decoration: none; }

a:active  { color: #ff8000; }
*/

img {  border : none;margin: 0;padding: 0; }

.jap {
	ime-mode:auto;
}
.eng {
	ime-mode:disabled;
}

#head-werp {
	width			: 100%;
	margin-top		: 0;
	margin-left 	: auto;
	margin-right 	: auto;
	padding			: 0;
	background-color: #000040;
}


#head {
	position		: relative;
	width			: 1080px;
	margin-top		: 0;
	margin-left 	: auto;
	margin-right 	: auto;
	padding			: 0;
	background-color: #000040;
	z-index		: 11;
}

div#head ul{
	margin: 0;
	padding: 0;
}

div#head li{
	display			: inline-block;
}


li#bnr { width: 15%; }

#head li#title {
	width			: 70%;
	font-size		: 1.8em;
	text-align		: center;
	vertical-align	: top;
	padding-top		: 6px;
	line-height		: 1.2;
}

.nvlink3 {
	color 			: #00ced1;
}

.nvlink3 strong {
	font-family		: Arial, Helvetica, sans-selif;
	font-weight 	: bold;
	color 			: #00ced1;
}

li#title a:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	font-weight : bold;
	text-shadow:  1px 1px 1px #7777ff;
}



div#nav {
			-webkit-box-sizing	: border-box;
			-moz-box-sizing		: border-box;
			box-sizing			: border-box;
	margin-top		: 70px;
	width			: 1080px;
	height			: 34px;
	margin-left		: auto;
	margin-right	: auto;
	text-align		:left;
	padding-top		: 2px;
	background-color: #ececff;
}

div#nav #main-nv ul {
	padding-left	: 10px;
}


div#nav #main-nv ul li {
	display: inline-block;
	margin: 0 1px 0 0;
}

div#nav #main-nv ul li a {
	display: block;
	border-radius: 6px 6px 0 0;
	background-color: #00ced1;
	background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #808080), color-stop(1, #a9a9a9));
	background: -webkit-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: -moz-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: -ms-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: -o-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: linear-gradient(to top,#808080 0%, #a9a9a9 100%);
	text-decoration: none;
	padding: 10px 26px 10px 6px;
	line-height: 1;
	font-size: 14px;
	color: #0f0e0e;
	-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(0 ,0 ,0 , 0.9);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(0 ,0 ,0 , 0.9);
	text-shadow: 0 -1px 1px rgba(0,0,0,1), 0 1px 1px rgba(255,255,255,0.2);

}

div#nav #main-nv ul li a::after {
	content: "≫";
	position: relative;
	right: -16px;
}

div#nav #main-nv ul li a:hover {
	opacity: 0.8;
}
 
 
div#nav #main-nv ul li a:hover::after {
	right: -20px;
}


div#nav #main-nv ul li a:active {
	margin: 1px 0 -1px 1px;
	-webkit-box-shadow: -1px -1px 1px #000;
	box-shadow: -1px -1px 1px #000;
}

div#nav #main-nv ul li span {
	display: block;
	border-radius	: 6px 6px 0 0;
	background-color: #00ced1;
	background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #808080), color-stop(1, #a9a9a9));
	background: -webkit-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: -moz-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: -ms-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: -o-linear-gradient(top,#808080 0%, #a9a9a9 100%);
	background: linear-gradient(to top,#808080 0%, #a9a9a9 100%);
	text-decoration		: none;
	padding				: 10px 26px 10px 6px;
	line-height			: 1;
	font-size			: 14px;
	color				: #0f0e0e;
	-webkit-box-shadow	: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(0 ,0 ,0 , 0.9);/*Safari*/
	box-shadow			: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(0 ,0 ,0 , 0.9);
	text-shadow			: 0 -1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.8);

}


div#nav #main-nv ul li span::after {
	content				: "≫";
	position			: relative;
	right				: -16px;
}





div.form {
	width: 600px;
	margin: 20px auto;
}

fieldset {
	border: 1px solid #999;
	margin-bottom: 30px;
	padding: 20px;
}

legend {
	background: #fff;
	border: 1px solid #999;
	padding: 5px;
}

dl dt {
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	width: 20em;
}

dd {
	margin: 0 15px 15px 0;
	float: left;
	width: 400px;
}
.moreQuestion {
	margin: 15px 0 0;
}

div.cksform{
	color: #fff;
	width: 700px;
	margin:20px auto;
}

.cksform fieldset {
	margin-bottom: 30px;
	padding: 20px 35px;
	border-radius: 10px;
	background: #1263b5;
	border: none;
}

.cksform legend {
	background: #1263b5;
	padding: 10px 25px;
	border-radius: 5px 5px 0 0;
	text-align: right;
	font-weight: bold;
	display: block;
	border: none;
	font-size:18px;
}

.cksform dl dt {
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	width: 28%;
	font-weight: bold;
	text-shadow: 0 2px 2px #036;
}

.cksform dd {
	margin: 0 15px 15px 0;
	width: 60%;
	float: left;
}

.cksform input[type="text"], textarea {
	border: none;
	width: 200px;
	height: 40px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0px 1px 1px rgba(255,255,255,0.4);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0px 1px 1px rgba(255,255,255,0.4);
	border-radius: 5px;
	padding: 4px;
	color: #1263b5;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0,255,255,.2);
	line-height: 1;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.00, #f0f5ff));
	background: -moz-linear-gradient(top, #f0f5ff 0%, #ffffff 100%);
	}
	
.cksform textarea {
	width: 400px;
	height: 100px;
}

.cksform input[type="text"]:focus, textarea:focus {
	-webkit-box-shadow: 0 0 15px #0FF, 0 0 25px #FFF;
	box-shadow: 0 0 15px #0FF, 0 0 25px #FFF;
	width: 400px;
}

/*-----------------------------*/
.form input[type="radio"] {
	width: 280px;
	height: 30px;


}

.cksform input[type="password"] {
	border: none;
	width: 200px;
	height: 40px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0px 1px 1px rgba(255,255,255,0.4);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0px 1px 1px rgba(255,255,255,0.4);
	border-radius: 5px;
	padding: 4px;
	color: #1263b5;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0,255,255,.2);
	line-height: 1;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.00, #f0f5ff));
	background: -moz-linear-gradient(top, #f0f5ff 0%, #ffffff 100%);
	}

.cksform input[type="password"]:focus {
	-webkit-box-shadow: 0 0 15px #0FF, 0 0 25px #FFF;
	box-shadow: 0 0 15px #0FF, 0 0 25px #FFF;
	width: 400px;
}
/*-----------------------------*/


/* セレクトのデザイン　*/

.cksform div.customSelector {
	background: url(../img/paper_cut.png) no-repeat;
	padding: 1px 0 0 10px;
	height: 60px;
}

.cksform div.customSelector dl {
	position: absolute;
	background: rgba(0,44,133,0.8);
	border-radius: 0 0 5px 5px;
	-webkit-box-shadow: 0 0 2px #333;
	box-shadow: 0 0 2px #333;
}

.cksform div.customSelector dl dt {
	float: none;
	clear: both;
	width: auto;
	margin: 0;
}

.cksform div.customSelector dl dt a {
	text-decoration: none;
	padding: 5px 20px;
	background: #366;
	border-radius: 0 0 5px 5px;
	display: block;
	color: #fff;
}

.cksform div.customSelector dl dt a:hover {
	border-radius: 0 0 5px 5px;
	-webkit-box-shadow: inset 0 0 30px #68c900;
	box-shadow: inset 0 0 30px #68c900;
}

.cksform div.customSelector dl dd {
	margin: 0;
	padding: 0;
	height:0;
	width: 100%;
	float:none;
	overflow: hidden;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}


.cksform div.customSelector dl dd ul li a {
	color: #FFF;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 0 2px 2px #036;
	padding: 5px 20px;
	display: block;
	border-bottom: 1px solid #FFF;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.cksform div.customSelector dl dd ul li a:hover {
	background: #06C;
	-webkit-box-shadow: 0 0 30px #0FF;
	box-shadow: 0 0 30px #0FF;
}

/* ラジオボタンのデザイン　*/

.cksform div.customRadioButton {
	margin-bottom: 15px;
}

.cksform div.customRadioButton ul:after {
	display: block;
	content: "";
	clear: both;
	height: 0;
}

.cksform div.customRadioButton ul li {
	display: inline-block;
	float: left;
}

.cksform div.customRadioButton ul li a {
	display: block;
	color: rgba(255,255,255,0.7);
	padding: 10px 25px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1), 0 0 2px #036;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1), 0 0 2px #036;
	background: #244386; /*IE, Opera*/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #1c63ab), color-stop(0.00, #244386));
	background: -moz-linear-gradient(top, #244386 0%, #1c63ab 100%);
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-o-transform-origin: left top;
	transform-origin: left top;
	}


.cksform div.customRadioButton ul li:nth-last-child(1) a {
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	padding-right: 30px;
}

.cksform div.customRadioButton ul li:nth-child(1) a {
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	padding-left: 30px;
}

.cksform div.customRadioButton ul li a.checked {
	background: #99dff5;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #02b0e6), color-stop(0.00, #99dff5));
	background: -moz-linear-gradient(top, #99dff5 0%, #02b0e6 100%);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1), 0 0 2px #036, 0 0 30px #0FF;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1), 0 0 2px #036, 0 0 30px #0FF;
	color: #000;
	text-shadow:0 0 5px #fff;
}


/* チェックボックスのデザイン　*/

.cksform div.customCheckBox {
	margin-bottom: 15px;
}

.cksform div.customCheckBox::after {
	display: block;
	content: "";
	clear: both;
	height:0;
}

.cksform div.customCheckBox ul li {
	display: inline-block;
	float: left;
	margin: 0 1px 1px 0;
}

.cksform div.customCheckBox ul li a {
	background: #244386;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #244386), color-stop(0.00, #2a5b8d));
	background: -moz-linear-gradient(top, #2a5b8d 0%, #244386 100%);
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
	padding: 10px 20px 7px;
	color: rgba(255,255,255,0.7);
	border-radius: 3px;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,0.2);
	box-shadow: 1px 1px 2px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,0.2);
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	-o-transition: all 0.1s;
	transition: all 0.1s;
	display: block;
}

.cksform div.customCheckBox ul li a:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #1e4bae), color-stop(0.00, #4c89c8));
	background: -moz-linear-gradient(top, #4c89c8 0%, #1e4bae 100%);
}

.cksform div.customCheckBox ul li a.checked {
	background: #99dff5;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #02b0e6), color-stop(0.00, #99dff5));
	background: -moz-linear-gradient(top, #99dff5 0%, #02b0e6 100%);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1), 0 0 2px #036, 0 0 30px #0FF;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1), 0 0 2px #036, 0 0 30px #0FF;
	color: #000;
	text-shadow:0 0 5px #fff;
}

.cksform p.result {
	text-align: center;
}

.cksform p.result input[type="submit"] {
	-webkit-appearance: none;
	background: #c05802;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c05802), color-stop(0.00, #fe8b10));
	background: -moz-linear-gradient(top, #fe8b10 0%, #c05802 100%);
	border-radius: 25px;
	border: none;
	padding: 6px 20px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.3);
	box-shadow: inset 1px 1px 1px rgba(0,0,0,.3);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	cursor: pointer;
}

.cksform div.moreQuestion {
	margin: 15px 0;
	display: none;
	width:200px;
}

.cksform div.moreQuestion p {
	margin-bottom: 5px;
}

.cksform input.mail_error {
	background: #C00;
	color: #fff;
}


#container{ width: 100%;margin: 0 auto;background:#f5f5f5; }
#top-nv{ width: 100%;height:40px;font-size:90%;color:#ffffff;background:silver;text-align:center; }
#top-nv p{ width: 100%;height:40px;padding:6px 0 4px 0; }

#pull {
	text-align:center;
	margin:100px 0 170px 0;
}

.pull-bt {
	-webkit-appearance: none;
	background: #c05802;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c05802), color-stop(0.00, #fe8b10));
	background: -moz-linear-gradient(top, #fe8b10 0%, #c05802 100%);
	border-radius: 25px;
	border: none;
	padding: 6px 20px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.3);
	box-shadow: inset 1px 1px 1px rgba(0,0,0,.3);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	cursor: pointer;
}

.button {
	display				: block;
	width				: 50px;
	border-radius		: 4px;
    border				: 1px solid gray;
	background-color	: #fffff0;
	padding				: 4px 2px 4px 2px;
	font-weight 		: lighter;
	font-size			: 12px;
	color				: #000;
	margin				: 0 auto;
	opacity				: 0.8;
}

.button a {
	font-weight 		: lighter;
	color				: gray;

}


.button a:hover {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-ms-transform: scale(1.03);
	-o-transform: scale(1.03);
	transform: scale(1.03);
	font-weight : bold;
}


#footer{ width: 100%;height:60px;font-size:70%;color:#ffffff;background:#6d6d6d;text-align:center;padding-top:10px; }
#footer ul li{ width:25%;float:left; }
#footer ul li a{ color:#fff; }

#copyright{ width: 100%;height:60px;font-size:70%;font-weight:lighter;color:#ffffff;background:#6d6d6d;text-align:center; }



@media all and (max-width:480px){

	#head, div#nav, div.form, div.cksform  {
		width: 100%;
	}

div.cksform{
	margin:10px auto;
}


    .cksform fieldset {
		border-radius: 0;
		margin-bottom: 10px;
		padding: 20px 5px;
    }


.cksform dl dt {
	float: left;
	clear: left;
	margin: 0 5px 15px 0;
	width: 37%;
}

.cksform dd {
	margin: 0 2px 15px 0;
	width: 59%;
}

	.cksform input[type="text"], .cksform input[type="password"] {
		width: 70%;
    }
	.cksform input[type="text"]:focus, .cksform input[type="password"]:focus {
		width: 100%;
    }
	
	
	.cksform textarea {
		width: 55%;
		height: 100px;
    }


    .cksform legend {
		padding: 6px 10px;
		border-radius: 5px 5px 0 0;
		text-align: center;
		font-weight: bold;
    }

.cksform div.customRadioButton ul li a {
	/*padding: 10px 25px;*/
	/*padding: 6px 10px;*/
	padding: 4px 6px;
}

.cksform div.customRadioButton ul li:nth-last-child(1) a {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
/*	padding-right: 10px;*/
	padding-right: 6px;
}

.cksform div.customRadioButton ul li:nth-child(1) a {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
/*	padding-left: 10px;*/
	padding-left: 6px;
}



}