@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 {
	.top-wrapper-r {
	transition-delay: 1.0s;
	}
	.message_jp{
		transition-delay: 0.4s;
	}
	.explain{
		transition-delay: 0.6s;
	}

	
	h2 .fadein_t{
		display: inline-block;
	}
	h2 .fadein_t:nth-of-type(2){
		transition-delay: 0.3s;
	}
	h2 .fadein_t:nth-of-type(3){
		transition-delay: 0.6s;
	}
	h2 .fadein_t:nth-of-type(4){
		transition-delay: 0.9s;
	}
	
	
	body{
		
	}
	#message{
		position: relative;
		overflow: hidden;
	}
	.bg_tit{
		font-family: 'Bodoni Moda', serif;
        font-weight: 400;
        font-size: 100px;
		color: #9bd2d9;
		line-height: 1;
        letter-spacing: 5px;
	}
	
	section{
		position: relative;
	}
	
	
	
	/* main
	--------------------*/
	
	
	
	
	
	
	#mainArea{
		position: relative;
		padding-top: 81px;
/*		background: url("../img/message_person01.jpg") no-repeat center;*/
		background-size: cover;
		height: 650px;
		box-sizing: border-box;
	}
		#mainArea h1{
			position: absolute;
			right: -5px;
			bottom: -40px;
			width: 608px;
			transition: 2.5s;
		}
		#mainArea #scroll{
			
			position: absolute;
			left: calc(50% - 520px);
			bottom: -30px;
			
		}
			#mainArea #scroll span{
				display: block;
				position: relative;
				height: 125px;
				width: 8px;
				padding-left: 5px;
				overflow: hidden;
			}
			#mainArea #scroll span img{
				display: block;
			}
				#mainArea #scroll span:after{
					content: '';
					display: block;
					position: absolute;
					width: 1px;
					height: 100%;
					background-color: #fff;
					left: 0;
					top: 0;
					animation: scroll 2.5s ease-out infinite;
				}
	
	
/*	topのとこ*/
	
	.top-wrapper {
		margin: 0 auto;
		max-width: 1226px;
		height: 650px;
		display: flex;
		justify-content: space-between;
	}
	.top-bg {
		
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 55px;
		background: url("../img/message_person01.jpg") no-repeat top center;
		background-size: cover;
		box-sizing: content-box;
		width: 100%;
		height: 650px;
		z-index: -1;
	}
	#mainArea .top-wrapper-l {
		margin-top: 120px;
		
	}
	#mainArea .bg_tit {
		font-size: 92px;
	}
	#mainArea .message_jp {
		margin-top: 10px;
		font-weight: 400;
		font-size: 24px;
		letter-spacing: 2px;
	}
	
	#mainArea .explain {
		display: block;
		margin-top: 70px;
		font-size: 20px;
	}
	#mainArea .explain .sub{
		display: block;
    	font-size: 16px;
	}
	
	#mainArea .top-wrapper-l p {
		margin-top: 64px;
	}
	#mainArea .top-wrapper-r {
		width: 516px;
		margin-top: 204px;
	}
	#mainArea .top-wrapper-r .sp{
		display: none;
	}
	
	
