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

/* ==========================================================================
	共通
========================================================================== */
#ctsWrapper{
	padding-block: 0;
	overflow: hidden;
}

/* 
	タイトル
---------------------------------------------------- */
/* カテゴリータイトル
============================== */
.topTit{
	font-size: 2.6rem;
	font-weight: 500;
}
.topTit .horizTxt{
	text-indent: -0.05em;
	font-size: 12rem;	
	letter-spacing: -0.15em;
}
/* --- 飾り英語 --- */
.topEnTit{
	font-size: 3.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 1;
}



/* ==========================================================================
	header
========================================================================== */
@media print, screen and (min-width:813px){
	#headerWrapper{
		padding: 40px 0 0 50px;
	}
}

/* 
	ロゴ
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	.hLogoArea a{
		flex-direction: column;
		gap: 15px 0;
	}
	.hLogo{
		width: 23.43vw;
		min-width: 328px;
	}
	.hLogoRecruit{
		width: 23.29vw;
		min-width: 326px;
	}
}



/* ==========================================================================
	kv
========================================================================== */
#kvWrapper{
	height: 60vw;
	min-height: 720px;
	margin-bottom: 40px;
	position: relative;
}

/* 
	キャッチ
---------------------------------------------------- */
.kvTit, .kvTxt{
	position: absolute;
	z-index: 2;
}
/* メイン
============================== */
.kvTit{
	padding: 0.43vw 0 0 0.57vw;
	top: max(45.27vw, 543px);
	left: 7.2vw;
	transition: left 0.4s;
}
.kvTit::before{
	content: " ";
	display: block;
	width: 53.3vw;
	min-width: 745px;
	min-height: 87px;
	height: 6.21vw;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.kvTit img{
	width: 56.07vw;
	min-width: 784px;
	position: relative;
	z-index: 1;
}

/* サブ
============================== */
.kvTxt{
	top: max(39.28571429vw, 470px);
	left: max(53.57142857vw, 760px);
	transition: left 0.4s, top 0.4s;
}
.kvTxt img{
	width: max(35.83333333vw, 430px);
	filter: drop-shadow(1px 1px 4px rgb(000 000 000 / 20%));
}


/* 
	動画
---------------------------------------------------- */
/* 共通
============================== */
[class *= "kvMovie0"]{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	overflow: hidden;
}
[class *= "kvMovie0"] video{
	aspect-ratio: 16/9;
	pointer-events: none;
}
/* 右上
============================== */
@media print, screen and (min-width:813px){
	.kvMovie01{
		width: 86vw;
		aspect-ratio: 16/9;
		top: 0;
		right: 0;
		z-index: 1;
	}
	.kvMovie01 video{
		width: 100%;
		height: 100%;
	}
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.kvMovie01{
		width: 1032px;
	}
}

/* 
	アニメーション
---------------------------------------------------- */
.kvMovie01{
	opacity: 0;
	animation: anmFadeRight 0.8s var(--anmBaseCB) 0.8s forwards,
			   anmFadeIn 0.8s ease 0.8s forwards;
}
.kvTit{
	opacity: 0;
	animation: anmFadeLeft 0.8s var(--anmBaseCB) 1.4s forwards,
			   anmFadeIn 0.8s ease 1.4s forwards;
}
.kvTxt{
	opacity: 0;
	animation: anmFadeIn 0.8s ease 2s forwards;
}



/* ==========================================================================
	リードエリア
========================================================================== */
#leadWrapper{
	display: flex;
	justify-content: space-between;
	gap: 0 60px;
	min-width: 1200px;
	max-width: calc(50% + 570px + 8.05vw);
	padding: 0 8.05vw 150px 8.05vw;
}

/* 
	本文
---------------------------------------------------- */
.leadTxt p{
	font-size: max(1.21428571vw, 1.7rem);
	line-height: 220%;
	letter-spacing: 0.15rem;
	font-feature-settings: normal;
}
.leadTxt p:nth-of-type(n+2){
	margin-top: max(2.5vw, 35px);
}
.leadTxt p.jsAnmStart{
	animation-duration: 1s;
}
.leadTxt .kakko{
	display: inline-block;
	margin-left: -0.6em;
}

/* 
	写真・ボタン
---------------------------------------------------- */
#leadWrapper .phArea .baseBtn{
	min-height: 110px;
	margin: 25px 0 0 0;
	font-family: var(--fMincho);
	font-size: max(1.42857143vw, 2rem);
	letter-spacing: 0.08em;
	text-indent: 15px;
}


/* ==========================================================================
	城南信用金庫を知る。
========================================================================== */
#aboutWrapper{
	background: url("../images/bg_top_about_pc.png") no-repeat bottom center / cover, var(--clrMRed);
	padding-block: 130px;
}
#aboutWrapper .ctsArea{
	display: flex;
	justify-content: space-between;
}

/* 
	タイトル
---------------------------------------------------- */
#aboutWrapper .topTitArea{
	display: flex;
	flex-direction: column;
	gap: 30px 0;
	width: 370px;
}
#aboutWrapper .topTit{
	line-height: 130%;
	white-space: nowrap;
}
#aboutWrapper .topTit .horizTxt{
	font-size: 17rem;
	letter-spacing: -0.2em;
}
#aboutWrapper .topEnTit{
	flex-grow: 1;
	width: fit-content;
	border-left: 5px solid #000;
	writing-mode: vertical-rl;
	text-align: right;
	padding-left: 20px;
}

/* 
	リスト
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	.aboutList{
		display: grid;
		grid-template-columns: 330px 410px; /* 左右カラム幅 */
		grid-auto-rows: 260px 260px 300px; /* 各行の高さを統一 */
		gap: 30px;
	}
	.aboutList li:nth-of-type(1){
		grid-row: span 2;
	}
	.aboutList li:nth-of-type(4){
		grid-column: span 2;
		height: 300px;
	}
}
.aboutList li a{
	display: block;
	position: relative;
	transition: var(--comTransition);
}
/* hover時
============================== */
@media (any-hover: hover){
	.aboutList li a:hover{
		scale: var(--cmnScale);
	}
}



