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

/* ==========================================================================
	JOHNAN STORY
========================================================================== */
/* 
	KV・キャッチ
---------------------------------------------------- */
#storyKvWrapper{
	display: flex;
	flex-direction:column-reverse;
}
/* KV
============================== */
.storyKvArea{
	position: relative;
}
.storyKvArea .kv{
	display: block;
	width: calc(100% - 60px);
	min-height: 460px;
	margin: 0 auto;
	aspect-ratio: 134 / 46;
	overflow: hidden;
}
.storyKvArea .kv::before{
	content: ' ';
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/bg_story01_page_tit_pc.png) center center / cover no-repeat;
	scale: 1.2;
	filter: blur(20px);
	animation: anmPeopleKvPh 0.8s var(--anmBaseCB) 0.6s forwards;
}
@keyframes anmPeopleKvPh{
	0% {
		scale: 1.2;
		filter: blur(20px);
	}
	100% {
		scale: 1;
		filter: blur(0);
	}
}
.storyKvArea .horizTxt{
	width: fit-content;
	background-color: #000;
	color: #fff;
	font-size: 3.6rem;
	white-space: nowrap;
	padding: 8px 11px 13px 8px;
	rotate: -5deg;
	position: absolute;
	top: -10px;
	left: calc(50% - 570px);
	z-index: 1;
}
/* キャッチ
============================== */
.storyKvCatchArea{
	display: flex;
	gap: 0 75px;
	padding-block: 47px 70px;
}
/* キャッチ */
.storyKvCatchBox{
	display: flex;
	flex-direction: column-reverse;
	opacity: 0;
	animation: anmFadeLeft 0.8s var(--anmBaseCB) 0.7s forwards, anmFadeIn 0.8s ease 0.7s forwards;
}
.storyKvCatchBox .catch{
	display: flex;
	flex-direction: column;
	gap: 5px 0;
	margin-top: -30px;
}
.storyKvCatchBox .catch .grad {
	width: fit-content;
	padding: 3px 8px 8px 5px;
	background-image: url(../images/bg_grd.png);
	background-repeat: no-repeat;
	/* background-position: bottom -10.71vw left -23.57vw; */
	background-position: bottom -10.71vw left -5.57vw;
	background-size: 82.07vw auto;
	color: #fff;
	font-size: 6rem;
	white-space: nowrap;
}
/* ショルダー */
.storyKvCatchBox .shoulder{
	font-family: var(--fEn);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1;
}
/* リード */
.storyKvCatchArea .cmnLeadTxt{
	padding-top: 20px;
	margin-bottom: 0;
	text-align: justify;
	opacity: 0;
	animation: anmBlur var(--anmDuration) ease var(--anmDelay) forwards, var(--anmFadeIn);
}

/* 
	PROFILE
---------------------------------------------------- */
.storyProfArea{
	margin-bottom: 80px;
	padding-block: 10px 48px;
	background-color: var(--clrLGray);
	border-top: 5px solid #000;
}
/* タイトル
============================== */
.storyProfArea .titProf{
	margin-bottom: 12px;
	font-family: var(--fEn);
	font-size: 2.6rem;
	font-weight: 500;
	text-align: center;
}
/* リスト
============================== */
.listStoryProf{
	display: flex;
	gap: 0 30px;
}
.listStoryProf li{
	display: flex;
	align-items: flex-start;
	width: 360px;
	padding: 10px 20px 10px 10px;
	background-color: #fff;
	border: 1px solid #000;
}
/* 略歴 */
.listStoryProf li .detailBox p{
	padding-left: 20px;
	font-weight: 500;
}
.listStoryProf li .detailBox .nameYear{
	padding-block: 12px 2px;
	line-height: 1;
}
.listStoryProf li .detailBox .name{
	padding-right: 10px;
	font-family: var(--fEn);
	font-size: 1.8rem;
}
.listStoryProf li .detailBox .year{
	font-size: 1.2rem;
	color: #7A6767;
	letter-spacing: 0.05em;
}
.listStoryProf li .detailBox .job{
	font-size: 1.4rem;
}
.listStoryProf li .detailBox .txt{
	padding-top: 10px;
	margin-top: 7px;
	font-size: 1.2rem;
	font-weight: 400;
	text-align: justify;
	letter-spacing: 0.05em;
	line-height: 1.45;
	border-top: 1px solid #000;
}

