@charset "UTF-8";

/* sustainability */
.mainv{
	position: relative;
}
h2.contents_ttl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background: rgba(0, 173, 169, 0.9);
	padding: 0.5em 0;
}
h2.contents_ttl img{
	width: 60%;
	display: block;
	margin: 0 auto;
}

.su-col.sdgs_hyogo {
	align-items: center;
}
.su-col.sdgs_hyogo div{
	flex-basis: 20%;
}

.ecoaction21>p.sustainability_subttl{
	margin: 4rem 0;
}
ol.su-ol_sub{
	list-style: none;
	padding: 0;
}

.count{
	counter-reset: number;
}
.sustainability-wrap {
	position: relative;
	margin: 6.5rem 0;
}
/* .slider-wrapper      イラスト切り替えの場合       {
	position: absolute;
	display: inline-block;
	width: 36%;
	height: 100%;
	z-index: 0;
} */
.sustainability-wrap::after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 36%;
	height: 100%;
	z-index: 0;
}
.su01{
	background: center left/ contain no-repeat url(../assets/img/sustainability/bg01.png);
}
/* .su01>.slider-wrapper      イラスト切り替えの場合       {
	top: 0;
	right: 6%;
}  */
.su01::after {
	top: 0;
	right: 6%;
	background: center top/ contain no-repeat url(../assets/img/sustainability/sustainability-img01.png);
}
.su02{
	background: center right/ contain no-repeat url(../assets/img/sustainability/bg02.png);
}
.su02::after {
	top: 5rem;
	left: 6%;
	background: center top/ contain no-repeat url(../assets/img/sustainability/sustainability-img02.png);
}
.su03{
	background: top/ contain no-repeat url(../assets/img/sustainability/bg03.png);
}
.su03::after {
	width: 40%;
	top: 0;
	left: 6%;
	background: center top/ contain no-repeat url(../assets/img/sustainability/sustainability-img03.png);
}
.su04{
	background: center left/ contain no-repeat url(../assets/img/sustainability/bg04.png);
}
.su04::after {
	top: 27rem;
	right: 6%;
	background: center top/ contain no-repeat url(../assets/img/sustainability/sustainability-img04.png);
}
.su05{
	background: center center/ contain no-repeat url(../assets/img/sustainability/bg05.png);
}
.su05::after {
	width: 34%;
	bottom: 82%;
	right: 9%;
	background: center top / contain no-repeat url(../assets/img/sustainability/sustainability-img05.png);
	height: 26%;
}
.su06{
	background: top right/ contain no-repeat url(../assets/img/sustainability/bg06.png);
}
.su06::after {
	width: 49%;
	top: 27%;
	right: 5%;
	background: center top / contain no-repeat url(../assets/img/sustainability/sustainability-img06.png);
}
.su07{
	background: center center/ contain no-repeat url(../assets/img/sustainability/bg07.png);
}
.su07::after {
	width: 34%;
	top: -2%;
	right: 15%;
	background: center top / contain no-repeat url(../assets/img/sustainability/sustainability-img07.png);
}
.su08{
	background: center left/ contain no-repeat url(../assets/img/sustainability/bg08.png);
}
.su08::after {
	top: -7%;
	right: 16%;
	background: center top/ contain no-repeat url(../assets/img/sustainability/sustainability-img08.png);
	height: 50%;
	width: 20%;
}


.sustainability-contents-wrap{
	padding: 16rem 0 6rem 0;
	z-index: 1;
	position: relative;
}
h3.section-sustainability_ttl {
	font-size: 3.8rem;
	font-weight: 800;
	margin: 0 0 1em 0;
	position: relative;
}
h3.section-sustainability_ttl::before{
	position: absolute;
	content: counter(number, decimal-leading-zero);
	counter-increment: number 1;
	bottom: 100%;
	left: 0;
	line-height: 1;
	font-size: 2.3em;
	font-weight: 700;
	letter-spacing: 0;
}
.su01 h3.section-sustainability_ttl {
	color: #036EB7;
}
.su02 h3.section-sustainability_ttl {
	color: #8DC21F;
}
.su03 h3.section-sustainability_ttl {
	color: #910782;
}
.su04 h3.section-sustainability_ttl {
	color: #E50012;
}
.su05 h3.section-sustainability_ttl {
	color: #946134;
}
.su06 h3.section-sustainability_ttl {
	color: #182987;
}
.su07 h3.section-sustainability_ttl {
	color: #F29600;
}
.su08 h3.section-sustainability_ttl {
	color: #00A199;

}

