@charset "utf-8";

/*=====================================

 プレスタブ用CSS

=======================================*/

/*タブの装飾*/
.panel-news{
	border:#000 solid 1px;
	box-sizing:border-box;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;}

.panel-news li {
    border-right: 1px solid #000;
    box-sizing:border-box;
    float: left;
    width: 20%;
}

.panel-news li:last-child{border-right:none;}

.panel-news .panel-label {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 0.5em 1em;
    position:relative;
    width: 100%;
}


/*アクティブ時のタブ装飾*/
.panel-news .panel-label:hover,
#panel-1-ctrl:checked ~ #list-news-energy #li-for-panel-1 label.panel-label,
#panel-2-ctrl:checked ~ #list-news-energy #li-for-panel-2 label.panel-label,
#panel-3-ctrl:checked ~ #list-news-energy #li-for-panel-3 label.panel-label,
#panel-4-ctrl:checked ~ #list-news-energy #li-for-panel-4 label.panel-label,
#panel-5-ctrl:checked ~ #list-news-energy #li-for-panel-5 label.panel-label{
	background-color:#3d9764;
	color:#fff;}
.panel-news .panel-label:hover::before,
#panel-1-ctrl:checked ~ #list-news-energy #li-for-panel-1 label.panel-label::before,
#panel-2-ctrl:checked ~ #list-news-energy #li-for-panel-2 label.panel-label::before,
#panel-3-ctrl:checked ~ #list-news-energy #li-for-panel-3 label.panel-label::before,
#panel-4-ctrl:checked ~ #list-news-energy #li-for-panel-4 label.panel-label::before,
#panel-5-ctrl:checked ~ #list-news-energy #li-for-panel-5 label.panel-label::before{
	border-color:transparent #fff #fff transparent;
	border-width:0 1px 1px 0;
	border-style:none solid solid none;
	content:'';
	display:block;
	height:6px;
	position:absolute;
	top:40%;
	right:1em;
	transform: rotate(45deg) translateY(-30%);
	width:6px;
	-webkit-transform: rotate(45deg) translateY(-30%);
	}

.panel-news .panel-label:hover::after,
#panel-1-ctrl:checked ~ #list-news-energy #li-for-panel-1 label.panel-label::after,
#panel-2-ctrl:checked ~ #list-news-energy #li-for-panel-2 label.panel-label::after,
#panel-3-ctrl:checked ~ #list-news-energy #li-for-panel-3 label.panel-label::after,
#panel-4-ctrl:checked ~ #list-news-energy #li-for-panel-4 label.panel-label::after,
#panel-5-ctrl:checked ~ #list-news-energy #li-for-panel-5 label.panel-label::after{
	border-color:transparent #fff #fff transparent;
	border-width:0 1px 1px 0;
	border-style:none solid solid none;
	content:'';
	display:block;
	height:6px;
	position:absolute;
	top:50%;
	right:1em;
	transform: rotate(45deg) translateY(-30%);
	width:6px;
	-webkit-transform: rotate(45deg) translateY(-30%);
	}

/*タブの切り替え*/
#panels-news-energy section {
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
  overflow-y: hidden;
}

#panel-1-ctrl:checked ~ #panels-news-energy #panel-1 ,
#panel-2-ctrl:checked ~ #panels-news-energy #panel-2,
#panel-3-ctrl:checked ~ #panels-news-energy #panel-3 ,
#panel-4-ctrl:checked ~ #panels-news-energy #panel-4 ,
#panel-5-ctrl:checked ~ #panels-news-energy #panel-5{
  max-height: 100%;
  opacity: 1;
  padding: 5% 0 2%;
  max-height: initial;
}

.panel-radios-news {
  display: none;
}

@media screen and (max-width:800px){
	.panel-news{border:none;}
	.panel-news li{
		border-left:#e7e9e9 solid 1px;
		border-right:#e7e9e9 solid 1px;
		border-top:#e7e9e9 solid 1px;
		width:50%;}
	.panel-news li:nth-of-type(2n){
		border-right:#e7e9e9 solid 1px;
		border-left:none;}
	.panel-news li:nth-of-type(4){
		border-bottom:#e7e9e9 solid 1px;}
	.panel-news li:last-of-type{
		border-bottom:#e7e9e9 solid 1px;
		border-right:#e7e9e9 solid 1px;}

.panel-news .panel-label::before{
	border-color:transparent #3d9764 #3d9764 transparent;
	border-width:0 1px 1px 0;
	border-style:none solid solid none;
	content:'';
	display:block;
	height:6px;
	position:absolute;
	top:40%;
	right:1em;
	transform: rotate(45deg) translateY(-30%);
	width:6px;
	-webkit-transform: rotate(45deg) translateY(-30%);
	}

.panel-news .panel-label::after{
	border-color:transparent #3d9764 #3d9764 transparent;
	border-width:0 1px 1px 0;
	border-style:none solid solid none;
	content:'';
	display:block;
	height:6px;
	position:absolute;
	top:50%;
	right:1em;
	transform: rotate(45deg) translateY(-30%);
	width:6px;
	-webkit-transform: rotate(45deg) translateY(-30%);
	}

	}