@charset "utf-8";
/* CSS Document */
/* subMv
========================================== */
.subMv{
	background-color:var(--bg-grey);
	padding: 180px 0 110px;
}

.subMv .inner{
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
	height: 100%;
}
.subMv h1{
	position: absolute;
	top: 55%;
	transform: translateY(-50%);
	line-height: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:.5em 2em;
	font-size: 2.6rem;
	font-weight: 600;
}
.subMv h1 .en{
	font-size:6rem;
	font-family: var(--font-secondary);
	letter-spacing: 2px;
	color:var(--color-primary);}
.subMv h1 .ja{font-size:2.2rem;color: var(--color-secondary);}

@media screen and (max-width:1200px) {
	.subMv{
		background-color:var(--bg-grey);
		padding: 160px 30px 90px;
	}
}
@media screen and (max-width:599px) {
	.subMv{padding: 140px 20px 80px;}
	.subMv .inner{padding-top: 0;}
	.subMv h1{
		column-gap: 1em;
		flex-direction: column;
		justify-content: center;
		align-items:self-start;}
	.subMv h1 .en{font-size:3.6rem;}
	.subMv h1 .ja{font-size:1.8rem;}
}

/* subBox
========================================== */
.sectionBox{
	padding: 100px 0 100px;
}
.sectionInner {
	max-width: 1200px;
	margin: 0 auto;
	padding-right: max(0px, calc(180px - (100vw - 1200px) / 2));
	box-sizing: border-box;
}
@media screen and (max-width:1300px) {
	.sectionInner {
		padding-right: max(0px, calc(180px - (100vw - 100%) / 2));
		padding-left:clamp(20px, 5vw, 30px);
	}
}
@media screen and (max-width:1024px) {
	.sectionInner {
		padding:0 clamp(20px, 5vw, 30px);
	}
}
@media screen and (max-width:599px) {
	.sectionBox {
		padding: 40px 0 60px;
	}
}

/* breadcrumb
========================================== */
.breadcrumb {
	margin: 20px auto;
	max-width: 1200px;
}

.breadcrumb li {
	display: inline;
	list-style-type: none;
	color: var(--txt-color);
	font-size: 1.2rem;
}

.breadcrumb li:before {
	content: "/";
	padding: 0 10px;
}
.breadcrumb li:first-child:before {content: none;}
.breadcrumb li a {
	text-decoration: none;
	color: var(--text-primary);}
.breadcrumb li a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 1200px) {
	.breadcrumb {
		max-width: 100%;
		padding: 0 30px;
	}
}
@media screen and (max-width: 599px) {
	.breadcrumb {padding: 0 20px;}
	.breadcrumb li {font-size: 1.2rem;}
}


/* 代表メッセージ
========================================== */
.section-r-message{
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 0;
	padding-right: max(0px, calc(180px - (100vw - 1200px) / 2));
	border-bottom: 1px solid var(--border-color);
}

@media screen and (max-width:1200px) {
	.section-r-message{
		padding-right: max(0px, calc(180px - (100vw - 100%) / 2));
		padding-left:clamp(20px, 5vw, 30px);
	}
}

@media screen and (max-width:1024px) {
	.section-r-message{
		padding-right:clamp(20px, 5vw, 30px);
		padding-left:clamp(20px, 5vw, 30px);
	}
}

.r-message-hero{
	display: flex;
	justify-content: space-between;
	gap:30px 5%;
	margin: 0 auto 60px;
}

