/* ------------------- new top 2025-11-14 ------------------- */
/* --------------- reponsive ------------------- */
.sp{
	display: none !important;
}
.pc{
	display: block !important;
}
@media (max-width:768px) {
	.pc{
		display: none !important;
	}
	.sp{
		display: block !important;
	}
}
/* ---------- 変数 / CSS Variables ---------- */
:root {
	/* color system */
	--color_text: #000000;
	--color_main: #9F1800;
	--color_accent: #f39c12;
	--color_muted: #888;
	--color_white: #fff;
	--color_border: #e0e0e0;

}
.main_page{

}
.recruit_container{
	position: relative;
	font-weight: normal;

	&::before{
		content: "";
		/* background-image: url("../img/top_2/recruit_bg_img_2.webp"); */
		background-image: url('../img/top/mv_bg.png');
		background-position:center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}
	&::after{
		content: "";
		background-image: url("../img/top_2/recruit_bg_img_1.webp");
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		width: 100%;
		height: 70%;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 20;
	}
	.page_contents{
		position: relative;
		z-index: 90;
		padding: 141px 59px 80px;
		text-align: center;

		.top_content{
			margin-bottom: 97px;
			position: relative;

			.title_box{
				margin-bottom: 68px;
				position: relative;
				z-index: 90;

				.title{
					font-family: 'DM Sans', sans-serif;
					font-size: 36px;
				}
				.img_title{
					max-width: 695px;
					display: inline-block;
					margin-top: 20px;
				}
			}
			.top_note{
				line-height: 48px;
				position: relative;
				z-index: 90;

				p{
					margin-bottom: 30px;
					font-size:20px;
					font-weight:500;
					letter-spacing:1px;
					line-height:48px;
				}
				p:last-child{
					margin:0;
				}
			}
			&::before{
				content: "";
				background-image: url("../img/top_2/top_content_img_pc_1.png");
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				width: 343px;
				height: 87px;
				left: 0;
				bottom: 0;
				z-index: 30;
			}
			&::after{
				content: "";
				background-image: url("../img/top_2/top_content_img_pc_2.png");
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				width: 341px;
				height: 113px;
				right: 0;
				top: 145px;
				z-index: 30;
			}
		}
		.top_link{
			display: flex;
			justify-content: center;
			gap: 60px;

			/* .link_box{
				display: flex;
				background: var(--color_main);
				border-radius: 10px;
				color: var(--color_white);
				align-items: center;
				padding: 33px 36px 32px;
				gap: 30px;
				width: 580px;
				justify-content: flex-end;
				box-sizing: border-box;

				p{
					font-size: 42px;
					line-height:48px;
					letter-spacing: 3.36px;
					margin: 0;

					span{
						font-size: 30px;
						letter-spacing: 1px;
					}
				}
				.view_more_icon{
					width: 72px;
					height: 75px;
					background-image: url("../img/top_2/view_more_icon.webp");
					background-repeat: no-repeat;
					background-size: contain;
					position: relative;
					display: inline-block;
					overflow: visible;

					--len: 44px;
					--thickness: 1px;
					--head-w: 16px;
					--head-angle: -130deg;

					&::before{
						content: "";
						position: absolute;
						top: 27px;
						left: 33px;
						transform: translateY(-50%);
						height: var(--thickness);
						width: var(--len);
						background: var(--color_white);
						transition: width .18s ease;
						border-radius: 2px;
						z-index: 100;
					}
					&::after{
						content: "";
						position: absolute;
						top: 27px;
						left: calc(33px + var(--len));
						transform-origin: 0 50%;
						transform: translateY(-50%) rotate(var(--head-angle));
						width: var(--head-w);
						height: var(--thickness);
						background: var(--color_white);
						transition: left .18s ease, transform .18s ease;
						z-index: 100;
					}
				}
				&:hover{
					background: var(--color_text);

					.view_more_icon{
						--len: 54px;
					}
				}
			} */

			a{
				display:flex;
				justify-content:flex-end;
				align-items:center;
				gap:30px;
				position:relative;
				width:580px;
				padding:38px 38px 30px 0;
				background-color:#9F1800;
				border-radius:10px;

				p{
					font-family: "Noto Sans JP";
					font-size:42px;
					line-height:48px;
					letter-spacing:3.36px;
					color:#ffffff;
					transition:0.3s;

					span{
						font-size:30px;
						letter-spacing:1px;
					}
				}
				.more{
					display:grid;

					.circle{
						position:relative;
						width:52px;
						height:52px;
						margin:0 auto 3px;
						border:1px solid #ffffff;
						border-radius:50%;
						transition:0.3s;

						.cursor{
							position:absolute;
							top:50%;
							left:50%;
							transform:translateY(-50%);
							width:44px;
							height:1px;
							background-color:#ffffff;
							transition:0.3s;

							&:before{
								content:'';
								position:absolute;
								top:-4px;
								right:-1px;
								transform:rotate(40deg);
								width:12px;
								height:1px;
								background-color:#ffffff;
								transition:0.3s;
							}
						}
					}
					.text{
						font-family: "Open Sans", sans-serif;
						font-size: 12px;
						font-weight: 600;
						letter-spacing:0.72px;
						color:#ffffff;
						transition:0.3s;
					}
				}
				&:hover{
					background-color:#000000;
					opacity:1;

					.more .circle .cursor{
						width:47px;
					}
				}
			}
		}
	}
}

