@charset "UTF-8";
/* sustina.css */

.lower_img_mv .lmv_img {
	background-image: url(../../img/sustina/mv_pc.jpg);
}
.lower_mv h1 {
	font-size: min(5vw,70px);
}

@media screen and (max-width:768px) {
	.lower_img_mv .lmv_img {
		background-image: url(../../img/sustina/mv_sp.jpg);
	}
	.lmv_cont:after {
		right: 0;
	}
	.lower_mv h1 {
		font-size: min(12vw,56px);
	}
}


/* ===== Thoughts SDGs ===== */
.headcont_flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	padding-right: 40px;
}
.headcont_flex h2 {
	min-width: fit-content;
	margin-right: 1.25em;
}
.headcont_flex p {
	max-width: 510px;
	text-align:  justify;
	line-height: 2;
}

/* ===== Economic growth ===== */
/* ----- 背景装飾（線）----- */
#eco_wrap,
#reuse_wrap,
#workstyle_wrap,
#env_wrap {
	position: relative;
}
.eco_border,
.reuse_border {
	height: 200%;
}
/* 左に線 */
.eco_border:before,
.workstyle_border:before {
	top: 0;
	transform: skew(20deg);
}
/* 右に線 */
.reuse_border:before,
.env_border:before  {
	top: 0;
	right: 0;
	transform: skew(-20deg);
}



/* --- 青いカード flex --- */
#eco_first {
	position: relative;
}
#eco_first .grad_decoLT {
	top: 0;
}
.blue_card_flex {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
}
.blue_card {
	width: calc(100%/3 - 1%);
	padding: min(2vw,30px);
	background-color: #03008b;
}
.blue_card h4 {
	font-size: 20px;
	font-size: clamp(16px,1.6vw,20px);
	text-align: center;
	color: #fff;
}
.blue_card p {
	font-size: 16px;
	font-size: clamp(12px,1.2vw,16px);
	line-height: 2;
	text-align: justify;
	color: #fff;
	margin-top: .75em;
}

/* --- エコドライブの推進 --- */
.head_eco {
	font-size: 24px;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: min(6vw,60px);
}
.blue_tag {
	min-width: fit-content;
	font-size: 16px;
	font-size: clamp(12px,1.2vw,16px);
	font-weight: normal;
	line-height: 1;
	display: inline-block;
	color: #fff;
	background-color: #03008b;
	margin-top: .15em;
	margin-right: 1em;
	padding: .5em;
}
.drive_flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.drive_flex .cont_wrap {
	width: 58%;
}
.drive_flex .img_wrap {
	width: 35%;
}
.drive_flex img + img {
	margin-top: min(2vw,20px);
}
/* eco border-box */
.eborder_box {
	padding: min(2vw,30px);
	padding-top: 0;
	border: 1px solid #03008b;
}
.eborder_box + .eborder_box {
	margin-top: min(4vw,40px);
}
.eborder_box h4 {
	width: fit-content;
	min-width: 15em;
	font-size: 20px;
	font-size: clamp(16px,1.6vw,20px);
	display: block;
	line-height: 1;
	text-align: center;
	color: #03008b;
	background-color: #fff;
	margin: -.5em auto min(1.5vw,20px);
}
.eborder_box p {
	font-size: 16px;
	font-size: clamp(12px,1.2vw,16px);
	line-height: 2;
}

/* ----- ペーパーレス化 ----- */
.eborder_flex {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}
.eborder_flex .eborder_box {
	width: calc(100%/2 - 1%);
	margin-top: 0;
}
.paper_img {
	width: 90%;
	display: block;
	margin-left:  auto;
	margin-right: auto;
}


/* ===== 働きがいのある環境づくり ===== */
.place_flex {
	width: 70%;
	max-width: 720px;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	margin-left:  auto;
	margin-right: auto;
}
.place_flex .img_wrap {
	width: calc(100%/2 - 2%);
}
/* eco border-box */
#work_style .eborder_box h4 {
	min-width: 11em;
}
#work_style .eborder_box:nth-of-type(n+3) {
	margin-top: min(4vw,40px);
}

