@charset "utf-8";

/**
 *
 *  Smart TV Box TOP
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/
/* media query -> sp
=================================================================*/
.cp{
	position: relative;
}
.cp .btn{
    position: absolute;
    top: 630px;
	left: 20px;
	z-index: 1000;
}
.cp .btn img:hover {
	opacity: 0.8 ;
}
@media screen and (max-width: 768px){
	.cp-sp img{
		width: 100%;
	}
}
.cm{
	width: 660px;
}
.m-main-visual__btn,
.m-main-visual__btn--02{
	margin: 30px 0;
}
.m-main-visual__btn,
.m-main-visual__btn--02{
	display: inline-block;
	width: 300px;
}
.m-main-visual__btn--02{
	margin-left: 20px;
}
@media screen and (max-width: 768px){
	.m-main-visual__body__inner {
		padding-top: 55px;
	}
	.m-main-visual__btn,
	.m-main-visual__btn--02{
		margin:0;
	}
	.m-main-visual__btn,
	.m-main-visual__btn--02{
	width: 60px;
}
}




/*--------------------------------------------------------------------------
   feature
---------------------------------------------------------------------------*/
.feature{
	padding-bottom: 0;
	background: #fff;
}

/* feature__unit
-----------------------------------------------------------------*/
.feature__units{
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.feature__units:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 103px;
	height: 24px;
	margin: auto;
	background: url(../images/index/obj_feature_triangle.png) no-repeat 50%;
	background-size: cover;
}
.feature__unit{
	width: 33.33%;
}
.feature__unit--bg{
	background: #effbfb;
}
.feature__unit a{
	display: block;
}
.feature__unit__fig{
	overflow: hidden;
	position: relative;
	height: 0;
	padding-top: 57.66%;
}
.feature__unit__fig:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #00A99D;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-webkit-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.modePC .feature__unit a:hover .feature__unit__fig:after{
	opacity: .2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
.feature__unit__fig img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.modePC .feature__unit a:hover .feature__unit__fig img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.feature__unit__body{
	position: relative;
	padding: 82px 20px 55px;
}
.feature__unit__num{
	position: absolute;
	top: -51px;
	right: 0;
	left: 0;
	text-align: center;
}
.feature__unit__ttl{
	position: relative;
	text-align: center;
	color: #0e0d6a;
	font-size: 24px;
	line-height: 1.2;
	-webkit-transition: color .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: color .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.modePC .feature__unit a:hover .feature__unit__ttl{
	color: #00A99D;
}
.feature__unit__txt{
	margin-top: 15px;
	text-align: center;
	color: #0e0d6a;
	font-size: 15px;
	font-weight: 500;
}

/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){
	.feature{
		padding-right: 0;
		padding-left: 0;
	}

	/* feature__unit
	-----------------------------------------------------------------*/
	.feature__units{
		display: block;
	}
	.feature__units:after{
		width: 51px;
		height: 11px;
	}
	.feature__unit{
		width: auto;
	}
	.feature__unit__body{
		padding: 50px 15px 34px;
	}
	.feature__unit__num{
		top: -25px;
	}
	.feature__unit__num img{
		width: 50px;
		height: auto;
	}
	.feature__unit__ttl{
		padding-bottom: 9px;
		font-size: 18px;
	}
	.feature__unit__txt{
		margin-top: 10px;
		font-size: 12px;
	}
}


/*--------------------------------------------------------------------------
	 able
---------------------------------------------------------------------------*/
.able{
	background: url(/catv-service/stb-2/shared/images/common/bg_section01.jpg);
}
.able__inner{
	max-width: 1000px;
	min-width: 980px;
	margin: auto;
}

