@charset "utf-8";

/**
 *
 *  でんきアプリ TOP
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   cp
---------------------------------------------------------------------------*/
.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%;
	}
}

/*--------------------------------------------------------------------------
   feature
---------------------------------------------------------------------------*/
.feature{
	background: url(/catv-service/denki/shared/images/common/bg_section01.jpg);
}
.feature__btn{
	width: 392px;
	margin: 35px auto 0;
}

/* feature__unit
-----------------------------------------------------------------*/
.feature__units{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
}
.feature__unit{
	/* -webkit-flex-grow: 1;
	flex-grow: 1; */
	width: 45%;
}
.feature__unit__fig{
	text-align: center;
}
.feature__unit__body{
	margin-top: 28px;
	text-align: center;
}
.feature__unit__ttl{
	font-size: 20px;
}
.feature__unit__txt{
	margin-top: 15px;
	line-height: 1.8;
}

/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){
	.feature{
		background-size: 200px auto;
	}
	.feature__btn{
		width: auto;
	}

	/* feature__unit
	-----------------------------------------------------------------*/
	.feature__units{
		display: block;
	}
	.feature__unit{
		display: table;
		width: 100%;
	}
	.feature__unit + .feature__unit{
		margin-top: 25px;
	}
	.feature__unit__fig,
	.feature__unit__body{
		display: table-cell;
		vertical-align: middle;
		text-align: left;
	}
	.feature__unit__fig{
		width: 116px;
	}
	.feature__unit__fig img{
		width: 100%;
		height: auto;
	}
	.feature__unit__body{
		margin-top: 0;
		padding-left: 15px;
	}
	.feature__unit__ttl{
		font-size: 20px;
	}
	.feature__unit__txt{
		margin-top: 15px;
		line-height: 1.8;
	}
}


/*--------------------------------------------------------------------------
	 structure
---------------------------------------------------------------------------*/
.structure{
	background: url(../images/index/bg_structure.jpg) no-repeat 50% 100%;
	background-size: cover;
}

/* structure__unit
-----------------------------------------------------------------*/
.structure__unit{
	position: relative;
}
.structure__unit__obj{
	position: absolute;
	top: -125px;
	right: 0;
}

/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){
	.structure{
		background-image: url(../images/index/bg_structure_sp.jpg);
	}

	/* structure__unit
	-----------------------------------------------------------------*/
	.structure__unit__fig img + img{
		margin-top: 20px;
	}
	.structure__unit__obj{
		display: none;
	}
}


/*--------------------------------------------------------------------------
	 constitution
---------------------------------------------------------------------------*/
.constitution__ttl{
  text-align: center;
  font-size: 20px;
  margin-bottom: 40px;
}

/* constitution__unit
-----------------------------------------------------------------*/
.constitution__unit__ttl{
	margin-bottom: 35px;
	padding-left: 12px;
	border-left: 4px solid #f27934;
	font-size: 28px;
	line-height: 1.4;
}

.constitution__unit__fig{
	text-align: center;
  margin-bottom: 40px;
}

.constitution__unit__fig+.constitution__unit__ttl{
	margin-top: 70px;
}


/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){

  .constitution__ttl{
    font-size: 14px;
    margin-bottom: 20px;
  }

  
  /* constitution__unit
  -----------------------------------------------------------------*/
  .constitution__unit__ttl{
	margin-bottom: 15px;
	padding-left: 6px;
	border-left-width: 2px;
	font-size: 17px;
  }

	.constitution__unit__fig{
    margin-bottom: 20px;
  }

  .constitution__unit__fig+.constitution__unit__ttl{
	margin-top: 50px;
  }
}


/*--------------------------------------------------------------------------
	 charge
---------------------------------------------------------------------------*/
.charge {}

.charge__btn{
	width: 392px;
	margin: 60px auto 0;
}

.charge__img img {
	width: 100%;
}

/* charge__unit
-----------------------------------------------------------------*/
.charge__units{
	overflow: hidden;
	margin-top: 50px;
	border: 1px solid #1b266f;
	border-radius: 5px;
}
.charge__unit{
	float: left;
	width: 50%;
}
.charge__unit dt{
	padding: 15px 30px;
	background: #1b266f;
	color: #fff;
	font-size: 18px;
}
.charge__unit + .charge__unit dt{
	border-left: 1px solid #3d4684;
}
.charge__unit dd{
	position: relative;
	padding: 15px 30px 25px;
	background: #f2f3f8;
	font-size: 13px;
	line-height: 1.8;
}
.charge__unit + .charge__unit dd{
	border-left: 1px solid #dde0ed;
}
.charge__unit dd .txt{
	margin-bottom: 10px;
}
.charge__unit dd .link{
	font-weight: 500;
}
.charge__unit dd .link a{
	color: #192467;
}
.charge__unit dd .link span{
	border-bottom: 1px solid transparent;
	-webkit-transition: border .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: border .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modePC .charge__unit dd .link a:hover span{
	border-bottom-color: #192467;
}

/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){
	.charge__btn{
		width: auto;
		margin: 30px auto 0;
	}

	/* charge__list
	-----------------------------------------------------------------*/
	.charge__list li{
		display: block;
	}
	.charge__list li + li{
		margin-top: 10px;
	}

	/* charge__unit
	-----------------------------------------------------------------*/
	.charge__units{
		margin-top: 33px;
		border: none;
		border-radius: 0;
	}
	.charge__unit{
		overflow: hidden;
		float: none;
		width: auto;
		border: 1px solid #1b266f;
		border-radius: 5px;
	}
	.charge__unit + .charge__unit{
		margin-top: 15px;
	}
	.charge__unit dt{
		padding: 7px 15px;
		font-size: 15px;
	}
	.charge__unit + .charge__unit dt{
		border-left: none;
	}
	.charge__unit dd{
		padding: 15px 15px;
		font-size: 11px;
	}
	.charge__unit + .charge__unit dd{
		border-left: none;
	}
	.charge__unit dd .txt{
		margin-bottom: 15px;
	}
	.charge__unit dd .link + .link{
		margin-top: 7px;
	}
}





/* g-modal__list
-----------------------------------------------------------------*/
#Modal{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%;
	height:330px;
	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:48%;
	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;
	}
}