@charset "utf-8";

/*HEADER*/
#headerNavi li.recruit .en {
	color:var(--color-logo) !important;
}

/*あいさつ*/
#greeting {
	background-color:rgba(240,237,232,1);
}
#greeting .content-box .img-box {
	background:url(../images/tmpl/pattern_kagamiya_a080.svg) center center repeat;
}
#greeting .content-box .txt-box h2 {
	font-family:"Noto Serif JP", serif;
	font-weight:700;
	color:#544034;
}
#greeting .content-box .txt-box .comment-box ul.ul {
	margin-bottom:1em;
}
#greeting .content-box .txt-box .comment-box ul.ul li {
	margin-bottom:0;
}

@media screen and (max-width: 767.98px) {

#recruit section .container {
	max-width:767px;
	margin:auto;
}
#recruit section h1.title {
	text-align:center;
	margin-bottom: 2rem;
}

/*ごあいさつ*/
#greeting {
	padding:2rem 2rem 4rem;
}
#greeting .content-box {
}
#greeting .content-box .img-box {
	background-size:200px;
	text-align:center;
	width:100%;
	margin:0 auto 1rem;
}
#greeting .content-box .img-box > span {
	padding:2rem 0;
}
#greeting .content-box .img-box img {
	width:100%;
	height:auto;
}
#greeting .content-box .txt-box {
}
#greeting .content-box .txt-box h2 {
	font-size:20px;
	color:#544034;
	text-align:center;
	margin-bottom:1rem;
}
#greeting .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}
/*縦向き*/
@media (orientation: portrait){
}
/*横向き*/
@media (orientation: landscape){
#greeting .content-box .img-box {
	max-width:60vw;
}
}

/*求人情報一覧*/
#job-info {
	padding:4rem 2rem;
}

#job-info .job-list > li:not(:last-child) {
	margin-bottom:2rem;
}
#job-info .job-list a {
	display:block;
	padding:1rem;
	width:100%;
	height:100%;
	color:#333;
	border:solid 1px rgba(215,23,24,1);
	border-radius:10px;
}
#job-info .job-list a .next,
#job-info .job-list a .contact {
	font-size:14px;
	text-align:center;
	color:#FFF;
	background-color:rgba(215,23,24,1);
	padding:.5rem;
}
#job-info .job-list a .next::after {
	content:"＞";
	display: inline-block;
	font-weight:700;
	margin-left:1em;
}
#job-info .job-list a .contact::after {
	content:"";
	display: inline-block;
	background-image:url(../images/tmpl/icon-mail_w.svg);
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:center center;
	width:1em;
	height:1em;
	margin-left:1em;
}
#job-info .job-list .job-summary {
	display: block;
	width:100%;
	height:100%;
}
#job-info .job-list .job-summary .job-title {
	font-size:18px;
	font-weight:700;
	text-align:center;
	padding:0 0 1rem 0;
}
#job-info .job-list .job-summary h2.job-title .sub {
	display:block;
	font-size:14px;
}
#job-info .job-list .job-summary .description {
	display:flex;
	flex-direction:column-reverse;
	width:100%;
}
#job-info .job-list .job-summary .description h3 {
	font-size:14px;
	font-weight:700;
	color:#FFF;
	background-color:#C00;
	width:100%;
	padding:.5rem 1rem;
}
#job-info .job-list .job-summary .flavor {
	background-color:rgba(253,224,224,1);
	padding:.5rem 1rem;
}
#job-info .job-list .job-summary .flavor li {
	display:flex;
	column-gap:.25rem;
	margin-bottom:.25rem;
	font-size:12px;
}
#job-info .job-list .job-summary .flavor li:last-child {
	margin-bottom:0;
}
#job-info .job-list .job-summary .flavor li:before {
	content:"〇";
	color:var(--color-logo);
}
#job-info .job-list .job-summary .point {
	padding:1rem 0;
}
#job-info .job-list .job-summary .point .pickup {
	display:flex;
	flex-flow: row wrap;
	gap:.75rem .75rem;
}
#job-info .job-list .job-summary .point .pickup li {
	color:rgba(215,23,24,1);
	font-size:12px;
	text-align:center;
	line-height:1;
	width:calc(100% / 2 - .5rem);
	padding:.5rem 0;
	border:solid 1px rgba(215,23,24,1);
	border-radius:6px;
}

