@charset "utf-8";




#content {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#content-inner {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}


#mainvisual {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 720px;
	/*background: #48565e;*/
	/*overflow: hidden;*/
}


@media screen and (max-width:440px) {
	
	#mainvisual {
		display: block;
		position: relative;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 670px;
		/*background: #48565e;*/
		overflow: hidden;
	}
		
}

.mv_on01 {
	display: block;
	position: absolute;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	color: #fff;
	top: 245px;
	left: 162px;
	font-size: 6.8em;
	line-height: 0.84em;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	letter-spacing: -1px;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
	z-index: 100;
}

.mv_on02 {
	display: block;
	position: absolute;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	color: #fff;
	top: 445px;
	left: 162px;
	font-size: 1.4em;
	line-height: 1.1em;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
	z-index: 100;
}

.mv_on03 {
	display: block;
	position: absolute;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	color: #fff;
	top: 475px;
	left: 162px;
	font-size: 2.6em;
	line-height: 1.3em;
	font-weight: 500;
	font-family: 'Noto Sans JP', sans-serif;
	text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
	z-index: 100;
}


@media screen and (max-width:1400px) {
	
	.mv_on01 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 255px;
		left: 132px;
		font-size: 6.2em;
		line-height: 0.9em;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		font-style: italic;
		letter-spacing: -1px;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on02 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 435px;
		left: 132px;
		font-size: 1.4em;
		line-height: 1.1em;
		font-weight: 400;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
		z-index: 100;
	}
	
	.mv_on03 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 470px;
		left: 132px;
		font-size: 2.4em;
		line-height: 1.3em;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
		z-index: 100;
	}

}


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

	.mv_on01 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 246px;
		left: 90px;
		font-size: 4.6em;
		line-height: 0.9em;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		font-style: italic;
		letter-spacing: -0.5px;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on02 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 415px;
		left: 90px;
		font-size: 1.1em;
		line-height: 1.1em;
		font-weight: 400;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on03 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 440px;
		left: 90px;
		font-size: 1.8em;
		line-height: 1.3em;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}

}




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

	.mv_on01 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 246px;
		left: 70px;
		font-size: 3.4em;
		line-height: 0.9em;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		font-style: italic;
		letter-spacing: -0.5px;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on02 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 365px;
		left: 70px;
		font-size: 1em;
		line-height: 1.1em;
		font-weight: 400;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on03 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 390px;
		left: 70px;
		font-size: 1.5em;
		line-height: 1.3em;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}

}




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

	.mv_on01 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 160px;
		left: 44px;
		font-size: 3.8em;
		line-height: 0.9em;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		font-style: italic;
		letter-spacing: -0.5px;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on02 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 290px;
		left: 44px;
		font-size: 1.1em;
		line-height: 1.1em;
		font-weight: 400;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on03 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 320px;
		left: 44px;
		font-size: 1.5em;
		line-height: 1.3em;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}

}




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

	.mv_on01 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 160px;
		left: 30px;
		font-size: 2.8em;
		line-height: 1em;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		letter-spacing: -0.5px;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on02 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 250px;
		left: 30px;
		font-size: 0.8em;
		line-height: 1.1em;
		font-weight: 400;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	.mv_on03 {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		color: #fff;
		top: 270px;
		left: 30px;
		font-size: 1.3em;
		line-height: 1.1em;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		z-index: 100;
	}

}








#particles { 
	position:fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	/*background-color:#35004D;*/
}






.index-product {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 60px 0 60px 0;
	width: 100%;
	height: auto;
	overflow: hidden;
	z-index: 2;
	background-color: #e5e5e5;
}

.index-product-inner {
	display: block;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	width: 95%;
	max-width: 1400px;
	height: auto;
}


/* タイトル */
.index-product-subtitle {
	display: block;
	position: relative;
	padding: 0 0 0 16px;
	margin: 0 0 0 0;
	font-size: 1.1em;
	line-height: 1.2em;
	font-weight: 400;
	font-family: "BIZ UDPGothic", sans-serif;
	color: #404040;
	letter-spacing: 2px;
}

.index-product-title {
	display: block;
	position: relative;
	padding: 4px 0 0 16px;
	margin: 0 0 24px 0;
	font-size: 3.4em;
	line-height: 1.1em;
	color: #404040;
	font-weight: 700;
	font-family: "BIZ UDPGothic", sans-serif;
	letter-spacing: -1px;
}


/* ブロック */
.index-product-inner .product {
	display: block;
	position: relative;
	margin: 0 1% 0 1%;
	padding: 0 22px 30px 22px;
	width: 68%;
	height: auto;
	min-height: 440px;
	float: left;
	border: 1px solid #404040;
	border-radius: 10px;
	/*background-color: #e5e5e5;*/
	background: rgba(130,130,180,0.3);
}