.r-message-hero .text-block{
	flex: 1;
}
.r-message-hero .catch{
	line-height: 1.3;
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	padding-left: .5em;
	border-left: 11px solid var(--color-secondary);
	font-weight: 800;
	font-size: clamp(2.4rem, 2.00vw + 1.20rem, 3.6rem);
}
.r-message-hero .meta{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1em;
}
.r-message-hero .meta .role{color: #888888;}
.r-message-hero .meta .name{font-size: var(--font-size-accent);font-weight:600;}

.r-message-hero .photo{
	width: 300px;
}
.r-message-intro{
	padding: 2em;
	background-color: var(--color-primary);
	color: #ffffff;
	font-weight: 600;
	font-size: var(--font-size-accent);
}

.r-message-title{
	margin-bottom: 1em;
	font-weight: 800;
	font-size: var(--font-size-subheading);
	color: var(--color-primary);
}
.r-question{
	color: var(--color-secondary);
	font-size: var(--font-size-accent);
	font-weight: bold;
}
.r-answer{
	line-height: 2.2;
}

.r-message-closing{
	display: flex;
	gap: 30px 5%;
}

.r-message-closing .text{
	flex: 1;
}
.r-message-closing .photo{
	width: 260px;
}

.r-message-hero .photo img,
.r-message-closing .photo img{
	max-width: 100%;
	height: auto;
}

@media screen and (max-width:840px) {
	.r-message-hero .photo,
	.r-message-closing .photo{
		margin: 0 auto;
		width: 30%;
		text-align: center;
	}
}

@media screen and (max-width:599px) {
	.r-message-hero,
	.r-message-closing{
		flex-direction: column;
	}
	.r-message-hero .photo,
	.r-message-closing .photo{
		width:60%;
	}
}

/* 募集要項お問い合わせ
========================================== */
.applicantContact{
	width: fit-content;
	margin:0 auto;
	padding: 2.5em 5%;
	background-color: #fff;
    box-sizing: border-box;
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.applicantContact .tel{
	font-family: var(--font-secondary);
}
.applicantContact .tel a{
	font-size: var(--font-size-heading);
	font-weight: 600;
}
.applicantContact .hours{
	font-family: var(--font-secondary);
	font-size: var(--font-size-accent);
}

@media screen and (max-width:840px) {
	.applicantContact{
		width: 100%;
	}
}

/* 社員の一日詳細
========================================== */
.section-main {
	position: relative;
	background-color:var(--color-primary);
	color: #fff;
	margin-bottom: 200px;
	padding-top: 130px;
	padding-bottom: 100px;
	box-sizing: border-box;
}
.section-main::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background-color:var(--color-primary);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.section-main .inner {
    position: relative;
	max-width: 1200px;
	margin: 50px auto 0;
	padding-right: max(0px, calc(180px - (100vw - 1200px) / 2));
}
.section-main .breadcrumb a{
	color: #fff;
}
@media screen and (max-width:1300px) {
	.section-main .inner{
		padding-right: max(0px, calc(180px - (100vw - 100%) / 2));
		padding-left:clamp(20px, 5vw, 30px);
	}
}
@media screen and (max-width:1024px) {
	.section-main {margin-bottom: 120px;padding-top: 80px;}
	.section-main::after{
		bottom: -120px;
		height: 120px;
	}
	.section-main .inner{padding:0 clamp(20px, 5vw, 30px);}
}
@media screen and (max-width:599px) {
	.section-main {
		margin-bottom: 80px;
		padding-bottom: 60px;
	}
	.section-main::after{
		bottom: -80px;
		height: 80px;
	}
}


/* メインタイトル */
.main-title {
	line-height: 1.3;
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	padding-left: .5em;
	border-left: 11px solid var(--color-secondary);
	color: #fff;
	font-weight: 800;
	font-size: clamp(3rem, 4.99vw + 0.01rem, 6rem);
}
.main-img-box{
	position: relative;
	margin-bottom: 60px;
	padding-bottom: 30px;
}
.main-img-box .image{
	border: 7px solid #fff;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
}
.main-img-box .image img {
    width: 100%;
    height: auto;
    display: block;
}

.section-main .main-img-box .icon-driver {
    position: absolute;
    top: 25%;
    left: -60px;
    width: 20%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}
.section-main .main-img-box .icon-cutter {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 15%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

.staff-profile-tag{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: self-start;
	gap: 10px;
}

.staff-profile-tag .year-badge,
.staff-profile-tag .dept-name {
	line-height: 1.3;
	padding: 4px 10px 7px;
	color:var(--color-secondary);
    background-color: #fff;
	font-size: var(--font-size-subheading);
	font-weight: 800;
}
.staff-profile-tag .dept-name{
	display: flex;
	gap: 10px 1em;
	font-size: var(--font-size-heading);
}

.staff-profile-tag .dept {
    color:var(--color-secondary);
}
.staff-profile-tag .staff-name {}

.lead-area {
	margin-bottom: 100px;
	display: flex;
	gap: 20px;
	align-items: center;
}
.lead-area .text{
	flex: 1;
}
.lead-area .icon{
	width: 20%;
}
.lead-area .icon img{
	max-width: 100%;
	height: auto;
}
.lead-area .catch {
	line-height: 1.3;
    color: var(--color-secondary);
    margin-bottom: 20px;
	font-size: var(--font-size-heading);
	font-weight: 800;
}
.lead-area .description {}

@media screen and (max-width:1200px) {
	.section-main .main-img-box .icon-driver {left: -20px;}
	.section-main .main-img-box .icon-cutter {right: -20px;}
}


/* タイムラインセクション */
.section-timeline {
    margin-top: 40px;
}
.timeline-summary {
    line-height: 1.8;
	margin-top: 60px;
    margin-bottom: 60px;
}

/* 2列のタイムラインリスト */
.timelineWrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em  5%;
    list-style: none;
    padding: 0;
    margin: 0;
}
.timelineList {
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.timelineList li {
	position: relative;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    display: flex;
    gap: 10px 15px;
	padding-left: 1.5em;
}
.timelineList li::before{
	position: absolute;
	left: 0;
	top: -2px;
	content: "▽";
}
.timelineList li a{
	display: flex;
	padding-bottom: 5px;
	gap: 10px;
	text-decoration: none;
	color: #fff;
}
.timelineList li a:hover{
	color: var(--color-secondary);
	transition: .3s;
}
.timelineList .time {
	font-family: var(--font-secondary);
	font-weight: 800;
    white-space: nowrap;
}
@media screen and (max-width: 599px) {
	.timelineWrap {
		grid-template-columns: 1fr;
	}
}


/* シーン
========================================== */
.scene-timeline{
	margin-top: 80px;
}
.scene-list{
	display: flex;
	flex-direction: column;
}
.scene-item{
    position: relative;
    display: flex;
    justify-content: space-between;
	align-items: start;
    z-index: 2;
	padding: 60px 0;
}
.scene-item::before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 100%;
	background-color: var(--color-primary);
}
.scene-item::after{
	content: "";
	z-index: 2;
	display:block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% ,-50%);
    background-color: var(--color-secondary);
	width: 20px;
	height: 20px;
	border-radius: 50%;
}
.scene-item:first-of-type::before{
	top: 50%;
	height: 50%;
}
.scene-item:last-of-type::before{
	height: 50%;
}


.scene-text-box,
.scene-img-box {
    width: 45%;
}
.scene-item.align-left {
    flex-direction: row;
}
.scene-item.align-right {}

/* 画像エリア */
.scene-img-box {
    position: relative;
}
.scene-img-box .pic img{
    width: 100%;
    height: auto;
    display: block;
}
.scene-img-box .icon{
	position: absolute;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}
.scene-img-box .icon img {
	position:absolute;
    width: 100%;
    height: auto;
	pointer-events: none;
}
.scene-img-box .icon .caulking {
	top: -20px;
	right: 20px;
	width: 40%;
}
.scene-img-box .icon .helmet {
	top: -30px;
	left: 10px;
	width: 30%;
}
.scene-img-box .icon .wrench{
	top: -30px;
	right: -20px;
	width: 20%;
}

.scene-img-box .icon .measure{
	bottom: -20px;
	left: -20px;
	width: 40%;
}
.scene-img-box .icon .pliers{
	bottom: -20px;
	right: -20px;
	width: 30%;
}

/* テキストエリア */
.time-header {
	line-height: 1.3;
	position: relative;
    display: flex;
	align-items: first baseline;
	flex-wrap: wrap;
    gap:0 10px;
    margin-bottom: 12px;
	padding-left: 30px;
}
.time-header .dot {
	content: "";
	display:block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
    background-color: #d6d6d6;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}
.time-header .time {
    font-weight: bold;
	font-size: var(--font-size-heading);
	font-family: var(--font-secondary);
    color: var(--color-secondary);
}
.time-header .label {
    color: var(--color-secondary);
	font-size: var(--font-size-caption);
    font-weight: bold;
}

.scene-ttl {
    font-weight: bold;
    color:var(--color-primary);
	font-size: var(--font-size-subheading);
	font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
}
.scene-txt{
    line-height: 1.8;
}


/* メッセージ */
.staffMessage{
	line-height: 2;
	width: fit-content;
	margin: 60px auto 0;
}

@media screen and (max-width:1024px) {
	.scene-timeline{margin-top: 60px;}
}

@media screen and (max-width:599px) {
	.scene-timeline{margin-top: 30px;}
	.scene-item{
		flex-direction:column;
		gap: 10px;
		padding:20px 0;
	}
	.scene-item.align-left{flex-direction: column-reverse;}
	.scene-text-box,
	.scene-img-box {
		width: 100%;
	}
	.scene-item::before,
	.scene-item::after{
		display: none;
	}
	.scene-img-box .icon{display: none;}

}


/* 仕事を知る
========================================== */
.mapArea {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin:60px auto 100px;
	/*overflow: hidden;*/
	aspect-ratio: 16 / 9;
	/* スマホでパンを有効化（ブラウザスクロールを抑制） */
	touch-action: none;
}
.mapContent {
	position: absolute;
	width: 100%;
	aspect-ratio: 16 / 9; /* PCは横幅に応じて高さ確定 */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	cursor: grab;
}

/* iframe は親に合わせて常にフィット */
.videoWrapper,
.videoWrapper video{
	width: 100%;
	height: 100%;
	border: none;
}
.videoWrapper video{pointer-events: none;}

@media (max-width: 840px) {
	.mapArea {margin:30px auto 40px;}
	.mapContent {
		width: 200%;
		/* 高さは比率維持で自動算出される（aspect-ratio） */
	}
}

/* ぴょんと出るのは画像に */
.pinIcon.normal {
	opacity: 0;
	animation: popIn 0.6s cubic-bezier(0.68,-0.55,0.27,1.55) forwards;
	animation-delay: 5s;
}

/* ゆらゆらは親の .pin に */
.pin {
	z-index: 10;
	position: absolute;
	cursor: pointer;
	transform: translate(-50%, -100%);
	animation: floatY 2s ease-in-out infinite;
	animation-delay: 2.6s;
	pointer-events: auto;
}
.pin.pin1{width: 18%;}
.pin.pin2_1{width: 13%;}
.pin.pin2_2{width: 15%;}
.pin.pin3{width: 11%;}
.pin.pin4{width: 11%;}
.pin.pin5{width: 19%;}
.pin.pin6_1{width: 14%;}
.pin.pin6_2{width: 16%;}
.pin.pin7{width: 17%;}
.pin.pin8_1{width: 16%;}
.pin.pin8_2{width: 13%;}

.pinIconWrap {
	position: relative;
	width: 100%;
}
.pinIconWrap img {
	position: absolute;
	inset: 0;
	transition: opacity 0.2s ease;
	width: 100%;
	height: auto;
}

.pinIconWrap .hover { opacity: 0; }

/* .normal 画像にホバーした時だけ hover 用画像を表示 */
.pinIconWrap:has(.normal:hover) .hover { opacity: 1; }
.pinIconWrap:has(.normal:hover) .normal { opacity: 0; }

/* クリック後〜クローズまで維持 */
.pin.active .pinIconWrap .hover { opacity: 1; }
.pin.active .pinIconWrap .normal { opacity: 0; }


/* ぴょんと表示 */
@keyframes popIn {
	0%   { transform: scale(0); opacity: 0; }
	60%  { transform: scale(1.2); opacity: 1; }
	80%  { transform: scale(0.9); }
	100% { transform: scale(1); opacity: 1; }
}

/* 上下にゆらゆら */
@keyframes floatY {
	0%   { transform: translate(-50%, -100%) translateY(0); }
	50%  { transform: translate(-50%, -100%) translateY(-8px); }
	100% { transform: translate(-50%, -100%) translateY(0); }
}


.pinText {display: none;}
.popup {
	z-index: 2000;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.2);
	justify-content: center;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.popup.show {
	opacity: 1;
	pointer-events: auto;
}
.popupContent{
	overflow: hidden;
	position: absolute;
	left: 5%;
	bottom:8rem;
	background: #fff;
	max-width: 40rem;
	max-height: min(50rem, 80vh);
	transform: scale(1);
	transition: transform 0.4s ease;
}
.popup.show .popupContent {transform: scale(1);}

.popupContentInner {
	max-height: inherit;
	overflow-y: auto; /* スクロールは内側で */
	padding: 30px 30px 30px;
}

.popupContentInner::-webkit-scrollbar {
	width: 10px;
}
.popupContentInner::-webkit-scrollbar-track {
	background: transparent;
}

.popupContentInner::-webkit-scrollbar-thumb {
	background: #888;
}
.popupContentInner::-webkit-scrollbar-thumb:hover {background: #555;}

.popupContent .place{
	color:#0081cf;
	font-weight: 600;
}
.popupContent .title{
	margin-top: 20px;
	margin-bottom: 1.5em;
	font-weight: 600;
	font-size: 2.2rem;
	color: var(--color-secondary);
}
.popupContent .title span{
	display: block;
}
.popupContent .title .department{
	margin-bottom: 10px;
	color: var(--text-primary);
	font-size: var(--font-size-caption);
}
.popupContent .point{
	margin-top: 1.5em;
	padding: 1em;
	background-color: #eaf0f6;
}
.popupClose{
	z-index: 200;
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30px;
	height: 30px;
	background-color: var(--color-primary);
	pointer-events: auto;
}
.popupClose::before,
.popupClose::after{
	content: "";
	position: absolute;
    top: 50%;
    left: 50%;
	width: 15px;
	border-top: 2px solid #fff;
}
.popupClose::before{transform:translate(-50%,-50%) rotate(45deg);}
.popupClose::after{transform:translate(-50%,-50%) rotate(-45deg);}


@media screen and (max-width:840px){
	.mapArea {
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		border: 1px solid #eee;
	}
	.popupContent{
		max-width: 90vw;
		max-height:70vh;
	}
}

/* 新着詳細
========================================== */
.postBox{
	margin-bottom: 30px;
}
.postBox ul,.postBox ol{margin-left: 1.2em;margin-bottom: 1em;}
.postBox ul{list-style-type: disc;}
.postBox ul li{list-style-type: inherit;}
.postBox ol {list-style-type: decimal}
.postBox ol li{list-style-type: inherit;}

.postTitle{
	position: relative;
	line-height:1.2;
	margin-bottom:1.5em;
	padding:0.3em 0.5em 0.6em;
	border-left: 5px solid var(--color-secondary);
	font-size:clamp(1.6rem, 3vw, 2rem);
	font-weight: 600;
}
.postTitle::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
}
.postInfo{display:flex;align-items: center;gap: 1em;}
.postInfo .date{
	color: var(--text-secondary);
	font-size: 1.4rem;
}
.postText{padding: 2.5em 0;}
.postSignature{
	padding:20px;
	box-sizing: border-box;
	background-color:var(--bg-grey);
}
.postSignature .name{font-weight: 600;}
.postSignature p+p{margin-top: 0.5em!important;}
.postSignature .tel a{text-decoration: none;font-size: 120%;color: var(--txt-color);margin-right: 1em;}

@media screen and (max-width:599px) {
	.postSignature .name{font-size: 1.4rem;}

}

/* nav（共通）
========================================== */
.wp_nav{margin: 30px 0 20px;}
.wp_nav .wp-pagenavi{padding:10px 0;}
.wp_nav::after{
	content:" ";
	display:block;
	clear:both;
	font-size:0;}

/* Pager（共通）
========================================== */
.pager{
	display: flex;
	justify-content: space-between;}
.pager li a{
	display: block;
	position: relative;
	padding-bottom: 5px;
	color:var(--text-primary);
	text-decoration:none;}
.pager li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-primary);
	transform:scale(0,1);
	transform-origin: left top;
	transition: 0.3s;
}
.pager li a:hover::after{
	transform:scale(1,1);
}

