/*==================================================
common(トップでも使用)
==================================================*/
/*top-bgcolor
---------------------------------------------------------*/
#top-bgcolor {
	position: relative;
	background: #f5f5f5;
}
#top-bgcolor .btn-scroll {
	position: fixed;
	bottom: 30px;
	right: 30px;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.1em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-decoration: none;
}
#top-bgcolor .btn-scroll span {
	position: relative;
	padding: 0 0 114px;
}
#top-bgcolor .btn-scroll span:after {
	position: absolute;
	bottom: 0;
	left: 5px;
	width: 14px;
	height: 104px;
	content: "";
	background: url(../img/icn_scroll.png) no-repeat 0 0;
	background-size: contain;
}
#top-bgcolor .btn-scroll._black {
	color: #000;
}
#top-bgcolor .btn-scroll._black span:after {
	background: url(../img/icn_scroll_blk.png) no-repeat 0 0;
}
/* pink */
#top-bgcolor._pink {
	background: #e4007f;
}
#top-bgcolor._pink .kv .tmb li span:nth-child(2),
#top-bgcolor._pink .kv .tmb li span:nth-child(3) {
	color: #e4007f;
}
#top-bgcolor._pink .kv-txtwrap p {
	color: #fff;
}
/* brown */
#top-bgcolor._brown {
	background: #59493f;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#top-bgcolor._brown .kv .tmb li span:nth-child(2),
#top-bgcolor._brown .kv .tmb li span:nth-child(3) {
	color: #59493f;
}
#top-bgcolor._brown .kv-txtwrap p {
	color: #fff;
}
	@media screen and (max-width: 768px) {
		#top-bgcolor .btn-scroll {
			display: block !important;
			position: absolute;
			right: 4.6875%;
			bottom: 30%;
		}
		#top-bgcolor .btn-scroll._black {
			color: #fff;
		}
		#top-bgcolor .btn-scroll._black span:after {
			background: url(../img/icn_scroll.png) no-repeat 0 0;
		}
	}

/*kv
---------------------------------------------------------*/
.kv {
	position: relative;
	width : 100%;
	opacity:0;
}
.kv h2 {
	position: absolute;
	top: 55%;
	right: 12%;
	color: #fff;
	z-index: 99;
	font-size: 18px;
	text-align: right;
	line-height: 140%;
	opacity:0;
}
.kv h2 .ttl {
	font-size: 60px;
	font-weight: 700;
	display: block;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.1em;
	line-height: 140%;
}
/* slider */
.kv .slider .zslide-item .inner {
	position: relative;
	width : calc(100% - 95px);

	padding: 54.84% 0 0;
}
.kv .bg-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover !important;
	opacity:0;
}

.kv #heroslide.loaded .bg-img {
	opacity:1;
}

.kv .txt {
	position: absolute;
	top: 50%;
	left: 7.4%;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 94px;
	letter-spacing: 0.1em;
	 -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
		opacity:0;
}

/* tmb */
.kv .tmb {
	position: absolute;
	bottom: 5.9%;
	left: 7.4%;
	opacity:0;
}
.kv .tmb li,
.home .tmb li {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 32px;
}
.kv .tmb li:nth-child(n+2) {
	display: none;
}
.kv .tmb li span:nth-child(2),
.home .tmb li span:nth-child(2) {
	font-weight: 300;
	font-size: 60px;
}
.kv .tmb li span:nth-child(1),
.home .tmb li span:nth-child(1) {
	font-size: 97px;
}
	@media screen and (max-width: 1500px) {
		.kv-cosplayers .tmb {
			bottom: 4%;
		}
	}
	@media screen and (max-width: 1350px) {
		.kv .tmb li span:nth-child(1),
		.home .tmb li span:nth-child(1) {
			font-size: 7.5vw;
		}
		.kv .tmb li span:nth-child(2),
		.home .tmb li span:nth-child(2) {
			font-size: 4.6vw;
		}
		.kv .tmb li, .home .tmb li {
			font-size: 2.3vw;
		}
	}
	@media screen and (max-width: 768px) {
		.kv .tmb li span:nth-child(1),
		.home .tmb li span:nth-child(1) {
			font-size: 12vw;
		}
		.kv .tmb li, .section-servise .tmb li {
			font-size: 4vw;
		}
		.kv .txt, .kv .tmb {
			left: 4.6875%;
		}
	}

/*common
---------------------------------------------------------*/
/*hover-zoom*/
.hover-zoom {
	position: relative;
}
.hover-zoom a {
	display: block;
}
.hover-zoom .img {
	box-shadow: 10px 10px 80px #aaa;
}
.hover-zoom .img {
    overflow: hidden;
}
.hover-zoom .img img {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 1s;
	width: 100%;
}
.hover-zoom .img img:hover {
	-moz-transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
}
.hover-zoom .btn-more {
	position: absolute;
	top: 50%;
	right: 35px;
	-webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
   color: #fff;
  	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.2em;
	line-height: 100%;
}
.hover-zoom .btn-more span {
	position: relative;
	padding: 0 115px 0 0;
}
.hover-zoom .btn-more span:after {
	display:block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 104px;
	height: 14px;
	content: "";
	background: url(../img/icn_viewmore.png) no-repeat 0 0;
	background-size: contain;
	 -webkit-transform: translate(0, -80%);
   	transform: translate(0, -80%);
}

	@media screen and (max-width: 768px) {
		.hover-zoom .btn-more {
			right: 10px;
		}
		.hover-zoom .btn-more span {
			padding: 0 68px 0 0;
		}
		.hover-zoom .btn-more span:after {
			width: 53px;
			height: auto;
			padding: 13.2% 0 0;
			background: url(../img/icn_viewmore_sp.png) no-repeat 0 0;
			background-size: contain;
	 		-webkit-transform: translate(0, -30%);
   			transform: translate(0, -30%);
		}
	}

/*==================================================
page --- common
==================================================*/
/*kv
---------------------------------------------------------*/
.kv-page h2 .ttl span {
	font-size: 32px;
}
	@media screen and (max-width: 1500px) {
		.kv-page h2 {
			font-size: 1.2vw;
		}
		.kv-page h2 .ttl,
		.kv-page h2 .ttl span {
			font-size: 4vw;
		}
	}
	@media screen and (max-width: 768px) {
		.kv-page {
			width: 100%;
		}
		.kv .slider .zslide-item .inner{
			padding: 117% 0 0;
			width:100%;
		}
		.kv-page h2 {
			top: 72%;
			right: auto;
			left: 4%;
			text-align: left;
			font-size: 3.3vw;
		}
		.kv-page h2 .ttl,
		.kv-page h2 .ttl span {
			font-size: 7.5vw;
		}
	}