.index-product-inner .product2 {
	display: block;
	position: relative;
	margin: 0 1% 0 0;
	padding: 0 22px 30px 22px;
	width: 29%;
	height: auto;
	min-height: 440px;
	float: left;
	border: 1px solid #404040;
	border-radius: 10px;
	/*background-color: #e5e5e5;*/
	background: rgba(130,130,180,0.3);
}

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

	.index-product-inner .product {
		display: block;
		position: relative;
		margin: 0 auto 30px auto;
		padding: 0 22px 30px 22px;
		width: 80%;
		height: auto;
		min-height: 440px;
		float: none;
		border: 1px solid #404040;
		border-radius: 10px;
	}
	
	.index-product-inner .product2 {
		display: block;
		position: relative;
		margin: 0 auto 30px auto;
		padding: 0 22px 30px 22px;
		width: 80%;
		height: auto;
		min-height: 440px;
		float: none;
		border: 1px solid #404040;
		border-radius: 10px;
	}

}

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

	.index-product-inner .product {
		display: block;
		position: relative;
		margin: 0 auto 30px auto;
		padding: 0 18px 30px 18px;
		width: 95%;
		height: auto;
		min-height: 440px;
		float: none;
		border: 1px solid #404040;
		border-radius: 10px;
	}
	
	.index-product-inner .product2 {
		display: block;
		position: relative;
		margin: 0 auto 30px auto;
		padding: 0 18px 30px 18px;
		width: 95%;
		height: auto;
		min-height: 440px;
		float: none;
		border: 1px solid #404040;
		border-radius: 10px;
	}

}



.product-cate {
	display: block;
	position: relative;
	margin: 18px 0 28px 0;
	padding: 0 0 8px 0;
	width: 100%;
	font-size: 1.8em;
	line-height: 1.2em;
	text-align: center;
	letter-spacing: 2px;
	border-bottom: 1px solid #404040;
}

.product ul,
.product2 ul {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.product ul li {
	position: relative;
	margin: 0 0 6px 0;
	padding: 0 0 0 0;
	width: 50%;
	height: 38px;
	line-height: 38px;
	float: left;
}

@media screen and (max-width:980px) {
	
	.product ul li {
		position: relative;
		margin: 0 0 6px 0;
		padding: 0 0 0 0;
		width: 100%;
		height: 38px;
		line-height: 38px;
		float: none;
	}	
	
}

.product2 ul li {
	position: relative;
	margin: 0 0 6px 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 38px;
	line-height: 38px;
}

.product ul li .th,
.product2 ul li .th {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 36px;
	height: 36px;
}

.product ul li a span,
.product2 ul li a span {
	position: absolute;
	top: 0;
	left: 46px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-weight: 400;
	font-family: "BIZ UDPGothic", sans-serif;
	font-size: 1.1em;
	text-decoration: none;
}

.product ul li a:hover span,
.product2 ul li a:hover span {
	text-decoration: underline;
}



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

	.index-product-inner .product {
		display: block;
		position: relative;
		margin: 0 auto 30px auto;
		padding: 0 18px 30px 18px;
		width: 95%;
		height: auto;
		min-height: 300px;
		float: none;
		border: 1px solid #404040;
		border-radius: 10px;
	}
	
	.index-product-inner .product2 {
		display: block;
		position: relative;
		margin: 0 auto 30px auto;
		padding: 0 18px 30px 18px;
		width: 95%;
		height: auto;
		min-height: 300px;
		float: none;
		border: 1px solid #404040;
		border-radius: 10px;
	}
	
	.product ul li,
	.product2 ul li {
		position: relative;
		margin: 12px 8px 12px 8px;
		padding: 0 0 0 0;
		width: 100%;
		height: auto;
		line-height: 1.2em;
		list-style-type: disc;
		list-style-position: outside;
	}
	
	.product ul li .th,
	.product2 ul li .th {
		display: none;
	}
	
	.product ul li a span,
	.product2 ul li a span {
		position: relative;
		top: 0;
		left: 4px;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		font-weight: 400;
		font-family: "BIZ UDPGothic", sans-serif;
		font-size: 1.1em;
		text-decoration: none;
	}

}















#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
}

.index-company {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 60px 0 180px 0;
	width: 100%;
	height: auto;
	overflow: hidden;
	z-index: 2;
}

.index-company-inner {
	display: block;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	width: 90%;
	max-width: 1300px;
	height: auto;
}

.index-company-txt {
	display: block;
	position: relative;
	margin: 0 5% 0 0;
	padding: 0 0 0 0;
	width: 45%;
	height: auto;
	float: right;
}

.index-company-ti {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 40px 0 20px 0;
	font-size: 2.2em;
	line-height: 1.2em;
	font-weight: 700;
	font-family: "BIZ UDPGothic", sans-serif;
}




