@charset "utf-8";


/**************************************************50
 * sdgs
 **************************************************/
#sdgs{
}
#sdgs h2{
	color: #0080BF;
	line-height: 1.25;
	position: relative;
	padding: 0.375em 0.5em 0.375em 2em;
}
#sdgs h2:before{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 1.75em;
	margin-right: 0.25em;
	pointer-events: none;
	vertical-align: middle;
	width: 1.75em;
}
#sdgs h2 span{
	display: inline-block;
	vertical-align: middle;
}
#sdgs.lazyloaded h2:before{
	background-image: url("https://world-kawahara.co.jp/images/user/sdgs/mark.svg");
}
#sdgs_img{
	display: block;
	position: relative;
	text-align: center;
}
#sdgs_img:after{
	background-color: #0080BF;
	content: "";
	display: block;
	height: 1px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 0;
	-ms-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: 300vw;
	z-index: -1;
}
#sdgs_img img{
	background-color: #FFFFFF;
}
#sdgs figure{
}
#sdgs figure picture{
	text-align: center;
}
#sdgs figure picture img{
}
#sdgs figure figcaption{
}
#sdgs figure figcaption{
}
#sdgs figure figcaption p{
}
#sdgs figure figcaption > p:not(:first-child){
}
#sdgs figure figcaption p strong{
	color: #0080BF;
}
#sdgs_indispensable{
	text-align: center;
}
#sdgs_indispensable p{
	padding: 0.25em;
}
#sdgs_indispensable > strong{
	background-color: #0080BF;
	color: #FEF087;
	display: inline-block;
	line-height: 1.5;
	padding: 0.25em 1em;
}
@media screen and (max-width:767px){
	#sdgs{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#sdgs h2{
		font-size: 125%;
		margin: 0 auto 3.125%;
		text-align: center;
		width: 93.75%;
	}
	#sdgs h2 span{
		text-align: left;
	}
	#sdgs_img{
		margin-bottom: 3.125%;
	}
	#sdgs_img img{
		width: 75%;
		max-width: 512px;
	}
	#sdgs figure figcaption{
		margin-bottom: 0.5em;
	}
	#sdgs figure figcaption > p{
		padding: 0 3.125%;
	}
	#sdgs figure figcaption > p:not(:first-child){
		margin-top: 0.5em;
	}
	#sdgs_indispensable{
		margin-top: 0.5em;
	}
	#sdgs figure picture img{
		width: 93.75%;
	}
}
@media screen and (min-width:768px){
	#sdgs{
		padding-top: 100px;
		padding-bottom: 100px;
	}
	#sdgs h2{
		font-size: 150%;
	}
	#sdgs_img{
		margin-bottom: 2em;
	}
	#sdgs figure figcaption > p:not(:first-child){
		margin-top: 1.5em;
	}
	#sdgs_indispensable{
		margin-top: 1.5em;
	}
	#sdgs figure picture img{
		width: 100%;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#sdgs_img img{
		width: 512px;
	}
	#sdgs figure figcaption{
		margin-bottom: 1.5em;
	}
}
@media screen and (max-width:1023px){
	#sdgs_indispensable{
		background-color: #E8E8E8;
	}
}
@media screen and (min-width:1024px){
	#sdgs_img{
		margin-top: -1em;
		margin-left: auto;
		width: 46.75%;
	}
	#sdgs_img img{
		width: 368px;
	}
	#sdgs figure{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#sdgs figure picture{
		display: table-cell;
		vertical-align: top;
		width: 53.25%;
	}
	#sdgs figure figcaption{
		display: table-cell;
		padding-left: 2em;
		vertical-align: top;
	}
	#sdgs figure figcaption p strong{
		font-size: 125%;
	}
	#sdgs_indispensable{
		position: relative;
	}
	#sdgs_indispensable:after{
		background-color: #E8E8E8;
		content: "";
		display: block;
		height: 100%;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		-ms-transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		width: 300vw;
		z-index: -1;
	}
	#sdgs_indispensable > strong{
		font-size: 125%;
	}
}


/**************************************************50
 * service
 **************************************************/
#service{
	text-align: center;
}
#service h2{
}
#service > strong{
	display: block;
	font-weight: 500;
}
#service_main{
}
#service_main figure{
	background-color: #CDE6EB;
	display: inline-block;
}
#service_main figure picture{
}
#service_main figure picture img{
	width: 100%;
}
#service_main figure figcaption{
}
#service_main figure figcaption h3{
	line-height: 1.5;
	color: #1F5D52;
	padding: 0.625em 0.5em;
}
#service_main figure figcaption p{
	background-color: #FFFFFF;
	font-size: 87.5%;
	padding: 0.5em 1em;
	text-align: left;
}
#service_other{
}
#service_other > li{
	background-color: #1F5D52;
	color: #FFFFFF;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	vertical-align: top;
	width: 9em;
}
#service_other > li:before{
	content: "";
	display: block;
	padding-top: 100%;
}
#service_other > li p{
	line-height: 1.5;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
#service_to{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	color: #FFFFFF;
	display: inline-block;
	height: 2.3em;
	line-height: 2.3;
	position: relative;
	text-decoration: none;
	transition: opacity 0.2s ease-out 0s;
	width: 15.9em;
}
#service_to:hover{
	opacity: 0.7;
}
#service_to:after{
	content: "\F013E";
	font-family: "Material Design Icons";
	line-height: 1;
	font-size: 150%;
	position: absolute;
	top: 50%;
	right: 0.25em;
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#service_to span{
	color: #FEF087;
}
#service.lazyloaded #service_to{
	background-image: url("https://world-kawahara.co.jp/images/user/button/blue.svg");
}
@media screen and (max-width:767px){
	#service{
		padding-bottom: 12.5%;
	}
	#service > strong{
		margin-bottom: 3.125%;
		padding: 0 3.125%;
		text-align: left;
	}
	#service_main figure{
		margin-bottom: 6.25%;
		padding: 3.125%;
		width: 93.75%;
	}
	#service_other{
		margin-bottom: 3.125%;
	}
	#service_other > li{
		margin: 0 1.5625% 3.125%;
	}
	#service_to{
		font-size: 125%;
	}
}
@media screen and (min-width:768px){
	#service{
		padding-bottom: 100px;
	}
	#service > strong{
		font-size: 125%;
		margin-bottom: 50px;
	}
	#service_main figure{
		margin: 0 10px 50px;
		padding: 20px;
	}
	#service_other{
		margin-bottom: 40px;
	}
	#service_other > li{
		margin: 0 5px 10px;
	}
	#service_to{
		font-size: 187.5%;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#service_main figure{
		width: 45%;
	}
}
@media screen and (min-width:1024px){
	#service_main figure{
		width: 39.5%;
	}
}
@media screen and (min-width:1280px){
	#service{
		background-position: center top;
		background-repeat: no-repeat;
		background-size: auto 125%;
	}
}
@media screen and (min-width:1280px) and (max-width:1439px){
	#service.lazyloaded{
		background-image: url("https://world-kawahara.co.jp/images/user/service/back_012.webp");
	}
}
@media screen and (min-width:1439px) and (max-width:1599px){
	#service.lazyloaded{
		background-image: url("https://world-kawahara.co.jp/images/user/service/back_011.webp");
	}
}
@media screen and (min-width:1600px){
	#service.lazyloaded{
		background-image: url("https://world-kawahara.co.jp/images/user/service/back_010.webp");
	}
}