/*求人詳細*/
#recruit_job-details #job-details table,
#recruit_job-details #job-details thead,
#recruit_job-details #job-details tbody,
#recruit_job-details #job-details tr,
#recruit_job-details #job-details th,
#recruit_job-details #job-details td {
	display:block;
}
#recruit_job-details section {
	padding:2rem 1rem;
}
#recruit_job-details section .container {
	max-width:767px;
	margin:auto;
}

#recruit_job-details section h1.title {
	text-align:center;
	margin-bottom: 2rem;
}
#recruit_job-details section h1.title .ja {
	font-size:16px;
	letter-spacing:normal;
}

#recruit_job-details section#job-details .container {
	border:solid 1px #999;
}
/*アピール*/
#recruit_job-details #description {
	margin-bottom:2rem;
}
#recruit_job-details #description .content-box .img-box {
	background-image:none !important;
}
#recruit_job-details #description .content-box .txt-box {
	padding:1rem 0;
	border-bottom:solid 1px #CCC;
}
#recruit_job-details #description .content-box .txt-box h2 {
	font-size:16px;
	margin-bottom:1em;
}
#recruit_job-details #description .content-box .txt-box h3 {
	font-weight:700;
	margin-bottom:.25em;
}
#recruit_job-details #description .content-box .txt-box .aptitude {
	margin-bottom:1rem;
}
#recruit_job-details #description .content-box .txt-box .aptitude ul {
}
#recruit_job-details #description .content-box .txt-box .aptitude ul li::before {
	content:"〇";
	color:#99ea99;
}
#recruit_job-details #description .content-box .txt-box .benefit dt {
	font-weight:700;
	margin-bottom:.25em;
}
#recruit_job-details #description .content-box .txt-box .benefit dd {
	font-size:12px;
	margin-bottom:1em;
	padding-left:1rem;
}
#recruit_job-details #description .content-box .txt-box .benefit dd:last-of-type {
	margin-bottom:0;
}
/*求人内容*/
#recruit_job-details table.job-table {
	border-collapse:separate;
	border-spacing:0 0;
	width:100%;
	margin:0 auto;
}
#recruit_job-details table.job-table th,
#recruit_job-details table.job-table td {
	text-align:left;
	vertical-align:top;
	padding:.75rem 0;
}
#recruit_job-details table.job-table th {
	background-color:rgba(241,241,241,1);
	padding-left:1rem;
	border-bottom:dotted 1px #999;
}
#recruit_job-details table.job-table td {
	padding-left:1rem;
	border-bottom:solid 1px #999;
}
#recruit_job-details table.job-table tr:last-child th,
#recruit_job-details table.job-table tr:last-child td {
	border-bottom:none 0;
}
#recruit_job-details table.job-table th {
}
#recruit_job-details table.job-table tr td p.flex-hours {
	padding-bottom:.5rem;
}
#recruit_job-details table.job-table tr td p.shift-work {
	padding-top:.5rem;
}
#recruit_job-details table.job-table tr td dl {
	margin-right:1rem;
	border:solid 1px #CCC;
}
#recruit_job-details table.job-table tr td dl dt,
#recruit_job-details table.job-table tr td dl dd {
	padding:.5rem 1rem;
}
#recruit_job-details table.job-table tr td dl dd:not(:last-of-type) {
	border-bottom:solid 1px #CCC;
}
#recruit_job-details table.job-table tr td dl dt {
	background-color:rgba(241,241,241,.8);
}
#recruit_job-details table.job-table tr.salary td p {
	font-weight:bold;
	padding-bottom:.5rem;
}
#recruit_job-details table.job-table tr.salary td dl.additional-allowances {
	margin-top:1rem;
}
#recruit_job-details table.job-table tr.salary td dl dt {
	min-width:calc(7em + 2rem);
}
/*申込*/
#recruit_job-details #entry {
	background-color:rgba(240,240,240,1);
}
}

/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/


