/* ===============================================
   CSRで使用するcss
=============================================== */
/* - - - - - - - - - - - - - - - - - - - - - 
	2021追記
- - - - - - - - - - - - - - - - - - - - - */

/* --- .csr_mv --- */

.csr_mv{
	background-image: url("../img/main_visual_governance.jpg") ;	background-repeat: no-repeat;
	background-size: cover;
	background-position: 10% 20%;
	max-height: 460px;
	min-height: 160px;
	height: 25vw;
	width: 100%;
	position: relative;
	margin-bottom: 80px;
}
.csr_mv h2{
	width: auto;
	padding: 0;
}
.csr_mv .csr_ttl{
	position: relative;
    max-width: 960px;
	height: 100%;
}
.csr_mv .csr_ttl img {
	position: absolute;
	top: 27%;
	left: 0;
	height: 20%;
	transition-duration: .3s;
}
@media(max-width: 768px){
	.csr_mv{
		margin-bottom: 0;
	}
	.csr_mv .csr_ttl{
		margin: 0 5%;
	}
	.csr_box_inner {
		margin: 0 5% 2.5rem;
	}
	.csr_mv .csr_ttl img {
		top: 35%;
		transition-duration: .3s;
		height: 40%
	}
}

/* --- .csr_esg_nav --- */
.csr_esg_nav {
	position: absolute;
	bottom: -23px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
    max-width: 960px;
}
.csr_esg_nav ul{
	display: flex;
}
.csr_esg_nav ul li a{
	width: 230px;
	height: 75px;
	margin-right: 2vw;
	border-radius: 10px;
	border: 1.7px solid #FFF;
	background-color: #D8D8D8;
	display: inline-block;
    font-size: 0px
}
.csr_esg_nav ul li:nth-child(1) a{
	background-image: url("../../img/esg_nav01.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.csr_esg_nav ul li:nth-child(2) a{
	background-image: url("../../img/esg_nav02.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.csr_esg_nav ul li:nth-child(3) a{
	background-image: url("../../img/esg_nav03.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.csr_esg_nav ul li:nth-child(4) a{
	border: none;
	background-color: #FFFFFF;
	background-image: url("../../img/esg_nav04.svg");
	background-size: 70%;
	background-position: center top 38%;
	background-repeat: no-repeat;
	width: 150px;
	margin-left: 2vw;
}
.csr_esg_nav ul li:nth-child(1).on a{background-color: #03B672;}
.csr_esg_nav ul li:nth-child(2).on a{background-color: #257DC6;}
.csr_esg_nav ul li:nth-child(3).on a{background-color: #ED9F23;}

.csr_esg_nav ul li:nth-child(1) a:hover{
	background-color: #03B672;
	transition-duration: .3s;}
.csr_esg_nav ul li:nth-child(2) a:hover{
	background-color: #257DC6;
	transition-duration: .3s;
}
.csr_esg_nav ul li:nth-child(3) a:hover{
	background-color: #ED9F23;
	transition-duration: .3s;
}
.csr_esg_nav ul li:nth-child(4) a:hover{
	background-color: #EDEDED;
	transition-duration: .3s;
}

.csr_esg_nav ul li a:hover{
	transform: translate(0,-7px);
	-webkit-transition: 0.1s;-moz-transition: 0.1s;-ms-transition: 0.1s;-o-transition: 0.1s;transition: 0.1s;
}
.csr_esg_nav ul li.on a:hover{
	transform: none;
}

@media(max-width: 959px) and (min-width:769px){
	
.csr_esg_nav ul li a{
	width: 24vw;
	margin-right: 1vw;
}
	
.csr_esg_nav ul li:nth-child(4) a{
	width: 16vw;
	margin-left: 1vw;
}			
}


/* --- .csr_nav --- */

.csr_nav_bg{
	background-color: #FCEEC0;
	height: 90px;
	width: 100%;
	position: relative;
	z-index: 20;
}
.csr_nav{
	position: relative;
	width: 100%;
	height: 100%;
}
.pc_show .csr_nav ul{
	display: flex;
	width: 100%;
    max-width: 960px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.pc_show .csr_nav ul li{
	display: flex;
	align-items: center;
	position: relative;
	margin-right: 2vw;
}
.pc_show .csr_nav ul li a{
	padding: .6rem 2rem;
	background-color: #fff;
	position: relative;
	display: inline-block;
	padding-right: 2.5rem;
	font-size: 1.2em;
	font-weight: 500;
	opacity: 1;
	border-radius: 50vh;
	box-shadow: 0 0px 10px rgba(0,0,0,0.3);
	color: #ED9F23;
	border: 1.5px solid #ED9F23;
	text-decoration: none;
}
.pc_show .csr_nav ul li a:hover{
	color: #fff;
	transition-duration: .3s;
	text-decoration: none;
	border: 1.5px solid #fff;
	background-color: #ED9F23;
}
.pc_show .csr_nav ul li a::after{
	content: "";
	width: 6px;
	height: 6px;
	border: 0;
	border-top: 2px solid;
	border-right: 2px solid;
	position: absolute;
	right: 15px;
	top: 18px;
	transform: rotate(45deg);
	border-top: 2px solid #ED9F23;
	border-right: 2px solid #ED9F23;
}
.pc_show .csr_nav ul li a:hover::after{
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transition-duration: .3s;
}
.pc_show .csr_nav ul .btn_active a{
	color: #fff;
	border: 1.5px solid #fff;
	background-color: #ED9F23;
}
.pc_show .csr_nav ul .btn_active a::after{
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
@media(max-width: 768px){	#sp_esg_menu {
		position: absolute;
    	top: 38px;
    	right: 20px;
    	transform: translate(-50%, -50%);
    	-webkit-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
		content: '';
		width: 24px;
		height: 24px;
		background: #fff;
	}
	#sp_esg_menu:before {
 		position: absolute;
		top: 11px;
		right: 3px;
		content: '';
		width: 18px;
		height: 3px;
		transform: rotate(90deg);
		transition: all .3s ease-in-out;
		background: #0076bf;
	}
	#sp_esg_menu:after {
		position: absolute;
		top: 11px;
		right: 3px;
		content: '';
		width: 18px;
		height: 3px;
		transition: all .2s ease-in-out;
		background: #0076bf;
	}
	#sp_esg_menu.open:before {
		transform: rotate(0deg);
	}
.csr_nav{
		background-color: #fff;
		display: none;
	}
	.csr_nav .flex_container{
		padding: 30px;
    	border-bottom: 1.5px solid #0076bf;
	}
	.csr_nav .flex_container .esg{
		font-size: 1.1rem;
		flex-basis: 40%;
		font-weight: bold;
		letter-spacing: 0.15em;
	}
	.csr_nav .flex_container .menu{
		font-size: .9rem;
		flex-basis: 60%;
		letter-spacing: 0.08em;
	}
	.csr_nav .flex_container .menu li{
		margin-bottom: 15px;
	}
	.csr_nav .flex_container .menu li:last-child{
		margin-bottom: 0;
	}
	.csr_nav .flex_container .menu li a{
		color: #000000;
	}
/*	.sp_show .csr_nav {
		display: none;
		position: relative;
		background-color: #fff;
		height: auto;
		width: 100%;
	}
	.sp_show .csr_nav ul{
		display: block;
    	width: 100%;
	}
	.sp_show .csr_nav ul li{
		margin-right: 0;
    	width: 100%;
    	border-bottom: 1.5px solid #03B672;
	}
	.sp_show .csr_nav ul li:hover{
		transition-duration: .3s;
		text-decoration: none;
	}
	.sp_show .csr_nav ul li:last-child{
		margin-bottom: 0;
	}
	.sp_show .csr_nav ul li a{
		font-size: 1.15em;
		display: block;
		padding: 3vw;
		max-width: 100%;
		line-height: 3;
		font-weight: 500;
		position: relative;
		text-decoration: none;
		color: #03B672;
	}
	.sp_show .csr_nav ul li a::after{
		content: "";
		width: 6px;
		height: 6px;
		border: 0;
		border-top: 2px solid;
		border-right: 2px solid;
		position: absolute;
		right: 15px;
		top: 31px;
		transform: rotate(45deg);
		border-top: 2px solid #03B672;
		border-right: 2px solid #03B672;
	}
	.sp_show .csr_nav ul .btn_active {
		background-color: #c7ecda;
	}
*/}


/* --- .csr_box_inner --- */

#csr_waku {
	padding-top: 3.5rem;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
.csr_headline {
	margin-bottom: 2.5rem;
	font-size: 2em;
	line-height: 2;
	color: #ED9F23;
}
.csr_box_inner {
	margin-bottom: 3rem;
}
.csr_box_inner:last-of-type,
.box:last-of-type {
	margin-bottom: 0;
}
.csr_box_inner::after {
	content: '';
	display: block;
	margin: 0 auto;
	padding-top: 3rem;
	border-bottom: 1px dashed #707070;
	width: 50%;
}
.csr_box_inner:last-child::after {
	border-bottom: none;
}
.csr_box_inner h4 {
	font-size: 1.3em;
	font-weight: 500;
	margin-bottom: 1rem;
	margin-top: 2.5rem;
}
.csr_box_inner h4::before {
	content: "ー";
	padding-right: .4rem;
	font-weight: 100;
	color: #ED9F23;
}
.csr_box_inner h5 {
	font-size: 1.1em;
	font-weight: 500;
	margin: 1rem 0 .6rem;
	background-color: #F1F1F1;
	display: inline-block;
	padding: 1em;
	border-radius: 0.5em;
	color: #ED9F23;
}
.csr_box_inner p {
	font-weight: 400;
	line-height: 1.8;
}
@media(max-width: 768px){
	.csr_box_inner::after {
		padding-top: 2.5rem;
	}
	.csr_headline {
		font-size: 1.5em;
	}
}

/* --- .csr_box_gray --- */

.csr_box_gray{
	background-color: #F8F8F8;
	border: 1px solid #ED9F23
}

/* --- .csr_btn --- */

.csr_btn01,.csr_btn02{
	margin: 1.8rem 0 3rem;
}
.csr_btn01 a{
	color: #fff;
	max-width: 140px;
	background-color: #ED9F23;
	padding: .8rem 2.5rem;
	position: relative;
	display: block;
	font-size: 1.2em;
	font-weight: 500;
	text-align: center;
	opacity: 1;
	border-radius: 50vh;
	margin: 0 auto 5rem auto;
}
.csr_btn01 a:hover{text-decoration: none;}
.csr_btn01 a::after{
	content: "";
	width: 6px;
	height: 6px;
	border: 0;
	border-top: 2px solid;
	border-right: 2px solid;
	position: absolute;
	right: 17px;
	top: 21px;
	transform: rotate(45deg);
}
.csr_btn02 a{
	color: #ED9F23;
	max-width: 260px;
	background-color: #FCEEC0;
	padding: .8rem 1rem;
	position: relative;
	display: block;
	font-size: 1em;
	font-weight: 500;
	text-align: center;
	opacity: 1;
	margin: 0 auto 5rem auto;
}


/* --- .csr_number --- */

ul.csr_number{
	margin-top: 1em
}
.csr_number li{
	position: relative;
	line-height: 2;
	counter-increment: title;
	background-color: #F4F4F4;
	border: 1px solid #E5E5E5;
	padding: 0.8em 1.2em 0.8em 3.0em;
	display: inline-block;
	margin-bottom: 0.5em;
	margin-right: 0.5em;
	border-radius: 2px
}
.csr_number li::before{
	content: counter(title);
	display: block;
	width: 19px;
	height: 19px;
	line-height: 19px;
	border-radius: 100%;
	position: absolute;
	left: 14px;
	top: 14px;
	text-align: center;
	color: #fff;
	font-size: .8em;
	background-color: #ED9F23;
}


/* --- .csr_pickup_box --- */

.csr_pickup_box{
	padding: 3.5rem;
	margin: 60px 50px;
	position: relative;
	background-color: #F9F9F9;
	box-shadow: 10px 10px #ED9F23;
	border: 2px solid #ED9F23;
}
.csr_pickup_box .csr_pickup_box_head{
	position: absolute;
	top: 10px;
	right: 15px;
	width: 230px;
	color: #ED9F23;
}
.csr_pickup_box .img{
	text-align: center;
}
.csr_pickup_box h5{
	font-family: 'Kiwi Maru', serif;
	font-weight: 500;
	font-size: 2.0em;
	letter-spacing: 2px;
	margin-bottom: 2rem;
	margin-top: 2rem;
	position: relative;
	padding: 0 0 10px 0;
	display: block;
	background-color: transparent;
	line-height: 1.3
}
.csr_pickup_box h5::after{
	width: 200px;
	height: 3px;
	border-radius: 3px;
	position: absolute;
	content: "";
	left: 0px;
	bottom: -10px;
	background-color: #ED9F23;
}
@media(max-width: 768px){
.csr_pickup_box{
	padding: 2rem;
	margin: 0 ;
	position: static
}
.csr_pickup_box .csr_pickup_box_head{
width: 160px;
	margin: 0 auto;
	position: static
}
.csr_pickup_box h5{
	font-size: 1.8em;
	text-align: center
}
.csr_pickup_box h5::after{
	width: 100%;
	height: 3px;
	border-radius: 3px;
	position: absolute;
	content: "";
	left: 0px;
	bottom: -10px
}
}


/* --- .csr_list --- */

.csr_list li{
	position: relative;
	padding-left: .8rem;
	line-height: 2;
	counter-increment: title;
}
.csr_list li::before{
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	position: absolute;
	left: 0;
	top: 10px;
	background-color: #ED9F23;
}


/* --- .csr_base --- */

table.csr_base{
  border-collapse: collapse;
  width: 100%;
	margin-bottom: 2rem;
}
table.mb10{
	margin-bottom: 10px!important;
}
.csr_base th.t_top {
  border-top: #ED9F23 4px solid;
}
.csr_base th{
	border-bottom: #BCBCBC 1px dotted;
	text-align: left;
	padding: 1.4rem;
 	font-weight: bold;
	background-color: #F1F1F1;
	font-size: 1.1em
}
.csr_base th.pd05{
	padding: 1.4rem 0.5rem ;
}
.csr_base td.t_top{
  border-top: #B4B4B4 4px solid;
}
.csr_base td{
  border-bottom: #e3e3e3 1px dotted;
  text-align: left;
  padding: .9rem;
font-size: 1.1em
}
.csr_base .border_top_dot{
  border-top: #e3e3e3 1px dotted;
}
.csr_base caption{
	font-size: 1.1em;
	font-weight: bold;
	color:  #ED9F23;
	margin-bottom: 0.5rem;
}
.csr_base caption span:last-child{
	color: #4d4d4d;
	font-weight: normal;
	font-size: 0.8em;
	text-align: right;
	margin-left: auto!important;
	width: 50%;
}
.csr_base caption span{
	display: inline-block;
	width: 50%
}
.vertical_word{
	writing-mode: vertical-rl!important;
	word-spacing: nowrap;
	text-align: left;
}
@media(max-width: 768px) {
table.csr_base{
	display: block;
  	overflow-x: scroll;
 	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.csr_base th{
  padding: .7rem;
font-size: .9em
}
.csr_base td{
  padding: .7rem;
font-size: .9em
}

}

.fsz09em {
	font-size: 0.9em!important;
}