@charset "utf-8";
/*--------------
スマホ専用
PC版では非表示
----------------*/

.sp_antei {
	display: none;
}

/*--------------
タブレット専用
PC・SP版では非表示
----------------*/

.br_antei {
	display: none;
}

@media screen and (min-width:801px) and (max-width:1366px) {
	/*スライドタイトルの文字位置　個別設定*/
	.mainTTL {
		transform: scale(0.7);
		-webkit-transform: scale(0.7);
		transform-origin: top center;
		-webkit-transform-origin: top center;
	}
	#topmain01 .mainTTL {
		bottom: 0;
		left: 5%;
	}
	#topmain02 .mainTTL {
		bottom: 0;
		right: 5%;
	}
	#topmain03 .mainTTL {
		top: 5%;
	}
	#topmain04 .mainTTL {
		bottom: 0;
		top: 5%;
	}
}

@media screen and (max-width:1024px) {
	/*パンくず*/
	#breadcrumb div {
		padding: 1% 3%;
		width: 100%;
	}
	.pc-only_antei {
		display: none !important;
	}
	.sp_antei, .sp-only_antei {
		display: block !important;
	}
	.br_antei {
		display: inline;
	}
	#anteiMenu::after {
		display: block;
		content: '';
		clear: both;
	}
	/*--------------
右の追従メニュー 改
----------------*/
	#anteiMenu {
		position: relative;
		width: 100%;
	}
	#anteiMenu li, #anteiMenu li:nth-of-type(5) {
		width: 20%;
		height: 50px;
		float: left;
	}
	#anteiMenu li:nth-of-type(1) {
		display: block;
	}
	#anteiMenu li::before {
		display: none;
	}
	#anteiMenu li a>div p {
		width: 100%;
		left: 0;
		transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		-webkit-writing-mode: horizontal-tb;
	}
	#anteiMenu li:hover {
		opacity: 1;
	}
	#anteiMenu.antei_fixed {
		position: relative;
	}
	#anteiMenu li:nth-of-type(1) {
		background-color: #c8c8c8;
	}
	#anteiMenu li:nth-of-type(2) {
		background-color: #2a520e;
	}
	#anteiMenu li:nth-of-type(3) {
		background-color: #054657;
	}
	#anteiMenu li:nth-of-type(4) {
		background-color: #1c287c;
	}
	#anteiMenu li:nth-of-type(5) {
		background-color: #a31720;
	}
	/*--------------
サムネイルの共通設定
----------------*/
	.right_col ul.antei_article li {
		width: 95%;
		height: auto;
		margin: 0 auto 2em;
		float: none;
		border: none;
		overflow: visible;
	}
	.right_col .group1, .right_col .group2, .right_col .group3, .right_col .group4 {
		position: relative;
		width: 100%;
		top: inherit;
		bottom: 0;
		left: 0;
		padding: 5px 0;
		text-align: center;
		font-size: 90%;
	}
	.capimg img, .capimg>img {
		max-width: 100%;
	}
	.right_col .capimg a img, .right_col .capimg>img {
		width: auto;
	}
	.rightTTL {
		color: #333;
		top: 0;
		left: 0;
		font-size: 110%;
		position: relative;
		margin: 1em auto 1.5em;
		width: auto;
	}
	.status {
		bottom: 5%;
	}
	.status .ico_movie, .status .ico_pic, .status .ico_txt {
		height: 1.5em;
	}
	.status .ico_txt {
		bottom: 120px;
		color: #333;
		left: 0px;
	}
	.status .Rcomment strong {
		display: inline-block;
		font-size: 105%;
		padding: 0.2em;
	}
	.ico_play {
		display: block;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		z-index: 60;
		width: 20%;
	}
	.ico_play>img {
		max-width: 100%;
	}
	/* 記事ありの場合 */
	.rightTTL_area_sp .rightTTL {
		width: 85%;
		margin: 1em 0;
	}
	.rightTTL_area_sp {
		position: relative;
	}
	.rightTTL_area_sp .more_icon {
		position: absolute;
		right: 0;
		top: 5%;
	}
	/*MOREアイコン*/
	.more_icon, .more_icon span {
		display: inline-block;
		transition: all .4s;
	}
	.more_icon {
		position: relative;
		width: 24px;
		height: 24px;
		background-color: #000;
	}
	.more_icon span {
		position: absolute;
		left: 5px;
		width: 60%;
		height: 1px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-ms-border-radius: 4px;
		-moz-border-radius: 4px;
		-o-border-radius: 4px;
	}
	.more_icon span:nth-of-type(1) {
		top: 45%;
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}
	.more_icon span:nth-of-type(2) {
		top: 45%;
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}
	/*＋、－切り替え*/
	.more_icon.active {
		background-color: #888;
	}
	.more_icon.active span:nth-of-type(1) {
		display: none;
	}
	.more_icon.active span:nth-of-type(2) {
		top: 45%;
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
	}
	.antei_article .topicsbox article {
		display: none;
	}
	/*--------------
スライド設定
----------------*/
	/*スライドタイトルの文字位置　個別設定*/
	#topmain01 .mainTTL, #topmain02 .mainTTL, #topmain03 .mainTTL, #topmain04 .mainTTL {
		bottom: 0;
		right: 2%;
		left: auto;
		transform: scale(0.7, 0.7);
		-webkit-transform: scale(0.7, 0.7);
		transform-origin: right top;
		-webkit-transform-origin: right top;
	}
	#topmain03 .mainTTL {
		top: auto;
	}
	/*--------------
picup
----------------*/
	#sectionpicup {
		padding: 0 0 1em;
	}
	/*SPでは非表示*/
	#picupmap .left_col, #picupLink {
		display: none;
	}
	#picupmap .pickup_slider .hide {
		display: block;
	}
	#picupmap, #sectionpicup .right_col {
		width: 100%;
	}
	#picupmap .capimg>img {
		width: 100%;
	}
	#sectionpicup .right_col {
		position: relative;
	}
	#sectionpicup .right_col div .rightTTL {
		padding: 0;
	}
	#sectionpicup .rightTTL_area_sp .rightTTL {
		width: 85%;
	}
	#sectionpicup .sp_detail a {
		background-color: #000;
	}
	#sectionpicup .ico_play {
		width: 10%;
	}
	/*スライダーのカスタマイズ*/
	#sectionpicup .right_col .bx-wrapper {
		width: 95%;
	}
	#sectionpicup .right_col .bx-wrapper .bx-viewport {
		background: none;
		box-shadow: none;
		height: auto !important;
	}
	#sectionpicup .right_col .bx-wrapper .status img {
		display: inline-block;
	}
	#sectionpicup .right_col p#PrevIcon a {
		/*矢印（前へ）*/
		display: block;
		width: 31px;
		height: 31px;
		position: absolute;
		background: url(../images/btn_prev.svg) left center no-repeat;
		background-size: cover;
		color: #fff;
		top: 14em;
		left: 0;
		text-indent: -9999px;
	}
	#sectionpicup .right_col p#NextIcon a {
		/*矢印（次へ）*/
		display: block;
		width: 31px;
		height: 31px;
		position: absolute;
		background: url(../images/btn_next.svg) left center no-repeat;
		background-size: cover;
		color: #fff;
		top: 14em;
		right: 0;
		text-indent: -9999px;
	}
	/*--------------
サムネイルの詳細
----------------*/
	.modal {
		position: inherit;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		z-index: 100;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: 200ms ease;
		width: 100%;
		/*★*/
	}
	/*SPでは非表示*/
	.modal .topicsbox .group1, .modal .topicsbox .group2, .modal .topicsbox .group3, .modal .topicsbox .group4, .modal .topicsbox .capimg, .modal .topicsbox .status {
		display: none;
	}
	.popbox {
		z-index: 100;
		position: relative;
	}
	.popgroup1, .popgroup2, .popgroup3, .popgroup4 {
		background: none;
	}
	.popclose {
		display: none;
	}
	.morebox>dt {
		margin: 0 auto 2em;
		padding: 0.7em 0;
		width: 95%;
	}
	.sp_detail {
		width: 100%;
		margin: 2em auto 1em;
		text-align: left;
		position: relative;
	}
	.sp_detail>dt {
		position: absolute;
		right: 5px;
		top: -3.5em;
		cursor: pointer;
		width: 8%;
		background: none !important;
	}
	.sp_detail dd::before {
		color: #fff;
		content: "▲";
		font-size: 140%;
		position: absolute;
		text-align: center;
		top: -1em;
		width: 100%;
	}
	.sp_detail>dt img {
		width: 100%;
	}
	.sp_detail>dd {
		background: #fff;
		padding: 0 0 1em;
	}
	.sp_detail .commnent {
		padding: 1.5em;
		margin: 2em auto 0.5em;
		color: #333;
	}
	.sp_detail .details a {
		display: block;
		margin: auto;
		padding: 1em;
		text-align: center;
		width: 87%;
		background: url(../images/ico_arrow.png) no-repeat 96% 1em;
	}
	.sp_detail .details a:hover {
		text-decoration: none;
		opacity: 0.7 !important;
	}
	.morebox .morebtn {
		width: 100%;
		margin: 1em auto;
	}
	/*--------------
　動画サイズ調整
----------------*/
	.movie_container {
		max-width: 100%;
	}
	/*--------------
　01 電気を生み出す
　02 電気をつなぐ
　03 電気を届ける
　04 電気をコントロールする

　01～04の共通項目
----------------*/
	#section01 {
		padding: 0 2% 2em;
	}
	#section01 .sectionbox, #section02 .sectionbox, #section03 .sectionbox, #section04 .sectionbox, #section01 .left_col, #section02 .left_col, #section03 .left_col, #section04 .left_col, #section01 .right_col, #section02 .right_col, #section03 .right_col, #section04 .right_col {
		width: 100%;
	}
	.right_col .topicsbox {
		cursor: default;
	}
	#section01 h2 {
		margin: 0;
		padding: 10% 0 2%;
		text-align: center;
	}
	#section02 h2, #section03 h2, #section04 h2 {
		margin: 0;
		padding: 5% 0;
	}
	#section01 h2 img, #section02 h2 img, #section03 h2 img, #section04 h2 img {
		margin: 0 auto;
		max-width: 100%;
	}
	.sectionread {
		letter-spacing: 0;
		text-align: center;
		margin: 10px 0;
		font-weight: bold;
	}
	.mainIMG {
		display: none;
	}
	#section01 .right_col .topic02 .rightTTL, #section02 .right_col .topic02 .rightTTL, #section03 .right_col .topic02 .rightTTL, #section04 .right_col .topic02 .rightTTL, #section01 .right_col .topic03 .rightTTL, #section02 .right_col .topic03 .rightTTL, #section03 .right_col .topic03 .rightTTL, #section04 .right_col .topic03 .rightTTL, #section01 .right_col .topic04 .rightTTL, #section02 .right_col .topic04 .rightTTL, #section03 .right_col .topic04 .rightTTL, #section04 .right_col .topic04 .rightTTL {
		font-size: 100%;
		width: 86%;
	}
	#section01 .right_col ul.antei_article li.topicmain, #section02 .right_col ul.antei_article li.topicmain, #section03 .right_col ul.antei_article li.topicmain, #section04 .right_col ul.antei_article li.topicmain {
		width: 100%;
		margin-right: 0;
	}
	#section01 .right_col ul.antei_article li, #section02 .right_col ul.antei_article li, #section03 .right_col ul.antei_article li, #section04 .right_col ul.antei_article li {
		width: 49%;
		height: auto;
		margin-right: 2%;
		margin-bottom: 2em;
		float: left;
	}
	#section01 .right_col ul.antei_article li:nth-of-type(2n+1), #section02 .right_col ul.antei_article li:nth-of-type(2n+1), #section03 .right_col ul.antei_article li:nth-of-type(2n+1), #section04 .right_col ul.antei_article li:nth-of-type(2n+1) {
		margin-right: 0;
	}
	#section01 .right_col .morebox ul.antei_article li:nth-of-type(2n), #section02 .right_col .morebox ul.antei_article li:nth-of-type(2n), #section03 .right_col .morebox ul.antei_article li:nth-of-type(2n), #section04 .right_col .morebox ul.antei_article li:nth-of-type(2n) {
		margin-right: 0;
	}
	#section01 .right_col .morebox ul.antei_article li:nth-of-type(2n+1), #section02 .right_col .morebox ul.antei_article li:nth-of-type(2n+1), #section03 .right_col .morebox ul.antei_article li:nth-of-type(2n+1), #section04 .right_col .morebox ul.antei_article li:nth-of-type(2n+1) {
		margin-right: 2%;
	}
	#section01 .topicmain .capimg>img, #section02 .topicmain .capimg>img, #section03 .topicmain .capimg>img, #section04 .topicmain .capimg>img {
		width: 100%;
	}
	.col3Box {
		flex-direction: column;
	}
	.col3Box div:first-of-type {
		flex-basis: auto;
		margin-right: 0;
	}
	.col3Box div:last-of-type {
		width: 95%;
	}
	.col3Box .sectionread {
		text-align: center;
	}
	/*--------------
　01 電気を生み出す
----------------*/
	#section01 {
		background: #d1daca url(../images/section01_bg_sp.jpg) no-repeat center top / contain;
	}
	#section01 .morebox>dt {
		background: none;
		border: 1px solid #94b17e;
		color: #357800;
	}
	#section01 .sp_detail a {
		background-color: #357800;
	}
	#section01 .morebox .morebtn {
		background: none;
		border: #357800 solid 1px;
		color: #357800;
	}
	#section01 .morebtn_icon span {
		background-color: #357800;
	}
	#section01 .more_icon {
		background-color: #94b17e;
	}
	/*--------------
　02 電気をつなぐ
----------------*/
	#section02 .morebox>dt {
		background: none;
		border: 1px solid #7dafbc;
		color: #0484A1;
	}
	#section02 .sp_detail a {
		background-color: #0484A1;
	}
	#section02 .morebox .morebtn {
		background: none;
		border: #0484A1 solid 1px;
		color: #0484A1;
	}
	#section02 .morebtn_icon span {
		background-color: #0484A1;
	}
	#section02 .more_icon {
		background-color: #7eafbd;
	}
	/*--------------
　03 電気を届ける
----------------*/
	#section03 .morebox>dt {
		background: none;
		border: 1px solid #949ec3;
		color: #1D31B8;
	}
	#section03 .sp_detail a {
		background-color: #1D31B8;
	}
	#section03 .morebox .morebtn {
		background: none;
		border: #1D31B8 solid 1px;
		color: #1D31B8;
	}
	#section03 .morebtn_icon span {
		background-color: #1D31B8;
	}
	#section03 .more_icon {
		background-color: #949ec3;
	}
	/*--------------
　04 電気をコントロールする
----------------*/
	#section04 .morebox>dt {
		background: none;
		border: 1px solid #d39da4;
		color: #FF151E;
	}
	#section04 .sp_detail a {
		background-color: #FF151E;
	}
	#section04 .morebox .morebtn {
		background: none;
		border: #FF151E solid 1px;
		color: #FF151E;
	}
	#section04 .morebtn_icon span {
		background-color: #FF151E;
	}
	#section04 .more_icon {
		background-color: #d29da3;
	}
}