/* ==========================================================================
	仕事を知る。
========================================================================== */
#jobWrapper{
	background-color: var(--clrLGray);
	padding-block: 120px 130px;
	margin-bottom: 130px;
}

/* 
	タイトル
---------------------------------------------------- */
#jobWrapper .topTitArea{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	border-top: 5px solid #000;
	padding-top: 20px;
	margin-bottom: 60px;
	overflow: hidden;
}
#jobWrapper .topTit{
	translate: 60px -10px;
}

/* 
	リスト
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	.jobList{
		display: grid;
		grid-template-columns: 680px 400px;
		grid-template-rows: repeat(2, 1fr);
		gap: 0 60px;
	}
}
.jobList li{
	font-weight: 500;
	position: relative;
}
/* 数字
============================== */
.jobList .num{
	font-size: 1.5rem;
	font-family: var(--fEn);
	line-height: 1;
	position: absolute;
	transition: var(--comTransition);
}
/* 01
============================== */
.jobList li:nth-of-type(1){
	grid-row: span 2 / span 2;
	padding-left: 50px;
}
.jobList li:nth-of-type(1) a{
	display: block;
}
.jobList li:nth-of-type(1) .num{
	top: -20px;
}
/* --- 背景色付きテキスト --- */
.jobList .bgTxtOut{
	display: flex;
	flex-direction: column;
	gap: 10px 0;
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: 1;
}
.jobList .bgTxt{
	width: fit-content;
	background-color: #000;
	color: #fff;
	font-size: 3rem;
	line-height: 1;
	padding: 5px 10px 8px 10px;
	transition: var(--comTransition);
}
.jobList .bgTxt:first-of-type{
	padding-top: 0;
}
.jobList .horizTxt{
	text-indent: -0.05em;
	font-size: 6rem;
	font-weight: 600;
	padding-top: 4px;
}
/* --- 写真 --- */
.jobPh{
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.jobPh img{
	transition: all 0.5s;
}
/* hover時 */
@media (any-hover: hover){
	a:hover .jobPh img{
		scale: var(--cmnScale);
	}
}
/* --- 矢印 --- */
.jobList .arrowBtn{
	z-index: 1;
}
/* 02・03
============================== */
.jobList li:nth-of-type(3){
	grid-column-start: 2;
	border-bottom: 1px solid #000;
}
.jobList li:not(:first-of-type) a{
	display: flex;
	align-items: center;
	height: 100%;
	border-top: 1px solid #000;
	font-size: 2.6rem;
	padding: 30px 70px 30px 0;
}
.jobList li:not(:first-of-type) .num{
	top: 10px;
}
/* hover時
============================== */
@media (any-hover: hover){
	.jobList a:hover .num,
	.jobList li:not(:first-of-type) a:hover{
		color: var(--clrMRed);
	}
	.jobList a:hover .bgTxt{
		background-color: var(--clrMRed);
	}
}



/* ==========================================================================
	職員を知る
========================================================================== */
#peopleWrapper{
	padding-bottom: 180px;
}
#peopleWrapper .ctsArea{
	display: flex;
	justify-content: space-between;
}

/* 
	タイトル
---------------------------------------------------- */
#peopleWrapper .topTitArea{
	position: relative;
	z-index: 1;
}
@media print, screen and (min-width:813px){
	#peopleWrapper .topTitArea::before{
		content: " ";
		display: block;
		width: calc((100vw - 1140px)/2 + 170px);
		min-width: 200px;
		height: calc(100% + 50px);
		border: 5px solid #fff; /* 変な線回避用 */
		background-color: #fff;
		position: absolute;
		top: 50%;
		right: 0;
		translate: 0 -50%;
	}
}
#peopleWrapper .topTit{
	width: 170px;
	height: 480px;
	margin-top: 30px;
}
#peopleWrapper .topTit .horizTxt{
	writing-mode: vertical-rl;
	text-indent: 0;
	letter-spacing: -0.05em;
	white-space: nowrap;
	margin-top: 0;
	transform-origin: top left;
}
#peopleWrapper .topEnTit{
	width: 560px;
	border-top: 5px solid #000;
	text-align: right;
	padding-top: 20px;
	position: absolute;
	top: 30px;
	left: 580px;
}

