@charset "utf-8";
#page_top {
	background-image: url(../image/about/sdgs/sdgs-page_top@pc.webp);
}
	.page_top__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		height: 100%;
		padding: 0;
	}
		.page_top__sdgs_title {
			width: 100%;
			height: auto;
		}
			.page_top__sdgs_title__logo {
				display: block;
				width: 453px;
				height: auto;
				margin: 0 auto 30px 0;
			}
			.page_top__sdgs_title__ja {
				display: block;
				width: 100%;
				height: auto;
				font-size: 24px;
				font-weight: 600;
				line-height: 1;
				letter-spacing: 0.05em;
				color: var(--color--white);
			}

#sdgs {
	width: 100%;
	height: auto;
	padding: 100px 0 0;
}
	.sdgs__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.sdgs__contents {
			width: 100%;
			height: auto;
			padding: 0 0 46px;
		}
			.sdgs__contents__main {
				display: flex;
				justify-content: space-between;
				align-items: center;	
				width: 90%;
				max-width: 1070px;
				height: auto;
				margin: 0 auto 134px;
			}
				.sdgs__contents__heading {
					width: auto;
					height: auto;
				}
					.sdgs__contents__heading__ttl {
						font-size: 37px;
						font-weight: 700;
						line-height: 1.5;
						letter-spacing: 0.08em;
						color: #0098d8;
					}
						.sdgs__contents__heading__ttl span {
							display: inline-block;
							position: relative;
							margin: 0 0 0 5px
						}
							.sdgs__contents__heading__ttl span::before {
								content: "エス・ディー・ジーズ";
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: -0.1em;
								color: #0098d8;
								white-space: nowrap;
								position: absolute;
								top: -4px;
								left: 50%;
								transform: translateX(-50%);
							}
				.sdgs__contents__details {
					width: auto;
					height: auto;
				}
					.sdgs__contents__text {
						margin: 0 auto 48px;
						font-size: 16px;
						font-weight: 500;
						line-height: 2;
						letter-spacing: 0.04em;
					}
					.sdgs__contents__btn_wrap {
						width: 150px;
					}
			.sdgs__contents__attempt {
				width: 95%;
				max-width: 1220px;
				height: auto;
				margin: 0 auto;
			}
				.sdgs__contents__attempt__text {
					width: 100%;
					height: auto;
					margin: 0 auto 42px;
					font-size: 26px;
					font-weight: 600;
					line-height: 1;
					letter-spacing: 0.08em;
					text-align: center;
					color: var(--color--navy-3);
				}
					.sdgs__contents__attempt__text .smallpc {
						display: none;
					}
				.sdgs__contents__attempt__logo {
					width: 442px;
					height: auto;
					margin: 0 auto 60px;
				}
				.sdgs__contents__attempt__ttl {
					width: 100%;
					max-width: 987px;
					height: auto;
					padding: 8px 0 10px;
					margin: 0 auto 54px;
					background-color: var(--color--navy-3);
					font-size: 25px;
					font-weight: 600;
					line-height: 1;
					letter-spacing: 0.08em;
					text-align: center;
					color: var(--color--white);
				}
				.sdgs__contents__attempt__list {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-wrap: wrap;
					gap: 10px;
					width: 100%;
					height: auto;
					counter-reset: number 0;
				}
					.sdgs__contents__attempt__item {
						flex: 1;
						max-width: 260px;
						height: auto;
					}
						.sdgs__contents__attempt__item::before {
							counter-increment: number 1;
							content: counter(number) '';
							display: block;
							width: 100%;
							height: auto;
							margin: 0 auto 8px;
							font-size: 50px;
							font-weight: 600;
							line-height: 1.16;
							letter-spacing: 0em;
							color: var(--color--navy-3);
							text-align: center;
						}
						.sdgs__contents__attempt__item__text {
							width: 100%;
							height: auto;
							padding: 12px 0;
							margin: 0 auto 35px;
							border-top: 1px solid var(--color--navy-3);
							border-bottom: 1px solid var(--color--navy-3);
						}
							.sdgs__contents__attempt__item__text p {
								font-size: 18px;
								font-weight: 600;
								line-height: 1.5;
								letter-spacing: 0.04em;
								text-align: center;
								color: var(--color--navy-3);
							}
						.sdgs__contents__attempt__item__image {
							width: auto;
							height: 63px;
							margin: 0 auto;
						}
							.sdgs__contents__attempt__item__image img {
								width: auto;
								height: 100%;
								margin: 0 auto;
							}
		.sdgs__attempt {
			width: 100%;
			height: auto;
			margin: 0 auto;
			background-color: var(--color--beige);
			position: relative;
		}
			.sdgs__attempt__fixed {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
				pointer-events: none;
			}
				.sdgs__attempt__fixed_container {
					width: 100%;
					height: 130px;
					padding: 8px 0;
					background-color: var(--color--navy-3);
					will-change: auto;
					position: sticky;
					top: calc(100% - 130px);
					left: 0;
				}
					.sdgs__attempt__fixed__heading {
						width: 100%;
						height: auto;
						margin: 0 auto 8px;
						font-size: 12px;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0;
						text-align: center;
						color: var(--color--white);
					}
					.sdgs__attempt__fixed__list {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						width: 90%;
						max-width: 550px;
						height: auto;
						margin: 0 auto;
					}
						.sdgs__attempt__fixed__list__item {
							width: 132px;
							height: auto;
						}
							.sdgs__attempt__fixed__list__item__image {
								width: 50px;
								height: auto;
								aspect-ratio: 1 / 1;
								margin: 0 auto 3px;
							}
							.sdgs__attempt__fixed__list__item__details {
								width: 100%;
								height: auto;
							}
								.sdgs__attempt__fixed__list__item__details dt {
									width: 100%;
									height: auto;
									margin: 0 auto 3px;
									font-size: 12px;
									font-weight: 500;
									line-height: 1.2;
									letter-spacing: 0.04em;
									text-align: center;
									color: var(--color--white);
									white-space: nowrap;
								}
								.sdgs__attempt__fixed__list__item__details dd {
									width: 100%;
									height: auto;
									font-size: 10px;
									font-weight: 500;
									line-height: 1.2;
									letter-spacing: 0;
									text-align: center;
									color: var(--color--white);
								}
			.sdgs__attempt_list {
				width: 100%;
				height: auto;
				padding: 0 0 280px;
				margin: 0 auto;
				counter-reset: number 0;
			}
				.sdgs__attempt_list__item {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					width: 90%;
					max-width: 1040px;
					height: auto;
					padding: 92px 0 54px;
					margin: 0 auto;
				}
					.sdgs__attempt_list__item__heading {
						width: calc((300 / 1040) * 100%);
						height: auto;
					}
						.sdgs__attempt_list__item__heading::before {
							counter-increment: number 1;
							content: counter(number) '';
							display: block;
							width: 100%;
							height: auto;
							margin: 0 auto 12px;
							font-size: 56px;
							font-weight: 600;
							line-height: 1.16;
							letter-spacing: 0em;
							color: var(--color--navy-3);
							text-align: center;
						}
						.sdgs__attempt_list__item__heading__text {
							width: 100%;
							height: auto;
							padding: 22px 0;
							border-top: 2px solid var(--color--navy-3);
							border-bottom: 2px solid var(--color--navy-3);
							margin: 0 auto 40px;
						}
							.sdgs__attempt_list__item__heading__text p {
								font-size: 20px;
								font-weight: 600;
								line-height: 1.5;
								letter-spacing: 0.04em;
								text-align: center;
								color: var(--color--navy-3);
							}
						.sdgs__attempt_list__item__heading__image {
							width: auto;
							height: 72px;
							margin: 0 auto;
						}
							.sdgs__attempt_list__item__heading__image img {
								width: auto;
								height: 100%;
								margin: 0 auto;
							}
					.sdgs__attempt_list__item__contents {
						width: calc((630 / 1040) * 100%);
						height: auto;
					}
						.sdgs__attempt_list__item__contents__ttl {
							width: 100%;
							height: auto;
							margin: 0 auto 28px;
							font-size: 20px;
							font-weight: 900;
							line-height: 1.6;
							letter-spacing: 0.04em;
							color: var(--color--navy-3);
						}
						.sdgs__attempt_list__item__contents__text {
							width: 100%;
							height: auto;
							margin: 0 auto 46px;
							font-size: 16px;
							font-weight: 600;
							line-height: 1.8;
							letter-spacing: 0.04em;
							color: var(--color--navy-3);
						}
						.sdgs__attempt_list__item__contents__list {
							display: flex;
							flex-direction: column;
							gap: 36px;
							width: 100%;
							height: auto;
						}
							.sdgs__attempt_list__item__contents__list__item {
								width: 100%;
								height: auto;
							}
								.sdgs__attempt_list__item__contents__list__item dt {
									width: 100%;
									height: auto;
									padding: 11px 0 12px;
									margin: 0 auto 20px;
									background-color: var(--color--navy-3);
									font-size: 19px;
									font-weight: 500;
									line-height: 1;
									letter-spacing: 0em;
									text-align: center;
									color: var(--color--white);
								}
								.sdgs__attempt_list__item__contents__list__item dd {
									width: 100%;
									height: auto;
									font-size: 16px;
									font-weight: 500;
									line-height: 2;
									letter-spacing: 0.04em;
									color: var(--color--navy-3);
								}
						.sdgs__attempt_list__item__contents__hitohana {
							width: 100%;
							height: auto;
							padding: 45px 36px;
							margin: 64px auto 0;
							border-radius: 20px;
							background-color: var(--color--white);
						}
							.sdgs__attempt_list__item__contents__hitohana__details {
								width: 100%;
								height: auto;
								margin: 0 auto 24px;
							}
								.sdgs__attempt_list__item__contents__hitohana__details dt {
									width: 100%;
									height: auto;
									margin: 0 auto 16px;
									font-size: 20px;
									font-weight: 700;
									line-height: 1.5;
									letter-spacing: 0em;
									color: var(--color--navy-3);
								}
								.sdgs__attempt_list__item__contents__hitohana__details dd {
									width: 100%;
									height: auto;
									font-size: 14px;
									font-weight: 500;
									line-height: 2;
									letter-spacing: 0em;
									color: var(--color--navy-3);
								}
							.sdgs__attempt_list__item__contents__hitohana__hp {
								width: 100%;
								height: auto;
								font-size: 16px;
								font-weight: 500;
								line-height: 1.5;
								letter-spacing: 0em;
								color: var(--color--navy-3);
							}
								.sdgs__attempt_list__item__contents__hitohana__hp a {
									color: var(--color--navy-3);
								}
							.sdgs__attempt_list__item__contents__hitohana__image {
								width: calc((535.6 / 565) * 100%);
								height: auto;
								margin: 46px auto 0 0;
							}