@media screen and (max-width:480px) {
	.br_antei {
		display: none;
	}
	#wrapper {
		min-width: 100% !important;
	}
	.right_col, .left_col {
		float: none;
	}
	/*パンくず*/
	#breadcrumb div {
		padding: 3%;
	}
	/*--------------
右の追従メニュー 改
----------------*/
	#anteiMenu li, #anteiMenu li:nth-of-type(5) {
		width: 100%;
	}
	#anteiMenu li a>div p {
		font-size: 1.2em;
	}
	/*--------------
サムネイルの共通設定
----------------*/
	#section01 .right_col ul.antei_article li, #section02 .right_col ul.antei_article li, #section03 .right_col ul.antei_article li, #section04 .right_col ul.antei_article li, #section01 .right_col ul.antei_article li.topicmain, #section02 .right_col ul.antei_article li.topicmain, #section03 .right_col ul.antei_article li.topicmain, #section04 .right_col ul.antei_article li.topicmain {
		width: 95%;
		height: auto;
		margin: 0 auto 2em;
		float: none;
	}
	#section01 .right_col ul.antei_article li:nth-of-type(2n), #section02 .right_col ul.antei_article li:nth-of-type(2n), #section03 .right_col ul.antei_article li:nth-of-type(2n), #section04 .right_col ul.antei_article li:nth-of-type(2n), #section01 .right_col ul.antei_article li:nth-of-type(2n+1), #section02 .right_col ul.antei_article li:nth-of-type(2n+1), #section03 .right_col ul.antei_article li:nth-of-type(2n+1), #section04 .right_col ul.antei_article li:nth-of-type(2n+1), #section01 .right_col .morebox ul.antei_article li:nth-of-type(2n), #section02 .right_col .morebox ul.antei_article li:nth-of-type(2n), #section03 .right_col .morebox ul.antei_article li:nth-of-type(2n), #section04 .right_col .morebox ul.antei_article li:nth-of-type(2n), #section01 .right_col .morebox ul.antei_article li:nth-of-type(2n+1), #section02 .right_col .morebox ul.antei_article li:nth-of-type(2n+1), #section03 .right_col .morebox ul.antei_article li:nth-of-type(2n+1), #section04 .right_col .morebox ul.antei_article li:nth-of-type(2n+1) {
		margin-right: auto;
	}
	.morebox .morebtn {
		width: 95%;
	}
	/*--------------
スライド設定
----------------*/
	#main_catch img {
		width: 100%;
	}
	#sp_antei h1 {
		width: 90%;
	}
	/*--------------
picup
----------------*/
	#sectionpicup h2 img {
		width: 72%;
	}
	#sectionpicup .right_col p#PrevIcon a, #sectionpicup .right_col p#NextIcon a {
		top: 6.5em;
	}
	#sectionpicup .ico_play {
		width: 20%;
	}
	/*--------------
　01 電気を生み出す
　02 電気をつなぐ
　03 電気を届ける
　04 電気をコントロールする

　01～04の共通項目
----------------*/
	#section01 {
		padding: 0 0 2em;
	}
	#section01 h2 img, #section02 h2 img, #section03 h2 img, #section04 h2 img {
		width: 65%;
	}
	.logo_hd_tso {
		max-width: 200px;
		padding: 5px 15px;
	}
	#section02 {
		background: #cacfe2 url(../images/section02_bg_sp.jpg) no-repeat center top / cover;
	}
	#section03 {
		background: #cacfe2 url(../images/section03_bg_sp.jpg) no-repeat center top / cover;
	}
	#section04 {
		background: #cacfe2 url(../images/section04_bg_sp.jpg) no-repeat center top / cover;
	}
}