/* 
	リスト
---------------------------------------------------- */
.peopleListArea{
	width: 1150px;
	height: 100%;
	padding-top: 135px;
	overflow: visible;
	z-index: 0;
}
/* 各リスト
============================== */
.peopleList li{
	width: 220px;
	padding-top: 20px;
	margin-right: 40px;
	position: relative;
	z-index: 0;
}
.peopleList a{
	display: block;
}
/* --- active時 --- */
@media print, screen and (min-width:813px){
	.peopleList li.swiper-slide-active{
		width: 320px;
		padding-top: 30px;
		margin: -135px 90px 0 0;
	}
	.peopleList li:not(:first-of-type).swiper-slide-active{
		margin-left: 150px;
	}
	/* 空じゃない最後のliだけに適用 */
	.peopleList li.swiper-slide-active:nth-last-of-type(4){
		margin-left: 40px;
	}
}
/* 数字
============================== */
.peopleList .num{
	display: flex;
	gap: 10px;
	font-size: 4.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	position: absolute;
	top: 0;
	transition: var(--comTransition);
	z-index: 1;
}
.peopleList .num::before{
	content: " ";
	display: block;
	width: 14px;
	height: 11px;
	background: var(--icoArrowMRed);
	translate: 0 0.1em;
}
/* --- active時 --- */
@media print, screen and (min-width:813px){
	.peopleList li.swiper-slide-active .num{
		font-size: 7rem;
	}
	.peopleList li.swiper-slide-active .num::before{
		width: 20px;
		height: 15px;
	}
}
/* --- hover時 --- */
@media (any-hover: hover){
	.peopleList a:hover .num{
		color: var(--clrMRed);
	}
}
/* 写真
============================== */
.peopleListPh{
	position: relative;
	z-index: 0;
}
.peopleListPhBox{
	overflow: hidden;
}
.peopleListPh img{
	width: 100%;
	transition: var(--comTransition);
}
/* キャッチコピー
============================== */
.peopleListPh figcaption{
	display: flex;
	flex-direction: column;
	gap: 4px 0;
	position: absolute;
	bottom: 50px;
	left: 50px;
	opacity: 0;
	transition: all 0.5s;
}
.peopleListPh figcaption .sp{
	display: none;
}
.peopleListPh figcaption > .horizTxt{
	width: fit-content;
	background-color: #000;
	color: #fff;
	font-size: 2.6rem;
	white-space: nowrap;
	padding: 5px 10px 10px 10px;
	transition: var(--comTransition);
}
/* --- 01 --- */
.peopleSlide01 .l2Txt1{
	letter-spacing: -0.3em;
	margin-inline: -0.18em 0.13em;
}
.peopleSlide01 .l2Txt2{
	margin-inline: -0.13em -0.1em;
}
/* --- 02 --- */
@media print, screen and (min-width:813px){
	.peopleSlide02 figcaption{
		left: 70px;
	}
}
.peopleSlide02 .l1Txt1{
	letter-spacing: -0.22em;
	margin-inline: 0 0.22em;
}
.peopleSlide02 .l1Txt2{
	letter-spacing: -0.2em;
}
.peopleSlide02 .l2Txt1{
	letter-spacing: -0.15em;
	margin-inline: 0 0.02em;
}
.peopleSlide02 .l3Txt1{
	letter-spacing: -0.15em;
	margin-inline: 0 0.12em;
}
.peopleSlide02 .l3Txt2{
	margin-inline: -0.1em -0.08em;
}
/* --- 03 --- */
.peopleSlide03 .l1Txt1{
	letter-spacing: -0.18em;
	margin-inline: -0.05em 0;
}
.peopleSlide03 .l2Txt1{
	letter-spacing: -0.18em;
	margin-inline: 0 0.15em;
}
.peopleSlide03 .l2Txt2{
	letter-spacing: -0.2em;
	margin-inline: 0 0.08em;
}
/* --- 04 --- */
@media print, screen and (min-width:813px){
	.peopleSlide04 figcaption{
		left: 90px;
	}
}
.peopleSlide04 .l1Txt1{
	letter-spacing: -0.15em;
	margin-inline: 0 -0.05em;
}
.peopleSlide04 .l1Txt2{
	letter-spacing: -0.18em;
	margin-inline: -0.05em 0;
}
.peopleSlide04 .l2Txt1{
	margin-inline: 0.03em 0.05em;
}
.peopleSlide04 .l2Txt2{
	letter-spacing: -0.25em;
	margin-inline: -0.1em 0.12em;
}
/* --- active時 --- */
.peopleList li.swiper-slide-active figcaption{
	opacity: 1;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.peopleList a:hover .peopleListPh img{
		scale: var(--cmnScale);
	}
	.peopleList a:hover .peopleListPh figcaption > .horizTxt{
		background-color: var(--clrMRed);
	}
}
/* プロフィール
============================== */
.peopleProfileBox{
	padding-top: 20px;
	transition: var(--comTransition);
}
.peopleProfileBox .name{
	font-size: 2rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 1;
}
.peopleProfileBox .job{
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 130%;
	margin-top: 10px;
}
/* --- active時 --- */
@media print, screen and (min-width:813px){
	.peopleList li.swiper-slide-active .peopleProfileBox .name{
		font-size: 2.4rem;
	}
	.peopleList li.swiper-slide-active .peopleProfileBox .job{
		font-size: 2rem;
	}
}
/* --- hover時 --- */
@media (any-hover: hover){
	.peopleList a:hover .peopleProfileBox{
		color: var(--clrMRed);
	}
}
/* swiperボタン
============================== */
.swiperBtnArea{
	display: flex;
	justify-content: space-between;
	width: 100px;
	height: 15px;
	position: absolute;
	bottom: -30px;
	left: 870px;
	z-index: 1;
}
.swiperBtnArea [class *= "swiper-button-"]{
	will-change: scale;
}
.swiperBtnArea .swiper-button-prev{
	rotate: 180deg;
}
.swiperBtnArea .arrowItem{
	margin-top: 0;
	position: static;
	translate: 0 0;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.swiperBtnArea [class *= "swiper-button-"]:hover{
		scale: 1.3;
	}
}


/* ==========================================================================
	スペシャルコンテンツ
========================================================================== */
#specialWrapper{
	padding: 3.5vw 5.71vw 0 5.71vw;
	position: relative;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	#specialWrapper{
		padding: 45px 70px 0 70px;
	}
}

/* 
	背景色・縦線
---------------------------------------------------- */
#specialWrapper::before,
#specialWrapper::after{
	content: " ";
	display: block;
	position: absolute;
}
/* 背景色
============================== */
#specialWrapper::before{
	width: 100%;
	height: calc(100% - 6.43vw);
	background-color: var(--clrLGray);
	top: 1.79vw;
	left: 0;
	pointer-events: none;
	z-index: 0;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	#specialWrapper::before{
		height: calc(100% - 90px);
		top: 25px;
	}
}
/* 縦線
============================== */
#specialWrapper::after{
	width: 1px;
	height: calc(100% - 3.8vw);
	background-color: #fff;
	top: calc(50% - 3.45vw);
    left: calc(50% - 6.6vw);
	/* 上記、topとleftの位置一時的
	　　城南ストーリ復活したら下記が正解 */
	/* top: calc(50% - 1.45vw);
	left: calc(50% - 3.6vw); */
	translate: -50% -50%;
	rotate: 15deg;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	#specialWrapper::after{
		height: calc(100% - 60px);
		top: calc(50% - 20px);
		left: calc(50% - 45px);
	}
}

/* 
	回転エリア
---------------------------------------------------- */
.specialRotateArea{
	position: relative;
	rotate: 5deg;
	z-index: 1;
}

