#container {
	padding: 0;
}


.visual {
	height: 100vh;
	height: 100dvh;
	padding: 100px 20px 0;
	box-sizing: border-box;
	background: url(../../img/visual_sp.webp) no-repeat center 0 / cover;
	position: relative;
	z-index: 0;
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 150px;
		background: linear-gradient(0deg, transparent 0%, #000 400%);
		position: absolute;
		top: 60px;
		left: 0;
		z-index: 0;
	}
	.copy {
		line-height: 1.8;
		white-space: nowrap;
		color: #fff;
		font-size: min(calc(32/750*100vw), 24px);
		text-shadow: rgb(0, 0, 0) 4px 0px 0px, rgb(0, 0, 0) 3.87565px 0.989616px 0px, rgb(0, 0, 0) 3.51033px 1.9177px 0px, rgb(0, 0, 0) 2.92676px 2.72656px 0px, rgb(0, 0, 0) 2.16121px 3.36588px 0px, rgb(0, 0, 0) 1.26129px 3.79594px 0px, rgb(0, 0, 0) 0.282949px 3.98998px 0px, rgb(0, 0, 0) -0.712984px 3.93594px 0px, rgb(0, 0, 0) -1.66459px 3.63719px 0px, rgb(0, 0, 0) -2.51269px 3.11229px 0px, rgb(0, 0, 0) -3.20457px 2.39389px 0px, rgb(0, 0, 0) -3.69721px 1.52664px 0px, rgb(0, 0, 0) -3.95997px 0.56448px 0px, rgb(0, 0, 0) -3.97652px -0.432781px 0px, rgb(0, 0, 0) -3.74583px -1.40313px 0px, rgb(0, 0, 0) -3.28224px -2.28625px 0px, rgb(0, 0, 0) -2.61457px -3.02721px 0px, rgb(0, 0, 0) -1.78435px -3.57996px 0px, rgb(0, 0, 0) -0.843183px -3.91012px 0px, rgb(0, 0, 0) 0.150409px -3.99717px 0px, rgb(0, 0, 0) 1.13465px -3.8357px 0px, rgb(0, 0, 0) 2.04834px -3.43574px 0px, rgb(0, 0, 0) 2.83468px -2.82216px 0px, rgb(0, 0, 0) 3.44477px -2.03312px 0px, rgb(0, 0, 0) 3.84068px -1.11766px 0px, rgb(0, 0, 0) 3.9978px -0.132717px 0px;
		letter-spacing: 0;
		font-weight: var(--weight-bold);
		position: relative;
		z-index: 1;
		& strong {
			margin-bottom: .2em;
			display: block;
			font-size: min(calc(64/750*100vw), 64px);
			font-family: var(--font-en);
			font-weight: inherit;
			letter-spacing: 0.02em;
		}
		& span {
			font-weight: inherit;
			letter-spacing: -0.18em;
		}
	}
	.banner {
		width: calc(100% - 60px);
		margin: 0 15px;
		padding: 15px;
		background: rgba(255,255,255,.8);
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		left: 0;
		bottom: -65px;
		gap: 8px 10px;
		& li {
			width: 100%;
		}
		& a {
			font-size: min(calc(28/768*100vw), 13px);
			line-height: 1.5;
			display: flex;
			align-items: center;
			background: #fff;
			border: 4px solid #fff;
			@media (any-hover) {
				position: relative;
				&::before {
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					background: #000;
					position: absolute;
					top: 0;
					left: 0;
					transition: opacity .3s;
					opacity: 0;
				}
				&:hover {
					opacity: 1;
					&::before {
						opacity: .3;
					}
				}
			}
		}
		& img {
			width: min(calc(200/768*100vw), 100px);
			height: min(calc(200/768*100vw), 100px);
			object-fit: cover;
		}
		& span {
			padding: 10px 15px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
	}
	@media (width>=768px) {
		min-height: 800px;
		padding: 160px clamp(40px, (60/1000)*100vw, 80px) 0;
		background: url(../../img/visual.webp) no-repeat center bottom / cover;
		&::before {
			display: none;
		}
		.banner {
			width: 100%;
			margin: 0;
			padding: 0 clamp(40px, (60/1000)*100vw, 80px);
			box-sizing: border-box;
			background: none;
			bottom: 30px;
			& li {
				width: min(calc(50% - 5px), 380px);
				box-shadow: 0 0 5px #444;
			}
			& a {
				font-size: 15px;
			}
		}
	}
}


section {
	& h2 {
		margin-top: 100px;
		margin-bottom: .5em;
		font-size: 28px;
		color: var(--color-purple);
		font-weight: var(--weight-bold);
		text-align: center;
		& span {
			width: fit-content;
			margin: 0 auto;
			border-bottom: 2px dashed var(--color-red);
			display: block;
			font-size: 16px;
			color: var(--color-red);
		}
	}
	.btn-white {
		margin-top: 30px;
	}
	@media (width>=768px) {
		& h2 {
			font-size: 32px;
			margin-bottom: 1em;
		}
		.btn-white {
			margin-top: 50px;
		}
	}
}


.openList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px 0;
	& li {
		width: 100%;
	}
	& a {
		display: flex;
		flex-wrap: wrap;
		color: var(--color-black);
		font-size: 15px;
		position: relative;
	}
	.img {
		order: -3;
		width: 100%;
		aspect-ratio: 16/9;
		margin-bottom: 14px;
		display: block;
		object-fit: cover;

	}
	.date {
		order: -2;
		font-size: 13px;
		color: var(--color-purple);
		font-family: var(--font-en);
		font-weight: var(--weight-bold);
		& time {
			margin: 0 .2em;
		}
	}
	.txt {
		width: 100%;
		margin-top: .4em;
		line-height: 1.6;
	}
	.new {
		margin: 2px 0 0 auto;
	}
	@media (width>=600px) {
		& li {
			display: table;
		}
		& a {
			width: 100%;
			height: min(calc(90/500*100vw), 197px);
			padding-left: min(39%, 380px);
			display: table-cell;
			vertical-align: middle;
			box-sizing: border-box;
		}
		.img {
			width: min(35%, 350px);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		.date {
			display: block;
		}
		.txt {
			display: block;
		}
		.new {
			margin: 0;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}
	@media (width>=768px) {
		gap: 40px 0;
		& a {
			font-size: 18px;
		}
		.date {
			font-size: 16px;
		}
	}
}

.updateList {
	border-top: 1px solid #ccc;
	& a {
		padding: 16px 0;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-wrap: wrap;
		font-size: 15px;
		line-height: 1.6;
	}
	& time {
		order: -3;
		font-size: 12px;
		font-family: var(--font-en);
	}
	.label {
		order: -2;
		width: 11em;
		height: 20px;
		line-height: 18px;
		margin: -2px 0 0 auto;
		text-align: center;
		font-size: 12px;
		margin-left: auto;
		box-sizing: border-box;
		border: 1px solid var(--color-red);
		color: var(--color-red);
		letter-spacing: -.05em;
		font-weight: var(--weight-bold);
		&.news { border-color: #ff0000; color: #ff0000;}
		&.event { border-color: #0ea300; color: #0ea300;}
		&.about { border-color: #666666; color: #666666;}
		&.report { border-color: #33cc00; color: #33cc00;}
		&.introduction { border-color: #ff6600; color: #ff6600;}
		&.information { border-color: #e901a0; color: #e901a0;}
		&.companies { border-color: #0068d0; color: #0068d0;}
	}
	.new {
		margin: -2px 0 0;
	}
	.close {
		width: 40px;
		height: 20px;
		line-height: 18px;
		margin: -2px 0 0;
		text-align: center;
		font-size: 12px;
		background: #444;
		color: #fff;
	}
	.txt {
		width: 100%;
		margin-top: .5em;
		color: var(--color-black);
	}
	@media (width>=768px) {
		:has(.new), :has(.close) {
			.txt {
				width: calc(100% - 300px);
			}
		}
		& a {
			font-size: 16px;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}
		& time {
			height: 22px;
			line-height: 23px;
			font-size: 14px;
		}
		.new {
			margin: 0;
			order: 1;
		}
		.close {
			height: 22px;
			line-height: 20px;
			margin: 0;
			order: 1;
		}
		.label {
			height: 28px;
			line-height: 26px;
			padding: 0 .6em;
			margin: 0;
			font-size: 13px;
		}
		.txt {
			width: calc(100% - 244px);
			height: 22px;
			line-height: 22px;
			margin: 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
}


.companiesList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px 0;
	text-align: center;
	& li {
		width: 100%;
		line-height: 1.6;
	}
	& a {
		padding: 10px;
		box-sizing: border-box;
		display: block;
		border: 1px solid #ccc;
	}
	& img {
		width: min(100%, 320px);
		margin: 0 auto;
		display: block;
	}
	& figcaption {
		margin-top: .6em;
	}
	@media (width>=768px) {
		gap: 40px 0;
		& li {
			width: 48%;
		}
	}
	@media (width>=1080px) {
		&::after {
			content: "";
			display: block;
			width: 31%;
		}
		& li {
			width: 31%;
		}
		& a {
			margin-inline: 0;
		}
	}
}