@charset "utf-8";

/* ----------------------------------------------------------------------------
	STORY3
	story3/index.html
---------------------------------------------------------------------------- */

/* --------------------
	main
--------------------*/
#main_area{
}
#main_area .inner{
	width: 100%;
	box-sizing: border-box;
	padding: 40px 0 65px 0;
}
#main_area .ttl_area{
	width: 851px;
	margin: 0 auto;
	padding: 0 0 30px 0;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}
#main_area .ttl_area i{
	width: 87px;
	display: inherit;
}
#main_area .ttl_area h2{
	width: auto;
	font-size: 2.3rem;
	font-weight: bold;
	letter-spacing: 0.15em;
	color: #0088cf;
	text-align: left;
	padding: 0 0 0 0;
	margin: 0 0 0 0.6em;
	position: relative;
	z-index: 3;
}
#main_area .ttl_area h2::before{
	content: "";
	width: 100%;
	height: 0.5em;
	background: #ffff7e;
	position: absolute;
	bottom: -8px;
	left: calc(50% - 50%);
	z-index: -1;
	display: inline;
}


#main_area figure{
	width: 851px;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}

@media only screen and (max-width: 940px) {	
	#main_area .inner{
		padding: 40px 0 65px 0;
	}
	#main_area .ttl_area{
		width: 90%;
		padding: 0 0 30px 0;
	}
	#main_area .ttl_area i{
		width: 87px;
	}
	#main_area .ttl_area h2{
		font-size: 2.375rem;
		letter-spacing: 0.15em;
	}

	#main_area figure{
		width: 90%;
	}
}
@media only screen and (max-width: 768px) {
	#main_area .inner{
		padding: 30px 0 45px 0;
		background:none;
	}
	#main_area .ttl_area{
		width: 90%;
		padding: 0 0 25px 0;
	}
	#main_area .ttl_area i{
		width: 10%;
	}
	#main_area .ttl_area h2{
		font-size: 4vw;
		letter-spacing: 0.15em;
	}

	#main_area figure{
		width: 90%;
	}
}
@media only screen and (max-width: 480px) {
	#main_area .inner{
		padding: 30px 0 45px 0;
	}
	#main_area .ttl_area{
		width: 100%;
		padding: 0 0 25px 0;
	}
	#main_area .ttl_area i{
		width: 10%;
	}
	#main_area .ttl_area h2{
		font-size: 4vw;
		letter-spacing: 0.10em;
	}

	#main_area figure{
		width: 100%;
	}
}


/* --------------------
	content_body
--------------------*/
#content_body{
	width: 100%;
	padding: 65px 0 0 0;
	position: relative;
}

#content_body h2.copyimg{
	width: 890px;
	padding: 0 0 40px 0;
	margin: 0 auto;
}

#content_body .unit{
	width: 100%;
	padding: 35px 45px 35px;
	box-sizing: border-box;
	margin: 0 auto 40px auto;
	box-shadow: 0 10px 0 rgba(0,0,0,0.15);
	border: #000000 3px solid;
	border-radius: 38px;
	background: #FFF;
	position: relative;
}
#content_body .unit .ttl_area{
	width: 100%;
	margin: 0 auto;
	padding: 0 0 15px 90px;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	background: url("/library/2025/images/sustainability/environment/line_dotted.png") bottom center/9px auto repeat-x;
}
#content_body .unit .ttl_area i{
	width: 60px;
	position: absolute;
	top: -19px;
	left: 4px;
	display: inherit;
}
#content_body .unit .ttl_area h3{
	width: auto;
	font-size: 1.5rem;
	line-height: 1.4;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #0088cf;
	text-align: left;
	position: relative;
	z-index: 3;
}
#content_body .unit .ttl_area h3 ruby{
	font-weight: bold;
}

