/*
* service.css
*
*/
/* --------------------------------
	service
-------------------------------- */
/* common ---------- */
.service_hero_video {
	overflow: hidden; 
	position: relative;
	padding-top: 56.25%;
	height: 0;
}
@media print, screen and (min-width: 1024px) {
	.service_hero_video {
		padding-top: 0; 
		height: 576px;
	}
}
.service_hero_video img,
.service_hero_video video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.service_hero_btnContainer {
	position: absolute;
	bottom: 16px;
	left: 0;
	width: 100%;
}
@media print, screen and (min-width: 768px) {
	.service_hero_btnContainer {
		bottom: 24px;
	}
}

.service_hero_btn {
	text-align: right;
}
.service_hero_btn .m-btn {
	padding: 8px 22px;
	min-width: 0;
	font-size: 22.4px;
	font-size: 1.4rem;
	line-height: 1.6;
}

/* top ---------- */
body.page-categoryTop {
	position: relative;
}
body.page-categoryTop:before {
	content: "";
	display: block;
	position: absolute;
	position: fixed;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	margin: auto;
	height: 100vh;
	background-image: url(../img/categoryHero_bg_service.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
@media print, screen and (min-width: 768px) {
	body.page-categoryTop:before {
		background-image: url(../img/categoryHero_bg_md_service.jpg);
	}
}

.l-categoryHero_title:before {
	width: 110px;
}
@media print, screen and (min-width: 768px) {
	.l-categoryHero_title:before {
		width: 210px;
	}
}

.l-categoryHero_title_label {
	background-image: url(../font/SVG/categoryHero_title_service.svg);
}
@media print, screen and (min-width: 768px) {
	.l-categoryHero_title_label {
		background-image: url(../font/SVG/categoryHero_title_md_service.svg);
	}
}

.top_contentsNav .m-contentsNav_item-media .m-contentsNav_item_bg {
	background-image: url(../img/service-1.jpg);
}

.top_contentsNav .m-contentsNav_item-internetad .m-contentsNav_item_bg {
	background-image: url(../img/service-2.jpg);
}

.top_contentsNav .m-contentsNav_item-game .m-contentsNav_item_bg {
	background-image: url(../img/service-3.jpg);
}

.top_contentsNav .m-contentsNav_item-startup .m-contentsNav_item_bg {
	background-image: url(../img/service-4.jpg);
}

.top_contentsNav .m-contentsNav_item-startup2 .m-contentsNav_item_bg {
	background-image: url(../img/service-5.jpg);
}

.top_contentsNav .m-contentsNav_item-startup3 .m-contentsNav_item_bg {
	background-image: url(../img/service-6.jpg);
}


.backgroundcliptext .top_contentsNav .m-contentsNav_item-media .m-contentsNav_item_heading_en,
.backgroundcliptext .top_contentsNav .m-contentsNav_item-media .m-contentsNav_item_heading_ja {
	background-image: url(../img/service-1.jpg);
}

.backgroundcliptext .top_contentsNav .m-contentsNav_item-internetad .m-contentsNav_item_heading_en,
.backgroundcliptext .top_contentsNav .m-contentsNav_item-internetad .m-contentsNav_item_heading_ja {
	background-image: url(../img/service-2.jpg);
}

.backgroundcliptext .top_contentsNav .m-contentsNav_item-game .m-contentsNav_item_heading_en,
.backgroundcliptext .top_contentsNav .m-contentsNav_item-game .m-contentsNav_item_heading_ja {
	background-image: url(../img/service-3.jpg);
}

.backgroundcliptext .top_contentsNav .m-contentsNav_item-startup .m-contentsNav_item_heading_en,
.backgroundcliptext .top_contentsNav .m-contentsNav_item-startup .m-contentsNav_item_heading_ja {
	background-image: url(../img/service-4.jpg);
}

.backgroundcliptext .top_contentsNav .m-contentsNav_item-startup2 .m-contentsNav_item_heading_en,
.backgroundcliptext .top_contentsNav .m-contentsNav_item-startup2 .m-contentsNav_item_heading_ja {
	background-image: url(../img/service-5.jpg);
}

.backgroundcliptext .top_contentsNav .m-contentsNav_item-startup3 .m-contentsNav_item_heading_en,
.backgroundcliptext .top_contentsNav .m-contentsNav_item-startup3 .m-contentsNav_item_heading_ja {
	background-image: url(../img/service-6.jpg);
}

@media print, screen and (min-width: 768px) {
	.top_contentsNav .m-contentsNav_item_bg {
		-webkit-transition: -webkit-transform 0s 0.3s;
		transition: -webkit-transform 0s 0.3s;
		transition: transform 0s 0.3s;
		transition: transform 0s 0.3s, -webkit-transform 0s 0.3s; 
		-webkit-transform: scale(1); 
		    -ms-transform: scale(1); 
		        transform: scale(1);
	}
	.top_contentsNav .m-contentsNav_item.is-active .m-contentsNav_item_bg {
		-webkit-transition: -webkit-transform 20s linear;
		transition: -webkit-transform 20s linear;
		transition: transform 20s linear;
		transition: transform 20s linear, -webkit-transform 20s linear; 
		-webkit-transform: scale(2); 
		    -ms-transform: scale(2); 
		        transform: scale(2);
	}
}

/* detail ---------- */
@media print, screen and (min-width: 768px) {
	.detail_overview_link {
		margin-right: -7px;
		margin-left: -7px; 

		-webkit-flex-wrap: wrap; 

		    -ms-flex-wrap: wrap; 

		        flex-wrap: wrap;
		-webkit-box-pack: start;
		-webkit-justify-content: flex-start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
	}
	.detail_overview_link .m-btnGroup_item {
		margin: 7px 0;
		padding: 0 7px; 
		width: 33.333%;
	}
	.detail_overview_link .m-btn {
		display: block;
		padding-right: 2em;
		padding-left: 2em;
		min-width: 0;
		text-align: center;
		font-size: 1.5rem;
	}
}

@media print, screen and (min-width: 1032px) {
	.detail_overview_link .m-btn {
		font-size: 1.8rem;
	}
}