/* kv-txtwrap */
.kv-txtwrap {
	padding: 65px 7% 45px 12.5%;
}
.kv-txtwrap p {
	font-size: 18px;
	line-height: 200%;
	font-weight: 700;
	letter-spacing: 0.2em;
		opacity:0;
}
	@media screen and (max-width: 1350px) {
		.kv-txtwrap p {
			font-size: 16px;
		}
	}
	@media screen and (max-width: 1200px) {
		.kv-txtwrap {
			padding: 55px 7% 35px 10%;
		}
	}
	@media screen and (max-width: 940px) {
		.kv-txtwrap {
			padding: 45px 7% 35px 8%;
		}
		.kv-txtwrap p {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 840px) {
		.kv-txtwrap {
			padding: 35px 7% 30px 6%;
		}
	}

	@media screen and (max-width: 768px) {
		.kv-txtwrap {
			padding: 8.5% 3.9% 19.3%;
			margin: 0 0 10%;
		}
		.kv-txtwrap p br {
			display: none;
		}
	}
	@media screen and (max-width: 640px) {
		.kv-txtwrap p {
			font-size: 16px;
		}
	}
	@media screen and (max-width: 480px) {
		.kv-txtwrap p {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 375px) {
		.kv-txtwrap p {
			font-size: 12px;
		}
	}
/* btn-moreinfo */
.btn-moreinfo {
	position: absolute;
	color: #fff;
	bottom: 182px;
	margin-bottom: -65px;
	right: 0;
	margin-right: 208px;
	width: 364px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: 0.2em;
	background: #000 url(../img/icn_scroll02.png) no-repeat 87.62% 50%;
	background-size: 2.74% auto;
	border: 1px solid #000;
	box-shadow: 10px 10px 80px rgba(0,0,0,0.5);
	opacity:0;
	z-index: 99;
	transition: all 1s;
}
.btn-moreinfo:hover {
	border: 1px solid #000;
	color: #000;
	background: #fff url(../img/icn_scroll02_hover.png) no-repeat 87.62% 50%;
	background-size: 2.74% auto;
	transition: all 1s;
}
.btn-moreinfo02 {
	bottom: 218px;
}
	@media screen and (max-width: 1200px) {
		.btn-moreinfo {
			height: 90px;
			line-height: 90px;
			width: 30%;
			margin-right: 10%;
			margin-bottom: -75px;
		}
	}
	@media screen and (max-width: 940px) {
		.btn-moreinfo {
			height: 80px;
			line-height: 80px;
			font-size: 15px;
		}
	}
	@media screen and (max-width: 840px) {
		.btn-moreinfo {
			height: 70px;
			line-height: 70px;
			font-size: 14px;
		}
	}
	@media screen and (max-width: 768px) {
		.btn-moreinfo {
			top: auto;
			bottom: 0;
			right: auto;
			left: 5%;
			margin: 0 0 -10% 0;
			width: 65.6%;
			padding: 9.2% 0;
			font-size: 18px;
			line-height: 100%;
			height: auto;
		}
	}
	@media screen and (max-width: 480px) {
		.btn-moreinfo {
			font-size: 15px;
		}
	}
	@media screen and (max-width: 375px) {
		.btn-moreinfo {
			font-size: 13px;
		}
	}


/*common
---------------------------------------------------------*/
/* main */
	@media screen and (max-width: 768px) {
		#main.page {
			padding-top: 22.6%;
		}
	}

/* h1-h6 */
.page .ttl-wrap01 {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	padding: 0 0 0 97px;
	margin: 0 0 64px;
}
.page .ttl-wrap01::before {
	position: absolute;
	content: "";
	width: 100px;
	height: 1px;
	background: #000;
	top: 50%;
	margin-top: -0.5px;
	left: -20px;
}
.page .ttl-wrap02 {
	font-size: 20px;
	font-weight: 700;
	padding: 0 0 60px 50px;
	letter-spacing: 0.1em;
}
.page .ttl-wrap02 .ttl {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
	letter-spacing: 0.1em;
}
	@media screen and (max-width: 768px) {
		.page .ttl-wrap01 {
			font-size: 22px;
			padding: 0 0 0 27%;
			margin: 0 0 7%;
		}
		.page .ttl-wrap01::before {
			left: 0;
			width: 23.57%;
		}
		.page .ttl-wrap02 {
			font-size: 22px;
			padding: 0 0 8.57%;
		}
		.page .ttl-wrap02 .ttl {
			font-size: 44px;
		}
	}
	@media screen and (max-width: 580px) {
		.page .ttl-wrap02 {
			font-size: 20px;
			padding: 0 0 8.57%;
		}
		.page .ttl-wrap02 .ttl {
			font-size: 40px;
		}
	}
	@media screen and (max-width: 540px) {
		.page .ttl-wrap02 {
			font-size: 18px;
		}
		.page .ttl-wrap02 .ttl {
			font-size: 35px;
		}
	}
	@media screen and (max-width: 480px) {
		.page .ttl-wrap01 {
			font-size: 18px;
		}
		.page .ttl-wrap02 {
			font-size: 16px;
		}
		.page .ttl-wrap02 .ttl {
			font-size: 31.5px;
		}
	}
	@media screen and (max-width: 420px) {
		.page .ttl-wrap02 {
			font-size: 15px;
		}
		.page .ttl-wrap02 .ttl {
			font-size: 28px;
		}
	}
	@media screen and (max-width: 375px) {
		.page .ttl-wrap01 {
			font-size: 16px;
		}
		.page .ttl-wrap02 {
			font-size: 13px;
		}
		.page .ttl-wrap02 .ttl {
			font-size: 23px;
		}
	}


/* layersList */
.page .layersList-wrap {
	position: relative;
}
.page .layersList:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.page .layersList li {
	float: left;
	margin-right: 54px;
	position:relative;
	width: 342px;
}

.page .layersList li:nth-child(3n) {
	margin-right: 0;
}
.page .layersList li:nth-child(3n+1) {
	clear: both;
	margin-top: 42px;
}
.page .layersList li:nth-child(3n+2) {
	margin-top: 105px;
}
.page .layersList li .hover-zoom{
	position:relative;
}
.page .layersList li .img {
	position: relative;
	overflow: hidden;
	box-shadow: 20px 30px 80px #bdbdbd;
	opacity:0;
}
.page .layersList li .img img{
	opacity:1;
}

.page .layersList li .loaded .img img {
	opacity:1;
}
.page .layersList li .loaded .img {
	opacity:1;
}

.page .layersList li .img img {
	width: 100%;
}
.page .layersList li .img:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	-webkit-transition:all 0.7s ease-in-out;
	transition:all 0.7s ease-in-out;
	will-change: transform;
	transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1.02, 1.02, 1.02);
	 transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
}
.page .layersList li .img:hover:after {
	transform: scale(1.10,1.10);
	-webkit-transform:scale(1.10,1.10);
	-moz-transform:scale(1.10,1.10);
	-ms-transform:scale(1.10,1.10);
	-o-transform:scale(1.10,1.10);
	will-change: transform;
	transform: perspective(1200px) rotateX(-5.46deg) rotateY(0.43deg) scale3d(1.08, 1.08, 1.08);
	transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
}
.page .layersList li .txt {
	position: absolute;
	bottom: 45px;
	left: 50px;
	opacity:0;
	width: 270px;
}
.page .layersList li .name {
	position: relative;
	padding: 0 0 10px;
	margin: 0 0 35px;
	font-size: 20px;
	letter-spacing: 0.2em;
	color: #fff;
	line-height: 120%;
}
.page .layersList li .name:before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 45px;
	height: 1px;
	content: "";
	background: #fff;
}
.page .layersList li .hover-zoom .btn-more {
	position: relative;
	top: 0;
	left: 0;
}
#main.page .layersList li .name {
	font-weight: 700;
	letter-spacing: 0.04em;
}