/* 
	メインタイトル
---------------------------------------------------- */
.specialTit{
	width: calc(100vw + 11.43vw);
	background-color: var(--clrLGray);
	color: #fff;
	text-align: center;
	font-size: max(11.5rem, 9.29vw);
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 90%;
	padding-block: 1.5vw 2vw;
	position: absolute;
	top: calc(55% - 22vw);
	/* 一時的城南ストーリー復活したら下記が正解
	top: calc(55% - 20.5vw); */
	left: 50%;
	translate: -50% -50%;
}
.specialTit::after{
	content: " ";
	display: block;
	width: 100%;
	height: 5px;
	background-color: currentColor;
	position: absolute;
	bottom: 1.8vw;
	left: 0;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.specialTit{
		width: calc(100% + 400px);
		padding-block: 15px 30px;
		top: calc(50% - 240px);
	}
	.specialTit::after{
		bottom: 27px;
	}
}

/* 
	各コンテンツ
---------------------------------------------------- */
.specialArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 18vw 5.14vw;
	/* justify-content: center;
	gap: 18vw 7.14vw; */
}
.specialBox.jsAnmStart{
	animation: anmBlur 0.8s ease var(--anmDelay) forwards,
			   anmFadeIn 0.8s ease var(--anmDelay) forwards;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.specialArea{
		gap: 220px 80px;
	}
}
/* hover時
============================== */
@media (any-hover: hover){
	.specialBox:hover{
		scale: var(--cmnScale);
	}
}

/* 
	JOHNAN STORY 01 / JOHNAN STORY 02
---------------------------------------------------- */
.specialBox[class *= "story0"]{
	width: 40.71vw;
	height: 20vw;
	position: relative;
	pointer-events: none;
}
.specialBox[class *= "story0"] > *{
	pointer-events: all;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.specialBox[class *= "story0"]{
		width: 488px;
		height: 240px;
	}
}
/* テキストエリア
============================== */
.storyTxtArea{
	width: fit-content;
	position: relative;
	z-index: 1;
}
/* --- タイトル --- */
.storyMainTit{
	display: flex;
	flex-direction: column;
	gap: 0.29vw 0;
	margin-bottom: 1.07vw;
}
.storyMainTit .horizTxt{
	width: fit-content;
	background-image:  url("../images/bg_grd.png");
	background-repeat: no-repeat;
	background-position: bottom -10.71vw left -23.57vw;
	background-size: 82.07vw auto;
	color: #fff;
	font-size: max(4.4rem, 3.57vw);
	letter-spacing: 0.03vw;
	padding: 0.21vw 0.57vw 0.37vw 0.36vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.storyMainTit{
		gap: 2px 0;
		margin-bottom: 15px;
	}
	.storyMainTit .horizTxt{
		background-position: bottom -150px left -330px;
		background-size: 1150px auto;
		letter-spacing: -0.05em;
		padding: 3px 8px 8px 3px;
	}
}
/* JOHNAN STORY 01 */
.story01{
	translate: -2.14vw 0;
}
.story01 .storyMainTit .adjust.l1Txt1{ /* との */
	letter-spacing: -0.79vw;
	margin-inline: -0.53vw 0.71vw;
}
.story01 .storyMainTit .adjust.l2Txt1{ /* ダミータイトル */
	letter-spacing: -0.79vw;
	margin-right: 0.9vw;
}
.story01 .storyMainTit .adjust.l2Txt2{ /* ダミータイトル「ー」 */
	margin-right: 0.3vw;
}
.story01 .storyMainTit .adjust.l2Txt3{ /* ダミータイトル「イ」 */
	letter-spacing: -1.4vw;
	margin-left: -0.2vw;
}
.story01 .storyMainTit .adjust.l2Txt4{ /* です */
	letter-spacing: -0.3vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.story01{
		translate: -28px 0;
	}
	.story01 .storyMainTit .adjust.l1Txt1{ /* との */
		letter-spacing: -0.25em;
		margin-inline: -7px 9px;
	}
	.story01 .storyMainTit .adjust.l2Txt1{ /* ダミータイトル */
		letter-spacing: -0.25em;
		margin-right: 13px;
	}
	.story01 .storyMainTit .adjust.l2Txt2{ /* ダミータイトル「ー」 */
		margin-right: 6px;
	}
	.story01 .storyMainTit .adjust.l2Txt3{ /* ダミータイトル「イ」 */
		letter-spacing: -0.4em;
		margin-left: 0;
	}
	.story01 .storyMainTit .adjust.l2Txt4{ /* です */
		letter-spacing: -0.1em;
	}
}
/* JOHNAN STORY 02 */
.story02{
	translate: -2.5vw 0;
}
.story02 .storyMainTit .adjust.l1Txt1{ /* との */
	letter-spacing: -0.79vw;
	margin-inline: -0.53vw 0.71vw;
}
.story02 .storyMainTit .adjust.l2Txt1{ /* ダミータイトル */
	letter-spacing: -0.79vw;
	margin-right: 0.9vw;
}
.story02 .storyMainTit .adjust.l2Txt2{ /* ダミータイトル「ー」 */
	margin-right: 0.3vw;
}
.story02 .storyMainTit .adjust.l2Txt3{ /* ダミータイトル「イ」 */
	letter-spacing: -1.4vw;
	margin-left: -0.2vw;
}
.story02 .storyMainTit .adjust.l2Txt4{ /* です */
	letter-spacing: -0.3vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.story02{
		translate: -28px 0;
	}
	.story02 .storyMainTit .adjust.l1Txt1{ /* との */
		letter-spacing: -0.25em;
		margin-inline: -7px 9px;
	}
	.story02 .storyMainTit .adjust.l2Txt1{ /* ダミータイトル */
		letter-spacing: -0.25em;
		margin-right: 13px;
	}
	.story02 .storyMainTit .adjust.l2Txt2{ /* ダミータイトル「ー」 */
		margin-right: 6px;
	}
	.story02 .storyMainTit .adjust.l2Txt3{ /* ダミータイトル「イ」 */
		letter-spacing: -0.4em;
		margin-left: 0;
	}
	.story02 .storyMainTit .adjust.l2Txt4{ /* です */
		letter-spacing: -0.1em;
	}
}
/* --- 本文 --- */
.storyTxt,
.crosstalkTxt{
	width: 17.14vw;
	min-width: 200px;
	text-align: justify;
	color: var(--clrMRed);
	font-size: max(1.3rem, 1.07vw);
	line-height: 150%;
	letter-spacing: 0;
	margin-top: -2.3vw;
	transform: scaleY(0.75);
	transform-origin: left bottom;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.storyTxt,
	.crosstalkTxt{
		margin-top: -35px;
	}
}
/* 写真エリア
============================== */
.storyPhBox{
	display: flex;
	width: 26.43vw;
	min-width: 320px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 0;
}
.storyPhBox::after{
	content: " ";
	display: block;
	width: 25vw;
	min-width: 300px;
	height: 100%;
	background-color: var(--clrMRed);
	position: absolute;
	top: 0.71vw;
	left: 1.43vw;
	z-index: 0;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.storyPhBox::after{
		top: 10px;
		left: 20px;
	}
}
/* --- サブタイトル --- */
.storySubTit{
	order: 2;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 2.14vw;
	writing-mode: vertical-rl;
	color: #fff;
	font-size: max(1.2rem, 1.07vw);
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 1;
	padding-top: 1.43vw;
	z-index: 1;
}
.storyPhBox img{
	order: 1;
	width: 24.29vw;
	position: relative;
	z-index: 1;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.storySubTit{
		width: 30px;
		padding-top: 20px;
	}
	.storyPhBox img{
		width: 290px;
	}
}
/* --- 矢印パーツ --- */
.storyPhBox .arrowBtn{
	z-index: 2;
	bottom: -0.71vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.storyPhBox .arrowBtn{
		bottom: -10px;
		scale: 0.7;
		transform-origin: bottom right;
	}
}

