@charset "UTF-8";
/*
 * top_layout.css
 *
 */


/* !mainvisual
---------------------------------------------------------- */
.main {
	width: 100%;
	position: relative;
	padding-top:90px;
	-webkit-animation: bg 2s 1 ease;
	-moz-animation: bg 2s 1 ease;
	animation: bg 2s 1 ease ;
}
.swiper-container .swiper-slide {
  position: relative;
}
.swiper-container .swiper-slide img {
	display:block;
	width:100%;
}
.swiper-container .swiper-slide .swiper-slide-content-1 {
  position: absolute;
  width:490px;
  height:204px;
  background:url(../../img/main01_copy.png) 0 0 no-repeat;
  top: 30%;
  left: 50%;
  margin-left:-245px;
  opacity: 0;
  transition: all 3s ease 1.8s;
}
.swiper-container .swiper-slide .swiper-slide-content-2 {
  position: absolute;
  width:304px;
  height:182px;
  background:url(../../img/main02_copy.png) 0 0 no-repeat;
  top: 36%;
  left: 70px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-3 {
  position: absolute;
  width:321px;
  height:182px;
  background:url(../../img/main03_copy.png) 0 0 no-repeat;
  top: 36%;
  left: 70px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-4 {
  position: absolute;
  width:387px;
  height:182px;
  background:url(../../img/main04_copy.png) 0 0 no-repeat;
  top: 36%;
  left: 70px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-5 {
  position: absolute;
  width:317px;
  height:182px;
  background:url(../../img/main05_copy.png) 0 0 no-repeat;
  top: 36%;
  left: 70px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}

@keyframes bg {
    0% {
        opacity: 0;
    }
	30% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}

.main div.scroll {
	position:absolute;
	width:60px;
	height:62px;
	bottom:60px;
	left:50%;
	margin-left:-30px;
	z-index:1000;
}
	.main div.scroll p.tit {
		font-family: 'Volkhov', serif;
		font-weight:400;
		font-size:12px;
		letter-spacing:0.08em;
		color:#FFF;
		text-align:center;
		margin-bottom:5px;
	}
#mouse,
#mouse:before {
    position: absolute;
    left: 50%;
}
#mouse {
    bottom: 0%;
    width: 22px;
    height: 36px;
    margin-left: -11px;
    margin-top: -18px;
    box-sizing: border-box;
    border: 1px solid #FFF;
    border-radius: 20px;
}
#mouse:before {
    content: '';
    top: 6px;
    width: 4px;
    height: 4px;
    background: #FFF;
    margin-left: -2px;
    border-radius: 2px;
    -webkit-animation: scroll 1.5s infinite;
    -moz-animation: scroll 1.5s infinite;
	animation: scroll 1.5s infinite;
}
@keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform: translateY(18px);
    }
}
@-webkit-keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform: translateY(18px);
    }
}
@-moz-keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform: translateY(18px);
    }
}

