@import "compass";
@import "setting";

/* common */

html {
	font-size: 62.5%;
	 font-family: "Noto Sans JP";
}

body {
	
	line-height: 1.8;
	overflow-y: scroll;
	font-size: 1.6rem;
	
}

main {

}

a {
	text-decoration: none;
	cursor: pointer;
	@include pp();
}


/* fade */

#side-nav.is_hidden {
	opacity: 0;

	
}

#side-nav.is_show {
	opacity: 1;
	animation-delay: .4s;
	transition: 1s;

	
}

.title.is_hidden {
	.title-bar {
		height: 0;
	}

	span {
		opacity: 0;
	}

	h2 {
		opacity: 0;
	}

	p {
		opacity: 0;
	}		
}

.title.is_show {
	.title-bar {
		height: 100px;
	}

	span {
		animation: fadeIn 1.8s forwards;
		animation-delay: .4s;
	}

	h2 {
		animation: fadeIn 1.8s forwards;
		animation-delay: .8s;
	}

	p {
		animation: fadeIn 1.8s forwards;
		animation-delay: 1.2s;
	}		
}



.feature-block.is_hidden {
	.img-box {
		opacity: 0;
	}

	h3 {
		opacity: 0;
	}

	h4 {
		opacity: 0;
	}

	p {
		opacity: 0;
	}		
}

.feature-block.is_show {
	.img-box {
		animation: fadeIn 1.8s forwards;

	}

	h3 {
		animation: fadeIn 1.8s forwards;
		animation-delay: .4s;
	}

	h4 {
		animation: fadeIn 1.8s forwards;
		animation-delay: .8s;
	}

	p {
		animation: fadeIn 1.8s forwards;
		animation-delay: 1.2s;
	}		
}


.useage-flex.is_hidden {
	.useage-block {
		opacity: 0;
	}
}

.useage-flex.is_show {
	.useage-block:nth-child(1) {
		animation: fadeIn 1.8s forwards;
	}
	.useage-block:nth-child(2) {
		animation: fadeIn 1.8s forwards;
		animation-delay: .4s;
	}
	.useage-block:nth-child(3) {
		animation: fadeIn 1.8s forwards;
		animation-delay: .8s;
	}
}

#experience.is_hidden{
	
		h2{
			opacity: 0;
		}
		
		a{
			opacity: 0;
		}
		
		p {
			opacity: 0;
		}

}

#experience.is_show{
	
		h2{
		animation: fadeIn 1.8s forwards;
		}
		
		a{
		animation: fadeIn 1.8s forwards;
		animation-delay: .4s;
		}
		
		p {
		animation: fadeIn 1.8s forwards;
		animation-delay: .8s;
		}
		
}




.img-box {
	width: 100%;
	img {
		width: 100%;
	}
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.title {
	
	text-align: center;
	
	.title-bar {
		width: 3px;
		height: 100px;
		display: block;
		background:#c40251;
		margin: 0 auto 30px auto;
		transition: 0.5s;
		
	}
	
	span {
		color: #c40251;
		font-size: 1.6rem;
		display: block;
	}
	
	h2 {
		font-size: 3.0rem;
		@include min();
		margin-bottom: 20px;
	}
	
	p {
		font-size: 1.6rem;
	}
	
	
	
}


.loading {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f7f7f7;
	
	
		.loading__img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
		text-align: center;
		width: 20%;
			img{width: 100%;}
	}


}





header {
			position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 200;
	#nav_toggle{
		display: none;
		z-index: 999;
	}	
	
	.header-inner{
		display: flex;

		
		
		.logo {
			width: 20%;
			a {
				display: block;
				width: 140px;
				margin: 40px 0 0 30px;
				img {
					width: 100%;
				}
			}
		}

		nav {
			width: 80%;

			ul {
				display: flex;
				justify-content: flex-end;
				margin: 20px 20px 0 0;
			

				li {
					padding:20px;
					a{color: #333;}
					font-size: 1.2rem;
					line-height: 40px;
				}
				
				.sns {
					font-size: 4.0rem;
					vertical-align: middle;
					color: #00aced;
				}
			}
		}
	}
}


#side-nav {
	position: fixed;
	z-index: 100;
	top: 50%;
	@include translateY(-50%);
	right: 60px;

	li {
		margin-bottom: 10px;
		
		a {
			text-decoration: none;
		}		
		
		i {
			display: inline-block;
			background: #dddbdb;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			font-size: 1.2rem;
			text-decoration: none;
			margin-right: 10px;
		}

		span {

			font-size: 1.2rem;
			text-decoration: none;
			color: #000;
			line-height: 12px;
			vertical-align: middle;
		}		
		
	}
	
	li.active {
		
		i {
			background:#921012;
		}		
	}
	
}



