@charset "UTF-8";
/****************************************
	main
****************************************/

.back-area {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -1;
}

.back-area .b-animation {
	width: clamp(200px, 50vw, 600px);
	max-width: 600px;
	aspect-ratio: 1 / 1;
	perspective: 800px;
	height:100vh;
	overflow: hidden;
}

/* 親は回さない */
.back-area .b-animation .orbit {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateZ(15deg);
}

.back-area .b-animation .orbit-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
}

/* ボール */
.back-area .b-animation .ball {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(20px, 8%, 50px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;

	transform: none !important;

	background: radial-gradient(circle at 30% 30%, #ffffffaa, currentColor 40%, #00000055 100%);
	box-shadow:
		0 10px 20px rgba(0,0,0,0.2),
		inset -10px -10px 20px rgba(0,0,0,0.3),
		inset 5px 5px 10px rgba(255,255,255,0.4);
}

.back-area .b-animation .blue {
	color: #4aa3ff;
	animation: orbitFake 6s linear infinite;
}
.back-area .b-animation .red {
	color: #ff5a5a;
	animation: orbitFake 6s linear infinite;
	animation-delay: -2s;
}
.back-area .b-animation .yellow {
	color: #ffd84a;
	animation: orbitFake 6s linear infinite;
	animation-delay: -4s;
}

@keyframes orbitFake {
	0% {
		transform: translate(-50%, -50%) translateX(0px) scale(1.4);
		filter: brightness(1);
		z-index: 3;
	}
	24% {
		z-index: 3;
	}
	25% {
		transform: translate(-50%, -50%) translateX(40%) scale(1.0);
		filter: brightness(0.9);
		z-index: 2;
	}
	49% {
		z-index: 2;
	}
	50% {
		transform: translate(-50%, -50%) translateX(0px) scale(0.5);
		filter: brightness(0.6);
		z-index: 1;
	}
	74% {
		z-index: 1;
	}
	75% {
		transform: translate(-50%, -50%) translateX(-40%) scale(1.0);
		filter: brightness(0.9);
		z-index: 2;
	}
	99% {
		z-index: 2;
	}
	100% {
		transform: translate(-50%, -50%) translateX(0px) scale(1.4);
		filter: brightness(1);
		z-index: 3;
	}
}


main {
}

section#main-back {
	position:relative;
	z-index:1;
	width:100%;
	height:100vh;
	min-height: 600px;
	padding:20px;
	background: #e4bb33;
	background: linear-gradient(to bottom right, #fff, #aaa);
}

section#main-back .main-img {
	position: relative;
	width: 100%;
	max-width:1480px;
	margin:0px auto;
	height: 100%;
	background: url(../img/back.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 22px;
	overflow: hidden;
}

section#main-back .main-img .m-c-area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: rgba(255,255,255,0.6);
	border-radius: 150px;
	width:90%;
	max-width:600px;
	height:30vh;
	display: flex;
	align-items: end;
	justify-content: center;
	flex-wrap: wrap;
	z-index:1;
}

section#main-back .main-img .m-c-area .m-c-animation {
	width:100%;
	height:55%;
}

section#main-back .main-img .m-c-area .m-c-animation .flex {
	height:100%;
	justify-content: center;
}

section#main-back .main-img .m-c-area .m-c-animation .m-c-a-1 {
	position:relative;
	width:25%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
}
section#main-back .main-img .m-c-area .m-c-animation .m-c-a-2 {
	position:relative;
	width:25%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
}
section#main-back .main-img .m-c-area .m-c-animation .m-c-a-3 {
	position:relative;
	width:25%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
}

section#main-back .main-img .m-c-area .m-c-animation .ball-wrap {
	position: relative;
	width: 100%;
	height: 100%; /* 親基準を持たせる */
}

section#main-back .main-img .m-c-area .m-c-animation .ball {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) scale(1, 1);
	width: 40%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	animation: bounce 1.2s infinite ease-in-out;
}

