@charset "UTF-8";
/* CSS Document */
#wrapper.topPage{
	overflow: hidden;
}

/*
	共通
-----------------------------------------------------------------------------------------------*/
.titTopCmnArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 20px;
	position: relative;
	z-index: 2;
}

/* タイトル
============================== */
.titTopCmnArea .tit{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: flex-start;
}
.titTopCmnArea .tit .speech{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 35px;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--colorPrimary);
	background-color: #fff;
	border-radius: 5px;
	position: relative;
}
.titTopCmnArea .tit .speech::after{
	content: "";
	width: 25px;
	height: 7px;
	background: url("../images/item_speechBtm.svg") no-repeat center center / cover;
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
}
.titTopCmnArea .tit .en{
	font-family: var(--ffEn);
	font-size: 10.0rem;
	font-weight: 900;
	line-height: 1.0;
}

/* リード文
============================== */
.titTopCmnArea .lead{
	font-size: 2.5rem;
}

/* テキスト
============================== */
.titTopCmnArea .txtArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 10px;
	margin-left: 30px;
}
.titTopCmnArea .txtArea .midashi{
	font-size: 2.0rem;
	font-weight: 600;
}
.titTopCmnArea .txtArea .txt{
	line-height: 2.0;
}

/* ボタン
============================== */
.btnArrow,
a.btnArrow{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 85px;
	height: 35px;
	background-color: var(--colorPrimary);
	border-radius: 17.5px;
	position: relative;
	transition: background-color 0.3s;
}
.btnArrow::after,
a.btnArrow::after{
	content: "";
	display: block;
	width: 12px;
	aspect-ratio: 1/1;
	background: url("../images/ico_arrow_wh.svg") no-repeat center center / 100%;
}
@media (any-hover: hover){
	.btnArrow:hover,
	a.btnArrow:hover{
		background-color: #000;
	}
}


/*
	KV
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	height: 880px;
	background: url("../images/bg_top_kv_pc.png") no-repeat center bottom / cover;
	position: relative;
	z-index: 1;
}
.kvInner{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	width: var(--widthBase);
	height: 100%;
	margin-inline: auto;
	padding: 100px 30px 0;
	position: relative;
}

/* タイトル
============================== */
.titKv{
	width: 100%;
	max-width: 700px;
}

/* メインイラスト
============================== */
.imgKv{
	margin-top: -12px;
	z-index: 2;
}

/* 丸イラスト
============================== */
[class^="itemKv"]{
	border-radius: 50%;
	position: absolute;
	overflow: hidden;
}
.itemKv01{
	top: 220px;
	left: 140px;
}
.itemKv02{
	top: 450px;
	left: 30px;
	z-index: 1;
}
.itemKv03{
	left: 130px;
	bottom: 120px;
}
.itemKv04{
	top: 230px;
	right: 210px;
	z-index: 1;
}
.itemKv05{
	top: 330px;
	right: 70px;
}
.itemKv06{
	right: 170px;
	bottom: 120px;
}


/*
	リード文
-----------------------------------------------------------------------------------------------*/
#leadWrapper{
	margin-bottom: 100px;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
#leadWrapper::before,
#leadWrapper::after{
	content: "";
	width: 100%;
	height: 5px;
	background: var(--gdRainbow);
	position: absolute;
	left: 0;
}
#leadWrapper::before{
	top: 0;
}
#leadWrapper::after{
	bottom: 0;
	transform: scaleX(-1);
}
#leadWrapper .ctsArea{
	padding-block: 80px;
	position: relative;
}

/* テキスト
============================== */
#leadWrapper .txt{
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 2.5;
	text-align: center;
}
#leadWrapper .txt .em{
	font-size: 2.0rem;
	font-weight: 800;
	color: var(--colorPrimary);
}

/* イラスト
============================== */
.itemLead{
	position: absolute;
	right: 50px;
	bottom: -50px;
	z-index: 1;
}


/*
	社長メッセージ
-----------------------------------------------------------------------------------------------*/
#messageWrapper{
	margin-bottom: 150px;
	position: relative;
}
.messageArea{
	display: inline-flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

/* タイトル
============================== */
#messageWrapper .titTopCmnArea .tit .en{
	color: var(--colorPoint01);
}

/* 画像
============================== */
.messageArea .img{
	margin-left: -20px;
	position: relative;
	z-index: 1;
}

