@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 {

	
	
	
	body{
		
	}

	.bg_tit{
		font-family: 'Bodoni Moda', serif;
		font-size: 120px;
		color: #82BECB;
		line-height: 1;
	}
	
	section{
		position: relative;
	}
	
	.btnArea{
		margin-top: 80px;
	}
	.btn{
		font-family: 'Bodoni Moda', serif;
		color: #1687bc;
		font-size: 15px;
		line-height: 1;
		font-weight: 400;
		padding: 5px 70px 5px 10px;
		border: 1px solid #4c8cb5;
		position: relative;
	}
		.btn:after{
			content: '';
			display: block;
			position: absolute;
			background-size: cover;
			width: 37px;
			height: 8px;
			right: 20px;
			top: 0;
			bottom: 0;
			margin: auto 0;
			transition: 0.4s;
		}
		.btn:hover:after{
			right: 13px;
		}
	
	
	
	
	/* main
	--------------------*/
	
	
	
	
	/*	benefits*/
	
	#mainArea{
		position: relative;
		background: url("../img/top_pc.jpg") no-repeat center;
		background-size: cover;
		background-position: bottom;
		height: 470px;
	}
		#mainArea .top-wrapper {
			position: absolute;
			bottom: 100px;
			width: 100%;
		}
			#top #mainArea .top-wrapper h1 {
				font-size: 92px;
				text-align: center;
				font-weight: 400;
				width: 100%;
			}
			#top #mainArea .top-wrapper .jp_tit{
				font-size: 24px;
				text-align: center;
				font-weight: 400;
				width: 100%;
				color: #0096BF;
				margin-top: 28px;
				letter-spacing: 2px;
			}
	.top_txt {
		text-align: center;
		font-size: 18px;
		color: #0096BF;
		margin: 92px auto 102px auto;
		line-height: 2.0
	}
	
	.wrapper {
		width: 960px;
		margin: 0 auto;
	}
	
	.txt-wrapper {
		height: 314px;
	}
	
	.txt-wrapper .content {
		width: 300px;
		padding: 55px 0;
		box-sizing: border-box;
		position: relative;
		float: left;
		
	}
		/*	2番目以降*/
		.txt-wrapper .content:nth-child(n + 2) {
			margin-left: 30px;
		}
	
	
		.txt-wrapper .content::before {
			content: '';
			display: block;
			position: absolute;
			width: 300px;
			height: 10px;
			background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(195, 229, 193, 1) 8px, rgba(195, 229, 193, 1) 12px );
			top: 0;
		}
		.txt-wrapper .content::after {
			content: '';
			display: block;
			position: absolute;
			width: 300px;
			height: 10px;
			background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(195, 229, 193, 1) 8px, rgba(195, 229, 193, 1) 12px );
			bottom: 0;
		}
	
	
		.txt-wrapper .content h3 {
			font-size: 24px;
			color: #0096BF;
			font-weight: 400;
			text-align: center;
			line-height: 1;
		}

		.txt-wrapper .content p {
			text-align: center;
			font-size: 14px;
			letter-spacing: 0;
			margin: 25px 0;
			color: #0096BF;
			line-height: 2.0;
		}
		.txt-wrapper .content .btn {
			display: block;
			margin: 0 auto;
			width: 146px;
			height: 34px;
			box-sizing: border-box;
			padding: 7px 42px 7px 12px;
			white-space: nowrap;
		}
		.txt-wrapper .content .btn::after {
			content: "";
			width: 11px;
			height: 11px;
			background-image: url("../img/btn_more.png");
			right: 20px;
		}
	
	
	.photo-wrapper {
		height: 500px;
		margin-top: 94px;
		position: relative;
		margin-bottom: 127px;
	}
	
		.photo-wrapper .bg {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	
			.photo-wrapper .bg-01 {
				background-image: url("../img/bg_01.jpg");
				width: 666px;
				height: 310px;
				float: left;
				
			}
			.photo-wrapper .bg-02 {
				background-image: url("../img/bg_02.jpg");
				width: 284px;
				height: 500px;
				float: right;
				animation-delay: 300ms;
			}
			.photo-wrapper .bg-03 {
				background-image: url("../img/bg_03.jpg");
				width: 328px;
				height: 180px;
				float: left;
				margin-top: 10px;
				animation-delay: 300ms;
			}
			.photo-wrapper .bg-04 {
				background-image: url("../img/bg_04.jpg");
				width: 328px;
				height: 180px;
				float: right;
				margin-top: 10px;
				margin-right: 10px;
				animation-delay: 600ms;
			}
}
	

	
	
	