@media screen and (max-width: 1350px) {
		.page .btn-list a {
			max-width: 770px;
			width: 95.3125%;
		}
	}
	@media screen and (max-width: 1200px) {
		.page .layersList li {
			width: 30%;
			margin-right: 5%;
		}
		.page .layersList li .txt {
			width: 75%;
			bottom: 8%;
			left: 15%;
		}
	}
	@media screen and (max-width: 1100px)  {
		.page .layersList li .name {
			font-size: 18px;
		}
		.page .hover-zoom .btn-more span {
			padding: 0 90px 0 0;
		}
		.page .hover-zoom .btn-more span:after {
			padding: 6.2% 0 0;
			height: auto;
			background-position: right 0;
		}
	}
	@media screen and (max-width: 900px)  {
		.page .hover-zoom .btn-more span {
			padding: 0 70px 0 0;
		}
		.page .hover-zoom .btn-more span:after {
			padding: 5.5% 0 0;
		}
	}
	@media screen and (max-width: 768px) {
		.page .layersList li,
		.page .layersList li:nth-child(3n),
		.page .layersList li:nth-child(3n+1),
		.page .layersList li:nth-child(3n+2) {
			clear: none;
			width: 48.2%;
			margin: 0 3.6% 3.6% 0;
		}
		.page .layersList li:nth-child(2n) {
			margin-right: 0;
		}
		.page .layersList li .txt {
			width: 85%;
			bottom: 7.14%;
			left: 8.5%;
		}
		.page .hover-zoom .btn-more span {
			padding: 0 68px 0 0;
		}
		.page .hover-zoom .btn-more span:after {
			width: 53px;
			height: auto;
			padding: 13.2% 0 0;
			background: url(../img/icn_viewmore_sp.png) no-repeat 0 0;
			background-size: contain;
	 		-webkit-transform: translate(0, -30%);
   			transform: translate(0, -30%);
		}
	}
	@media screen and (max-width: 480px) {
		.page .layersList li .name {
			font-size: 16px;
			margin: 0 0 25%;
		}
		.page .hover-zoom .btn-more span {
			padding: 0 40px 0 0;
			letter-spacing: .1em;
		}
		.page .hover-zoom .btn-more span:after {
			padding: 3% 0 0;
			margin-top: -2%;
			background-position: right 0;
		}
	}
	@media screen and (max-width: 375px) {
		.page .layersList li .name {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 340px) {
		.page .btn-more span {
			padding: 0 30px 0 0;
		}
	}


/* .side-breadcrumb */
.side-breadcrumb {
	position: absolute;
	top: 136px;
	right: 25px;
	-moz-transform: rotate( 90deg ) translate(100%, 0%) ; 
	-webkit-transform: rotate( 90deg ) translate(100%, 0%) ; 
	-o-transform: rotate( 90deg ) translate(100%, 0%) ; 
	-ms-transform: rotate( 90deg ) translate(100%, 0%) ; 
	transform:rotate( 90deg ) translate(100%, 0%) ; 
	-moz-transform-origin:    top right;
	-webkit-transform-origin: top right; 
	-o-transform-origin:      top right; 
	-ms-transform-origin:     top right; 
	transform-origin:         top right; 


}
.side-breadcrumb ul {
	
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
.side-breadcrumb li {
	float: left;
}
.side-breadcrumb li a {
	text-decoration: none;
	color: #000;
}
.side-breadcrumb li .txt {
	position: relative;
	top: 0;
	left: 0;
	text-align: right;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-decoration: none;
	padding: 0 55px 0 15px;
}
.side-breadcrumb li .txt:after {
	position: absolute;
	content: "";
	top: 50%;
	margin-top: -0.5px;
	right: 0;
	margin-left: 1px;
	width: 40px;
	height: 1px;
	background: #000;
	transition: all .3s;
}
.side-breadcrumb li.white .txt:after {
	background: #ffffff;
}
.side-breadcrumb li:last-child .txt:after {
	content: none;
}
.side-breadcrumb li:last-child .txt {
	color: #b5b5b5;
}

.side-breadcrumb li.white{
	color:#ffffff;
}

	@media screen and (max-width: 768px) {
		.side-breadcrumb {
			position: static;
			-moz-transform:    rotate( 0 ); 
			-webkit-transform: rotate( 0 ); 
			-o-transform:      rotate( 0 ); 
			-ms-transform:     rotate( 0 ); 
			transform:         rotate( 0 ); 
			width: 90.64%;
			margin: 0 4.68% 9.3%;
		}
		.side-breadcrumb li .txt {
			font-size: 16px;
		}
	}
	@media screen and (max-width: 640px) {
		.side-breadcrumb li .txt {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 480px) {
		.side-breadcrumb li .txt {
			font-size: 12px;
			padding: 0 35px 0 10px;
		}
		.side-breadcrumb li .txt:after {
			width: 30px;
		}
	}
	@media screen and (max-width: 375px) {
		.side-breadcrumb li .txt {
			font-size: 10px;
			padding: 0 30px 0 8px;
		}
		.side-breadcrumb li .txt:after {
			width: 20px;
		}
	}
/* btn-link */
.btn-link {
	padding: 130px 0 90px;
}
.btn-link a {
	position: relative;
	display: block;
	width: 770px;
	height: 140px;
	line-height: 140px;
	margin: 0 auto 40px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	border: 1px solid #000;
	background: #000;
	box-shadow: 10px 10px 80px #aaa;
	transition: all 1s;
}
.btn-link a:last-of-type {
	margin-bottom: 0;
}
.btn-link a::after {
	display:block;
	position: absolute;
	top: 50%;
	right: 40px;
	width: 104px;
	height: 14px;
	content: "";
	background: url(../img/icn_viewmore.png) no-repeat 0 0;
	background-size: contain;
	 -webkit-transform: translate(0, -50%);
   	transform: translate(0, -50%);
   	transition: all 1s;
}
.btn-link a:hover {
	color: #000;
	background: #fff;
}
.btn-link a:hover:after {
	background: url(../img/icn_viewmore_hover.png) no-repeat 0 0;
	background-size: contain;
}
.btn-link a:hover span:before {
	background: url(../img/icn_layerlist_hover.png) no-repeat 0 0;
	background-size: contain;
}
.btn-link a span {
	position: relative;
	padding: 0 0 0 33px;
	margin-left: -10px;
}
.btn-link a span::before {
	position: absolute;
	content:"";
	top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
  	transition: all 1s;
}
.btn-link .btn-cosplayers span::before {
	width: 23px;
	height: 18px;
	background: url(../img/icn_layerlist.png) no-repeat left center;
	background-size: contain;
}
.btn-link .btn-contact span {
	padding: 0 0 0 40px;
}
.btn-link .btn-contact span::before {
	width: 26px;
	height: 20px;
	background: url(../img/icn_mail.png) no-repeat left center;
	background-size: contain;
}
.btn-link .btn-contact:hover span::before {
	background: url(../img/icn_mail_bk.png) no-repeat left center;
    background-size: contain;
}
.btn-link .btn-contact span br {
	display: none;
}
	@media screen and (max-width: 1350px) {
		.btn-link a {
			max-width: 770px;
			width: 87.5%;
		}
	}
	@media screen and (max-width: 768px) {
		.btn-link {
			padding: 18% 0 2.5%;
		}
		.btn-link a:after {
			right: 4.8%;
			width: 48px;
			height: auto;
			padding: 2.5% 0 0;
			margin-top: -1.25%;
			background: url(../img/icn_btnlink_sp.png) no-repeat 0 0;
			background-size: contain;
			-webkit-transform: translate(0, -30%);
			transform: translate(0, -30%);
		}
		.btn-link a {
			height: 100px;
			line-height: 100px;
			font-size: 16px;
		}
		.btn-link a:hover:after {
			background: url(../img/icn_btnlink_bk_sp.png) no-repeat 0 0;
			background-size: contain; 
		}
	}
	@media screen and (max-width: 480px) {
		.btn-link a {
			font-size: 14px;
			height: 120px;
			line-height: 120px;
		}
		.btn-link a:after {
			right: 2.2%;
		}
		.btn-link .btn-contact span {
			padding: 0 5px 0 35px;
		}
		.btn-link .btn-cosplayers span::before {
			height: auto;
			padding: 16px 0 0;
		}
		.btn-link .btn-contact span::before {
			height: auto;
			padding: 18px 0 0;
		}
	}
	@media screen and (max-width: 415px) {
		.btn-link a {
			height: 80px;
			line-height: 80px;
			font-size: 13px;
		}
		.btn-link a span {
			font-size: 12px;
		}
	}
	@media screen and (max-width: 375px) {
		.btn-link a {
			height: 90px;
			line-height: 90px;
		}
		.btn-link a:after {
			right: 0;
		}
		.btn-link a span {
			padding: 0 0 0 26px;
		}
		.btn-link .btn-cosplayers span::before {
			padding: 13px 0 0;
		}
		.btn-link .btn-contact span {
			padding: 0 12px 0 28px;
		}
		.btn-link .btn-contact span::before {
			padding: 16px 0 0;
		}
	}
	@media screen and (max-width: 340px) {
		.btn-link a:after {
			right: -4%;
		}
	}

/*==================================================
page --- about
==================================================*/
/*kv
---------------------------------------------------------*/



/*main
---------------------------------------------------------*/
.about {
	padding: 170px 0 0;
}
.about > section {
	position: relative;
}
.about .inner {
	position: relative;
	width: 1100px;
	margin: 0 auto;
	z-index: 99;
}
.about .section-business:before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2000px;
	height: 1156px;
	content: "";
	margin-left: -1505px;
	background: #f5f5f5;
}
.about .section-business .inner {
	padding: 150px 0 0;
}
.about .list {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0 0 55px 50px;
}
.about .list li + li {
	padding: 30px 0 0;
}
.about p {
	line-height: 170%;
	font-size: 16px;
	padding: 0 0 93px 50px;
}
.about .section-corporate {
	padding: 385px 0 214px;
}
.about .section-corporate::before {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 2000px;
	height: 769px;
	margin-left: -400px;
	content: "";
	background: #f5f5f5;
}
.about .section-corporate h3 {
	padding: 0 0 115px 50px;
}
.about .btn-list a {
	position: relative;
	display: block;
	width: 770px;
	height: 140px;
	line-height: 140px;
	margin: 0 0 0 55px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	border: 1px solid #000;
	background: #000;
	box-shadow: 10px 10px 80px #aaa;
	transition: all 1s;
}
.about .btn-list a:after {
	display:block;
	position: absolute;
	top: 50%;
	right: 40px;
	width: 30px;
	height: 20px;
	content: "";
	background: url(../img/icn_blank.png) no-repeat 0 0;
	background-size: contain;
	 -webkit-transform: translate(0, -50%);
   	transform: translate(0, -50%);
   	transition: all 1s;
}
.about .btn-list a span {
	position: relative;
	padding: 0 20px 0 53px;
}
.about .btn-list a span:before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 35px;
	height: 43px;
	content:"";
	background: url(../img/icn_corporate.png) no-repeat 0 0;
	background-size: contain;
	 -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
  	transition: all 1s;
} 
.about .btn-list a:hover {
	color: #000;
	background: #fff;
}
.about .btn-list a:hover:after {
	background: url(../img/icn_viewmore_hover.png) no-repeat 0 0;
	background-size: contain;
}
.about .btn-list a:hover span:before {
	background: url(../img/icn_layerlist_hover.png) no-repeat 0 0;
	background-size: contain;
}
.about .btn-list a:hover span:before {
	background: url(../img/icn_corporate_bk.png) no-repeat 0 0;
	 background-size: contain;
}
.about .btn-list a:hover:after {
	background: url(../img/icn_blank_bk.png) no-repeat 0 0;
	background-size: contain;
}
.about .section-business:after {
	display: block;
	position: absolute;
	top: 47.5%;
	left: 50%;
	width: 2205px;
	height: 142px;
	content: "";
	margin-left: -360px;
	background: url(../img/bg_about_txt.png) no-repeat 0 0;
	background-size: contain;
}

	@media screen and (max-width: 1200px) {
		.about .section-business:before {
			width: 78%;
			left: 0;
			margin-left: 0;	
		}
		.about .section-corporate::before {
			width: 78%;
			right: 0;
			left: auto;
			margin-left: 0;
		}
		.about .inner {
			width: 87.5%;
		}
		.about .btn-list a {
			width: 70%;
		}
		.about .section-business p {
			padding-right: 0;
			}
	}
	@media screen and (max-width: 768px) {
		.about {
			padding: 23.4% 0 0;
		}
		.about .section-business {
			margin: 0 auto 19.84%;
		}
		.about .section-business .inner {
			padding: 13% 0 20.5%;
		}
		.about .section-business::before,
		.about .section-corporate::before {
			height: 100%;
		}
		.about .list {
			padding: 0 0 7.5% 0;
		}
		.about .list li + li {
			padding: 4.6% 0 0;
		}
		.about p {
			padding: 0 0 7.5% 0;
		}
		.about .section-corporate {
			padding: 14% 0 0;
		}
		.about .section-corporate .inner {
			padding: 0 0 20.5%;
		}
		.about .section-corporate h3 {
			padding: 0 0 12.5% 0;
		}
		.about .btn-list a {
			margin: 0;
			width: 78.57%;
			height: 100px;
			line-height: 100px;
		}
		.about .btn-list a:after {
			right: 6.8%;
			height: auto;
			padding: 4.6% 0 0;
		}
		.about .btn-list a span {
			padding: 0 20px 0 40px;
		}
		.about .btn-list a span:before {
			height: auto;
			padding: 28px 0 0;
		}
		.about .section-business:after {
			display: none;
		}
		.about .ttl-wrap01::before {
			width: 19%;
		}
	}
	@media screen and (max-width: 640px) {
		.about .list {
			font-size: 18px;
			letter-spacing: .05em;
		}
		.about p {
			font-size: 15px;
		}
	}
	@media screen and (max-width: 580px) {
		.about .list {
			font-size: 16px;
		}
	}
	@media screen and (max-width: 480px) {
		.about .list {
			font-size: 14px;
		}
		.about p {
			font-size: 14px;
		}
		.about .btn-list a {
			font-size: 16px;
		}
		.about .btn-list a span {
			padding: 0 20px 0 35px;
		}
		.about .btn-list a span:before {
			height: auto;
			padding: 25px 0 0;
		}
	}
	@media screen and (max-width: 420px) {
		.about .list {
			font-size: 13px;
		}
	}
	@media screen and (max-width: 375px) {
		.about .list {
			font-size: 11.5px;
		}
		.about p {
			font-size: 12px;
		}
		.about .btn-list a {
			font-size: 14px;
			height: 80px;
			line-height: 80px;
		}
		.about .btn-list a:after {
			right: 3%;
		}
		.about .btn-list a span {
			padding: 0 20px 0 28px;
		}
		.about .btn-list a span:before {
			height: auto;
			padding: 22px 0 0;
		}
	}
	@media screen and (max-width: 340px) {
		.about .list {
			font-size: 10.5px;
		}
	}


/*==================================================
page --- cosplayers
==================================================*/
/*kv
---------------------------------------------------------*/

.kv-cosplayers .tmb {
	bottom: 4.2%;
}
#top-bgcolor .kv-cosplayers .tmb li span:nth-child(2),
#top-bgcolor .kv-cosplayers .tmb li span:nth-child(3) {
	color: #fff!important;
}


/*main
---------------------------------------------------------*/
.cosplayers .inner {
	position: relative;
	width: 1134px;
	margin: 0 auto;
	z-index: 100;
}