/* 
	記事
---------------------------------------------------- */
[class*="storyCol"]{
	display: flex;
	align-items: flex-start;
	gap: 0 60px;
	padding-left: 140px;
}
[class*="storyCol"]:not(:last-of-type){
	padding-bottom: 100px;
}
/* 1カラム
============================== */
.storyCol1{
	flex-direction: column;
	gap: 38px 0;
}
/* 見出し / 本文
============================== */
[class*="storyCol"] .txtArea{
	position: relative;
	opacity: 1;
}
[class*="storyCol"] .txtArea::before{
	content: ' ';
	display: block;
	width: 100px;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 21px;
	left: -110px;
	opacity: 0;
}
[class*="storyCol"] .txtArea.jsAnmStart::before{
	animation: anmFadeLeft var(--anmDuration) ease var(--anmDelay) forwards, var(--anmFadeIn);
}
/* 見出し */
:root{
	--mbStoryTit: 20px;
	--lhStoryTit: 1.15;
}
[class*="storyCol"] .tit{
	display: block;
	margin-top: 0;
	margin-bottom: calc((-0.25em * var(--lhStoryTit)) + var(--mbStoryTit));
	font-size: 4.4rem;
	line-height: var(--lhStoryTit);
	transform-origin: top left;
}
[class*="storyCol"] .tit.jsAnmStart{
	animation:
		anmBlur var(--anmDuration) ease var(--anmDelay) forwards,
		anmFadeLeft var(--anmDuration) ease var(--anmDelay) forwards,
		var(--anmFadeIn);
}
@media print, screen and (min-width:813px){
	/* 行数に縦位置応じて下のアキを調整 */
	[class*="storyCol"] .tit.pcLine2{
		margin-bottom: calc((-0.25em * var(--lhStoryTit)) * 2 + var(--mbStoryTit));
	}
	[class*="storyCol"] .tit.pcLine3{
		margin-bottom: calc((-0.25em * var(--lhStoryTit)) * 3 + var(--mbStoryTit));
	}
}
/* 本文 */
[class*="storyCol"] .txt{
	font-size: 1.7rem;
	text-align: justify;
	line-height: 200%;
	letter-spacing: 0.15rem;
}
/* 画像
============================== */
.story01_03 .ph{
	margin-top: 140px;
}

/* 
	メッセージエリア
---------------------------------------------------- */
#storyMessageWrapper{
	display: flex;
	flex-wrap: wrap;
	border: 5px solid #000;
	position: relative;
}
/* タイトル
============================== */
.storyMessageTitJp{
	font-size: 2.8rem;
	position: absolute;
	top: 13px;
	right: 30px;
}
.storyMessageTit{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #000;
	position: relative;
}
.storyMessageTit img{
	position: absolute;
	top: calc(50% - 10px);
	left: 20px;
	translate: 0 -50%;
}
/* 写真
============================== */
.storyMessagePh{
	width: 470px;
	padding: 30px;
}
/* 本文エリア
============================== */
.storyMessageTxtArea{
	width: calc(100% - 470px);
}
.storyMessageTxtBox{
	padding: 30px;
}
.storyMessageTxtBox:not(:last-of-type){
	border-bottom: 1px solid #000;
}
/* --- タイトル --- */
.storyMessageTxtBox .tit{
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 10px;
}
/* --- 本文 --- */
.storyMessageTxtBox .txt{
	text-align: justify;
	font-size: 1.6rem;
}


