@charset "utf-8";
#wrap{padding-top: 0;}
#index p.btn{
	text-align: center;
	line-height: 0;
}
#index p.btn>a{
	display: inline-block;
	font-size: 1.8rem;
	line-height: 70px;
	min-width: 300px;
	padding: 0 10px 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #00929b;
	background: #fff;
	border: 1px solid #00929b;
	border-radius: 35px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	position: relative;
}
#index p.btn>a:hover{
	text-decoration: none;
	background: #00929b;
	color: #fff;
}
#index p.btn>a::after{
	position: absolute;
	top: 50%;
	right: 40px;
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1px solid #00929b;
	border-right: 1px solid #00929b;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: 0.3s ease-in-out;
}
#index p.btn>a:hover::after{
	right: 35px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}

#visual{
	line-height: 0;
	position: relative;
}
#visual>span{
	display: block;
	line-height: 0;
	opacity: 0;
}
#visual>ul.slide{
	display: block;
}
#visual>ul.slide>li img{
	width: 100%;
	height: auto;
	opacity: 0;
}
#visual>ul.slide>li{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('../img/index/visual01.jpg') center top no-repeat;
	background-size: cover;
	z-index: 1;
}
#visual>ul.slide>li:nth-child(2){
	background: url('../img/index/visual02.jpg') center top no-repeat;
	background-size: cover;
}
#visual>ul.slide>li:nth-child(3){
	background: url('../img/index/visual03.jpg') center top no-repeat;
	background-size: cover;
}
#visual>ul.slide>li:nth-child(4){
	background: url('../img/index/visual04.jpg') center top no-repeat;
	background-size: cover;
}
#visual>ul.slide>li.active{
	z-index: 2;
}
#visual ul#slide_controll,
#visual ul#slide_nav{
	display: none;
}

#about{
	display: block;
	position: relative;
	background: url('../img/index/about_bg.svg') center top no-repeat;
	background-size: 4500px auto;
	line-height: 0;
	text-align: left;
	padding: 5px 0 90px;
	margin: -324px auto 90px;
	position: relative;
	z-index: 3;
	overflow: hidden;
}
#about h1{
	text-align: right;
	margin: 0 auto 150px;
}
#about h1 img{
	width: auto;
	height: 243px;
}
#about h2{
	font-size: 4rem;
	line-height: 140%;
	color: #fff;
	margin: 0 auto 60px;
	font-weight: normal;
}
#about h2>small{
	display: block;
	font-size: 1.6rem;
	line-height: 120%;
}
#about p.tit{
	font-size: 3rem;
	color: #fff;
	line-height: 160%;
	margin: 0 auto 10px;
}
#about p.tx{
	font-size: 1.6rem;
	color: #fff;
	line-height: 200%;
	margin: 0 auto 50px;
}
#about ul.img{
	display: block;
	text-align: left;
	line-height: 0;
	position: absolute;
	bottom: 80px;
	right: 0;
}
#about ul.img>li{
	display: block;
	margin: 0 auto;
}
#about ul.img>li:nth-child(1){
	transform: translate(-90px, 0px);
}
#about ul.img>li:nth-child(2){
	transform: translate(80px, 30px);
}
#about ul.img>li img{
	border-radius: 10px;
	overflow: hidden;
}

ul#navs{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	margin: 0 auto 100px;
}
ul#navs>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 50%;
}
ul#navs>li a{
	display: block;
	position: relative;
}
ul#navs>li a::after{
	content: '';
	position: absolute;
	bottom: 40px;
	right: 40px;
	width: 70px;
	height: 70px;
	background: url('../img/index/nav_icn.svg') center center no-repeat;
	background-size: cover;
}
ul#navs>li span{
	display: block;
	overflow: hidden;
}
ul#navs>li span.img{
	line-height: 0;
}
ul#navs>li span.img img{
	width: 100%;
	height: auto;
	transition-duration: .3s;
}
ul#navs>li>a:hover>span.img img{
	transform: scale(1.1);
}
ul#navs>li span.tit{
	font-size: 3.4rem;
	line-height: 120%;
	color: #fff;
	position: absolute;
	bottom: 80px;
	left: 40px;
	z-index: 2;
}
ul#navs>li span.tit>small{
	display: block;
	font-size: 1.6rem;
	line-height: 120%;
}
ul#navs>li span.tx{
	position: absolute;
	bottom: 20px;
	left: 40px;
	right: 140px;
}
ul#navs>li span.tx>span{
	color: #fff;
	font-size: 1.4rem;
	line-height: 160%;
}

