@charset "utf-8";

body.responsive #C_Header div.pageTitle01{
	display: none;
}

.csr_wrap{
	font-family: 'Noto Sans JP', sans-serif;
	padding-bottom: 6.25vw;
}
@media screen and (max-width:1024px) {
	.csr_wrap{
		padding-bottom: 0;
	}
}

.csr_sect01{
	background-image: url(/jp/ja/csr/img/index_csr_bg_01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom left;
	padding: 5.47vw 5.21vw 25.26vw;
	display: flex;
}
@media screen and (max-width:1024px) {
	.csr_sect01{
		background-position: bottom center;
		padding: 10.25vw 7.52vw 66.11vw 9.76vw;
		display: block;
	}
}
@media screen and (max-width:767px) {
	.csr_sect01{
		padding: 10.95vw 5.21vw 81.09vw;
	}
}

@media screen and (min-width:1025px) {
	.csr_txt_wrap01{
		width: 66%;
	}
}


.csr_hd01{
	font-size: 3.44vw;
	font-weight: bold;
	color: #3cb07c;
	margin-bottom: 3.39vw;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s, transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s;
}
.loaded .csr_hd01{
	opacity: 1;
	transform: translateY(0);
}
@media screen and (max-width:1024px) {
	.csr_hd01{
		font-size: 5.6vw;
		margin-bottom: 6.25vw;
		white-space: normal;
	}
}
@media screen and (max-width:767px) {
	.csr_hd01{
		font-size: 8.6vw;
		margin-bottom: 9.12vw;
	}
}

.csr_lead01{
	font-size: 0.94vw;
	line-height: 2;
	width: 95%;
}
.csr_lead01 > span{
	display: block;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s, transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s;
}
.csr_lead01 > span:nth-child(2){
	transition-delay: 0.7s;
}
.loaded .csr_lead01 > span{
	opacity: 1;
	transform: translateY(0);
}
@media screen and (max-width:1024px) {
	.csr_lead01{
		font-size: 1.76vw;
		width: 100%;
	}
}
@media screen and (max-width:767px) {
	.csr_lead01{
		font-size: 3.65vw;
	}
}

.csr_mv01{
	margin: calc(-30 / 1920 * 100vw) 0 0 calc(30 / 1920 * 100vw);
	opacity: 0;
	/*transform: scale(1.2);
	transition: opacity 3s ease 0.8s, transform 3s ease-out 0.8s;*/
	transition: opacity 3s ease 0.8s;
}
.loaded .csr_mv01{
	opacity: 1;
	/*transform: scale(1);*/
}
.csr_mv01 > img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:1024px) {
	.csr_mv01{
		margin: 4.2vw 0 0 0;
	}
}
@media screen and (max-width:767px) {
	.csr_mv01{
		margin: 2.86vw 0 0 0;
	}
}


