/* CSS Document */

body{
	color:#3f210f;
	font-family:Verdana,Roboto,"Droid Sans","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",sans-serif;
	font-size:1.6rem;
	line-height:1.4em;
	}
	body:before{
		display:none;
		content:"ノーマル";
		position:fixed;
		width:100%;
		padding:0.5em;
		color:#fff;
		left:0;
		bottom:0;
		background:#000000;
		text-align:center;
		z-index:10000000;
		opacity:.7;
		}

a{
	color:#193f7a;
	text-decoration:none;
	transition:all 0.2s ease-out;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	}

img{
	max-width:100%;
	height:auto;
	border:none;
	vertical-align:middle;
	}

figure{
	text-align:center;
	}
	figure img{
		width:100%
		}

main > div{
	padding:30px 0;
	}
	main > div:last-child{
		padding-bottom:0;
		}
	main > div > div+div{
		margin-top:20px;
		}

footer{
	padding:30px 0;
	}

#wrapper{
	width:100%;
	overflow:hidden;
	}

#header{
	position:fixed;
	display:table;
	width:100%;
	background:#fff;
	border-bottom:2px solid #ccc;
	color:#000000;
	table-layout:auto;
	z-index:10;
	-webkit-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.3);

	}
	#header > div{
		display:table-cell;
		padding:0;
		position:relative;
		vertical-align:middle;
		}
	#header h1{
		float:left;
		width:55%;
		max-width:190px;
		}
	#header span{
		position:absolute;
		top:50%;
		width:8em;
		margin-top:-1.2em;
		padding-left:10px;
		color:#ed1e79;
		font-size:1.2rem;
		font-weight:bold;
		line-height:1.2em;
		}
	#header p{}
		#header p a{
			display:block;
			background:#193f7a;
			color:#fff;
			text-align:center;
			transition:none;
			transition:background 0.2s ease-out;
			}

#copyright{
	font-size:1.2rem;
	line-height:1em;
	text-align:center;
	}

#toTop{
	position:fixed;
	right:0px;
	bottom:0px;
	background:#193f7a;
	width:74px;
	height:74px;
	}
	#toTop a{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background:url(../images/toTop.png) center center;
		background-size:cover;
		text-indent:-9999px;
		}
		#toTop a:hover{
			opacity:.7;
			}

[id^="fee-"]{
	background:#d7ecf4;
	}
	[id^="fee-"] h3{
		clear:both;
		padding-top:5px;
		text-align:center;
		text-shadow:2px 2px 0px #a1b1b7;
		line-height:200%;
		}
		[id^="fee-"] h3 span{
			padding:0px 10px;
			color:#ed1e79;
			font-size:200%;
			font-family:Arial, Helvetica, sans-serif;
			}
		[id^="fee-"] small.note{
			display: block;
			text-align: center;
			}
	[id^="fee-"] p{
		position:relative;
		padding:15px;
		background:#fef8a6;
		border-radius:10px;
		text-align:center;
		}
	[id^="fee-"] p span{
		display:block;
		color:#f15a24;
		font-family:Arial, Helvetica, sans-serif;
		font-size:3.6rem;
		font-weight:bold;
		line-height:1.2em;
		}
	[id^="fee-"] i{
		position:absolute;
		left:-10px;
		top:-25px;
		width:25%;
		}

[id^="info-"]{
	position:relative;
	}
	[id^="info-"]:before{
		content:"";
		position:absolute;
		top:0;
		width:100%;
		height:100%;
		opacity:.5;
		}
	[id^="info-"] .title{
		font-weight:normal;
		}
		[id^="info-"] .title span{
			font-size:120%;
			}

[id^="form-"]{
	background:#193f7a;
	}
	[id^="form-"] h2{
		text-align:center;
		}
	[id^="form-"] ul{
		margin-top:-5px;
		}
	[id^="form-"] li+li{
		margin-top:1em;
		}
	[id^="form-"] a:hover{
		opacity:.7;
		}

#subject{
	position:relative;
	width:100%;
	margin-top:1em;
	overflow:hidden;
	}
	#subject:before{
		content:"";
		position:absolute;
		right:-50%;
		top:0;
		width:150%;
		height:100%;
		background:url(../images/subjectBg.jpg) center right no-repeat;
		background-size:auto 100%;
		}
	#subject h2{
		display:none;
		}
	#subject picture{
		display:block;
		}
		#subject picture img{
			margin:20px 0;
			}
	#subject i{
		position:absolute;
		left:0;
		width:20%;
		}
	#subject p{
		margin-left:20%;
		padding-left:10px;
		text-shadow:0 0 3px #fff;
		}

