/* ==================================================
   Page Title
================================================== */

.pagetitle {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	overflow: hidden;
	background: #fff;
}


/* ==================================================
   共通レイヤー
================================================== */

.pagetitle > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ==================================================
   z-index
================================================== */

.pt-bg1 {
	z-index: 1;
}

.pt-bg2 {
	z-index: 2;
}

.pt-cov {
	z-index: 3;
}

.pt-car {
	z-index: 4;
}

.pt-cc {
	z-index: 5;
}


/* ==================================================
   背景画像 共通設定
================================================== */

.pt-bg1,
.pt-bg2,
.pt-cov,
.pt-car {
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
}


/* ==================================================
   ページ別 背景画像
================================================== */


/* ------------------------------
   Privacy Policy
------------------------------ */

.pt-privacy .pt-bg1 {
	background-image: url("../img/pagetitle/pt-privacy_bg01.webp");
}

.pt-privacy .pt-bg2 {
	background-image: url("../img/pagetitle/pt-privacy_bg02.webp");
}

.pt-privacy .pt-cov {
	background-image: url("../img/pagetitle/pt-privacy_cov.webp");
}

.pt-privacy .pt-car {
	background-image: url("../img/pagetitle/pt-privacy_car.webp");
}


/* ------------------------------
   Contact
------------------------------ */

.pt-contact .pt-bg1 {
	background-image: url("../img/pagetitle/pt-contact_bg01.webp");
}

.pt-contact .pt-bg2 {
	background-image: url("../img/pagetitle/pt-contact_bg02.webp");
}

.pt-contact .pt-cov {
	background-image: url("../img/pagetitle/pt-contact_cov.webp");
}

.pt-contact .pt-car {
	background-image: url("../img/pagetitle/pt-contact_car.webp");
}


/* ------------------------------
   Access
------------------------------ */

.pt-access .pt-bg1 {
	background-image: url("../img/pagetitle/pt-access_bg01.webp");
}

.pt-access .pt-bg2 {
	background-image: url("../img/pagetitle/pt-access_bg02.webp");
}

.pt-access .pt-cov {
	background-image: url("../img/pagetitle/pt-access_cov.webp");
}

.pt-access .pt-car {
	background-image: url("../img/pagetitle/pt-access_car.webp");
}


/* ------------------------------
   Recruit
------------------------------ */

.pt-recruit .pt-bg1 {
	background-image: url("../img/pagetitle/pt-recruit_bg01.webp");
}

.pt-recruit .pt-bg2 {
	background-image: url("../img/pagetitle/pt-recruit_bg02.webp");
}

.pt-recruit .pt-cov {
	background-image: url("../img/pagetitle/pt-recruit_cov.webp");
}

.pt-recruit .pt-car {
	background-image: url("../img/pagetitle/pt-recruit_car.webp");
}


/* ------------------------------
   Company
------------------------------ */

.pt-company .pt-bg1 {
	background-image: url("../img/pagetitle/pt-company_bg01.webp");
}

.pt-company .pt-bg2 {
	background-image: url("../img/pagetitle/pt-company_bg02.webp");
}

.pt-company .pt-cov {
	background-image: url("../img/pagetitle/pt-company_cov.webp");
}

.pt-company .pt-car {
	background-image: url("../img/pagetitle/pt-company_car.webp");
}


/* ------------------------------
   Trade
------------------------------ */

.pt-trade .pt-bg1 {
	background-image: url("../img/pagetitle/pt-trade_bg01.webp");
}

.pt-trade .pt-bg2 {
	background-image: url("../img/pagetitle/pt-trade_bg02.webp");
}

.pt-trade .pt-cov {
	background-image: url("../img/pagetitle/pt-trade_cov.webp");
}

.pt-trade .pt-car {
	background-image: url("../img/pagetitle/pt-trade_car.webp");
}


/* ------------------------------
   Financial Support
------------------------------ */