/* item
============================== */
#messageWrapper [class^="imgItem"]{
	position: absolute;
}
#messageWrapper .imgItem01{
	top: -570px;
	left: -250px;
	z-index: 0;
}
#messageWrapper .imgItem02{
	top: -450px;
	right: -280px;
	z-index: -1;
}

/* クリック範囲
============================== */
a.messageBtnArea .btnArrow{
	transition: background-color 0.3s;
}
@media (any-hover: hover){
	a.messageBtnArea:hover .btnArrow{
		background-color: #000;
	}
}

/*
	事業紹介
-----------------------------------------------------------------------------------------------*/
#businessWrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	margin-bottom: 300px;
	position: relative;
}
.businessArea{
	display: flex;
	flex-wrap: wrap;
	margin-right: 100px;
	position: relative;
	z-index: 1;
}

/* タイトル
============================== */
#businessWrapper .titTopCmnArea .tit .en{
	color: var(--colorPoint02);
}

/* ボタン
============================== */
#businessWrapper .btnArrow{
	margin-left: 30px;
}

/* 画像
============================== */
.businessArea .img{
	margin: -45px 0 0 -60px;
	position: relative;
	z-index: 1;
}
.businessArea [class^="imgSub"]{
	border-radius: 30px;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.businessArea .imgSub01{
	left: -15px;
	bottom: -200px;
}
.businessArea .imgSub02{
	right: -160px;
	bottom: -130px;
}

/* item
============================== */
#businessWrapper .imgItem{
	position: absolute;
	top: -60px;
	left: 230px;
}

/* クリック範囲
============================== */
a.businessBtnArea .btnArrow{
	transition: background-color 0.3s;
}
@media (any-hover: hover){
	a.businessBtnArea:hover .btnArrow{
		background-color: #000;
	}
}


/*
	社員を知る
-----------------------------------------------------------------------------------------------*/
#peopleWrapper{
	margin-bottom: 150px;
	position: relative;
}
.peopleArea{
	padding-top: 30px;
	position: relative;
	z-index: 1;
}

/* タイトル
============================== */
#peopleWrapper .titTopCmnArea{
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
}
#peopleWrapper .titTopCmnArea .tit .en{
	color: var(--colorPoint01)
}

/* テキスト
============================== */
#peopleWrapper .titTopCmnArea .txtArea{
	margin-left: 0;
	margin-bottom: 15px;
}

/* ボタン
============================== */
#peopleWrapper .btnArrow{
	width: 50px;
	height: 25px;
	border-radius: 12.5px;
}
#peopleWrapper .btnArrow::after{
	width: 9px;
}
@media (any-hover: hover){
	#peopleWrapper .btnArrow:hover{
		background-color: var(--colorPrimary);
	}
	.listPeople a:hover .btnArrow{
		background-color: #000;
	}
}

/* リスト
============================== */
.listPeople{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 30px;
	width: 840px;
	margin: 30px auto 0;
	position: relative;
	z-index: 1;
}
.listPeople > li{
	width: 260px;
	background-color: #fff;
	border-radius: 20px;
	overflow: hidden;
}
.listPeople > li a{
	display: block;
}
/* 写真エリア */
.listPeople .imgArea{
	position: relative;
}
/* tag */
.listPeople [class^="tag"]{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 22px;
	font-size: 1.2rem;
	color: #fff;
	line-height: 1.0;
	border-radius: 4px;
	position: absolute;
	top: 15px;
	left: 15px;
}
.listPeople .tag01{
	background-color: var(--colorCategory01);
}
.listPeople .tag02{
	background-color: var(--colorCategory02);
}
/* comment */
.listPeople [class^="comment"]{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 15px;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.5s;
}
.listPeople .comment01{
	background-color: rgba(0,174,209,0.8);
}
.listPeople .comment02{
	background-color: rgba(28,207,164,0.8);
}
.listPeople [class^="comment"]::before,
.listPeople [class^="comment"]::after{
	content: "";
	width: 20px;
	height: 16px;
	background: url("../images/ico_ doubleQuotes_wh.svg") no-repeat center center / 100%;
	position: absolute;
}
.listPeople [class^="comment"]::before{
	top: 80px;
	left: 15px;
}
.listPeople [class^="comment"]::after{
	right: 15px;
	bottom: 80px;
	transform: rotate(-180deg);
}
@media (any-hover: hover){
	.listPeople a:hover [class^="comment"]{
		opacity: 1.0;
	}
}
/* テキストエリア */
.listPeople .txtArea{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
}
.listPeople .txt{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
/* 名前 */
.listPeople .txt .name{
	font-family: var(--ffEn);
	font-size: 2.0rem;
	font-weight: 700;
}
/* 入社年 */
.listPeople .txt .year{
	font-size: 1.2rem;
	color: var(--colorPoint03);
}

/* item
============================== */
#peopleWrapper .imgItem{
	position: absolute;
	top: -15px;
	left: 120px;
}