/* 
	JOHNAN SPIRITS
---------------------------------------------------- */
.spirits{
	width: 34.29vw;
	height: 34.71vw;
	background: url("../images/item_top_special_spirits.svg") no-repeat top center / auto 100%;
	padding-top: 4.2vw;
	translate: 0.3vw 0;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.spirits{
		width: 410px;
		height: 430px;
		padding-top: 65px;
		translate: 0 0;
	}
}
/* タイトル
============================== */
/* --- メイン --- */
.spiritsMainTit{
	text-align: center;
	margin-bottom: 3vw;
}
.spiritsMainTit img{
	width: 100%;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.spiritsMainTit{
		margin-bottom: 30px;
	}
}
/* --- サブ --- */
.spiritsSubTit{
	text-align: center;
}
.spiritsSubTit img:nth-of-type(1){
	width: 26.43vw;
	translate: -2vw 0;
	will-change: scale;
}
.spiritsSubTit img:nth-of-type(2){
	width: 23.86vw;
	translate: -2.8vw 0;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.spiritsSubTit img:nth-of-type(1){
		width: 320px;
		translate: -30px 0;
	}
	.spiritsSubTit img:nth-of-type(2){
		width: 278px;
		translate: -40px 0;
	}
}
/* 矢印
============================== */
.spirits .arrowItemRed{
	top: auto;
	right: auto;
	left: calc(50% - 3.5vw);
	translate: -50% 1.5vw;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.spirits:hover .arrowItemRed{
		right: auto;
	}
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.spirits .arrowItemRed{
		left: calc(50% - 50px);
		translate: -50% 25px;
	}
}

/* 
	若手職員座談会
---------------------------------------------------- */
.crosstalk{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 46.43vw;
	height: 23.86vw;
	margin-top: 0.5vw;
	position: relative;
	translate: 1.3vw 0;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.crosstalk{
		width: 555px;
		height: 285px;
		margin-top: 15px;
		translate: 18px 0;
	}
}
/* タイトル
============================== */
/* --- メイン --- */
.crosstalkMainTit img{
	width: 54.29vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.crosstalkMainTit img{
		width: 650px;
	}
}
/* --- サブ --- */
.crosstalkSubTit{
	margin-top: -1.5vw;
}
.crosstalkSubTit img{
	width: 10vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.crosstalkSubTit{
		margin-top: -20px;
	}
	.crosstalkSubTit img{
		width: 122px;
	}
}
/* 本文
============================== */
.crosstalkTxt{
	width: 21vw;
	margin-top: -.4vw;
	position: relative;
	z-index: 2;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.crosstalkTxt{
		width: 250px;
		margin-top: -20px;
	}
}
/* 写真
============================== */
.crosstalkPh{
	width: 28.57vw;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.crosstalkPh{
		width: 340px;
	}
}
/* 矢印
============================== */
.crosstalk .arrowItemRed{
	top: auto;
	right: 0;
	bottom: 0;
	translate: 0 0;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.crosstalk:hover .arrowItemRed{
		right: auto;
	}
}

/* 
	飾り写真
---------------------------------------------------- */
[class *= "specialItem"]{
	position: absolute;
	translate: 0 -50%;
	rotate: -5deg;
}
.specialItem01{
	width: 17.86vw;
	top: calc(50% - 7.3vw);
	left: 7.2vw;
}
.specialItem02{
	width: 13.93vw;
	top: calc(50% - 13.1vw);
	right: 22.3vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	.specialItem01{
		width: 215px;
		top: calc(50% - 90px);
		left: 69px;
	}
	.specialItem02{
		width: 168px;
		top: calc(50% - 165px);
		right: 260px;
	}
}



/* ==========================================================================
	働く環境 / 採用情報
========================================================================== */
#envRecruitWrapper{
	background: linear-gradient(90deg,
				rgb(240 240 240 / 30%) 0%,
				rgb(240 240 240 / 30%) 50%,
				rgb(240 240 240 / 60%) 50%,
				rgb(240 240 240 / 60%) 100%);
	padding-block: 100px;
	margin-top: -4.3vw;
}
/* pc 1200px以下 */
@media screen and (max-width:1200px) and (min-width: 813px){
	#envRecruitWrapper{
		margin-top: -60px;
	}
}
#envRecruitWrapper .ctsArea{
	display: flex;
}
#envRecruitWrapper .ctsArea > div{
	width: 50%;
}