/* ==========================================================================
	JOHNAN SPIRITS
========================================================================== */
/*
	ページタイトル
---------------------------------------------------- */
/* 背景
============================== */
#spiritsPageTitWrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: 280px;
	margin-bottom: 87px;
	background: url(../images/bg_spirits_page_tit_pc.png) center top / cover no-repeat;
}
/* タイトル
============================== */
#spiritsPageTitWrapper .tit{
	text-align: center;
}
#spiritsPageTitWrapper .tit img{
	width: 762px;
	margin-top: -12px;
	rotate: -5deg;
}
/* キャッチ
============================== */
#spiritsPageTitWrapper .catch{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px 0;
	margin-bottom: -22px;
}
#spiritsPageTitWrapper .catch .grad{
	width: fit-content;
	padding: 3px 8px 8px 5px;
	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: 5rem;
}
/* リード
============================== */
.spiritsPage .cmnLeadTxt{
	width: 570px;
	margin: 0 auto 80px auto;
	font-size: 2rem;
	text-align: justify;
}

/* 
	リスト（共通）
---------------------------------------------------- */
.spiritsList{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 1050px;
	margin: 0 auto;
	border-top: 5px solid var(--clrMRed);
}
.spiritsList .titCategory, .spiritsBox{
	min-height: 285px;
	border-bottom: 1px dashed var(--clrMRed);
	position: relative;
}
.spiritsList:nth-of-type(n+2){
	margin-top: -1px;
}
/* カテゴリタイトル
============================== */
.spiritsList .titCategory{
	display: grid;
	align-content: center;
	padding-left: 35px;
	font-size: 5rem;
	line-height: 100%;
	color: #fff;
	background-color: var(--clrMRed);
}
@media print, screen and (min-width:813px){
	/* 右寄せ */
	.spiritsList:nth-of-type(2n) dt{
		order: 3;
	}
	.spiritsList:nth-of-type(2n) dd:nth-of-type(n+3){
		order: 4;
	}
	.spiritsList:nth-of-type(2n) dd:nth-of-type(1){
		order: 1;
	}
	.spiritsList:nth-of-type(2n) dd:nth-of-type(2){
		order: 2;
	}
}
/* Q */
.spiritsList .titCategory .titQ{
	position: absolute;
	top: -65px;
	left: -45px;
}
/* 数字 */
.spiritsList .titCategory .num{
	display: grid;
	place-content: center;
	width: 50px;
	padding-bottom: 2px;
	aspect-ratio: 1 / 1;
	font-family: var(--fEn);
	font-size: 1.5rem;
	font-weight: 500;
	background-color: var(--clrDRed);
	position: absolute;
	right: 0;
	bottom: 0;
}
/* タイトル テキスト */
.spiritsList .titCategory .tit{
	line-height: 1.05;
}
.spiritsList .titCategory .txt.jsAnm{
	opacity: 0;
}
/* 平体テキスト */
.spiritsList .titCategory .horizTxt{
	line-height: 1.15;
}
/* カコミ_base */
.spiritsList .titCategory [class*="bdBox"]{
	display: inline-block;
	padding: 0 5px 5px 4px;
	margin: 10px 5px -8px 0;
	line-height: 0.75;
	border: 1px solid #fff;
	border-left: 1px solid #fff;
}
/* カコミ_1行目 */
.spiritsList .titCategory .bdBoxFirst{
	margin-top: 0;
}
/* カコミ_最終行 */
.spiritsList .titCategory .bdBoxLast{
	margin-block: -5px 0;
}
/* 各項目
============================== */
/* レイアウト */
.spiritsBox{
	display: grid;
	place-content: center;
}
@media print, screen and (min-width:813px){
	/* 破線 */
	.spiritsBox{
		border-right: 1px dashed var(--clrMRed);
	}
	.spiritsBox.bdRNone{
		border-right: none;
	}
	/* 2列どり */
	.spiritsBox.pcSpan2{
		grid-column: span 2;
	}
}
.spiritsBox .tit{
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 120%;
}
.afterTit {
	padding: 70px 5px;
}
/* 文字サイズ */
.spiritsBox .fsM{
	font-size: 3.6rem;
}
.spiritsBox .fsL{
	font-size: 6.4rem;
	line-height: 105%;
}

