@charset "utf-8";
:root {
    --hover-tr: .2s ease;
}
a:hover {
	color: #333;
    text-decoration: underline;
}
.content-normal-low h2.career-title {
	font-size: clamp(20px,17.14px + 0.89vw,30px);
    font-weight: 900;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(10px,-5.806px + 1.613vw,10px);
    line-height: 1.2;
    color: var(--color-black);
	text-align: center;
	border: none;
	background: none;
	}
.content-normal-low .career-title::before {
	content: "";
    font-weight: 700;
    font-size: clamp(10px,7.14px + 0.89vw,20px);
}

/*! タイトル数字 */
.content-normal-low #job-position.career-title::before {
	content: "01";
}
.content-normal-low #flow.career-title::before {
	content: "02";
}
.content-normal-low #business.career-title::before {
	content: "03";
}
.content-normal-low #job-details.career-title::before {
	content: "04";
}
.content-normal-low #workplace.career-title::before {
	content: "05";
}

/*! タイトル数字 */

.career-link.fourcol {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 0 8px;
    margin: 8px 0;
	padding: 0;
}
.career-link.onecol {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
    gap: 0 8px;
    margin: 8px 0;
	padding: 0;
}
.career-link.twocol {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    gap: 0 8px;
	margin: 8px 0;
	padding: 0;
}
.career-link.threecol {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    gap: 0 8px;
    margin: 8px 0;
	padding: 0;
}
.career-link {
	opacity: 1 !important;
    transform: translateZ(0) !important;
    transition: var(--hover-tr);
}
ul.career-link li.quadruple {
	grid-column: span 1 / span 2;
    grid-row-start: 3;
	margin: 0;
}
ul.career-link li {
	list-style: none;
	aspect-ratio: 16 / 9;
}
ul.career-link li.single {
	list-style: none;
	aspect-ratio: 64 / 9;
	margin: 0;
}
ul.career-link li.double {
	list-style: none;
	aspect-ratio: 32 / 9;
	margin: 0;
}
ul.career-link li.triple {
	list-style: none;
	aspect-ratio: 22 / 9;
	margin: 0;
}
.career-link a {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    text-decoration: none
}

.career-link a:visited,
.career-link a:hover,
.career-link a:active,
.career-link a:focus {
    text-decoration: none
}
.career-link a .img{
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.career-link a .img .mask {
	position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.career-link a .img .mask::before {
	content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(68 98 131 / 59%);
    transition: var(--hover-tr);
    z-index: 10
}
.career-link a:hover .img .mask::before {
	opacity: 0;
	transition: var(--hover-tr)
}
.career-link a:hover .img .mask {
	transform: scale(1.03);
	transition: var(--hover-tr)
}
.career-link a .txt {
    z-index: 15;
	font-weight: 700;
    color: #fff;
	transition: var(--hover-tr);
	font-size: clamp(12px, -4.129px + 2.258vw, 22px);
	text-align: center;
}
.career-link a:hover .txt {
	opacity: 0;
	transition: var(--hover-tr)
}
.raw .img img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--hover-tr);
}
.flow-chart {
	list-style-type: none;
    display: flex;
    flex-direction: column;
    margin: clamp(30px, 14.194px + 1.613vw, 40px) auto 0;
    gap: 20px;
    max-width: 960px;
	padding: 0!important;
}
.flow-chart > li {
	opacity: 1;
    transform: translateY(0px);
    transition: .3s ease;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.flow-chart  > li:not(:last-child):after {
	content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 35px solid rgba(0, 0, 0, 0);
    border-left: 35px solid rgba(0, 0, 0, 0);
    border-top: 30px solid #d9d9d9;
    border-bottom: 0;
}
.flow-chart .chart-box {
	background-color: #fedd15;
    border-radius: clamp(12px, -0.645px + 1.29vw, 20px);
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.flow-chart li span {
	margin-right: auto;
    flex-shrink: 0;
}
.chart-box > div {
	width: 100%;
    text-align: center;
    font-size: clamp(20px, 13.677px + 0.645vw, 24px);
    font-weight: 700;
    margin-left: -100px;
	padding: 14px 0 0 0;
}
.flow-chart .chart-box .chart-detail {
	padding: 0 5% 0 30%;
	text-align: left;
    font-size: clamp(10px, 13.677px + 0.645vw, 14px);
    font-weight: 300;
	margin: 10px 0 16px 0;
	max-width: clamp(715px, 13.677px + 0.645vw, 800px);
}
.flow-chart .chart-box .chart-detail li {
	margin: 0 0 5px 0;
}
.flow-chart .chart-box .no-detail {
	padding: 0;
}
.position-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    gap: 0 30px;
    margin-top: 20px;
	padding: 0!important;
}
ul .position-link {
	grid-column: span 1 / span 2;
}
ul.position-list li {
	list-style: none;
	aspect-ratio: 16 / 3;
	background: #fedd15;
	text-align: center;
	border-radius: 6px;
}
ul.position-list li:hover {
	transition: var(--hover-tr);
	opacity: .6;
	border-radius: 6px;
}
.position-list a {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    text-decoration: none
}
.position-list a .txt {
    z-index: 15;
	font-weight: 300;
	color: #000;
	transition: var(--hover-tr);
	font-size: clamp(10px, -4.129px + 2.258vw, 16px);
}
.position-list a .txt::after {
    content: '';
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	right: 11px;
  	width: 0;
  	height: 0;
  	margin: auto;
  	border-top: 6px solid transparent;
  	border-right: 0 solid transparent;
  	border-left: 9px solid #000;
  	border-bottom: 6px solid transparent;
  	box-sizing: border-box;
}
.position-link a:visited,
.position-link a:hover,
.position-link a:active,
.position-link a:focus {
    text-decoration: none
}

@media (max-width: 567px) {
	.content-normal-low h2.career-title:nth-of-type(1){
		margin: 30px 0 0;
	}
	.content-normal-low h2.career-title {
		margin: 0;
		padding: 0;
	}
	.career-link.onecol, .career-link.twocol, .career-link.threecol, .career-link.fourcol {
		display: flex;
        flex-direction: column;
        padding: clamp(20px,7.391px + 8.152vw,30px) clamp(10px,11.304px + 2.174vw,18px);
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        margin-top: 0
	}
	ul.career-link li.single, ul.career-link li.double, ul.career-link li.triple {
		list-style: none;
		aspect-ratio: 16 / 9;
	}
	.career-link a .img {
        overflow: hidden;
        border-radius: 4px;
	}
	.career-link a .txt {
        font-size: clamp(23px, 13.826px + 0.543vw, 30px);
        font-weight: 700;
	}
	.position-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 10px;
	}
	ul.career-link.consecutive-st {
		padding: clamp(20px,7.391px + 8.152vw,30px) clamp(10px,11.304px + 2.174vw,18px) clamp(1px,7.391px + 8.152vw,1px);
	}
	ul.career-link.consecutive {
		padding: clamp(1px,7.391px + 8.152vw,1px) clamp(10px,11.304px + 2.174vw,18px);
	}
}