.pt-autoloan .pt-bg1 {
	background-image: url("../img/pagetitle/pt-autoloan_bg01.webp");
}

.pt-autoloan .pt-bg2 {
	background-image: url("../img/pagetitle/pt-autoloan_bg02.webp");
}

.pt-autoloan .pt-cov {
	background-image: url("../img/pagetitle/pt-autoloan_cov.webp");
}

.pt-autoloan .pt-car {
	background-image: url("../img/pagetitle/pt-autoloan_car.webp");
}


/* ------------------------------
   Maintenance
------------------------------ */

.pt-maintenance .pt-bg1 {
	background-image: url("../img/pagetitle/pt-maintenance_bg01.webp");
}

.pt-maintenance .pt-bg2 {
	background-image: url("../img/pagetitle/pt-maintenance_bg02.webp");
}

.pt-maintenance .pt-cov {
	background-image: url("../img/pagetitle/pt-maintenance_cov.webp");
}

.pt-maintenance .pt-car {
	background-image: url("../img/pagetitle/pt-maintenance_car.webp");
}


/* ------------------------------
   Blog
------------------------------ */

.pt-blog .pt-bg1 {
	background-image: url("../img/pagetitle/pt-blog_bg01.webp");
}

.pt-blog .pt-bg2 {
	background-image: url("../img/pagetitle/pt-blog_bg02.webp");
}

.pt-blog .pt-cov {
	background-image: url("../img/pagetitle/pt-blog_cov.webp");
}

.pt-blog .pt-car {
	background-image: url("../img/pagetitle/pt-blog_car.webp");
}


/* ------------------------------
   Gallery
------------------------------ */

.pt-gallery .pt-bg1 {
	background-image: url("../img/pagetitle/pt-gallery_bg01.webp");
}

.pt-gallery .pt-bg2 {
	background-image: url("../img/pagetitle/pt-gallery_bg02.webp");
}

.pt-gallery .pt-cov {
	background-image: url("../img/pagetitle/pt-gallery_cov.webp");
}

.pt-gallery .pt-car {
	background-image: url("../img/pagetitle/pt-gallery_car.webp");
}


/* ------------------------------
   Stock
------------------------------ */

.pt-stock .pt-bg1 {
	background-image: url("../img/pagetitle/pt-stock_bg01.webp");
}

.pt-stock .pt-bg2 {
	background-image: url("../img/pagetitle/pt-stock_bg02.webp");
}

.pt-stock .pt-cov {
	background-image: url("../img/pagetitle/pt-stock_cov.webp");
}

.pt-stock .pt-car {
	background-image: url("../img/pagetitle/pt-stock_car.webp");
}


/* ------------------------------
   News
------------------------------ */

.pt-news .pt-bg1 {
	background-image: url("../img/pagetitle/pt-news_bg01.webp");
}

.pt-news .pt-bg2 {
	background-image: url("../img/pagetitle/pt-news_bg02.webp");
}

.pt-news .pt-cov {
	background-image: url("../img/pagetitle/pt-news_cov.webp");
}

.pt-news .pt-car {
	background-image: url("../img/pagetitle/pt-news_car.webp");
}


/* ------------------------------
   Loan Simulator
------------------------------ */

.pt-loansimu .pt-bg1 {
	background-image: url("../img/pagetitle/pt-loansimu_bg01.webp");
}

.pt-loansimu .pt-bg2 {
	background-image: url("../img/pagetitle/pt-loansimu_bg02.webp");
}

.pt-loansimu .pt-cov {
	background-image: url("../img/pagetitle/pt-loansimu_cov.webp");
}

.pt-loansimu .pt-car {
	background-image: url("../img/pagetitle/pt-loansimu_car.webp");
}


/* ------------------------------
   Link
------------------------------ */

.pt-link .pt-bg1 {
	background-image: url("../img/pagetitle/pt-link_bg01.webp");
}