/*mainのとこ	*/
	
	
	.sec {
		padding-top: 84px;
	}	
	
	
	.wrap {
		width: 75%;
		margin: 0 auto;
		max-width: 1226px;
		padding-top: 0;
		display: flex;
	}
	.sec h2 {
		font-weight: 400;
		font-size: 27px;
		letter-spacing: 5px;
		line-height: 2.3;
	}
	.wrap p {
		width: 57%;
		margin-left: 60px;
		line-height: 2.0;
	}
	
	.wrap_01 {
		padding-top: 80px;
	}
	.wrap_02 h2{
		width: 258px;
		height: auto;
	}
	.wrap_02{
		justify-content: flex-end;
		padding-top: 84px;
		padding-bottom: 155px;
	}
	.person {
		position: relative;
		background-size: cover;
		width: 75%;
		margin: 90px auto 0 auto;
		max-width: 1226px;
		padding-top: 0;
	}
		.person .inner{
			background: url("../img/message_person02.jpg") no-repeat center;
			background-size: cover;
			height: 444px;
			width: 100%;
			position: relative;
		}
			.person .inner::before {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 25px;
				top: -25px;
				right: 0;
				background-image: repeating-linear-gradient(-45deg , transparent, transparent 14px, rgba(182, 229, 195, 1) 14px, rgba(182, 229, 195, 1) 20px );
			}
	.person::after {
		content: "";
		display: block;
		position: absolute;
		margin: 0 calc(50% - 100vw);
		width: 200vw;
		height: 942px;
		background-color: #c2e1e6;
		z-index: -2;
		top: 233px;
		left: 0px;
	}
	
	.txt {
		font-size:  115%;
		text-align: justify;
		
		width: 600px;
	}
	
	
	
	
	
	
	

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	.top-wrapper-r {
		transition-delay: 1.2s;
	}
	.message_jp{
		transition-delay: 0.4s;
	}
	.explain{
		transition-delay: 1.6s;
	}

	body{
		
	}
	#top{
		position: relative;
		overflow: hidden;
	}
	
	
	
	.bg_tit{
		font-family: 'Bodoni Moda', serif;
		font-size: 80px;
		color: #9bd2d9;
		line-height: 1;
	}
	
	
	section{
		position: relative;
	}
	
	
	
	
	/* main
	--------------------*/
	#mainArea{
		position: relative;
		padding-bottom: 320px;
	}
		#mainArea h1{
			position: absolute;
			right: -3px;
			bottom: -40px;
			max-width: 608px;
			width: 80%;
			transition: 2.5s;
		}
	
/*topのとこ*/
	
	.top-bg{
		position: relative;
		padding-top: 55px;
		background: url("../img/message_person01.jpg") no-repeat top center;
		background-size: cover;
		box-sizing: border-box;
		height: 280px;
	}
	
	
	.top-wrapper {
		width: 100%;
		position: absolute;
		top: calc(280px - 50px);
		left: 50%;
		transform: translateX(-50%);
		
	}
	#mainArea .top-wrapper-l {
		width: 100%;
	}
	#mainArea .bg_tit {
		font-size: 72px;
		position: relative;
		left: -3px;
		font-weight: 400;
	}
	#mainArea .message_jp {
		padding: 0 5%;
		font-size: 18px;
		font-weight: 400;
	}
	
	#mainArea .explain {
		display: block;
		margin-top: 30px;
		font-size: 18px;
	}
	#mainArea .explain .sub{
		display: block;
    	font-size: 14px;
	}
	
	
	#mainArea p {
		margin-top: 270px;
		text-align: left;
		width: 90%;
		font-size: 100%;
		line-height: 1.6;
		
		padding: 0 5%;
	}
	#mainArea .top-wrapper-r {
		width: 70%;
		max-width: 313px;
		margin-top: 40px;
		padding-left: 5%;
	}
	
	#mainArea .top-wrapper-r .pc {
		display: none;
	}
	#mainArea .top-wrapper-r .sp{
		width: 260px;
	}
	
	
/*mainのとこ*/
	
	.wrap {
		padding: 0 5%;
		margin: 120px auto 0 auto;
	}
	.wrap h2 {
		font-weight: 400;
		font-size: 24px;
		letter-spacing: 3px;
		line-height: 2;
	} 
	
	.wrap p {
		font-weight: normal;
		text-align: justify;
		margin-top: 20px;
	}
	
	.wrap_02 {
		padding-top: 40px;
		margin-top: 0;
		background-color: #c2e1e6;
	}
	
	.wrap_02 p {
		padding-bottom: 80px;
	}
	
	

	
	
	.person {
		width: 90%;
		margin: 96px auto 0 auto;
		
/*		margin-top: 80px;*/
		background-image: url("../img/message_person02.jpg");
		height: 240px;
		position: relative;
		background-size: cover;
		background-position: center;
		
		
	}
/*	しましま*/
	.person::before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 16px;
		top: -16px;
		right: 0;
		background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(182, 229, 195, 1) 10px, rgba(182, 229, 195, 1) 16px );
	}
	
/*	背景*/
	.person::after {
		content: "";
		display: block;
		position: absolute;
		margin: 0 calc(50% - 50vw);
		width: 100vw;
		height: 100%;
		background-color: #c2e1e6;
		z-index: -2;
		top: 120px;
		left: 0px;
	}
	
	


}