/*
	職種紹介
-----------------------------------------------------------------------------------------------*/
#jobWrapper{
	display: flex;
	/* justify-content: center; */
	margin-bottom: 150px;
	position: relative;
}
#jobWrapper .jobArea{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 50px;
	position: relative;
	z-index: 1;
}

/* タイトル
============================== */
#jobWrapper .titTopCmnArea .tit .en{
	color: #fff
}

/* ボタン
============================== */
#jobWrapper .btnArrow{
	margin-left: 30px;
}

/* テキスト
============================== */
#jobWrapper .titTopCmnArea .txtArea{
	color: #fff;
}

/* リスト
============================== */
.listJob{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.listJob > li{
	width: 260px;
	background-color: #fff;
	border-radius: 20px;
}
.listJob > li a{
	display: block;
}
/* 画像 */
.listJob [class^="img"]{
	background: url("../images/bg_top_job01_pc.png") no-repeat top center / cover;
	border-radius: 20px 20px 0 0;
}
.listJob .img02{
	background: url("../images/bg_top_job02_pc.png") no-repeat top center / cover;
}
.listJob [class^="img"] img{
	margin-top: -20px;
}
/* テキストエリア */
.listJob .txtArea{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
}
/* ボタン */
.listJob .btnArrow{
	width: 50px;
	height: 25px;
	border-radius: 12.5px;
}
.listJob .btnArrow::after{
	width: 9px;
}
@media (any-hover: hover){
	.listJob .btnArrow:hover{
		background-color: var(--colorPrimary);
	}
	.listJob a:hover .btnArrow{
		background-color: #000;
	}
}

/* item
============================== */
#jobWrapper [class^="imgItem"]{
	position: absolute;
}
#jobWrapper .imgItem01{
	top: -210px;
	left: -230px;
	z-index: 0;
}
#jobWrapper .imgItem02{
	top: -110px;
	right: -210px;
	z-index: -1;
}

/* クリック範囲
============================== */
a.jobBtnArea .btnArrow{
	transition: background-color 0.3s;
}
@media (any-hover: hover){
	a.jobBtnArea:hover .btnArrow{
		background-color: #000;
	}
}

/*
	若手社員クロストーク
-----------------------------------------------------------------------------------------------*/
#crosstalkWrapper{
	margin-bottom: 300px;
	position: relative;
}
.crosstalkArea{
	margin-left: 220px;
	position: relative;
	z-index: 1;
}

/* タイトル
============================== */
#crosstalkWrapper .titTopCmnArea .tit .en{
	color: var(--colorPoint02);
}
#crosstalkWrapper .titTopCmnArea .tit .speech{
	width: 160px;
}

/* ボタン
============================== */
#crosstalkWrapper .btnArrow{
	margin-left: 30px;
}

/* 画像
============================== */
.crosstalkArea .img{
	position: absolute;
	top: 140px;
	right: -60px;
}
.crosstalkArea .imgSub{
	border-radius: 30px;
	overflow: hidden;
	position: absolute;
	top: 350px;
	left: -100px;
}

/* item
============================== */
#crosstalkWrapper [class^="imgItem"]{
	position: absolute;
}
#crosstalkWrapper .imgItem01{
	top: -170px;
	left: -330px;
	z-index: -1;
}
#crosstalkWrapper .imgItem02{
	top: -80px;
	right: -280px;
	z-index: 0;
}

/* クリック範囲
============================== */
a.crosstalkBtnArea .btnArrow{
	transition: background-color 0.3s;
}
@media (any-hover: hover){
	a.crosstalkBtnArea:hover .btnArrow{
		background-color: #000;
	}
}