#about{}
	#about h3{
		margin-bottom:5px;
		padding:0.5em;
		background:#193f7a;
		color:#fff;
		text-align:center;
		}

#special{
	background:#efefe4;
	}
	#special h3{
		text-align:center;
		}
	#special h4{
		margin-bottom:0.5em;
		color:#ed1e79;
		}
	#special p{
		color:#000000;
		}
		#special p.rightFloatImage{
			margin-left:20px;
			}
		#special p.leftFloat{
			margin-top:-80px;
			}

#infoA{
	position:relative;
	}
	#infoA:before{
		content:"";
		position:absolute;
		left:-40%;
		top:0;
		width:140%;
		height:100%;
		background:url(../images/infoA_Bg.jpg) center left no-repeat;
		background-size:auto 100%;
		}

#ranking{
	background:#eeeade;
	}
	#ranking h2{
		margin:0 -15px;
		text-align:center;
		}
	#ranking h3{
		padding-left:35%;
		font-size:2.4rem;
		line-height:1.4em;
		}
		#ranking h3 span{
			display:block;
			color:#FF7E00;
			}
		#ranking h3 small{
			font-size:80%;
			margin:0 -0.2em;
			}
	#ranking i{
		position:absolute;
		left:10%;
		width:20%;
		}
	#ranking p{
		padding-top:1em;
		}

#infoC{
	position:relative;
	overflow:hidden;
	}
	#infoC:before{
		background:url(../images/infoC_Bg.jpg) center right no-repeat;
		background-size:auto 100%;
		}

#voice{
	background:#d7ecf4;
	}
	#voice h2{
		text-align:center;
		}
		#voice h2 span{
			display:block;
			color:#193f7a;
			font-size:1.6rem;
			line-height:1.4rem;
			}
	#voice p{
		clear:both;
		padding:15px;
		background:#fff;
		border-radius:10px;
		}
		#voice p+p{
			margin-top:15px;
			}

#flow{}
	#flow i{
		position:absolute;
		width:40vw;
		left:-10px;
		top:-15vw;
		}
	#flow h3{
		text-align:center;
		}
	#flow dl{
		}
	#flow dl+dl{
		margin-top:20px;
		}
	#flow dt{
		padding-bottom:0.5em;
		}
	#flow dt+dd{
		padding:0.5em 0;
		text-align:center;
		}
	#flow dd+dd{
		}
	#flow h4{
		margin:0 -15px;
		padding:0 15px 0.5em 6.5em;
		padding-bottom:0.5em;
		border-bottom:2px solid #02aedc;
		}
	#flow h4 span{
		position:absolute;
		left:0;
		height:24px;
		margin-right:0.5em;
		padding:0 1em;
		background:#02aedc;
		color:#fff;
		line-height:23px;
		border-radius:12px;
		}
		#flow h4 span:after{
			}

#address{}
	#address div > *+*{
		margin-top:1em;
		}
	#address dl{
		margin:1em -15px 0 -15px;
		border-bottom:1px solid #ccc;
		color:#000000;
		}
	#address dt,
	#address dd{
		padding:5px 15px;
		}
	#address dt{
		border-top:1px solid #ccc;
		background:#f2f2f2;
		}
	#address dd{
		background:#fff;
		}

#map{
	height:300px;
	}

.wrap{
	position:relative;
	width:calc(100% - 30px);
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	box-sizing:border-box;
	}

.title{
	margin-bottom:1em;
	font-size:1.8rem;
	line-height:1.6em;
	}

.subTitle{
	margin-bottom:1em;
	font-size:1.8rem;
	font-weight:normal;
	line-height:1.6em;
	}

.beforeAfter{
	position:relative;
	overflow:auto;
	}
	.beforeAfter figure{
		float:left;
		width:calc(50% - 30px);
		padding:1px;
		background:#fff;
		border:4px solid #ccc;
		}
		.beforeAfter figure:after{
			content:"";
			position:absolute;
			top:calc(50% - 20px);
			left:calc(50% + 0px);
			width:0px;
			height:0px;
			border:20px solid transparent;
			border-left-color:#193f7a;
			}
		.beforeAfter figure:before{
			content:"";
			position:absolute;
			top:calc(50% - 10px);
			left:calc(50% - 20px);
			width:20px;
			height:20px;
			margin-right:20px;
			background:#193f7a;
			}
	.beforeAfter figure+figure{
		float:right;
		border-color:#ed1e79;
		}
		.beforeAfter figure+figure:before,
		.beforeAfter figure+figure:after{
			content:none;
			}