/* 
	タイトル
---------------------------------------------------- */
#envRecruitWrapper .topTitArea{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0 30px;
	margin-bottom: 40px;
	overflow: hidden;
}
#envRecruitWrapper .topTit .horizTxt{
	font-size: 8rem;
	letter-spacing: -0.1em;
}
#envRecruitWrapper .topEnTit{
	flex-grow: 1;
	border-top: 5px solid #000;
	text-align: right;
	font-size: 2.8rem;
	padding-top: 20px;
}

/* 
	リスト
---------------------------------------------------- */
.envRecruitListArea{
	display: flex;
	justify-content: space-between;
}
.envRecruitList{
	width: 290px;
	font-size: 1.8rem;
	font-weight: 500;
}
/* カミングスーン対応
============================== */
.envRecruitListArea .disabled {
	pointer-events: none;
	cursor: default;
	opacity: .3;
}
.envRecruitListArea .comingSoon {
	position: relative;
}
.envRecruitListArea .comingSoon::before {
	position: absolute;
	content: "";
	width: 290px;
	height: 80px;
	background: url(../images/txt_ComingSoon.svg) no-repeat center center / cover;
	top: 0;
	left: 0;
}


/* 
	働く環境
---------------------------------------------------- */
.environmentWrapper{
	padding-right: 60px;
}
/* タイトル
============================== */
.environmentWrapper .topTit .adjust{
	width: 50px;
	margin-left: -10px;
}

/* 
	採用情報
---------------------------------------------------- */
.recruitWrapper{
	padding-left: 60px;
}