.csr_sect02{
	background-image: url(/jp/ja/csr/img/index_csr_bg_02.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;
	padding: 3.8vw 0 6.77vw 6.77vw;
	margin: calc(-25.26vw + (-30 / 1920 * 100vw)) 0 6.25vw 6.25vw;
}
@media screen and (max-width:1024px) {
	.csr_sect02{
		background-position: top center;
		padding: 7.62vw 0 10.74vw 9.76vw;
		margin: -66.11vw 0 8.3vw 8.3vw;
	}
}
@media screen and (max-width:767px) {
	.csr_sect02{
		padding: 10.04vw 0 14.34vw 13.04vw;
		margin: -81.09vw 0 13.04vw;
	}
}

.csr_hd02{
	font-size: 3.75vw;
	font-weight: bold;
	color: #fff;
	margin-bottom: 4.48vw;
}
@media screen and (max-width:1024px) {
	.csr_hd02{
		font-size: 7.03vw;
		margin-bottom: 6.84vw;
	}
}
@media screen and (max-width:767px) {
	.csr_hd02{
		font-size: 9.39vw;
		margin-bottom: 11.08vw;
	}
}

.esg{
	position: relative;
}
.esg::before,
.esg::after{
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
}
.esg::before{
	width: 0;
	background-color: #3cb07c;
	transition: width 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: 2;
	left: 0;
}
.esg::after{
	width: 100%;
	background-color: #3cb07c;
	transition: width 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: 3;
	right: 0;
	visibility: hidden;
}
.scrolled .esg::before{
	width: 100%;
}
.scrolled.scrolled02 .esg::before{
	display: none;
}
.scrolled.scrolled02 .esg::after{
	width: 0;
	visibility: visible;
}
.esg > a,
.esg > span{
	display: block;
	background-color: #f4f4f4;
	padding: 4.17vw 0 4.17vw 6.04vw;
	opacity: 0;
}
.scrolled.scrolled02 .esg > a,
.scrolled.scrolled02 .esg > span{
	opacity: 1;
}
.esg_wrap{
	display: flex;
	align-items: center;
}
@media screen and (max-width:1024px) {
	.esg > a,
	.esg > span{
		padding: 8.4vw 3.2vw 10.15vw 10vw;
	}
	.esg_wrap{
		display: block;
	}
}
@media screen and (max-width:767px) {
	.esg > a,
	.esg > span{
		padding: 11.21vw 5.21vw 13.56vw 14.34vw;
	}
}

.esg_txt{
	width: 33.3%;
}
@media screen and (max-width:1410px) {
	.esg_txt{
		width: 37%;
	}
}
@media screen and (max-width:1024px) {
	.esg_txt{
		width: 100%;
	}
}

.esg_txt > h4{
	font-size: 1.87vw;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: 2.86vw;
	padding-right: 6%;
}
	.esg_txt > p{
		white-space: nowrap;
	}
.esg_txt > p > span:first-child{
	font-size: 0.99vw;
	font-weight: bold;
	display: inline-block;
	position: relative;
	vertical-align: middle;
}
.esg > span .esg_txt > p > span:first-child{
	color: #888;
}
@media screen and (max-width:1024px) {
	.esg_txt > h4{
		font-size: 3.8vw;
		margin-bottom: 3.14vw;
		padding-right: 0;
	}
	.esg_txt > p{
		margin-bottom: 3.61vw;
	}
	.esg_txt > p > span:first-child{
		font-size: 2.34vw;
	}
}
@media screen and (max-width:970px) {
	.esg_txt > p > span:first-child{
		font-size: 2vw;
	}
}
@media screen and (max-width:767px) {
	.esg_txt > h4{
		font-size: 5.08vw;
		margin-bottom: 5.21vw;
	}
	.esg_txt > p{
		margin-bottom: 4.82vw;
	}
	.esg_txt > p > span:first-child{
		font-size: 3.13vw;
	}
}

.esg_txt > p > span:first-child::after {
	position: absolute;
	bottom: -0.83vw;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.3s ease;
}
.esg > a:hover .esg_txt > p > span:first-child::after {
	transform: scale(1, 1);
}
@media screen and (max-width:1024px) {
	.esg_txt > p > span:first-child::after {
		bottom: -1.56vw;
	}
}
@media screen and (max-width:767px) {
	.esg_txt > p > span:first-child::after {
		bottom: -2.08vw;
	}
}

.csr_iconArrow01{
	display: inline-block;
	width: 1.56vw;
	height: 1.56vw;
	background-color: #3cb07c;
	border-radius: 50%;
	vertical-align: middle;
	margin-left: 1.04vw;
	position: relative;
}
.csr_iconArrow01::after{
	content: '';
	width: 0.4vw;
	height: 0.4vw;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 0.57vw;
	left: 0.45vw;
}
.csr_iconArrow01.csr_iconArrow01_white{
	background-color: #fff;
}
.csr_iconArrow01.csr_iconArrow01_white::after{
	border-top: 1px solid #77b4dd;
	border-right: 1px solid #77b4dd;
}
.csr_iconArrow01.csr_iconArrow01_gray{
	background-color: #888;
}
@media screen and (max-width:1024px) {
	.csr_iconArrow01{
		width: 2.93vw;
		height: 2.93vw;
		margin-left: 1.66vw;
	}
	.csr_iconArrow01::after{
		width: 0.8vw;
		height: 0.8vw;
		top: 0.98vw;
		left: 0.77vw;
	}
}
@media screen and (max-width:767px) {
	.csr_iconArrow01{
		width: 3.91vw;
		height: 3.91vw;
		margin-left: 2.21vw;
	}
	.csr_iconArrow01::after{
		width: 1vw;
		height: 1vw;
		top: 1.35vw;
		left: 1vw;
	}
}

.esg_list{
	width: 66.7%;
	display: flex;
	justify-content: space-between;
}
.esg_list > li{
	width: 32.96%;
	height: 14.06vw;
	display: flex;
	align-items: center;
}
.esg_list > li.env{
	background: linear-gradient(to right, #567d5e 0%, #4b6d51 50%);
}
.esg_list > li.soc{
	background: linear-gradient(to right, #53758c 0%, #49677c 50%);
}
.esg_list > li.gov{
	background: linear-gradient(to right, #a7a68f 0%, #979581 50%);
}
.esg_list > li > img{
	width: auto;
	height: 1.67vw;
	margin-left: 1.82vw;
}
@media screen and (max-width:1024px) {
	.esg_list{
		width: 100%;
		display: block;
	}
	.esg_list > li{
		width: 100%;
		height: 14.26vw;
	}
	.esg_list > li + li{
		margin-top: 0.2vw;
	}
	.esg_list > li > img{
		height: 3.12vw;
		margin-left: 3.42vw;
	}
}
@media screen and (max-width:767px) {
	.esg_list > li{
		height: 19.03vw;
	}
	.esg_list > li + li{
		margin-top: 0.26vw;
	}
	.esg_list > li > img{
		height: 4.17vw;
		margin-left: 4.56vw;
	}
}

.esg_note{
	font-size: 1.25vw;
    color: #3cb07c;
	line-height: 1.5;
    margin-top: 2.4vw;
}
.esg_note > a{
	color: #3cb07c;
}
.esg_note > a:hover{
	text-decoration: underline;
}
@media screen and (max-width:1024px) {
	.esg_note{
		font-size: 2.34vw;
		margin-top: 3.2vw;
	}
	.esg_note > a{
		display: block;
	}
}
@media screen and (max-width:767px) {
	.esg_note{
		font-size: 3.13vw;
		margin-top: 4.3vw;
	}
}

.csr_sect03{
	padding: 4.84vw 3.54vw 3.96vw 7.6vw;
	position: relative;
}
@media screen and (min-width:1025px) {
	.csr_sect03{
		background-image: url(/jp/ja/csr/img/index_csr_bg_03.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top left;
		margin-right: 6.25vw;
	}
}
@media screen and (max-width:1024px) {
	.csr_sect03{
		background-color: #77b4dd;
		padding: 7.32vw 7.81vw 41.5vw;
	}
}
@media screen and (max-width:767px) {
	.csr_sect03{
		padding: 9.78vw 5.21vw 55.41vw;
	}
}

.csr_image01{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 39.06vw;
	z-index: 1;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.165,0.84,0.44,1), transform 0.6s cubic-bezier(0.165,0.84,0.44,1);
}
.scrolled .csr_image01{
	opacity: 1;
	transform: translateY(0);
}
.csr_image01 > img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:1024px) {
	.csr_image01{
		width: 100%;
		transition-delay: 0.9s;
	}
}

.csr_sect03_blocks_wrap{
	display: flex;
	color: #fff;
}
@media screen and (max-width:1024px) {
	.csr_sect03_blocks_wrap{
		display: block;
	}
}

.csr_sect03_block01{
	position: relative;
	z-index: 2;
	width: 48.28%;
}
@media screen and (max-width:1024px) {
	.csr_sect03_block01{
		width: 100%;
		padding: 0 6.4vw;
	}
}
@media screen and (max-width:767px) {
	.csr_sect03_block01{
		padding: 0 9.4vw;
	}
}

.csr_hd03{
	font-size: 3.33vw;
	font-weight: bold;
	margin-bottom: 2.03vw;
}
.csr_lead02{
	font-size: 0.99vw;
	font-weight: bold;
	line-height: 1.6;
	margin: 0 11.29vw 1.73vw 0.47vw;
}
@media screen and (max-width:1200px) {
	.csr_lead02{
		margin: 0 8.3vw 1.73vw 0.47vw;
	}
}
@media screen and (max-width:1024px) {
	.csr_hd03{
		font-size: 6.25vw;
		margin-bottom: 3.61vw;
	}
	.csr_lead02{
		font-size: 2.54vw;
		margin: 0 0 4.2vw;
	}
}
@media screen and (max-width:767px) {
	.csr_hd03{
		font-size: 8.34vw;
		margin-bottom: 4.95vw;
	}
	.csr_lead02{
		font-size: 3.3vw;
		margin: 0 0 5.47vw;
	}
}

.csr_list01{
	display: flex;
	margin: 0 3.2vw 0 0.47vw;
}
.csr_list01 > li{
	width: 41.73%;
	line-height: 1.3;
}
.csr_list01 > li + li{
	margin-left: 4.54%;
}
@media screen and (max-width:1024px) {
	.csr_list01{
		display: block;
		margin: 0 auto;
		width: 49vw;
	}
	.csr_list01 > li{
		width: 100%;
		line-height: 1;
	}
	.csr_list01 > li + li{
		margin-left: 0;
		margin-top: 1.95vw;
	}
}
@media screen and (max-width:767px) {
	.csr_list01{
		width: 62vw;
	}
	.csr_list01 > li + li{
		margin-top: 2.61vw;
	}
}

.csr_list01 > li > a{
	display: block;
	width: 100%;
	color: #fff;
	font-size: 0.83vw;
	font-weight: bold;
	padding: 0.83vw 1.6vw;
	border: 1px solid #fff;
	border-radius: 10vw;
	text-align: center;
	position: relative;
	transition: background-color 0.25s ease;
}
.csr_list01 > li > a::after{
	content: '';
	width: 0.4vw;
	height: 0.4vw;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
	right: 1.04vw;
}
.csr_list01 > li > a:hover{
	background-color: #4ea6e2;
}
@media screen and (max-width:1024px) {
	.csr_list01 > li > a{
		font-size: 2.25vw;
		padding: 2.25vw 5.2vw;
	}
	.csr_list01 > li > a::after{
		width: 1vw;
		height: 1vw;
		right: 4vw;
	}
}
@media screen and (max-width:767px) {
	.csr_list01 > li > a{
		font-size: 3vw;
		padding: 3vw 6.2vw;
	}
	.csr_list01 > li > a::after{
		width: 1.4vw;
		height: 1.4vw;
		right: 4.7vw;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
}

.csr_sect03_block02{
	position: relative;
	z-index: 2;
	width: 51.72%;
	margin: 5.36vw 0 0;
}
@media screen and (max-width:1024px) {
	.csr_sect03_block02{
		width: 100%;
		margin: 4.98vw auto 0;
	}
}
@media screen and (max-width:767px) {
	.csr_sect03_block02{
		margin: 6.65vw auto 0;
	}
}

.csr_list02{
	display: flex;
}
.csr_list02 > li{
	width: 47.92%;
	opacity: 0;
	transform: translateY(10px) scale(0.99);
	transition: opacity 0.8s cubic-bezier(0.645,0.045,0.355,1), transform 0.8s cubic-bezier(0.645,0.045,0.355,1);
	transition-delay: 0.5s;
}
.csr_list02 > li:nth-child(2){
	transition-delay: 0.6s;
}
.scrolled .csr_list02 > li{
	opacity: 1;
	transform: translateY(0) scale(1);
}
@media screen and (max-width:1024px) {
	.csr_list02 > li{
		transition-delay: 0s;
	}
	.csr_list02 > li:nth-child(2){
		transition-delay: 0.1s;
	}
}
.csr_list02 > li + li{
	margin-left: 4.16%;
}
.csr_list02_linkImg img{
	width: 100%;
	height: auto;
}

.csr_list02_linkTxt{
	text-align: right;
	margin-top: 0.78vw;
}
.csr_list02_linkTxt > a{
	font-size: 0.83vw;
	font-weight: bold;
	color: #fff;
	display: inline-block;
	position: relative;
	vertical-align: middle;
}
@media screen and (max-width:1024px) {
	.csr_list02_linkTxt{
		margin-top: 1.95vw;
	}
	.csr_list02_linkTxt > a{
		font-size: 2.34vw;
	}
}
@media screen and (max-width:767px) {
	.csr_list02_linkTxt{
		margin-top: 2.61vw;
	}
	.csr_list02_linkTxt > a{
		font-size: 3.13vw;
	}
}

.csr_list02_linkTxt > a::after {
	position: absolute;
	bottom: -0.83vw;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.3s ease;
}
.csr_list02_linkTxt > a:hover::after,
.csr_list02_linkImg:hover ~ .csr_list02_linkTxt > a::after {
	transform: scale(1, 1);
}
@media screen and (max-width:1024px) {
	.csr_list02_linkTxt > a::after {
		bottom: -1.56vw;
	}
}
@media screen and (max-width:767px) {
	.csr_list02_linkTxt > a::after {
		bottom: -2.08vw;
	}
}

.pc_br{
	display: inline;
}
@media screen and (max-width:1024px) {
	.pc_br{
		display: none;
	}
}