@charset "utf-8";

/* topWrap_inner */
.topWrap_inner{
	background-attachment: fixed;
	background-image: url(../images/concept/bg01.jpg);
	background-size: cover;
	background-position: center center;
}

/* titleBox */
.sp{
	display: none; 
}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
	top: 0;
	left: 0;
}
.titleBox{
	background-image: url(../images/concept/ttlBg.jpg);
	background-size: cover;
	background-position: center center;
	text-align: center;
	padding: 50px 0;         
}
.titleBox>h3{
	font-family: "Jost", sans-serif;
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: #fff;          
}
@media (max-width:1024px){
	.titleBox>h3{
		font-size: 1.4em;                 
	}
}
@media (max-width:768px){
	.sp{
		display: block; 
	}
	.pc{
		display: none; 
	}
	.titleBox{
		padding: 30px 0;         
	}
	.titleBox>h3{
		font-size: 1.3em;                 
	}
}

/* mainText */
.mainText{
	position: relative;
}
.pastMap{
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
}
.pastMap>p{
	width: 100%;
	height: 100%;
	filter: none;
}
.pastMap>p>img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pastMap_white{
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,1);
	opacity: 0;
	z-index: 2;
	pointer-events: none;
}
.imgNotice{
	text-align: right;
	font-size: 0.75em;
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	z-index: 5;
}
.imgNotice.white{
	color: #fff;
}
.imgNotice>sup{
	font-size: 0.5em;
}
.mainTxt_box{
	position: relative;
	z-index: 4;

	opacity: 0;
	transform: translateY(-80px);
}
.mainTxt_box>.txtBox{
	text-align: center;
	margin-bottom: 50px;
}
.mainTxt_box>.txtBox>h4{
	font-family: "EB Garamond", serif;
	font-size: 4em;
	font-weight: 400;
	color: #7b7a7a;
	margin-bottom: 20px;
}
.mainTxt_box>.txtBox>p{
	font-size: 0.9em;
	letter-spacing: 0.25em;
	line-height: 3;
}
.mainTxt_box>.txtBox>p.em{
	font-size: 1.5em;
	line-height: 2.5;
	letter-spacing: 0.35em;
	margin-bottom: 30px;
}
.mainTxt_box>.txtBox>p>sup{
	font-size: 0.75em;
}
.mainTxt_box>.imgBox{
	max-width: 900px;
	width: 80%;
	margin: 0 auto;
}
.under500{
	display: none;
}
@media (max-width:1024px){
	.mainTxt_box>.txtBox>h4{
		font-size: 3.5em;
	}
	.mainTxt_box>.txtBox>p.em{
		font-size: 1.4em;
	}
	.mainTxt_box>.txtBox>p>sup{
		font-size: 0.65em;
	}
}
@media (max-width:768px){
	.pastMap>p>img{
		object-position: 60% 50%;
	}
	.mainTxt_box>.txtBox>h4{
		font-size: 3em;
	}
	.mainTxt_box>.txtBox>p.em{
		font-size: 1.3em;
	}
	.mainTxt_box>.imgBox{
		width: 90%;
	}
}
@media (max-width:500px){
	.under500{
		display: block;
	}
}

