@charset "utf-8";

/* ----------------------------------------
	sdgs.css
---------------------------------------- */
#sdgs {
  padding-top: 90px;
}

.h1-img {
  overflow: visible;
}

.h1-img img {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* SDGs intro */
.sdgs-intro {
  position: relative;
  margin-top: 8rem;
  padding: 8rem 20%;
  border-radius: 30px;
  background-color: #3067d1;
  overflow: hidden;
}

.sdgs-intro-container {
	display: flex;
	align-items: center;
	gap: 4rem;
}

.sdgs-intro-container div {
	flex: 2;
	line-height: 2;
}

.sdgs-intro-container figure {
	flex: 1.5;
}

.sdgs-intro p {
  color: #fff;
}

.sdgs-intro-container p {
  margin-bottom: 1rem;
}

/* loop-text */
.loop-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  overflow: hidden;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.loop-text p {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 10rem;
  font-weight: bold;
  color: rgba(255,255,255,0.05);
  padding-right: 4rem;
  animation: loop-scroll 180s linear infinite;
}

/* アニメーション */
@keyframes loop-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.sdgs-contents-wrapper {
	margin: 8rem 15%;
}

#sdgs h2 {
	font-size: 1.2rem;
	font-weight: 700;
	padding: .5em .7em;
	margin-bottom: 1rem;
	border-left: none;
}

#sdgs h2 span {
	font-size: 2.5rem;
	font-weight: bold;
	color: #3067d1;
	font-family: "Montserrat", sans-serif;
	margin-right: 1rem;
}

#sdgs h2::after {
	content:attr(data-en);
	position: absolute;
	top: 0;
	right: 0;
	color: #EAF0FA;
	font-family: "Montserrat", sans-serif;
	font-size: 2.5rem;
}

.h2-line {
	border-bottom: 1px solid #bac7cc;
	margin-bottom: 4rem;
}

.sdgs-contents {
	display: flex;
	align-items: center;
	gap: 6rem;
}

.sdgs-contents:not(:last-child) {
	margin-bottom: 4rem;
}

.sdgs-contents-left {
	flex: 1;
	gap: 2rem;
}

.sdgs-contents-right {
	flex: 1.2;
}

.sdgs-contents-left {
	display: flex;
}

.sdgs-contents-right-ttl {
	color: #3067d1;
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 2rem;
}

.sdgs-contents-right-list-ttl {
	background-color: #EAF0FA;
	/* color: #fff; */
    font-weight: 700;
	padding: 0.5rem 2rem;
	border-radius: 10px 10px 0 0;
	border: 1px solid #2589d0;
}

.sdgs-contents-right ul {
	/* background-color: #EAF0FA; */
	padding: 2rem;
	border-radius: 0 0 10px 10px;
	border-left: 1px solid #bac7cc;
	border-right: 1px solid #bac7cc;
	border-bottom: 1px solid #bac7cc;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.sdgs-contents-right li {
	line-height: 2;
  text-indent: -0.6em;
  padding-left: 0.6em;
}

.sdgs-contents-right li:not(:last-child) {
	margin-bottom: 1rem;
}

.sdgs-contents-right i {
	color: #3067d1;
}

/* 画面幅1180px以下 */
@media screen and (max-width: 1180px) {
	.sdgs-intro {
        padding: 8rem 6%;
    }

  .sdgs-contents-wrapper {
    margin: 8rem 6%;
  }

  .sdgs-contents {
    	gap: 4rem;
	}
}

/* 画面幅1024px以下 */
@media screen and (max-width: 1024px) {
	.sdgs-contents {
		display: block;
	}

	.sdgs-contents-left {
		margin: 0 5% 4rem 5%;
	}
}

/* 画面幅767px以下 */
@media screen and (max-width: 767px) {
	.sdgs-intro {
        padding: 4rem 6%;
    }

  .sdgs-contents-wrapper {
    margin: 4rem 6%;
  }

	.sdgs-intro-container {
		display: block;
	}

	.sdgs-intro-container p {
    	margin-bottom: 4rem;
	}
	
	.sdgs-intro-container figure {
    	margin: 0 10%;
	}
}

/* 画面幅575px以下 */
@media screen and (max-width: 575px) {
	.sdgs-intro {
        padding: 4rem 1rem;
    }

  .sdgs-contents-wrapper {
    margin: 4rem 1rem;
  }

	.sdgs-intro-container p {
    	margin-bottom: 2rem;
	}

	.sdgs-intro-container figure {
		margin: 0;
	}

	.sdgs-contents-left {
		margin: 0 0 2rem 0;
	}
}