@import (less,optional) '_common.css';

aside{
	margin-left: 7.5rem;
	max-width: 340px;
	width: 100%;
	
	>div{
		&:nth-of-type(1){
			margin: 0 0 3rem;
		}
		
		&:nth-of-type(2){
			a{
				display: block;
				
				img{
				border: 1px solid #000;
					width: 100%;
					height: auto;
				}
			}
		}
	}
}

@keyframes fade_anime1 {
	0% {  opacity: 0; transform: scale(1.1);}
	16% { opacity: 1; }
	32% { opacity: 0; transform: scale(1);}
}
@keyframes fade_anime2 {
	16% { opacity: 0; transform: scale(1);}
	32% { opacity: 1; }
	48% { opacity: 0; transform: scale(1.1);}
}
@keyframes fade_anime3 {
	32% { opacity: 0; transform: scale(1.1); left: 0;}
	48% { opacity: 1; transform: scale(1.1); }
	64% { opacity: 0; transform: scale(1.1); left: 5%;}
}
@keyframes fade_anime4 {
	48% { opacity: 0; transform: scale(1.1); top: 0;}
	64% { opacity: 1; transform: scale(1.1); }
	80% { opacity: 0; transform: scale(1.1); top: 5%;}
}
@keyframes fade_anime5 {
	64% { opacity: 0; transform: scale(1.1);}
	80% { opacity: 1;}
	100% { opacity: 0; transform: scale(1);}
}

/* ****************************** START DESKTOP ****************************** */

/* ******************************
div.top_container
****************************** */

div.top_container{
	background: url('../images/background.jpg');
	
	>div{
		.box1;
		padding-top: 3rem;
		padding-bottom: 3rem;
		display: flex;
		justify-content: space-between;
		z-index: 10;
		position: relative;
	}
}


/* ******************************
#top_slideshow
****************************** */

#top_slideshow{
	div{
		width: 100%;
		padding: 50% 0 0;
		background: #000;
		top: 0;
		left: 0;
		overflow: hidden;
		position: relative;
		
		img{
			width: 100%;
			hegiht: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			animation-duration: 25s;
			animation-iteration-count: infinite;
			
			&.img1{animation-name: fade_anime1;}
			&.img2{animation-name: fade_anime2;}
			&.img3{animation-name: fade_anime3;}
			&.img4{animation-name: fade_anime4;}
			&.img5{animation-name: fade_anime5;}
		}
	}
}

/* ******************************
#top_message
****************************** */

#top_message{
	width: 100%;
	position: relative;
	
	&::before{
		background: url('../images/index/top_message_image2.png');
		background-position: center;
		background-size: 100%;
		content:'';
		left: 0;
		position: absolute;
		top: 0;
		margin-top: -1rem;
		margin-left: -1rem;
		width: 8rem;
		height: 20.3rem;
		z-index: 1;
	}
	
	&::after{
		background: url('../images/index/top_message_image3.png');
		background-position: center;
		background-size: 100%;
		content:'';
		left: 0;
		position: absolute;
		bottom: 0;
		margin-bottom: -7rem;
		margin-left: -5rem;
		width: 15rem;
		height: 15rem;
		z-index: 1;
	}
	
	p{
		left: 100%;
		letter-spacing: 0.25rem;
		line-height: 200%;
		position: relative;
		transform: translateX(-100%);
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		z-index: 100;
	
		span{
			z-index: 10;
			position: relative;
		}
	
		&::after{
			background: url('../images/index/top_message_image1.png');
			background-position: center;
			background-size: 100%;
			content:'';
			right: 0;
			position: absolute;
			top: 50%;
			margin-top: -2.5rem;
			margin-right: -5rem;
			width: 10rem;
			height: 10rem;
			z-index: 1;
		}
	}
}



@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, #top_message{width: 50%;}
}

/* ****************************** END DESKTOP ****************************** */

@media screen and (max-width:480px){
/* ****************************** START SMARTPHONE ****************************** */

aside{
	margin: 0;
	
	>div{
		&:nth-of-type(1){
			margin: 0 0 1.5rem;
		}
	}
}

/* ******************************
div.top_container
****************************** */

div.top_container{	
	>div{
		display: block;
	}
}

/* ******************************
#top_message
****************************** */

#top_message{
	margin: 0 0 1.5rem;
	
	&::before,
	&::after{
		display: none;
	}
	
	p{
		left: 0;
		transform: translateX(0%);
		width: 100%;
		
		&::after{
			display: none;
		}
	}
}

/* ****************************** END SMARTPHONE ****************************** */
}