/* -------------- mobile ------------------- */
@media (max-width: 768px) {
.recruit_container .page_contents .top_content::before {
	background-image: url("../img/top_2/top_content_img_sp_1.png");
	width: 78px;
	height: 48px;
	left: -20px;
	bottom: 100px;
}

.recruit_container .page_contents .top_content::after {
	background-image: url("../img/top_2/top_content_img_sp_2.png");
	width: 114px;
	height: 52px;
	right: -20px;
	top: 160px;
}
.recruit_container .page_contents {
	padding: 80px 25px 20px;
}
.recruit_container .page_contents .top_content .title_box{
	margin-bottom:68px;
}
.recruit_container .page_contents .top_content .title_box .title {
	font-size: 16px;
}
.recruit_container .page_contents .top_content .title_box .img_title {
	max-width: 215px;
	margin-top: 15px;
}
.recruit_container .page_contents .top_content .top_note p {
	margin-bottom: 24px;
	font-size:12px;
	line-height:24px;
}
.recruit_container .page_contents .top_link {
	gap: 10px;
	flex-direction: column;

	a{
		justify-content:center;
		gap:0;
		width:auto;
		padding:20px 0;
		border-radius:10px;

		p{
			font-size:22px;
			line-height:22px;
			letter-spacing:2.64px;
			
			span{
				font-size:18px;
				letter-spacing:0.36px;
				line-height:22px;
			}
		}
		.more{
			position:absolute;
			top:50%;
			right:20px;
			transform:translateY(-50%);

			.circle{
				width:26px;
				height:26px;
				margin:0 auto;
				
				.cursor{
					width:22px;
					
					&:before{
						top:-2px;
						right:-1px;
						width:6px;
					}
				}
			}
			.text{
				display:none;
			}
		}
		&:hover{
			.more .circle .cursor{
				width:25px;
			}
		}
	}
}
.recruit_container .page_contents .top_link .link_box {
	padding: 19px 56px 19px 50px;
	gap: 30px;
	width: 100%;
	justify-content: center;
	position: relative;
}
.recruit_container .page_contents .top_link .link_box p {
	font-size: 22px;
	letter-spacing: 2.64px;
	line-height:22px;
}
.recruit_container .page_contents .top_link .link_box p span {
	font-size: 18px;
}
.recruit_container .page_contents .top_content {
	margin-bottom: 40px;
}
.recruit_container .page_contents .top_link .link_box .view_more_icon {
	width: 26px;
	height: 26px;
	--len: 20px;
	--thickness: 1px;
	--head-w: 10px;
	--head-angle: -130deg;
	background-image: url("../img/top_2/view_more_icon_sp.png");
	position: absolute;
	right: 30px;
}
.recruit_container .page_contents .top_link .link_box .view_more_icon::before {
	top: 13px;
	left: 13px;
}
.recruit_container .page_contents .top_link .link_box .view_more_icon::after {
	top: 13px;
	left: calc(13px + var(--len));
}








	
}