.photo{
	border:5px solid #fff;
	box-shadow:0px 0px 3px #ccc;
	}


/* for mobile */
@media (max-width:767px) {
/*767px以下*/
#header{}
	#header h1{
		margin-left:10px;
		}
	#header p{}
		#header p a{
			float:right;
			width:2em;
			height:2em;
			font-size:2.4rem;
			line-height:2em;
			overflow:hidden;
			}
			#header p a+a{
				border-left:1px solid #fff;
				}
		#header p i{
			display:block;
			line-height:inherit;
			}
	#header p a.sp{
		background:#22ac38;
		}
	#header dl{
		display:none;
		}
#toTop{
	width:16vw;
	height:16vw;
	}
[id^="fee-"]{}
	[id^="fee-"] h3{
		font-size:5vw;
		}
	[id^="fee-"] p{
		padding-top:5vw;
		font-size:5vw;
		line-height:1.4em;
		}
	[id^="fee-"] p strong{
		display:block;
		}
	[id^="fee-"] p br{
		display:none;
		}
	[id^="fee-"] p i{
		width:25vw;
		top:-10vw;
		}
[id^="form-"]{}
	[id^="form-"] img{
		width:100%;
		}
#subject{}
	#subject p{
		margin-left:20vw;
		font-size:5vw;
		}
		#subject p strong:last-child{
			display:block;
			color:#193f7a;
			font-size:6vw;
			line-height:1.4em;
			}
		#subject p br{
			display:none;
			}
#about{}
	#about br{
		display:none;
		}
@media (min-width:321px) and (max-width:767px) {
main > div{
	padding:40px 0;
	}
	main > div > div+div{
		margin-top:30px;
		}
#subject{}
	#subject:before{
		width:120%;
		right:-20%;
		}
		#subject p strong:last-child{
			font-size:2.8rem;
			line-height:1.5em;
			}
}
@media (max-width:320px) {
/*320px以下*/
#header{}
	#header p a{
		font-size:8vw;
		}
	#header p a+a{
		display:none !important;
		}
}
}


/* for Tablet */
@media (min-width:768px) {
/*768px以上*/
main > div{
	padding:50px 0;
	}
	main > div > div+div{
		margin-top:40px;
		}
#header{
	padding:10px 15px;
	border-bottom:2px solid #ccc;
	}
	#header > div{
		width:40%;
		}
		#header > div+div{
			width:60%;
			}
	#header span{
		font-size:1.2rem;
		}
	#header p{
		float:right;
		}
		#header p a{
			width:auto;
			height:auto;
			padding:0.7em;
			font-size:1.6rem;
			font-weight:bold;
			line-height:1em;
			}
			#header p a:hover{
				background:#ed1e79;
				text-decoration:none;
				}
		#header p i{
			display:inline-block;
			margin-right:0.3em;
			}
	#header dl{
		float:right;
		margin-right:10px;
		}
	#header dt,
	#header dd{
		display:block;
		}
	#header dt{
		font-size:1.0rem;
		line-height:1em;
		}
	#header dd{
		font-family:Arial, Helvetica, sans-serif;
		font-size:2.8rem;
		font-weight:bold;
		}
		#header dd i{
			display:inline-block;
			margin-top:-1em;
			font-size:94%;
			}
#copyright{
	font-size:1.4rem;
	line-height:1em;
	}
[id^="fee-"]{}
	[id^="fee-"] [class*="Float"]{
		width:48%;
		}
	[id^="fee-"] h3{
		font-size:2.1rem;
		}
	[id^="fee-"] p{
		padding-left:120px;
		font-size:1.8rem;
		line-height:1.6em;
		text-align:left;
		}
	[id^="fee-"] p span{
		position:absolute;
		top:12px;
		right:15px;
		font-size:6.2rem;
		line-height:1em;
		}
	[id^="fee-"] p small{
		font-size:60%;
		}
	[id^="fee-"] i{
		left:-10px;
		top:-10px;
		width:120px;
		}
[id^="form-"]{}
	[id^="form-"] h2{
		padding:0 10%;
		}
	[id^="form-"] ul{
		display:inline-table;
		margin:auto;
		border-spacing:10px 0;
		}
	[id^="form-"] li{
		display:table-cell;
		vertical-align:bottom;
		text-align:right;
		}
	[id^="form-"] li+li{
		text-align:left;
		}
#subject{}
	#subject:before{
		width:120%;
		right:-20%;
		}
	#subject h2{
		padding:40px 0;
		}
	#subject p{
		margin-left:170px;
		font-size:2.4rem;
		line-height:1.4em;
		}
		#subject p strong:last-child{
			font-size:2.8rem;
			line-height:1.5em;
			}
	#subject span{
		display:block;
		}
	#subject i{
		width:auto;
		margin-top:-1.5em;
		}