/* able__unit
-----------------------------------------------------------------*/
.able__units{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: -0.5%;
}
.able__unit{
	overflow: hidden;
	width: 31%;
	margin: 1.1%;
	border-radius: 5px;
	box-shadow: 2px 2px 3px rgba(0,0,0,.05);
	-webkit-transition: box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.modePC .able__unit:hover{
	box-shadow: 2px 2px 6px rgba(0,0,0,.3);
}
.able__unit a{
	display: block;
	position: relative;
	box-sizing: border-box;
	height: 100%;
	padding: 55px 15px 30px;
	border-radius: 5px;
	background: #f1fbff;
	-webkit-transition: background .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: background .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.modePC .able__unit a:hover{
	background: #edf9ff;
}
.able__unit a:before{
	content: '';
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 0 0 10px 10px;
	border-color: transparent transparent #00A99D transparent;
}
.able__unit__fig{
	margin-bottom: 35px;
	text-align: center;
}
.able__unit__txt{
	display: table;
	width: 100%;
	text-align: center;
	color: #1b266f;
	font-size: 15px;
	font-weight: 700;
	-webkit-transition: color .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: color .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.modePC .able__unit a:hover .able__unit__txt{
	color: #00A99D;
}
.able__unit__txt span{
	display: table-cell;
	vertical-align: middle;
}

/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){
	.able{
		background-size: 200px auto;
	}
	.able__inner{
		max-width: 100%;
		min-width: 0;
	}

	/* able__unit
	-----------------------------------------------------------------*/
	.able__units{
		margin: -1.5%;
	}
	.able__unit{
		width: 47%;
		margin: 1.5%;
		border-radius: 5px;
	}
	.able__unit a{
		padding: 25px 9px 15px;
	}
	.able__unit a:before{
		right: 6px;
		bottom: 6px;
		border-width: 0 0 8px 8px;
	}
	.able__unit__fig{
		margin-bottom: 12px;
	}
	.able__unit__fig img{
		width: 75px;
		height: auto;
	}
	.able__unit__txt{
		font-size: 10px;
	}
}


/*--------------------------------------------------------------------------
	 spec
---------------------------------------------------------------------------*/
.spec{
}

.spec .l-section__body {
	margin-top: 20px;
}

/* spec__unit
-----------------------------------------------------------------*/
.spec__unit{
	margin-bottom: 30px;
}
.spec__unit__fig {
	text-align: center;
	margin-bottom: 50px;
}
.spec__unit__body{
}

.spec__unit__list{
	display: table;
	width: 100%;
	padding: 15px 0;
}
.spec__unit__list + .spec__unit__list{
	border-top: 1px solid #d8eaf4;
}
.spec__unit__list dt,
.spec__unit__list dd{
	display: table-cell;
}
.spec__unit__list dt{
	width: 192px;
	font-weight: 500;
}

/* spec__box
-----------------------------------------------------------------*/
.spec__box{
	border: 2px solid #d8eaf4;
}
.spec__box__detail{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #f3f7f9;
}
.spec__box__detail dt{
	width: 145px;
	text-align: center;
	font-weight: 500;
}
.spec__box__detail dd{
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	padding: 30px 35px;
	background: #fff;
}
.spec__box__list{
	float: left;
}
.spec__box__list + .spec__box__list{
	margin-left: 40px;
}
.spec__box__list li{
	position: relative;
	padding-left: 1em;
}
.spec__box__list li:before{
	content: '・';
	position: absolute;
	top: 0;
	left: 0;
}


/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){
	/* spec__unit
	-----------------------------------------------------------------*/
	.spec__unit{
		margin-bottom: 15px;
	}
	.spec__unit__fig{
		float: none;
		padding: 0 20px;
		margin-right: 0;
	}
	.spec__unit__body{
		width: auto;
	}
	
	.spec__unit__list{
		display: block;
	}
	.spec__unit__list:last-child{
		border-bottom: 1px solid #d8eaf4;
	}
	.spec__unit__list dt,
	.spec__unit__list dd{
		display: block;
		font-size: 12px;
	}
	.spec__unit__list dt{
		width: auto;
		margin-bottom: 5px;
	}

	/* spec__box
	-----------------------------------------------------------------*/
	.spec__box{
		border: 1px solid #e7e9ed;
		background-color: #fff;
	}
	.spec__box__detail{
		display: block;
		background: transparent;
	}
	.spec__box__detail dt {
		width: auto;
		padding: 1.25em 0;
		text-align: center;
		font-size: 12px;
		background-color: #fafafb;
	}
	.spec__box__detail dd {
		margin: 0;
		padding: 20px;
		background: transparent;
	}
	.spec__box__list{
		float: none;
	}
	.spec__box__list + .spec__box__list{
		margin-left: 0;
	}
}



/* g-modal__list
-----------------------------------------------------------------*/
#Modal,#Modal02{display:none;}
#boxer.inline{padding:20px!important;}
#boxer.inline .boxer-content,#boxer .boxer-container{overflow:visible!important;}
.g-modal__inner{
	width:600px;
}
.g-modal__list{
	width:100%;
	position:relative;
	-ms-flex-pack:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items:center;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap; 
	flex-wrap:wrap;
	display:-webkit-box;
	display:-ms-flexbox;
	display: -webkit-flex;
	display:flex;
}
.g-modal__list02{
	width:100%;
	height:338px;
	position:relative;
	-ms-flex-pack:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items:center;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap; 
	flex-wrap:wrap;
	display:-webkit-box;
	display:-ms-flexbox;
	display: -webkit-flex;
	display:flex;
}
.g-modal__listItem{
	width:80%;
	display:inline-block;
	vertical-align:middle;
}
.g-modal__listItem + .g-modal__listItem:nth-child(even){
	margin-left:4%;
}
.g-modal__listItem + .g-modal__listItem:not(:nth-child(-n + 2)){
	margin-top:10px;
}
.g-modal__listItem a{
	display:block;
	color:#0e0d6a;
}
.g-modal__listItem a p{
	margin-top:.5em;
}
.g-modal__listItem a img{
	width:100%;
	height:auto;
}
.g-modal__movieWrapper{
	position:absolute;
	left:0;
	top:0;
	padding-top:56.33%;
	width:100%;
	height:auto;
	transition:.3s opacity cubic-bezier(0.215, 0.61, 0.355, 1),.3s transform cubic-bezier(0.215, 0.61, 0.355, 1);
}
.g-modal__movieWrapper.is-hidden{
	display:none;
}
.g-modal__movieWrapper.is-slideFade{
	transform:translateX(30px);
	opacity:0;
}
.g-modal__button{
	content:'';
	position:absolute;
	top:50%;
	left:-32px;
	display:block;
	margin-top:-15px;
	width:30px;
	height:30px;
	border-radius:50%;
	background:#fff;
	z-index:1;
}
.g-modal__button::after{
	content:'';
	position:absolute;
	border-top:2px solid #000;
	border-left:2px solid #000;
	top:32%;
	left:40%;
	width:11px;
	height:11px;
	-ms-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#moviePlayer{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#boxer.mobile .boxer-container{
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items:center;
	display:-webkit-box;
	display:-ms-flexbox;
	display: -webkit-flex;
	display:flex;
}
#boxer.mobile .boxer-close{
	top:47px!important;
}
#boxer.mobile .g-modal__button{
	left:-20px!important;
}
#boxer.mobile .g-modal__movieWrapper{
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}
#boxer.mobile .g-modal__listItem a{
	color:#fff;
}
#boxer.mobile .boxer-content{
	margin:0 auto;
}
#boxer.mobile .boxer-video-wrapper{
	margin-top:0!important;
}
@media screen and (max-width:720px){
	.g-modal__inner{
		width:83.33vm;
		width:83.33vw;
	}
	.g-modal__list{
		height:46.94vm;
		height:46.94vw;
	}
}