/* legacy */
.legacy>.txtBox{
	max-width: 1100px;
	width: 80%;
	margin: 0 auto;
	padding: 80px 0 50px 0;
	box-sizing: border-box;
	text-align: center;
}
.legacy>.txtBox>h4{
	font-family: "EB Garamond", serif;
	font-size: 4em;
	font-weight: 400;
	color: #a8a8a8;
	margin-bottom: 50px;
}
.legacy>.txtBox>p{
	font-size: 0.9em;
	letter-spacing: 0.25em;
	line-height: 3;
}
.legacy>.txtBox>p.tategaki{
	font-size: 4em;
	font-weight: 400;
	letter-spacing: 0.25em;
	writing-mode: vertical-rl;
	text-orientation: upright; 
	margin: 0 auto;
	margin-bottom: 20px;
}
.legacy>.txtBox>p.em{
	font-size: 1.5em;
	line-height: 2.5;
	letter-spacing: 0.35em;
	margin-bottom: 30px;
}
.legacy>.imgRow{
	max-width: 1100px;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 80px;
}
.legacy>.imgRow>ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.legacy>.imgRow>ul>li{
	width: 32%;
}
@media (max-width:1024px){
	.legacy>.txtBox>h4,
	.legacy>.txtBox>p.tategaki{
		font-size: 3.5em;
	}
	.legacy>.txtBox>p{
		font-size: 0.8em;
	}
	.legacy>.txtBox>p.em{
		font-size: 1.4em;
	}
}
@media (max-width:768px){
	.legacy>.txtBox{
		padding: 50px 0 30px 0;
	}
	.legacy>.imgRow{
		width: 90%;
		margin-bottom: 50px;
	}
	.legacy>.txtBox>h4,
	.legacy>.txtBox>p.tategaki{
		font-size: 3em;
	}
	.legacy>.txtBox>p.em{
		font-size: 1.3em;
	}
	.legacy>.txtBox>h4{
		margin-bottom: 30px;
	}
	.legacy>.txtBox>p.tategaki{
		margin-bottom: 10px;
	}
	.legacy>.txtBox>p.em{
		margin-bottom: 20px;
	}
}
@media (max-width:500px){
	.under500{
		display: block;
	}
}

/* prestige */
.prestige>.txtBox{
	max-width: 1100px;
	width: 80%;
	margin: 0 auto;
	padding: 80px 0;
	box-sizing: border-box;
	text-align: center;
}
.prestige>.txtBox>h4{
	font-family: "EB Garamond", serif;
	font-size: 4em;
	font-weight: 400;
	color: #a8a8a8;
	margin-bottom: 50px;
}
.prestige>.txtBox>p{
	font-size: 0.9em;
	letter-spacing: 0.25em;
	line-height: 3;
}
.prestige>.txtBox>p.tategaki{
	font-size: 4em;
	font-weight: 400;
	letter-spacing: 0.25em;
	writing-mode: vertical-rl;
	text-orientation: upright; 
	margin: 0 auto;
	margin-bottom: 20px;
}
.prestige>.txtBox>p.em{
	font-size: 1.5em;
	line-height: 2.5;
	letter-spacing: 0.35em;
	margin-bottom: 30px;
}
@media (max-width:1024px){
	.prestige>.txtBox>h4,
	.prestige>.txtBox>p.tategaki{
		font-size: 3.5em;
	}
	.prestige>.txtBox>p{
		font-size: 0.8em;
	}
	.prestige>.txtBox>p.em{
		font-size: 1.4em;
	}
}
@media (max-width:768px){
	.prestige>.txtBox{
		width: 90%;
		padding: 50px 0;
	}
	.prestige>.txtBox>h4,
	.prestige>.txtBox>p.tategaki{
		font-size: 3em;
	}
	.prestige>.txtBox>p.em{
		font-size: 1.3em;
	}
	.prestige>.txtBox>h4{
		margin-bottom: 30px;
	}
	.prestige>.txtBox>p.tategaki{
		margin-bottom: 10px;
	}
	.prestige>.txtBox>p.em{
		margin-bottom: 20px;
	}
}

/* achievementsMap */
.achievementsMap{
	max-width: 1100px;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 50px;
}
.fadeIn{
	opacity: 0;
	transition: 2s all;
}
.fadeIn.active{
	opacity: 1;
	transition: 2s all;
}
.fadeUp{
	opacity: 0;
	transform: translateY(10px);
	transition: 2s all;
}
.fadeUp.active{
	opacity: 1;
	transform: translateY(0px);
	transition: 2s all;
}
.fadeScale{
	opacity: 0;
	transition: 1s all;
}
.fadeScale.active{
	opacity: 1;
	transition: 1s all;
	transition-delay: 2s;
}
@media (max-width:768px){
	.js-scrollable>img{
		width: 125%;
	}
}
@media (max-width:500px){
	.js-scrollable>img{
		width: 150%;
	}
}