#topics{
	margin: 0 auto 100px;
	line-height: 0;
	text-align: left;
}
#topics>.inner{
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
}
#topics .col{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 500px;
	margin: 0 100px 0 0;
}
#topics .col:last-child{
	margin-right: 0;
}
#topics h2{
	font-size: 3rem;
	color: #00929b;
	line-height: 120%;
	margin: 0 auto 40px;
	font-weight: normal;
}
#topics h2>small{
	display: block;
	font-size: 1.6rem;
}
#topics .col ul{
	display: block;
	line-height: 0;
	margin: 0 auto 60px;
}
#topics .col ul>li{
	display: block;
	text-align: left;
	font-size: 1.6rem;
	margin: 0 auto 30px;
}
#topics .col ul>li:last-child{
	margin-bottom: 0;
}
#topics .col ul>li{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
}
#topics .col ul>li span.img{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 100px;
	margin: 0 20px 0 0;
}
#topics .col ul>li span.img img{
	width: 100%;
	height: auto;
}
#topics .col ul>li span.txt{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 380px;
}
#topics .col .dc{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	margin: 0 auto 5px;
}
#topics .col span.d,
#topics .col span.c{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}
#topics .col span.d{
	color: #959595;
	line-height: 120%;
}
#topics .col span.c{
	font-size: 1.2rem;
	border: 1px solid #00929b;
	color: #00929b;
	line-height: 20px;
	border-radius: 10px;
	padding: 0 10px;
	margin: -2px 0 0 10px;
}
#topics .col ul>li a{
	display: inline;
	line-height: 160%;
	color: #333;
}

#konnatokoro{
	margin: 0 auto 110px;
	line-height: 0;
	text-align: left;
}
#konnatokoro h2{
	font-size: 4rem;
	color: #0080b5;
	line-height: 160%;
	margin: 0 auto 15px;
	font-weight: normal;
}
#konnatokoro p.tx{
	font-size: 1.6rem;
	color: #0080b5;
	line-height: 160%;
	margin: 0 auto 30px;
}
#konnatokoro p.img{
	line-height: 0;
	text-align: center;
	margin: 0 auto 50px;
}
#konnatokoro p.img img{
	border-radius: 40px;
	overflow: hidden;
}

#product{
	position: relative;
	background: url('../img/index/product_bg2_pc.svg') center top no-repeat;
	background-size: 4500px auto;
	padding: 40px 0 80px;
	text-align: left;
}
#product::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('../img/index/product_bg.png') center top no-repeat;
	background-size: 1500px auto;
}
@media screen and (max-width:1500px){
	#product::before{
		background-size: 1500px auto;
	}
}
#product h2{
	line-height: 0;
	margin: 0 auto 140px;
}
#product h2 img{
	width: auto;
	height: 44px;
}
#product p.tit{
	font-size: 2.4rem;
	line-height: 160%;
	color: #fff;
	margin: 0 auto 40px;
}
#product p.tx{
	font-size: 1.6rem;
	line-height: 200%;
	color: #fff;
	margin: 0 auto 1em;
}
#product p.btn{
	margin-top: 60px;
}
#product p.btn>a:hover{
	background: none;
	border: 1px solid #fff;
}