/* ----- 健康で安全な職場環境 ----- */
#work_env .blue_card {
	background-color: #f0f0f8;
}
#work_env .blue_card .img_wrap {
	width: 50%;
	display: block;
	margin-left:   auto;
	margin-right:  auto;
	margin-bottom: min(2vw,30px);

}
#work_env .blue_card h4 {
	text-align: center;
	color: #03008b;
}
#work_env .blue_card p {
	color: #4d4d4d;
}


/* ===== ブログ（当社の取り組み） ===== */
.blog_cat span {
	background-color: #d2f0c7;
}

/* 背景装飾（線）左 */
.blog_border01:before {
	left:   -5%;
	bottom: -5%;
	transform: scale(1.25) skew(30deg);
}
/* 背景装飾（線）右 */
.blog_border02:before {
	right:  0;
	bottom: 0;
	transform: skew(-20deg);
}
/* 背景装飾（グラデーション） */
#sec_blog .grad_decoLB {
	height: 50%;
	bottom: 0;
}
.blog_wrap {
	display: flex;
	align-items: stretch;
}
.blog_wrap .blog_card {
	height: auto;
}


/* ===== Affiliate 加盟団体 ===== */
#sec_af .grad_decoLB {
	top: 0;
}
.afcont_wrap p {
	font-size: clamp(18px,1.8vw,20px);
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: .5em; /* underlineと文字との間余白 */
}
.bcat_sdgs {
	background-color: #d2f0c7 !important;
}


/* ===== 円グラフ ===== */
.charts {
	width: 92%;
	display: flex;
	gap: 0;
	justify-content: center;
	margin: auto;
}
.chart-item {
	display: block;
	position: relative;
	flex: 1;
	aspect-ratio: 1 / 1;
}
.circle-chart {
	width:  100%;
	height: 100%;
	display: block;
}
.chart-item .label {
	width:  92%;
	height: 92%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top:  4%;
	left: 4%;
}
.circle_cont {
	font-size: 16px;
	font-size: min(1.6vw,16px);
	font-weight: bold;
	margin-bottom: 1em;
	color: #03008b;
}
.circle_num,
.circle_num strong {
	font-family: avenir-lt-pro, "Lato", sans-serif !important;
	font-weight: bold;
	line-height: 1;
	color: #03008b;
}
.circle_num {
	font-size: min(4vw,40px);
}
.circle_num strong {
	font-size: min(5.6vw,56px);
	font-weight: 900;
	letter-spacing: .05em;
}
/* ===== ブログ（SDGs） ===== */
#sec_blog .blog_card:last-of-type  {
	border-right: 1px solid rgba(0,94,181,.25);
}



@media screen and (max-width:1099px) {
	/* ===== workstyle ===== */
	#sec_workstyle .headcont_flex {
		flex-wrap: wrap;
	}
	#sec_workstyle .head_cont {
		width: 100%;
		margin-top: 1em;
	}
	#sec_workstyle .head_cont p {
		max-width: inherit;
		width: 100%;
	}
}










