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

/*
	共通パーツ
-----------------------------------------------------------------------------------------------*/
.ctsArea{
	padding-top: initial;
	padding-bottom: 180px;
}
.txtBack{
	position: absolute;
	top: -70px;
	left: -30px;
	z-index: 1;
}
.txtBox .txt{
	margin-top: 20px;
}

/* 調整用
============================== */
/* キャッチベース */
#staffsVoiceArea{
	padding-top: 220px;
}
#peopleArea{
	padding-top: 160px;
}
@media print,screen and (min-width:813px){
	.catchBase{
		top: -120px;
	}
}
#teamArea .catchBase,
#messageArea .catchBase,
#workStyleArea .catchBase{
	top: -90px;
}
/* コンテンツエリア_bottom */
#teamArea .ctsArea,
#messageArea .ctsArea,
#workStyleArea .ctsArea{
	padding-bottom: 220px;
}

/*
	topKvArea
-----------------------------------------------------------------------------------------------*/
#topKvArea{
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 800px;
}
#topKvArea .tit{
	position: absolute;
	width: fit-content;
	left: 80px;
	bottom: 120px;
	filter: var(--shadow);
	opacity: 0.95;
	z-index: 50;
}

/* スワイパー
============================== */
.kvSwiper{
	width: 100%;
	height: 100%;
}
.kvSwiper .swiper-slide .swiper-img{
	width: 100%;
	height: 100%;
}
.kvSwiper .swiper-slide img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
/* スワイパー上書き */
.swiper-pagination-horizontal.swiper-pagination-bullets 
.swiper-pagination-bullet {
	width: 40px;
	border-radius: initial;
	height: 4px;
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap,2px);
}
.swiper-pagination-bullet{
	background-color: var(--clrWhite70);
}
/* スワイパーのアニメーション */
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
animation: zoomUp 7s linear 0s normal both;
}
@keyframes zoomUp {
	0% {
		transform: scale(1.15);
	}
	100% {
		transform: scale(1);
	}
}
/* アニメーション */
#topKvArea .tit{
	opacity: 0;
	animation: anmFadeIn 1.5s ease 1.8s forwards;
}
#topKvArea #fixBtnWrapper{
	opacity: 0;
	animation: anmFadeUp 1.5s ease 2.2s forwards;
}

/* 1分でわかる＿追従ボタン
============================== */
#fixBtnWrapper{
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--clrBase);
	width: 160px;
	aspect-ratio: 1 / 1;
	text-align: center;
	color: var(--clrWhite);
	bottom: 80px;
	right: 30px;
	border-radius: 50%;
	gap: 10px;
	padding-top: 20px;
	filter: var(--shadow);
	z-index: 500;
	transition: all 0.3s;
}

/* タイトル */
#fixBtnWrapper .one{
	width: 80%;
	font-size: 2.5rem;
	letter-spacing: 0.3rem;
	line-height: 125%;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--clrWhite30);
}
#fixBtnWrapper .one span{
	font-size: 110%;
	vertical-align: -0.2rem;
}
/* 社名 */
#fixBtnWrapper .fixBtnTit{
	font-size: 1.5rem;
}
/* 矢印 */
#fixBtnWrapper .fixBtnTit::before,
#fixBtnWrapper .fixBtnTit::after{
	position: absolute;
	content: "";
	display: block;
	background-color: var(--clrWhite);
	height: 1px;
	transition: all 0.3s;
}
#fixBtnWrapper .fixBtnTit::before{
	width: 27px;
	bottom: 21px;
	right: 50%;
	transform: translateX(50%);
}
#fixBtnWrapper .fixBtnTit::after{
	width: 7px;
	bottom: 23px;
	right: calc(50% - 15px);
	transform: rotate(45deg);
}
@media screen and (min-width:813px){
	/* ホバー時 */
	#fixBtnWrapper:hover{
		background-color: var(--clrBaseh);
		filter: initial;
	}
	/* ホバー時矢印 */
	#fixBtnWrapper:hover .fixBtnTit::before{
		right: calc(50% - 7px);
	}
	#fixBtnWrapper:hover .fixBtnTit::after{
		right: calc(50% - 22px);
	}
}

