@charset "utf-8";

/* topWrap_inner */
.topWrap_inner{
	padding-top: 50px;
}

/* titleBox */
.sp{
	display: none; 
 }
 .relative{
	 position: relative;
 }
 .absolute{
	 position: absolute;
	 top: 0;
	 left: 0;
 }
 .titleBox{
	 background-image: url(../images/smartLife/bg01.jpg);
	 text-align: center;
	 background-size: cover;
	 background-position: center center;
	 margin-bottom: 50px;              
 }
 .titleBox>h3{
	 font-family: "Jost", sans-serif;
	 font-size: 1.5em;
	 font-weight: 400;
	 letter-spacing: 0.2em;
	 padding: 0.5em 3em;
	 box-sizing: border-box;
	 height: 100%;
	 color: #fff;
	 display: inline-block;
	 background-image: url(../images/smartLife/bg02.jpg);
	 background-size: cover;
	 background-position: center center;                  
 }
 @media (max-width:1024px){
	 .titleBox>h3{
		 font-size: 1.4em;                 
	 }
 }
 @media (max-width:768px){
	 .sp{
		 display: block; 
	 }
	 .pc{
		 display: none; 
	 }
	 .titleBox{
		 margin-bottom: 30px;              
	 }
	 .titleBox>h3{
		 font-size: 1.3em;                 
	 }
 }

/* .brand>.ttlBox */
.brand>.ttlBox{
	max-width: 1000px;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 50px;
	text-align: center;                        
}
.brand>.ttlBox>p{
	font-size: 0.9em;
	line-height: 2;
}
.brand>.ttlBox>p.em{
	font-size: 1.3em;
	letter-spacing: 0.2em;
	margin-bottom: 20px;                        
}
@media (max-width:1024px){
	.brand>.ttlBox>p{
		font-size: 0.8em;
	}
	.brand>.ttlBox>p.em{
		font-size: 1.2em;                        
	}
}
@media (max-width:768px){
	.brand>.ttlBox{
		width: 90%;
		margin-bottom: 30px;                       
	}
}

/* brandSlider */
.brandSlider{
	margin-bottom: 80px;
}
.brandSlider .swiper-wrapper{
	transition-timing-function: linear;
}
.brandSlider .swiper-wrapper p .propertyName{
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 0.75em;
	color: #fff;
	display: inline-block;
	padding: 0.25em 1em;
	background-color: #00559c;
}
@media (max-width:1024px){
	.brandSlider .swiper-wrapper p .propertyName{
		font-size: 0.65em;
	}
}
@media (max-width:768px){
	.brandSlider{
		margin-bottom: 50px;
	}
}

/* achievementsRow */
.achievementsRow{
	max-width: 800px;
	width: 70%;
	margin: 0 auto;
	margin-bottom: 50px;
}
.achievementsRow>ul{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.achievementsRow>ul>li{
	width: 48%;
}
@media (max-width:768px){
	.achievementsRow{
		max-width: 500px;
		width: 90%;
		margin-bottom: 30px;
	}
}

/* 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;
	}
}