/* pulldow */
.cosplayers .pulldown-wrap.sp {
	display: none;
}
.cosplayers .pulldown-wrap .pulldown {
	display: table;
	width: 100%;
	margin: 0 auto 126px;
	box-shadow: 20px 30px 80px #dbdbdb;
}
.cosplayers .pulldown li {
	display: table-cell;
	text-align: center;
	width: 20%;
	background: #fff;
	transition: all 1s;
}
.cosplayers .pulldown li:hover,
.cosplayers .pulldown li.current {
	background: #000;
}
.cosplayers .pulldown li + li {
	border-left: 1px solid #d5d5d5;
}
.cosplayers .pulldown li span {
	display: block;
	height: 110px;
	line-height: 110px;
	color:  #000;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.2em;
	font-weight: 700;
	font-size: 16px;
	transition: all 1s;
}
.cosplayers .pulldown li:hover span,
.cosplayers .pulldown li.current span {
	color: #fff;
}
.cosplayers .pulldown li a {
	text-decoration: none;
}
.cosplayers .pulldown li.skills {
	position: relative;
}
.cosplayers .pulldown li.skills::after {
	display:block;
	position: absolute;
	top: 50%;
	right: 40px;
	width: 15px;
	height: 15px;
	content: "";
	background: url(../img/icn_plus.png) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
   	transform: translate(0, -50%);
   	transition: all 1s;
}
.cosplayers .pulldown li.skills:hover::after {
	background: url(../img/icn_plus_hover.png) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
   	transform: translate(0, -50%);
   	transition: all 1s;
}
.cosplayers .pulldown li.skills span {
	padding-right: 10px;
}
.cosplayers .pulldown li.skills.current::after {
	width: 15px;
	height: 1px;
	background: url(../img/icn_minus.png) no-repeat 0 0;
}

.cosplayers .pulldown-nest {
	display: none;
	position: absolute;
	top: 125px;
	left: 0;
	background: #fff;
	box-shadow: 20px 30px 80px #dbdbdb;
	overflow: hidden;
	padding: 15px 17px;
	z-index: 99;
	width: 100%;
	box-sizing: border-box;
}
.cosplayers .pulldown-nest li a {
	float: left;
	background: #f5f5f5;
	margin: 5px;
	padding: 10px 35px;
	font-size: 12px;
	font-weight: 700;
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, sans-serif;
	letter-spacing: 0.2em;
	color: #010101;
	text-decoration: none;
}
.cosplayers-modal {
	display: none;
}
.cosplayers .layersList-wrap {
/* 	display: none; */
}
.cosplayers .layersList-none {

}
.cosplayers .layersList-none p {
	text-align: center;
	font-size: 90px;
	letter-spacing: 0.1em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #d2d2d2;
	padding: 230px 0 170px;
}
	@media screen and (max-width: 1200px) {
		.cosplayers .inner {
			width: 94%;
		}
		.cosplayers .layersList-none p {
			font-size: 75px;
		}
	}
	@media screen and (max-width: 1000px) {
		.cosplayers .pulldown li.skills::after {
			right: 28px;
		}
	}
	@media screen and (max-width: 840px)  {
		.cosplayers .pulldown li span {
			height: 100px;
			line-height: 100px;
		}
		.cosplayers .pulldown li.skills::after {
			right: 20px;
		}
		.cosplayers .layersList-none p {
			font-size: 65px;
			padding: 200px 0 140px;
		}
	}
	@media screen and (max-width: 768px) {
		#main.cosplayers {
			padding: 17% 0 0;
		}
		.cosplayers .inner {
			position: relative;
			width: 87.5%;
			padding: 11.6% 0 0;
		}
		.cosplayers .inner::before {
			position: absolute;
			top: 0;
			left: -50%;
			width: 2000px;
			height: auto;
			padding: 80% 0 0;
			content: "";
			background: #f5f5f5;
		}
		.cosplayers .pulldown-wrap.pc,
		.cosplayers .pulldown-nest {
			display: none;
		}
		.cosplayers .pulldown-wrap.sp {
			display: block;
			position: relative;
			z-index: 999;
		}
		.cosplayers .pulldown-wrap .pulldown {
			display: block;
			margin: 0 auto 9.8%;
		}
		.cosplayers .pulldown li {
			position: relative;
			display: block;
			width: 100%;
			text-align: left;
		}
		.cosplayers .pulldown li {
			display: block;
			background: #000;
		}
		.cosplayers .pulldown li::after {
			display:block;
			position: absolute;
			top: 50%;
			right: 5.35%;
			content: "";
			background-size: contain;
			-webkit-transform: translate(0, -50%);
   			transform: translate(0, -50%);
   			transition: all 1s;
			background: url(../img/icn_plus_wt.png) no-repeat 0 0;
			width: 19px;
			height: 18px;
		}
		.cosplayers .pulldown li span {
			color: #fff;
			padding-left: 5.3%;
			height: 80px;
			line-height: 80px;
		}
		.cosplayers-modal {
			position: relative;
			top: 0;
			left: 0;
/*
			width: 100%;
			*/
			width: 90%;
			margin:12% auto 5%;
			height: auto;
		}
		.cosplayers-modal-bg {
			position: absolute;
			top: -50%;
			bottom: 0;
			right: 0;
			left: -50%;
			width: 200%;
			height: 200%;
			content: ""; 
			background: rgba(0,0,0,.2);
			z-index: 99;
			display:none;
		}
		
		.cosplayers-modal .btn-close {
			position: absolute;
			top: -2.2%;
			right: 0;
			width: 100%;
			margin: 0 auto 6.4%;
			text-align: right;
		}
		.cosplayers-modal .btn-close a {
			position: relative;
			text-decoration: none;
			color: #fff;
			font-size: 16px;
			font-family: 'Montserrat', sans-serif;
			letter-spacing: 0.2em;
			padding: 0 50px 0 0;
		}
		.cosplayers-modal .btn-close a::after {
			position: absolute;
			content: "";
			background: url(../img/icn_close.png) no-repeat right center;
			width: 19px;
			height: auto;
			padding: 0.25% 0 0;
			top: 50%;
			right: 15%;
			background-size: contain;
			-webkit-transform: translate(0, -50%);
   			transform: translate(0, -50%)
		}
		.pulldown-modalwrap {
			background: #fff;
			width: 100%;
			margin: 70px 0 0;
			padding: 1% 3.57% 8.5%;
			box-sizing: border-box;
		}
		.pulldown-modal {
			padding: 0 2%;
		}
		.pulldown-modal li + li {
			border-top: 1px solid #dcdcdc;
		}
		.pulldown-modal li span {
			display: block;
			font-size: 20px;
			font-weight: 700;
			font-family: 'Montserrat', sans-serif;
			letter-spacing: 0.2em;
			color: #000;
			padding: 6.4% 0;
		}
		.pulldown-modal li a {
			text-decoration: none;
		}
		.pulldown-modalnest {
			overflow: hidden;
		}
		.pulldown-modalnest li a {
			background: #f5f5f5;
			font-size: 18px;
			float: left;
			padding: 3.35% 5.58%;
			margin: 1.85%;
			font-weight: 700;
			font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, sans-serif;
			letter-spacing: 0.2em;
			color: #010101;
			text-decoration: none;
		}
		.cosplayers .layersList-none p {
			position: relative;
			font-size: 8.5vw;
			padding: 14% 0 24%;
		}
	}
	@media screen and (max-width: 480px) {
		.cosplayers .pulldown li span {
			font-size: 14px;
			height: 70px;
			line-height: 70px;
		}
		.cosplayers-modal .btn-close a {
			font-size: 12px;
			padding: 0 40px 0 0;
		}
		.pulldown-modal li span {
			font-size: 12px;
		}
		.pulldown-modalnest li a {
			font-size: 12px;
		}
	}
	@media screen and (max-width: 375px) {
		.cosplayers .pulldown li span {
			font-size: 12px;
			height: 60px;
			line-height: 60px;
		}
		.cosplayers-modal .btn-close a {
			font-size: 10px;
			padding: 0 30px 0 0;
		}
		.pulldown-modal li span {
			font-size: 11px;
		}
		 .pulldown-modalnest li a {
			font-size: 11px;
		}
	}


/*==================================================
page --- layers-detail
==================================================*/
.layers-detail .inner {
	width: 1100px;
	margin: 0 auto;
	overflow: hidden;
}
.layers-detail h2.ttl-wrap02 {
	padding: 0 0 45px;
	position: relative;
}
.detail-style {
	position: relative;
	padding: 112px 0 38px;
}
.detail-style::before {
	position: absolute;
	top: 415px;
	left: 50%;
	width: 2000px;
	height: 841px;
	margin-left: -652px;
	content: "";
	background: #f5f5f5;
}
.detail-style .product {
	position: relative;
	padding: 0 0 370px;
}
.detail-style .product::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.layers-detail .readtxt {
	position: absolute;
	top: 40px;
	left: 652px;
	font-size: 22px;
	font-weight: 700;
}
.layers-detail .readtxt span {
	display: block;
	font-size: 16px;
	font-weight: 300;
}
.detail-style .image-wrap {
	position: relative;
	float: left;
	width: 600px;
}
.detail-style .image-wrap .image li {
	display: block;
	position:absolute;
	top:0px;
	left:50%;
	z-index:10;
	opacity: 0;
	max-width: 600px;
	margin: 0 auto;
	width:100%;
   	-webkit-transform: translate(-50%, 0%);
  	transform: translate(-50%, 0%);
	
}
.detail-style .image-wrap .image li:first-of-type {
	position:relative;
	left:0px;
   	-webkit-transform: translate(0%, 0%);
  	transform: translate(0%, 0%);
}
.detail-style .image-wrap .image li:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
}
.detail-style .image-wrap .image li.current {
	box-shadow: 30px 30px 40px rgba(0,0,0,0.2);
	z-index:100;
}
.detail-style .image-wrap .image li.next{
	box-shadow: 30px 30px 40px rgba(0,0,0,0.2);
	z-index:110;
}
.detail-style .slider-wrap .swiper-slide-inner {
	position: relative;
}
.detail-style .slider-wrap .swiper-slide-inner:before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
}
.detail-style #arrow_main li a {
	display: block;
}
.detail-style .info {
	position: relative;
	width: 500px;
	padding: 823px 0 0;
	float: left;
}
.detail-style .info .txt-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	line-height: 110%;
	margin-left: 80px;
}
.detail-style .info .txt-wrap h3 {
	position: relative;
	font-size: 20px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.1em;
	padding: 0 0 20px;
}
.detail-style .info .txt-wrap h3::after {
	position: absolute;
	content: "";
	background: #000;
	width: 187px;
	height: 1px;
	bottom: 0;
	left: 0;
}
.detail-style .info .txt-wrap dt {
	padding: 17px 0 0;
	float: left;
	clear: both;
	font-weight: 700;
}
.detail-style .info .txt-wrap dd {
	padding: 17px 0 0;
	font-weight: 700;
}
.detail-style .info .txt-wrap ul {
	padding: 65px 0 40px;
}
.detail-style .info .txt-wrap li a {
	position: relative;
	text-decoration: none;
	color: #000;
	font-size: 12px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	padding: 11px 0 11px 50px;
	display: block;
	margin: 0 0 10px;
	transition: all 1s;
}