section#main-back .main-img .m-c-area .m-c-animation .m-c-a-1 .ball { background: #4aa3ff; animation-duration: 1.8s;} /* 青 */
section#main-back .main-img .m-c-area .m-c-animation .m-c-a-2 .ball { background: #ff5a5a; animation-duration: 2.3s;} /* 赤 */
section#main-back .main-img .m-c-area .m-c-animation .m-c-a-3 .ball { background: #ffd84a; animation-duration: 2.8s;} /* 黄 */

section#main-back .main-img .m-c-area .m-c-animation .ball:nth-child(2) {
	animation-delay: 0.4s;
}
section#main-back .main-img .m-c-area .m-c-animation .ball:nth-child(3) {
	animation-delay: 0.8s;
}

@keyframes bounce {
	0% {
		bottom: 0%;
		transform: translateX(-50%) scale(1, 1);
	}
	20% {
		bottom: 80%; /* ← 親高さ基準 */
		transform: translateX(-50%) scale(0.9, 1.1);
	}
	40% {
		bottom: 0%;
		transform: translateX(-50%) scale(1.1, 0.9);
	}
	60% {
		bottom: 30%;
		transform: translateX(-50%) scale(0.95, 1.05);
	}
	80% {
		bottom: 0%;
		transform: translateX(-50%) scale(1.05, 0.95);
	}
	100% {
		bottom: 0%;
		transform: translateX(-50%) scale(1, 1);
	}
}

section#main-back .main-img .m-c-area .m-c-title {
	width:100%;
	text-align: center;
	font-size:clamp(18px, 5.5vw, 42px);
	font-weight:600;
	line-height: 1.3em;
	height: 45%;
}

section#main-back .main-img .m-copy {
	position: absolute;
	right: 10%;
	top: 15%;
	font-size:clamp(18px, 5.5vw, 28px);
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1.2em;
	z-index:2;
}

section#main-back .main-img .m-copy span {
	display: block;
}

section#main-back .main-img .m-copy span:nth-child(2) {
	padding:30px 0px 0px 0px;
}


section#main-back .main-img .bg-text {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0; /* 背景扱い */
	transform: rotate(-7deg);
}

section#main-back .main-img .bg-text-inner {
	position: absolute;
	top: 25%;
	left: 0;
	white-space: nowrap;
	display: inline-block;
	animation: scrollText 20s linear infinite;
	font-size: clamp(16px, 5.5vw, 36px);
	color: rgba(0,0,0,0.2); /* 薄くする */
	font-weight: bold;
}

@keyframes scrollText {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}


section#main-back .main-img .m-sentence {
	position: absolute;
	left: 15px;
	bottom: 15px;
	width: calc(100% - 30px);
}

section#main-back .main-img .m-sentence p {
	font-size:clamp(14px, 3.5vw, 22px);
}

section#main-back .main-img .m-sentence p span {
	display: inline-block;
}


@media screen and (max-width:1480px) {
	/*
	section#main-back {
		background:#fff;
	}
	*/
}

@media screen and (max-width:480px) {
	section#main-back {
		padding:7px
	}
}


section#about {
	position: relative;
	background: rgba(245,245,245,.9);
	margin:20px;
	padding:70px 0px;
}

section#about .about-inner {
	margin:70px 10% 0px;
}

section#about .about-inner ul {
	margin:30px 0px 0px;
	width:100%;
	max-width:500px;
}

section#about .about-inner li {
	padding:10px 0px 5px;
	font-weight:600;
}

section#about .about-inner li span {
	display:inline-block;
}

@media screen and (max-width:480px) {
	section#about {
		margin:10px;
	}
}



section#news {
	position: relative;
	/*background: linear-gradient(to bottom right, #fec743, #fcdb8a);*/
	background: url(../img/news_back.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	margin:0px;
	padding:70px 0px 70px 20px;
}

