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

/*
	会社・事業を知る  扉ページ  aboutPage
-----------------------------------------------------------------------------------------------*/

/*
	社長あいさつ  top_messagePage
-----------------------------------------------------------------------------------------------*/
.top_messagePage .ctsArea{
	width: var(--w1100);
}

/* kvエリア
============================== */
.top_messagePage #commonKvAreaL{
	background: url(../images/ph_kv_top_message_pc.jpg) no-repeat center center / cover;
}
.top_messagePage #commonKvAreaL .kvIn {
	height: 42.85vw;
	min-height: 600px;
}
@media print,screen and (min-width:813px){
	.top_messagePage #commonKvAreaL .kvIn .titArea .txtBack span{
		font-size: 3.6rem;
	}
}

/* ライン付き見出しタイトル
============================== */
.top_messagePage #top_messageArea .catchBaseLine{
	color: var(--clrBlack);
	font-size: 2.4rem;
}
/* アンダーライン */
.top_messagePage .catchBaseLine::after{
	background-color: var(--clrWhite);
}
/* 英文字 */
.top_messagePage .catchBaseLine .catchBase{
	bottom: -28px;
}

/* リスト */
.top_messagePage .list{
	display: flex;
	flex-direction: column;
	gap: 120px;
	margin-top: 125px;
}
.top_messagePage .list li{
	position: relative;
}
@media print,screen and (min-width:813px){
	/* 2つ目の箱 */
	.top_messagePage .list li:nth-of-type(2) .txtBox{
		flex-direction: row-reverse;
		text-align: right;
	}
	/* 画像 */
	.top_messagePage .list li:nth-of-type(2) .img{
		position: absolute;
		bottom: -120px;
		right: -180px;
	}
	.top_messagePage .txtBox{
		flex-direction: initial;
		justify-content:space-between
	}
	/* 3つ目の箱 */
	.top_messagePage .list li:nth-of-type(3){
		margin-top: 120px;
	}
	/* 画像 */
	.top_messagePage .list li:nth-of-type(3) .img{
		width: 780px;
		margin: 100px auto 0;
	}
}
/* タイトル */
.top_messagePage .txtBox span{
	font-size: 3.0rem;
	line-height: 210%;
}
/* テキスト */
.top_messagePage .txtBox .txt{
	width: 660px;
	line-height: 230%;
}


/*
	会社概要  outlinePage
-----------------------------------------------------------------------------------------------*/
.outlinePage .ctsArea{
	width: var(--w1100);
}

/* kvエリア
============================== */
.outlinePage #commonKvArea{
	background: url(../images/ph_kv_outline_pc.jpg) no-repeat center center / cover;
}
/* メインリスト */
#outlineArea .ctsArea > .list{
	display: flex;
	flex-direction: column;
	gap: 80px;
	padding-bottom: 140px;
}
/* タイトルエリア */
.outlinePage .titArea{
	position: relative;
	width: fit-content;
	margin: 0 auto;
	margin-bottom: 30px;
}
/* タイトルサブ */
.outlinePage .titArea .sub{
	position: absolute;
	width: fit-content;
	background-color: var(--clrBase);
	color: var(--clrWhite);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 5px 5px 7px 5px;
}
/* リストボックス */
#outlineArea .listIn{
	border-radius: var(--brLarge);
	filter: var(--shadow);
	overflow: hidden;
	will-change: transform;/* iOSで再描画対象として強制的に保持 */
	transform: translateZ(0);/* iOSが要素をGPU合成レイヤーに載せ直す */
}
/* テーブルベース
============================== */
.tbl td .link{
	font-size: 1.3rem;
}
@media print,screen and (min-width:813px){
	.tbl td .link{
		position: absolute;
		line-height: 100%;
		top: 30px;
		right: 50px;
	}

	/* ヒストリーエリア
	============================== */
	#historyArea{
		padding-left: 120px;
	}
	/* タイトルエリア */
	#historyArea .titArea{
		position: absolute;
		top: 0;
		right: 0;
	}
}

/* Concept  当社コンセプト
============================== */
#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn{
	display: flex;
}
#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .img{
	background-color: var(--clrWhite);
	padding: 30px 70px;
}
#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
}
#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox .tit,
#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox .txt{
	text-align: center;
}
#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox .tit{
	font-size: 2.2rem;
}
#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox .txt{
	font-weight: 500;
	line-height: 220%;
	margin-top: 20px;
}

/* アクセス
============================== */
#outlineArea .ctsArea > .list li:nth-of-type(3) .listIn .img{
	background-color: #ffffff;
	padding: 12px;
}


/*
	事業紹介  businessPage
-----------------------------------------------------------------------------------------------*/
/* kvエリア
============================== */
.businessPage #commonKvArea{
	background: url(../images/ph_kv_business_pc.jpg) no-repeat center center / cover;
}
.businessPage .kvIn .tit .en{
	text-shadow: -4px -4px 10px var(--clrWhite30), 4px -4px 10px var(--clrWhite30), -4px 4px 10px var(--clrWhite30), 6px 6px 10px var(--clrWhite30);
}