#main-visual {
	height: 100vh;
	width: 100%;
	
	.main-visual-wrap {
		background: url(../img/hero.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.main-visual-catch {
		position: absolute;
		bottom: 60px;
		left: 120px;
		color: #333;
		font-size: 4.0rem;
		line-height: 2.0;
		@include min();
	}
	
	.main-visual-seminar {
		width: 200px;
		img {width: 100%;}
		position: absolute;
		bottom: 30px;
		right: 60px;
		
	}
	
}


#feature {
	padding: 150px 0 0 0;
	background: #f7f7f7;
	
	.feature-block {
		
		margin: 100px auto;
		text-align: center;
		
		
		.img-box {
			margin: 0 auto 5px auto;
			width: 90px;
			img {width: 100%;}
		}
		
		h3 {
			font-size: 2.0rem;
			text-decoration: underline;
			@include pp();
			margin-bottom: 50px;
			line-height: 2.0;
			color: #c40251;
		}
		
		h4 {
			font-size: 2.0rem;
			margin-bottom: 30px;
			line-height: 2.0;
			
		}
		
		p {
			font-size: 1.6rem;
		}
		
	}
	
	.feature-bottom {
		width: 100%;
		background-image: url(../img/Top_view0.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		height: 400px;
		background-color: #f7f7f7;
		
	}
	
}

#useage {
	padding: 150px 0;
	.useage-flex {
		display: flex;
		justify-content: space-between;
		margin: 100px auto;
	}
	
	.useage-block {
		
		width: 30%;
		
		.useage-num {
			margin: 0 auto 30px auto;
			width: 30%;
			img {width: 100%;}
		}
		
		h2 {
			text-align: center;
			font-size: 2.0rem;
			font-weight: bold;
			margin-bottom: 20px;
			
			&:after {
				content: "";
				width: 100px;
				height: 3px;
				background: #C14345;
				display: block;
				margin: 0 auto;
				
			}
			
		}
		
		p {
			text-align: center;
			margin-bottom: 40px;
		}
		
		.useage-img {
			margin: 0 auto;
			width: 100%;
			img {width: 100%;}
		}
	}
	
}


#lineup {
	
	padding: 150px 0;
	background: #f7f7f7;

	.slider-m-wrap {
	}
	
	.lineup-block {
		display: flex;
		
		.lineup-block-left {
			width: 40%;
			
			.lineup-block-left-img {
				width: 80%;
				margin: 30px auto 0 auto;
				img {
					width: 100%;
					text-align: center;
				}
			}
		}
		
		.lineup-block-right {
			width: 60%;
			
			h2{
				font-size: 3.2rem;
				line-height: 1.5;
				text-align: center;
				margin-bottom: 30px;

			}
			
			table {
				margin: 0 auto 30px auto;
				
				font-size:1.2rem;
				line-height: 2.0;
			}
			
			th,td{
				border-bottom: solid 1px #000;
				padding: 5px;
				
			}
		}
		
		a {
			width: 100%;
			height: 50px;
			line-height: 50px;
			background: #e5256a;
			text-align: center;
			color: #fff;
			display: block;
			margin: 0 auto;
			font-size: 1.2rem;
		}
		
	}

	
	
	#wrap{
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
		

	}
	#slider{
	  width: 80%;
	  margin:0 auto 30px;
	}
	.slide-item{
	  img{
		width: 100%;
	  }  
	}
	#thumbnail-list{
	  width: 60%;
	  margin: 80px auto 80px auto;
	  display: flex;
	  justify-content: space-between;
	  flex-wrap:wrap;
	}
	.thumbnail-item{
	  box-sizing: border-box;
	  position:relative;
	width: 23%;
		img {width: 100%;}
	
		
		&:after {
			 			    content: "";
    display: block;
    width: 0;
    height: 4px;
    background-color: #e5256a;
    position: absolute;
    bottom: 0;
    left: 0; 
			transition: 1s;
		}


		
	  &.thumbnail-current{
	
		  
		  &:after{
width: 100%;
		  }
	  }
	  img{
		width: 100%;
		margin: 0 auto;
	  } 
	}	
	
	
	
}


#experience {
	
	padding: 150px 0 ;
	
	
	
	h2 {
		font-size: 3.0rem;
		color: #e5256a;
		text-align: center;
		margin-bottom: 20px;
		
	}
	
	a {
			width: 40%;
			height: 50px;
			line-height: 50px;
			background: #e5256a;
			text-align: center;
			color: #fff;
			display: block;
			margin: 0 auto;
			font-size: 1.2rem;	
		margin-bottom: 10px;
	}
	
	p{
		font-size: 1.6rem;
		text-align: center;
	}
	
}


