@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


img{
	width: 100%;
}


p {
/*	font-size: 115%;*/
}

/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {

	
	
	
	
	#mainArea{
		position: relative;
		background: url("../img/top.jpg") no-repeat center;
		background-size: cover;
		height: 470px;
		box-sizing: border-box;
	}
		#mainArea .top-wrapper {
			position: absolute;
			bottom: 100px;
			width: 100%;
			text-align: center;
		}
			#mainArea .top-wrapper h1 {
				margin-top: 110px;
				font-size: 88px;
				text-align: center;
				font-family: 'Bodoni Moda', serif;
				font-weight: 400;
				letter-spacing: 3px;
				color: #9bd2d9;
				line-height: 1;
			}
			#mainArea .top-wrapper h1.on {
				opacity: 0.9;
			}
			#mainArea .top-wrapper .message_jp {
				font-weight: 400;
				font-size: 24px;
				letter-spacing: 2px;
				margin-top: 20px;
			}
	
	.con_area {
		width: 895px;
		margin: 60px auto 80px;
	}
	.con_area .lead {
		text-align: center;
	}
		.con_area .lead h2 {
			font-weight: 400;
			font-size: 27px;
			line-height: 2;
			letter-spacing: 2px;
		}
		.con_area .lead div {
			font-size: 18px;
			margin-top: 50px;
			line-height: 2.2;
			transition-delay: 0.5s;
		}
		.con_area .lead p {
			margin-top: 30px;
			line-height: 2;
			transition-delay: 0.8s;
		}
	
	
	
	.tab_area {
		margin-top: 100px;
	}
		.tab_area .cat {
		}
			.tab_area .cat li {
				position: relative;
				text-align: center;
				font-weight: bold;
			}
			.tab_area .cat li::before {
				position: absolute;
				content: "";
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 100%;
				height: 1px;
				background-color: #009bc6;
			}
			.tab_area .cat li.cat01 {
				float: left;
				width: 586px;
			}
			.tab_area .cat li.cat02 {
				float: right;
				width: 290px;
			}
				.tab_area .cat li span {
					background-color: #fff;
					padding: 0 10px;
					position: relative;
				}
		.tab_area .tab {
			margin-top: 5px;
			position: relative;
		}
		.tab_area .tab::before {
			position: absolute;
			content: "";
			bottom: 0;
			left: -32px;
			background-color: #009bc6;
			width: calc(100% + 64px);
			height: 1px;
		}
			.tab_area .tab li {
				float: left;
				font-size: 20px;
				text-align: center;
				width: 288px;
				border-top: 1px solid #009bc6;
				border-left: 1px solid #009bc6;
				border-right: 1px solid #009bc6;
				border-bottom: 1px solid #009bc6;
				box-sizing: border-box;
				line-height: 1.2;
				padding: 12px;
				position: relative;
				transition-duration: 0.3s;
			}
			.tab_area .tab li:nth-child(2) {
				margin-left: 10px;
				padding: 24px 10px;
			}
			.tab_area .tab li:nth-child(3) {
				margin-left: 20px;
			}
			.tab_area .tab li.active {
				border-bottom: 1px solid #fff;
			}
			.tab_area .tab li::before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				background-image: url("../img/active.png");
				background-size: 14px 6px;
				background-repeat: repeat-x;
				height: 6px;
				width: 100%;
				opacity: 0;
				transition-duration: 0.3s;
			}
			.tab_area .tab li.active::before {
				opacity: 1;
			}
				.tab_area .tab li span {
					font-size: 16px;
				}
			.tab_area .tab li.active {
			}
	.tab_con {
		text-align: center;
	}
	.tab_con li {
		display: none;
	}
	.tab_con li.show {
		margin-top: 50px;
		display: block;
	}

	.table th {
		width: 18%;
	}
	.table .btn {
		margin: 30px 0 20px;
	}
		.table .btn a {
			position: relative;
			border: solid 1px #0093be;
			padding: 8px 55px 8px 10px;
			font-size: 18px;
		}
		.table .btn a::before {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 15px;
			margin: auto;
			width: 11px;
			height: 11px;
			background-image: url("../img/window.png");
			background-size: cover;
		}
	
	.tab_con li > .btn {
		width: 450px;
		margin: 120px auto 0;
	}
		.tab_con li > .btn a {
			display: block;
			position: relative;
			border: solid 1px #0093be;
			font-size: 24px;
			padding: 10px 20px;
			text-align: center;
		}
		.tab_con li > .btn a::before {
			position: absolute;
			content: "";
			top: 0;	
			bottom: 0;
			right: 20px;
			margin: auto;
			width: 31px;
			height: 6px;
			border-right: solid 1px #0093be;
			border-bottom: solid 1px #0093be;
			transform: skew(45deg);
			transition: 0.4s;
		}
		.tab_con li > .btn a:hover::before {
			right: 13px;
		}
	
	
	#footer {
		padding-top: 0px;
	}
	
	
}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	main{
		position: relative;
		overflow: hidden;
	}

	
	#mainArea{
		position: relative;
		background: url("../img/top_sp.jpg") no-repeat center;
		background-size: cover;
		height: 250px;
		box-sizing: border-box;
	}
		#mainArea .top-wrapper {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			flex-direction: column;
			height: 100%;
		}
		#mainArea .top-wrapper h1 {
			font-size: 56px;
			text-align: center;
			font-family: 'Bodoni Moda', serif;
			font-weight: 400;
			letter-spacing: 3px;
			color: #9bd2d9;
			line-height: 1;
			margin-top: 400px;
			opacity: 0;
		}
		#mainArea .top-wrapper h1.on {
			opacity: 0.9;
		}
		#mainArea .top-wrapper .message_jp {
			font-weight: 400;
			font-size: 18px;
			letter-spacing: 2px;
			margin-top: 5px;
		}
	
	.con_area {
		width: 90%;
		margin: 160px auto 40px;
	}
	.con_area .lead {
	}
		.con_area .lead h2 {
			font-weight: 400;
			font-size: 20px;
			line-height: 2;
			letter-spacing: 2px;
		}
		.con_area .lead div {
			font-size: 16px;
			margin-top: 30px;
			transition-delay: 0.5s;
		}
		.con_area .lead p {
			margin-top: 20px;
			transition-delay: 0.8s;
		}
	
	
	
	.tab_area {
		margin-top: 60px;
	}
		.tab_area .cat {
		}
			.tab_area .cat li {
				position: relative;
				text-align: center;
				font-weight: bold;
			}
			.tab_area .cat li::before {
				position: absolute;
				content: "";
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 100%;
				height: 1px;
				background-color: #009bc6;
			}
			.tab_area .cat li.cat01 {
			}
			.tab_area .cat li.cat02 {
			}
				.tab_area .cat li span {
					background-color: #fff;
					padding: 0 10px;
					position: relative;
				}
		.tab_area .tab {
			margin-top: 5px;
			position: relative;
		}
		.tab_area .tab::before {
			position: absolute;
			content: "";
			bottom: 0;
			left: -32px;
			background-color: #009bc6;
			width: calc(100% + 64px);
			height: 1px;
		}
			.tab_area .tab li {
				float: left;
				font-size: 18px;
				text-align: center;
				width: 100%;
				border-top: 1px solid #009bc6;
				border-left: 1px solid #009bc6;
				border-right: 1px solid #009bc6;
				border-bottom: 1px solid #009bc6;
				box-sizing: border-box;
				line-height: 1.2;
				padding: 12px;
				position: relative;
				transition-duration: 0.3s;
			}
			.tab_area .tab li:nth-child(2) {
				margin-top: 10px;
			}
			.tab_area .tab li:nth-child(3) {
				margin-top: 50px;
			}
			.tab_area .tab li.active {
			}
			.tab_area .tab li::before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				background-image: url("../img/active.png");
				background-size: 14px 6px;
				background-repeat: repeat-x;
				height: 6px;
				width: 100%;
				opacity: 0;
				transition-duration: 0.3s;
			}
			.tab_area .tab li.active::before {
				opacity: 1;
			}
				.tab_area .tab li span {
					font-size: 14px;
				}
			.tab_area .tab li.active {
			}
			.tab_area .tab .cat {
				position: absolute;
				top: -30px;
				left: 0;
				right: 0;
			}
			.tab_area .tab .cat::before {
				position: absolute;
				content: "";
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 100%;
				height: 1px;
				background-color: #009bc6;
			}
				.tab_area .tab .cat span {
					background-color: #fff;
					padding: 0 10px;
					position: relative;
					font-weight: bold;
					font-family: YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
				}
	.tab_con {
		text-align: center;
	}
	.tab_con li {
		display: none;
	}
	.tab_con li.show {
		margin-top: 50px;
		display: block;
	}

	.table th {
		width: 20%;
	}
	.table .btn {
		margin: 30px 0 20px;
	}
		.table .btn a {
			position: relative;
			border: solid 1px #0093be;
			padding: 8px 55px 8px 10px;
			font-size: 18px;
		}
		.table .btn a::before {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 15px;
			margin: auto;
			width: 11px;
			height: 11px;
			background-image: url("../img/window.png");
			background-size: cover;
		}
	
	.tab_con li > .btn {
		width: 100%;
		margin: 80px auto 0;
	}
		.tab_con li > .btn a {
			display: block;
			position: relative;
			border: solid 1px #0093be;
			font-size: 20px;
			padding: 10px 20px;
			text-align: center;
		}
		.tab_con li > .btn a::before {
			position: absolute;
			content: "";
			top: 0;	
			bottom: 0;
			right: 20px;
			margin: auto;
			width: 31px;
			height: 6px;
			border-right: solid 1px #0093be;
			border-bottom: solid 1px #0093be;
			transform: skew(45deg);
		}

	#footer {
		padding-top: 0px;
	}

	
	

}