section#news .news-area {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding:70px 10%;
}

section#news .news-area::before {
	content: "NEWS";
	position: absolute;
	top: 0;
	left: 60%;

	writing-mode: vertical-rl;
	text-orientation: mixed;

	font-size: 200px;
	line-height: 1;

	opacity: 0.2;
	pointer-events: none;
}

section#news .news-area .news-inner {
	position: relative;
	display: flex;
	gap: 20px;
	transition: transform .5s ease;
}

section#news .news-area .news-inner .news-item {
	flex: 0 0 75%;
	background:#fff;
	padding:0px;
	display: flex;
	flex-wrap: wrap;
	transition: 
		opacity .5s ease,
		transform .5s ease;
	cursor: pointer;
	text-decoration: none;
	color:#000;
	transition: .4s;
}

section#news .news-area .news-inner .news-item:hover {
	background: #3eb4dd;
	color:#fff;
}

section#news .news-area .news-inner .news-item.is-fade {
	opacity: 0;
	transform: scale(0.92);
}

section#news .news-area .news-inner .news-item .img {
	width:40%;
	font-size:0;
	overflow: hidden;
}

section#news .news-area .news-inner .news-item .img img {
	width:100%;
	height: auto;
	transition: transform .4s ease;
}

section#news .news-area .news-inner .news-item:hover .img img {
	transform: scale(1.1);
}


section#news .news-area .news-inner .news-item .info {
	position: relative;
	width: 60%;
	padding: clamp(20px, 4vw, 60px);
	padding-bottom: 70px;
	transition: .4s;
}



section#news .news-area .news-inner .news-item .info .date {
	font-size:clamp(12px, 2vw, 20px);
}

section#news .news-area .news-inner .news-item .info .title {
	font-size:clamp(12px, 3vw, 24px);
}

section#news .news-area .news-inner .news-item .info .more {
	position: absolute;
	left: clamp(12px, 2vw, 24px);
	right: clamp(12px, 2vw, 24px);
	bottom: clamp(12px, 2vw, 24px);

	height: clamp(44px, 5vw, 70px);
	border-radius: 36px;

	background: #fff;
	box-shadow: 0 6px 15px rgba(0,0,0,0.15);

	transform: scale(0.3);
	opacity: 1;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: transform .6s ease, opacity .7s ease;
}

section#news .news-area .news-inner .news-item .info .more::before {
	content: "→";
	color: #3eb4dd;
	font-size:clamp(16px, 3vw, 28px);
	font-weight: bold;
}

section#news .news-area .news-inner .news-item:hover .info .more {
	transform: scale(1);
	opacity: 1;
	transition: transform .35s cubic-bezier(.2,1.2,.3,1), opacity .2s;
}


section#news .news-area .slide-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 90px; /* 少し余裕持たせる */
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;

	background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
}

section#news .news-area .slide-btn button {
	appearance: none;
	-webkit-appearance: none;

	width: 70px;
	height: 70px;
	border-radius: 50%;

	border: none;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(255,255,255,0.7);

	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);

	box-shadow: 
		0 10px 30px rgba(0,0,0,0.4),
		0 0 0 2px rgba(255,255,255,0.6) inset;

	transition: transform .15s, box-shadow .15s, background .2s;
	position: relative;
}

section#news .news-area .slide-btn button::before {
	content: "";
	width: 10px;
	height: 10px;

	border-top: 2px solid #000;
	border-right: 2px solid #000;

	transform: rotate(45deg);
	transition: transform .2s;
}

section#news .news-area .slide-btn .prev::before {
	transform: rotate(-135deg);
}

section#news .news-area .slide-btn button:hover {
	transform: translateY(-2px);
	box-shadow: 
		0 8px 18px rgba(0,0,0,0.2),
		0 2px 6px rgba(0,0,0,0.15);
}

section#news .news-area .slide-btn button:active {
	transform: scale(0.92);
	box-shadow: 
		0 2px 6px rgba(0,0,0,0.2) inset;
}


