@import "compass";
@import "setting";
@import "compass/reset";
/* common */

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

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

a {
	text-decoration: none;
	cursor: pointer;
}

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

.sp {
	display: none;
}

/* fade */

#side-nav.is_hidden {
	opacity: 0;

	
}

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

	
}

.title.is_hidden {
	h1 {
		opacity: 0;
	}

	span {
		opacity: 0;
	}
	
	p {
		opacity: 0;
	}
}

.title.is_show {

	h1 {
		animation: fadeIn 1.8s forwards;
	}

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

#products{
	#slider.is_hidden {
		opacity: 0;
	}
	
	#thumbnail-list.is_hidden{
		opacity: 0;
	}
	
	#slider.is_show {
		animation: fadeIn 1.8s forwards;
	}
	#thumbnail-list.is_show{
		animation: fadeIn 1.8s forwards;
		animation-delay: .4s;
	}		
	
}


#chart {
	.chart-wrap.is_hidden{
		opacity: 0;
	}
	
	.chart-wrap.is_show {
		animation: fadeIn 1.8s forwards;
	}
}

#seminar {
	.seminar-disc.is_hidden {
		opacity: 0;
	}
	.seminar-disc.is_show {
		animation: fadeIn 1.8s forwards;
	}
	h3.is_hidden {
		opacity: 0;
	}
	h3.is_show {
		animation: fadeIn 1.8s forwards;
	}
	
	.seminar-acc.is_hidden {
		opacity: 0;
	}	
	.seminar-acc.is_show {
		animation: fadeIn 1.8s forwards;
	}
	
	a.is_hidden {
		opacity: 0;
	}	
	a.is_hidden {
		animation: fadeIn 1.8s forwards;
	}	
	p.is_hidden {
		opacity: 0;
	}	
	p.is_hidden {
		animation: fadeIn 1.8s forwards;
	}	
}




/* title */

.title {
	
	text-align: center;
	
	h1 {
		font-size: 1.4rem;
	}
	
	span {
		@include pp();
		font-size: 3.0rem;
	}
}


/*loading*/

.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%;}
	}
}


/* product block */

	.products-block {
		display: flex !important;
		

		
.products-block-left {
    width: 40%;
	
	
.logo-img-block {
    width: 100%;
    margin: 0 0 10px 0;
	img{width: 100%;}
}
	
h2 {
    font-size: 2.0rem;
    margin: 0 0 30px 0;
}	

p {
    font-size: 1.6rem;
    line-height: 2.0;
    margin: 0 0 20px 0;
}	

a {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #e5256a;
    text-align: center;
    color: #fff;
    display: block;
    margin: 0 auto;
    font-size: 1.2rem;
}	
	
}
		
.products-block-right {
    width: 60%;
	
.product-block-right-img-block {
    width: 100%;
	img{width: 100%;}
}	
	
}		
		
	}



/*header*/

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*/

#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:#0aa39f;
		}		
	}	
}

#main-visual {
	width: 100%;
	background: #f7f7f7;
	
	.wrap {
		position: relative;

	}
	
	.product-01 {
		
		display: flex;
		justify-content: space-between;
		padding: 100px 0 0 0;
		
		.product-img-box {
			width: 30%;
			img{width: 100%;}
		}
		
	}
	
	.product-02 {
		display: flex;
		justify-content: space-around;
		padding: 0 0 100px 0;
		
		
		.product-img-box {
			width: 30%;
			img{width: 100%;}
			
		}
	}
	
	h1 {
		font-size: 3.6rem;
		@include min();
		text-align: center;
	}
	
	.arrow-wrap {
		position: absolute;
		bottom: 10px;
		left: 50%;
		@include translateX(-50%);
		text-align: center;

		.arrow{
			width: 30px;
			height: 30px;
			border: 3px solid;
			border-color:  transparent transparent #333 #333;
			transform: rotate(-45deg);
			margin: 0px 0px 15px 36px;
		}
		
		span {
			font-size: 1.6rem;
			color: #333;

		}
		
	}

}

#products {
	
	padding: 100px 0 150px 0;	
	
.slider-m-wrap {
	}
	


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

	}
	#slider{
	  width: 80%;
	  margin:60px auto 30px auto;
	}
	.slide-item{
	  img{
		width: 100%;
	  }  
	}
	#thumbnail-list{
	  width: 60%;
	  margin: 40px auto 40px auto;
	  display: flex;
	  justify-content: space-between;
	  flex-wrap:wrap;
	}
	.thumbnail-item{
	  box-sizing: border-box;
	  position:relative;
	width: 13%;
		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;
	  } 
	}
	
	
	.slick-prev, .slick-next{
		width: auto;
		height: auto;
	}
		
.slick-prev {
    left: -70px;
}	
	
.slick-next {
    right: -70px;
}		
}

#chart {
	padding: 100px 0 150px 0;
	background: #f7f7f7;
	
	.chart-wrap {
		
		.question{
			h3{
				text-align: center;
				font-size: 2.0rem;
				margin: 60px 0 60px 0;
				color: #0aa39f;

				&:before {
					content: "Q.";

				}


			}
			ul {
				display: flex;
				justify-content: space-between;		

				li {
					display: block;
					width: 100%;
					margin: 5px;

					a {
						display: block;
						width: 100%;
						background: #0aa39f;
						color: #fff;
						text-decoration: none;
						box-sizing: border-box;
						line-height: 60px;
						font-size: 1.6rem;
						vertical-align: middle;
						text-align: center;
						transition: 0.3s;

						&:hover {
							opacity: 0.7;
						}

					}
				}
			}			
			
		}
		
		.answer {
			
			width: 80%;
			margin: 0 auto;
			
			h4 {
				font-size: 2.0rem;
				    margin: 120px 0 60px 0;
			}
			
		}
		
		




	}
	
	
	
	
}


#seminar {

	padding: 100px 0 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 {
	background: #f7f7f7;
	padding: 100px 0 50px 0;
	
	.footer-img-box {
		width: 200px;
		margin: 0 auto;
		img{width:100%;}
	}
	
	ul {
		display: flex;
		justify-content: center;
		margin: 0 0 30px 0; 
		
		li{
			
			&:not(:last-child):after {
				content: "/";
			}
			
			
			
			a{
				font-size: 1.2rem;
				margin: 0 10px;
					
				}
			}
		
		
		}
	
	p {
		text-align: center;
		font-size: 1.0rem;
	}

	}





@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){


	.sp {
		display: block;
	}
	
	.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;
	}
	
		.products-block {
			flex-direction: column-reverse;
			
			.products-block-left {
				width: 100%;
			}
			
			.products-block-right {
				width: 100%;
			}
			
		} 	
	
	
	#main-visual {
		h1{
			font-size: 2.0rem;
		}
	}	
	
	#products {

		
	.slick-prev, .slick-next{
		width: 20px;
		height: auto;
	}
		
	.slick-prev {
		left: -40px;
	}	

	.slick-next {
		right: -40px;
	}
	
		#thumbnail-list{
			width: 100%;
			margin: 0;
		}
		
	}
	
	#chart{
		.question {
			ul {
				flex-direction: column;
			}
		}
	}
	
	#seminar {
		
		.seminar-disc {
			width: 100%;
		}
		
		a {
			width: 100%;
		}
	}
	
	footer {
		ul {
			flex-wrap: wrap;
		}
	}

}