/*
	スタッフボイス   staffsVoiceArea
-----------------------------------------------------------------------------------------------*/
#staffsVoiceArea .list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 60px 100px;
}
@media print,screen and (min-width:813px){
	#staffsVoiceArea .list li:nth-of-type(2),
	#staffsVoiceArea .list li:nth-of-type(5){
		margin-top: 60px;
	}
	#staffsVoiceArea .list li:nth-of-type(3){
		margin-top: 120px;
	}
	/* アニメーション_少しずらす */
	#staffsVoiceArea .list li.anmFadeUp.jsAnmStart:nth-of-type(2),
	#staffsVoiceArea .list li.anmFadeUp.jsAnmStart:nth-of-type(5){
		animation: anmFadeUp 1s ease 0.7s forwards;
	}
	#staffsVoiceArea .list li.anmFadeUp.jsAnmStart:nth-of-type(3){
		animation: anmFadeUp 1s ease 0.9s forwards;
	}
}
#staffsVoiceArea .messageMovieBox .txtBack{
	top: initial;
	bottom: -29px;
	left: -20px;
	pointer-events: none;
}
#staffsVoiceArea .messageMovieBox .txtBack .job{
	font-size: 1.5rem;
	line-height: 150%;
}

/*
	事業紹介   businessArea
-----------------------------------------------------------------------------------------------*/
#businessArea{
	background: url(../images/ph_top_business_pc.jpg) no-repeat center center / cover;
	height: 27.15vw;
	min-height: 380px;
}
#businessArea .bgCath.phCenter .txtBox{
	color: var(--clrWhite);
}
/* 英文字とコピー反転 */
#businessArea .bgCath.phCenter .catchBase{
	left: 0;
	right: initial;
}
#businessArea .bgCath.phCenter .txtBack{
	right: 0;
	left: initial;
}

/*
	だから、短資はオモシロい！？   interestingArea
-----------------------------------------------------------------------------------------------*/
#interestingArea{
	background: url(../images/ph_top_interesting_pc.png) no-repeat center center / cover;
	width: 100%;
	height: 50vw;
	min-height: 1000px;
}
#interestingArea .ctsArea{
	position: relative;
	height: 100%;
	padding: 100px 30px;
}
#interestingArea .catchBase{
	top: calc(50% - 60px);
	right: calc(50% - 25px);
	filter: var(--shadow);
	transform: translate(50%, -50%);
}
@media print,screen and (min-width:813px){
	/* アニメーション_少しずらす */
	#interestingArea .list li:nth-of-type(2) .tit.anmDon.jsAnmStart,
	#interestingArea .list li:nth-of-type(4) .tit.anmDon.jsAnmStart,
	#interestingArea .list li:nth-of-type(8) .tit.anmDon.jsAnmStart{
		animation: anmDon 0.6s 1 normal 1.0s ease-out forwards;
	}
	#interestingArea .list li:nth-of-type(3) .tit.anmDon.jsAnmStart,
	#interestingArea .list li:nth-of-type(7) .tit.anmDon.jsAnmStart{
		animation: anmDon 0.6s 1 normal 1.2s ease-out forwards;
	}
	#interestingArea .list li:nth-of-type(6) .tit.anmDon.jsAnmStart{
		animation: anmDon 0.6s 1 normal 1.4s ease-out forwards;
	}
	#interestingArea .list li:nth-of-type(5) .tit.anmDon.jsAnmStart{
		animation: anmDon 0.6s 1 normal 1.6s ease-out forwards;
	}
}

