/* add */

.sp{
	display:none;
}

.fadeinup{
	transform: translateY(20px);
	opacity:0.01;
	transition: all 0.75s ease-out;
}

.fadeinup.on{
	transform: translateY(0);
	opacity:1;
}

#header{
	background-color:rgba(0,0,0,0.4);
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:100;
	padding:0.5rem 1rem;
}

.home #header{
	background-color:rgba(0,0,0,0);
}

#header.on{
	background-color:rgba(0,0,0,0.4);
}

#logoimg{
	width:240px;
	max-width:95%;
	display:inline-block;
}


#hero-wrap{
	background-color:rgba(0,0,0,1.00);
	color:#FFF;
	padding:20vh 0;
	background-image:url(images/sus-hero2b.jpg);
	background-size:cover;
	background-position:top center;
	background-attachment: fixed;
	position:relative;
}

#hero-wrap:before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
	pointer-events: none;
	transition: all 0.5s ease-out;
	z-index:3;
}

#hero-wrap.on:before{
	background-color:rgba(0, 15, 17, 0.9);
}

#hero{
	width:1600px;
	max-width:95%;
	margin:0 auto;
	position:relative;
	z-index:10;
}

#hero-box h1{
	font-size:74px;
	font-weight:500;
	
}

#hero-box h1 span{
	display:block;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
	
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#hero-h1-01{animation-delay: 0.1s;}
#hero-h1-02{animation-delay: 0.2s;}
#hero-h1-03{animation-delay: 0.3s;}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


#hero-box h2{
	font-size:31px;
	font-weight:200;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	animation-delay: 0.5s;
	text-shadow: 0px 2px 1px rgba(0,0,0,0.4);
}

#herotext{
	font-size:22px;
	letter-spacing: 0.07em;
	line-height:1.7;
	-webkit-animation-name: fadeIn;
  	animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	animation-delay: 0.6s;
	text-shadow: 0px 2px 1px rgba(0,0,0,0.4);
}
#scroll-img{
	width:66px;
	display:block;
	margin:7.1vw auto 0 auto;
}


#top01{
	margin:7.5% 0 0 0;
	position:relative;
	z-index:10;
}

#inner-top01{
	width:1600px;
	max-width:95%;
	margin:0 auto;
	display:flex;
	border-bottom:1px solid #FFF;
	padding-bottom:80px;
}

#top01 .left,
#top01 .right{
	width:50%;
}


.d-h2{
	font-size:50px;
	font-weight:300;
}

.text-l{
	margin-top:40px;
	letter-spacing: 0.07em;
	line-height:1.7;
	text-align:left;
	font-size:17px;
	padding-left:1.5rem;
}

#top01b{
	display:flex;
	width:1600px;
	max-width:95%;
	margin:80px auto 0 auto;
	flex-direction : row-reverse;
	
}

.d-h3{
	font-size:2rem;
}

.top01b-subt{
	text-align:right;
}

#top01b .right{
	width:45%;
	margin-right:5%;
	text-align:left;
}

#top01b .left{
	width:50%;
}

#top01b .left img{
	border:5px solid #112e42;
}

#top01b .text-l{
	padding-left:2rem;
}

#top01c{
	display:flex;
	width:1600px;
	max-width:95%;
	margin:80px auto 0 auto;
}

#top01c .left{
	width:45%;
	margin-right:5%;
}

#top01c .right{
	width:45%;
	margin-left:5%;
	text-align:left;
}

.top01c-img{
	border:5px solid #112e42;
}

#top02{
	background-image:url(images/sea-bottom.jpg);
	background-size:cover;
	background-position:top center;
	margin:0 auto 0 auto;
	padding:200px 0;
	color:#FFF;
}

#inner-top02{
	width:1600px;
	max-width:95%;
	margin:0 auto;
	text-align:center;
}

#top02 h2{
	text-shadow: 0px 2px 1px rgba(0,0,0,0.3);
	font-size:2.5rem;
}

#top02 h3{
	font-size:1.4rem;
	font-weight:300;
}

#top02-text{
	line-height:1.8;
}

.cbutton{
	border-radius: 100px;
	border:2px solid;
	padding:0.5rem;
	width:350px;
	max-width:95%;
	display:block;
	text-align:center;
	text-decoration: none;
	margin-right:auto;
	margin-left:auto;
}

.cbutton.cbwhite{
	color:#FFF;
	border-color:#FFF;
}


#top02 .cbutton{
	margin-top:3.5rem;
	transition: all 0.5s ease-out;
}

#top02 .cbutton:hover{
	background-color:#FFF;
	color:#000A47;
}

#top03{
	background-color:#FFF;
}

#inner-top03{
	width:1600px;
	max-width:95%;
	margin:0 auto;
	text-align:center;
	display:flex;
	padding:5% 0;
}

#top03 .d-h2{
	color:#002024;
}

#top03 .left{
	width:45%;
	margin-right:5%;
}

#top03 .right{
	width:50%;
	text-align:left;
	padding-top:80px;
}

.top03-per{
	border-top:1px solid #CCC;
	padding:1.5rem 5%;
	display:flex;
}

.top03-per dt{
	width:50%;
	font-size:5rem;
	font-weight:400;
	color:#002024;
	line-height:1.1;
}

.top03-per dt span{
	font-size:10rem;
}

.top03-per dd{
	width:50%;
}

#top04{
	width:100%;
	overflow-x: hidden;
	
}

#inner-top04{
	width:1600px;
	max-width:95%;
	margin:0 auto;
	text-align:center;
	padding:0 0 7.5% 0;
}