section#news .news-list {
	width:100%;
	padding: 20px 10%;
}

.news-btn {
	font-size: clamp(18px, 3vw, 28px);
	letter-spacing: .05em;
	transition: .3s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color:#000;
	font-weight: 800;
}

.news-btn:hover {
	transform: translateX(20px);
	text-decoration: none;
	color:#333;
	letter-spacing: 0.2em;
}

.news-btn::after {
	content: "→";
	transition: transform .3s;
	font-weight: 800;
}

.news-btn:hover::after {
	transform: translateX(7px);
}


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

	section#news .news-area .news-inner .news-item {
		/*flex: 0 0 80%;*/
	}

}


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

	section#news .news-area .news-inner .news-item .img {
		width:100%;
	}

	section#news .news-area .news-inner .news-item .info {
		width:100%;
	}

	section#news .news-area .news-inner .news-item .info .more {
		transform: scale(0.7);
	}

}




section#business {
	position: relative;
	background: #f5f5f5;
	padding:0px 0px 70px;
}

section#business .business_inner {
	position: relative;
	margin: 30px 0px;
}

section#business .business_area {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	box-shadow: 0 3px 10px rgba(0,0,0,0.4);
} 

.business_area:nth-child(1) {
	width: 50%;
	position: relative;
	z-index: 1;
}

.business_area:nth-child(2) {
	width: calc(50% + 20px) !important;
	position: absolute;
	top: 20px;      /* ← 下にズラす */
	left: 50%;      /* ← 右に寄せる（ここがキモ） */
	transform: translateX(-20px);
	z-index: 2;
}

section#business .business_area .img {
	width: 50%;
	aspect-ratio: 1 / 1;
}

section#business .business_area .img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

section#business .business_area .info {
	background: #f5f5f5;
	width: 50%;
	padding: clamp(20px, 4vw, 60px);
}

section#business .business_area .info .title {
	font-size:clamp(18px, 3vw, 24px);
	font-weight: 600;
}

section#business .business_area .info .title span {
	display: inline-block;
}


section#business .business_area .info .dtl {
	font-size:clamp(14px, 2.5vw, 18px);
}


section#business .flow {
	max-width: 600px;
	margin: 110px auto 0px;
	padding: 40px 20px 0px;
}

section#business .flow .flow__lead {
	text-align: center;
	font-weight: bold;
	margin-bottom: 40px;
	line-height: 1.6;
}

section#business .flow .flow__lead span {
	display: inline-block;
}

section#business .flow .flow__list {
	position: relative;
	padding-left: 40px;
}

/* 縦ライン */
section#business .flow .flow__list::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 0;
	width: 2px;
	height: 100%;
	background: #ccc;
}

section#business .flow .flow__item {
	position: relative;
	margin-bottom: 30px;
	padding: 15px 15px 15px 20px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);

	opacity: 0;
	transform: translateY(30px);
}

/* 丸番号 */
section#business .flow .flow__num {
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background: #333;
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
}

/* 矢印っぽいアクセント */
section#business .flow .flow__item::after {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	background: #333;
	transform: translateY(-50%) rotate(45deg);
}

/* SP対応 */
@media (max-width: 600px) {
	section#business .flow .flow__item {
		font-size: 13px;
	}
}





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

	section#business .business_area {
		width: 95%;
		box-shadow: 0 3px 10px rgba(0,0,0,0.4);
	} 

	section#business .business_area:nth-child(2) {
		position: relative;
		top: auto;
		left:auto;
		margin-top: -10px;
		margin-left: auto;
		width: 90% !important;
		transform: translateX(0);
	}

	section#business .flow .flow {
		max-width: 600px;
		margin: 20px auto 0px;
		padding: 40px 20px;
	}


}

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

}


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

	section#business .business_inner {
		margin: 0px;
	}

	section#business .business_area {
		width:100%;
	}

	section#business .business_area:nth-child(2) {
		position: relative;
		top: auto;
		left:auto;
		margin-top: 0px;
		margin-left: 0;
		width: 100% !important;
		transform: translateX(0);
	}

	section#business .business_area .img {
		width: 100%;
		aspect-ratio: 1 / .6;
	}

	
	section#business .business_area .info {
		width: 100%;
	}

	section#business .flow {
		margin: 50px auto 0px;
	}


}