/* モーダルリスト
============================== */
#interestingArea .list{
	position: relative;
	height: 100%;
}
/* モーダル共通 */
#interestingArea .list li{
	position: absolute;
	filter: var(--shadow);
}
#interestingArea .list li .tit{
	display: block;
	height: 100%;
	transition: all 0.3s;
	cursor: pointer;
}
@media screen and (min-width:813px){
	/* ホバー時 */
	#interestingArea .list li .tit:hover{
		scale: 1.1;
	}
}
/* モーダル01   1回の取引額は、1,000億円単位!? */
#interestingArea .list li:nth-of-type(1){
	top: 10px;
	left: 50px;
}
/* モーダル02   推し活に学べ!?　*/
#interestingArea .list li:nth-of-type(2){
	top: 0;
	left: 550px;
}
/* モーダル03   日本に3社しかない!? */
#interestingArea .list li:nth-of-type(3){
	top: 10px;
	right: 90px;
}
/* モーダル04   金融業界の「仲人」さん */
#interestingArea .list li:nth-of-type(4){
	top: 200px;
	right: 0;
}
/* モーダル05   お金の流れの「うらかた」さん!? */
#interestingArea .list li:nth-of-type(5){
	bottom: 0;
	right: 30px;
}
/* モーダル06   社内チャットは宝箱 */
#interestingArea .list li:nth-of-type(6){
	bottom: 190px;
	right: 330px;
	z-index: 1;
}
/* モーダル07   短資は「アメーバ」? */
#interestingArea .list li:nth-of-type(7){
	bottom: 20px;
	right: 350px;
}
/* モーダル08   「お互いさま」の職場 */
#interestingArea .list li:nth-of-type(8){
	bottom: 0;
	left: 270px;
}
/* モーダル09   午前9時の熱狂 */
#interestingArea .list li:nth-of-type(9){
	bottom: 60px;
	left: 30px;
}
/* モーダル10   300兆円の市場 */
#interestingArea .list li:nth-of-type(10){
	top: 200px;
	left: 0;
}

/* モーダル中身
============================== */
#modalInteresting .modal .inner{
	width: 740px;
	text-align: center;
	top: 50%;
	padding:80px;
	gap: 30px;
	transform: translate(-50%, -50%);
}
/* モーダル内  タイトル帯あり */
#modalInteresting .modal .inner .tit{
	position: relative;
	background-color: var(--clrGrn);
	color: var(--clrWhite);
	padding: 10px 18px;
}
/* モーダル内  帯下三角 */
#modalInteresting .modal .inner .tit::after{
	position: absolute;
	content: " ";
	display: block;
	bottom: -11px;
	right: 50%;
	border-top: 12px solid var(--clrGrn);
	border-left: 0 solid transparent;
	border-right: 10px solid transparent;
}
/* カラー */
#modalInteresting #modal03.modal .inner .tit,
#modalInteresting #modal05.modal .inner .tit,
#modalInteresting #modal08.modal .inner .tit{
	background-color: var(--clrBase);
}
#modalInteresting #modal06.modal .inner .tit,
#modalInteresting #modal09.modal .inner .tit,
#modalInteresting #modal11.modal .inner .tit{
	background-color: var(--clrPnk);
}
#modalInteresting #modal03.modal .inner .tit::after,
#modalInteresting #modal05.modal .inner .tit::after,
#modalInteresting #modal08.modal .inner .tit::after{
	border-top: 12px solid var(--clrBase);
}
#modalInteresting #modal06.modal .inner .tit::after,
#modalInteresting #modal09.modal .inner .tit::after,
#modalInteresting #modal11.modal .inner .tit::after{
	border-top: 12px solid var(--clrPnk);
}
/* モーダル内  テキスト */
#modalInteresting .modal .inner .txt{
	font-size: 1.8rem;
	text-align: justify;
	margin-top: initial;
}

/*
	社員紹介／キャリアステップ   peopleArea
-----------------------------------------------------------------------------------------------*/
#peopleArea .peopleAreaIn{
	background: url(../images/ph_top_people_pc.jpg) no-repeat center center / cover;
	height: 27.15vw;
	min-height: 380px;
	padding: initial;
}
#peopleArea .peopleAreaIn .inBox{
	position: relative;
	width: var(--wBase);
	margin: 0 auto;
	height: 100%;
}
@media print,screen and (min-width:813px){
	#peopleArea .ctsArea{
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-bottom: 220px;
	}
	#peopleArea .ctsArea .btnArea{
		margin-top: initial;
	}
}

/*
	組織紹介   teamArea
-----------------------------------------------------------------------------------------------*/
@media screen and (min-width:813px){
	#teamArea .catchBase {
		right: 120px;
	}
}

