@charset "utf-8";

/*index_style
===========================================================*/

/*p-sustainability_index*/
.p-sustainability_index{
	position: relative;
	/*padding-top: 2.5rem;*/
}

/*bg*/
	.bg_sustainability{
		position: absolute;
		width: 100%;
		/*height: 980px;*/
		height: 780px;
		top:0px; left: 0px;
		/*background:linear-gradient(to bottom, #9ED8E4 36%, #fff 100%);*/
		background:linear-gradient(to bottom, #fff 20px, #9ED8E4 480px);
		z-index: -1;
	}
	.bg_sustainability::before{
		content: "";
		display: block;
		position: absolute;
		left:0; bottom: 0px;
		width: 100%;
		height: 100%;
		min-width: 1160px;
		background: url("/sustainability/image_v4/bg_sustainability_curve.svg") no-repeat 50% 100%;
		background-size: 100% auto;
	}

/*======heroArea=======*/
.p-heroArea{
	width: 100%;
	min-width: 1160px;
	height: 480px;
	/*z-index: 0;*/
	position: relative;
	margin-bottom: 1.875rem;
}

/*heroPhoto*/
.p-heroPhoto{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px;
	left: 0px;
	opacity: 0;
	transition: opacity 0.6s 0.2s;
}
.p-heroPhoto.is-appear{
	opacity: 1;
}
.p-heroPhoto li{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px; left: 0px;
	line-height: 1;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	opacity: 0;
	transition: opacity 1.6s 0s;
	z-index: 0;
}
.p-heroPhoto li p{
	display: none;
}
.p-heroPhoto .is-now{
	opacity: 1;
	z-index: 1;
}

/**/
.p-heroArea__photoInfo{
	opacity: 0;
	transition: all 0.8s 0s;
	position: absolute;
}
.p-heroArea__photoInfo.is-appear{
	/*opacity: 1;*/
}
.p-heroArea__photoInfo li{
	transition: all 1.8s 0s ease-in-out;
	opacity: 0;
	/*z-index: 0;*/
}
.p-heroArea__photoInfo .is-now{
	opacity: 1;
	/*z-index: 1;*/
}
.p-heroArea__slPos{
	opacity: 0;
	position: absolute;
	bottom: 1.5rem;
	left: 0px;
	width: 100%;
	transition: all 0.8s 0.3s;
	z-index: 2;
}
.p-heroArea__slPos.is-appear{
	opacity: 1;
}
.p-heroArea__slPos>ul{
	display: flex;
	justify-content: center;
	width: 100%;
}
.p-heroArea__slPos li{
	flex: 0 0 auto;
	width: 60px;
	height: 10px;
	border: #fff 1px solid;
	border-radius: 5px;
	margin: 0 5px;
	background-color: rgba(255,255,255,0.85);
	transition: background-color 0.3s;
	cursor: pointer;
}
.p-heroArea__slPos .is-now{
	background-color: #76c8d9;
}

.p-heroArea__loading{
	position:absolute;
	top:50%; left:50%;
	width: 50px; height: 50px;
	background: url("/sustainability/image_v4/hero/loading-icon.svg") no-repeat 50% 50%;
	margin-left:-25px;
	margin-top:-25px;
	opacity: 0.7;
	transition: opacity 0.5s;
}
.p-heroArea__loading.is-hidden{
	opacity: 0;
}

/*p-esg_contents__heading*/
.p-esg_contents{
	margin-bottom: 2.5rem;
}

h2.p-esg_contents__heading{
	padding-top: 3.375rem;
	color: #2DB2C3;
}

.p-esg_contents .c-bn_btn h3{
	font-size: 1.9375rem;
	line-height: 1;
	font-weight: 300;
}
.p-esg_contents .c-bn_btn h3 a{
	color: #2DB2C3;
}
.p-esg_contents .c-bn_btn h3 .large{
	font-weight: 700;
	font-size: 2.625rem;
}
.p-esg_contents .c-bn_btn h3 .en,
.p-esg_contents .c-bn_btn h3 .jp{
	display: block;
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	margin: 0.375rem auto 0.125rem;
	color: #212121;
}


/*p-sutainability_box*/
.c-box_article.p-sutainability_box{
	background-color: #9ED8E4;
}
.p-sutainability_box.p-social_contribution{
	margin-bottom: 0.5rem;
}
.p-social_contribution .c-bn_btn h3{
	font-size: 1.375rem;
	margin-bottom: 0.375rem;
}

.p-sutainability_box .col3 .col{
	width: calc((100% - 60px)/3);
}
.p-sutainability_box .col4 .col{
	width: calc((100% - 90px)/4);
}

/*tab*/
.p-tabmenu li:nth-of-type(1){
	box-shadow: -4px 0 4px -4px rgba(0,0,0,0.12);
}
.p-tabmenu li:nth-of-type(2){
	box-shadow: 4px 0 4px -4px rgba(0,0,0,0.22);
}
.p-tabmenu li.is-open::before{
	background-color: #2DB2C3;
}
/*utility*/
.u-hide{
	display: none;
}

/*news*/
.p-news_area__body dd li,
.sp .p-news_area__body dd li{
	padding-left: 4rem;
  background-position: 3rem 0.4375em;
}
.p-news_area__body dd li .date,
.sp .p-news_area__body dd li .date{
	width: 2.5em;
	text-align: right;
}



/*===============sp==================*/

.sp .p-heroArea{
	width: 100%;
	min-width: auto;
	height: auto;
	padding-bottom: 41.38%;
}
.sp .p-heroArea__slPos{
	display: none;
}

.sp .p-tabmenu .p-tabmenu__tab{
	font-size: 0.9375rem;
}

.sp .bg_sustainability{
	height: 800px;
	background:linear-gradient(to bottom, #9ED8E4 20px, #fff 680px);
}
.sp .bg_sustainability::before{
	display: none;
}
.sp .p-sutainability_box .c-bn_btn{
	margin: 0.25rem auto;
}