/* リストのタイトル周り
============================== */
.businessPage .titArea{
	position: relative;
}
/* ナンバー */
.businessPage #businessArea .list li .num{
	position: absolute;
	width: 50px;
	height: 50px;
	top: 0;
	left: 0;
}
/* アニメーション ナンバー */
.businessPage #businessArea .titArea.jsAnm.jsAnmStart .num{
	opacity: 0;
	animation: anmFadeIn 1.8s ease 1.3s forwards;
}
.businessPage #businessArea .list li:nth-of-type(1) .num{
	background: url(../images/il_business_num01.svg) no-repeat center center / cover;
}
.businessPage #businessArea .list li:nth-of-type(2) .num{
	background: url(../images/il_business_num02.svg) no-repeat center center / cover;
}
.businessPage #businessArea .list li:nth-of-type(3) .num{
	background: url(../images/il_business_num03.svg) no-repeat center center / cover;
}
.businessPage .catchBaseLine{
	padding-left: 70px;
}
/* リスト */
.businessPage .list{
	display: flex;
	flex-direction: column;
	gap: 120px;
}
/* リストの中身 */
.businessPage .listIn{
	display: flex;
	margin-top: 80px;
	gap: 60px;
}
/* テキストボックス */
.businessPage .txtBox{
	gap: 20px;
}
.businessPage .txtBack span{
	line-height: 220%;
}
/* 画像イメージ */
.businessPage .img{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	min-width: 680px;
	height: 100%;
	padding: 50px 0 60px;
	border-radius: var(--brSmall);
	filter: var(--shadow);
}

/* ビジネススケール
============================== */
/* タイトル下のテキスト */
#businessScale .titArea .txt{
	margin-top: 30px;
}
/* リスト */
#businessScale .listIn{
	flex-wrap: wrap;
	margin-top: 40px;
	gap: initial;
}
#businessScale .listIn li{
	position: relative;
	flex-direction: column;
	width: calc(100% / 3);
	padding: 50px 30px 40px;
}
@media print,screen and (min-width:813px){
	/* 2カラム用 */
	#businessScale .listIn li.clm02{
		justify-content: flex-end;
		width: calc(100% / 2);
		margin-top: -20px;
		padding-bottom: 50px;
	}
}
/* 点線 */
#businessScale .listIn li::before,
#businessScale .listIn li::after{
	position: absolute;
	content: " ";
	display: block;
	top: 0;
	right: 0;
}
@media print,screen and (min-width:813px){
	/* 点線たて */
	#businessScale .listIn li::before{
		width: 2px;
		height: calc(100% - 10px);
		background: 
		repeating-linear-gradient(
			to bottom, var(--clrBlack60) 0 2px, /* 点の色とサイズ */ 
			transparent 2px 6px /* 点の後ろに間隔をあける */);
		bottom: 0;
		margin: auto;
	}
}
/* 点線よこ */
#businessScale .listIn li::after{
	width: calc(100% - 5px);
	height: 2px;
	background: 
	repeating-linear-gradient(
		to right, var(--clrBlack60) 0 2px, /* 点の色とサイズ */ 
		transparent 2px 6px /* 点の後ろに間隔をあける */);
	left: 0;
	margin: auto;
}
/* 点線_打ち消し */
#businessScale .listIn li:nth-of-type(2)::before,
#businessScale .listIn li:nth-of-type(5)::before,
#businessScale .listIn li:nth-of-type(8)::before{
	display :none;
}
@media print,screen and (min-width:813px){
	#businessScale .listIn li:nth-of-type(1)::after,
	#businessScale .listIn li:nth-of-type(2)::after{
		display :none;
	}
}
/* テキストボックス */
#businessScale .txtBox{
	gap: initial;
}
/* タイトル */
#businessScale .listIn li .tit{
	margin: 0 auto;
	padding-bottom: 15px;
}
/* テキスト */
#businessScale .listIn li .txt{
	border-top: 1px solid var(--clrBlack10);
	padding-top: 15px;
	line-height: 160%;
}
#businessScale .listIn li .txt .year{
	display: block;
	text-align: right;
	font-size: 80%;
}

/* 01 純資産
============================== */
#businessScale .listIn li:nth-of-type(1) .txt{
	text-align: center;
	font-weight: 500;
	font-size: 2.4rem;
}

