@CHARSET "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Zen+Old+Mincho&display=swap');

:root{
	--primary-main:#187FC3;
	--light-bg:#EDF8FF;
	--deep-bg:#09598D;
	--border-color:#1A8AD5;
	--text-main:#333;
	--back-white:#FFF;}
html{
	scroll-behavior:smooth;}
body{
	font-family:'Noto Sans JP', sans-serif;
	margin:0;
	color:var(--text-main);
	line-height:1.6;}
figure{
	margin:0;}
img{
	height:auto;
	max-width:100%;}
.container{
	padding:40px 20px;}
.bg-main{
	background-color:var(--primary-main);}
.bg-blue{
	background-color:var(--light-bg);}
.inner{
	max-width:1100px;
	margin:0 auto;}
.btn{
	display:block;
	box-sizing:border-box;
	width:165px;
	text-align:center;
	padding:15px;
	text-decoration:none;
	font-size:0.9rem;
	transition:opacity 0.3s;}
.btn-primary{
	background-color:var(--primary-main);
	color:var(--back-white);}
.btn-outline{
	border:1px solid var(--primary-main);
	color:var(--primary-main);
	background:var(--back-white);}
.symbols{
	line-height:0;}
.sp_br{
	display:none;}
.kome{
	position:relative;
	text-align:left!important;
	padding:0 0 0 1.2em;
	font-size:0.75rem;
	color:#888;
	margin:0;}
.kome::after{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	content:'\203b';}
@media only screen and (min-width:1024px){
	.container{
		padding:60px 20px;}
}
@media only screen and (max-width:480px){
	.pc_br{
		display:none;}
	.sp_br{
		display:block;}
}

/* COLUMN */
.postrow{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;}
.postcol{
	margin:30px 0 0;
	width:100%;}
.postcol:first-child{
	margin:0;}
@media only screen and (min-width:768px){
	.postcol.col-2{
		width:calc(50% - 5px);}
	.postcol.col-2:nth-child(odd){
		margin:10px 5px 0 0;}
	.postcol.col-2:nth-child(even){
		margin:10px 0 0 10px;}
	.postcol.col-2:nth-child(1){
		margin:0 5px 0 0;}
	.postcol.col-2:nth-child(2){
		margin:0 0 0 5px;}
	.postcol.col-3{
		width:calc(100%/3 - 7px);
		margin:10px 10px 0 0;}
	.postcol.col-3:nth-child(3n){
		margin:10px 0 0;}
	.postcol.col-3:nth-child(-n+2){
		margin:0 10px 0 0;}
	.postcol.col-3:nth-child(3){
		margin:0;}
	.postcol.col-4{
		width:calc(25% - 15px);
		margin:40px 20px 0 0;}
	.postcol.col-4:nth-child(4n){
		margin:40px 0 0;}
	.postcol.col-4:nth-of-type(-n+4){
		margin:0 20px 0 0;}
	.postcol.col-4:nth-of-type(4){
		margin:0 0 0;}
}

/* HERO CONTENTS */
h2{
	font-size:1.5rem;
	border-left:4px solid var(--primary-main);
	padding-left:15px;
	margin-bottom:40px;
	font-family:"Zen Old Mincho", serif;}
.hero{
	position:relative;
	display:flex;
	min-height:600px;
	margin:60px 0 0;
	padding:20px;
	box-sizing:border-box;
	height:calc(100vh - 80px);
	flex:1;
	background-color:rgba(0,0,0,0.5);
	display:flex;
	align-items:center;}
.hero-fixed{
	max-width:1100px;
	width:100%;
	margin:0 auto;
	display:flex;}
.hero-inner{
	display:table;
	margin:auto;}
.hero-image{
	background-position:center;
	background-repeat:no-repeat;
	position:relative;}
.hero-tag{
	letter-spacing:0.2em;
	font-size:0.9rem;
	color:var(--back-white);
	margin-bottom:20px;}
.hero-title{
	font-size:2rem;
	font-weight:300;
	margin:0 0 30px 0;
	color:var(--back-white);
	line-height:1.4;
	font-family:"Zen Old Mincho", serif;}
.hero-desc,
.hero-route{
	color:var(--back-white);}
.hero-desc{
	margin-bottom:15px;}
.hero-route{
	margin-bottom:40px;}
.hero-features{
	display:flex;
	gap:10px;
	margin-bottom:30px;
	flex-wrap:wrap;}
.feature-tag{
	border:1px solid var(--border-color);
	background:var(--back-white);
	padding:5px 12px;
	font-size:0.8rem;
	display:flex;
	align-items:center;
	gap:5px;
	margin:0;}
.hero-btns{
	display:flex;
	gap:15px;}
.video{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	overflow:hidden;
	z-index:-1;}
.video::after{
	content:'';
	width:100%;
	height:100%;
	background-color:rgba(16, 57, 75, .3);
	display:block;
	position:absolute;
	left:0;
	top:0;}
.video video{
	overflow:hidden;
	width:100%;
	height:100%;
	max-width:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	object-fit:cover;}
@media only screen and (min-width:1024px){
	.hero{
		margin:80px 0 0;
		height:calc(100vh - 80px);}
	.hero-content,
	.hero-image{
		flex:1;}
	.hero-title{
		font-size:3rem;}
	.video video{
		width:auto;
		height:auto;}
}

/* VACANCY */
.vacancy-summary{
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	gap:20px;
	margin-bottom:30px;}
.summary-card{
	border-radius:10px;
	background:var(--light-bg);
	padding:20px;}
.summary-label{
	font-size:0.8rem;
	margin-bottom:10px;
	display:block;}
.summary-value{
	font-size:1.8rem;
	font-weight:bold;}
.summary-unit{
	font-size:1rem;
	font-weight:normal;
	margin-left:5px;}
.vacancy-table{
	width:100%;
	min-width:840px;}
.vacancy-table th{
	background:var(--light-bg);
	padding:15px;
	text-align:left;
	font-weight:normal;
	border-bottom:1px solid var(--border-color);}
.vacancy-table td{
	padding:10px 15px;
	border-bottom:1px solid var(--border-color);}
@media only screen and (min-width:1024px){
	.vacancy-summary{
		grid-template-columns:repeat(3, 1fr);}
	.summary-card{
		padding:30px;}
}
@media only screen and (max-width:869px){
	.vacancy-wrap{
		overflow-x:scroll;}
	.vacancy-table th{
		padding:15px;}
	.vacancy-table td{
		padding:10px 15px;}
}

/* FLOOR */
.floor-img{
	margin:0 auto 30px;
	line-height:0;
	border-radius:10px;
	overflow:hidden;
	border:0.5px solid var(--border-color);}
.floor-txt{
	display:block;
	line-height:1.6;
	padding:12px 16px;
	background:var(--light-bg);
	font-size:12px;
	margin:0;}

/* STATUS */
.status-badge{
	text-align:center;
	padding:4px 8px;
	border-radius:4px;
	display:block;
	font-size:0.75rem;}
.status-ready{
	background:#e8f5e9;
	color:#2e7d32;}
.status-recruiting{
	background:#e3f2fd;
	color:#1565c0;}
.btn-detail{
	text-align:center;
	border:1px solid var(--border-color);
	padding:5px 10px;
	display:block;
	text-decoration:none;
	color:var(--text-main);
	font-size:0.75rem;}
.grid-3{
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	gap:20px;}
.use-card{
	border:1px solid var(--border-color);
	background-color:var(--back-white);
	padding:20px;
	border-radius:8px;}
.use-icon{
	color:var(--primary-main);
	margin-bottom:5px;}
.use-title{
	font-weight:bold;
	margin-bottom:5px;
	display:block;
	font-size:20px;}
.use-text{
	color:#666;
	margin:0;}
.grid-2{
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	gap:20px;}
.feature-item{
	background:var(--light-bg);
	border:1px solid var(--border-color);
	padding:20px;
	display:flex;
	border-radius:10px;
	gap:20px;}
.feature-icon-box{
	background:var(--back-white);
	width:50px;
	height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:5px;
	border:1px solid var(--border-color);
	flex-shrink:0;}
.feature-info-title{
	font-weight:bold;
	font-size:20px;
	margin-bottom:10px;
	display:block;}
.feature-info-text{
	margin:0;
	color:#666;}
@media only screen and (min-width:1024px){
	.use-card{
		padding:20px;}
	.grid-3{
		grid-template-columns:repeat(3, 1fr);}
	.grid-2{
		grid-template-columns:1fr 1fr;}
	.feature-item{
		padding:20px;}
}

/* USE */
.lp-use-row{
	background:var(--back-white);
	border:1px solid var(--border-color);
	border-radius:12px;
	overflow:hidden;
	transition:box-shadow 0.2s;
	margin:0 0 20px;}
.lp-use-body{
	box-sizing:border-box;
	padding:20px;}
.lp-use-img{
	position:relative;}
.lp-use-img figcaption{
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:2;
	color:var(--back-white);
	font-size:13px;}
.lp-use-body .use-icon{
	width:40px;
	height:40px;
	background:var(--light-bg);
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--border-color);}
.lp-use-name{
	font-size:20px;
	margin:0 0 10px;}
.lp-use-desc{
	margin:0;}
@media only screen and (min-width:1024px){
	.lp-use-row{
		display:flex;}
	.lp-use-row:nth-child(odd){
		flex-direction:row-reverse;}
	.lp-use-img,
	.lp-use-body{
		width:50%;}
	.lp-use-body{
		padding:32px 36px;
		display:flex;
		flex-direction:column;
		justify-content:center;}
	.lp-use-row.no-img .lp-use-body{
		width:100%;}
	.lp-use-img img{
		width:100%;
		height:100%;
		min-height:220px;
		object-fit:cover;
		object-position:center;
		display:block;}
}

/* CONTACT */
.contact-row{
	max-width:1100px;
	margin:auto;}
.contact-info{
	flex:1;}
.contact-info h2{
	font-size:28px;
	margin-bottom:30px;
	letter-spacing:0.05em;
	border-left:none;
	padding-left:unset;
	text-align:center;
	color:var(--back-white);}
.contact-info .description{
	line-height:1.8;
	margin-bottom:40px;
	color:var(--back-white);}
.contact-details{
	list-style:none;
	padding:0;}
.contact-details li{
	margin-bottom:15px;
	gap:5px;
	display:flex;
	align-items:center;
	color:var(--back-white);}
.contact-details i{
	width:25px;
	margin-right:10px;
	font-size:18px;}
.contact-form-wrapper{
	flex:1;
	background-color:var(--light-bg);
	padding:20px;
	border-radius:12px;
	border:none;}
.form-group{
	margin-bottom:20px;}
.form-group label{
	display:block;
	font-size:13px;
	margin-bottom:8px;}
.form-group input,
.form-group select{
	width:100%;
	padding:12px 15px;
	background-color:var(--back-white);
	border:1px solid var(--primary-main);
	border-radius:4px;
	box-sizing:border-box;
	font-size:15px;}
.form-group input::placeholder{
	color:#666;}
.form-group select{
	appearance:none;
	background-repeat:no-repeat;
	background-position:right 10px center;
	background-size:20px;}
.submit-btn{
	width:100%;
	padding:18px;
	background-color:var(--primary-main);
	border:none;
	color:var(--back-white);
	font-size:16px;
	font-weight:bold;
	border-radius:4px;
	cursor:pointer;
	transition:background 0.3s;
	margin-top:10px;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;}
.submit-btn:hover{
	background-color:var(--deep-bg);}
.note{
	text-align:center;
	font-size:12px;
	margin-top:15px;}
@media only screen and (min-width:1024px){
	.contact-info h2{
		text-align:left;}
	.contact-row{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		gap:40px;}
	.contact-form-wrapper{
		padding:40px;}
}

/* FOOTER */
#footer{
	padding:22px 20px;
	border-top:0.5px solid #CCC;
	font-size:11px;
	background:var(--back-white);}
.footer-inner{
	max-width:1100px;
	margin:0 auto;}
.footer-copy{
	margin:0;
	text-align:center;}
.footer-link{
	list-style:none;
	padding:0;
	display:flex;
	justify-content:center;
	gap:10px;
	margin:0 auto 20px;}
.footer-link li{
	margin:0 0 5px;}
.footer-link li:last-child{
	margin:0;}
.footer-link li a{
	font-size:12px;
	color:#333;}
@media only screen and (min-width:1024px){
	#footer{
		display:flex;
		justify-content:space-between;
		align-items:center;}
	.footer-inner{
		display:flex;
		flex-direction:row-reverse;
		justify-content:flex-end;
		width:100%;
		gap:20px;}
	.footer-copy{
		text-align:left;}
	.footer-link{
		gap:20px;
		margin:0;}
}