@charset "utf-8";
/* CSS Document */
/*-------------------------------------------------

　   COMMON

--------------------------------------------------*/
/* flex block */
.flex_block {display: flex;position: relative;}
.flex_block aside {width: 100%;max-width: 240px;padding: 40px 0 40px 40px;}
.flex_block aside ul {position: sticky;top: 7em;left: 0;z-index: 1;}
.flex_block aside ul li {position: relative;margin-bottom: 15px;}
.flex_block aside ul li:last-child {margin-bottom: 0;}
.flex_block aside ul li a {
	display: block;
	color: #b5b5b5;
	font-weight: 500;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	line-height: 1.2;
}
.flex_block aside ul li a.current {color: #E7350D;}
.flex_block .right_block .block:not(:last-child) {margin-bottom: clamp(100px, calc(100px + 140 * ((100vw - 375px) / 1545)), 240px);}
@media only screen and ( max-width : 767px ) {
	.flex_block aside {display: none;}
}
/*-------------------------------------------------

　  Main Visual │ メインビジュアル

--------------------------------------------------*/
#mv {
	padding: clamp(100px, calc(100px + 180 * ((100vw - 375px) / 1545)), 280px) 0 clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);
	background: url(../img/page/common/bg.webp) no-repeat center / cover;
}
#mv p {
	color: #f1846b;
	font-weight: 500;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
	line-height: 1;
}
#mv h1 {font-weight: 700;font-size: clamp(36px, calc(36px + 44 * ((100vw - 375px) / 1545)), 80px);line-height: 1.4;}
/*-------------------------------------------------

	Person │ 人を知る

--------------------------------------------------*/
#person ul {display: grid;grid-template-columns: repeat(2, 1fr);gap: 80px 40px;}
#person ul li {position: relative;}
#person ul li .wrap {position: relative;z-index: 1;padding: 20px 0 8px;}
#person ul li .wrap::before {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(231, 53, 13, .3), rgba(245, 174, 158, .3));
	transition: opacity .3s, width .3s;
}
#person ul li:hover .wrap::before {opacity: 1;}
#person ul li .wrap dl {display: flex;align-items: center;gap: 20px;margin-bottom: 10px;}
#person ul li .wrap dl dt {display: flex;align-items: center;}
#person ul li .wrap dl dd {font-size: clamp(12px, calc(12px + 4 * ((100vw - 375px) / 1545)), 16px);}
#person ul li .wrap dl dd span {margin-left: 8px;}
#person ul li .wrap h3 {margin-bottom: 20px;font-size: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 1545)), 32px);}
#person ul li .wrap .content {margin-bottom: 30px;}
#person ul li .wrap .content p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
}
#person ul li .wrap .content p:last-child {margin-bottom: 0;}
#person ul li .wrap .content p span {
	min-width: 80px;
	padding: 5px 0;
	border-radius: 20px;
	background: #F4F4F4;
	font-size: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px);
	text-align: center;
}
#person ul li .wrap .view {
	justify-content: flex-end;
    gap: 10px;
    font-weight: 400;
    font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
}
#person ul li:hover .wrap .view {color: #E7350D;}
#person ul li .wrap .view .arrow {width: 32px;height: 32px;}
#person ul li .wrap .view .arrow::before,
#person ul li .wrap .view .arrow::after {top: calc(50% - 1px);width: 8px;height: 2px;}
#person ul li:hover .wrap .view span {background: #E7350D;}
@media only screen and ( max-width : 767px ) {
	#person ul {grid-template-columns: 1fr;}
}
/*-------------------------------------------------

	Person Single │ 社員インタビュー

--------------------------------------------------*/
#interview {padding-top: clamp(100px, calc(100px + 80 * ((100vw - 375px) / 1545)), 180px);}
#interview .block:not(:last-child) {margin-bottom: clamp(50px, calc(50px + 90 * ((100vw - 375px) / 1545)), 140px);}
#interview #block1 {max-width: 1280px;margin: 0 auto;padding-bottom: 0;}
#interview #block1 .main_container {margin-bottom: 40px;}
#interview #block1 .main_container h1 {margin-bottom: 20px;font-size: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 1545)), 32px);line-height: 1.4;}
#interview #block1 .main_container dl {display: flex;align-items: center;gap: 20px;margin-bottom: 20px;}
#interview #block1 .main_container dl dt {display: flex;align-items: center;}
#interview #block1 .main_container dl dd span {margin-left: 8px;}
#interview #block1 .main_container .content {display: flex;flex-wrap: wrap;align-items: center;gap: 20px;}
#interview #block1 .main_container .content p {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
}
#interview #block1 .main_container .content p span {
	padding: 4px 20px;
	border-radius: 20px;
	background: #F4F4F4;
	font-size: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px);
	text-align: center;
}
#interview #block1 .profile_container {margin-bottom: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);}
#interview #block1 .profile_container figure {position: sticky;top: calc(var(--header-h, 0px) + 20px);left: 0;width: 60%;}
#interview #block1 .profile_container ul {
	position: relative;
	z-index: 1;
	width: 38%;
	padding: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px) clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
}
#interview #block1 .profile_container ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(90deg, #E7350D ,#F5AE9E);
}
#interview #block1 .profile_container ul::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 98.5%;
	height: 99%;
	border-radius: 6px;
	background: #fff;
}
#interview #block1 .profile_container ul li:not(:last-child) {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #D9D9D9;
}
#interview #block1 .profile_container ul li h3 {
	margin-bottom: 20px;
	font-weight: 500;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
}
#interview #block1 .profile_container ul li p {font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);}
#interview #block1 .profile_container ul li table tr {display: block;margin-bottom: 8px;}
#interview #block1 .profile_container ul li table tr:last-child {margin-bottom: 0;}
#interview #block1 .profile_container ul li table tr th {width: 70px;color: #EF7256;}
#interview #block1 .profile_container ul li table tr td {font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);}
#interview #block1 .profile_container ul li .p_accordion_wrap {display: block;}
#interview #block1 .faq_container ul li:not(:last-child) {margin-bottom: clamp(80px, calc(80px + 20 * ((100vw - 375px) / 1545)), 100px);}
#interview #block1 .faq_container ul li h2 {
	margin-bottom: 50px;
	font-size: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 1545)), 32px);
	line-height: 1.4;
}
#interview #block1 .faq_container ul li .wrap.flexbox {align-items: center;}
#interview #block1 .faq_container ul li:nth-child(1) .wrap.flexbox {flex-direction: row-reverse;}
#interview #block1 .faq_container ul li .wrap.flexbox figure {width: 45%;}
#interview #block1 .faq_container ul li .wrap .content:not(:last-child) {margin-bottom: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1545)), 50px);}
#interview #block1 .faq_container ul li .wrap.flexbox .content {width: 50%;}
#interview #block1 .faq_container ul li .wrap .content h3 {
	position: relative;
	margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	padding-left: 85px;
	font-weight: 700;
}
#interview #block1 .faq_container ul li .wrap .content h3::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 60px;
	height: 1px;
	background: #161616;
}
#interview #block1 .faq_container ul li .wrap .content dl {display: flex;}
#interview #block1 .faq_container ul li .wrap .content dl dt {
	width: 85px;
	color: #E7350D;
	font-weight: 500;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
}
#interview #block1 .faq_container ul li .wrap .content dl dd {flex: 1;}
@media only screen and ( max-width : 1024px ) {
	#interview #block1 .profile_container figure {position: initial;width: 100vw;margin: 0 calc(50% - 50vw) 40px;}
	#interview #block1 .profile_container ul {width: 100%;}
	#interview #block1 .profile_container ul {padding: 0;}
	#interview #block1 .profile_container ul li:not(:last-child) {margin-bottom: 20px;padding-bottom: 0;border-bottom: none;}
	#interview #block1 .profile_container ul li {display: flex;flex-direction: column-reverse;}
	#interview #block1 .profile_container ul::before,
	#interview #block1 .profile_container ul::after {display: none;}
	#interview #block1 .profile_container ul li h3.p_switch {
		position: relative;
		margin-bottom: 0;
		padding-right: 48px;
		color: #E7350D;
		text-align: right;
		cursor: pointer;
		user-select: none;
	}
	#interview #block1 .profile_container ul li h3.p_switch.open {padding-bottom: 15px;border-bottom: 1px solid #E7350D;}
	#interview #block1 .profile_container ul li h3.p_switch::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		height: 32px;
		border: 1px solid #EF7256;
		border-radius: 4px;
	}
	#interview #block1 .profile_container ul li h3.p_switch::after {
		content: '';
		position: absolute;
		top: 13px;
        right: 10px;
        width: 12px;
        height: 12px;
		background: url(../img/common/Icon_arrowD-red.svg) no-repeat top center / 100%;
		transition: .3s;
	}
	#interview #block1 .profile_container ul li h3.p_switch.open::after {transform: translateY(-50%) scale(1, -1);}
	#interview #block1 .profile_container ul li .p_accordion_wrap {display: none;padding: 20px 20px 30px;}
	#interview #block1 .faq_container ul li .wrap.flexbox figure {width: 100%;margin-bottom: 30px;}
	#interview #block1 .faq_container ul li .wrap.flexbox .content {width: 100%;}
}
/*-------------------------------------------------

	About │ 会社を知る

--------------------------------------------------*/
#about #block1 ul li:not(:last-child) {margin-bottom: clamp(50px, calc(50px + 110 * ((100vw - 375px) / 1545)), 160px);}
#about #block1 ul li dl {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	color: #8b8b8b;
	font-weight: 500;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
}
#about #block1 ul li dl dt {margin-right: 24px;padding-right: 24px;border-right: 1px solid #8b8b8b;line-height: 1.2;}
#about #block1 ul li dl dd {line-height: 1.2;}
#about #block1 ul li h3 {margin-bottom: 20px;color: #E7350D;font-size: clamp(24px, calc(24px + 32 * ((100vw - 375px) / 1545)), 56px);}
#about #block1 ul li .content p:not(:last-child) {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#about #block2 ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px;}
#about #block2 ul li {
	padding: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px) clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	background: #F4F4F4;
}
#about #block2 ul li .wrap h3 {
	margin-bottom: 20px;
	font-weight: 500;
	font-size: clamp(22px, calc(22px + 10 * ((100vw - 375px) / 1545)), 32px);
	text-align: center;
}
#about #block2 ul li .wrap h3 span.num {margin-right: 8px;color: #E7350D;font-size: clamp(52px, calc(52px + 20 * ((100vw - 375px) / 1545)), 72px);}
#about #block2 ul li .wrap h3 span.small {font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);}
#about #block2 ul li .wrap small {display: block;margin-top: 20px;font-size: 1.2rem;}
#about #block3 table {max-width: 1200px;}
#about #block3 table tr {
	display: flex;
	align-items: center;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px) 0;
	border-bottom: 1px solid #D9D9D9;
}
#about #block3 table tr th {
	width: clamp(80px, calc(80px + 130 * ((100vw - 375px) / 1545)), 210px);
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
}
#about #block3 table tr td {width: 100%;vertical-align: middle;}
#about #block3 table tr td a {text-decoration: underline;}
#about #block3 table tr td .wrap {flex-wrap: nowrap;align-items: center;gap: 20px;}
#about #block3 table tr td .wrap figure {width: 120px;}
#about #block4 .pdf_container {max-width: 1196px;margin: 0 auto;}
#about #block4 .pdf_container .pdf_wrap {position: relative;width: 100%;}
#about #block4 .pdf_container .pdf_wrap .pdf-canvas {display: block;width: 100%;height: auto;    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);}
#about #block4 .pdf_container .pdf_wrap .pdf_nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}
#about #block4 .pdf_container .pdf_wrap .pdf_nav button {
	width: 36px;
	height: 36px;
	border: 1px solid #D9D9D9;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: .2s;
}
#about #block4 .pdf_container .pdf_wrap .pdf_nav button:hover {background: #F4F4F4;}
#about #block4 .pdf_container .pdf_wrap .pdf_nav button:disabled {opacity: .3;cursor: default;}
#about #block4 .pdf_container .pdf_wrap .pdf_nav .pdf-page-num {font-size: 14px;}
#about #block4 .pdf_container .pdf_links {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 20px;
}
#about #block4 .pdf_container .pdf_links a {
	font-size: 14px;
	text-decoration: underline;
	color: #555;
}
#about #block4 .pdf_container .pdf_links a:hover {color: #E7350D;}
#about #block5 ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
}
#about #block5 ul li {position: relative;padding-bottom: 50px;transition: .3s;}
#about #block5 ul li:hover {background: #FFEDE9;}
#about #block5 ul li::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 24px;
	height: 24px;
	background: url(../img/common/Icon_window.svg) no-repeat center / 100%;
}
#about #block5 ul li figure {margin-bottom: 10px;}
#about #block5 ul li time {display: block;margin-bottom: 10px;color: #999;font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);}
#about #block5 ul li p {font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);}
@media only screen and ( max-width : 1024px ) {
	#about #block2 ul {grid-template-columns: repeat(2, 1fr);}
	#about #block5 ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 767px ) {
	#about #block2 ul {grid-template-columns: 1fr;width: 90%;margin: 0 auto;}
}
@media only screen and ( max-width : 500px ) {
	#about #block3 table tr {display: block;}
	#about #block3 table tr th {display: block;text-align: left;}
	#about #block5 ul {grid-template-columns: 1fr;}
}
/*-------------------------------------------------

	Environment │ 働く環境を知る

--------------------------------------------------*/
#environment #block1 ul {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;max-width: 980px;margin: 0 auto;}
#environment #block1 ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px) 20px;
	border: 1px solid #EF7256;
	background: rgba(255, 237, 233, 0.3);
}
#environment #block1 ul li p {display: grid;gap: 8px;font-size: clamp(12px, calc(12px + 4 * ((100vw - 375px) / 1545)), 16px);text-align: center;}
#environment #block1 ul li p span {display: block;color: #E7350D;font-weight: 500;font-size: 1.5em;line-height: 1.4;text-align: center;}
#environment #block1 ul li:last-child p span {margin-bottom: 0;}
#environment #block2 ul li {align-items: center;margin-bottom: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);}
#environment #block2 ul li:last-child {margin-bottom: 0;}
#environment #block2 ul li figure {width: 29%;}
#environment #block2 ul li .wrap {width: 66%;}
#environment #block2 ul li .wrap h3 {
	margin-bottom: clamp(15px, calc(15px + 25 * ((100vw - 375px) / 1545)), 40px);
	color: #E7350D;
	font-weight: 500;
	font-size: clamp(22px, calc(22px + 10 * ((100vw - 375px) / 1545)), 32px);
}
@media only screen and ( max-width : 1024px ) {
	#environment #block2 ul li figure {width: 100%;margin-bottom: 15px;}
	#environment #block2 ul li .wrap {width: 100%;}
}
@media only screen and ( max-width : 767px ) {
	#environment #block1 ul {grid-template-columns: 1fr;gap: 0;}
	#environment #block1 ul li {height: 130px;border-bottom: none;}
	#environment #block1 ul li:last-child {border-bottom: 1px solid #EF7256;}
}
/*-------------------------------------------------

	FAQ │ よくある質問

--------------------------------------------------*/
#faq .accordion {max-width: 1280px;margin: 0 auto;}
#faq .accordion .accordion_item {width: 100%;border-bottom: 1px solid #D9D9D9;}
#faq .accordion .accordion_item:last-child {margin-bottom: 0;}
#faq .accordion .accordion_item h3 {
	position: relative;
	padding: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px) clamp(50px, calc(50px + 160 * ((100vw - 375px) / 1545)), 210px);
	font-weight: 500;
	font-size: clamp(14px, calc(14px + 10 * ((100vw - 375px) / 1545)), 24px);
	cursor: pointer;
	transition: .3s;
}
#faq .accordion .accordion_item h3.open {transition: .3s;}
#faq .accordion .accordion_item h3::before {
	content: 'Q.';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: clamp(50px, calc(50px + 160 * ((100vw - 375px) / 1545)), 210px);
	color: #E7350D;
	font-size: 3.2rem;
	text-align: center;
}
#faq .accordion .accordion_item h3:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%) scale(1, -1);
	width: 20px;
	height: 100%;
	background: url(../img/common/Icon_arrowD-blk.svg) no-repeat center / 100%;
	transition: .3s;
}
#faq .accordion .accordion_item h3.open:after {transform: translateY(-50%);}
#faq .accordion .accordion_item .accordion_wrap {display: none;position: relative;padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px) 0;}
#faq .accordion .accordion_item .accordion_wrap .content {position: relative;padding-left: clamp(50px, calc(50px + 160 * ((100vw - 375px) / 1545)), 210px);}
#faq .accordion .accordion_item .accordion_wrap .content::before {
	content: 'A.';
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(50px, calc(50px + 160 * ((100vw - 375px) / 1545)), 210px);
	color: #E7350D;
	font-weight: 700;
	font-size: 3.2rem;
	text-align: center;
}
#faq .accordion .accordion_item .accordion_wrap .content p:not(:last-child) {margin-bottom: 20px;}
@media only screen and ( max-width : 767px ) {
}