/* モーダル
============================== */
.spiritsModalInBox {
	text-align: justify;
}
/* モーダル内 デザイン　*/
.spiritsModalInBox .tit {
	margin-bottom: 15px;
}




/*
	Q1
---------------------------------------------------- */
/* 切り抜き写真
============================== */
.spiritsList [class*="itemPh"]::after{
	content: ' ';
	display: block;
	position: absolute;
	z-index: 1;
}
.spiritsList .jsAnm{
	opacity: 1;
}
.spiritsList [class*="itemPh"].jsAnm::after{
	opacity: 0;
}
.spiritsList [class*="itemPh"].jsAnm.jsAnmStart::after{
	animation: anmFadeUp var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
.spiritsList .itemPh01::after{
	width: 82px;
	height: 219px;
	background: url(../images/ph_spirits01.png) left top / contain no-repeat;
	bottom: -85px;
	right: 10px;
}
.spiritsList .itemPh02::after{
	width: 89px;
	height: 219px;
	background: url(../images/ph_spirits02.png) left top / contain no-repeat;
	top: -130px;
	right: -15px;
}
.spiritsList .itemPh03::after{
	width: 92px;
	height: 232px;
	background: url(../images/ph_spirits03.png) left top / contain no-repeat;
	bottom: -45px;
	right: -30px;
}



/* ==========================================================================
	若手職員座談会
========================================================================== */
.crossTalkPage .ctsArea {
	position: relative;
}
.crossTalkPage .ctsArea::before {

	position: absolute;
	content: "";
	top: 0;
	left: 50%;
	width: 100vw;
	min-width: 100%;
	height: calc(100% + 100px);
	background-color: var(--clrLGray);
	transform: translateX(-50%);
	z-index: -1;
}

/*
	タイトル
---------------------------------------------------- */
.crossTalkTitBox {
	position: relative;
	margin-bottom: 20px;
}
.crossTalkTitBox .subTit {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
}
.crossTalkTitBox .tit {
	display: block;
	padding-top: 10px;
	margin: 0 auto;
}

/*
	youtube
---------------------------------------------------- */
.crossTalkMoveBox {
	display: flex;
	justify-content: center;
	gap: 60px;
}

/* 画像内ボタン
============================== */
.crossTalkMoveBox .youtubeImg {
	position: relative;
	display: block;
}
.crossTalkMoveBox .youtubeImg::before,
.crossTalkMoveBox .youtubeImg::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.crossTalkMoveBox .youtubeImg::before {
	width: 80px;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}
.crossTalkMoveBox .youtubeImg::after {
	width: 20px;
	height: 16px;
	background: url(../images/ico_crosstalk_youtube.svg) no-repeat center center / cover;
}

/* 画像下ボタン
============================== */
/* テキスト */
.crossTalkMoveBox li {
	transition: var(--comTransition);
}
.crossTalkMoveBox li:hover {
	opacity: .7;
	transition: var(--comTransition);
}
.crossTalkMoveBox .txt {
	font-size: 1.2rem;
}
.crossTalkMoveBox .crossTalksubTxt {
	font-size: 3.6rem;
	margin-top: -7px;
}
/* ボタン */
.crossTalkMoveBox .baseBtnLine {
	justify-content: flex-start;
	padding: 17px 20px 20px;
	border: 0px;
	color: #000;
	background-color: #fff;
	font-weight: 500;
}



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

	/* ==========================================================================
		JOHNAN STORY
	========================================================================== */
	/* 
		KV・キャッチ
	---------------------------------------------------- */
	/* KV
	============================== */
	.storyKvArea .kv{
		width: calc(100% - 20px);
		min-height: 335px;
		aspect-ratio: 74 / 67;
	}
	.storyKvArea .kv::before{
		background-image: url(../images/bg_story01_page_tit_sp.png);
	}
	.storyKvArea .horizTxt{
		font-size: 2.4rem;
		padding: 7px 8px 11px 5px;
		rotate: -5deg;
		top: -10px;
		left: 10px;
	}
	/* キャッチ
	============================== */
	.storyKvCatchArea{
		flex-direction: column;
		gap: 13px 0;
		padding-block: 20px 25px;
	}
	/* キャッチ */
	.storyKvCatchBox .catch{
		gap: 5px 0;
		margin-top: -15px;
	}
	.storyKvCatchBox .catch .grad {
		padding: 3px 5px 8px 4px;
		font-size: 3.2rem;
		letter-spacing: -0.05em;
		background-position: bottom -140px left -420px;
		background-size: 1150px auto;
	}
	/* ショルダー */
	.storyKvCatchBox .shoulder{
		font-size: 1.6rem;
	}
	/* リード */
	.storyKvCatchArea .cmnLeadTxt{
		padding-top: 0;
	}

	/* 
		PROFILE
	---------------------------------------------------- */
	.storyProfArea{
		margin-bottom: 40px;
		padding-block: 7px 40px;
	}
	/* タイトル
	============================== */
	.storyProfArea .titProf{
		margin-bottom: 10px;
		font-size: 2.6rem;
	}
	/* リスト
	============================== */
	.listStoryProf{
		flex-direction: column;
		gap: 10px 0;
	}
	.listStoryProf li{
		width: 100%;
		padding: 10px 15px 10px 10px;
	}
	/* 略歴 */
	.listStoryProf li .ph{
		width: 100px;
	}
	.listStoryProf li .detailBox p{
		padding-left: 15px;
	}
	.listStoryProf li .detailBox .nameYear{
		padding-block: 10px 4px;
	}
	.listStoryProf li .detailBox .name{
		padding-right: 8px;
	}
	.listStoryProf li .detailBox .job{
		font-size: 1.3rem;
	}

	/* 
		記事
	---------------------------------------------------- */
	[class*="storyCol"]{
		flex-direction: column;
		gap: 20px 0;
		padding-inline: 20px;
	}
	[class*="storyCol"]:not(:last-of-type){
		padding-bottom: 40px;
	}
	/* 1カラム
	============================== */
	.storyCol1{
		gap: 20px 0;
	}
	/* 見出し / 本文
	============================== */
	[class*="storyCol"] .txtArea::before{
		width: 35px;
		top: 14px;
		left: -20px;
	}
	/* 見出し */
	:root{
		--mbStoryTit: 10px;
	}
	[class*="storyCol"] .tit{
		padding-left: 20px;
		font-size: 2.8rem;
	}
	/* 行数に縦位置応じて下のアキを調整 */
	[class*="storyCol"] .tit.spLine2{
		margin-bottom: calc((-0.25em * var(--lhStoryTit)) * 2 + var(--mbStoryTit));
	}
	[class*="storyCol"] .tit.spLine3{
		margin-bottom: calc((-0.25em * var(--lhStoryTit)) * 3 + var(--mbStoryTit));
	}
	/* 本文 */
	[class*="storyCol"] .txt{
		font-size: 1.5rem;
		line-height: 170%;
		letter-spacing: 0.1rem;
	}
	/* 画像
	============================== */
	.story01_03 .ph{
		margin-top: 0;
	}

	/* 
		メッセージエリア
	---------------------------------------------------- */
	#storyMessageWrapper{
		flex-direction: column;
	}
	/* タイトル
	============================== */
	.storyMessageTitJp{
		font-size: 2rem;
		top: 13px;
		right: 15px;
	}
	.storyMessageTit{
		height: 40px;
	}
	.storyMessageTit img{
		width: 130px;
		top: calc(50% - 10px);
		left: -10px;
	}
	/* 写真
	============================== */
	.storyMessagePh{
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #000;
		padding: 15px;
	}
	/* 本文エリア
	============================== */
	.storyMessageTxtArea{
		width: 100%;
	}
	.storyMessageTxtBox{
		padding: 20px 15px;
	}
	/* --- タイトル --- */
	.storyMessageTxtBox .tit{
		font-size: 1.6rem;
	}
	/* --- 本文 --- */
	.storyMessageTxtBox .txt{
		font-size: 1.5rem;
	}
	

	
	/* ==========================================================================
		JOHNAN SPIRITS
	========================================================================== */
	/* 
		ページタイトル
	---------------------------------------------------- */
	/* 背景
	============================== */
	#spiritsPageTitWrapper{
		min-height: 160px;
		margin-bottom: 40px;
		background-image: url(../images/bg_spirits_page_tit_sp.png);
	}
	/* タイトル
	============================== */
	#spiritsPageTitWrapper .tit img{
		width: 300px;
		margin-top: -12px;
		rotate: -5deg;
	}
	/* キャッチ
	============================== */
	#spiritsPageTitWrapper .catch{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px 0;
		margin-bottom: -22px;
	}
	#spiritsPageTitWrapper .catch .grad{
		background-position: bottom -140px left -420px;
        background-size: 1150px auto;
		font-size: 3.2rem;
		padding: 3px 8px 8px 5px;
	}
	/* リード
	============================== */
	.spiritsPage .cmnLeadTxt{
		width: 100%;
		font-size: 1.5rem;
		margin-bottom: 40px;
	}

	/* 
		grid（共通）
	---------------------------------------------------- */
	.spiritsList{
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
	}
	.spiritsList .titCategory, .spiritsBox{
		min-height: 160px;
	}
	/* カテゴリタイトル
	============================== */
	.spiritsList .titCategory{
		padding: 25px 5px 30px 15px;
		font-size: 2.4rem;
	}
	/* 右寄せ */
	.spiritsList:nth-of-type(2n) dt{
		order: 2;
	}
	.spiritsList:nth-of-type(2n) dd:nth-of-type(n+2){
		order: 3;
	}
	.spiritsList:nth-of-type(2n) dd:nth-of-type(1){
		order: 1;
	}
	/* Q */
	.spiritsList .titCategory .titQ{
		width: 40px;
		position: absolute;
		top: -30px;
		left: -15px;
	}
	/* 数字 */
	.spiritsList .titCategory .num{
		width: 20px;
		padding-bottom: 2px;
		font-size: 1.2rem;
	}
	/* カコミ_base */
	.spiritsList .titCategory [class*="bdBox"]{
		padding: 0 5px 4px 4px;
		margin: 7px 5px -2px 0;
	}
	/* カコミ_1行目 */
	.spiritsList .titCategory .bdBoxFirst{
		margin-block: 0 -5px;
	}
	/* カコミ_最終行 */
	.spiritsList .titCategory .bdBoxLast{
		margin-block: 5px -5px;
	}
	/* 各項目
	============================== */
	/* レイアウト */
	/* 破線 */
	.spiritsBox:not(:nth-child(2n)){
		border-right: 1px dashed var(--clrMRed);
	}
	/* 2列どり */
	.spiritsBox.spSpan2{
		grid-column: span 2;
		border-right: none;
	}
	.spiritsBox.bdRNone{
		border-right: none;
	}
	/* 文字サイズ */
	.spiritsBox .tit{
		font-size: 1.4rem;
		line-height: 120%;
		letter-spacing: 0.05em;
	}
	.spiritsBox .tit.fsM{
		font-size: 1.8rem;
	}
	.spiritsBox .tit.fsL{
		font-size: 2.8rem;
		line-height: 105%;
	}
	/* order
	============================== */
	.titCategory{
		order: 1;
	}
	/* お客様第一主義 */
	.spiritsBox:nth-of-type(1){
		order: 2;
	}
	/* 堅実経営 */
	.spiritsBox:nth-of-type(3){
		order: 3;
		border-right: 1px dashed var(--clrMRed);
	}
	/* 東京・神奈川での地盤の強さ */
	.spiritsBox:nth-of-type(2){
		order: 4;
	}
	/* 顔の見える関係づくり */
	.spiritsBox:nth-of-type(4){
		order: 5;
	}
	/* 若手こそ挑戦を */
	.spiritsBox:nth-of-type(5){
		order: 6;
	}
	/* チームで協働する */
	.spiritsBox:nth-of-type(7){
		order: 7;
	}
	/* お客様本位 */
	.spiritsBox:nth-of-type(6){
		order: 8;
	}
	/* 人間味 */
	.spiritsBox:nth-of-type(8){
		order: 9;
		border-right: none;
	}
	/* お客様のためになることを */
	.spiritsBox:nth-of-type(9){
		order: 10;
		border-right: 1px dashed var(--clrMRed);
	}
	/* なんでも相談役 */
	.spiritsBox:nth-of-type(10){
		order: 11;
	}
	/* 信用金庫の先駆け的存在 */
	.spiritsBox:nth-of-type(11){
		order: 12;
	}
	/* 相手の立場で考える */
	.spiritsBox:nth-of-type(12){
		order: 13;
		border-right: 1px dashed var(--clrMRed);
	}
	/* 距離が近い */
	.spiritsBox:nth-of-type(13){
		order: 14;
	}
	/* 圧倒的なスピード感 */
	.spiritsBox:nth-of-type(14){
		order: 15;
	}
	/* 地域密着 */
	.spiritsBox:nth-of-type(15){
		order: 16;
	}

	/* モーダル
	============================== */
	/* モーダル内 デザイン　*/
	.spiritsModalInBox .tit {
		margin-bottom: 10px;
	}
	.afterTit {
		padding: 30px 5px;
	}



	/*
		Q1
	---------------------------------------------------- */
	/* 切り抜き写真
	============================== */
	.spiritsList .itemPh01::after{
		width: 49px;
		height: 113px;
		bottom: -30px;
		right: 10px;
	}
