#top-box {
	width:100%;
	height:100vh;
	display: block;
	overflow: hidden;
	padding: 0;
	top:0;
	line-height: 0;
	background-color: #000;
	position: fixed;
	z-index: -10;
	background-image:url("../images/mainvisual.jpg");
	background-position: center top 40%;
	background-repeat: no-repeat;
	background-size: cover;
	animation: blurin 5s ease 0.3s 1 normal;
	-webkit-animation: blurin 5s ease 0.3s 1 normal;
	opacity: 0;
	animation-fill-mode: forwards;
}

@keyframes blurin {
	  0% {filter: blur(30px) grayscale(100%); opacity:0;}
	 70% {filter: blur(10px) grayscale(100%);}
	100% {filter: blur(0px) grayscale(0%);  opacity:1;}
}

@-webkit-keyframes blurin {
	  0% {filter: blur(30px) grayscale(100%); opacity:0;}
	 70% {filter: blur(10px) grayscale(100%);}
	100% {filter: blur(0px) grayscale(0%);  opacity:1;}
}

.blurin {
	animation: fblurin 5s ease 0.3s 1 normal;
}



#top-box-sub {
	width:100%;
	height:400px;
	display: block;
	overflow: hidden;
	padding: 0;
	top:0;
	line-height: 0;
	background-color: #000;
	position: relative;
	z-index: -10;
	background-image:url("../images/contact_bg.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}



@media (max-width:768px){
	
	#top-box {
		background-position: right 29% top 40%;
	}
}

@media (max-width:550px){
	
	#top-box,
	.logo-box,
	.top-dots {
		height:-webkit-calc(100vh - 112px)!important;
	}
}

.logo-box {
	width:100%;
	height:100vh;
	top: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(27,53,93,0.2)!important;
	z-index: 1;
	color: #fff;
}

.logo-box img{
-webkit-filter: drop-shadow(0px 3px 5px rgba(27,53,93,.2));
        filter: drop-shadow(0px 3px 5px rgba(27,53,93,.2));
}

.logo-case{
	width: 90%;
	-webkit-filter: drop-shadow(0px 2px 5px rgba(27,53,93,.2));
    filter: drop-shadow(0px 2px 5px rgba(27,53,93,.2));
	z-index: 20;
}

.logo-case dd{
	font-family: 'Spartan', sans-serif;
	font-size: 3em;
	font-weight: 400;
	letter-spacing: 0.5em;
	line-height: 1.3em;
	margin-right: -0.5em!important;
	margin-bottom: 0.15em;
	
}

.logo-case p{
	font-family:'Poppins', sans-serif;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: 0.6em;
	line-height: 1.2em;
	margin-right: -0.6em;
}



@media (max-width:600px){
	
	.logo-case dd{
		font-size: 1.7em!important;
		letter-spacing: 0.3em;
		margin-right: -0.3em;
	}
	
	.logo-case p{
		font-size: 0.85em!important;
		letter-spacing: 0.5em;
		margin-right: -0.5em;
	}
		
}	

@media (max-width:400px){
	
	.logo-case dd{
		font-size: 1.2em;
		letter-spacing: 0.4em;
		margin-right: -0.4em;
	}
	
}

@media (max-width:350px){
	
	.logo-case dd{
		font-size: 1.4em!important;
		letter-spacing: 0.4em;
		margin-right: -0.4em;
	}
	
	.logo-case p{
		font-size: 0.7em!important;
		letter-spacing: 0.5em;
		margin-right: -0.5em!important;
	}
	
}


.logo-box-sub {
	width:100%;
	height:400px;
	top: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(36,53,80,0.4)!important;
	z-index: 1;
	color: #fff;
}

.logo-box-sub img{
	-webkit-filter: drop-shadow(0px 2px 5px rgba(36,53,80,.2));
    filter: drop-shadow(0px 2px 5px rgba(36,53,80,.2));
}

.logo-case-sub {
	width: 90%!important;
	margin-top: 3%;
	-webkit-filter: drop-shadow(0px 2px 5px rgba(36,53,80,.2));
    filter: drop-shadow(0px 2px 5px rgba(36,53,80,.2));
	z-index: 20;
}

.logo-case-sub dd{
	font-family: 'Spartan', sans-serif;
	font-size: 2em;
	font-weight: 400;
	letter-spacing: 0.5em;
	line-height: 1.3em;
	margin-right: -0.5em!important;
	margin-bottom: 0.15em;
	
}

.logo-case-sub p{
	font-family:'Poppins', sans-serif;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: 0.6em;
	line-height: 1.2em;
	margin-left: 0.6em;
}


@media (max-width:600px){
	
	.logo-case-sub dd{
		font-size: 1.9em!important;
		letter-spacing: 0.3em;
		margin-right: -0.3em;
	}
		
	.logo-case-sub p{
	font-size: 0.8em;
}
}	

@media (max-width:400px){
	
	.logo-case-sub dd{
		font-size: 1.6em!important;
		letter-spacing: 0.4em;
		margin-right: -0.4em;
	}
	
	.logo-case-sub p{
		font-size: 0.8em;
		letter-spacing: 0.5em;
		margin-left: 0.5em;
	}
	
	.logo-case-sub dd span{
		display: inline-block;
		margin-right: -0.5em;
	}
	
}

@media (max-width:350px){
	
	.logo-case-sub dd{
		font-size: 1.4em!important;
		letter-spacing: 0.4em;
		margin-right: -0.4em;
	}
	
	.logo-case-sub p{
		font-size: 0.7em;
		letter-spacing: 0.5em;
		margin-left: 0.5em!important;
	}
	
}