.sustainability_subttl{
	font-size: 1.9rem;
	font-weight: bold;
}
.sustainability_subttl span{
	color: #fff;
	padding: 0.3em 1em;
	background-color: #036EB7;
	margin-right: 1em;
}
.su-col{
	display: flex;
	margin-top: 4rem;
	gap: 5rem;
}
.col-su01{
	font-size: 1.9rem;
	font-weight: bold;
	margin-bottom: 4rem;
}
.col-su01 p{
	line-height: 1;
}
.col-su01 span{
	color: #F29600;
	font-size: 8.8rem;
	font-weight: bold;
}
.col-su01 span.ps{
	font-size: 0.5em;
}
.col-su01_02{
	margin: 1.5rem 0;
}

.list-su01{
	background-color: #fff;
	padding: 1.5em 2em;
	border: 1px solid #000;
	font-size: 1.3rem;
	font-weight: bold;
	display: inline-block;
}
.list-su01 li{
	margin-bottom: 0.5em;
	display: flex;
	justify-content: space-between;
}
.list-su01 li:last-of-type{
	margin-bottom: 0;
}
.list-su01 li>span{
	margin-left: 2em;
}
.su01-table{
	width: 100%;
	margin: 4rem auto 0;
	font-size: 1.3rem;
}

.su02 .sustainability-contents-wrap{
	padding: 16rem 0 12rem 0;
}
.su02-wrap{
	width: 50%;
	margin: 0 0 0 auto;
}
.su02-wrap p+p{
	margin-top: 1.5rem;
}
.col-su02{
	width: 100%;
	justify-content: center;
	text-align: center;
	margin-top: 3rem;
	font-size: 1.3rem;
	font-weight: bold;
	flex-wrap: wrap;
}
.col-su02 a{
	flex-basis: calc((100% - 5rem)/2);
}
.col-su02 a:first-of-type{
	flex-basis: 60%;
}
.col-su02 a:hover{
	opacity: 1;
}

.su03-wrap {
	width: 65%;
	margin: 0 0 4rem auto;
}
.su03-wrap p{
	width: 60%;
	margin: 0 0 0 auto;
}
.su03 .sustainability_subttl span {
	display: block;
	background-color: #910782;
	text-align: center;
	margin: 0;
}
.col-su03{
	width: 100%;
	justify-content: center;
	text-align: center;
	/* margin: 3rem 0 6.5rem;   col-su03が最後の場合   */
	margin: 3rem 0 0;
	font-size: 1.3rem;
	font-weight: bold;
	flex-wrap: wrap;
	gap: 3rem;
}
.col-su03-item{
	width: calc((100% - 3rem)/2);
	flex-direction: column;
	margin: 0;
	gap: 2rem;
	font-size: 1.9rem;
	text-align: left;
}
.item-ttl::before {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 0.5rem;
	background-color: #000;
	vertical-align: baseline;
}
.col-su03-item span{
	color: #F29600;
	font-size: 5.7rem;
	font-weight: bold;
	line-height: 1;
}
.col-su03-item span.ps {
	font-size: 0.5em;
}
.col-su03-item a {
	width: 70%;
	display: block;
	margin: 2rem auto;
}
.col-su03-item a:hover {
	opacity: 1;
}
.su03txt{
	margin: 1rem 0 0 0;
}

.su04_txt01{
	width: 50%;
	margin-bottom: 4rem;
}
.su04 .sustainability_subttl span{
	background-color: #00A63C;
	padding: 0.5em 1.3em;
	font-size: 1.4rem;
}
.chart-wrap{
	margin: 3rem 0 6rem 0;
	width: 70%;
}
.col-su04{
	font-size: 1.1rem;
}
.col-su04_01 p,.col-su04_02 p{
	margin-bottom: 1em;
}
.col-su04_01 p, .col-su04_01 dt{
	color: #036EB7;
	font-size: 1.3em;
	font-weight: bold;
}
.col-su04_02 p, .col-su04_02 dt{
	color: #E95387;
	font-size: 1.3em;
	font-weight: bold;
}
.col-su04 dl{
	position: relative;
	margin-left: 2em;
}
.col-su04 dl::before{
	content: counter(number);
	counter-increment: number 1;
	background-color: #036EB7;
	border-radius: 100%;
	font-size: 1.3em;
	display: inline-block;
	vertical-align: middle;
	color: #FFF;
	text-align: center;
	width: 35px;
	line-height: 35px;
	position: absolute;
	top: 0.1em;
	left: -1.7em;
	font-weight: bold;
}
.col-su04 .col-su04_02 dl::before{
	background-color: #E95387;
}

