@charset "utf-8";
:root {
	--c_bk:#101010;
	--c_wh:#ffffff;
	--c_gy:#f5f5f5;
	--c_rd:#9C0419;
}
.clr-bk {color: var(--c_bk)!important;}
.clr-wh {color: var(--c_wh)!important;}
.clr-gy {color: var(--c_gy)!important;}
.clr-rd {color: var(--c_rd)!important;}
.bg-bk {background-color: var(--c_bk)!important;}
.bg-wh {background-color: var(--c_wh)!important;}
.bg-gy {background-color: var(--c_gy)!important;}
.bg-rd {background-color: var(--c_rd)!important;}

.en,.fo-roboto {
	font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
	font-weight: 400;
	line-height: 1.1;
}

/* KV下 コンテンツ */
.l-about{
	padding: 150px 0 177px;
}
.l-about__content{
	display: flex;
	align-items: flex-start;
	gap: 117px;
}
.l-about__content.--reverse{
	display: flex;
	flex-direction: row-reverse;
	gap: 117px;
}
.l-about__images{
	width: 47%;
	display: flex;
	gap: 27px;
}
.l-about__image{
	&:first-of-type {
		margin-top: 50%;
	}
	img{
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}
.l-about__content.--reverse .l-about__image{
	&:first-of-type {
		margin-top: 0;
	}
	&:last-of-type {
		margin-top: 50%;
	}
}
.l-about__image.--first{
	flex: 1;
}
.l-about__image.--second{
	width: 53%;
}
.l-about__image.--reverse{
	&:last-of-type {
		margin-top: 50%;
	}
}
.l-about__info{
	flex: 1;
	text-align: left;
}
.l-about__info-title{
	display: block;
	font-size: 32px;
	letter-spacing: 9.6px;
	font-weight: 600;
}
.l-about__info-text{
	line-height: 2.5;
	margin-top: 36px;
}


/*********************************/
/* スマートフォン用のスタイル記述 */
/*********************************/
@media screen and (max-width: 780px) {
	.l-about{
		padding: 80px 0 80px;
	}
	.l-about__content{
		display: block;
	}
	.l-about__content.--reverse{
		display: block;
	}
	.l-about__images{
		width: 100%;
		margin-top: 18px;
	}
	.l-about__info-title{
		font-size: 22px;
		letter-spacing: 6.2px;
	}
	.l-about__info-text{
		margin-top: 24px;
	}
	.page-company .l-about__content.--reverse{
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.page-company .l-about__info{
		display: contents;
	}
	.page-company .l-about__info-text{
		margin-top: 24px;
		order: 3;
	}
	.page-company	.l-about__images{
		width: 100%;
		margin-top: 30px;
	}
}

/* otherページネーション
---------------------------------------------------------*/
.other-pagination{
	padding: 0 0 131px;
}
.other-pagination__wrap{
	position: relative;
	display: flex;
	&::before {
		content:"";
		position:absolute;
		top:0;
		bottom:0;
		left:50%;
		width:1px;
		background:#e2e2e2;
	}
}
.other-pagination__link{
	display: flex;
	align-items: center;
	gap: 32px;
	width: 50%;
	border-top: 1px solid #e2e2e2;
	border-bottom: 1px solid #e2e2e2;
}
.other-pagination__link.--left{
	padding: 40px 50px 40px 0;
}
.other-pagination__link.--right{
	justify-content: right;
	padding: 40px 0 40px 50px;
}
.other-pagination__info{
	flex: 1;
}
.other-pagination__image{
	max-width: 166px;
	img{
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
}
.other-pagination__title{
	text-align: left;
	font-weight: 600;
}
.other-pagination__catch{
	text-align: left;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
.other-pagination__text{
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 16px;
	text-align: left;
}
.other-pagination__text.--prev{
	justify-content: right;
	&::before {
		content: '';
		display: block;
		transform: scale(-1, 1);
		aspect-ratio: 14 / 4;
		width: 20px;
		background: url(../img/common/arw.svg) no-repeat center center/100% auto;
		transition: .45s cubic-bezier(.22,1,.36,1);
	}
}
.other-pagination__text.--next{
	&::after {
		content: '';
		display: block;
		aspect-ratio: 14 / 4;
		width: 20px;
		background: url(../img/common/arw.svg) no-repeat center center/100% auto;
		transition: .45s cubic-bezier(.22,1,.36,1);
	}
}
.other-pagination__link.is-empty{
  visibility:hidden;
}

/*********************************/
/* スマートフォン用のスタイル記述 */
/*********************************/
@media screen and (max-width: 780px) {
	.other-pagination{
		padding: 0 0 60px;
	}
	.other-pagination__link{
		display: block;
	}
	.other-pagination__link.--left{
		padding: 30px 30px 30px 0;
	}
	.other-pagination__link.--right{
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 30px 0px 30px 30px;
	}
	.other-pagination__info{
		order: 1;
		display: flex;
		flex-direction: column;
    justify-content: space-between;		
		width: 100%;
		margin-top: 15px;
	}
	.other-pagination__text{
		font-size: 14px;
	}
}