#content_body .unit .clm_area{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 30px 0 0 0;
}
#content_body .unit .clm_area .txt_clm{
	width: 46.25%;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.9;
	text-align: left;
}
#content_body .unit .clm_area .txt_clm.w100{
	width: 100% !important;
}
#content_body .unit .clm_area .txt_clm ruby{
	font-weight: 600;
}
#content_body .unit .clm_area .txt_clm span{
	color: #0088cf;
	font-weight: 600;
}
#content_body .unit .clm_area .img2clm{
	width: 90%;
	margin: 20px auto 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#content_body .unit .clm_area .img2clm .imgunit{
	width: 48%;
	margin: 15px 0 0 0;
}
#content_body .unit .clm_area .img2clm .imgunit h4{
	border-radius: 15px;
	padding: 7px 0;
	margin: 0 0 10px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#content_body .unit .clm_area .img2clm .imgunit h4.old{
	background: #0088cf;
}
#content_body .unit .clm_area .img2clm .imgunit h4.old img{
	width: 30px;
}
#content_body .unit .clm_area .img2clm .imgunit h4.now{
	background: #df3400;
}
#content_body .unit .clm_area .img2clm .imgunit h4.now img{
	width: 30px;
}
#content_body .unit .clm_area .img2clm .imgunit p{
	font-size: 1.250rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: left;
}
#content_body .unit .clm_area .img2clm .imgunit p small{
	font-size: 0.888em;
	font-weight: 600;
}

#content_body .think{
	width: 100%;
	margin: 0 auto;
	padding: 70px 0 70px 0;
	position: relative;
	text-align: center;
}
#content_body .think h3{
	width: 570px;
	margin: 0 auto;
	text-align: center;
	font-size: 2.125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.6;
	display: block;
}
#content_body .think h3 span{
	display: block;
	font-weight: bold;
	padding: 0 0 5px 0;
	background: url("/library/2025/images/sustainability/environment/line_dotted.png") bottom left/9px auto repeat-x;
}

#content_body .think h3 strong{
	background: #ffff7e;
}
#content_body .think figure.img1{
	width: 341px;
	position: absolute;
	top: 0;
	left: 0;
}

#content_body #hint{
	width: 100%;
	margin: 0 auto;
	padding: 35px 0 50px 0;
	position: relative;
	text-align: center;
	background: #3f9ccd url("/library/2025/images/sustainability/environment/story2/kazari_earth.png") center left calc(50% + 50%)/764px auto no-repeat;
	z-index: 2;
}
#content_body #hint::before{
	content: "";
	width: 84px;
	height: 27px;
	position: absolute;
	top: 0;
	left: calc(50% - 42px);
	z-index: 5;
	background: url("/library/2025/images/sustainability/environment/arrow_w.svg") top center/100% auto no-repeat;
}
#content_body #hint::after{
	content: "";
	width: 84px;
	height: 27px;
	position: absolute;
	bottom: -27px;
	left: calc(50% - 42px);
	z-index: 5;
	background: url("/library/2025/images/sustainability/environment/arrow_b.svg") top center/100% auto no-repeat;
}
#content_body #hint i{
	width: 180px;
	margin: 0 auto;
	padding: 0 30px 0 0;
	display: inherit;
}
#content_body #hint i.arrow{
	width: 93px;
	margin: 0 auto;
	padding: 0 0 0 0;
}
#content_body #hint h4{
	width: 100%;
	margin: 0 auto;
	padding: 20px 0 0 0;
	text-align: center;
	color: #FFFFFF;
	font-size: 1.437rem;
	line-height: 1.6;
	font-weight: 600;
	letter-spacing: 0.1em;
}




#content_body #hint_under{
	width: 100%;
	margin: 0 auto;
	padding: 40px 0 95px 0;
	position: relative;
	text-align: center;
	z-index: 1;
}

#content_body #hint_under .re-energy_area{
	width: 100%;
	margin: 40px 0 90px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#content_body #hint_under .re-energy_area h3{
	width: 100%;
	margin: 0 auto;
	padding: 40px 0 40px 0;
	text-align: center;
	color: #000000;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.6;
}
#content_body #hint_under .re-energy_area h3 span{
	color: #0088cf;
	font-weight: 600;
}

#content_body #hint_under .re-energy_area h5{
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	width: 100%;
	padding: 10px 25px 10px;
	margin: 0 0 40px 0;
	background: #fdfddc;
	box-shadow: 0 10px 0 rgba(0,0,0,1.0);
	border-radius: 10px;
	border: rgba(0,0,0,1.0) 3px solid;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	box-sizing: border-box;
}
#content_body #hint_under .re-energy_area h5 span{
	color: #0088cf;
	border-bottom: #0088cf 2px solid;
	font-weight: 600;
}

#content_body #hint_under .re-energy_area h5 small{
	font-size: 0.833em;
	font-weight: 700;
}