@media screen and (max-width:812px){
	/* ==========================================================================
		共通
	========================================================================== */
	/* 
		タイトル
	---------------------------------------------------- */
	/* カテゴリータイトル
	============================== */
	.topTit{
		font-size: 1.8rem;
	}
	.topTit .horizTxt{
		font-size: 6rem;
	}
	/* --- 飾り英語 --- */
	.topEnTit{
		font-size: 1.8rem;
	}



	/* ==========================================================================
		kv
	========================================================================== */
	#kvWrapper{
		display: flex;
		flex-direction: column;
		height: 100svh;
		min-height: 500px;
		margin-bottom: 10px;
	}

	/* 
		キャッチ
	---------------------------------------------------- */
	/* メイン
	============================== */
	.kvTit{
		order: 1;
		width: calc(100% - 70px);
		max-width: 340px;
		padding: 5px 0 0 10px;
		margin: -22px 0 0 20px;
		position: static;
	}
	.kvTit::before{
		width: calc(100% + 10px);
		min-width: initial;
		height: 100%;
		min-height: initial;
	}
	.kvTit img{
		width: 100%;
		min-width: initial;
	}
	/* サブ
	============================== */
	.kvTxt{
		width: 70%;
		max-width: 340px;
		top: auto;
		bottom: 160px;
		left: auto;
		right: 10px;
		pointer-events: none;
	}
	.kvTxt img{
		width: 100%;
		min-width: initial;
		pointer-events: all;
	}

	/* 
		動画
	---------------------------------------------------- */
	/* 共通
	============================== */
	[class *= "kvMovie0"]{
		width: 100%;
		height: calc(100% - 123px);
		position: static;
	}
	[class *= "kvMovie0"] video{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 
		アニメーション
	---------------------------------------------------- */
	.kvMovie01{
		animation: anmFadeIn 2s ease 0.8s forwards;
	}


	/* ==========================================================================
		リードエリア
	========================================================================== */
	#leadWrapper{
		flex-direction: column;
		gap: 40px;
		min-width: initial;
		max-width: 500px;
		padding: 0 20px 60px 20px;
		margin: 0 auto;
	}

	/* 
		本文
	---------------------------------------------------- */
	.leadTxt p{
		font-size: 1.5rem;
		line-height: 180%;
	}
	.leadTxt p:nth-of-type(n+2){
		margin-top: 28px;
	}
	.leadTxt p.jsAnmStart{
		animation-duration: 0.7;
	}

	/* 
		写真・ボタン
	---------------------------------------------------- */
	#leadWrapper .phArea .baseBtn{
		font-size: 1.8rem;
		text-indent: 20px;
	}



	/* ==========================================================================
		城南信用金庫を知る。
	========================================================================== */
	#aboutWrapper{
		background: url("../images/bg_top_about_sp.png") no-repeat bottom center / 100% auto, var(--clrMRed);
		padding-block: 40px 60px;
	}
	#aboutWrapper .ctsArea{
		flex-direction: column;
		position: relative;
	}

	/* 
		タイトル
	---------------------------------------------------- */
	#aboutWrapper .topTitArea{
		gap: 20px 0;
		width: 100%;
		height: 84px;
		margin-bottom: 20px;
	}
	#aboutWrapper .topTit .horizTxt{
		font-size: 8rem;
	}
	#aboutWrapper .topEnTit{
		height: calc(100% - 104px);
		padding-left: 8px;
		position: absolute;
		top: 104px;
	}

	/* 
		リスト
	---------------------------------------------------- */
	.aboutList{
		display: flex;
		flex-direction: column;
		gap: 10px 0;
		width: calc(100% - 50px);
		margin-left: auto;
	}



	/* ==========================================================================
		仕事を知る。
	========================================================================== */
	#jobWrapper{
		padding-block: 60px;
		margin-bottom: 60px;
	}

	/* 
		タイトル
	---------------------------------------------------- */
	#jobWrapper .topTitArea{
		padding-top: 8px;
		margin-bottom: 40px;
	}
	#jobWrapper .topTit{
		translate: 30px -2px;
	}

	/* 
		リスト
	---------------------------------------------------- */
	.jobList{
		display: flex;
		flex-direction: column;
	}
	/* 数字
	============================== */
	.jobList .num{
		font-size: 1.3rem;
	}
	/* 01
	============================== */
	.jobList li:nth-of-type(1){
		padding-left: 30px;
		margin-bottom: 40px;
	}
	.jobList li:nth-of-type(1) .num{
		top: -20px;
	}
	/* --- 背景色付きテキスト --- */
	.jobList .bgTxtOut{
		gap: 6px 0;
		bottom: -15px;
	}
	.jobList .bgTxt{
		font-size: 1.7rem;
		padding: 5px 8px 8px 8px;
	}
	.jobList .bgTxt:first-of-type{
		padding-top: 0;
	}
	.jobList .horizTxt{
		font-size: 4rem;
		padding-top: 6px;
	}
	/* 02・03
	============================== */
	.jobList li:not(:first-of-type){
		margin-left: 30px;
	}
	.jobList li:not(:first-of-type) a{
		font-size: 2rem;
		padding-right: 50px;
	}



	/* ==========================================================================
		職員を知る
	========================================================================== */
	#peopleWrapper{
		padding-bottom: 140px;
	}
	#peopleWrapper .ctsArea{
		flex-direction: column;
	}

	/* 
		タイトル
	---------------------------------------------------- */
	#peopleWrapper .topTitArea{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		border-top: 5px solid #000;
		padding-top: 8px;
		margin-bottom: 30px;
	}
	#peopleWrapper .topTit{
		width: 100%;
		height: auto;
		margin-top: 0;
	}
	#peopleWrapper .topTit .horizTxt{
		writing-mode: horizontal-tb;
		font-size: 5rem;
		letter-spacing: -0.08em;
		margin: -0.3em 0 0 -2px;
		transform-origin: bottom left;
	}
	#peopleWrapper .topTit .horizTxt .adjust{
		letter-spacing: -0.14em;
		margin-inline: -6px -3px;
	}
	#peopleWrapper .topTit .horizTxt .period{
		margin-left: -5px;
	}
	#peopleWrapper .topEnTit{
		width: auto;
		border-top: none;
		padding-top: 0;
		position: static;
	}

	/* 
		リスト
	---------------------------------------------------- */
	.peopleListArea{
		width: 100%;
		height: 100%;
		padding-top: 0;
		overflow: visible;
		z-index: 0;
	}
	/* 各リスト
	============================== */
	.peopleList li{
		width: 220px;
		margin-inline: 25px;
	}
	/* 数字
	============================== */
	.peopleList .num{
		font-size: 3.6rem;
	}
	/* キャッチコピー
	============================== */
	.peopleListPh figcaption{
		gap: 2px 0;
		bottom: 20px;
		left: -20px;
	}
	.peopleListPh figcaption .pc{
		display: none;
	}
	.peopleListPh figcaption .sp{
		display: block;
	}
	.peopleListPh figcaption > .horizTxt{
		font-size: 2.2rem;
		padding: 5px 6px 10px 6px;
	}
	/* プロフィール
	============================== */
	.peopleProfileBox{
		padding-top: 15px;
	}
	.peopleProfileBox .name{
		font-size: 1.8rem;
	}
	.peopleProfileBox .job{
		font-size: 1.3rem;
		margin-top: 8px;
	}
	/* swiperボタン
	============================== */
	.swiperBtnArea{
		bottom: -50px;
		left: 50%;
		translate: -50% 0;
	}


	/* ==========================================================================
		スペシャルコンテンツ
	========================================================================== */
	:root{
		--specialSpace: 30px;
	}
	#specialWrapper{
		background-color: var(--clrLGray);
		padding: 40px 0 50px 0;
	}

	/* 
		背景色・縦線
	---------------------------------------------------- */
	#specialWrapper::before,
	#specialWrapper::after{
		display: none;
	}

	/* 
		回転エリア
	---------------------------------------------------- */
	.specialRotateArea{
		max-width: 500px;
		padding-inline: 20px;
		margin-inline: auto;
		rotate: 0deg;
	}

	/* 
		メインタイトル
	---------------------------------------------------- */
	.specialTit{
		width: 100vw;
		background-color: transparent;
		color: var(--clrMRed);
		font-size: clamp(4rem, 10.96vw, 5.7rem);
		padding-block: 0 4px;
		top: -40px;
		bottom: auto;
		left: 50%;
		translate: -50% -100%;
	}
	.specialTit::after{
		bottom: 0;
	}

	/* 
		各コンテンツ
	---------------------------------------------------- */
	.specialArea{
		flex-direction: column;
		gap: 0 0;
	}
	.specialBox:not(:last-of-type){
		border-bottom: 1px solid #fff;
		padding-bottom: var(--specialSpace);
		margin-bottom: var(--specialSpace);
	}

	/* 
		JOHNAN STORY 01 / JOHNAN STORY 02
	---------------------------------------------------- */
	.specialBox[class *= "story0"]{
		width: 100%;
		height: auto;
		pointer-events: all;
	}
	/* テキストエリア
	============================== */
	.storyTxtArea{
		width: 100%;
		margin-bottom: 15px;
	}
	/* --- タイトル --- */
	.storyMainTit{
		gap: 4px 0;
		margin-bottom: 15px;
	}
	.storyMainTit .horizTxt{
		background-position: bottom -140px left -420px;
		background-size: 1150px auto;
		font-size: 3.2rem;
		letter-spacing: -0.05em;
		padding: 3px 5px 8px 4px;
	}
	/* JOHNAN STORY 01 */
	.story01,
	.story02{
		translate: 0 0;
	}
	.story01 .storyMainTit .adjust.l1Txt1{ /* との */
		letter-spacing: -0.25em;
		margin-inline: -4px 7px;
	}
	.story01 .storyMainTit .adjust.l2Txt1{ /* ダミータイトル */
		letter-spacing: -0.25em;
		margin-right: 10px;
	}
	.story01 .storyMainTit .adjust.l2Txt2{ /* ダミータイトル「ー」 */
		margin-right: 5px;
	}
	.story01 .storyMainTit .adjust.l2Txt3{ /* ダミータイトル「イ」 */
		letter-spacing: -0.4em;
		margin-left: 0;
	}
	.story01 .storyMainTit .adjust.l2Txt4{ /* です */
		letter-spacing: -0.1em;
	}
	/* JOHNAN STORY 02 */
	.story02 .storyMainTit .adjust.l1Txt1{ /* との */
		letter-spacing: -0.25em;
		margin-inline: -4px 7px;
	}
	.story02 .storyMainTit .adjust.l2Txt1{ /* ダミータイトル */
		letter-spacing: -0.25em;
		margin-right: 10px;
	}
	.story02 .storyMainTit .adjust.l2Txt2{ /* ダミータイトル「ー」 */
		margin-right: 5px;
	}
	.story02 .storyMainTit .adjust.l2Txt3{ /* ダミータイトル「イ」 */
		letter-spacing: -0.4em;
		margin-left: 0;
	}
	.story02 .storyMainTit .adjust.l2Txt4{ /* です */
		letter-spacing: -0.1em;
	}
	/* --- 本文 --- */
	.storyTxt,
	.crosstalkTxt{
		width: 100%;
		min-width: initial;
		font-size: 1.5rem;
		margin-top: -25px;
	}
	/* 写真エリア
	============================== */
	.storyPhBox{
		width: 100%;
		min-width: initial;
		padding-bottom: 10px;
		position: relative;
		bottom: auto;
		right: auto;
		z-index: 0;
	}
	.storyPhBox::after{
		width: calc(100% - 20px);
		min-width: initial;
		height: calc(100% - 10px);
		top: 10px;
		right: 0;
		left: auto;
	}
	/* --- サブタイトル --- */
	.storySubTit{
		width: 40px;
		font-size: 1.2rem;
		padding-top: 25px;
		z-index: 1;
	}
	.storyPhBox img{
		width: calc(100% - 40px);
	}
	/* --- 矢印パーツ --- */
	.storyPhBox .arrowBtn{
		bottom: 0;
	}

	/* 
		JOHNAN SPIRITS
	---------------------------------------------------- */
	.spirits{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: calc(300px + var(--specialSpace));
		background: url("../images/item_top_special_spirits.svg") no-repeat top center / auto calc(100% - var(--specialSpace));
		padding-top: 0;
		translate: 0 0;
	}
	/* タイトル
	============================== */
	/* --- メイン --- */
	.spiritsMainTit{
		margin-bottom: 30px;
	}
	.spiritsMainTit img{
		width: 100%;
		max-width: 380px;
	}
	/* --- サブ --- */
	.spiritsSubTit img:nth-of-type(1){
		width: 280px;
		translate: 0 0;
	}
	.spiritsSubTit img:nth-of-type(2){
		width: 250px;
		translate: -5px 0;
	}
	/* 矢印
	============================== */
	.spirits .arrowItemRed{
		bottom: var(--specialSpace);
		left: 50%;
		translate: -50% 0;
	}

	/* 
		若手職員座談会
	---------------------------------------------------- */
	.crosstalk{
		width: 100%;
		height: auto;
		padding-bottom: 15px;
		margin-top: 0;
		translate: 0 0;
	}
	/* タイトル
	============================== */
	/* --- メイン --- */
	.crosstalkMainTit{
		order: 1;
	}
	.crosstalkMainTit img{
		width: 100%;
	}
	/* --- サブ --- */
	.crosstalkSubTit{
		order: 2;
		margin-top: -5px;
		position: relative;
		z-index: 1;
	}
	.crosstalkSubTit img{
		width: 120px;
	}
	/* 本文
	============================== */
	.crosstalkTxt{
		order: 4;
		width: 100%;
		margin-top: -7px;
	}
	/* 写真
	============================== */
	.crosstalkPh{
		order: 3;
		width: 100%;
		margin-top: -45px;
		position: relative;
		bottom: auto;
		left: auto;
		z-index: 0;
	}
	/* 矢印
	============================== */
	.crosstalk .arrowItemRed{
		top: auto;
		right: 0;
		bottom: 0;
		translate: 0 0;
		z-index: 2;
	}

	/* 
		飾り写真
	---------------------------------------------------- */
	[class *= "specialItem"]{
		display: none;
	}



	/* ==========================================================================
		働く環境 / 採用情報
	========================================================================== */
	#envRecruitWrapper{
		background: transparent;
		padding-block: 0;
		margin-top: 5px;
	}
	#envRecruitWrapper .ctsArea{
		flex-direction: column;
	}

	/* 
		タイトル
	---------------------------------------------------- */
	#envRecruitWrapper .topTitArea{
		gap: 0 20px;
		margin-bottom: 20px;
	}
	#envRecruitWrapper .topTit .horizTxt{
		font-size: 4rem;
		translate: 0 2px;
	}
	#envRecruitWrapper .topEnTit{
		font-size: 1.6rem;
		padding-top: 8px;
	}

	/* 
		リスト
	---------------------------------------------------- */
	.envRecruitListArea{
		flex-direction: column;
	}
	.envRecruitList{
		width: 100%;
		font-size: 1.5rem;
		font-weight: 500;
	}

	/* 
		働く環境・採用情報　共通
	---------------------------------------------------- */
	#envRecruitWrapper .ctsArea > div{
		width: 100%;
		position: relative;
	}
	#envRecruitWrapper .ctsArea > div::after{
		content: " ";
		display: block;
		width: 100vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% 0;
		z-index: 0;
	}
	#envRecruitWrapper .ctsArea > div > *{
		position: relative;
		gap: 20px;
		z-index: 1;
	}

	/* 
		働く環境
	---------------------------------------------------- */
	.environmentWrapper{
		padding: 60px 0 40px 0;
	}
	.environmentWrapper::after{
		background-color: rgb(240 240 240 / 50%);
	}
	/* タイトル
	============================== */
	.environmentWrapper .topTit .adjust{
		width: 26px;
		margin-left: -3px;
	}
	/* カミングスーン※掲載終わったら消去
	============================== */
	.envRecruitListArea .comingSoon::before {
        width: 210px;
        height: 50px;
        top: 4px;
		left: 50%;
        transform: translateX(-50%);
	}

	/* 
		採用情報
	---------------------------------------------------- */
	.recruitWrapper{
		padding: 40px 0 60px 0;
	}
	.recruitWrapper::after{
		background-color: rgb(240 240 240 / 100%);
	}
}



/* landscape */
@media (orientation: landscape) and (max-width:812px){
	/* ==========================================================================
		kv
	========================================================================== */
	.kvTxt{
		bottom: 140px;
	}
}