/*あいさつ*/
#greeting {
	padding:100px 80px;
}
#greeting .content-box {
	display:flex;
	align-items:center;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#greeting .content-box .img-box {
	align-self:flex-start;
	display:flex;
	align-items:center;
	text-align:right;
	width:calc(40% - 60px);
	height:100%;
	background-size:60%;
	border:solid 1px #FFF;
	border-radius:8px 0 0 8px;
	overflow:clip;
	position: sticky;
	top:140px;
}
#greeting .content-box .img-box > span {
	padding:2em 0;
}
#greeting .content-box .img-box img {
	width:100%;
	height:auto;
}
#greeting .content-box .txt-box {
	align-self:flex-start;
	width:60%;
}
#greeting .content-box .txt-box h2 {
	font-size:clamp(24px, 2.4vw, 32px);
	white-space:nowrap;
	margin-bottom:1em;
}
#greeting .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}

/*求人情報一覧*/
#job-info {
	padding:100px 80px;
}
#job-info .job-list {
	display:grid;
	grid-template-rows:auto;
	grid-template-columns:1fr 1fr;
	gap:60px;
	max-width:1440px;
	margin:auto;
}
#job-info .job-list a {
	display:block;
	padding:0 20px 20px;
	width:100%;
	height:100%;
	color:#333;
	background-color:#FFF;
	border:solid 1px #CCC;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0,0,0,.4);
	transform:translateY(0px);
	transition:transform ease-in-out .2s;
}
#job-info .job-list a:hover {
	box-shadow:0 6px 10px rgba(0,0,0,.3);
	transform:translateY(-20px);
}
#job-info .job-list a .next,
#job-info .job-list a .contact {
	font-size:clamp(14px, 1.4vw, 16px);
	text-align:center;
	color:#FFF;
	background-color:rgba(215,23,24,1);
	padding:.5rem;
	border-radius:10px;
}
#job-info .job-list a .next::after {
	content:"＞";
	display: inline-block;
	font-weight:700;
	margin-left:1em;
}
#job-info .job-list a .contact::after {
	content:"";
	display: inline-block;
	background-image:url(../images/tmpl/icon-mail_w.svg);
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:center center;
	width:1em;
	height:1em;
	margin-left:1em;
}
#job-info .job-list .job-summary {
	width:100%;
	height:100%;
}
#job-info .job-list .job-summary h2.job-title {
	display:flex;
	justify-content:center;
	align-items:center;
	column-gap:.5em;
	height:4em;
	font-size:clamp(20px, 2vw, 24px);
	font-weight:700;
	letter-spacing:.1em;
}
#job-info .job-list .job-summary h2.job-title .sub {
	font-size:clamp(14px, 1.4vw, 16px);
}
#job-info .job-list .job-summary .description {
	width:100%;
	aspect-ratio:11 / 6;
	position:relative;
	overflow:clip;
}
#job-info .job-list .job-summary .description h3 {
	font-size:clamp(16px, 1.6vw, 18px);
	font-weight:700;
	background-color:rgba(255,255,255,.8);
	width:100%;
	padding:.5em 1em;
	position:absolute;
	bottom:0;
}
#job-info .job-list .job-summary .description img {
	width:100%;
}
#job-info .job-list .job-summary .flavor {
	background-color:rgba(253,224,224,1);
	padding:.5em 1em;
}
#job-info .job-list .job-summary .flavor li {
	display:flex;
	column-gap:.25em;
	margin-bottom:.25em;
}
#job-info .job-list .job-summary .flavor li:last-child {
	margin-bottom:0;
}
#job-info .job-list .job-summary .flavor li:before {
	content:"〇";
	color:var(--color-logo);
}
#job-info .job-list .job-summary .point {
	padding:1rem 0;
}
#job-info .job-list .job-summary .point .pickup {
	display:flex;
	flex-flow: row wrap;
	gap:.75rem .75rem;
}
#job-info .job-list .job-summary .point .pickup li {
	color:rgba(215,23,24,1);
	font-size:clamp(12px, 1.2vw, 14px);
	text-align:center;
	line-height:1;
	width:calc(100% / 3 - .5rem);
	padding:.5rem 0;
	border:solid 1px rgba(215,23,24,1);
	border-radius:6px;
}

/*求人詳細*/
#recruit_job-details section {
	padding:100px 0;
}
#recruit_job-details section .container {
	width:calc(100% - 160px);
	max-width:1000px;
	margin:auto;
}