#top04 h2{
	font-size:50px;
	margin-bottom:3.5rem;
	color:#002024;
}



#top04-card-wrap{
	
}

#top04-card-wrap{
	display:flex;
	justify-content: space-between;
		
}

.top04-card{
	width:22%;
}

.top04-img{
	border-radius: 7px;
}

.top04-card h3{
	color:#002024;
	margin:1rem 0;
	font-weight:300;
}

.top04-card p{
	text-align:left;
	margin-top:0;
	line-height:1.8;
}


#cir{
	position:relative;
	margin-bottom:5%;
}

#cir .left,
#cir .right{
	box-shadow: 0px 0px 16px -6px rgba(6,43,12,0.75) inset;
}


#cir .left{
	position:relative;
	width:65%;
	padding:6% 35% 6% 6%;
	border-radius: 80px 300px 300px 80px;
	transform: translate(-50%);
	transition: all 0.75s ease-out;
	opacity:0.1;
}

#cir.on .left{
	transform: translate(0%);
	opacity:1;
}

#cir .right{
	position:absolute;
	width:65%;
	padding:6% 6% 6% 35%;
	right:0;
	height:100%;
	top:0;
	border-radius: 300px 80px 80px 300px;
	text-align:left;
	transform: translate(50%);
	transition: all 0.75s ease-out;
	opacity:0.1;
}

#cir.on .right{
	transform: translate(0%);
	opacity:1;
}

#cir h2{
	font-size:2rem;
	font-weight:500;
	margin-top:0;
	margin-bottom:1.5rem;
}

#cir p{
	line-height:2;
}

#cir-logo{
	position:absolute;
	left:50%;
	transform: translate(-50%);
	top:28%;
	width:180px;
	opacity:0.05;
	transition: all 0.5s ease-out;
	transition-delay: 0.75s;
}

.on #cir-logo{
	opacity:1;	
}

#footer{
	background-color:#333;
	color:#FFF;
	padding:0.5rem 0;
}

#top04card02{transition-delay: 0.1s;}
#top04card03{transition-delay: 0.2s;}
#top04card04{transition-delay: 0.3s;}



@media screen and (max-width: 1550px) {
	.top03-per dt{
		font-size:4vw;
	}
	
	.top03-per dt span{
		font-size:8vw;
	}
}

@media screen and (max-width: 980px) {
	
	#hero-box h1{
		font-size:7vw;
	}
	
	#inner-top01{
		width:800px;
		display:block;
	}
	
	#top01 .left, #top01 .right{
		margin:0;
		width:100%;
	}
	
	#top01b{
		width:800px;
		max-width:95%;
		margin:0 auto 100px auto;
		display:block;
	}
	
	#top01b .left{
		margin-bottom:1.5rem;
	}
	
	#top01c{
		width:800px;
		max-width:95%;
		margin:0 auto 100px auto;
		display:block;
	}
	
	#top01c .left{
		margin-bottom:100px;
	}
	
	#inner-top03{
		width:800px;
		max-width:95%;
		margin-right:auto;
		margin-left:auto;
		display:block;
	}
	
	#top03 .left{
		width:95%;
		margin:0 auto;
	}
	
	#top03 .right{
		width:95%;
		margin:0 auto;
		padding-top:15px;
	}
	
	#top04-card-wrap{
		flex-wrap: wrap;
	}
	
	.top04-card{
		width:47.5%;
		margin-bottom:50px;
	}
	
}

@media screen and (max-width: 770px) {
	#header{
		display:flex;
		justify-content: space-between;
	}
	#menu{
		margin:0 0 0 auto;
		display:block;
	}
	
}

@media screen and (max-width: 640px) {
	
	.text-l,
	#top01b .text-l{
		padding-left:0;
	}
	
	.d-h3{
		margin-top:15px;
		margin-bottom:10px;
		font-size:6.5vw;
	}
	
	#hero-box h2{
		font-size:6vw;
	}
	
	
	#hero-wrap{
		padding-bottom:1px;
	}
	
	.page #content p, .single-post #content p{
		font-size:15px;
	}
	
	.sp{
		display:inline;
	}
	#inner-top01{
		border-bottom:0px solid;
	}
	
	
	.top03-per dt span{
		font-size:16vw;
	}
	.top03-per dt{
		font-size:8vw;
	}
	
	#top04 .d-h2{
		font-size:7vw;
		margin-bottom:15px;
	}
	#cir{
		width:100%;
	}
	
	#cir h2{
		font-size:6vw;
		margin-bottom:10px;
		text-align:center;
	}
	
	#content #cir p{
		font-size:3.7vw;
		margin-top:5px;
	}
	
	#cir-logo{
		width:18%;
		top:42%;
	}
	
	#cir .left{
		width:100%;
		padding: 6% 8% 31% 8%;
	    border-radius: 80px 80px 300px 300px;
		transform: translate(0%);
	}
	#cir .right{
		width:100%;
		position:static;
		padding: 31% 8% 6% 8%;
	    border-radius: 300px 300px 80px 80px;
		transform: translate(0%);
		margin-top:-30%;
	}
	
	
	.top04-card h3{
		font-size:4.5vw;
	}
	#top04-card-wrap .top04-card p{
		font-size:3.7vw;
	}
	#hero-box h1{
		font-size:15vw;
	}
	
	#top02{
		padding:80px 0;
	}
	
	#top02 #top02-text{
		font-size:5vw;
		text-align:left;
	}
	
	#top04{
		background-color:#FFF;
	}
	
	#hero-wrap:before{
		background-color: rgba(0, 15, 17, 0.2)
	}
	
}