@media screen and (max-width:812px){
	/*
		社長あいさつ  top_messagePage
	-----------------------------------------------------------------------------------------------*/
	.top_messagePage .ctsArea{
		padding-top: 80px;
	}

	/* kvエリア
	============================== */
	.top_messagePage #commonKvAreaL{
		background: url(../images/ph_kv_top_message_sp.jpg) no-repeat center center / cover;
	}
	.top_messagePage #commonKvAreaL .kvIn {
		height: 133.33vw;
		min-height: 520px;
	}
	@media screen and (orientation: landscape) and (max-width: 768px){
		/* スマホ横向きだけに適用されるCSS */
		.top_messagePage #commonKvAreaL{
			background: url(../images/ph_kv_top_message_pc.jpg) no-repeat center center / cover;
		}
		.top_messagePage #commonKvAreaL .kvIn{
			height: 42.85vw;
			min-height: 400px;
		}
	}
	/* タイトルエリア */
	.top_messagePage #commonKvAreaL .kvIn .titArea{
		gap: 20px;
		padding-top: 40px;
	}

	/* コンテンツエリア
	============================== */
	/* 見出しタイトル */
	.top_messagePage #top_messageArea .catchBaseLine{
		font-size: 1.8rem;
	}
	/* アンダーライン */
	.top_messagePage .catchBaseLine::after{
		bottom: -10px;
		left: 0;
	}
	/* 英文字 */
	.top_messagePage .catchBase {
		top: -50px;
		right: 0;
	}
	/* リスト */
	.top_messagePage .list{
		gap: 50px;
		margin-top: 50px;
	}
	/* タイトル */
	.top_messagePage .txtBox span{
		font-size: 2.2rem;
	}
	/* テキスト */
	.top_messagePage .txtBox .txt{
		width: 100%;
		line-height: 180%;
		margin-top: 20px;
	}
	/* 画像 */
	.top_messagePage .img{
		margin-top: 20px;
	}

	/*
	会社概要  outlinePage
	-----------------------------------------------------------------------------------------------*/
	/* kvエリア
	============================== */
	.outlinePage #commonKvArea{
		background: url(../images/ph_kv_outline_sp.jpg) no-repeat center center / cover;
	}
	/* メインリスト */
	#outlineArea .ctsArea > .list{
		gap: 40px;
		padding-bottom: 40px;
	}
	/* タイトルエリア */
	.outlinePage .titArea{
		width: 220px;
		margin-bottom: 25px;
	}
	/* タイトルサブ */
	.outlinePage .titArea .sub{
		font-size: 1.4rem;
		bottom: -10px;
	}

	/* Concept  当社コンセプト
	============================== */
	#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn{
		flex-direction: column;
	}
	#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .img{
		padding: 20px 60px;
	}
	#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox{
		padding: 30px 20px;
	}
	#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox .tit{
		font-size: 2.0rem;
	}
	#outlineArea .ctsArea > .list li:nth-of-type(1) .listIn .txtBox .txt{
		line-height: 200%;
		margin-top: 15px;
	}

	/* アクセス
	============================== */
	#outlineArea .ctsArea > .list li:nth-of-type(3) .listIn .img{
		padding: 12px;
	}

	/* テーブルベース
	============================== */
	.tbl td .link{
		position: relative;
	}


	/*
		事業紹介  businessPage
	-----------------------------------------------------------------------------------------------*/

	/* kvエリア
	============================== */
	.businessPage #commonKvAreaL{
		background: url(../images/ph_kv_business_sp.jpg) no-repeat center center / cover;
	}
	/* ナンバー */
	.businessPage #businessArea .list li .num{
		width: 35px;
		height: 35px;
		top: 3px;
	}
	.businessPage .catchBaseLine{
		padding-left: 50px;
	}
	.businessPage .list{
		gap: 90px;
	}
	/* リストの中身 */
	.businessPage .listIn{
		flex-direction: column;
		margin-top: 30px;
		gap: 30px;
	}
	/* 画像イメージ */
	.businessPage .img{
		width: 100%;
		min-width: initial;
		height: 100%;
		padding: 30px 15px;
	}
	/* 書き換え */
	.businessPage .leadTxtBox{
		padding-bottom: 90px;
	}
	.businessPage .catchBaseLine .catchBase{
		bottom: -6px;
		top: initial;
		right: -10px;
		height: 90px;
	}

	/* ビジネススケール
	============================== */
	#businessScale .titArea .txt{
		margin-top: 20px;
		text-align: justify;
	}
	/* リスト */
	#businessScale .listIn{
		margin-top: 20px;
	}
	#businessScale .listIn li{
		width: 100%;
		padding: 30px 0;
	}
	/* 点線よこ */
	#businessScale .listIn li::after{
		width: 100vw;
		left: -20px;
	}

	/* タイトルメイン */
	#businessScale .listIn li .main{
		font-size: 11.0rem;
	}
	/* タイトルサブ */
	#businessScale .listIn li .sub{
		font-size: 3.0rem;
	}
	/* テキスト */
	#businessScale .listIn li .txt{
		padding-top: 10px;
	}

	/* 01 純資産
	============================== */
	#businessScale .listIn li:nth-of-type(1) .txt{
		text-align: justify;
		font-size: 2.0rem;
	}
}