.detail-style .info .txt-wrap li a:hover {
	text-decoration: underline;
	transition: all 1s;
}
.detail-style .info .txt-wrap li a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
}

.detail-style .btn-moreinfo {
	position: static;
	display: block;
	margin: 0;
	width: 364px;
	height: 100px;
	line-height: 100px;
	padding: 0;
}
.detail-style #arrow_main li.prev {
	position: absolute;
	top: 50%;
	left: 0;
	margin-left: -60px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}
.detail-style #arrow_main li.next {
	position: absolute;
	top: 50%;
	right: 0;
	margin-right: -60px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}
.detail-style #arrow_main li a {
	position: relative;
	text-decoration: none;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: 0.2em;
	font-size: 16px;
}
.detail-style #arrow_main li.prev a::after {
	position: absolute;
	top: -10px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background: #000;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.detail-style #arrow_main li.next a::after {
	position: absolute;
	bottom: -10px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background: #000;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.detail-style #arrow_main li a:hover::after {
	width: 100%;
}
#main .detail-style .info .txt-wrap li a:hover {
	text-decoration: none;
}
#main .detail-style .info .txt-wrap li a span {
	position: relative;
} 
#main .detail-style .info .txt-wrap li a span::after {
	position: absolute;
	bottom: -6px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background: #000;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#main .detail-style .info .txt-wrap li a span:hover::after {
	width: 100%;
}
.detail-style .info .txt-wrap li a::before {
	background-size: contain !important;
}


/* slider */
.detail-style .slider-wrap {
	position: absolute;
	width: 1100px;
	bottom: -25px;
	padding: 0 0 50px
}
.detail-style .slider-wrap::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;	
}
.detail-style .slider-wrap #slider {

	width: 923px;
	margin: 0 auto;
	padding-top:40px;
	padding-bottom:40px;
	position:absolute;
	top:0px;
	left:50%;
	-webkit-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
	
}
.detail-style .slider-wrap #slider.swipeon {
	width: 1292.2px;
	padding:30px 0px 50px;
	position: relative;
}

.detail-style .slider-wrap #slider::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;		
}
.detail-style .slider-wrap #slider.unswiper{
	overflow:visible;
}
.detail-style .slider-wrap #slider.unswiper .swiper-slide{
	position:relative;
	float:left;
	width:20%;
	padding-left:0%;
	overflow:visible;
}
.detail-style .slider-wrap #slider.unswiper .swiper-slide-inner{
	width:94%;
	clear:both;
	margin-left:auto;
	margin-right:auto;
	float:none;
}


.detail-style .slider-wrap #slider .swiper-slide-inner {
	position: relative;
	float: left;
	box-shadow: 30px 30px 40px rgba(0,0,0,0.2);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	opacity: 0;
}

@media screen and (max-width: 768px) {
	.detail-style .slider-wrap #slider .swiper-slide-inner {
		opacity: 1;
	}
}

.detail-style .slider-wrap #slider .swiper-slide-inner.fadein {
	opacity: 1;
}
.detail-style .slider-wrap .swiper-slide-inner a {
	display: block;
	position:relative;
	z-index:3;
	background-color: rgba(0,0,0,0.5);
	transition: all 1s;

}
.detail-style .slider-wrap .current .swiper-slide-inner a,
.detail-style .slider-wrap .swiper-slide-inner a:hover {
	background-color: rgba(0,0,0,0);
}
/*
.detail-style .slider-wrap .swiper-slide-inner a:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-color: rgba(0,0,0,0.5);
	transition: all 1s;
}

.detail-style .slider-wrap .swiper-slide.current .swiper-slide-inner a:after {
	background-color: rgba(0,0,0,0);
}
*/
.detail-style .slider-wrap .swiper-slide-inner + .swiper-slide-inner {
	margin-left: 12px;
}


.detail-style .slider-wrap .swiper-slide a img {
	opacity: 0;
	width:100%;
}
.detail-style .slider-wrap .current a img {
/*
	opacity: 1;
*/
}

.detail-style #arrow_slider li.prev {
	position: absolute;
	top: 50%;
	margin-top: -60px;
	left: 0;
	width: 60px;
	height: 60px;
}
.detail-style #arrow_slider li.next {
	position: absolute;
	top: 50%;
	margin-top: -60px;
	right: 0;
	width: 60px;
	height: 60px;
}
.detail-style #arrow_slider li.prev a:hover::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/icn_detail_arrow_prev_hover.png) no-repeat;
	background-size: cover;
	transition: all 1s;
}
.detail-style #arrow_slider li.next a:hover::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/icn_detail_arrow_next_hover.png) no-repeat;
	background-size: cover;
	transition: all 1s;
}
.detail-style #arrow_slider li img {
	width: 100%;
}
.detail-style #arrow_slider li.prev a::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/icn_detail_arrow_prev_hover.png) no-repeat;
	background-size: contain;
	transition: all 1s;
	opacity: 0;
}
.detail-style #arrow_slider li.next a::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/icn_detail_arrow_next_hover.png) no-repeat;
	background-size: cover;
	transition: all 1s;
	opacity: 0;
}
.detail-style #arrow_slider li.next a:hover::after,
.detail-style #arrow_slider li.prev a:hover::after {
	opacity: 1;
}
.detail-style #arrow_slider li a {
	display: block;
	transition: all 1s;
}
.detail-style .slider-wrap .swiper-slide-inner {
	overflow: hidden;
	position:relative;
}

/*
.detail-style .slider-wrap .swiper-slide-inner:before {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	z-index:1;
	background-image:none !important;
	-webkit-transition:all 0.7s ease-in-out;
	transition:all 0.7s ease-in-out;
	will-change: transform;
	transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
	 transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);

}
.detail-style .slider-wrap .swiper-slide-inner:hover:before {
	transform: scale(1.20,1.20);
	-webkit-transform:scale(1.20,1.20);
	-moz-transform:scale(1.20,1.20);
	-ms-transform:scale(1.20,1.20);
	-o-transform:scale(1.20,1.20);
	will-change: transform;
	transform: perspective(1200px) rotateX(-5.46deg) rotateY(0.43deg) scale3d(1.08, 1.08, 1.08);
	transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
}

*/
.detail-style .slider-wrap .swiper-slide-inner .bgimg {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	z-index:1;
	-webkit-transition:all 0.7s ease-in-out;
	transition:all 0.7s ease-in-out;
	will-change: transform;
	transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
	 transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);

}
.detail-style .slider-wrap .swiper-slide-inner:hover .bgimg {
	transform: scale(1.20,1.20);
	-webkit-transform:scale(1.20,1.20);
	-moz-transform:scale(1.20,1.20);
	-ms-transform:scale(1.20,1.20);
	-o-transform:scale(1.20,1.20);
	will-change: transform;
	transform: perspective(1200px) rotateX(-5.46deg) rotateY(0.43deg) scale3d(1.08, 1.08, 1.08);
	transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
}

/*
.detail-style .slider-wrap .swiper-slide-inner a:after {
	transition: all 1s;
}

.detail-style .slider-wrap .swiper-slide-inner a:hover:after {
	background-color: rgba(0,0,0,0);
}

*/


