@charset "utf-8";
/* トップページ */
.key-visual {
	position: relative;
	width: 100%;
	padding: 130px 0;
	background-color: #131313;
}

.key-visual::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../assets/top-image.webp);
	background-size: cover;
}

.bg-image-after,
.key-visual-after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.2);
}

.key-visual-lineillust {
	width: 62%;
	position: absolute;
	top: 0;
	left: calc(60px + 4%);
}

.key-visual-text-area {
	position: relative;
	width: 960px;
	max-width: 100%;
	padding: 60px 0px 0px 60px;
	margin-left: auto;
}

.key-visual-title {
	color: #fff;
	letter-spacing: 0.3em;
	line-height: 1.8;
	padding-left: 4%;
	margin-bottom: 30px;
}

.title-line1 {
	font-size: clamp(32px, 2.9vw, 70px);
}
.title-line2 {
	font-size: clamp(32px, 3.6vw, 120px);
}
.title-line3 {
	font-size: clamp(32px, 2.8vw, 70px);
}

.key-visual-subtitle {
	font-size: clamp(16px, 1.1vw, 24px);
	padding-left: 4%;
	color: #fff;
	margin-bottom: 80px;
	letter-spacing: 0.14em;
	font-weight: 700;
}

.news-and-info {
	width: 100%;
	background-color: #fff;
	padding: 20px 4% 10px;
	color: #333;
	clip-path: polygon(5% 0%, 100% 0%,100% 100%, 0% 100%, 0% 30%);
}

.news-and-info-title {
	font-size: 17px;
	color: #666;
	letter-spacing: 0.14em;
}

.newsticker {
	height: 60px;
}

.swiper-wrapper {
	list-style: none;
	padding: 0;
	margin: 0;
}
.align-center {
	display: flex;
	align-items: center;
}

.published {
	color: #ccc;
	padding-right: 30px;
}
.to-news {
	font-size: 15px;
	line-height: 1.7em;
	color: inherit;
	text-decoration: none;
}
.moreinfo {
	color: red;
	padding-left: 100px;
}

.key-visual-figure-area {
	position: absolute;
	width: 30%;
	max-width: 630px;
	bottom: 130px;
	left: -3%;
}

.key-visual-figure {
	filter: drop-shadow(5px 5px 10px #14ffff);
}

.guidance-wrapper {
	position: relative;
	width: 70%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 100px 0;
	margin: auto;
	gap: 10px;
}

.guidance-tile {
	position: relative;
	width: calc((100% - 10px) / 2);
	height: 0;
	padding-bottom: calc((70% - 10px) / 2);
	color: #fff;
	clip-path: polygon(0% 0%, 92% 0%, 100% 10%, 100% 100%, 0% 100%);
}

.guidance-tile::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}


.guidance-tile:nth-of-type(1) {
	color: #000;
}
.guidance-tile:nth-of-type(1)::before {
	content: none;
}

.guidance-tile-subtitle {
	position: absolute;
	top: 6%;
	left: 10%;
	font-size: clamp(16px, 2.2vw, 42px);
}

.guidance-tile-inner {
	position: absolute;
	width: 300px;
	max-width: 80%;
	top: 60%;
	right: 10%;
	transform: translateY(-50%);
}
.what-we-do {
	padding-left: 40px;
	border-left: 3px solid #a3a3a3;
	margin-bottom: 60px;
}
.what-we-do-title {
	font-size: clamp(32px, 2.5vw, 50px);
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: #a3a3a3;
	font-weight: 500;
}
.what-we-do-subtitle {
	letter-spacing: 0.8em;
	color: #333;
}
.guidance-text {
	width: 66%;
	padding-left: 40px;
	text-align: justify;
	letter-spacing: 0.16em;
	color: #333;
	line-height: 2.2;
	font-size: clamp(16px, 1.05vw, 21px);
}

.guidance-inner-title {
	position: relative;
	font-size: 18px;
	padding-left: 30px;
	margin-bottom: 10px;
}
.guidance-inner-title::before {
	position: absolute;
	content: "";
	width: 15px;
	height: 4px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background-color: #fff;
}

.bg-cover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	z-index: -1;
}

.guidance-inner-text {
	width: 100%;
	text-align: justify;
	margin-bottom: 20px;
}
.readmore {
	display: block;
	padding: 6px 40px;
	text-align: center;
	background-color: rgba(100, 100, 100, 0.2);
	border: none;
	border-radius: 200px;
	margin-left: auto;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: 0.2s;
}

.guidance-logoillust {
	position: absolute;
	width: 46%;
	top: 14%;
	left: -26%;
}

.guidance-panelillust {
	position: absolute;
	width: 30%;
	top: -8%;
	right: -4%;
}

@media screen and (max-width: 479px) {
	.key-visual-text-area {
		padding: 40px 0px 0px 30px;
	}
	.key-visual-lineillust {
		width: 82%;
		left: calc(30px + 4%);
	}
	.key-visual-title {
		letter-spacing: 0.2em;
	}
	.key-visual-subtitle {
		margin-bottom: 210px;
	}
	.newsticker {
		height: 100px;
	}
	.moreinfo {
		padding-left: 0;
	}
	.guidance-wrapper {
		flex-direction: column;
		width: 90%;
		gap: 24px;
	}
	.guidance-tile {
		width: 100%;
		padding-bottom: 90%;
	}
	.guidance-text {
		width: 80%;
	}
	.news-and-info {
		padding: 20px 6% 10px;
	}

	.key-visual-figure-area {
		width: 100%;
		bottom: 240px;
		left: -35%;
	}
	.guidance-panelillust {
		width: 70%;
		top: -6%;
	}
	.guidance-logoillust {
		width: 77%;
	}
}