#content_body #hint_under .re-energy_area #eng_unit{
	width: 100%;
	padding: 40px 0 0 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#content_body #hint_under .re-energy_area #eng_unit .box{
	width: 170px;
	padding: 0 0 0 0;
}
#content_body #hint_under .re-energy_area #eng_unit .box figure{
	width: 100%;
	padding: 0 0 15px 0;
}
#content_body #hint_under .re-energy_area #eng_unit .box h6{
	width: 100%;
	padding: 0 0 12px 0;
}
#content_body #hint_under .re-energy_area #eng_unit .box p{
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(0,0,0,1.00);
}

#content_body #hint_under .unit{
	width: 100%;
	padding: 0 0 0;
	box-sizing: border-box;
	margin: 0 auto 40px auto;
	border: #0088cf 3px solid;
	box-shadow: none;
	border-radius: 38px;
	background: #FFF;
	position: relative;
	overflow: hidden;
}
#content_body #hint_under .unit ul.clm_area{
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 40px 50px;
}
#content_body #hint_under .unit ul.clm_area li{
	width: 49%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}
#content_body #hint_under .unit ul.clm_area li h4{
	width: 257px;
	padding: 0 0 25px 0;
	margin: 0 auto;
}
#content_body #hint_under .unit ul.clm_area li p{
	font-size: 1.5rem;
	line-height: 1.6;
	font-weight: 600;
	text-align: center;
	padding: 0 0 25px 0;
}
#content_body #hint_under .unit ul.clm_area li p span{
	position: relative;
	z-index: 3;
	font-weight: 700;
}
#content_body #hint_under .unit ul.clm_area li.u1 p span{
	color: #c69c6d;
}
#content_body #hint_under .unit ul.clm_area li.u2 p span{
	color: #3f9ccd;
}
#content_body #hint_under .unit ul.clm_area li p span::before{
	content: "";
	width: 100%;
	height: 0.5em;
	background: #ffff7e;
	position: absolute;
	bottom: -2px;
	left: calc(50% - 50%);
	z-index: -1;
	display: inline;
}
#content_body #hint_under .unit ul.clm_area li p small{
	font-size: 0.833em;
	font-weight: 600;
}
#content_body #hint_under .unit ul.clm_area li figure{
	width: 369px;
	position: relative;
	margin: auto auto 0 auto;
	line-height: 0;
}
#content_body #hint_under .unit ul.clm_area li.u2 figure{
	width: 405px;
}

#content_body .copy_area{
	width: 100%;
	margin: 0 auto;
	padding: 50px 0 70px 0;
	position: relative;
	text-align: center;
}
#content_body .copy_area h4{
	width: 610px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.562rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.6;
	display: block;
}
#content_body .copy_area h4 span{
	display: block;
	font-weight: bold;
	padding: 0 0 5px 0;
	background: url("/library/2025/images/sustainability/environment/line_dotted.png") bottom left/9px auto repeat-x;
}
#content_body .copy_area h4 strong{
	background: #ffff7e;
}
#content_body .copy_area figure{
	width: 179px;
	position: absolute;
	top: 20px;
	left: 0;
}

#content_body .think.sec{
	padding: 40px 0 5px 0;
}
#content_body .think.sec.tikyuu{
	padding: 20px 0 0 0;
}
#content_body .think.sec h3{
	font-size: 1.75rem;
	width: 600px;
	margin: 0 auto;
}
#content_body .think.sec h3.fist{
	background: url("/library/2025/images/sustainability/environment/line_dotted.png") bottom left/9px auto repeat-x;
}
#content_body .think.sec figure{
	width: 180px;
	position: absolute;
	top: 0;
	left: 0;
}
#content_body .think.sec figure.img2{
	width: 181px;
	position: absolute;
	top: 0;
	left: 0;
}
#content_body .think.sec figure.img1{
	width: 341px;
	position: absolute;
	top: 0;
	left: 0;
}
#content_body .think.sec figure.naruhodo{
	width: 343px;
	position: absolute;
	top: 0;
	left: 0;
}
#content_body .think.sec.tikyuu h3{
	color: #0088cf;
}
#content_body .think.sec.tikyuu figure{
	width: 148px;
	position: absolute;
	top: 30px;
	left: auto;
	right: 0;
}
#content_body .think.sec.tikyuu figure.img3{
	width: 231px;
	position: absolute;
	top: -110px;
	left: auto;
	right: -75px;
}


#content_body .think.end{
	padding: 185px 0 5px 0;
}
#content_body .think.end h3{
	font-size: 1.75rem;
	width: 780px;
	margin: 0 auto;
}
#content_body .think.end figure.naruhodo{
	width: 343px;
	position: absolute;
	top: 110px;
	left: -105px;
}
#content_body .think.end h3 span:last-child{
	background: none;
}