.spiritsList .itemPh02::after{
		width: 37px;
		height: 102px;
		top: -30px;
		right: 10px;
	}
	.spiritsList .itemPh03::after{
		width: 39px;
		height: 107px;
		top: auto;
		bottom: calc(-200% - 30px);
		right: calc(200% - 50px);
	}
	



/* ==========================================================================
		若手職員座談会
	========================================================================== */
	.crossTalkPage .ctsArea {
		position: relative;
	}
	.crossTalkPage .ctsArea::before {

		position: absolute;
		content: "";
		top: 0;
		left: 50%;
		width: 100vw;
		min-width: 100%;
		height: calc(100% + 100px);
		background-color: var(--clrLGray);
		transform: translateX(-50%);
		z-index: -1;
	}

	/*
		タイトル
	---------------------------------------------------- */
	.crossTalkTitBox {
		position: relative;
		margin-bottom: 20px;
	}
	.crossTalkTitBox .subTit {
		width: 120px;
		top: -5px;
	}
	.crossTalkTitBox .tit {
		padding-top: 7px;
	}

	/*
		youtube
	---------------------------------------------------- */
	.crossTalkMoveBox {
		flex-direction: column;
		gap: 20px;
	}

	/* 画像内ボタン
	============================== */
	.crossTalkMoveBox .youtubeImg::before {
		width: 50px;
		height: 50px;
	}
	.crossTalkMoveBox .youtubeImg::after {
		width: 14px;
		height: 11px;
		background: url(../images/ico_crosstalk_youtube.svg) no-repeat center center / cover;
	}

	/* 画像下ボタン
	============================== */
	/* テキスト */
	.crossTalkMoveBox .crossTalksubTxt {
		font-size: 2.6rem;
		margin-top: -3px;
	}
	/* ボタン */
	.crossTalkMoveBox .baseBtnLine {
		padding: 10px 15px 15px;
	}
}