@charset "UTF-8";
@import "reset.css";
@import "https://fonts.googleapis.com/css?family=Crimson+Text:600,400";
a{
	color: #6b6b6b;
	text-decoration: none;
}
li{
	list-style: none;
}
img{
	vertical-align: middle;
}
.clearfix:after, ul:after, form>ul>li:after, .domain:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}
.advice, .adviceBox, .privacy p, .asking li p, input, select, form li, .teller>ul>li{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.clearfix{display: inline-block;}
/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix{display:block;}
/* End Hack */
body{
	color: #6b6b6b;
	font-size: 100%;
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-family: 'Crimson Text', 'HG正楷書体-PRO', serif;
}
#wrap{
	width: 100%;
	/*overflow-x: hidden;*/
}
header{
	width: 100%;
	height: 400px;
	position: relative;
	overflow: hidden;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#14aeff+0,44bffc+47,bce8ff+100 */
	background: #14aeff; /* Old browsers */
	background: -moz-linear-gradient(top,  #14aeff 0%, #44bffc 47%, #bce8ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#14aeff), color-stop(47%,#44bffc), color-stop(100%,#bce8ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #14aeff 0%,#44bffc 47%,#bce8ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #14aeff 0%,#44bffc 47%,#bce8ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #14aeff 0%,#44bffc 47%,#bce8ff 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #14aeff 0%,#44bffc 47%,#bce8ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14aeff', endColorstr='#bce8ff',GradientType=0 ); /* IE6-9 */
}
header img{
	position: absolute;
	top:50px;
	left: 50%;
}
nav{
	/*position: absolute;
	top: 0;
	left: 0;*/
	width: 100%;
	height: 50px;
	line-height: 50px;
	box-shadow: 0px 0px 10px #fff;
	background: rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 10px #fff;
	-moz-box-shadow: 0px 0px 10px #fff;
	-ms-box-shadow: 0px 0px 10px #fff;
	-o-box-shadow: 0px 0px 10px #fff;
}
nav a{
	color: #fff;
	padding:0 10px;
}
.sub a{
	color: #000;
}
.sub{
	margin-bottom: 20px;
}
nav a span{
	padding-right: 10px;
	margin-right: 10px;
	border-right: 1px solid #fff;
}
.contents{
	width: 1000px;
	margin:0 auto;
}
.title1{
	top: 110px;
	margin-left: -350px;
}
.title2{
	top: 200px;
	margin-left: -335px;
}
.title3{
	top: 290px;
	margin-left: -315px;
}
.ballon1, .ballon3, .ballon5, .ballon7{
	animation:rotateLeft 2s ease infinite alternate;
	-webkit-animation:rotateLeft 2s ease infinite alternate;
}
.ballon2, .ballon4, .ballon6, .ballon8{
	animation:rotateRight 2s ease infinite alternate;
	-webkit-animation:rotateRight 2s ease infinite alternate;
}
@keyframes rotateLeft{
	0%{transform: rotate(5deg) translateY(-10px);}
	100%{transform: rotate(-5deg) translateY(10px);}
}
@-webkit-keyframes rotateLeft{
	0%{-webkit-transform: rotate(5deg) translateY(-10px);}
	100%{-webkit-transform: rotate(-5deg) translateY(10px);}
}
@keyframes rotateRight{
	0%{transform: rotate(-5deg) translateY(10px);}
	100%{transform: rotate(5deg) translateY(-10px);}
}
@-webkit-keyframes rotateRight{
	0%{-webkit-transform: rotate(-5deg) translateY(10px);}
	100%{-webkit-transform: rotate(5deg) translateY(-10px);}
}
.mail{
	top:100px;
	margin-left:360px;
}
.phone{
	position: absolute;
	right:50%;
	margin-right: -480px;
	bottom: 0px;
}
.btn{
	width: 100%;
	position: relative;
	text-align: center;
	padding:30px 0;
}
.btnAnchor{
	width: 500px;
	height: 60px;
	margin: 0 auto;
	position: relative;
	-webkit-perspective: 700;
	cursor: pointer;
}
.btnAnchor a{
	display: block;
	position: relative;
	width: 500px;
	height: 60px;
	margin: 0 auto;
	-webkit-perspective: 300;
}
.btnAnchor span{
	display: block;
	position: absolute;
	width: 500px;
	height: 60px;
	line-height: 60px;
	background: #f4657f;
	margin: 0 auto;
	border-radius: 3px;
	font-size: 1.5rem;
	text-align: center;
	color: #fff;
	-webkit-transition: all .3s linear;
	transition: all .3s linear;
}
.btnAnchor span:first-child{
	background:#FF5470;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.btnAnchor span:last-child{
	background:#f4657f;
	-webkit-animation: flashBtn 3s ease infinite;
	animation: flashBtn 3s ease infinite;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
@keyframes flashBtn{
	0%{background:#f4657f;}
	5%{background:#FFD1D8;}
	50%{background:#f4657f;}
	100%{background:#f4657f;}
}
@-webkit-keyframes flashBtn{
	0%{background:#f4657f;}
	5%{background:#FFD1D8;}
	50%{background:#f4657f;}
	100%{background:#f4657f;}
}
.btnAnchor:hover span:first-child{
	background:#FF5470;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	z-index: 100;
}
.btnAnchor:hover span:last-child{
	background:#f4657f;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	z-index: 1;
}
.btnStep{
	margin-top:20px;
	color:#6b6b6b;
	font-size: 1.0rem;
}
.btnStep span{
	display: inline-block;
	padding: 5px 20px;
	border: 1px solid #a0a0a0;
	border-radius: 3px;
	background:#fff;
}
.btnStep img{
	margin:0 10px;
}
.asking, .comic{
	width: 100%;
	background: #9ad0e9;
	padding:60px 0;
	text-align: center;
}
.asking>p, .comic>p{
	font-size:2.0rem;
	color: #fff;
	margin-bottom:20px;
}
.asking ul{
	width: 920px;
	margin:0 auto;
}
.asking li{
	width: 300px;
	height: 300px;
	border-radius: 150px;
	overflow: hidden;
	float: left;
	font-size: 1.2rem;
	line-height: 1.5rem;
	color: #000;
	position: relative;
}
.asking li:first-child{
	margin-right: 10px;
}
.asking li:last-child{
	margin-left: 10px;
}
.asking li img{
	display: block;
	/*margin-bottom: 10px;*/
}
.askingImage{
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 150px;
	overflow: hidden;
	bottom: 0;
	left: 0;
}
.asking li p{
	width: 300px;
	height: 300px;
	border-radius: 150px;
	color: #fff;
	padding-top:100px;
	font-size: 1.5rem;
	line-height: 2.0rem;
	background: rgba(0, 0, 0, 0.3);
	transform: scale(0,0);
	-webkit-transform: scale(0,0);
	opacity: 0;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;

}
.asking li:hover p{
	transform: scale(1,1);
	-webkit-transform: scale(1,1);
	opacity: 1;
}
.advice{
	width: 100%;
	padding: 80px 0;
	background: url("/m23/img/pc/0001/flower.jpg") repeat-x center center;
	background-size: auto 100%;
}
.adviceBox{
	width: 980px;
	height: 400px;
	background: rgba(255,255,255,.5);
	margin:0 auto;
	padding:20px;
	font-size: 1.3rem;
	line-height: 1.7rem;
}
.adviceBox>p, .teller>p{
	text-align: center;
	color: #f94e6d;
	font-size: 2.5rem;
	margin-bottom: 20px;
	padding-top: 20px;
}
.teller{
	width: 100%;
	background: url("/m23/img/pc/0001/tellerbg_l.jpg") repeat-y top left, url("/m23/img/pc/0001/tellerbg_r.jpg") repeat-y top right;
	background-size:15% auto;
	padding:0px 0px 40px 0;
}
.teller>ul>li{
	width: 1052px;
	height: 493px;
	margin:0 auto;
	padding: 50px 0 0 0;
}
.teller>ul>li:nth-child(2n+1){
	background: url("/m23/img/pc/0001/tellerbg1.jpg") no-repeat center center;
}
.teller>ul>li:nth-child(2n){
	background: url("/m23/img/pc/0001/tellerbg2.jpg") no-repeat center center;
}
.tellerFrame{
	width:900px;
	margin:0 auto 20px auto;
	padding-top: 30px;
}
.tellerImage{
	width: 240px;
	height: 240px;
	float: left;
}
.tellerImage img{
	width: 240px;
	height: 240px;
	border-radius: 120px;
}
.tellerInfo{
	float: left;
	width: 640px;
	font-size: 4.0rem;
	line-height: 1;
	margin-left: 20px;
}
.tellerInfo li{

}
.tellerInfo li:first-child{
	font-size: 1.2rem;
	margin-bottom: 20px;
}
.tellerInfo li:last-child{
	font-size: 1.6rem;
	line-height: 2.0rem;
	margin-top: 20px;
	padding-top: 20px;
	border-top:1px solid #f4e6d3;
}
.comic>p{
	font-size: 3.0rem;
}
.comic>p span{
	margin-left: 10px;
	color:#227195;
	font-size: 1.0rem;
}
.comicMsg{
	margin-top:40px;
}
.step{
	width: 100%;
	background: #fbffd3;
}
.step>p{
	font-size: 3.0rem;
	text-align: center;
	padding: 40px 0 0 0;
	color:#227195;
	line-height: 1;
}
.stepImage, .stepFirst{
	text-align: center;
	margin-top: 20px;
}
.step>ul{
	width: 918px;
	margin: 20px auto;
	padding-left: 20px;
}
.step>ul>li{
	width: 260px;
	float: left;
	text-align: center;
	color:#227195;
	font-size: 1.5rem;
}
.step>ul>li:first-child{
	margin-right: 69px;
}
.step>ul>li:last-child{
	margin-left: 69px;
}
.privacy{
	width: 780px;
	margin:20px auto;
	background: #fff;
	border: 2px solid #a0a0a0;
	padding: 20px;
	position: relative;
}
.privacy p{
	font-size: 1.5rem;
	padding:0 0 20px 120px;
	margin-bottom: 20px;
	border-bottom: 1px solid #a0a0a0;
}
.privacy p img{
	position: absolute;
	top: -50px;
	left: 30px;
}
.policy{
	width: 800px;
	margin:0 auto;
	padding: 40px 0;
}
.policyLogo{
	width: 50%;
	float: left;
}
.policyContact{
	width: 180px;
	float: right;
	text-align: center;
}
.policySitename{
	width: 100px;
	float: left;
	border-right: 1px solid #a0a0a0;
	margin-right: 20px;
}
.policySitename, .policyCopy{
	height: 50px;
}
.policyContact a{
	display: inline-block;
	padding: 10px 20px;
	margin-bottom: 10px;
	background: #969696;
	color: #fff;
	border-radius: 3px;
}
footer{
	background: #969696;
	text-align: center;
	padding: 20px 0;
}
footer a{
	color: #fff;
}
footer ul{
	width: 1000px;
	margin:0 auto 100px auto;
}
footer li{
	display: inline-block;
	padding: 0 10px;
	border-right:1px solid #fff;
}
footer li:last-child{
	border:0;
}
.regist{
	width: 1032px;
	margin:40px auto;
	padding:30px 0;
	background: url("/m23/img/pc/0001/regbg.jpg") repeat-y top center;
}
.registFrame{
	width: 962px;
	margin:0 auto;
	padding: 20px 0;
	background: url("/m23/img/pc/0001/regframebg_btm.jpg") no-repeat bottom center, url("/m23/img/pc/0001/regframebg_top.jpg") no-repeat top center, url("/m23/img/pc/0001/regframebg_cnt.jpg") repeat-y top center;
}
.sentence{
	font-size:1.6rem;
	padding: 0 30px;
	line-height: 2.0rem;
}
form{
	padding-bottom: 100px;
}
form>ul{
	width: 850px;
	margin: 0 auto;
	padding: 50px 0 20px 0;
}
form>ul>li{
	margin-bottom:20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f4e6d3;
}
input, select{
	font-family: 'Crimson Text', 'HG正楷書体-PRO', serif;
}
input[type="text"]{
	-webkit-appearance:none;

	background: #f4e6d3;
	border-radius: 10px;
	padding: 10px 20px;
	font-size: 2.0rem;
	border: 0;
}
input[type="text"]::-webkit-input-placeholder{
	color: #c0b29d;
}
input[type="text"]:-ms-input-placeholder{
	color: #c0b29d;
}
input[type="text"]::-moz-placeholder{
	color: #c0b29d;
}
form>ul>li:nth-child(2)>ul>li,form>ul>li:nth-child(3)>ul>li,form>ul>li:nth-child(4)>ul>li{
	float: left;
	background: #f4e6d3;
	border-radius: 10px;
	padding: 0 5px 0 80px;
	height: 64px;
	line-height: 64px;
	font-size: 2.0rem;
	position: relative;
	color: #c0b29d;
	cursor: pointer;
	margin-right: 2%;
}
form>ul>li:first-child input[type="text"]{ width: 100%;}
form>ul>li:nth-child(6) input[type="text"]{ width: 48%;}
form>ul>li:nth-child(5) select{margin-right:2%;padding: 10px 45px;}
form>ul>li:nth-child(6) select{margin-left:1%;padding: 10px 30px;}
form>ul>li:nth-child(6) input{margin-right:1%;}
form>ul>li:nth-child(2)>ul>li, form>ul>li:nth-child(4)>ul>li{ width: 49%; }
form>ul>li:nth-child(3)>ul>li{ width: 23%; }
form>ul>li:nth-child(3)>ul>li:last-child{ width: 25%; }
form>ul>li:nth-child(5), form>ul>li:nth-child(6){ font-size: 1.8rem;color: #c0b29d;}
form>ul>li>ul>li:last-child{ margin-right: 0;}
select{
	display: inline-block;
	background: #f4e6d3;
	border-radius: 10px;
	border: 0;
	font-size: 1.5rem;
}
form>ul>li>p{
	color: #c0b29d;
	margin-bottom:20px;
	font-size: 1.8rem;
	line-height: 2.2rem;
	text-align: center;
	width: 16%;
	float: left;
}
form>ul>li>ul{
	width: 84%;
	float: left;
}
span.check{
	display: block;
	width: 42px;
	height: 42px;
	background: #fff;
	border-radius: 5px;
	position: absolute;
	top:10px;
	left: 10px;
	transition:all .5s ease;
	-webkit-transition:all .5s ease;
}
span.lab{
	transition:all .5s ease;
	-webkit-transition:all .5s ease;
}
li.on span.check{
	background: #f4657f;
	display: block;
}
li.on span.check:after{
	position: absolute;
	display: block;
	top: 3px;
	left: 12px;
	content: "";
	width: 10px;
	height: 20px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	border-right:7px solid #fff;
	border-bottom:7px solid #fff;
}
li.on span.check:before{
	width: 42px;
	height: 42px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;
	content: "";
	background: #f4657f;
	opacity: 0.5;
	display: block;
	transition:all .5s ease;
	-webkit-transition:all .5s ease;
}
li.on span.lab{
	color: #f4657f;
}
/*
form>ul>li:nth-child(2)>ul>li:hover span.checkon:before{
	opacity: 0;
	width: 84px;
	height: 84px;
	top:-21px;
	left: -21px;
	border-radius: 10px;
}*/
li.off span.check{
	transition:all .5s ease;
	-webkit-transition:all .5s ease;
}
li.off:hover span.check{
	background: #b5aa99;
}
.agree{
	font-size: 1.0rem;
	text-align: center;
	margin-bottom: 20px;
}
.send{
	padding: 30px;
	text-align: center;
}
.sendAlt{
	font-size: 2.0rem;
	text-align: center;
	padding: 10px 0;
	background: #faff7a;
	color: #be1d0a;
	line-height: 1;
}
.sendAlt>span{
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 35px;
	border-radius: 15px;
	background: #be1d0a;
	color: #faff7a;
	margin: 0px 10px 0 0;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
}
.sendTxt{
	font-size: 1.5rem;
	line-height: 2.0rem;
	text-align: center;
	margin:20px 0;
}
.sendTxt>img{
	animation: huwa .5s linear infinite alternate;
	-webkit-animation: huwa .5s linear infinite alternate;
}
@keyframes huwa{
	0%{transform: translateY(-10px);}
	0%{transform: translateY(10px);}
}
@-webkit-keyframes huwa{
	0%{-webkit-transform: translateY(-10px);}
	0%{-webkit-transform: translateY(10px);}
}
.domain{
	margin: 50px;
	line-height: 1.8rem;
	background: #E2E2E2;
	padding: 20px;
	text-align: center;
}
.domain>span{
	font-size: 2.0rem;
}
.domain>ul{
	width: 800px;
	margin: 20px auto 0 auto;
}
.domain>ul>li{
	width: 24%;
	padding: 10px 0;
	line-height: 1;
	float:left;
	margin-left: 1%;
	background: #969696;
	font-size: 0.7rem;
	border-radius: 3px;
}
.domain>ul>li a{
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
}
.domain>ul>li:first-child{
	margin-left: 0%;
}
.domain>ul>li span{
	font-size: 1.4rem;
}
.entry{
	font-size: 30px;
	margin:20px 30px 10px 30px;
	padding:10px;
	border-bottom:1px solid #f58f9e;
}