table.su05-table{
	width: 80%;
	margin: 4rem auto 0;
	font-size: 1.3rem;
}
thead th {
	background-color: #8DC21F;
	color: #fff;
	padding: 0.3em 0 0.3em 1.5em;
	border: 1px solid #000;
}
tbody th, tbody td {
	/* width: 25%; */
	padding: 0.3em 0;
	border: 1px solid #000;
}
tbody {
	text-align: center;
}
tbody th {
	background-color: #EFEFEF;
}
tbody td {
	background-color: #fff;
}
caption{
	text-align: right;
	color: #000;
	padding: 0;
	font-size: 1rem;
	margin-top: 1em;
}
.col-su05{
	flex-wrap: wrap;
	margin-bottom:6.5rem;
}
.col-su05 div{
	flex-basis: calc((100% - 5rem)/2);
}

.su06_txt{
	width: 40%;
}
.col-su06{
	width: 65%;
}

.su07-contents{
	margin: 6rem 0;
}
.su07-contents .sustainability_subttl{
	margin-bottom: 1em;
}
.su07-contents_img{
	margin-top: 4rem;
}
.col-su07{
	gap: 3rem;
	margin: 4rem 0;
}
.col-su07 div{
	width: 70%;
}
.col-su07 p{
	width: 30%;
}



.su08 .sustainability-contents-wrap{
	padding: 19rem 0;
}
.col-su08{
	justify-content: space-around;
	text-align: center;
	gap: 0;
	margin-bottom: 3rem;
}
.col-su08 a{
	flex-basis: 20%;
}
.col-su08 a:hover{
	opacity: 1;
}
.col-su08 a p{
	display: inline-block;
	margin-top: 1.5rem;
}
.sv03_btn {
	position: relative;
	display: block;
	text-align: center;
	width: 70%;
	font-size: min(2.5vw, 1.7rem);
	font-weight: bold;
	margin: 2rem auto;
	padding: 1em 0;
	background-color: #F6AB00;
}
.sv03_btn span {
	color: #fff;
}
.sv03_btn::after {
	position: absolute;
	content: "\f061";
	font-family: 'Font Awesome 5 Free';
	top: 50%;
	transform: translateY(-50%);
	right: 1em;
	background: #fff;
	color: #F6AB00;
	padding: 0 0.3em;
	border-radius: 50%;
	font-size: 0.9em;
}
/* .col-su08 a p::before{
	display: inline-block;
	content: "";
	background: center left/ contain no-repeat url(../assets/img/sustainability/icon01.png);
	width: 2em;
	height: 2em;
	vertical-align: middle;
} */


@media screen and (max-width: 959px){
	.su05::after {
    bottom: 75%;
	}
	.su08::after {
    top: 15%;
	}
	.sustainability-wrap {
    background-size: cover;
	}

}


@media screen and (max-width: 768px){

	h3.section-sustainability_ttl {
    font-size: min(9vw, 3.8rem);
	}
	.sustainability_subttl{
    font-size: min(5vw, 1.5rem);
	}
	.col-su01 {
    flex-wrap: wrap;
	}
	.col-su01_02 {
    flex-wrap: wrap;
		gap: 2rem;
	}
	.list-su01 {
    width: 90%;
		margin: 0 auto;
	}
	.su02-wrap {
    width: 100%;
	}
	.col-su02 {
    flex-wrap: wrap;
	}
	.su03-wrap,.su03-wrap p {
		width: 100%;
	}
	.su04::after {
    top: 0;
	}
	.su04_txt01 {
    width: 100%;
	}
	.su04 .sustainability_subttl span {
    margin: 0;
		font-size: min(5vw, 1.4rem);
		padding: 0.5em;
		display: block;
	}
	.chart-wrap {
		width: 100%;
	}
	.col-su04,.col-su05,.col-su08{
    flex-direction: column;
	}
	.su08::after {
		top: -3%;
	}
	.col-su08 a {
    margin-bottom: 2.5rem;
	}
	.su08 .sustainability-contents-wrap {
    padding: 10rem 0 0 0;
	}
	.sv03_btn {
		width: 100%;
		font-size: 1.3rem;
	}
	.sv03_btn::after {
		display: none;
	}

}

.notice_box {
  font-size: 15px;
  margin-top: 1.5rem;
}

.notice_box .notice_list > li {
  display: flex;
}

.notice_box .notice_list > li:before {
  content: "※";
  margin-left: 0.25em;
}

.notice_box .notice_list > li:not(:first-of-type) {
  margin-top: 0.5rem;
}