.back-top {
	width: 25px!important;
	left: 13px!important;
	top: 10px!important;
	position: absolute;
}


.top-sign {
	width: 160px!important;
	left: 13px!important;
	bottom: 8px!important;
	position: absolute;
}

.top-sns {
	width: 30px;
	right: 13px;
	bottom: 11px!important;
	position: absolute;
	margin: 0;
	padding: 0;
	line-height: 0;
}

@media (max-width:600px){
	
	.top-sign {
		width: 120px!important;
		left: 10px!important;
		bottom: 5px!important;
	}


	.top-sns {
		width: 24px;
		right: 10px;
		bottom: 0px;
	}

}

.logo-boost{
	text-align: left;
	display: flex;
	top: 13px;
	left: 13px;
	position: absolute;
}


.logo-boost img{
	height: 23px;
	margin-right: 8px;
}

@media (max-width:600px){
	
	.logo-boost img{
	height: 20px;
	margin-right: 10px;
	}
	
}

.top-dots {
	width: 100%;
	height:100vh;
	display: inline-block;
	top: 0;
	left: 0;
	position:absolute;
	z-index: 0;
	background-image:url("../images/dots.png");
}


.sub-top-room{
	width:100%;
	height: 300px!important;
	margin: 0 auto;
	overflow:hidden;
	text-align:center;
	position: relative;
	padding: 0;
	z-index: -1;
	pointer-events:none;
}


.box-pic {
	width:100%;
	height:100%;
	display: block;
	overflow: hidden;
	background: rgba(0,0,0,0.3)!important;
	line-height: 0;
	background-position: center top 40%;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
}


/*
.logo-box-sub {
	width:100%;
	height:400px;
	top: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.3)!important;
	z-index: 1;
	color: #fff;
}

.logo-box-sub img{
-webkit-filter: drop-shadow(0px 3px 5px rgba(27,53,93,.2));
        filter: drop-shadow(0px 3px 5px rgba(27,53,93,.2));
}

.logo-case-sub {
	width: 280px;
	display: block;
	margin-top: 1%;
}

.logo-case-sub p{
	margin-bottom: -10px;
}

@media (max-width:600px){
	
	.sub-top-room{
		height: 250px!important;
	}
	
	.logo-box-sub {
		height:400px;
	}
	
	.logo-case-sub {
		width: 220px;
		display: block;
		margin-top: 5%;
	}
	
}
/*
#sub-top {
	width:100%;
	height:350px;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	position: relative;
	background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	border: none;
	z-index: -10;
}*/

.sub-top-bg {height: 100%;
	background: rgba(0,0,0,0.3);
	background-image:url("../images/dots.png");
	z-index: 11;
}
.sub-top-logo {
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
}
.sub-top-logo img {
	top: 160px;
	width: 250px;
	position: absolute;
	display: inline-block;
	text-align: center;
	margin-left: -125px;
}

#sub-top-middle {
	width:100%;
	height:280px;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	position: relative;
	background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.sub-top-middle-logo {
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
}
.sub-top-middle-logo img {
	top: 90px;
	width: 250px;
	position: absolute;
	display: inline-block;
	text-align: center;
	margin-left: -125px;
}

/*
.logo-case dd span {/*各テキストにanimationを設定*//*
	color: transparent;/*テキストを透明にしてtext-shadowだけ表示する*//*
	animation: blur 10s ease-out infinite;
}*/


.logo-case dd span {/*各テキストにanimationを設定*/
	color: transparent;/*テキストを透明にしてtext-shadowだけ表示する*/
	animation: blur 10s ease 1;
	animation-fill-mode: forwards;
}

.logo-case dd span:nth-child(1) {/*一文字ずつ遅延させる*/
	animation-delay: 0.1s;
}
.logo-case dd span:nth-child(2) {
	animation-delay: 0.3s;
}
.logo-case dd span:nth-child(3) {
	animation-delay: 0.5s;
}
.logo-case dd span:nth-child(4) {
	animation-delay: 0.7s;
}
.logo-case dd span:nth-child(5) {
	animation-delay: 0.9s;
}
.logo-case dd span:nth-child(6) {
	animation-delay: 1.1s;
}
.logo-case dd span:nth-child(7) {
	animation-delay: 1.3s;
}
.logo-case dd span:nth-child(8) {
	animation-delay: 1.5s;
}
.logo-case dd span:nth-child(9) {
	animation-delay: 1.7s;
}
.logo-case dd span:nth-child(10) {
	animation-delay: 1.9s;
}
.logo-case dd span:nth-child(11) {
	animation-delay: 2.1s;
}



@keyframes blur {/*opacityとtext-shadow+animationでフェードインを表現する*/
	0%		{text-shadow:  0 0 100px #fff; opacity:0;}
	5%		{text-shadow:  0 0 90px #fff;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 0px #fff;}
	100%	{text-shadow:  0 0 0px #fff; opacity: 1;}
}

/*
@keyframes blur {
	0%		{text-shadow:  0 0 100px #fff; opacity:0;}
	5%		{text-shadow:  0 0 90px #fff;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 0px #fff;}
	80%		{text-shadow:  0 0 0px #fff;}
	85%		{opacity: 1;}
	95%		{text-shadow:  0 0 90px #fff;}
	100%	{text-shadow:  0 0 100px #fff; opacity:0;}
}*/