#content_body #hint_under_next{
	width: 100%;
	margin: 0 auto;
	padding: 40px 0 95px 0;
	position: relative;
	text-align: center;
	z-index: 0;
}
#content_body #hint_under_next .unit{
	width: 100%;
	padding: 0 0 0;
	box-sizing: border-box;
	margin: 55px auto 40px auto;
	border: #0088cf 3px solid;
	box-shadow: none;
	border-radius: 38px;
	background: #FFF;
	position: relative;
	overflow: hidden;
}
#content_body #hint_under_next .unit .ttl_area{
	width: 100%;
	margin: 0 auto;
	padding: 15px 0 15px 0;
	box-sizing: border-box;
	position: relative;
	background: #0088cf;
}
#content_body #hint_under_next .unit .ttl_area h3{
	width: 100%;
	font-size: 1.500rem;
	line-height: 1.6;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #ffff7e;
	text-align: center;
	position: relative;
	z-index: 3;
}

#content_body #hint_under_next .unit h5{
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	width: 100%;
	padding: 10px 25px 10px;
	margin: 0 0 40px 0;
	background: #fdfddc;
	box-shadow: 0 10px 0 rgba(0,0,0,1.0);
	border-radius: 10px;
	border: rgba(0,0,0,1.0) 3px solid;
	display: block;
	box-sizing: border-box;
}
#content_body #hint_under_next .unit h5 span{
	color: #0088cf;
	font-weight: 600;
}
#content_body #hint_under_next .unit .clm_area{
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 40px 55px;
}
#content_body #hint_under_next .unit .clm_area a.btn{
	width: 604px;
	margin: 40px auto 50px auto;
}
#content_body #hint_under_next .unit .clm_area .kokuban{
	width: 800px;
	margin: 0 auto 0 auto;
	padding: 0 0 60px 0;
	position: relative;
}
#content_body #hint_under_next .unit .clm_area .kokuban figure.img1{
	position: absolute;
	bottom: -20px;
	left: -15px;
	width: 161px;
}
#content_body #hint_under_next .unit .clm_area .kokuban figure.img2{
	position: absolute;
	bottom: 0px;
	right: -60px;
	width: 162px;
}

#cboxClose {
  top: 90px !important;
}