section#company {
	position: relative;
	background: rgba(255,255,255,.95);
	padding:0px 0px 30px;
}

section#company .company-inner {
	position: relative;
	margin: 70px 7% 0px;
}

section#company .company-table {
	width:100%;
	margin:0 auto;
	max-width:1080px;
}

section#company .company-table th {
	background: #4aa3ff;
	color: #fff;
	font-weight: 600;
	text-align: left;
	vertical-align: top;
	padding: 20px;
	border-bottom: 3px solid #fff;
	border-radius: 32px 0px 0px 0px;
}

section#company .company-table td {
	background: #fff;
	background: #f5f5f5;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	padding: 20px;
	border-bottom: 3px solid #fff;
	border-radius: 0px 0px 32px 0px;
}

section#company h3 {
	width:100%;
	margin:110px auto 0px;
	max-width:1080px;
	color: rgba(0,0,0,.3);
	text-align: center;
}

section#company h3 small {
	display: block;
	font-size:18px;
}


section#company .history__list {
	width:100%;
	margin:10px auto 0px;
	max-width:700px;
}

section#company .history__item {
	padding:20px 10px 0px;
}

section#company .history__item .history__num {
	display: inline-block;
	color: #888;
	font-size:24px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 3px 15px;
	text-align: left;
	border-radius: 32px;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

section#company .history__item .history__num strong ,
section#company .history__item .history__num small {
	display: inline-block;
	width: 0.75ch;
	text-align: center;
}

section#company .history__item p {
	position: relative;
	display: inline-block;
	font-size:clamp(16px, 3.5vw, 18px);
	padding: 3px 15px 3px 18px;
	padding-left:clamp(22px, 2.5vw, 28px);
	vertical-align: middle;
	margin-left: 30px;
	line-height: 1.3em;
}

section#company .history__item p::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: 12px;
	height: 5px;
	background: #ff5a5a;
	transform: translateY(-50%);
}

section#company .base {
	margin: 70px auto 0px;
	max-width: 420px;
}

section#company .base .pdf-card {
	display: block;
	max-width: 420px;
	padding: 24px;
	border: 1px solid #ddd;
	border-radius: 12px;
	text-decoration: none;
	color: #000;
	background: #fff;
	transition: all 0.3s ease;
}

section#company .base .pdf-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

section#company .base .pdf-card__label {
	font-size: 12px;
	color: #888;
	margin-bottom: 25px;
}

section#company .base .pdf-card__title {
	font-size: 20px;
	margin-bottom: 8px;
}

section#company .base .pdf-card__desc {
	font-size: 13px;
	color: #666;
	margin-bottom: 16px;
}

section#company .base .pdf-card__btn {
	font-size: 14px;
	border-bottom: 1px solid #000;
}



section#company .base-dtl {
	margin: 40px auto 0px;
	max-width: 1080px;
}

section#company .base-dtl .base-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
}

section#company .base-dtl .base-card {
	padding: 24px;
	border: 1px solid #ddd;
	background: #f9f9f5;
	transition: 0.3s;
}

section#company .base-dtl .base-card .name {
	font-size: 18px;
	margin-bottom: 10px;
}

section#company .base-dtl .address {
	font-size: 13px;
	color: #666;
	margin-bottom: 14px;
	line-height: 1.6;
}

section#company .base-dtl .info-row {
	display: flex;
	gap: 16px;
	font-size: 13px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