/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	p {
	}
	body{
		
	}
	#top{
		position: relative;
		overflow: hidden;
	}
	
	
	
	.bg_tit{
		font-family: 'Bodoni Moda', serif;
		font-size: 80px;
		color: #abd0d8;
		line-height: 1;
	}
	.btnArea{
		margin-top: 40px;
	}
	.btn{
		font-family: 'Bodoni Moda', serif;
		color: #1687bc;
		font-size: 15px;
		line-height: 1;
		padding: 5px 70px 5px 10px;
		border: 1px solid #4c8cb5;
		position: relative;
		
	}
		.btn:after{
			content: '';
			display: block;
			position: absolute;
			background: url('../common/img/arrow.png') no-repeat center;
			background-size: cover;
			width: 37px;
			height: 8px;
			right: 20px;
			top: 0;
			bottom: 0;
			margin: auto 0;
			transition: 0.4s;
		}
		.btn:hover:after{
			right: 13px;
		}
	
	
	/* main
	--------------------*/
	
	/*	benefits*/
	
	#mainArea{
		position: relative;
		background: url("../img/top.jpg") no-repeat center;
		background-size: cover;
		background-position: center;
		width: 100%;
		height: 430px;
		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;
			box-sizing: border-box;
			padding-top: 30px;
			height: 100%;			
			width: 100%;
		}
			#mainArea .top-wrapper h1 {
				font-size: 60px;
				text-align: center;
				line-height: 1.1;
				font-weight: 400;
			}
			#mainArea .top-wrapper .jp_tit {
				text-align: center;
				font-size: 25px;
				font-weight: 400;				
				margin-top: 22px;
			}

	
	.top_txt {
		display: block;
		text-align: center;
		font-size: 16px;
		margin: 80px auto;
	}
	
	
	
	.txt-wrapper {
		padding: 0 5%;
		margin-top: 18px;
		box-sizing: border-box;
	}
	
	.txt-wrapper .content {
		width: 300px;
		padding: 56px 0;
		box-sizing: border-box;
		position: relative;
		margin: 0 auto;
		margin-top: 60px;
	}
		.txt-wrapper .content:nth-child(2) {
			height: 222px;
		}
		.txt-wrapper .content:nth-child(3) {
			height: 200px;
		}
	
			.txt-wrapper .content::before {
				content: '';
				display: block;
				position: absolute;
				width: 300px;
				height: 10px;
				background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(195, 229, 193, 1) 8px, rgba(195, 229, 193, 1) 12px );
				top: 0;
			}
			.txt-wrapper .content::after {
				content: '';
				display: block;
				position: absolute;
				width: 300px;
				height: 10px;
				background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(195, 229, 193, 1) 8px, rgba(195, 229, 193, 1) 12px );
				bottom: 0;
			}
	
		.txt-wrapper .content h3 {
			font-size: 22px;
			color: #0096BF;
			font-weight: 400;
			text-align: center;
			line-height: 1;
		}
	
		.txt-wrapper .content p {
			text-align: center;
			font-size: 14px;
			font-weight: lighter;
			letter-spacing: 0;
			margin: 20px 0;
			color: #0096BF;
		}
		.txt-wrapper .content .btn {
			display: block;
			margin: 0 auto;
			width: 146px;
			height: 34px;
			box-sizing: border-box;
			padding: 7px 42px 7px 12px;
			white-space: nowrap;
			font-weight: lighter;
		}
			.txt-wrapper .content .btn::after {
				content: "";
				width: 11px;
				height: 11px;
				background-image: url("../img/btn_more.png");
				right: 16px;
			}
	
	
	
	
	.photo-wrapper {
		width: 100%;
		padding: 0 auto;
		margin-top: 100px;
		position: relative;
	}
		.photo-wrapper .bg {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			width: calc(50% - 3px);
		}
	
			.photo-wrapper .bg-01 {
				background-image: url("../img/bg_01.jpg");
				width: 100%;
				height: 150px;
				float: left;
			}
			.photo-wrapper .bg-02 {
				background-image: url("../img/bg_02.jpg");
				height: 280px;
				float: right;
				
				margin-top: 7px;
			}
			.photo-wrapper .bg-03 {
				background-image: url("../img/bg_03.jpg");
				height: 137px;
				padding: 0; 
				float: left;
				
				margin-top: 6px;
			}
			.photo-wrapper .bg-04 {
				background-image: url("../img/bg_04.jpg");
				height: 137px;
				float: left;
				
				margin-top: 6px;
			}
	
	
	
	
	
	

	/* footer
	--------------------*/
	footer{
		position: relative;
		padding-top: 40vw;
	}


}