.note-style1 {
	display: block;
	font-weight: normal;
	font-size: 96%;
	position: relative;
	color: #333333;
	z-index: 20;
	text-align: left;
	margin-top: -1em;
}

.note-style2 {
	font-size: 96%;
	display: block;
	text-align: left;
	font-weight: normal;
	margin-top: -1.5em;
}

.note-style3 {
	font-weight: normal;
	font-size: 96%;
	color: #ffffff;
	position: absolute;
	bottom: 0;
}

@media screen and (max-width:1024px) {
	.movie-modal-open li.selected-movie .capimg:nth-of-type(1) {
		display: none;
	}
	.movie-modal-open li.topicsbox:not(.selected-movie) .capimg.movie-frame {
		display: none;
	}
}

@media screen and (min-width:1025px) {
	.note-style1 {
		margin-top: 0px;
/*		position: absolute;
		bottom: 5px;
		color: #ffffff;
		left: 15px;
		z-index: 20;
		margin-top: auto;*/
	}
	.note-style2 {
		display: none;
	}
	.note-style3 {
		font-weight: normal;
		font-size: 96%;
		color: #ffffff;
		position: absolute;
		bottom: 0;
	}
	.cta-modal-open {
		max-height: 100vh;
		overflow: hidden;
	}
	.cta-modal-open header#main_header {
		display: none;
	}
	.modal.show {
		max-height: 100vh;
		overflow-y: auto;
		z-index: 1099;
	}
	.cta-modal-open li.topicsbox:not(.selected-modal-item) {
		display: none;
	}
}