#about{}
	#about h3{
		position:absolute;
		left:0;
		width:18rem;
		padding:0.65em 0;
		font-size:1.8rem;
		font-weight:normal;
		}
	#about p{
		padding-left:19rem;
		font-size:1.6rem;
		line-height:1.5em;
		}
#special{}
	#special .leftFloat{
		width:60%;
		}
	#special .rightFloat{
		width:40%;
		padding-left:20px;
		}
	#special i{
		display:block;
		padding-top:1em;
		margin-right:-30px;
		}
#info-A{
	background:url(../images/infoA_Bg.jpg) center left no-repeat;
	background-size:cover;
	}
	#info-A:before{
		content:none;
		}
	#info-A .wrap{
		padding-left:35%;
		}
#info-B{}
	#info-B .leftFloat{
		width:50%;
		}
	#info-B .rightFloat{
		width:50%;
		padding-left:20px;
		}
#ranking{
	padding-top:0;
	}
	#ranking h2{
		position:relative;
		}
		#ranking h2 img{
			margin-top:-20px;
			}
	#ranking h3{
		padding:0 0 0 120px;
		font-size:5rem;
		text-align:center;
		line-height:127px;
		}
		#ranking h3 span{
			display:inline;
			}
			#ranking h3 span:after{
				content:" ";
				}
	#ranking i{
		left:0;
		width:120px;
		}
#info-C{
	background:url(../images/infoC_Bg.jpg) top right no-repeat;
	background-size:cover;
	}
	#info-C:before{
		content:none;
		}
	#info-C .wrap{
		padding-right:30%;
		}
#voice{}
	#voice h3{
		text-align:center;
		}
		#voice h3 span{
			display:block;
			color:#193f7a;
			font-size:2.4rem;
			font-weight:normal;
			}
	#voice [class*="Float"]{
		width:48%;
		}
	#voice [class*="Float"]:nth-of-type(n+3){
		margin-top:4%;
		}
#flow{}
	#flow i{
		top:-80px;
		left:0;
		width:200px;
		}
	#flow dl{
		position:relative;
		padding-left:170px;
		}
		#flow dl:before,
		#flow dl:after{
			content:"";
			}
		#flow dl:before{
			position:absolute;
			left:0;
			width:150px;
			height:100%;
			background:#02aedc;
			}
		#flow dl:after{
			display:block;
			clear:both;
			}
		#flow dt:after{
			content:url(../images/flowImg.png);
			position:absolute;
			left:0;
			bottom:-49px;
			border-top:5px solid #02aedc;
			z-index:1;
			}
		#flow dl:last-child dt:after{
			content:none;
			}
	#flow dt,
	#flow dd+dd{
		float:left;
		width:60%;
		}
	#flow dt+dd{
		float:right;
		width:40%;
		padding-left:20px;
		}
	#flow h4{
		margin:0;
		padding:0;
		border:none;
		}
	#flow h4 span{
		position:absolute;
		left:0;
		top:10px;
		width:150px;
		padding:1em 0;
		text-align:center;
		font-size:2.1rem;
		font-weight:bold;
		line-height:1em;
		}
#address{}
	#address .leftFloat{
		width:60%;
		margin-top:0 !important;
		}
	#address .rightFloat{
		width:40%;
		padding-left:20px;
		margin-top:0 !important;
		}
	#address dl{
		margin:0.5em 0 0 0;
		background:#f2f2f2;
		}
	#address dt{
		position:absolute;
		left:0;
		width:8em;
		}
	#address dd{
		border-top:1px solid #ccc;
		margin-left:8em;
		}
#map{
	margin-top:20px;
	height:40vw;
	}
.title{
	margin-bottom:20px;
	font-size:3.2rem;
	line-height:1.4em;
	}
.subTitle{
	margin-bottom:20px;
	font-size:2.4rem;
	line-height:1.4em;
	}
	.subTitle span{
		font-size:130%;
		}
@media (max-width:959px) {
/*768px～959px*/
#header{}
	#header dt br{
		display:none;
		}
	#header dt{
		padding-top:2px;
		}
	#header dd{
		margin-top:5px;
		height:0.8em;
		overflow:hidden;
		line-height:0.8em;
		}
}
}