#seminar {
	background: #f7f7f7;
	padding: 150px 0;
	text-align: center;
	
	.seminar-disc {
		width: 70%;
		margin: 60px auto 30px auto;
		text-align: left;
		font-size: 1.6rem;
	}
	
	h3{
		font-size: 2.0rem;
		margin-bottom: 30px;
	}
	
	h4 {
		margin-bottom: 10px;
		color: #c40251;
	}
	
	.address {
		font-size: 1.6rem;
		margin-bottom: 30px;
	}
	
	.seminar-acc {
		margin-bottom: 30px;
	}
	
	
	
	a {
			width: 40%;
			height: 50px;
			line-height: 50px;
			background: #e5256a;
			text-align: center;
			color: #fff;
			display: block;
			margin: 60px auto 10px auto;
			font-size: 1.2rem;	
		
	}
	p {
		font-size: 1.2rem;
		text-align: center;
	}
	
	
}







footer {
	
	margin: 60px 0 100px;
	
	.img-box {
		width: 20%;
		margin: 0 auto 20px;
		
	}
	
	ul {
		width: 100%;
		margin: 0 auto 20px;
		text-align: center;
	}
	
	li {
		display: inline-block;
		padding: 0 10px;
	}
	
	a {
		color: #000;
		text-decoration: underline;
	}
	
	p {
		font-size: 1.2rem;
		text-align: center;
	}
	
	
}




@keyframes fadeIn
{
    0%
    {
        transform: translateY(50px); 

        opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }  100%
    {
        transform: translateY(0px); 

        opacity: 1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    }
}



@media screen and (max-width:768px){

	
	.wrap {
		width: 90%;
		margin: 0 auto;
	}	
	
	header {
		position: fixed;
		background: #fff;
			height: 60px;

		.header-inner{
			
			
			
			
			.logo {
				
				position: absolute;
				top: 20px;
				left: 20px;
		
				a {
					width: 100px;
					margin: 0;
				}
				
			}
			

			nav{
				display: none;
				position: absolute;
				top:0;
				left: 0;
				width: 100%;
				background: #f7f7f7;
				height: 100vh;

				ul{
					z-index: 1;
					display: block;
					width: 100%;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					li{
						text-align: center;
						border-bottom: 1px solid #fff;

						&:last-child {
							border: none;
						}

						a {
							display: block; 
						}
					}
				}			
			}

		}
		
		
	#nav_toggle{
		z-index: 999;
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 20px;
		right: 20px;

		div {
			position: relative;
			
			span{
				display: block;
				height: 3px;
				background:#323232;
				position:absolute;
				width: 100%;
				left: 0;
				transition: 0.3s ease-in-out;	
			}
			
			span:nth-child(1){
				top:0px;
			}			
			span:nth-child(2){
				top:12px;
			}			
			span:nth-child(3){
				top:24px;
			}			
		}
		
	}


	

	
	.open#nav_toggle{
			
			span:nth-child(1) {
						top: 12px;
						transform: rotate(135deg);
			}
			span:nth-child(2) {
				width: 0;
				left: 50%;
			}			
			span:nth-child(3) {
				top: 12px;
				-webkit-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				transform: rotate(-135deg);
			}			
		} 
	}
	#side-nav {
		display: none;
	}
	
	#main-visual {

		.main-visual-catch {
			position: absolute;
			bottom: 60px;
			left: 30px;
			color: #333;
			font-size: 2.0rem;
			line-height: 2.0;
			@include min();

		}

		.main-visual-seminar {
			width: 150px;
			img {width: 100%;}
			position: absolute;
			bottom: 30px;
			right: 30px;

		}

	}	
	
	
	#useage {
		.useage-flex {
			flex-direction: column;
		}

		.useage-block {

			width: 100%;
			margin-bottom: 30px;

			.useage-num {
				width: 30%;
			}
		}
	}
	
	#lineup {
		#wrap{
			#thumbnail-list{
				width: 100%;
			}
			
			#slider {
				width: 100%;
				
				.lineup-block{
					flex-direction: column;
					
					.lineup-block-left{
						width: 100%;
					}
					
					.lineup-block-right {
						width: 100%;
					}
					
				}
				
			}
		}
	}
	

	#experience {

		h2 {
			font-size: 4.0rem;

		}

		a {
				width: 100%;
				font-size: 1.6rem;	
				margin-bottom: 30px;
		}

	}	
	
	#seminar {


		.seminar-disc {
			width: 100%;

		}
		
		a {
			width: 100%;
			font-size: 1.6rem;
			margin: 60px auto 30px auto;
		}
		
		p {
			font-size: 1.6rem;
		}

	}
	
	footer {
		.img-box {
			width: 60%;
		}
	}	

}