#recruit_job-details section h1.title {
	text-align:center;
	margin-bottom:60px;
}
#recruit_job-details section h1.title .ja {
	font-size:clamp(24px, 2.4vw, 32px);
	letter-spacing:normal;
}
/*アピール*/
#recruit_job-details #description {
	margin-bottom:60px;
}
#recruit_job-details #description .content-box {
	display:flex;
}
#recruit_job-details #description .content-box .img-box {
	background-position: center right;
	background-repeat:no-repeat;
	background-size:cover;
	width:50%;
}
#recruit_job-details #description .content-box .txt-box {
	width:50%;
	padding:40px 80px 40px 40px;
	border-top:solid 1px #CCC;
	border-bottom:solid 1px #CCC;
}
#recruit_job-details #description .content-box .txt-box h2 {
	font-size:clamp(20px, 2vw, 24px);
	margin-bottom:1em;
}
#recruit_job-details #description .content-box .txt-box h3 {
	font-weight:700;
	margin-bottom:.25em;
}
#recruit_job-details #description .content-box .txt-box .aptitude {
	margin-bottom:1em;
}
#recruit_job-details #description .content-box .txt-box .aptitude ul {
	display:flex;
	flex-flow: row wrap;
	gap:.25em 0.5rem;
	padding-left:.25em;
}
#recruit_job-details #description .content-box .txt-box .aptitude ul li::before {
	content:"〇";
	color:#99ea99;
}

#recruit_job-details #description .content-box .txt-box .benefit {
}
#recruit_job-details #description .content-box .txt-box .benefit dt {
	font-weight:700;
	margin-bottom:.25em;
}
#recruit_job-details #description .content-box .txt-box .benefit dd {
	font-size:clamp(12px, 1.2vw, 14px);
	margin-bottom:1em;
	padding-left:1em;
}
#recruit_job-details #description .content-box .txt-box .benefit dd:last-of-type {
	margin-bottom:0;
}
/*求人内容*/
#recruit_job-details section#job-details .container {
	padding:40px;
	border:solid 1px #999;
	border-radius:10px;
}

#recruit_job-details table.job-table {
	border-collapse:separate;
	border-spacing:0 0;
	width:100%;
	margin:0 auto;
}
#recruit_job-details table.job-table th,
#recruit_job-details table.job-table td {
	text-align:left;
	vertical-align:top;
	padding:1rem 0 1rem 2rem;
	border-bottom:solid 1px #999;
}
#recruit_job-details table.job-table tr:last-child th,
#recruit_job-details table.job-table tr:last-child td {
	border-bottom:none 0;
}
#recruit_job-details table.job-table th {
	text-align:justify;
	text-align-last:justify;
	padding-right:2rem;
	border-right:solid 1px #999;
}
#recruit_job-details table.job-table tr td p.flex-hours {
	padding-bottom:.5rem;
}
#recruit_job-details table.job-table tr td p.shift-work {
	padding-top:.5rem;
}
#recruit_job-details table.job-table tr td dl {
	display:grid;
	grid-template-rows:auto;
	grid-template-columns:auto 1fr;
	gap:0 0;
}
#recruit_job-details table.job-table tr td dl dt,
#recruit_job-details table.job-table tr td dl dd {
	padding:.5rem 1rem;
}
#recruit_job-details table.job-table tr td dl dt:not(:last-of-type),
#recruit_job-details table.job-table tr td dl dd:not(:last-of-type) {
	border-bottom:dashed 1px #CCC;
}
#recruit_job-details table.job-table tr td dl dt {
	background-color:rgba(241,241,241,1);
}
#recruit_job-details table.job-table tr.salary td p {
	font-weight:bold;
	padding-bottom:.5rem;
}
#recruit_job-details table.job-table tr.salary td dl.additional-allowances {
	padding-top:1rem;
	margin-top:1rem;
	border-top:solid 1px #CCC;
}
#recruit_job-details table.job-table tr.salary td dl dt {
	min-width:calc(7em + 2rem);
}
#recruit_job-details table.job-table tr.benefits-welfare ul.ul {
	display: inline-grid;
	grid-template-rows:auto;
	grid-template-columns:auto 1fr;
	gap:.5rem 3rem;
	list-style-position:inside;
	margin:0;
}
#recruit_job-details table.job-table tr.benefits-welfare ul.ul li {
	padding:0;
	margin:0;
}
/*申込*/
#recruit_job-details #entry {
	padding:100px 80px;
	background-color:rgba(240,240,240,1);
}

#recruit_job-details #entry .fth {
	font-size:14px;
	width:26%;
}

}