.index-company-txt p {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 20px 0;
	font-size: 1.18em;
	line-height: 2em;
	font-weight: 400;
	font-family: "BIZ UDPGothic", sans-serif;
	letter-spacing: 0.5px;
}




.index-company-img {
	display: block;
	position: relative;
    width:40%;
    float: left;
}

.company_add {
	display: block;
	position: relative;
	margin: 30px auto 0 auto;
	width: 100%;
	padding: 0 0 20px 0;
}

.company_add p {
	text-align: left;
	font-size: 1em;
}

.company_add p span {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 1.3em;
	line-height: 1.1em;
}











@keyframes fluidrotate {  
	  
	0%, 100% {
	    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
	}
	14% {
	    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
	}
	28% {
	    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
	}
	42% {
	    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
	}
	56% {
	    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
	}
	70% {
	    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
	}
	84% {
	    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
	}
	  
}

.greeting-img {
	position: relative;
    width:100%;
}

.greeting-img img {
    animation: fluidrotate 20s ease 0s infinite;
}


.greeting-img2 {
	position: relative;
    width: 40%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    top: -80px;
    left: 240px;
    z-index: 3;
}

.greeting-img2 img {
    animation: fluidrotate 20s ease 0s infinite;
}







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


	.index-company-img {
		display: block;
	    width: 80%;
	    margin: 0 auto 20px auto;
	    float: none;
	}

	.greeting-img2 {
		position: absolute;
	    width: 40%;
	    padding: 0 0 0 0;
	    margin: 0 0 0 0;
	    top: 240px;
	    left: -40px;
	    z-index: 3;
	}

	.index-company-txt {
		display: block;
		position: relative;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
		width: 85%;
		height: auto;
		float: none;
	}

}


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

	.index-company-img {
		display: block;
	    width: 95%;
	    margin: 0 auto 20px auto;
	    float: none;
	}
	
	.company_add {
		display: block;
		position: relative;
		margin: 30px auto 0 auto;
		width: 100%;
		padding: 0 0 20px 0;
	}
	
	.company_add p {
		text-align: left;
		font-size: 0.9em;
	}
	
	.company_add p span {
		display: block;
		position: relative;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		font-size: 1.3em;
		line-height: 1.1em;
	}

}







/* 2Links */
.index-link {
	clear: both;
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 250px;
	z-index: 2;
}

.index-link ul {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 250px;
}

.index-link ul li {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 50%;
	height: 250px;
	float: left;
}

.index-link_inner {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 250px;
}

.title {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 84px 0 0 0;
	text-align: center;
	color: #fff;
	font-size: 4em;
	line-height: 1em;
	font-weight: 100;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 2px;
	z-index: 3;
}

.subtitle {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 6px 0 0 0;
	text-align: center;
	color: #fff;
	font-size: 1.8em;
	line-height: 1em;
	font-weight: 300;
	font-family: 'Noto Sans JP', sans-serif;
	z-index: 3;
}


@media screen and (max-width:900px) {
	
	.title {
		display: block;
		position: relative;
		margin: 0 0 0 0;
		padding: 84px 0 0 0;
		text-align: center;
		color: #fff;
		font-size: 2.8em;
		line-height: 1em;
		font-weight: 100;
		font-family: 'Roboto', sans-serif;
		letter-spacing: 2px;
		z-index: 3;
	}	
	
}
	
@media screen and (max-width:720px) {

	.index-link {
		display: block;
		position: relative;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		width: 100%;
		height: 500px;
		background: #f0f0f0;
	}
	
	.index-link ul li {
		display: block;
		position: relative;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		width: 100%;
		height: 250px;
		float: none;
	}

	.title {
		display: block;
		position: relative;
		margin: 0 0 0 0;
		padding: 74px 0 0 0;
		text-align: center;
		color: #fff;
		font-size: 2.8em;
		line-height: 1em;
		font-weight: 100;
	  font-family: 'Roboto', sans-serif;
	  letter-spacing: 2px;
	  z-index: 3;
	}	
	
}



.link01 {
	background: url(../images/index_link_001.jpg);
	background-position: center center;
	background-size: cover;
}

.link02 {
	background: url(../images/index_link_002.jpg);
	background-position: center center;
	background-size: cover;
}





/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:rgba(51,51,51,0.8);
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}


/*== 背景が流れる（下から上） */
.bgbottom:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	bottom:0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	/*background:rgba(51,51,51,0.7);*/
 	background: rgba(130,130,180,0.6);
 	width: 100%;
	height: 0;
    /*アニメーション*/
 	transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

/*hoverした際の形状*/
.bgbottom:hover:before{
	height: 100%;	
	background: rgba(130,130,180,0.6);
}










/* index-news */

#index-news {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 100px 0 100px 0;
	width: 100%;
	min-height: 700px;
	background: #f0f0f0;
	overflow: hidden;
	z-index: 2;
}