/*
	ループエリア
-----------------------------------------------------------------------------------------------*/
.loopWrapper{
	width: 100%;
	padding-block: 50px 150px;
	position: relative;
	overflow: hidden;
}
.loopArea{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	width: max-content;
	animation: loop 40s linear infinite;
}
@keyframes loop {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* テキスト
============================== */
.loopItemTxt{
	flex-shrink: 0;
	white-space: nowrap;
	font-family: var(--ffEn);
	font-size: 10.0rem;
	font-weight: 800;
	line-height: 1.0;
}
.loopItemTxt:nth-last-of-type(3n+1){
	color: var(--colorCategory01);
}
.loopItemTxt:nth-last-of-type(3n+2){
	color: var(--colorCategory02);
}
.loopItemTxt:nth-last-of-type(3n){
	color: var(--colorPoint02);
}

/* 画像
============================== */
.loopItemImg{
	flex-shrink: 0;
	display: block;
	border-radius: 10px;
}


/*
	支店だより
-----------------------------------------------------------------------------------------------*/
#branchesWrapper{
	background: url("../images/bg_dots.svg") var(--colorSub02) repeat center center / 9px;
	position: relative;
}
#branchesWrapper::before,
#branchesWrapper::after{
	content: "";
	width: 100%;
	height: 15px;
	background: url("../images/bg_top_branches_wave.svg") repeat-x top center / 120px auto;
	position: absolute;
	left: 0;
}
#branchesWrapper::before{
	top: -1px;
}
#branchesWrapper::after{
	bottom: -1px;
	transform: rotate(-180deg);
}
.branchesArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#branchesWrapper .titTopCmnArea{
	align-items: center;
}

/* タイトル
============================== */
#branchesWrapper .titTopCmnArea .tit{
	align-items: center;
	font-size: 4.0rem;
	font-weight: 700;
	letter-spacing: 0.2rem;
	color: var(--colorPrimary);
}
#branchesWrapper .titTopCmnArea .tit::before{
	content: "";
	width: 45px;
	height: 31.5px;
	background: url("../images/ico_branches.svg") no-repeat center center / cover;
}

/* テキスト
============================== */
#branchesWrapper .txtArea{
	margin-left: 0;
}

/* 画像
============================== */
[class^="listBranchesImg"]{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 30px;
	margin-block: -30px;
	position: relative;
	z-index: 1;
}
[class^="listBranchesImg"] > li{
	width: 350px;
	border-radius: 30px;
	overflow: hidden;
}
.listBranchesImg01{
	margin-left: -60px;
}
.listBranchesImg02{
	margin-right: -60px;
}

/* クリック範囲
============================== */
a.branchesBtnArea .btnArrow{
	transition: background-color 0.3s;
}
@media (any-hover: hover){
	a.branchesBtnArea:hover .btnArrow{
		background-color: #000;
	}
}