@media screen and (max-width:599px){
	.pager{
		display: flex;
		flex-direction: column;
		gap: 1em;}
	.pager li a{display: inline;}
	.pager li{text-align:center;}
	.pager li.prev { order:1; }
	.pager li.next { order:2; }
	.pager li.list { order:3; }
}

/* editor img
========================================== */
img.alignleft {
	display: inline;
	float: left;
	margin-right: 20px;
}
img.alignright {
	display: inline;
	float: right;
	margin-left: 20px;
}
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.postBox p::after{content:" ";display:block;clear:both;font-size:0;}
@media screen and (max-width:599px){
	img.alignleft,
	img.alignright,
	img.aligncenter{
		display:block;
		float:none;
		margin:0 0 10px;
	}
}


/* 募集要項
========================================== */
.subpageMenuWrap {
	position: sticky;
	top:75px;
	z-index: 10;
	transition: top 0.3s ease-in-out;
}

.subpageMenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    margin: 80px auto;
	max-width: 1200px;
	padding-right: max(0px, calc(180px - (100vw - 1200px) / 2));
	box-sizing: border-box;
    list-style: none;
}

.subpageMenu li a {
    position: relative;
    display: block;
    padding: 0.6em 1.8em;
    background-color: #f4f6f8;
	color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
	border: none;
}