/*
	社長あいさつ   messageArea
-----------------------------------------------------------------------------------------------*/
/* 役職と名前が入ったボックス */
#messageArea .detail{
	flex-direction: initial;
	align-items: flex-end;
	width: 100%;
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--clrBlack20);
}

@media screen and (max-width:812px){
	/*
		共通パーツ
	-----------------------------------------------------------------------------------------------*/
	.ctsArea{
		padding-bottom: 120px;
	}
	.txtBack{
		top: -20px;
		left: -20px;
	}
	.txtBox .txt{
		margin-top: 15px;
	}
	
	/* 調整用
	============================== */
	/* キャッチベース */
	#staffsVoiceArea{
		padding-top: 120px;
	}
	#peopleArea{
		padding-top: 120px;
	}
	#teamArea .catchBase,
	#messageArea .catchBase,
	#workStyleArea .catchBase,
	#internshipArea .catchBase{
		top: -60px;
	}
	/* コンテンツエリア_bottom */
	#teamArea .ctsArea,
	#messageArea .ctsArea,
	#workStyleArea .ctsArea{
		padding-bottom: 140px;
	}
	#educationBenefitsArea .ctsArea{
		padding-bottom: 80px;
	}
	#peopleArea .ctsArea{
		display: flex;
		flex-direction: column;
		padding-bottom: 140px;
	}
	#internshipArea .ctsArea{
		padding-bottom: 80px;
	}

	/*
		topKvArea
	-----------------------------------------------------------------------------------------------*/
	#topKvArea{
		min-height: initial;
	}
	#topKvArea .tit{
		width: 84%;
		max-width: 340px;
		bottom: initial;
		top: calc(50% + 60px);
		left: 50%;
		transform: translate(-50%, -50%);
	}
	@media screen and (orientation: landscape) and (max-width: 768px) {
		/* スマホ横向きだけに適用されるCSS */
		#topKvArea .tit{
			width: 280px;
			left: 40px;
			top: initial;
			bottom: 30px;
			transform: initial;
		}
	}

	/* スワイパー
	============================== */
	.kvSwiper{
		min-width: initial;
	}

	/* 1分でわかる＿追従ボタン
	============================== */
	#fixBtnWrapper{
		width: 120px;
		bottom: 40px;
		right: 10px;
	}
	#fixBtnWrapper{
		gap: 6px;
		padding-top: 12px;
	}
	/* タイトル */
	#fixBtnWrapper .one{
		font-size: 1.8rem;
	}
	/* 社名 */
	#fixBtnWrapper .fixBtnTit{
		font-size: 1.2rem;
	}
	/* 矢印 */
	#fixBtnWrapper .fixBtnTit::before{
		bottom: 16px;
	}
	#fixBtnWrapper .fixBtnTit::after{
		bottom: 18px;
	}

	/*
		スタッフボイス   staffsVoiceArea
	-----------------------------------------------------------------------------------------------*/
	#staffsVoiceArea .list{
		gap: 60px 30px;
	}
	#staffsVoiceArea .list li:nth-of-type(2),
	#staffsVoiceArea .list li:nth-of-type(4){
		margin-top: 40px;
	}

	/* メッセージ動画のボタン
	============================== */
	#staffsVoiceArea .messageMovieBox .txtBack{
		bottom: -15px;
		left: -15px;
	}
	#staffsVoiceArea .messageMovieBox .txtBack .job{
		font-size: 1.4rem;
	}

	/*
		事業紹介   businessArea
	-----------------------------------------------------------------------------------------------*/
	#businessArea{
		background: url(../images/ph_top_business_sp.jpg) no-repeat center center / cover;
		height: 123vw;
		min-height: initial;
	}
	@media screen and (orientation: landscape) and (max-width: 768px) {
		/* スマホ横向きだけに適用されるCSS */
		#businessArea{
			height: 80vw;
		}
	}
	/* 英文字とコピー反転 */
	#businessArea .bgCath.phCenter .catchBase{
		left: 10px;
	}

	/*
		だから、短資はオモシロい！？   interestingArea
	-----------------------------------------------------------------------------------------------*/
	#interestingArea{
		background: url(../images/ph_top_interesting_sp.png) no-repeat center center / cover;
		height: 300vw;
		max-height: 1460px;
		min-height: initial;
	}
	@media screen and (orientation: landscape) and (max-width: 768px) {
		/* スマホ横向きだけに適用されるCSS */
		#interestingArea{
			height: 220vw;
		}
	}
	#interestingArea .ctsArea {
		padding: 60px 10px;
	}
	#interestingArea .catchBase{
		height: 44vw;
		top: 52%;
		right: 50%;
		filter: var(--shadow);
		transform: translate(50%, -50%);
	}
	#interestingArea .catchBase img{
		max-width: 440px;
	}
	@media screen and (orientation: landscape) and (max-width: 768px) {
		/* スマホ横向きだけに適用されるCSS */
		#interestingArea .catchBase{
			height: 34vw;
		}
	}

	/* モーダルリスト
	============================== */
		/* モーダル01   1回の取引額は、1,000億円単位!? */
	#interestingArea .list li:nth-of-type(1){
		width: 85%;
		top: 0;
		left: 6%;
	}
	/* モーダル02   推し活に学べ!?　*/
	#interestingArea .list li:nth-of-type(2){
		width: 45%;
		top: 12%;
		left: 13%;
	}
	/* モーダル03   日本に3社しかない!? */
	#interestingArea .list li:nth-of-type(3){
		width: 30%;
		top: 11%;
		right: 5%;
	}
	/* モーダル04   金融業界の「仲人」さん */
	#interestingArea .list li:nth-of-type(4){
		width: 24%;
		top: 25%;
		right: 7%;
	}
	/* モーダル05   お金の流れの「うらかた」さん!? */
	#interestingArea .list li:nth-of-type(5){
		width: 50%;
		bottom: 22%;
		right: 4%;
	}
	/* モーダル06   社内チャットは宝箱 */
	#interestingArea .list li:nth-of-type(6){
		width: 46%;
		bottom: initial;
		right: initial;
		top: 35%;
		left: 15%;
	}
	/* モーダル07   短資は「アメーバ」? */
	#interestingArea .list li:nth-of-type(7){
		width: 54%;
		bottom: 2%;
		right: initial;
		left: 6%;
	}
	/* モーダル08   「お互いさま」の職場 */
	#interestingArea .list li:nth-of-type(8){
		width: 23%;
		bottom: 0;
		left: 60%;
	}
	/* モーダル09   午前9時の熱狂 */
	#interestingArea .list li:nth-of-type(9){
		width: 36%;
		bottom: 12%;
		left: 3%;
	}
	/* モーダル10   300兆円の市場 */
	#interestingArea .list li:nth-of-type(10){
		width: 55%;
		top: 23%;
		left: 3%;
	}

	/* モーダル中身
	============================== */
	#modalInteresting .modal{
		min-width: initial;
	}
	#modalInteresting .modal .inner{
		width: calc(100% - 40px);
		height: auto;
		padding: 60px 20px 40px;
	}
	/* モーダル内  テキスト */
	#modalInteresting .modal .inner .txt{
		font-size: 1.6rem;
	}

	/*
		組織紹介   teamArea
	-----------------------------------------------------------------------------------------------*/


	/*
		研修／福利厚生   educationBenefitsArea
	-----------------------------------------------------------------------------------------------*/
	#educationBenefitsArea .catchBase {
		height: 92px;
		top: -100px;
	}

	/*
		社員紹介／キャリアステップ   peopleArea
	-----------------------------------------------------------------------------------------------*/
	#peopleArea .peopleAreaIn{
		background: url(../images/ph_top_people_sp.jpg) no-repeat center center / cover;
		height: 123vw;
		min-height: 380px;
		min-height: initial;
	}
	#peopleArea .peopleAreaIn .inBox{
		width: 100%;
	}
	#peopleArea .catchBase {
		height: 60px;
	}
	#peopleArea .txtBox{
		padding-top: 20px;
	}

	/*
		働く環境の特徴   workStyleArea
	-----------------------------------------------------------------------------------------------*/


	/*
		インターンシップ   internshipArea
	-----------------------------------------------------------------------------------------------*/

}