/* detail-skills */
.detail-skills {
	padding: 50px 0 0;
}
.detail-skills h3 {
	font-size: 20px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.2em;
	padding: 0 0 30px;
}
.detail-skills .skills-list {
	overflow: hidden;
	padding: 0 0 65px;
	margin-left: -6px;
}
.detail-skills .skills-list li a {
	float: left;
	border: 3px solid #000;
	text-align: center;
	box-sizing: border-box;
	margin: 0 6px 12px;
	display: block;
	color: #010101;
	text-decoration: none;
	padding: 17px 60px;
	font-size: 12px;
	font-weight: 700;
}
.detail-skills .skills-list li:hover a {
	background: #000;
	color: #fff;
	transition: all 1s;
}
.detail-skills h4 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0 0 20px;
	border-bottom: 3px solid #000;
	margin: 0 0 20px;
}
.detail-skills .txt-wrap {
	overflow: hidden;
}
.detail-skills .txt-wrap li {
	float: left;
	width: 520px;
	margin: 0 30px 15px 0;
}
.detail-skills .txt-wrap li:nth-of-type(2n+1) {
	clear: both;
}
.detail-skills .txt-wrap li .txt-year {
	font-weight: 700;
	padding: 0 0 10px;
}
.detail-skills .txt-wrap li .txt {
	line-height: 170%;
	padding: 0 0 35px;
}
#layers-detail-link {
	position: relative;
	width: 100%;
	height: 301px;
	margin-top: 105px;
	text-align: center;
	overflow: hidden;
}
#layers-detail-link:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	background: url(../img/bg_layersdetail_link.jpg) no-repeat 50% 50%;
	background-size: cover; 
	-webkit-transition:all 0.7s ease-in-out;
	transition:all 0.7s ease-in-out;
	will-change: transform;
	transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
	 transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
}
#layers-detail-link:hover:after {
	transform: scale(1.10,1.10);
	-webkit-transform:scale(1.10,1.10);
	-moz-transform:scale(1.10,1.10);
	-ms-transform:scale(1.10,1.10);
	-o-transform:scale(1.10,1.10);
	will-change: transform;
	transform: perspective(1200px) rotateX(-5.46deg) rotateY(0.43deg) scale3d(1.08, 1.08, 1.08);
	transition: 4000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
}
#layers-detail-link a {
	display: block;
	height: 301px;
	line-height: 301px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	transition: all 1s;
}
#layers-detail-link a span {
	position: relative;
	padding: 0 0 0 33px;
	margin-left: -10px;
	z-index: 99;
}
#layers-detail-link a span::before {
	position: absolute;
	content:"";
	top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
  	transition: all 1s;
  	width: 23px;
	height: 18px;
	background: url(../img/icn_layerlist.png) no-repeat left center;
	background-size: contain;
}
#foot-contact.layers-detail-link {
	margin-top: 0;
}
	@media screen and (max-width: 1200px) {
		.detail-style .inner {
			width: 100%;
		}
		.detail-style .product {
			width: 84.5%;
			margin: 0 auto;
			padding: 0 0 34%;
		}
		.detail-skills .inner {
			width: 84.5%;
		}
		.layers-detail h2.ttl-wrap02 {
			width: 84.5%;
			margin: 0 auto;
		}
		.detail-style .image-wrap {
			width: 60%;
		}
		.detail-style .image-wrap img {
			width: 100%;
		}
		.layers-detail .readtxt {
			top: 4.5%;
			left: 65%;
			font-size: 20px;
		}
		.layers-detail .readtxt span {
			font-size: 14px;
		}
		.detail-style .info .txt-wrap {
			margin-left: 15%;
			width: 90%;
		}
		.detail-style .info {
			width: 35%;
			padding: 82% 0 0;
		}
		.detail-style .info .txt-wrap ul {
			padding: 10% 0 6%;
		}
		.detail-style .btn-moreinfo {
			width: 100%;
			height: 90px;
			line-height: 90px;
		}
		.detail-style .slider-wrap {
			width: 100%;
		}
		.detail-style .slider-wrap #slider {
			width: 100%;
			margin-left: 9.3%;
			padding-top:0px;
			padding-bottom:0px;
			box-shadow: none;
		}
		.detail-style .slider-wrap #slider.unswiper{
			width:100%;
			margin-left:auto;
			margin-right:auto;
		}
		.detail-style .slider-wrap #slider.swipeon {
			width: 140%;
			position: relative;
			margin-left:auto;
			margin-right:auto;
		}



		.detail-style .slider-wrap #slider .swiper-slide-inner img {
			width: 100%;
		}
		.detail-style #arrow_slider li.prev,
		.detail-style #arrow_slider li.next {
			width: 7%;
			height: auto;
		}
		.detail-style #arrow_main li.prev {
			margin-left: -70px;
		}
		.detail-style #arrow_main li.next {
			margin-right: -70px;
		}
		.detail-style::before {
			height: auto;
			padding: 68.5% 0 0;
		}
		.detail-skills .txt-wrap li {
			width: 47%;
			margin: 0 3% 15px 0;
		}
	}
	@media screen and (max-width: 1000px) {
		.detail-style .product {
			width: 78.125%;
		}
		#main.layers-detail {
			padding-top: 60px;
		}
		.detail-style {
			padding: 6.875% 0 14%;
			margin: 0;
		}
		.layers-detail .readtxt {
			position: static;
			padding: 0 0 5%;
			font-size: 18px;
		}
		.layers-detail .readtxt span {
			font-size: 12px;
		}
		.detail-style .image-wrap {
			width: 100%;
			float: none;
			padding: 0 0 6%;
		}
		.detail-style .info {
			width: 100%;
			float: none;
			padding: 16% 0 0;
		}
		.layers-detail h2.ttl-wrap02 {
			width: 78.125%;
			padding: 0 0 4%;
		}
		.detail-style .info .txt-wrap {
			position: static;
			width: 100%;
			margin-left: 0;
		}
		.detail-style::before {
			height: 79%;
			padding: 0 0;
			bottom: 0;
			top: auto;
		}
		.detail-style .btn-moreinfo {
			display: none;
		}
		.detail-style .info .txt-wrap dl {
			font-size: 16px;
			padding: 2.4% 0 0;
		}
		.detail-style .info .txt-wrap ul {
			padding: 10% 0 0;
		}
		.detail-style .slider-wrap {
			position: relative;
			width: 100%;
			padding: 0;
		}
		.detail-style .slider-wrap #slider {
			margin-left: 0;
		}
		.detail-style .slider-wrap #slider .swiper-slide-inner {
			margin: 0 3%;
			box-shadow: none;
		}
		.detail-style #arrow_slider li.prev {
			margin-top: -4%;
			left: -4%
		}
		.detail-style #arrow_slider li.next {
			margin-top: -4%;
			right: -4%;
		}

		.detail-style .product {
			width: 78.125%;
			margin: 0 auto 1%;
			padding: 0;
		}
		.detail-style .info .txt-wrap li a {
			padding: 16% 0 0;
			margin: 0 0 6%;
			font-size: 16px;
			line-height: 120%;
		}
		.detail-style .info .txt-wrap li.twitter a::before {
			background: url(../img/icn_detail_twitter_sp.svg) no-repeat 0 0;
			background-size: contain;
			width: 12%;
			height: auto;
			padding:12.1% 0.5% 0 0;
		}
		.detail-style .info .txt-wrap li.twitter a:hover::before {
			background: url(../img/icn_detail_twitter_hover_sp.svg) no-repeat 0 0;
			background-size: contain;
		}
		.detail-style .info .txt-wrap li.instagram a::before {
			background: url(../img/icn_detail_instagram.svg) no-repeat 0 0;
			background-size: contain;
			width: 12%;
			height: auto;
			padding: 12% 0 0;
		}
		.detail-style .info .txt-wrap li.instagram a:hover::before {
			background: url(../img/icn_detail_instagram_hover.svg) no-repeat 0 0;
			background-size: contain;
		}
		.detail-style .info .txt-wrap li.globe a::before {
			background: url(../img/icn_detail_globe.svg) no-repeat 0 0;
			background-size: contain;
			width: 12%;
			height: auto;
			padding: 12% 0 0;
		}
		.detail-style .info .txt-wrap li.globe a:hover::before {
			background: url(../img/icn_detail_globe_hover.svg) no-repeat 0 0;
			background-size: contain;
		}
		.detail-style .info .txt-wrap li.facebook a::before {
			background: url(../img/icn_detail_facebook.svg) no-repeat 0 0;
			background-size: contain;
			width: 12%;
			height: auto;
			padding: 12% 0 0;
		}
		.detail-style .info .txt-wrap li.facebook a:hover::before {
			background: url(../img/icn_detail_facebook_hover.svg) no-repeat 0 0;
			background-size: contain;
		}
		.detail-style #arrow_main li.prev,
		.detail-style #arrow_main li.next {
			top: 60px;
			margin-top: 76.8%;
		}
		.detail-skills {
			padding: 10% 0 0;
		}
	}
	@media screen and (max-width: 768px) {
		.detail-style .slider-wrap #slider.swipeon {
			width: 100%;
			margin-left: 0%;
			padding-top:0px;
			padding-bottom:0px;
			box-shadow: none;
		}
		.detail-skills .txt-wrap li {
			width: 100%;
			float: none;
			margin: 0;
		}
		.detail-skills .skills-list {
			padding: 0 0 10%;
		}
		.detail-skills .skills-list li a {
			padding: 3.6% 8%;
			font-size: 16px;
		}
		.detail-skills h4 {
			padding: 0 0 2%;
			margin: 0 0 4%;
		}
		.detail-skills .txt-wrap li .txt {
			padding: 0 0 7%;
		}
		.detail-skills + .btn-link {
			padding-top: 9.3%;
		}
		#layers-detail-link {
			margin-top: 13%;
		}
		#layers-detail-link:after {
			background: url(../img/bg_layersdetail_link_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
			-webkit-transition:none;
			transition:none;
			will-change: none;
			transform: none;
			 transition: none;
		}
		#layers-detail-link a span {
			font-size: 15px;
			font-weight: 700;
		}
	}
	@media screen and (max-width: 480px) {
		.layers-detail .readtxt {
			font-size: 16px;
		}
		.layers-detail .readtxt span {
			font-size: 11px;
		}
		.detail-style .info .txt-wrap h3 {
			font-size: 18px;
			padding: 0 0 17px;
		}
		.detail-style .info .txt-wrap dl {
			font-size: 14px;
		}
		.detail-style .info .txt-wrap dt,
		.detail-style .info .txt-wrap dd {
			padding: 14px 0 0;
		}
		.detail-style .info .txt-wrap li a {
			font-size: 14px;
		}
		.detail-style #arrow_main li a {
			font-size: 12px;
		}
		.detail-style #arrow_main li.prev {
			margin-left: -55px;
		}
		.detail-style #arrow_main li.next {
			margin-right: -55px;
		}
		.detail-skills .skills-list li a {
			font-size: 14px;
		}
		.detail-skills h4 {
			font-size: 16px;
		}
		#layers-detail-link {
			height: 250px;
		}
		#layers-detail-link a {
			height: 250px;
			line-height: 250px;
		}
		#layers-detail-link a span {
    		padding: 0 0 0 28px;
			font-size: 13px;
			font-weight: 700;
		}
		#layers-detail-link a span::before {
			height: auto; 
			 padding: 14px 0 0;
		}
	}
	@media screen and (max-width: 375px) {
		.layers-detail .readtxt {
			font-size: 14px;
		}
		.detail-style .info .txt-wrap h3 {
			font-size: 16px;
		}
		.detail-style .info .txt-wrap dl {
			font-size: 12px;
		}
		.detail-style .info .txt-wrap li a {
			font-size: 12px;
		}
		.detail-style #arrow_main li a {
			font-size: 10px;
		}
		.detail-style #arrow_main li.prev {
			margin-left: -45px;
		}
		.detail-style #arrow_main li.next {
			margin-right: -45px;
		}
		.detail-skills .skills-list li a {
			font-size: 12px;
		}
		.detail-skills h4 {
			font-size: 14px;
		}
		#layers-detail-link {
			height: 200px;
		}
		#layers-detail-link a {
			height: 200px;
			line-height: 200px;
		}
		/*
		#layers-detail-link a span {
			padding: 0 0 0 28px;
		}
		
		#layers-detail-link a span::before {
			height: auto; 
			padding: 15px 0 0;
		}
		*/
	}


/*==================================================
page --- service
==================================================*/
/*kv
---------------------------------------------------------*/