@media screen and (max-width:812px){
	/*
		共通
	-----------------------------------------------------------------------------------------------*/
	.titTopCmnArea{
		gap: 10px;
	}

	/* タイトル
	============================== */
	.titTopCmnArea .tit{
		gap: 5px;
	}
	.titTopCmnArea .tit .speech{
		width: 100px;
		height: 25px;
		font-size: 1.0rem;
	}
	.titTopCmnArea .tit .en{
		font-size: 5.5rem;
	}

	/* リード文
	============================== */
	.titTopCmnArea .lead{
		font-size: 1.5rem;
	}

	/* テキスト
	============================== */
	.titTopCmnArea .txtArea{
		gap: 10px;
		margin-left: 0;
	}
	.titTopCmnArea .txtArea .midashi{
		font-size: 1.5rem;
	}

	/* ボタン
	============================== */
	/* .btnArrow,
	a.btnArrow{
		width: 50px;
		height: 25px;
		border-radius: 12.5px;
	}
	.btnArrow::after,
	a.btnArrow::after{
		width: 10px;
	} */


	/*
		KV
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper{
		height: 500px;
		background: url("../images/bg_top_kv_sp.png") no-repeat top center / cover;
	}
	.kvInner{
		width: var(--widthBase);
		max-width: 400px;
		height: 100%;
		padding: 90px 25px 0;
	}

	/* タイトル
	============================== */
	.titKv{
		max-width: 400px;
	}

	/* メインイラスト
	============================== */
	.imgKv{
		width: 210px;
		margin-top: -5px;
	}

	/* 丸イラスト
	============================== */
	.itemKv01{
		width: 100px;
		top: 150px;
		left: -10px;
	}
	.itemKv02{
		width: 80px;
		top: 290px;
		left: -5px;
	}
	.itemKv03{
		width: 100px;
		left: 25px;
		bottom: 50px;
	}
	.itemKv04{
		width: 75px;
		top: 160px;
		right: 25px;
	}
	.itemKv05{
		width: 90px;
		top: 220px;
		right: -15px;
	}
	.itemKv06{
		width: 105px;
		right: -15px;
		bottom: 35px;
	}


	/*
		リード文
	-----------------------------------------------------------------------------------------------*/
	#leadWrapper{
		margin-bottom: 60px;
	}
	#leadWrapper .ctsArea{
		padding-block: 40px 70px;
	}

	/* テキスト
	============================== */
	#leadWrapper .txt{
		display: flex;
		flex-direction: column;
		gap: 10px;
		font-size: 1.4rem;
		line-height: 2.2;
		text-align: justify;
	}
	#leadWrapper .txt .em{
		font-size: 1.8rem;
		text-align: center;
	}

	/* イラスト
	============================== */
	.itemLead{
		width: 150px;
		position: absolute;
		right: 25px;
		bottom: -45px;
	}


	/*
		社長メッセージ
	-----------------------------------------------------------------------------------------------*/
	#messageWrapper{
		margin-bottom: 50px;
	}
	.messageArea{
		flex-direction: row;
	}

	/* 画像
	============================== */
	.messageArea .img{
		width: 230px;
		margin: -30px 0 0 auto;
	}

	/* item
	============================== */
	#messageWrapper .imgItem01{
		width: 590px;
		top: -170px;
		left: auto;
		right: 30px;
		z-index: 0;
	}
	#messageWrapper .imgItem02{
		width: 533px;
		top: -110px;
		right: auto;
		left: 20px;
	}


	/*
		事業紹介
	-----------------------------------------------------------------------------------------------*/
	#businessWrapper{
		margin-bottom: 130px;
	}
	.businessArea{
		margin-right: 0;
	}

	/* ボタン
	============================== */
	#businessWrapper .btnArrow{
		margin-left: 0;
	}

	/* 画像
	============================== */
	.businessArea .img{
		width: 180px;
		margin: -40px 30px 0 auto;
	}
	.businessArea [class^="imgSub"]{
		border-radius: 15px;
	}
	.businessArea .imgSub01{
		width: 90px;
		left: 20px;
		bottom: -105px;
	}
	.businessArea .imgSub02{
		width: 150px;
		right: -95px;
		bottom: -80px;
	}

	/* item
	============================== */
	#businessWrapper .imgItem{
		width: 160px;
		top: -40px;
		left: -35px;
	}


	/*
		社員を知る
	-----------------------------------------------------------------------------------------------*/
	#peopleWrapper{
		margin-bottom: 80px;
	}
	.peopleArea{
		padding-top: 0;
	}

	/* タイトル
	============================== */
	#peopleWrapper .titTopCmnArea{
		justify-content: flex-start;
	}

	/* テキスト
	============================== */
	#peopleWrapper .titTopCmnArea .txtArea{
		margin-bottom: 0;
	}

	/* ボタン
	============================== */
	#peopleWrapper .btnArrow{
		width: 20px;
		height: auto;
		aspect-ratio: 1/1;
		border-radius: 50%;
	}
	#peopleWrapper .btnArrow::after{
		width: 8px;
	}

	/* リスト
	============================== */
	.listPeople{
		justify-content: flex-start;
		gap: 15px;
		width: 100%;
		max-width: 350px;
		margin: 20px auto 0;
	}
	.listPeople > li{
		width: calc((100% - 15px)/2);
		/* max-width: 160px; */
		border-radius: 15px;
	}
	/* tag */
	.listPeople [class^="tag"]{
		width: 40px;
		height: 20px;
		font-size: 0.9rem;
		border-radius: 2px;
		top: 10px;
		left: 10px;
	}
	/* comment */
	.listPeople [class^="comment"]{
		display: none;
	}
	/* テキストエリア */
	.listPeople .txtArea{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 10px 12px;
	}
	.listPeople .txt{
		gap: 5px;
	}
	/* 名前 */
	.listPeople .txt .name{
		font-size: 1.5rem;
	}
	/* 入社年 */
	.listPeople .txt .year{
		font-size: 1.0rem;
	}

	/* item
	============================== */
	#peopleWrapper .imgItem{
		width: 163px;
		top: -40px;
		left: -30px;
	}


	/*
		職種紹介
	-----------------------------------------------------------------------------------------------*/
	#jobWrapper{
		margin-bottom: 80px;
	}
	#jobWrapper .jobArea{
		gap: 30px;
	}

	/* ボタン
	============================== */
	#jobWrapper .btnArrow{
		margin-left: 0;
	}

	/* リスト
	============================== */
	.listJob{
		gap: 15px;
		max-width: 350px;
		margin: 0 auto;
	}
	.listJob > li{
		width: calc((100% - 15px)/2);
		border-radius: 15px;
	}
	/* 画像 */
	.listJob [class^="img"]{
		background: url("../images/bg_top_job01_sp.png") no-repeat top center / cover;
		border-radius: 15px 15px 0 0;
	}
	.listJob .img02{
		background: url("../images/bg_top_job02_sp.png") no-repeat top center / cover;
	}
	.listJob [class^="img"] img{
		margin-top: -15px;
	}
	/* テキストエリア */
	.listJob .txtArea{
		padding: 10px 12px;
	}
	/* ボタン */
	.listJob .btnArrow{
		width: 20px;
		height: auto;
		aspect-ratio: 1/1;
		border-radius: 50%;
	}
	.listJob .btnArrow::after{
		width: 8px;
	}

	/* item
	============================== */
	#jobWrapper .imgItem01{
		width: 588px;
		top: -120px;
		left: auto;
		right: 0;
		z-index: 0;
	}
	#jobWrapper .imgItem02{
		width: 533px;
		top: -50px;
		right: auto;
		left: 50px;
	}


	/*
		若手社員クロストーク
	-----------------------------------------------------------------------------------------------*/
	#crosstalkWrapper{
		margin-bottom: 0;
	}
	.crosstalkArea{
		margin-left: 0;
	}

	/* タイトル
	============================== */
	#crosstalkWrapper .titTopCmnArea .tit .speech{
		width: 120px;
	}

	/* ボタン
	============================== */
	#crosstalkWrapper .btnArrow{
		margin-left: 0;
	}

	/* 画像
	============================== */
	.crosstalkArea .img{
		display: block;
		max-width: 350px;
		margin-top: 20px;
		margin-inline: auto -40px;
		position: static;
	}
	.crosstalkArea .imgSub{
		display: block;
		width: 200px;
		margin-top: 15px;
		margin-inline: -40px auto;
		border-radius: 15px;
		position: static;
	}

	/* item
	============================== */
	#crosstalkWrapper .imgItem01{
		width: 575px;
		top: -80px;
		left: auto;
		right: 25px;
	}
	#crosstalkWrapper .imgItem02{
		width: 573px;
		top: -30px;
		right: auto;
		left: 55px;
	}


	/*
		ループエリア
	-----------------------------------------------------------------------------------------------*/
	.loopWrapper{
		padding-block: 50px 70px;
	}
	.loopArea{
		gap: 15px;
	}

	/* テキスト
	============================== */
	.loopItemTxt{
		font-size: 5.0rem;
	}

	/* 画像
	============================== */
	.loopItemImg{
		width: 90px;
		border-radius: 5px;
	}


	/*
		支店だより
	-----------------------------------------------------------------------------------------------*/
	#branchesWrapper::before,
	#branchesWrapper::after{
		background: url("../images/bg_top_branches_wave.svg") repeat-x top center / 60px auto;
	}
	.branchesArea{
		flex-direction: column;
		gap: 20px;
	}

	/* タイトル
	============================== */
	#branchesWrapper .titTopCmnArea .tit{
		font-size: 2.5rem;
	}
	#branchesWrapper .titTopCmnArea .tit::before{
		width: 30px;
		height: 21px;
	}

	/* 画像
	============================== */
	[class^="listBranchesImg"]{
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-between;
		gap: 55px;
		width: calc(100% + 80px);
		margin-block: 0;
		margin-inline: -40px;
	}
	[class^="listBranchesImg"] > li{
		min-width: 150px;
		max-width: 200px;
		border-radius: 15px;
	}
	.listBranchesImg01{
		margin-top: -20px;
	}
	.listBranchesImg02{
		margin-bottom: -20px;
	}
}