/* for PC */
@media (min-width:960px) {
/*960px以上*/
body{
	font-family:Verdana,"游ゴシック",YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Osaka,sans-serif;
	font-size:1.8rem;
	line-height:1.6em;
	}
#header{
	display:block;
	padding:15px inherit;
	}
	#header > div{
		float:left;
		}
		#header > div+div{
			position:absolute;
			top:12px;
			right:15px;
			}
	#header span{
		width:auto;
		margin-top:-0.5em;
		font-size:1.4rem;
		line-height:1em;
		}
	#header p a{
		font-size:1.5rem;
		}
	#header dl{
		float:right;
		display:table;
		margin-right:10px;
		padding-top:5px;
		}
	#header dt,
	#header dd{
		display:table-cell;
		vertical-align:middle;
		}
	#header dt{
		font-size:1.2rem;
		line-height:1.2em;
		}
	#header dd{
		font-size:3.0rem;
		}
[id^="fee-"]{}
	[id^="fee-"] h3{
		font-size:2.75rem;
		}
	[id^="fee-"] p{
		padding:20px 0 20px 140px;
		font-size:2.1rem;
		line-height:1.6em;
		text-align:left;
		}
	[id^="fee-"] p span{
		top:12px;
		font-size:8rem;
		line-height:1em;
		}
	[id^="fee-"] p small{
		font-size:60%;
		}
	[id^="fee-"] i{
		width:auto;
		}
#subject{
	background:url(../images/subjectBg.jpg) center right no-repeat;
	background-size:cover;
	}
	#subject:before{
		content:none;
		}
	#subject p{
		font-size:3.2rem;
		line-height:1.4em;
		}
		#subject p strong:last-child{
			font-size:3.6rem;
			line-height:1.5em;
			}
	#subject i{
		margin-top:-1em;
		}
#about{}
	#about h3{
		position:absolute;
		left:0;
		width:24rem;
		padding:0.65em 0;
		font-size:2.4rem;
		font-weight:normal;
		}
	#about p{
		padding-top:0.5rem;
		padding-left:26rem;
		font-size:1.8rem;
		line-height:1.6em;
		}
#info-A{}
	#info-A .wrap{
		padding-left:40%;
		}
#ranking{}
	#ranking h3{
		font-size:5.2rem;
		line-height:127px;
		}
	#ranking i{
		left:50px;
		width:auto;
		}
#info-C{}
	#info-C .wrap{
		padding-right:30%;
		}
#voice{}
	#voice p{
		padding:15px 20px;
		}
.title{
	margin-bottom:20px;
	font-size:3.6rem;
	line-height:1.4em;
	}
.subTitle{
	margin-bottom:20px;
	font-size:3.0rem;
	line-height:1.4em;
	}
.wrap{
	max-width:900px;
	}
@media (max-width:1280px) {
/*960px～1280px*/
}
}
@media (min-width:1281px) {
/*1281px以上*/
main > div{
	padding:80px 0;
	}
	main > div > div+div{
		margin-top:50px;
		}
#header{}
	#header span{
		font-size:1.8rem;
		}
	#header p a{
		font-size:1.6rem;
		}
	#header dl{
		}
	#header dt{
		font-size:1.4rem;
		}
	#header dd{
		font-size:4.2rem;
		}
[id^="fee-"]{}
	[id^="fee-"] p{
		position:relative;
		margin-left:70px;
		margin-right:70px;
		font-size:2.4rem;
		line-height:1.5em;
		}
	[id^="fee-"] p span{
		right:20px;
		font-size:8rem;
		}
[id^="form"]{
	padding:50px 0;
	}
#about{}
	#about h3{
		position:absolute;
		left:0;
		width:28rem;
		padding:0.65em 0;
		font-size:2.8rem;
		font-weight:normal;
		}
	#about p{
		padding-top:0;
		padding-left:30rem;
		font-size:2.1rem;
		line-height:1.6em;
		}
#info-A{}
	#info-A .wrap{
		padding-left:40%;
		}
#ranking{}
	#ranking h3{
		font-size:6.2rem;
		}
	#ranking i{
		left:80px;
		width:auto;
		}
#flow{}
	#flow i{
		width:auto;
		top:-100px;
		left:50px;
		}
.title{
	margin-bottom:20px;
	font-size:3.6rem;
	line-height:1.4em;
	}
.subTitle{
	margin-bottom:20px;
	font-size:3.0rem;
	line-height:1.4em;
	}
	.subTitle span{
		font-size:130%;
		}
.wrap{
	max-width:1100px;
	}
}


/* ie */
@media all and (-ms-high-contrast:none){}

.gmap {	
	position: relative;
	margin-top: 30px;
	padding-top: 56.25%;
	overflow: hidden;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}