@media screen and (max-width:1039px){
.main {
	padding-top:66px;
}
.swiper-container .swiper-slide .swiper-slide-content-1 {
  position: absolute;
  width:425px;
  height:177px;
  background:url(../../img/main01_copy.png) 0 0 no-repeat;
  background-size:425px 177px;
  top: 26%;
  left: 50%;
  margin-left:-212px;
  opacity: 0;
  transition: all 3s ease 1.8s;
}
.swiper-container .swiper-slide .swiper-slide-content-2 {
  position: absolute;
  width:267px;
  height:160px;
  background:url(../../img/main02_copy.png) 0 0 no-repeat;
  background-size:267px 160px;
  top: 30%;
  left: 40px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-3 {
  position: absolute;
  width:282px;
  height:160px;
  background:url(../../img/main03_copy.png) 0 0 no-repeat;
  background-size:282px 160px;
  top: 30%;
  left: 40px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-4 {
  position: absolute;
  width:340px;
  height:160px;
  background:url(../../img/main04_copy.png) 0 0 no-repeat;
  background-size:340px 160px;
  top: 30%;
  left: 40px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-5 {
  position: absolute;
  width:279px;
  height:160px;
  background:url(../../img/main05_copy.png) 0 0 no-repeat;
  background-size:279px 160px;
  top: 30%;
  left: 40px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}

.main div.scroll {
	display:none;
}
}

@media screen and (max-width:767px){
.main {
	padding-top:66px;
}
.swiper-container .swiper-slide .swiper-slide-content-1 {
  position: absolute;
  width:240px;
  height:100px;
  background:url(../../img/main01_copy.png) 0 0 no-repeat;
  background-size:240px 100px;
  top: 24%;
  left: 50%;
  margin-left:-120px;
  opacity: 0;
  transition: all 3s ease 1.8s;
}
.swiper-container .swiper-slide .swiper-slide-content-2 {
  position: absolute;
  width:167px;
  height:100px;
  background:url(../../img/main02_copy.png) 0 0 no-repeat;
  background-size:167px 100px;
  top: 24%;
  left: 15px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-3 {
  position: absolute;
  width:176px;
  height:100px;
  background:url(../../img/main03_copy.png) 0 0 no-repeat;
  background-size:176px 100px;
  top: 24%;
  left: 15px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-4 {
  position: absolute;
  width:213px;
  height:100px;
  background:url(../../img/main04_copy.png) 0 0 no-repeat;
  background-size:213px 100px;
  top: 24%;
  left: 15px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
.swiper-container .swiper-slide .swiper-slide-content-5 {
  position: absolute;
  width:170px;
  height:100px;
  background:url(../../img/main05_copy.png) 0 0 no-repeat;
  background-size:170px 100px;
  top: 24%;
  left: 15px;
  opacity: 0;
  transition: all 3s ease 1.2s;
}
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
}

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

}

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

}

/* !製品・サービス
---------------------------------------------------------- */
.topService {
	width:auto;
	padding:60px 50px 100px 50px;
	background:#F4F3F5;
}
	.topService h2 {
		font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
		font-weight:bold;
		font-size:32px;
		text-align:center;
		line-height:1.8;
		margin-bottom:50px;
	}
		.topService h2 span {
			display:block;
			font-family: 'Volkhov', serif;
			font-weight:400;
			font-size:15px;
			color:#9E397A;
			letter-spacing:0.04em;
		}
	.topService ul.serviceList {
		width:100%;
		max-width:1100px;
		margin:0 auto;
	}
		.topService ul.serviceList li {
			width:48%;
			float:left;
			margin-right:4%;
			margin-bottom:50px;
		}
		.topService ul.serviceList li:nth-child(even) {
			margin-right:0;
		}
		.topService ul.serviceList li:last-child {
			margin-bottom:0;
		}
		.topService ul.serviceList li:nth-last-child(2) {
			margin-bottom:0;
		}
			.topService ul.serviceList li a {
				display:block;
				width:100%;
				background:#FFF;
				box-shadow:0px 3px 4px rgba(0,0,0,0.12);
				border-radius:6px;
				transition: .3s;
				position:relative;
				top:3px;
			}
				.topService ul.serviceList li a:hover {
					box-shadow:0px 6px 12px rgba(0,0,0,0.3);
					top:0;
				}
				.topService ul.serviceList li a img {
					display:block;
					width:100%;
					border-radius:6px 6px 0 0;
					transition: .5s;
				}
					.topService ul.serviceList li a:hover img {
						opacity:.8;
					}
				.topService ul.serviceList li a div {
					padding:30px 40px 20px 40px;
				}
					.topService ul.serviceList li a div h3 {
						font-weight:bold;
						font-size:20px;
						text-align:center;
						line-height:1.8;
						margin-bottom:25px;
					}
						.topService ul.serviceList li a div h3 span {
							display:block;
							font-family: 'Volkhov', serif;
							font-weight:400;
							font-size:14px;
							color:#9E397A;
							letter-spacing:0.04em;
						}
					.topService ul.serviceList li a div ul.detail {
						width:100%;
					}
						.topService ul.serviceList li a div ul.detail li {
							width:auto;
							float:none;
							margin-right:0;
							line-height:1.6;
							margin-bottom:10px;
							position:relative;
							padding-left:1em;
						}
							.topService ul.serviceList li a div ul.detail li:before {
								display:block;
								position:absolute;
								content:"";
								width:6px;
								height:6px;
								background:#9E3B7C;
								border-radius:50%;
								top:8px;
								left:0;
							}
							.topService ul.serviceList li a div ul.detail li.clm2 {
								width:50%;
								float:left;
							}
							.topService ul.serviceList li a div ul.detail li.clm2B {
								width:50%;
								float:left;
							}
								
@media screen and (max-width:1039px){
.topService {
	padding:60px 30px 80px 30px;
}
	.topService h2 {
		font-size:28px;
		margin-bottom:40px;
	}
		.topService h2 span {
			font-size:14px;
		}
		.topService ul.serviceList li {
			margin-bottom:35px;
		}
		.topService ul.serviceList li:nth-child(even) {
			margin-right:0;
		}
		.topService ul.serviceList li:last-child {
			margin-bottom:0;
		}
		.topService ul.serviceList li:nth-last-child(2) {
			margin-bottom:0;
		}
				.topService ul.serviceList li a {
					top:0;
				}
				.topService ul.serviceList li a:hover {
					box-shadow:0px 3px 4px rgba(0,0,0,0.12);
					top:0;
				}
					.topService ul.serviceList li a:hover img {
						opacity:1;
					}
				.topService ul.serviceList li a div {
					padding:30px 25px 20px 25px;
				}
					.topService ul.serviceList li a div h3 {
						font-size:17px;
						margin-bottom:25px;
					}
						.topService ul.serviceList li a div h3 span {
							font-size:13px;
						}
							.topService ul.serviceList li a div ul.detail li:before {
								top:8px;
							}
							.topService ul.serviceList li a div ul.detail li.clm2 {
								width:50%;
								float:left;
							}
							.topService ul.serviceList li a div ul.detail li.clm2B {
								width:50%;
								float:left;
							}
}

@media screen and (max-width:767px){
.topService {
	padding:50px 20px 70px 20px;
}
	.topService h2 {
		font-size:20px;
		margin-bottom:40px;
	}
		.topService h2 span {
			font-size:12px;
		}
	.topService ul.serviceList {
		width:100%;
		max-width:320px;
		margin:0 auto;
	}
		.topService ul.serviceList li {
			width:100%;
			float:none;
			margin-right:0;
			margin-bottom:30px;
		}
		.topService ul.serviceList li:nth-last-child(2) {
			margin-bottom:30px;
		}
				.topService ul.serviceList li a div {
					padding:30px 25px 20px 25px;
				}
					.topService ul.serviceList li a div h3 {
						font-size:16px;
						margin-bottom:25px;
					}
						.topService ul.serviceList li a div h3 span {
							font-size:12px;
						}
}
		
/* !新着情報
---------------------------------------------------------- */
.topNews {
	width:auto;
	padding:80px 50px 110px 50px;
}
	.topNews div.inner {
		width:100%;
		max-width:900px;
		margin:0 auto;
		position:relative;
	}
		.topNews div.inner h2 {
			font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
			font-weight:bold;
			font-size:28px;
			line-height:1.6;
			border-bottom:1px solid #D6D3D8;
			padding-bottom:.6em;
			margin-bottom:30px;
		}
			.topNews div.inner h2 span {
				display:inline-block;
				font-family: 'Volkhov', serif;
				font-weight:400;
				font-size:15px;
				color:#9E397A;
				letter-spacing:0.04em;
				margin-left:1.4em;
				vertical-align:top;
				line-height:40px;
			}
		.topNews div.inner a.newsBtn {
			display:block;
			position:absolute;
			width:150px;
			height:44px;
			color:#9787AA;
			line-height:44px;
			text-align:center;
			background:#FFF;
			border:1px solid #9788AA;
			top:0;
			right:0;
			transition: .5s;
		}
			.topNews div.inner a.newsBtn:hover {
				background:#9788AA;
				color:#FFF;
			}
			
		.topNews div.inner a dl {
			display:block;
			width:100%;
			padding:1.1em 1.6em;
			line-height:1.8;
			transition: .5s;
		}
			.topNews div.inner a dl dt {
				width:15%;
				color:#666;
				float:left;
			}
			.topNews div.inner a dl dd {
				width:85%;
				color:#111;
				float:left;
			}
			.topNews div.inner a:hover dl {
				background:#F5EBF2;
			}
  
@media screen and (max-width:1039px){
.topNews {
	padding:70px 30px 90px 30px;
}
		.topNews div.inner h2 {
			font-size:24px;
			margin-bottom:25px;
		}
			.topNews div.inner h2 span {
				font-size:14px;
				line-height:36px;
			}
		.topNews div.inner a.newsBtn {
			width:140px;
			height:40px;
			line-height:40px;
		}
			.topNews div.inner a.newsBtn:hover {
				background:#FFF;
				color:#9788AA;
			}
			.topNews div.inner a:hover dl {
				background:#FFF;
			}
}

@media screen and (max-width:767px){
.topNews {
	padding:60px 20px;
}
		.topNews div.inner h2 {
			font-size:18px;
			padding-bottom:.8em;
			margin-bottom:20px;
		}
			.topNews div.inner h2 span {
				font-size:12px;
				line-height:28px;
			}
		.topNews div.inner a.newsBtn {
			width:120px;
			font-size:12px;
			height:34px;
			line-height:34px;
		}
			
		.topNews div.inner a dl {
			padding:1.1em 0;
		}
			.topNews div.inner a dl dt {
				width:100%;
				float:none;
				margin-bottom:5px;
			}
			.topNews div.inner a dl dd {
				width:100%;
				float:none;
			}				
}

/* !バナー
---------------------------------------------------------- */
.topBnr {
	width:auto;
}
	.topBnr ul {
		width:100%;
	}
		.topBnr ul li {
			width:50%;
			float:left;
		}
				.topBnr ul li a.pickup {
					display:block;
					position:relative;
					width:100%;
					height:350px;
					background:url(../img/pickup_bg.jpg) 50% 50% no-repeat;
					background-size:cover;
					padding:10px;
				}
					.topBnr ul li a.pickup div {
						width:100%;
						height:100%;
						border:2px solid #FFF;
					}
					.topBnr ul li a.pickup h2 {
						position:absolute;
						font-family: 'Volkhov', serif;
						font-weight:400;
						font-size:22px;
						color:#FFF;
						line-height:1;
						background:#9E3B7C;
						letter-spacing:0.04em;
						padding:0.7em 1em;
						top:-20px;
						left:30px;
						transition: .5s;
					}
						.topBnr ul li a.pickup h2:before {
							position: absolute;
							content: '';
							top: 100%;
							left: 0;
							border: none;
							border-bottom: solid 15px transparent;
							border-right: solid 20px #504362;
						}
						.topBnr ul li a.pickup:hover h2 {
							background:#C1599D;
							top:-13px;
						}
					.topBnr ul li a.pickup img {
						position:absolute;
						display:block;
						width:446px;
						height:246px;
						top:52px;
						left:50%;
						margin-left:-223px;
						transition: .5s;
					}
						.topBnr ul li a.pickup:hover img {
							transform: scale(1.04);
						}
						
		.topBnr ul li.contact {
			position:relative;
			height:350px;
			background:#504362;
			padding-top:55px;
		}
			.topBnr ul li.contact h2 {
				font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
				font-weight:bold;
				font-size:24px;
				color:#FFF;
				text-align:center;
				line-height:1.8;
				margin-bottom:25px;
			}
				.topBnr ul li.contact h2 span {
					display:block;
					font-family: 'Volkhov', serif;
					font-weight:400;
					font-size:15px;
					color:#FFF;
					letter-spacing:0.06em;
				}
			.topBnr ul li.contact p.read {
				text-align:center;
				color:#FFF;
				margin-bottom:45px;
			}
			.topBnr ul li.contact div.tel {
				width:50%;
				float:left;
			}
				.topBnr ul li.contact div.tel p.number {
					font-family: 'Volkhov', serif;
					font-weight:400;
					font-size:22px;
					color:#FFF;
					text-align:center;
					line-height:1.8;
					letter-spacing:0.08em;
				}
					.topBnr ul li.contact div.tel p.number i.fa {
						display:inline-block;
						margin-right:.4em;
					}
					.topBnr ul li.contact div.tel p.number a {
						color:#FFF;
					}
				.topBnr ul li.contact div.tel p.time {
					text-align:center;
					font-size:13px;
					color:#FFF;
				}
			.topBnr ul li.contact div.contactBtn {
				width:50%;
				float:left;
			}
				.topBnr ul li.contact div.contactBtn a {
					display:block;
					width:80%;
					text-align:center;
					font-size:16px;
					font-weight:bold;
					color:#504360;
					background:#FFF;
					padding:1em 0;
					border-radius:4px;
					transition: .3s;
					top:3px;
					position:relative;
				}
					.topBnr ul li.contact div.contactBtn a:hover {
						background:#9E3B7C;
						color:#FFF;
						box-shadow:0px 6px 12px rgba(0,0,0,0.3);
						top:0;
					}
					

@media screen and (max-width:1039px){
			.topBnr ul li a.pickup {
				height:280px;
			}
					.topBnr ul li a.pickup h2 {
						font-size:18px;
					}
						.topBnr ul li a.pickup:hover h2 {
							background:#9E3B7C;
							top:-20px;
						}
					.topBnr ul li a.pickup img {
						width:341px;
						height:188px;
						top:46px;
						left:50%;
						margin-left:-170px;
					}
						.topBnr ul li a.pickup:hover img {
							transform: none;
						}
		.topBnr ul li.contact {
			height:280px;
			padding-top:40px;
		}
			.topBnr ul li.contact h2 {
				font-size:20px;
				margin-bottom:20px;
			}
				.topBnr ul li.contact h2 span {
					font-size:14px;
				}
			.topBnr ul li.contact p.read {
				margin-bottom:30px;
			}
			.topBnr ul li.contact div.tel {
				width:50%;
				float:left;
			}
				.topBnr ul li.contact div.tel p.number {
					font-size:18px;
					line-height:1.6;
				}
				.topBnr ul li.contact div.tel p.time {
					font-size:12px;
				}
			.topBnr ul li.contact div.contactBtn {
				width:50%;
				float:left;
			}
				.topBnr ul li.contact div.contactBtn a {
					width:90%;
					font-size:14px;
					padding:0.8em 0;
					top:0;
				}
					.topBnr ul li.contact div.contactBtn a:hover {
						background:#FFF;
						color:#504360;
						box-shadow:none;
						top:0;
					}
}

@media screen and (max-width:767px){
		.topBnr ul li {
			width:100%;
			float:none;
		}
				.topBnr ul li a.pickup {
					height:220px;
					background:url(../img/pickup_bg.jpg) 50% 50% no-repeat;
					background-size:cover;
					padding:8px;
				}
					.topBnr ul li a.pickup h2 {
						font-size:16px;
						color:#FFF;
						padding:0.7em 0.9em;
						top:-16px;
						left:25px;
					}
						.topBnr ul li a.pickup:hover h2 {
							top:-16px;
						}
					.topBnr ul li a.pickup img {
						width:290px;
						height:160px;
						top:30px;
						left:50%;
						margin-left:-145px;
					}
		.topBnr ul li.contact {
			height:auto;
			padding:50px 0 60px 0;
		}
			.topBnr ul li.contact h2 {
				font-size:18px;
				margin-bottom:20px;
			}
				.topBnr ul li.contact h2 span {
					font-size:13px;
				}
			.topBnr ul li.contact p.read {
				margin-bottom:30px;
			}
			.topBnr ul li.contact div.tel {
				width:100%;
				float:none;
				margin-bottom:20px;
			}
				.topBnr ul li.contact div.tel p.number {
					font-size:18px;
					line-height:1.6;
				}
				.topBnr ul li.contact div.tel p.time {
					font-size:12px;
				}
			.topBnr ul li.contact div.contactBtn {
				width:100%;
				float:none;
			}
				.topBnr ul li.contact div.contactBtn a {
					width:100%;
					max-width:240px;
					font-size:15px;
					padding:0.8em 0;
					margin:0 auto;
				}
}