.pt-link .pt-bg2 {
	background-image: url("../img/pagetitle/pt-link_bg02.webp");
}

.pt-link .pt-cov {
	background-image: url("../img/pagetitle/pt-link_cov.webp");
}

.pt-link .pt-car {
	background-image: url("../img/pagetitle/pt-link_car.webp");
}


/* ==================================================
   タイトル
================================================== */

.pt-cc {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	pointer-events: none;
	padding: 10% 0 0 0;
}

.pt-cc h2 {
	order: 2;
	margin: 0;
	font-size: clamp(14px, 1.5vw, 20px);
	font-weight: 500;
	letter-spacing: 0.5em;
	color: #000;
	opacity: 0;

	animation:
		ptTitleH2 1.7s linear 0.5s both,
		ptTitleColor 1.7s linear 0.5s both;
}

.pt-cc p {
	order: 1;
	margin: 0;
	font-size: clamp(32px, 5vw, 100px);
	font-family: var(--font-en);
	font-weight: 100;
	line-height: 1.2;
	color: #000;
	opacity: 0;

	animation:
		ptTitleP 1.7s linear 0.5s both,
		ptTitleColor 1.7s linear 0.5s both;
}


/* ==================================================
   英語タイトル
   フェードイン
================================================== */

@keyframes ptTitleP {

	0% {
		opacity: 0;
	}

	4% {
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}


/* ==================================================
   日本語タイトル
   フェードイン
================================================== */

@keyframes ptTitleH2 {

	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}


/* ==================================================
   タイトル
   黒 → 白
================================================== */

@keyframes ptTitleColor {

	0%,
	34% {
		color: #000;
		text-shadow: 0px 5px 10px rgba(0,0,0,0);
	}

	54%,
	100% {
		color: #fff;
		text-shadow: 0px 5px 10px rgba(0,0,0,0.8);
	}
}


/* ==================================================
   pt-bg1
   左 → 右へマスクオープン
================================================== */

.pt-bg1 {
	clip-path: inset(0 100% 0 0);

	animation:
		ptMaskLeft 1.7s cubic-bezier(.76, 0, .24, 1) 0.5s both;
}

@keyframes ptMaskLeft {

	0%,
	18% {
		clip-path: inset(0 100% 0 0);
	}

	38%,
	100% {
		clip-path: inset(0 0 0 0);
	}
}


/* ==================================================
   pt-bg2
   右 → 左へマスクオープン
================================================== */

.pt-bg2 {
	clip-path: inset(0 0 0 100%);

	animation:
		ptBg2Mask 1.7s cubic-bezier(.76, 0, .24, 1) 0.5s both;
}

@keyframes ptBg2Mask {

	0%,
	52% {
		clip-path: inset(0 0 0 100%);
	}

	66%,
	100% {
		clip-path: inset(0 0 0 0);
	}
}


/* ==================================================
   pt-car
   フェードイン
================================================== */

.pt-car {
	opacity: 0;

	animation:
		ptCarShow 1.7s linear 0.5s both;
}

@keyframes ptCarShow {

	0%,
	72% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


/* ==================================================
   pt-cov
   右 → 左へマスクオープン
================================================== */

.pt-cov {
	clip-path: inset(0 0 0 100%);

	animation:
		ptCovMask 1.7s cubic-bezier(.76, 0, .24, 1) 0.5s both;
}

@keyframes ptCovMask {

	0%,
	76% {
		clip-path: inset(0 0 0 100%);
	}

	100% {
		clip-path: inset(0 0 0 0);
	}
}


/* ==================================================
   Mobile
   768px以下
================================================== */

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

	.pagetitle {
		aspect-ratio: 4 / 3;
	}

	.pt-bg1,
	.pt-bg2,
	.pt-cov,
	.pt-car {
		background-position: center bottom;
		background-size: auto 100%;
	}

	.pt-cc {
		padding: 15% 0 0 0;
	}

}