/*main
---------------------------------------------------------*/
.service .inner {
	position: relative;
	width: 1134px;
	margin: 0 auto;
	z-index: 99;
}
.service > section {
	position: relative;
}
.service .ttl-txt {
	font-size: 16px;
	font-weight: 700;
	line-height: 200%;
	padding: 0 0 30px 50px;
}
.service .service-productions {
	margin: 0 0 107px;
	padding: 165px 0 0;
}
.service .service-productions::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2000px;
	height: 853px;
	content: "";
	margin-left: -1505px;
	background: #f5f5f5;
}
.service .service-flow {
	display: block;
	padding: 113px 0 100px;
	background: #f5f5f5;
	margin: 0 0 142px;
}
.service .service-flow h3 {
	text-align: center;
}
.service .service-flow ol {
	position: relative;
	width: 1134px;
}
.service .service-flow ol::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.service .service-flow ol li {
	float: left;
	width: 220px;
}
.service .service-flow ol li + li {
	position: relative;
	margin-left: 84px;
}
.service .service-flow ol li + li::before {
	position: absolute;
	content: "";
	background: url(../img/icn_service_arrow.png) no-repeat center ;
	top: 20px;
	left: -62px;
	width: 41px;
	height: 41px;
}
.service .service-flow ol div {
	background: #000;
	color: #fff;
	text-align: center;
	height: 83px;
	line-height: 83px;
	box-shadow: 10px 10px 80px #aaa;
	margin: 0 0 26px;
}
.service .service-flow ol p {
	line-height: 170%;
}
.service .service-event {
	padding: 165px 0 0;
	margin: 0 0 140px;
}
.service .service-event::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2000px;
	height: 963px;
	margin-left: -400px;
	content: "";
	background: #f5f5f5;
}
.service .service-consulting {
	padding: 170px 0 0;
	margin: 0 0 140px;
}
.service .service-consulting::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2000px;
	height: 862px;
	content: "";
	margin-left: -1505px;
	background: #f5f5f5;
}
.service .service-consulting .ttl-txt {
	padding: 0 0 90px 50px;
}
.service .service-consulting .hover-zoom .img img:hover {
	-moz-transform: scale(1.0,1.0);
	-webkit-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
}
.service .service-case li {
	border-top: 1px solid #dcdcdc;
}
.service .service-case li:last-child {
	border-bottom: 1px solid #dcdcdc;
}
.service .service-case li a {
	position: relative;
	display: block;
	text-decoration: none;
	color: #000;
}
.service .service-case li a::after {
	position: absolute;
	content: "";
	background: #fff;
	width: 100%;
	height: 100%;
	top: -3px;
	left: -20px;
	padding: 3px 20px;
	box-shadow: 10px 10px 80px #aaa;
	transition: all 1s;
	opacity: 0;
}
.service .service-case li a:hover::after {
	transition: all 1s;
	opacity: 1;
}
.service .service-case li a div {
	position: relative;
	z-index: 99;
}
.service .service-case li h4 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 70px 40px 30px 0;
}
.service .service-case li p {
	font-size: 16px;
	padding: 0 40px 70px 0;
}
.service .service-case .txt-more {
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 80px 0 0;
	font-family: 'Montserrat', sans-serif;
}

.service-productions .layersList li.list01 .img img{
	opacity:0 !important;
}
.service-event .layersList li.list01 .img img{
	opacity:0 !important;
}




.service .service-case li a div:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 5px;
	width: 24px;
	height: 17px;
	content: "";
	background: url(../img/icn_blank_service_bk.png) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
}
.service .service-case li a div {
	padding-right: 50px;
}
#main.service .service-case li h4,
#main.service .service-case li p {
	padding-right: 0;
}
#main.service .service-case li a:hover::after {
	left: -40px;
	padding: 3px 40px;
}


	@media screen and (max-width: 1200px) {
		.service .inner {
			width: 94%;
		}
		.page .ttl-wrap01 {
			width: 84%;
			margin: 0 auto 64px;
		}
		.page .ttl-wrap02,
		.service .ttl-txt {
			width: 88.4%;
			margin: 0 auto;
		}
		.service .service-productions::before,
		.service .service-consulting:before {
			width: 78%;
			left: 0;
			margin-left: 0;	
		}
		.service .service-event::before {
			width: 78%;
			right: 0;
			left: auto;
			margin-left: 0;
		}
		.service .service-flow ol {
			width: 100%;
		}
		.service .service-flow ol li {
			width: 20%;
		}
		.service .service-flow ol li + li {
			margin-left: 6.6%;
		}
		.service .service-flow ol li + li::before {
			background-size: contain;
			height: auto;
			padding: 25% 0 0;
			left: -27%;
			width: 20%;
		}
		#main.service .service-case li a:hover::after {
			left: -20px;
			padding: 3px 20px;
		}
	}
	@media screen and (max-width: 768px) {
		.service .inner {
			width: 87.5%;
		}
		.page .ttl-wrap01 {
			width: 100%;
			margin: 0 auto 8.5%;
		}
		.page .ttl-wrap02 {
			width: 100%;
			padding: 0 0 8%;
		}
		.service .ttl-txt {
			width: 100%;
			padding: 0 0 11.96%;
		}.service .ttl-txt br {
			display: none;
		}
		.service .ttl-wrap01::before {
			width: 18%;
		}
		.service .service-productions::before {
			height: auto;
			padding: 185.6% 0 0;
		}
		.service .service-productions {
			padding: 14.68% 0 0;
			margin: 0 0 12.5%;
		}
		.service .service-flow {
			padding: 13.4% 0;
		}
		.service .service-flow h3 {
			text-align: left;
		}
		.service .service-flow .inner {
			width: 65.6%;
		}
		.service .service-flow ol li {
			width: 100%;
			float: none;
		}
		.service .service-flow ol li + li {
			margin-left: 0;
			padding: 23.8% 0 0;
		}
		.service .service-flow ol li + li::before {
			top: 0;
			margin-top: 5%;
			left: 50%;
			background: url(../img/icn_service_arrow_sp.png) no-repeat center;
			background-size: contain;
			width: 14.5%;
			height: auto;
			padding: 12% 0 0;
			margin-left: -7.25%;
		}
		.service .service-flow ol div {
			height: 100px;
			line-height: 100px;
			margin: 0;
			font-size: 18px;
		}
		.service .service-flow ol p {
			padding: 5.9% 0 0;
			font-size: 16px;
		}
		.service .service-flow ol p br {
			display: none;
		}
		.service .service-event {
			padding: 13.75% 0 0;
			margin: 0 0 19.8%;
		}
		.service .service-event::before {
			height: auto;
			padding: 201% 0 0;
		}
		.service .service-consulting {
			padding: 14% 0 0;
			margin: 0 0 31.25%;
		}
		.service .service-consulting::before {
			height: auto;
			padding: 130% 0 0;
		}
		.service .service-consulting .ttl-txt {
			padding: 0 0 8%;
		}
		.service .service-case li h4 {
			padding: 5.89% 8% 0 0;
		}
		.service .service-case li p {
			padding: 0 8% 5.89% 0;
		}
		.service .service-case .txt-more {
			padding: 12.1% 0 0;
		}
	}
	@media screen and (max-width: 640px) {
		.service .service-flow {
			margin: 0 0 25%;
		}
		.service .service-flow ol div {
			height: auto;
			line-height: 100%;
			padding: 9.52% 0;
		}
		.service .service-case li a div:after {
			width: 20px;
			height: 14px;
		}
	}
	@media screen and (max-width: 480px) {
		.service .ttl-txt {
			font-size: 14px;
		}
		.service .service-flow ol div {
			font-size: 16px;
			height: 90px;
			line-height: 90px;
		}
		.service .service-flow ol p {
			font-size: 14px;
		}
		.service .service-case li a div {
			background-size: 20px;
		}
		.service .service-case li h4 {
			font-size: 16px;
			padding-right: 10%;
		}
		.service .service-case li p {
			font-size: 14px;
			padding-right: 10%;
		}
		.service .service-case .txt-more {
			font-size: 24px;
		}
		#main.page .layersList li .name {
			font-size: 12px;
		}
	}
	@media screen and (max-width: 375px) {
		.service .ttl-txt {
			font-size: 12px;
		}
		.service .service-flow ol div {
			font-size: 14px;
			height: 80px;
			line-height: 80px;
		}
		.service .service-flow ol p {
			font-size: 12px;
		}
		.service .service-case li a div {
			background-size: 16px;
		}
		.service .service-case li h4 {
			font-size: 14px;
		}
		.service .service-case li p {
			font-size: 12px;
		}
		.service .service-case .txt-more {
			font-size: 20px;
		}
	}

/* productions01〜 */
/*#service-modal .productions01 {
	box-sizing: border-box;
}*/

/*modal
---------------------------------------------------------*/
#service-modalwrap {
	height: 100%;
}
#modal-wrap {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-size: 14px;
	box-sizing: border-box;
}
#service-modal {
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
	min-height: 100%;

	box-sizing: border-box;	
	background-color:#ffffff;
}

#modal {
	display: table-cell;
	width: 100%;
	margin: 0 auto;
	vertical-align: middle;
}
#service-modal .inner {
	position: relative;
	display: table;
	width: 1100px;
	margin: 0 auto;
}
#service-modal .inner h2 {
	font-weight: bold;
}
#service-modal .photo-wrap {
	display: table-cell;
	width: 707px;
	height: 630px;
}
#service-modal .photo-wrap .photo-inner {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
#service-modal .photo-wrap a {
	color: #000;
}
#service-modal figure {
	display: table-cell;
	vertical-align: middle;
}
#service-modal .txt-wrap {
	display: table-cell;
	vertical-align: middle;
	padding-left: 25px;
	width: 707px;
	height: 630px;
}
#service-modal .txt-wrap a {
	color: #000;
}

/* close btn */
#service-modal .btn_close {
	position: absolute;
	top: 33px;
	right: 38px;
}
#service-modal .btn_close a {
	position: relative;
	display:block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #000;
	text-decoration: none;
	letter-spacing: 0.17em;
	-webkit-transition: all 1s;
	transition: all 1s;
}
#service-modal .btn_close a::after {
	position: absolute;
	bottom: -4px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background: #000;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#service-modal .btn_close a:hover::after {
	width: 100%;
}

/* controll */
#service-modal .controll li {
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
    transition: all .3s;
}
#service-modal .controll li.pev {
	left: 50px;
	transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-transform: rotate(27deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
}
#service-modal .controll li.next {
	right: 50px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}
#service-modal .controll li a {
	position: relative;
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #000;
	text-decoration: none;
	letter-spacing: 0.17em;
}
#service-modal .controll li a::after {
	position: absolute;
	bottom: -4px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background: #000;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#service-modal .controll li a:hover::after {
	width: 100%;
}