/* sagaAchievement_box */
.sagaAchievement_box{
	max-width: 1100px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 50px;
}
.sagaAchievement_box>p{
	font-size: 1.25em;
	color: #00559c;
	margin-bottom: 20px;
}
.sagaAchievement_box>p>span{
	display: inline-block;
	font-size: 2em;
	color: #00559c;
	padding: 0 0.1em;
}
.sagaAchievement_box>ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sagaAchievement_box>ul>li{
	width: 23%;
}
.sagaAchievement_box>ul>li>.imgBox{
	margin-bottom: 5px;
}
.sagaAchievement_box>ul>li>.txtBox>h4{
	font-size: 1em;
	font-weight: 400;
	text-align: left;
}
@media (max-width:1024px){
	.sagaAchievement_box>p{
		font-size: 1.15em;
	}
	.sagaAchievement_box>ul>li>.txtBox>h4{
		font-size: 0.9em;
	}
}
@media (max-width:768px){
	.js-scrollable>img{
		width: 150%;
	}
	.sagaAchievement_box>ul{
		max-width: 500px;
		width: 90%;
		margin: 0 auto;
	}
	.sagaAchievement_box>ul>li{
		width: 48%;
		margin-bottom: 20px;
	}
}

/* daiichiBusiness */
.daiichiBusiness{
	background-color: #dfd7c2;
	padding: 80px 0;
}
.daiichiBusiness_wrap{
	max-width: 1100px;
	width: 80%;
	margin: 0 auto;
}
.daiichiBusiness_wrap>.ttlWrap{
	max-width: 700px;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 20px;
}
.daiichiBusiness_wrap>.txtWrap{
	text-align: center;
	margin-bottom: 50px;
}
.daiichiBusiness_wrap>.txtWrap>h5{
	font-size: 1.5em;
	letter-spacing: 0.2em;
	font-weight: 400;
	margin-bottom: 10px;
}
.daiichiBusiness_wrap>.txtWrap>p{
	font-size: 0.9em;
	line-height: 2;
}
.daiichiBusiness_wrap>.imgWrap{
	position: relative;
	aspect-ratio: 1/1;
	max-width: 500px;
	width: 80%;
	height: 100%;
	margin: 0 auto;
	margin-bottom: 100px;
}
.pentagonLine{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	z-index: 1;
}
/* 五角形の外枠ボックス */
.pentagonLineBox{
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: polygon(
		50% 0%,
		100% 38%,
		82% 100%,
		18% 100%,
		0% 38%
	);
}
/* グラデーションの線を擬似要素で作る */
.pentagonLineBox::before{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: 2px; /* 線の太さ */

	background: conic-gradient(
		from 0deg,
		#41414b,
		#000
	);

	-webkit-mask: 
		radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
	mask: 
		radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);

	animation: rotatePentagon 10s linear infinite;
}
/* 回転 */
@keyframes rotatePentagon {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
/* 画像エリア */
.pentagonItems{
	position: relative;
	width: 100%;
	height: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 2;
}
.pentagonItems li{
	max-width: 200px;
	width: 30%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center;
}
.pentagonItems li.center {
	width: 40%;
	transform: translate(-50%, -50%);
}
.daiichiBusiness_wrap>.imgRow>ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.daiichiBusiness_wrap>.imgRow>ul>li{
	width: 23%;
}
@media (max-width:768px){
	.daiichiBusiness{
		padding: 50px 0;
	}
	.daiichiBusiness_wrap{
		width: 90%;
	}
	.daiichiBusiness_wrap>.ttlWrap{
		width: 100%;
	}
	.daiichiBusiness_wrap>.imgRow{
		max-width: 500px;
		width: 100%;
		margin: 0 auto;
	}
	.daiichiBusiness_wrap>.imgRow>ul>li{
		width: 48%;
		margin-bottom: 20px;
	}
	.daiichiBusiness_wrap>.imgRow>ul>li:nth-last-child(-n+2){
		margin-bottom: 0px;
	}
}