.subpageMenu li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.subpageMenu li a:hover {
    background-color: #eaf0f6;
    color: var(--color-primary);
}

.subpageMenu li a:hover::after {
    width: 100%;
}

.scrollHint{
	display: none;
}
@media screen and (max-width:1300px) {
	.subpageMenu{
		padding-right: max(0px, calc(180px - (100vw - 100%) / 2));
		padding-left:clamp(20px, 5vw, 30px);
	}
}
@media screen and (max-width: 1024px) {
	.subpageMenuWrap {
		position: sticky;
		top: 60px;
		z-index: 200;
	}
	.subpageMenu{
		padding:1em;
		background-color: #fff;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap:.5em;
		margin:0;
		padding:10px clamp(20px, 5vw, 30px);
		-webkit-overflow-scrolling: touch;
	}
	.subpageMenu li a{
		white-space: nowrap;
		border: none;
		padding:0.2em 1em;
		font-size: 1.4rem;
	}
	.subpageMenu li a::after {display: none;}
	.scrollHint {
		display: block;
		position: absolute;
		right: 1em;
		font-size: 0.9rem;
		color: #333;
		margin-top: 4px;
		opacity: 0.7;
	}
	.subpageMenu::-webkit-scrollbar {height: 8px;}
	.subpageMenu::-webkit-scrollbar-track {background: #F1F1F1;}
	.subpageMenu::-webkit-scrollbar-thumb {background: #888;}
}


/* 募集要項ステップ
========================================== */
.flowList {
	list-style: none;
	margin-bottom: 30px;
	position: relative;
	display: flex;
	gap: 30px 40px;
}
.flowList .item {
	position: relative;
	width: calc((100% - 40px *2)/3);
	border: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
}

.flowList .item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -37px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    border-color:  transparent transparent transparent #0056b3;
    z-index: 2;
}
.flowList .stepHeader {
    padding: 8px 12px;
    line-height: 1.2;
	background: var(--color-primary);
    color: #fff;
    font-family: var(--font-secondary);
	font-size: var(--font-size-subheading);
	font-weight: 500;
    text-align: center;

}
.flowList .stepHeader .stepNum {margin-left: 10px;}
.flowList .stepBody{
	flex: 1;
	padding: 2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.flowList .stepBody .title {
	font-weight: 800;
	font-size: var(--font-size-accent);
}
.flowList .stepBody .noteText{margin-top: 10px;}

@media screen and (max-width:599px) {
	.flowList{
		flex-direction: column;
	}
	.flowList .item {
		width: 100%;
	}

	.flowList .item:not(:last-child)::after {
		left: 50%;
		bottom: -32px;
		top: auto;
		right: auto;
		transform: translateX(-50%);
		border-color:#0056b3  transparent transparent transparent ;
	}
}