@charset "UTF-8";

/***** デフォルトはスマートフォン *****/
.top_movie {
	height: 50vw;
}

.back-video {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	margin: auto;
	width: 100%;
	z-index: -1;
	/* コンテンツの下に配置 */
	object-fit: cover;
	/* 比率を維持して全画面 */
}

.circle_section {
	height: 35vw;
}
.circle_section_inner{
	width: 100%;
}

.works_circle {
	position: absolute;
	width: 65vw;
	margin: -5vw auto auto auto;
	right: 0;
	left: 0;

}

.works_img {
	border-radius: 50%;
}

.info_hr {
	margin: 2rem 0;
}

.info_flex {
	display: block;
	margin: 2rem auto;
}

.info_h2 {
	margin-left: 3rem;
	flex: 4.75;
}

.info_main {
	flex: 5.25;
}

.infomation_main {
	font-size: 1.7rem;
	line-height: 1.2rem;
	margin-top: 1rem;
}

.info_small {
	font-size: 0.7rem;
}

.information_flex {
	display: flex;
	line-height: 2.5rem;
}

.information_date {
	font-size: 0.8rem;
}

.information_h3 {
	font-size: 0.8rem;
	font-weight: normal;
	margin-left: 3rem;
}

.information_a {
	display: flex;
	text-decoration: none;
	color: #333333;
	line-height: 40px;
}

.circle_wrap {
	position: relative;
	display: inline-block;
}

.circle_wrap img {
	display: block;
}

.circle_wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
			rgba(17, 27, 48, 0.8) 0%,
			rgba(17, 27, 48, 0.8) 30%,
			rgba(17, 27, 48, 0.6) 60%,
			transparent 100%);
	pointer-events: none;
}

.information_h2_white {
	color: white;
	position: absolute;
	top: 2rem;
	left: 2rem;
	font-size: 1.7rem;
	line-height: 1.2rem;
	margin-top: 1rem;
}

.kaisyagaiyou_link {
	position: absolute;
	bottom: 0;
	right: 5vw;
	width: 300px;
}
.information_image_main{
	width: 100vw;
}
.top_circle_main {
	z-index: 10;
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: 0;
	left: 0;
	margin: auto;
	height: 80%;
}

.top_anniversary {
	z-index: 10;
	position: absolute;
	top: 6rem;
	left: 2rem;
	width: 100px;
}

.workhistory_recruit {
	margin-top: 0;
}

.work_recruit_flex {
	display: block;
}

.workhistory {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 0 10px 0;
}

.workhistory::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
			rgba(17, 27, 48, 0.8) 0%,
			rgba(17, 27, 48, 0.6) 30%,
			rgba(17, 27, 48, 0.3) 60%,
			transparent 100%);
	pointer-events: none;
}

.work_picture {
	width: 100%;
}

.workhistory_h2_white {
	position: absolute;
	top: 2rem;
	left: 2rem;
	right: 20px;
	color: white;
	line-height: 1.7rem;
}

.clickable_maps {
	position: absolute;
	width: 65%;
	margin-left: auto;
	top: 0;
	right: 0;
}

.cls-1 {
	fill: #231815;
}

.cls-2 {
	fill: #fff;
	stroke: #323232;
	stroke-miterlimit: 10;
	stroke-width: 1.77px;
}

.cls-2:hover {
	fill: #bbbbbb;
}

.workhistory_clickable {
	position: absolute;
	width: 300px;
	left: 28px;
	bottom: 20px;
}

.workhistory_text {
	position: absolute;
	top: 65%;
	left: 28px;
	color: white;
	font-size: 3vw;
}

.recruit_image {
	position: relative;
	margin: 5px 0 5px 0;
}

.recruit_image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
			rgba(17, 27, 48, 0.8) 0%,
			rgba(17, 27, 48, 0.6) 30%,
			rgba(17, 27, 48, 0.3) 60%,
			transparent 100%);
	pointer-events: none;
}

.recruit_image img {
	width: 100%;
}

.recruit_text {
	position: absolute;
	top: 65%;
	left: 28px;
	font-size: 3vw;
	color: white;

}

#info-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
}

#info-popup.active {
	display: block;
}

.info-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .7);
	backdrop-filter: blur(5px);
}

.info-popup-content {
	position: relative;
	width: min(900px, 90%);
	max-height: 80vh;
	overflow-y: auto;

	background: #fff;

	margin: 5vh auto;

	padding: 50px;

	border-radius: 20px;

	z-index: 2;

	animation: popupFade .4s ease;
}

@keyframes popupFade {

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

	to {
		transform: translateY(0);
		opacity: 1;
	}

}

#info-popup-close {

	position: absolute;

	top: 15px;
	right: 15px;

	width: 40px;
	height: 40px;

	border: none;

	border-radius: 50%;

	background: #231815;
	color: #fff;

	cursor: pointer;

	font-size: 20px;
}

.information_a {

	width: 100%;

	background: none;
	border: none;

	text-align: left;

	cursor: pointer;
}

/**==================================================**/
/**=          画面サイズ768px以上の指定              **/
/**==================================================**/
@media screen and (min-width:768px) {
	.circle_section {
		height: 60vw;
	}

	.works_circle {
		width: 60%;
	}

	.kaisyagaiyou_link {
		bottom: 2rem;
	}

	.top_anniversary {
		width: 150px;
	}
}

/**==================================================**/
/**=          画面サイズ960px以上の指定              **/
/**==================================================**/
@media screen and (min-width:960px) {
	.circle_section {
		height: 35vw;
	}

	.works_circle {
		width: 40%;
		margin: -7vw auto auto auto;
		text-align: center;
	}
	.works_img{
		width: 100%;
	}

	.info_flex {
		display: flex;
	}

	.work_recruit_flex {
		display: flex;
		justify-content: space-between;
	}

	.workhistory {
		width: 49.75%;
	}

	.recruit_image {
		width: 49.75%;
	}

	.workhistory {
		margin: 5px 0 5px 0;
	}

	.workhistory_clickable {
		width: 380px;
	}

	.workhistory_text {
		font-size: 1.2vw;
	}

	.recruit_text {
		font-size: 1.2vw;
	}
}