@media only screen and (max-width: 940px) {	
	#content_body{
		padding: 65px 0 0 0;
	}
	

	#content_body h2.copyimg{
		width: 94.68085106382979%;
		padding: 0 0 40px 0;
	}
	#content_body .unit{
		padding: 35px 45px 35px;
		margin: 0 auto 40px auto;
	}
	#content_body .unit .ttl_area{
		padding: 0 0 15px 90px;
	}
	#content_body .unit .ttl_area i{
		width: 60px;
		position: absolute;
		top: -19px;
		left: 4px;
		display: inherit;
	}
	#content_body .unit .ttl_area h3{
		width: auto;
		font-size: 1.500rem;
	}
	#content_body .unit .ttl_area h3 br{
		display: none;
	}

	#content_body .unit .clm_area{
		padding: 30px 0 0 0;
	}
	#content_body .unit .clm_area .txt_clm{
		width: 46.25%;
		font-size: 1.125rem;
	}
	#content_body .unit .clm_area .img2clm{
		width: 90%;
		margin: 20px auto 0 auto;
	}
	#content_body .unit .clm_area .img2clm .imgunit{
		width: 48%;
		margin: 15px 0 0 0;
	}
	#content_body .unit .clm_area .img2clm .imgunit h4.old img{
		width: 30px;
	}
	#content_body .unit .clm_area .img2clm .imgunit h4.now img{
		width: 30px;
	}
	#content_body .unit .clm_area .img2clm .imgunit p{
		font-size: 1.125rem;
	}
	
	#content_body .think{
		padding: 40px 0 60px 0;
	}
	#content_body .think h3{
		width: 100%;
		font-size: 1.75rem;
		padding: 50px 0 0 0;
	}
	#content_body .think h3 span{
		padding: 0 0 5px 0;
	}

	#content_body .think figure.img1{
		width: 34.8936170212766%;
		position: absolute;
		top: 0;
		left: 0;
	}
	

	#content_body #hint{
		padding: 35px 0 50px 0;
		background: #3f9ccd url("/library/2025/images/sustainability/environment/story1/kazari_earth.png") center left calc(50% + 45%)/394px auto no-repeat;
	}
	#content_body #hint::before{
		width: 84px;
		height: 27px;
		left: calc(50% - 42px);
	}
	#content_body #hint::after{
		width: 84px;
		height: 27px;
		bottom: -27px;
		left: calc(50% - 42px);
	}
	#content_body #hint i{
		width: 180px;
		padding: 0 30px 0 0;
		display: inherit;
	}
	#content_body #hint i.arrow{
		width: 93px;
	}
	#content_body #hint h4{
		padding: 20px 0 0 0;
		font-size: 1.3rem;
	}
	
	
	#content_body #hint_under{
		padding: 30px 0 85px 0;
	}
	#content_body #hint_under .re-energy_area{
		margin: 30px 0 70px 0;
	}
	#content_body #hint_under .re-energy_area h3{
		padding: 40px 0 40px 0;
		font-size: 1.500rem;
	}
	#content_body #hint_under .re-energy_area h5{
			font-size: 1.125rem;
			width: 100%;
			padding: 20px 25px 15px;
			margin: 0 0 40px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit{
		padding: 40px 0 0 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box{
		width: 18%;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box figure{
		padding: 0 0 15px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box h6{
		padding: 0 0 12px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box p{
		font-size: 0.938rem;
	}
	#content_body #hint_under .unit{
		margin: 0 auto 30px auto;
	}
	#content_body #hint_under .unit ul.clm_area{
		padding: 30px 40px;
	}
	#content_body #hint_under .unit ul.clm_area li{
		width: 49%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		flex-direction: column;
	}
	#content_body #hint_under .unit ul.clm_area li h4{
		width: 63%;
		padding: 0 0 20px 0;
	}
	#content_body #hint_under .unit ul.clm_area li p{
		font-size: 1.3rem;
		padding: 0 0 20px 0;
	}
	#content_body #hint_under .unit ul.clm_area li figure{
		width: 90.44117647058824%;
	}
	#content_body #hint_under .unit ul.clm_area li.u2 figure{
		width: 99.26470588235294%;
	}


	#content_body .copy_area{
		padding: 50px 0 70px 0;
	}
	#content_body .copy_area h4{
		width: 100%;
		font-size: 1.3rem;
	}
	#content_body .copy_area figure{
		width: 14.68085106382979%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#content_body .think.sec{
		padding: 70px 0 0 0;
	}
	#content_body .think.sec.tikyuu{
		padding: 20px 0 0 0;
	}
	#content_body .think.sec h3{
		font-size: 1.25rem;
		width: 100%;
		margin: 0 auto;
	}
	
	#content_body .think.sec figure{
		width: 19.14893617021277%;
		top: 42%;
	}
	#content_body .think.sec figure.img2{
		width: 19.25531914893617%;
		top: 40%;
	}
	#content_body .think.sec figure.img1{
		width: 36.27659574468085%;
	}
	#content_body .think.sec figure.naruhodo{
		width: 36.48936170212766%;
	}
	#content_body .think.sec.tikyuu figure{
		width: 15.74468085106383%;
		top: 60px;
	}
	#content_body .think.sec.tikyuu figure.img3{
		width: 24.57446808510638%;
		position: absolute;
		top: -26%;
		left: auto;
		right: -3.12766%;
	}


	#content_body .think.end{
		padding: 185px 0 5px 0;
	}
	#content_body .think.end h3{
		font-size: 1.25rem;
		width: 100%;
		margin: 0 auto;
	}
	#content_body .think.end figure.naruhodo{
		width: 36.48936170212766%;
		top: 17%;
    	left: -3%;
	}
	
	
	#content_body #hint_under_next{
		padding: 30px 0 85px 0;
	}
	#content_body #hint_under_next .unit{
		margin: 45px auto 30px auto;
		border-radius: 38px;
	}
	#content_body #hint_under_next .unit .ttl_area{
		padding: 15px 0 15px 0;
	}
	#content_body #hint_under_next .unit .ttl_area h3{
		font-size: 1.3rem;
	}

	#content_body #hint_under_next .unit h5{
		font-size: 1.2rem;
		padding: 10px 25px 10px;
		margin: 0 0 40px 0;
	}
	#content_body #hint_under_next .unit .clm_area{
		padding: 35px 40px;
	}
	#content_body #hint_under_next .unit .clm_area a.btn{
		width: 64.25531914893617%;
		margin: 40px auto 50px auto;
	}
	#content_body #hint_under_next .unit .clm_area .kokuban{
		width: 85.1063829787234%;
		padding: 0 0 70px 0;
	}
	#content_body #hint_under_next .unit .clm_area .kokuban figure.img1{
		position: absolute;
		bottom: 0%;
    	left: -9%;
		width: 17.12765957446809%;
	}
	#content_body #hint_under_next .unit .clm_area .kokuban figure.img2{
		position: absolute;
		bottom: 0px;
		right: -11%;
		width: 17.23404255319149%;
	}
}
@media only screen and (max-width: 768px) {
	#content_body{
		padding: 65px 0 0 0;
	}
	
	#content_body figure.co2kun1{
		width: 18.617021%;
		top: 0px;
		left: -2%;
	}
	#content_body figure.co2kun2{
		width: 13.361702%;
		top: 6%;
		right: 6%;
	}

	#content_body h2.copyimg{
		width: 67.34042553191489%;
		padding: 0 0 50px 0;
	}
	#content_body .unit{
		padding: 50px 35px 25px;
		margin: 0 auto 60px auto;
	}
	#content_body .unit .ttl_area{
		padding: 0 0 15px 0;
	}
	#content_body .unit .ttl_area i{
		width: 54px;
		position: absolute;
		top: -84px;
		left: calc(50% - 27px);
		display: inherit;
	}
	#content_body .unit .ttl_area h3{
		width: auto;
		font-size: 1.3rem;
		text-align: center;
	}
	#content_body .unit .ttl_area h3 br{
		display: none;
	}

	#content_body .unit .clm_area{
		padding: 30px 0 0 0;
	}
	#content_body .unit .clm_area .txt_clm{
		width: 100%;
		font-size: 1.000rem;
	}
	#content_body .unit .clm_area .img2clm{
		width: 90%;
		margin: 20px auto 0 auto;
	}
	#content_body .unit .clm_area .img2clm .imgunit{
		width: 48%;
		margin: 15px 0 0 0;
	}
	#content_body .unit .clm_area .img2clm .imgunit h4.old img{
		width: 30px;
	}
	#content_body .unit .clm_area .img2clm .imgunit h4.now img{
		width: 30px;
	}
	#content_body .unit .clm_area .img2clm .imgunit p{
		font-size: 1.125rem;
	}
	#content_body .think{
		padding: 30px 0 40px 0;
	}
	#content_body .think h3{
		font-size: 1.25rem;
		padding: 0 0 0 0;
	}
	#content_body .think h3 span{
		padding: 0 0 5px 0;
	}

	#content_body .think figure.img1{
		width: calc(34.8936170212766% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
	}
	

	#content_body #hint{
		padding: 35px 0 50px 0;
		background: #3f9ccd url("/library/2025/images/sustainability/environment/story2/kazari_earth.png") top 2% right -5%/auto 25% no-repeat;
	}
	#content_body #hint::before{
		width: 84px;
		height: 27px;
		left: calc(50% - 42px);
	}
	#content_body #hint::after{
		width: 84px;
		height: 27px;
		bottom: -27px;
		left: calc(50% - 42px);
	}
	#content_body #hint i{
		width: 180px;
		padding: 0 30px 0 0;
		display: inherit;
	}
	#content_body #hint i.arrow{
		width: 93px;
	}
	#content_body #hint h4{
		padding: 20px 0 0 0;
		font-size: 1.250rem;
		line-height: 1.4;
		letter-spacing: -0.051em;
	}

	#content_body #hint_under{
		padding: 30px 0 85px 0;
	}
	
	#content_body #hint_under .re-energy_area{
		margin: 30px 0 70px 0;
	}
	#content_body #hint_under .re-energy_area h3{
		padding: 40px 0 40px 0;
		font-size: 1.3rem;
	}
	#content_body #hint_under .re-energy_area h5{
		width: 80%;
		padding: 20px 20px 15px;
		margin: 0 auto 40px auto;
		font-size: 1.125rem;
	}
	#content_body #hint_under .re-energy_area #eng_unit{
		width: 80%;
		margin: 0 auto;
		padding: 40px 0 0 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box{
		width: 45%;
		margin: 0 0 30px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box:last-child{
		margin: 0 auto 0 auto;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box figure{
		padding: 0 0 15px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box h6{
		padding: 0 0 12px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box p{
		font-size: 0.938rem;
	}
	
	#content_body #hint_under .unit{
		margin: 0 auto 30px auto;
	}
	#content_body #hint_under .unit ul.clm_area{
		padding: 25px 35px;
	}
	#content_body #hint_under .unit ul.clm_area li{
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		flex-direction: column;
		padding: 0 0 30px 0;
	}
	#content_body #hint_under .unit ul.clm_area li h4{
		width: 63%;
		padding: 0 0 20px 0;
	}
	#content_body #hint_under .unit ul.clm_area li p{
		font-size: 1.3rem;
		padding: 0 0 20px 0;
	}
	#content_body #hint_under .unit ul.clm_area li figure{
		width: 90.44117647058824%;
	}
	#content_body #hint_under .unit ul.clm_area li.u2 figure{
		width: 99.26470588235294%;
	}

	#content_body .copy_area{
		padding: 50px 0 70px 0;
	}
	#content_body .copy_area h4{
		width: 100%;
		font-size: 4.2vw;
		letter-spacing: -0.03em;
	}
	#content_body .copy_area figure{
		width: calc(14.68085106382979% * 1.9);
		margin: 30px auto 0 auto;
		position: relative;
		top: auto;
		left: auto;
	}

	#content_body .think.sec{
		padding: 50px 0 0 0;
	}
	#content_body .think.sec.tikyuu{
		padding: 20px 0 0 0;
	}
	#content_body .think.sec h3{
		font-size: 1.500rem;
		margin: 0 0 30px 0;
	}
	#content_body .think.sec figure{
		width: calc(36.48936170212766% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
	}
	#content_body .think.sec.tikyuu figure{
		width: calc(19.36170212765957% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	
	
	#content_body .think.sec figure{
		width: calc(19.14893617021277% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	#content_body .think.sec figure.img2{
		width: calc(19.25531914893617% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	#content_body .think.sec figure.img1{
		width: calc( 36.27659574468085% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	#content_body .think.sec figure.naruhodo{
		width: calc( 36.48936170212766% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	#content_body .think.sec.tikyuu figure{
		width: calc( 15.74468085106383% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	#content_body .think.sec.tikyuu figure.img3{
		width: calc( 32.574468% * 1.5);
		margin: 0 auto;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}


	#content_body .think.end{
		padding: 60px 0 0 0;
	}
	#content_body .think.end h3{
		font-size: 1.25rem;
		width: 100%;
		margin: 0 auto;
	}
	#content_body .think.end figure.naruhodo{
		width: 65.489362%;
		margin: 0 auto;
		padding: 0 0 20px 0;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	
	
	#content_body #hint_under_next{
		padding: 30px 0 65px 0;
	}
	#content_body #hint_under_next .unit{
		margin: 45px auto 30px auto;
		border-radius: 30px;
	}
	#content_body #hint_under_next .unit .ttl_area{
		padding: 12px 0 12px 0;
	}
	#content_body #hint_under_next .unit .ttl_area h3{
		font-size: 1.250rem;
	}

	#content_body #hint_under_next .unit h5{
		font-size: 3.1vw;
    	padding: 10px 0.5em 10px;
		margin: 0 0 30px 0;
		letter-spacing: -0.06em;
	}
	#content_body #hint_under_next .unit .clm_area{
		padding: 25px 35px;
	}
	#content_body #hint_under_next .unit .clm_area a.btn{
		width: 100%;
		margin: 30px auto 40px auto;
	}
	#content_body #hint_under_next .unit .clm_area .kokuban{
		width: 85.1063829787234%;
		padding: 0 0 30% 0;
	}
	#content_body #hint_under_next .unit .clm_area .kokuban figure.img1{
		position: absolute;
		bottom: 0%;
		left: 7%;
		width: 34.12766%;
	}
	#content_body #hint_under_next .unit .clm_area .kokuban figure.img2{
		position: absolute;
		bottom: 0px;
		right: 7%;
    	width: 37.234043%;
	}
}
@media only screen and (max-width: 480px) {
	#content_body{
		padding: 65px 0 0 0;
	}

	#content_body h2.copyimg{
		width: calc(67.34042553191489% * 1.1);
		padding: 0 0 50px 0;
	}
	#content_body figure.co2kun1{
		width: 18.617021%;
		top: 0px;
		left: -2%;
	}
	#content_body figure.co2kun2{
		width: 13.361702%;
		top: 6%;
		right: 6%;
	}
	#content_body .unit{
		padding: 50px 35px 25px;
		margin: 0 auto 60px auto;
	}
	#content_body .unit .ttl_area h3{
		font-size: 1.125rem;
	}

	#content_body .unit .clm_area{
		padding: 30px 0 0 0;
	}
	#content_body .unit .clm_area .txt_clm{
		width: 100%;
		font-size: 0.938rem;
	}
	
	#content_body .unit .clm_area .img2clm{
		width: 100%;
		margin: 20px auto 0 auto;
	}
	#content_body .unit .clm_area .img2clm .imgunit{
		margin: 15px 0 0 0;
	}
	#content_body .unit .clm_area .img2clm .imgunit h4.old img{
		width: 26px;
	}
	#content_body .unit .clm_area .img2clm .imgunit h4.now img{
		width: 26px;
	}
	#content_body .unit .clm_area .img2clm .imgunit p{
		font-size: 0.938rem;
	}

	#content_body .think{
		padding: 30px 0 40px 0;
	}
	#content_body .think h3{
		font-size: 4.8vw;
	}
	#content_body .think h3 span{
		padding: 0 0 5px 0;
	}


	#content_body #hint{
		padding: 35px 0 50px 0;
	}
	#content_body #hint::before{
		width: 84px;
		height: 27px;
		left: calc(50% - 42px);
	}
	#content_body #hint::after{
		width: 84px;
		height: 27px;
		bottom: -27px;
		left: calc(50% - 42px);
	}
	#content_body #hint i{
		width: 180px;
		padding: 0 30px 0 0;
		display: inherit;
	}
	#content_body #hint i.arrow{
		width: 93px;
	}
	#content_body #hint h4{
		padding: 20px 0 0 0;
		font-size: 4.6vw;
    	letter-spacing: -0.01em;
	}

	#content_body #hint_under{
		padding: 30px 0 65px 0;
	}
	
	#content_body #hint_under .re-energy_area{
		margin: 20px 0 40px 0;
	}
	#content_body #hint_under .re-energy_area h3{
		padding: 20px 0 20px 0;
		font-size: 5.0vw;
		letter-spacing: -0.03em;
	}
	#content_body #hint_under .re-energy_area h5{
		width: 90%;
		padding: 12px 10px 12px;
		margin: 0 auto 30px auto;
		font-size: 1.125rem;
		letter-spacing: -0.03em;
	}
	#content_body #hint_under .re-energy_area #eng_unit{
		width: 90%;
		margin: 0 auto;
		padding: 20px 0 0 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box{
		width: 45%;
		margin: 0 0 30px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box:last-child{
		margin: 0 auto 0 auto;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box figure{
		padding: 0 0 15px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box h6{
		padding: 0 0 12px 0;
	}
	#content_body #hint_under .re-energy_area #eng_unit .box p{
		font-size: 0.875rem;
	}
	
	#content_body #hint_under .unit{
		margin: 0 auto 30px auto;
	}
	#content_body #hint_under .unit ul.clm_area{
		padding: 25px 30px;
	}
	#content_body #hint_under .unit ul.clm_area li{
		padding: 0 0 30px 0;
	}
	#content_body #hint_under .unit ul.clm_area li h4{
		width: 63%;
		padding: 0 0 15px 0;
	}
	#content_body #hint_under .unit ul.clm_area li p{
		font-size: 4vw;
		padding: 0 0 15px 0;
	}

	#content_body .copy_area{
		padding: 50px 0 70px 0;
	}
	#content_body .copy_area h4{
		width: 100%;
		font-size: 3.7vw;
	}

	#content_body .think.sec{
		padding: 40px 0 0 0;
	}
	#content_body .think.sec.tikyuu{
		padding: 20px 0 0 0;
	}
	#content_body .think.sec h3{
		font-size: 5.0vw;
		letter-spacing: -0.01em;
		width: 100%;
		margin: 0 0 30px 0;
	}
	
	#content_body #hint_under_next{
		padding: 30px 0 65px 0;
	}
	#content_body #hint_under_next .unit{
		margin: 45px auto 30px auto;
	}
	#content_body #hint_under_next .unit .ttl_area h3{
		font-size: 1.250rem;
	}

	#content_body #hint_under_next .unit .clm_area{
		padding: 25px 30px;
	}
	#content_body #hint_under_next .unit .clm_area a.btn{
		margin: 30px auto 40px auto;
	}
	
	#content_body .think.end{
		padding: 50px 0 0 0;
	}
	#content_body .think.end h3{
		font-size: 5.0vw;
		letter-spacing: -0.01em;
		width: 100%;
		margin: 0 auto;
	}
	#content_body .think.end figure.naruhodo{
		width: 65.489362%;
	}
	#cboxClose {
	top: 80px !important;
	}
}