@charset "UTF-8";

/*---------------------------
SDGS PC用
---------------------------*/

/* SDGSとは
----------------------*/
.sdgs-note {
	padding: 0 50px;
	position: relative;
}

.sdgs-note h2 {
	padding: 0 0 100px;
}
.sdgs-note h2 br {
	display: none;
}

.sdgs-tree-sp {
	display: none;
}
.sdgs-tree-pc {
	position: absolute;
	right: 60px;
	top: -60px;
	z-index: 10;
}

.sdgs-box {
	background: #f5faff;
	position: relative;
}

.sdgs-box div {
	padding: 0 50px 90px;
}

.sdgs-box div p:first-child {
	width: 616px;
	position: absolute;
	top: -64px;
}
.sdgs-box div p:nth-child(2) {
	width: 530px;
	margin-left: auto;
	padding: 90px 60px 0 0;
	line-height: 2;
}

.goals {
	padding: 100px 0;
	background: url(../image/sdgs/bg-goals.jpg) no-repeat center top;
	background-size: cover;
}
.goals .goals_contents {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 770px;
	height: 104px;
	margin: 0 auto;
	background: #fff;
}
.goals_contents .logo_goals,
.goals_contents .logo_company {
	padding: 0 38px;
}
.goals_contents .logo_goals {
	position: relative;
}
.goals_contents .logo_goals::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 77px;
	background: var(--base);
	top: calc(50% - 77px / 2);
	right: 0;
}
.goals_contents .logo_goals img {
	width: 354px;
}
.goals_contents .logo_company img {
	width: 254px;
}

.goals-ttl {
	padding: 30px 0 0;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

.goals-ttl br.pcno {
	display: none;
}

/* ACTION PC
----------------------*/
.action {
	padding: 100px 0 0;
	overflow-x: hidden;
}
.action h2 {
	text-align: center;
}
.sdgs-icon {
	margin: 0 0 80px;
	padding: 40px 0 0;
	background-image: url(../image/sdgs/bg-sdgs-left.jpg), url(../image/sdgs/bg-sdgs-right.jpg);
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, right bottom;
	background-size: 280px, 292px;
}

.sdgs-sp {
	display: none;
}
.sdgs-icon ol {
	display: flex;
	margin: 0 auto;
	padding: 0 0 15px;
}
.sdgs-icon ol li {
	width: 130px;
	margin: 0 12px 0 0;
}
.sdgs-icon ol li:last-child {
	margin: 0;
}
.wh556 {
	width: 556px;
}
.wh698 {
	width: 698px;
}

/* ACTION 01-03 -------------*/
.act-left {
	padding: 220px 0 70px;
	position: relative;
}
.act-left.bg01 {
	background: url(../image/sdgs/bg-action01.jpg) no-repeat center top;
	background-size: cover;
}
.act-left.bg03 {
	background: url(../image/sdgs/bg-action03.jpg) no-repeat center top;
	background-size: cover;
}

/* タイトル下画像 */
.act-left > p {
	width: 100%;
	position: absolute;
	right: 0;
	top: 70px;
}
.act-left > p span {
	display: block;
	width: 91%;
	margin-left: auto;
	height: 424px;
}
.act-left > p.main-ph01 span {
	background: url(../image/sdgs/action-main01.jpg) no-repeat left top;
	background-size: cover;
}
.act-left > p.main-ph03 span {
	background: url(../image/sdgs/action-main03.jpg) no-repeat left top;
	background-size: cover;
}

/* 内容 01-03 */
.act-box {
	width: 100%;
	position: absolute;
	top: 220px;
	left: 0;
}
.act-box article {
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 0 0 0;
	position: relative;
}

.act-box article h3 {
	position: absolute;
	left: 0;
	top: -90px;
}

.act-box article h4 span {
	display: block;
	line-height: 1;
	margin: 0 0 12px;
	padding: 12px 0;
	text-align: center;
	font-size: 3.6rem;
	font-weight: bold;
	color: #fff;
	background: var(--base);
}
.act-box article h4 span.text01 {
	width: 412px;
}
.act-box article h4 span.text02 {
	width: 576px;
}
.act-box article h4 span.text05 {
	width: 462px;
}
.act-box article h4 span.text06 {
	width: 385px;
}

.act-box article div {
	display: flex;
	padding: 90px 60px 0;
}
.act-box article div p {
	width: 800px;
	padding: 0 64px 0 0;
}
.act-box article div ol {
	width: 278px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.act-box article div ol li {
	width: 130px;
	padding: 0 0 18px;
}
/* 白枠 01-03 */
.act-bgwhite {
	width: 96%;
	height: 660px;
	background: #fff;
}

/* ACTION 02 -------------*/
.act-right {
	padding: 220px 0 70px;
	position: relative;
}
.act-right.bg02 {
	background: url(../image/sdgs/bg-action02.jpg) no-repeat center top;
	background-size: cover;
}

/* タイトル下画像 02 */
.act-right > p {
	width: 100%;
	position: absolute;
	right: 0;
	top: 70px;
}
.act-right > p span {
	display: block;
	width: 91%;
	height: 424px;
	background: url(../image/sdgs/action-main02.jpg) no-repeat left top;
	background-size: cover;
}

/* 内容 02 */
.act-box-r {
	width: 100%;
	position: absolute;
	top: 220px;
	left: 0;
}
.act-box-r article {
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 0 0 0;
	position: relative;
}
.act-box-r article h3 {
	position: absolute;
	right: 0;
	top: -90px;
}

.act-box-r article h4 span {
	display: block;
	line-height: 1;
	margin-left: auto;
	margin-bottom: 12px;
	padding: 12px 0;
	text-align: center;
	font-size: 3.6rem;
	font-weight: bold;
	color: #fff;
	background: var(--base);
}
.act-box-r article h4 span.text03 {
	width: 452px;
}
.act-box-r article h4 span.text04 {
	width: 426px;
}

.act-box-r article div {
	display: flex;
	flex-direction: row-reverse;
	padding: 90px 60px 0;
}
.act-box-r article div p {
	width: 800px;
	padding: 0 0 0 64px;
}
.act-box-r article div ol {
	width: 278px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.act-box-r article div ol li {
	width: 130px;
	padding: 0 0 18px;
}

/* 白枠 02 */
.act-bgwhite-r {
	width: 96%;
	height: 660px;
	margin-left: auto;
	background: #fff;
}

/*----------------------------------------------------
PC用
----------------------------------------------------*/
@media only screen and (min-width: 1600px) {
	.act-left > p span,
	.act-right > p span {
		width: 85%;
	}
}

/*----------------------------------------------------
PC用
----------------------------------------------------*/
@media only screen and (min-width: 1800px) {
	.act-left > p span,
	.act-right > p span {
		width: 78%;
	}
}