@charset "UTF-8";

/* =========================================================
 冬の節電チャレンジキャンペーン
========================================================= */

.zen {
	font-family: 'Zen Maru Gothic', sans-serif;
}

#energy_saving {
	background: url(../images/bg_loop.gif) repeat center top;
}
#energy_saving > h1 {
	height: 0;
	overflow: hidden;
}
#energy_saving #types img {
	width: 100%;
}
#energy_saving #teiatsu {
	background: #ff9d46;
}
#energy_saving #kouatsu {
	background: #46aac8;
}
#energy_saving #types > li > div {
	border-left: solid #fff;
	border-right: solid #fff;
}
#energy_saving #types > li > div img {
	margin-left: auto;
	margin-right: auto;
}
#energy_saving #types .btn {
	margin-top: 10%;
}
#energy_saving #types > li > p {
	font-weight: 500;
	text-align: center;
	font-family: 'Zen Maru Gothic', sans-serif;
}
@media screen and (min-width: 668px) {
	.sp { display: none !important; }
	#energy_saving {
		min-width: 1200px;
		padding-top: 150px;
		background-size: 97px auto;
	}
	#energy_saving > h1 {
		padding-top: 327px;
		background: url(../images/mainvis_img.png) no-repeat center center, url(../images/mainvis_bg.jpg) no-repeat center center;
		background-size: auto 100%, cover;
	}

	#energy_saving #types {
		display: flex;
	}
	#energy_saving #types > li {
		width: 50%;
		padding: 5% 6.87%;
		box-sizing: border-box;
	}
	#energy_saving #types > li > div {
		max-width: 576px;
		border-width: 4px;
		margin: 0 auto;
	}
	#energy_saving #types > li > div .text {
		padding-top: 1px;
	}
	#energy_saving #types > li > div .text img {
		width: 100%;
		margin-top: 0;
	}
	#energy_saving #types > li > div .btn img {
		width: 66.66%;
	}
	#energy_saving #types > li > p {
		font-size: 16px;
		margin-top: 10px;
	}
}
@media screen and (max-width: 667px) {
	.pc { display: none !important; }
	#energy_saving {
		padding-top: 18vw;
		background-size: 67px auto;
	}
	#energy_saving > h1 {
		padding-top: 46.875%;
		background: url(../images/mainvis_sp.jpg) no-repeat center center;
		background-size: cover;
	}

	#energy_saving #types > li {
		padding: 11vw 7.8125vw 10vw;
	}
	#energy_saving #types > li > div {
		border-width: 2px;
		padding-bottom: 1px;
	}
	#energy_saving #types > li > div .text {
		padding-top: 1px;
	}
	#energy_saving #types > li > div .text img {
		width: 100%;
		margin-top: 0;
	}
	#energy_saving #types .btn {
		margin: 11% 0 -2%;
	}
	#energy_saving #types > li > div .btn img {
		width: 68%;
	}
	#energy_saving #types > li > p {
		font-size: 8px;
		margin-top: 9%;
	}
}
/* パソコンで見たときは"koatsu_pc"のclassがついた画像が表示される */
.koatsu_pc { display: block !important; }
.koatsu_sp { display: none !important; }
 
/* スマートフォンで見たときは"koatsu_sp"のclassがついた画像が表示される */
@media only screen and (max-width: 670px) {
	.koatsu_pc { display: none !important; }
	.koatsu_sp { display: block !important; }
}

#main_text {
	color: #46aac8;
	font-weight: bold;
	text-align: center;
}
@media screen and (min-width: 668px){
	#main_text > p {
		font-size: 24px;
		line-height: 2.327;
		margin: 45px 0;
	}
	#main_text .link p {
		font-size: 34px;
		line-height: 68px;
	}
	#main_text .link ul {
		display: flex;
		margin-top: 25px;
    margin-bottom: 72px;
		justify-content: center;
	}
	#main_text .link li {
		width: 380px;
		margin: 0 20px 0 5px;
	}

}
@media screen and (max-width: 667px){
	#main_text > p {
		font-size: 12px;
		line-height: 1.833;
		margin: 30px 0 24px;
	}
	#main_text .link p {
		font-size: 13.5px;
		line-height: 23px;
	}
  #main_text .link ul{
    padding-bottom: 37px;
  }
	#main_text .link li {
		max-width: 220px;
		margin: 13px auto 0;
	}
}

.banner_2023winter {
	text-align: center;
}
.banner_2023winter img {
	width: 100%;
	max-width: 704px;
	margin: 0 auto;
}
.modal_2023winter {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.2);
}
.modal_2023winter a {
	display: block;
	background: #fff;
	max-width: 100%;
	padding: 25px;
}
.modal_2023winter a img {
	width: 880px;
	max-width: 100%;
}
@media screen and (max-width: 667px){
	.banner_2023winter {
		padding: 0 10px;
	}
	.modal_2023winter {
		padding: 10px;
	}
	.modal_2023winter a {
		padding: 6px;
	}
}