@media screen and (max-width:768px) {
	/* ===== Thoughts サステナビリティ ===== */
	.headcont_flex {
		flex-wrap: wrap;
		padding-right: 0;
	}
	.headcont_flex p {
		padding-left:  20px;
		padding-right: 20px;
	}
	#sec_sdgs .headcont_flex {
		padding-right: 20px;
	}


	/* ===== Economic growth 持続可能な経済成長の実現 ===== */
	.headcont_flex h2 {
		margin-right: 0;
	}
	.h2_left_border strong {
		font-size: clamp(28px,7.467vw,30px);
	}
	/* blue card */
	#blue_wrap {
		width: 100%;
	}
	.blue_card_flex {
		flex-wrap: wrap;
	}
	.blue_card_flex .blue_card {
		width: 100%;
		padding: 20px;
	}
	.blue_card_flex .blue_card + .blue_card {
		margin-top: 15px;
	}
	/* ----- [気候変動対策] エコドライブの推進 ----- */
	.drive_flex {
		flex-wrap: wrap;
	}
	.drive_flex .cont_wrap,
	.drive_flex .img_wrap  {
		width: 100%;
	}
	/* 見出し */
	.head_eco {
		width: 100%;
		font-size: 18px;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.5em;
	}
	.blue_tag {
		font-size: 14px;
		margin: 0;
		margin-bottom: .5em;
	}
	/* 画像 */
	.drive_paper .img_wrap.sp_blk {
		width: 100%;
		display: flex !important;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-between;
	}
	.drive_paper .img_wrap > div {
		width: calc(100%/2 - 1.5%);
	}
	/* 青線BOX */
	.eborder_flex .eborder_box {
		width: 100%;
		padding-left:   20px;
		padding-right:  20px;
		padding-bottom: 20px;
	}
	.eborder_box + .eborder_box {
		margin-top: 25px;
	}
	.eborder_box h4 {
		margin-bottom: 1em;
	}
	/* グラフ画像 */
	.paper_img {
		width: 100%;
	}
	/* ----- reuse_wrap ----- */
	#sec_sdgs img.sp_blk,
	.paper_img.sp_blk,
	#reuse_wrap img.sp_blk {
		max-width: 350px;
		margin-left:  auto;
		margin-right: auto;
	}


	/* ===== Work Style Innovation 働きがいのある環境づくり ===== */
	.add_headwidth strong {
		letter-spacing: 0;
	}
	/* 働く環境と人づくり */
	.place_flex {
		width: 100%;
	}
	#work_style .eborder_flex {
		align-items: stretch;
	}
	#work_style .eborder_box  {
		width: calc(100%/2 - 1.5%);
		margin-top: 0 !important;
		padding-left:   12px;
		padding-right:  12px;
		padding-bottom: 12px;
	}
	#work_style .eborder_box:nth-of-type(-n+2) {
		margin-bottom: 20px;
	}
	#work_style .eborder_box h4 {
		font-size: min(3.733vw,14px);
		min-width: 9em;
	}
	/* 健康で安全な職場環境 */
	.blue_card_flex .blue_card {
		padding: clamp(20px,8vw,30px) 20px;
	}
	#work_env .blue_card .img_wrap,
	#work_env .blue_card h4 {
		margin-bottom: 20px;
	}
	#work_env .blue_card p {
		margin-top: 0;
	}

	/* ===== blog（sdgs） ===== */
	.sp_swiper_wrap {
		max-width: 640px;
		position: relative;
		padding-left:  20px;
		padding-right: 21px;
		z-index: 10;
	}
	.blog_card {
		width: 100% !important;
		position: relative;
		background-color: #fff;
	}
	.swiper-slide img {
		width: 100%;
		object-fit: cover;
		object-position: center;
	}
	/* スクロールバー */
	.swiper_scroll .swiper-scrollbar {
		width: 100% !important;
		max-width: 600px !important;
		position: relative !important;
		margin-left:  auto;
		margin-right: auto;
		background-color: #e5eff8;
	}
	

	/* ===== 円グラフ ===== */
	.charts {
		width: 100%;
		max-width: 360px;
		flex-wrap: wrap;
	}
	.chart-item {
		width: calc(100%/2);
		flex: inherit;
	}
	.circle-chart {
		transform: scale(1.1);
	}
	.circle_yohaku {
		margin-top: -5%;
	}
	.circle_cont {
		font-size: 12px;
		font-size: min(2.8vw,12.5px);
	}
	.circle_num {
		font-size: 23px;
		font-size: min(6.133vw,27px);
	}
	.circle_num strong {
		font-size: 32px;
		font-size: min(8.56vw,38px);
	}

	/* ===== ブログ（SDGs） ===== */
	#sec_blog .swiper-slide .blog_card {
		border-right: none !important;
	}
	#sec_blog .swiper-slide:last-of-type .blog_card {
		border-right: 1px solid rgba(0,94,181,.25) !important;
	}
	
}