@charset "utf-8";

#breadcrumb {
    z-index: 1;
    top: inherit;
    bottom: 25px;
}

.skw-pages {
	overflow: hidden;
	position: relative;
	height: 100vh;
}

.skw-page {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.skw-page__half {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100vh;
	transition: -webkit-transform 1s;
	transition: transform 1s;
	transition: transform 1s, -webkit-transform 1s;
}
.skw-page__half--left {
	left: 0;
	-webkit-transform: translate3d(-32.4vh, 100%, 0);
	transform: translate3d(-32.4vh, 100%, 0);
}
.skw-page__half--right {
	left: 50%;
	-webkit-transform: translate3d(32.4vh, -100%, 0);
	transform: translate3d(32.4vh, -100%, 0);
}
.skw-page.active .skw-page__half {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.skw-page__skewed {
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 140%;
	height: 100%;
	-webkit-transform: skewX(-18deg);
	transform: skewX(-18deg);
	background: #000;
}
.skw-page__half--left .skw-page__skewed {
	left: -40%;
}
.skw-page__half--right .skw-page__skewed {
	right: -40%;
}
.skw-page__content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column wrap;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	-webkit-transform: skewX(18deg);
	transform: skewX(18deg);
	transition: opacity 1s, -webkit-transform 1s;
	transition: transform 1s, opacity 1s;
	transition: transform 1s, opacity 1s, -webkit-transform 1s;
	background-size: cover;
	}
.skw-page__half--left .skw-page__content {
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}
.skw-page__half--right .skw-page__content {
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.skw-page.inactive .skw-page__content {
	opacity: 0.5;
	-webkit-transform: skewX(18deg) scale(.95);
	transform: skewX(18deg) scale(.95);
}

.under .mv {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../../img/service-top/pc/mv.jpg) no-repeat left 44%;
	background-size: cover;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}
.under .mv .bar {
    top: 100px;
}
.skw-page-1.inactive .skw-page__content {
	-webkit-transform: skewX(18deg) scale(1);
	transform: skewX(18deg) scale(1);
}
.skw-page-1.inactive .mv {
	opacity: 0.2;
}
.skw-page-1 .skw-page__half--left .skw-page__content {
	background: #292929;
}
.skw-page-1 .skw-page__half--right {
	width: 100%;
	left: 0;
}
.skw-page-1 .skw-page__half--right .skw-page__content {
	width: 100%;
	background: #292929;
}
.skw-page-2 .skw-page__half--left .skw-page__content {
	background-image: url("../../img/service-top/pc/photo-sec2.jpg");
    background-position: center right;
    background-size: cover;
}

.skw-page-3 .skw-page__half--right .skw-page__content {
	background-image: url("../../img/service-top/pc/photo-sec3.jpg");
    background-position: center;
    background-size: cover;
}

.skw-page-4 .skw-page__half--left .skw-page__content {
	background-image: url("../../img/service-top/pc/photo-sec4.jpg");
    background-position: center;
    background-size: cover;
}

.skw-page-5 .skw-page__half--right .skw-page__content {
	background-image: url("../../img/service-top/pc/photo-sec5.jpg");
    background-position: center;
    background-size: cover;
}

.skw-page__content .tips {
    width: 100%;
    max-width: 450px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
	.skw-page__content .tips h3 {
		text-align: center;
		font-size: 30px;
	    letter-spacing: 2px;
	    transition-duration: .4s;
		transition-timing-function: ease-in-out;
		transition-delay: .5s;
		opacity: 0;
	}
		.skw-page__content .tips h3 span {
			display: block;
			font-size: 18px;
		}
	.active .skw-page__content .tips h3 {
		opacity: 1;
	}

	.skw-page__content .tips .sepalate {
		width: 0px;
		height: 1px;
		display: block;
		margin-right: auto;
		margin-left: auto;
		background:#fff;
		opacity: .5;
		margin-top: 20px;
		margin-bottom: 20px;
		transition-duration: .4s;
		transition-timing-function: ease-in-out;
		transition-delay: .8s;
	}
	.active .skw-page__content .tips .sepalate {
		width: 115px;
	}
	.skw-page__content .tips p {
		line-height: 2.15;
		font-size: 14px;
		transition-duration: .4s;
		transition-timing-function: ease-in-out;
		transition-delay: 1.2s;
		opacity: 0;
	}
	.active .skw-page__content .tips p {
		opacity: 1;
	}
	.skw-page__content .linkBox {
		transition-duration: .4s;
		transition-timing-function: ease-in-out;
		transition-delay: 1.6s;
		opacity: 0;
	}
	.active .skw-page__content .linkBox {
		opacity: 1;
	}
		.skw-page__content .toLink {
		    margin-top: 35px;
		    max-width: 200px;
		}

.modal-body .clearBox {
	width: 388px;
	height: 1px;
}
.modal-body ul {
	width: 100%;
	max-width: 388px;
	margin-right: auto;
	margin-left: auto;
}
	.modal-body ul li {
		float: left;
		width: 48.5%;
		max-width: 188px;
	}
	.modal-body ul li + li {
		float: right;
	}
		.modal-body ul li a {
			display: block;
		}



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

	.under .mv {
		position: relative;
		top: inherit;
		left: inherit;
		width: 100%;
		height: 220px;
	    background: url(../../img/service-top/pc/mv.jpg) no-repeat 30% 10%;
		background-size: cover;
		transition-duration: 1s;
		transition-timing-function: ease-in-out;
	}
	.under .mv .bar {
	    top: calc(100% - 25px);
	}

	#sp-content {
	}
		#sp-content .box {
			position: relative;
			width: 100%;
			height: 70vh;
		    min-height: 400px;
		}
			#sp-content .box .trg {
				position: absolute;
				bottom: 20%;
				width: 100px;
				height: 1px;
				right: 0;
				left: 0;
				margin: auto;
			}
			#sp-content .box .overlay {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			    background: rgb(38,56,102);
			    background: -moz-linear-gradient(left, rgba(38,56,102,1) 0%, rgba(0,0,0,1) 100%);
			    background: -webkit-linear-gradient(left, rgba(38,56,102,1) 0%,rgba(0,0,0,1) 100%);
			    background: linear-gradient(to right, rgba(38,56,102,1) 0%,rgba(0,0,0,1) 100%);
			    opacity: 0;
			    transition-duration: .5s;
				transition-timing-function: ease-in-out;
			    z-index: 1;
			}
			#sp-content .box.view .overlay {
				opacity: .85;
			}
			#sp-content .box .photo {
				width: 100%;
				height: 100%;
			}
			#sp-content .box .tips {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: auto;
				transform: translate(-50%, -50%);
				width: 87.5%;
				z-index: 2;
			}
				#sp-content .box .tips h3 {
				    font-size: 21px;
				    line-height: 1.46;
				    margin-bottom: 20px;
				    text-align: center;
				    transition-duration: .4s;
					transition-timing-function: ease-in-out;
					transition-delay: .7s;
					opacity: 0;
				}
				#sp-content .box.view .tips h3 {
					opacity: 1;
				}
					#sp-content .box .tips h3 span {
					    font-size: 16px;
					    display: block;
					    padding-top: 3px;
					}
				#sp-content .box .tips p {
				    font-size: 13px;
				    line-height: 2;
			        margin-bottom: 25px;
			        transition-duration: .4s;
					transition-timing-function: ease-in-out;
					transition-delay: 1.1s;
					opacity: 0;
				}
				#sp-content .box.view .tips p {
					opacity: 1;
				}
				#sp-content .box .tips .linkBox {
					transition-duration: .4s;
					transition-timing-function: ease-in-out;
					transition-delay: 1.5s;
					opacity: 0;
				}
				#sp-content .box.view .tips .linkBox {
					opacity: 1;
				}

			.sp-softbank .photo {
				background-image: url("../../img/service-top/pc/photo-sec2.jpg");
			    background-position: center;
			    background-size: cover;
			}
			.sp-mobile .photo {
				background-image: url("../../img/service-top/pc/photo-sec3.jpg");
			    background-position: center;
			    background-size: cover;
			}
			.sp-beauty .photo {
				background-image: url("../../img/service-top/pc/photo-sec4.jpg");
			    background-position: center;
			    background-size: cover;
			}
			.sp-food .photo {
				background-image: url("../../img/service-top/pc/photo-sec5.jpg");
			    background-position: center;
			    background-size: cover;
			}

	.remodal {
		width: 87.5% !important;
	}
		.modal-wrap {
		    padding-top: 20px;
		}
			.modal-wrap li {
				width: 90%;
				max-width: 184px;
				margin-right: auto;
				margin-left: auto;
			}
			.modal-wrap li + li {
				margin-top: 15px;
			}
			.remodal-close {
			    margin-top: 30px !important;
			    width: 40px !important;
			}

	.modal-frame {
		overflow: hidden;
	}

		
}

.for_ipad_none {
	display: none !important;
}
.for_ipad_block {
	display: block !important;
}