@media screen and (min-width:768px){
	#about h1{
		opacity: 0;
		transform: translate(40px, 0px);
		transition: 0.8s ease-in-out;
	}
	#about h2{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.2s;
	}
	#about p.tit{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.4s;
	}
	#about ul.img{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.6s;
	}
	#about p.tx{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.8s;
	}
	#about p.btn{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 1.0s;
	}
	#about[data-object="active"] h1,
	#about[data-object="active"] h2,
	#about[data-object="active"] p.tit,
	#about[data-object="active"] ul.img,
	#about[data-object="active"] p.tx,
	#about[data-object="active"] p.btn{
		opacity: 1;
		transform: translate(0px, 0px);
	}
	
	ul#navs>li{
		opacity: 0;
		transform: translate(0px, -40px);
		transition: 0.8s ease-in-out;
	}
	ul#navs>li:last-child{
		transform: translate(0px, 40px);
		transition-delay: 0.4s;
	}
	ul#navs[data-object="active"]>li{
		opacity: 1;
		transform: translate(0px, 0px);
	}
	
	#topics .col{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
	}
	#topics .col:last-child{
		transition-delay: 0.4s;
	}
	#topics[data-object="active"] .col{
		opacity: 1;
		transform: translate(0px, 0px);
	}
	
	#konnatokoro h2{
		opacity: 0;
		transform: translate(40px, 0px);
		transition: 0.8s ease-in-out;
	}
	#konnatokoro p.tx{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.2s;
	}
	#konnatokoro p.img{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.4s;
	}
	#konnatokoro p.btn{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.6s;
	}
	#konnatokoro[data-object="active"] h2,
	#konnatokoro[data-object="active"] p.tx,
	#konnatokoro[data-object="active"] p.img,
	#konnatokoro[data-object="active"] p.btn{
		opacity: 1;
		transform: translate(0px, 0px);
	}
	
	#product h2{
		opacity: 0;
		transform: translate(40px, 0px);
		transition: 0.8s ease-in-out;
	}
	#product p.tit{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.2s;
	}
	#product p.tx{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.4s;
	}
	#product p.btn{
		opacity: 0;
		transform: translate(0px, 40px);
		transition: 0.8s ease-in-out;
		transition-delay: 0.6s;
	}
	#product[data-object="active"] h2,
	#product[data-object="active"] p.tit,
	#product[data-object="active"] p.tx,
	#product[data-object="active"] p.btn{
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

@media screen and (max-width:767px){
	#wrap{padding-top: 60px;}
	#index p.btn>a{
		font-size: 1.6rem;
		line-height: 55px;
		min-width: 250px;
	}
	
	#about{
		background: url('../img/index/about_bg2.svg') left top no-repeat;
		background-size: 100% auto;
		padding: 0;
		margin-top: -13vw;
		margin-bottom: 60px;
	}
	#about h1{margin: 0 auto 20px;}
	#about h1 img{height: 100px;}
	#about h2{font-size: 2.4rem;margin: 0 auto 20px;font-weight: bold;}
	#about h2>small{font-size: 1.2rem;}
	#about p.tit{font-size: 1.6rem;font-weight: bold;margin: 0 auto 30px;}
	#about ul.img{
		position: static;
		margin: 0 auto 20px;
	}
	#about ul.img>li{
		transform: translate(0,0) !important;
		margin: 0 10% 20px;
	}
	#about p.tx{color: #333;font-size: 1.4rem;margin-bottom: 20px;}
	
	ul#navs{margin-bottom: 60px;}
	ul#navs>li{
		width: 100%;
	}
	ul#navs>li a{
		padding: 0;
	}
	ul#navs>li a::after{
		width: 45px;
		height: 45px;
		bottom: initial;
		top: 30px;
	}
	ul#navs>li span.tit{font-size: 2.4rem;font-weight: bold;left: 20px;bottom: initial;top:20px;text-shadow: 0 0 8px #333,0 0 8px #333,0 0 8px #333;}
	ul#navs>li span.tx{left: 20px;right: 20px;text-shadow: 0 0 3px #333,0 0 3px #333;}
	
	#topics{margin: 0 auto 80px;}
	#topics .col{
		display: block;
		width: auto;
		margin: 0 auto 60px;
	}
	#topics .col:last-child{
		margin-bottom: 0;
	}
	#topics h2{font-size: 2.4rem;font-weight: bold;}
	#topics .col ul{margin: 0 auto 20px;}
	#topics .col ul>li{font-size: 1.4rem;margin-bottom: 20px;}
	#topics .col ul>li span.img{width: 20%;margin-right: 4%;}
	#topics .col ul>li span.txt{width: 76%;}
	#topics .col .dc{font-size: 1.2rem;}
	#topics .col span.c{line-height: 16px;padding: 0 5px;font-size: 1rem;}
	
	#konnatokoro{
		margin: 0 auto 80px;
	}
	#konnatokoro h2{font-size: 2.3rem;font-weight: bold;}
	#konnatokoro p.tx{font-size: 1.4rem;}
	#konnatokoro p.img{margin-bottom: 20px;}
	
	#product{
		background: url('../img/index/product_bg2.svg') left -260px bottom 0px no-repeat;
		background-size: 1500px auto;
		padding: 0 0 60px;
	}
	#product h2{margin: 0 auto 60px;}
	#product p.tit{font-size: 1.8rem;margin: 0 auto 20px;}
	#product p.tx{font-size: 1.4rem;}
	#product p.btn{margin-top: 20px;}
}