section#company .base-dtl .mail {
	display: inline-block;
	font-size: 13px;
	text-decoration: none;
	color: #000;
}



section#company .permission {
	margin: 0px auto 0px;
	max-width: 1080px;
}

section#company .permission h4 {
	margin:50px 0px 20px;
}

section#company .permission .permit-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

section#company .permission .permit-table th,
section#company .permission .permit-table td {
	border-bottom: 1px solid #ddd;
	padding: 12px;
	text-align: left;
	vertical-align: top;
}

section#company .permission .permit-table th {
	background: #f7f7f7;
	font-weight: 500;
}

/* タグ */
section#company .permission .tag {
	display: inline-block;
	padding: 4px 8px;
	margin: 2px;
	font-size: 11px;
	border: 1px solid #ccc;
	border-radius: 20px;
}

/* 許可番号 */
section#company .permission .permit-num {
	font-family: monospace;
	letter-spacing: 0.05em;
	line-height: 1.6;
}

section#company .permission p {
	margin: 20px 0px 0px;
	font-size:11px;
}







@media screen and (max-width:1080px) {
	section#company .history__item .history__num {
		display: block;
		padding: 3px 15px;
		text-align: left;
		border-radius: 32px;
		vertical-align: middle;
		font-variant-numeric: tabular-nums;
	}

	section#company .history__item .history__num strong {
		width: 0.75ch;
		text-align: center;
	}
}





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

	section#company h3 {
		margin:50px auto 0px;
	}

	section#company .company-table th {
		display: block;
		padding: 20px;
		border-bottom: 3px solid #fff;
		border-radius: 32px 0px 0px 0px;
	}

	section#company .company-table td {
		display: block;
		padding: 20px;
		border-bottom: 3px solid #fff;
		border-radius: 0px 0px 32px 0px;
		margin-bottom:15px;
	}

	section#company .base-dtl .base-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	section#company .base-dtl .base-list .base-card {
		padding: 18px;
	}


	section#company .permission .permit-table thead {
		display: none;
	}

	section#company .permission .permit-table tr {
		display: block;
		border-bottom: 1px solid #aaa;
		padding: 12px 0;
	}

	section#company .permission .permit-table td {
		display: block;
		padding: 6px 0;
	}

	section#company .permission .permit-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		color: #888;
		margin-bottom: 2px;
	}

}






section#sdgs {
	padding: 100px 0px;
	text-align: center;
	overflow: hidden;
	background: rgba(244,244,244, .4);
}

section#sdgs .sdgs-text {
	padding: 40px 0px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.8;
	opacity: 0;
	transform: translateY(40px);
}

/* グラデーション（17色っぽく） */
section#sdgs .sdgs-line {
	height: 6px;
	width: 100%;
	background: linear-gradient(
		90deg,
		#e5243b, #dda63a, #4c9f38, #c5192d, #ff3a21,
		#26bde2, #fcc30b, #a21942, #fd6925,
		#dd1367, #fd9d24, #bf8b2e, #3f7e44,
		#0a97d9, #56c02b, #00689d, #19486a
	);
	background-size: 200% 100%;
}

section#sdgs .sdgs-line.top {
	transform: translateX(-100%);
}

section#sdgs .sdgs-line.bottom {
	transform: translateX(100%);
}

/* ゆっくり流れる */
@keyframes gradMove {
	0% { background-position: 0% 0; }
	100% { background-position: 200% 0; }
}

section#sdgs .sdgs-line.is-animate {
	animation: gradMove 8s linear infinite;
}

section#sdgs .sdgs-text span {
	background: linear-gradient(90deg, #e5243b, #4c9f38, #0a97d9);
	-webkit-background-clip: text;
	color: transparent;
}


@media (max-width: 768px) {
	section#sdgs .sdgs-text {
		font-size: 16px;
		line-height: 1.6;
	}

	section#sdgs .sdgs-section {
		padding: 80px 16px;
	}
}