/* PC ================================================== */
@media all and (max-width: 1060px){
			.sdgs__contents__main {
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				gap: 40px;
			}
				.sdgs__contents__attempt__text {
					line-height: 1.5;
				}
					.sdgs__contents__attempt__text .smallpc {
						display: inline-block;
					}
				.sdgs__contents__attempt__list {
					gap: 40px 0px;
				}
					.sdgs__contents__attempt__item {
						flex: initial;
						width: 48%;
						max-width: initial;
					}
}

@media all and (min-width: 769px){
				.sdgs__attempt__fixed__nav {
					display: none;
				}
}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#page_top {
	background-image: url(../image/about/sdgs/sdgs-page_top@sp.webp);
}
			.page_top__sdgs_title__logo {
				width: 300px;
				margin: 0 auto 16px 0;
			}
			.page_top__sdgs_title__ja {
				font-size: 14px;
				font-weight: 700;
				line-height: 1;
			}

#sdgs {
	padding: 45px 0 0;
}
	.sdgs__inner {
		width: 100%;
		max-width: initial;
	}
		.sdgs__contents {
			padding: 0 0 62px;
		}
			.sdgs__contents__main {
				gap: 30px;
				width: calc((310 / 390) * 100%);
				max-width: initial;
				margin: 0 auto 115px;
			}
				.sdgs__contents__heading {
					width: 100%;
				}
					.sdgs__contents__heading__ttl {
						font-size: 24px;
						letter-spacing: 0.05em;
					}
						.sdgs__contents__heading__ttl span {
							margin: 0 0 0 3px
						}
							.sdgs__contents__heading__ttl span::before {
								content: "エス・ディー・ジーズ";
								font-size: 10px;
								letter-spacing: -0.2em;
								top: -3px;
							}
				.sdgs__contents__details {
					width: 100%;
				}
					.sdgs__contents__text {
						margin: 0 auto 32px;
						font-size: 14px;
						font-weight: 700;
						line-height: 2.4;
						letter-spacing: 0.05em;
						text-align: justify;
					}
					.sdgs__contents__btn_wrap {
						margin: 0 auto;
					}
			.sdgs__contents__attempt {
				width: 100%;
				max-width: initial;
			}
				.sdgs__contents__attempt__text {
					margin: 0 auto 18px;
					font-size: 24px;
					font-weight: 700;
					letter-spacing: 0.05em;
				}
				.sdgs__contents__attempt__logo {
					width: calc((300 / 390) * 100%);
					max-width: 400px;
					margin: 0 auto 30px
				}
				.sdgs__contents__attempt__ttl {
					max-width: initial;
					padding: 12px 0 13px;
					margin: 0 auto 30px;
					background-color: var(--color--navy-3);
					font-size: 20px;
					font-weight: 700;
				}
				.sdgs__contents__attempt__list {
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					gap: 100px;
					width: 100%;
				}
					.sdgs__contents__attempt__item {
						flex: initial;
						width: 100%;
						max-width: initial;
					}
						.sdgs__contents__attempt__item__text {
							width: 260px;
							margin: 0 auto;
							border-bottom: none;
						}
							.sdgs__contents__attempt__item__text p {
								font-weight: 700;
							}
						.sdgs__contents__attempt__item__image {
							height: 80px;
						}
		.sdgs__attempt {
			background-color: var(--color--beige);
		}
			.sdgs__attempt__fixed {
				pointer-events: auto;
			}
				.sdgs__attempt__fixed__nav {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 350px;
					height: auto;
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 10;
					transform: translate(-50%, -50%);
					pointer-events: none;
				}
					.sdgs__attempt__fixed__nav__prev,
					.sdgs__attempt__fixed__nav__next {
						width: 35px;
						height: auto;
						pointer-events: auto;
						transition: .3s;
					}
					.sdgs__attempt__fixed__nav__prev._disabled,
					.sdgs__attempt__fixed__nav__next._disabled {
						opacity: 0.3;
					}
				.sdgs__attempt__fixed_container {
					width: 100%;
					height: 130px;
					padding: 14px 0 0;
					top: calc(100dvh - 130px);
					overflow: hidden;
				}
					.sdgs__attempt__fixed__heading {
						margin: 0 auto;
						font-size: 13px;
					}
					.sdgs__attempt__fixed__list {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						width: 400vw;
						max-width: initial;
					}
						.sdgs__attempt__fixed__list__item {
							flex-shrink: 0;
							width: 100vw;
							padding: 14px 0 12px;
						}
							.sdgs__attempt__fixed__list__item__inner {
								display: flex;
								justify-content: flex-start;
								align-items: center;	
								width: 240px;
								height: auto;
								margin: 0 auto;
							}
								.sdgs__attempt__fixed__list__item__image {
									width: 75px;
									margin: 0 18px 0 0;
								}
								.sdgs__attempt__fixed__list__item__details {
									width: auto;
								}
									.sdgs__attempt__fixed__list__item__details dt {
										margin: 0 auto 2px;
										line-height: 1;
										text-align: left;
									}
									.sdgs__attempt__fixed__list__item__details dd {
										font-size: 14px;
										text-align: left;
									}
			.sdgs__attempt_list {
				padding: 0 0 130px;
			}
				.sdgs__attempt_list__item {
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					width: 100%;
					max-width: initial;
					padding: 36px 0 64px;
				}
					.sdgs__attempt_list__item__heading {
						width: 100%;
					}
						.sdgs__attempt_list__item__heading__text {
							width: 260px;
							padding: 10px 0;
							border-bottom: none;
							margin: 0 auto;
						}
							.sdgs__attempt_list__item__heading__text p {
								font-size: 18px;
							}
						.sdgs__attempt_list__item__heading__image {
							height: 80px;
						}
					.sdgs__attempt_list__item__contents {
						width: 100%;
						padding: 68px 0 0;
						overflow: hidden;
					}
						.sdgs__attempt_list__item__contents__ttl {
							width: calc((310 / 390) * 100%);
							margin: 0 auto 30px;
							font-family: "Zen Old Mincho", serif;
							font-size: 24px;
							font-weight: 700;
							line-height: 1.5;
							letter-spacing: 0.05em;
							white-space: nowrap;
						}
						.sdgs__attempt_list__item__contents__text {
							width: calc((310 / 390) * 100%);
							margin: 0 auto 56px;
							font-size: 14px;
							font-weight: 700;
							line-height: 2.4;
							letter-spacing: 0em;
							text-align: justify;
						}
						.sdgs__attempt_list__item__contents__list {
							gap: 64px;
						}
								.sdgs__attempt_list__item__contents__list__item dt {
									padding: 8px 0 9px;
									margin: 0 auto 34px;
									font-size: 20px;
									font-weight: 400;
									line-height: 1.4;
								}
								.sdgs__attempt_list__item__contents__list__item dd {
									width: calc((310 / 390) * 100%);
									margin: 0 auto;
									font-size: 14px;
									font-weight: 400;
									line-height: 2.4;
									letter-spacing: 0em;
									text-align: justify;
								}
						.sdgs__attempt_list__item__contents__hitohana {
							width: calc((340 / 390) * 100%);
							padding: 20px 20px;
							margin: 40px auto 0;
							border-radius: 16px;
						}
							.sdgs__attempt_list__item__contents__hitohana__details {
								margin: 0 auto 12px;
							}
								.sdgs__attempt_list__item__contents__hitohana__details dt {
									margin: 0 auto 16px;
									font-size: 16px;
									line-height: 1.4;
									text-align: justify;
								}
								.sdgs__attempt_list__item__contents__hitohana__details dd{
									text-align: justify;
								}
							.sdgs__attempt_list__item__contents__hitohana__hp {
								font-size: 14px;
							}
							.sdgs__attempt_list__item__contents__hitohana__image {
								width: 100%;
								margin: 26px auto 0;
							}
}
/* SP ================================================== */
@media all and (max-width: 575px){

}