#service-modal .controll li span {
	position: relative;
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #ccc;
	text-decoration: none;
	letter-spacing: 0.17em;
}


	@media screen and (max-width: 1350px) {
		#modal  {
			width: 100%;
			padding: 0 60px;
			box-sizing: border-box;
		}
		#service-modal .controll li.pev {
			left: 0;
		}
		#service-modal .controll li.next {
			right: 0;
		}
	}
	@media screen and (max-width: 1200px) {
		#service-modal .photo-wrap {
			width: 60%;
		}
		#service-modal .inner {
			width: 100%;
		}
	}
	@media screen and (max-width: 768px) {
		#modal-wrap {
			height:auto;
		}
		#service-modal {
			display: block;
			height:auto;
		}
		#modal {
			display: block;
			padding: 100px 0 0;
		}
		#service-modal .inner {
			display: block;
		}
		#service-modal .photo-wrap {
			display: block;
			height: auto;
			padding: 0 0 7%;
			margin: 0 auto;
		}
		#service-modal .txt-wrap {
			display: block;
			width: 78.1%;
			padding: 0;
			margin: 0 auto;
			height: auto;
		}
		#service-modal .btn_close {
			top: 20px;
			right: 5%;
		}
		#service-modal .btn_close a {
			overflow: hidden;
			display:block;
			position: relative;
			white-space: nowrap;
			text-indent: 100%;
			width: 26px;
			height: 26px;
			padding: 10px;
			content: "";
			background: url(../img/modal_btn_close_sp.png) no-repeat 50% 50%;
			background-size: 26px 26px;
		}
		#service-modal .controll {
			width: 78.125%;
			padding: 177px 0 16.25%;
			margin: 0 auto;
		}
		#service-modal .controll:after {
			content: "";
			display: block;
			clear: both;
			height: 0;
			visibility: hidden;
		}
		#service-modal .controll li {
			position: relative;
			top: 0;
			width: 50%;
			float: left;
			box-sizing: border-box;
		}
		#service-modal .controll li a {
			position: relative;
		}
		#service-modal .controll li a:before {
			display: block;
			position: absolute;
			top: 50%;
			width: 28px;
			height: 17px;
			content: "";
			 -webkit-transform: translate(0, -80%);
   			transform: translate(0, -80%);
		}
		#service-modal .controll li.pev {
			left: auto;
			transform: rotate(0);
			-ms-transform: rotate(0);
			-moz-transform: rotate(0);
			-webkit-transform: rotate(0);
			-o-transform: rotate(0);
		}
		#service-modal .controll li.pev a {
			padding: 0 0 0 38px;
		}
		#service-modal .controll li.pev a:before {
			left: 0;
			background: url(../img/modal_icn_pev.png) no-repeat 0 0;
			background-size: contain;
		}
		#service-modal .controll li.next {
			right: auto;
			transform: rotate(0);
			-ms-transform: rotate(0);
			-moz-transform: rotate(0);
			-webkit-transform: rotate(0);
			-o-transform: rotate(0);
			text-align: right; 
		}
		#service-modal .controll li.next a {
			padding: 0 38px 0 0;
		}
		#service-modal .controll li.next a:before {
			right: 0;
			background: url(../img/modal_icn_next.png) no-repeat 0 0;
			background-size: contain;
		}
		#service-modal .controll li a:hover::after {
			width: 0;
		}
	}
	@media screen and (max-width: 480px) {
		#service-modal .controll {
			padding-top: 27.6%;
		}
		#service-modal .btn_close a {
			width: 20px;
			height: 20px;
			background-size: 20px 20px;
		}
		#service-modal .txt-wrap {
			font-size: 13px;
		}
		#service-modal .controll li.pev a {
			padding: 0 0 0 33px;
		}
		#service-modal .controll li.next a {
			padding: 0 33px 0 0;
		}
		#service-modal .controll li a:before {
			width: 25px;
			height: 14px;
		}
		#service-modal .controll li a {
			font-size: 14px;
		}
	}

/* slider */
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus {
	outline: none;
}
.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
}
.slick-track:before,
.slick-track:after {
	display: table;
	content: '';
}
.slick-track:after {
	clear: both;
}
.slick-loading .slick-track {
	visibility: hidden;
}
.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide {
	float: right;
}
.slick-slide.slick-loading img {
	display: none;
}
.slick-slide.dragging img {
	pointer-events: none;
}
.slick-initialized .slick-slide {
	display: block;
}
.slick-loading .slick-slide {
	visibility: hidden;
}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
	display: none;
}

/*==================================================
page --- price
==================================================*/
/*kv
---------------------------------------------------------*/


/*main
---------------------------------------------------------*/
.price .inner {
	width: 1100px;
	margin: 0 auto;
}
.price table {
	width: 100%;
	margin: 0 0 105px;
	font-size: 18px;
	letter-spacing: 0.1em;
}
.price thead {
	background: #000;
	color: #fff;
}
.price thead tr {
	height: 115px;
}
.price tbody tr {
	height: 100px;
}
.price tbody tr:nth-of-type(2n) {
	background: #f5f5f5;
}
.price thead th {
	box-sizing: border-box;
	font-weight: 400;
	padding-right: 15px;
}
.price td {
	padding-right: 15px;
	font-size: 16px;
}
.price tbody th,
.price tbody td {
	box-sizing: border-box;
}
.price table.pc thead th:nth-of-type(1) {
	width: 300px;
	padding: 0 10px 0 40px;
}
.price table.pc thead th:nth-of-type(2) {
	width: 534px;
	padding-right: 10px;
}
.price table.pc thead th:nth-of-type(3) {
	padding-right: 10px;
}
.price table.pc tbody th {
	padding: 0 20px 0 40px;
}
.price table.sp {
	display: none;
}
.price .point dt {
	padding: 0 0 15px;
	margin: 20px 0;
	font-size: 18px;
	font-weight: 700;
	border-bottom: 3px solid #000;
}
.price .list-past dt {
	margin: 20px 0;
	font-size: 18px;
	font-weight: 700;
}
.price .point dd {
	margin: 0 0 55px;
}

	@media screen and (max-width: 1200px) {
		.price .inner {
			width: 87.5%;
		}
		.price table {
			font-size: 16px;
		}
	}
	@media screen and (max-width: 1050px) {
		.price table.pc th:nth-of-type(1) {
			padding: 0 15px 0 25px;
		}
	}
	@media screen and (max-width: 940px) {
		.price table {
			font-size: 15px;
		}
		.price table td {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 768px) {
		.price table.pc {
			display: none;
		}
		.price table.sp {
			display: table;
			border-bottom: 1px solid #dcdcdc;
		}
		.price tbody th,
		.price tbody td {
			display: block;
			width: 100%;
			padding: 20px;
		}
		.price tbody th {
			font-size: 18px;
			background: #f5f5f5;
		}
		.price tbody th.ttl {
			color: #fff;
			background: #000;
		}
		.price tbody td {
			font-size: 16px;
			background: #fff;
		}
		.price .btn-link a:first-child {
			margin-bottom: 7% !important;
		}
	}
	@media screen and (max-width: 640px) {
		.price table {
			margin: 0 0 18%;
		}
		.price .point dt {
			padding: 0 0 5px;
			margin: 5% 0;
		}
		.price .list-past dt {
			margin: 5% 0;
		}
		.price .point dd {
			margin: 0 0 10%;
		}
	}
	@media screen and (max-width: 480px) {
		.price tbody th,
		.price tbody td {
			padding: 6%;
		}
		.price tbody th,
		.price .point dt,
		.price .list-past dt {
			font-size: 16px;
		}
		.price tbody td {
			font-size: 13px;
		}
	}
	@media screen and (max-width: 375px) {
		.price tbody th,
		.price .point dt,
		.price .list-past dt {
			font-size: 14px;
		}
		.price tbody td {
			font-size: 11px;
		}
	}





/*==================================================
page --- faq
==================================================*/
/*kv
---------------------------------------------------------*/

/*main
---------------------------------------------------------*/
.faq .inner {
	width: 1100px;
	margin: 0 auto;
}
.faq dl {
	border-top: 1px solid #dcdcdc;	
}
.faq dt {
	position: relative;
	padding: 70px 0 0 85px;
	margin: 0 0 40px;
	font-weight: 700;
	font-size: 20px;
}
.faq dt::before {
	content: "Q";
	display: block;
	position: absolute;
	top: 50px;
	left: 0;
	color: #fff;
	background: #000;
	width: 65px;
	height: 65px;
	text-align: center;
	font-size: 30px;
	line-height: 215%;
	font-family: 'Montserrat', sans-serif;
	border-radius: 65px;
}

.faq dd {
	position: relative;
	border-bottom: 1px solid #dcdcdc;
	padding: 20px 0 75px 140px;
	font-size: 16px;
	line-height: 170%;
}
.faq dd::before {
	content: "A";
	display: block;
	position: absolute;
	top: 0px;
	left: 60px;
	color: #fff;
	background: #ff0125;
	width: 65px;
	height: 65px;
	text-align: center;
	font-size: 22px;
	line-height: 295%;
	font-family: 'Montserrat', sans-serif;
	border-radius: 65px;
}
.faq dd a {
	color: #000;
	font-weight: 700;
}
	@media screen and (max-width: 1200px) {
		.faq .inner {
			width: 90.64%;
			margin: 0 4.68%;
		}
	}
	@media screen and (max-width: 768px) {
		.faq dt{
			padding: 45px 0 0 55px;
			margin: 0 0 25px;
			font-size: 18px;
		}
		.faq dd {
			padding: 5px 0 40px 55px;
			font-size: 14px;
		}
		.faq dt::before,
		.faq dd::before {
			font-size: 18px;
			width: 36px;
			height: 36px;
			line-height: 200%;
			left: 0;
		}
		.faq dt::before {
			top: 40px;
		}
	}
	@media screen and (max-width: 480px) {
		.faq dt{
			padding: 40px 0 0 50px;
			margin: 0 0 20px;
			font-size: 16px;
		}
		.faq dd {
			padding: 5px 0 35px 50px;
			font-size: 12px;
		}
		.faq dt::before,
		.faq dd::before {
			font-size: 16px;
			width: 32px;
			height: 32px;
		}
		.faq dt::before {
			top: 35px;
		}
	}
	@media screen and (max-width: 375px) {
		.faq dt{
			padding: 30px 0 0 40px;
			margin: 0 0 10px;
			font-size: 14px;
		}
		.faq dd {
			padding: 5px 0 25px 40px;
			font-size: 11px;
		}
		.faq dt::before,
		.faq dd::before {
			font-size: 14px;
			width: 28px;
			height: 28px;
		}
		.faq dt::before {
			top: 25px;
		}
	}