@charset "utf-8";

*.-logo{
	position: relative;
}
*.-logo::before{
	content: "";
	display: block;
	width: 6.2rem;
	height: 8.5rem;
	background-image: url(../images/common/logo-subcolor.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: -4rem;
	z-index: 6000;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1520px) and (min-width: 769px){

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	*.-logo::before{
		width: 4.6rem;
		height: 6.3rem;
		top: -3.4rem;
	}

}

/*-------------------------------
	メインビジュアル
-------------------------------*/

.Mainvisual__inner-wrap{
	position: relative;
}
.Mainvisual__inner{
	width: calc(100% + (var(--padding-leftright) * 2));
	margin-left: calc(var(--padding-leftright) * -1);
}
.Mainvisual__item{
	position: relative;
}
.Mainvisual__item::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 6000;
	background: rgba(0,0,0,.2);
}
.Mainvisual__item a{
	display: block;
	opacity: 1 !important;
}
.Mainvisual__item-inner{
	padding-left: var(--padding-leftright);
	padding-right: var(--padding-leftright);
	width: 100%;
	height: 100%;
	padding-bottom: 9.5rem;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 6000;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: column;
}
.Mainvisual__item-tag{
	font-family: var(--en);
	width: fit-content;
	font-size: 2.8rem;
	/*margin-bottom: 3rem;*/
	margin-bottom: 1.5rem;
	padding-bottom: .5rem;
	padding-left: .2rem;
	padding-right: .2rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	line-height: .7;
	color: #fff;
	position: relative;
	clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
.Mainvisual__item-tag::after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
}
.Mainvisual__item-title{
	font-family: var(--en);
	font-size: 9rem;
	/*margin-bottom: 2rem;*/
	margin-bottom: 1.2rem;
	/*padding-bottom: .8rem;*/
	font-weight: 600;
	letter-spacing: 0;
	/*line-height: 1;*/
	line-height: 1.3;
	color: #fff;
	clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
.Mainvisual__item-image{
	width: 100%;
}
.Mainvisual__item-image img{
	width: 100%;
	height: 100svh;
	object-fit: cover;
}
.Mainvisual__item-bottom{
	width: 100%;
	column-gap: 2rem;
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
}
.Mainvisual__item-text{
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
.Mainvisual__item-list{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
.Mainvisual__item-list-item{
	width: fit-content;
	line-height: 1;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Mainvisual__item-list-item::before{
	content: "#";
	line-height: 1;
	display: block;
}

.Mainvisual__arrow{
	right: var(--padding-leftright);
	position: absolute;
	bottom: 4rem;
	z-index: 6000;
	column-gap: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Mainvisual__arrow-item{
	cursor: pointer;
}
.Mainvisual__arrow-item.-prev{
	transform: scale(-1,1);
}
.Mainvisual__arrow-item.C-Button .C-Button__arrow::after{
	background-image: url(../images/common/icon_arrow-white.svg);
}

.Mainvisual__item.swiper-slide-active .Mainvisual__item-tag{
	transition: var(--transition);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	transition-delay: 1s;
}
.Mainvisual__item.swiper-slide-active .Mainvisual__item-title{
	transition: 1s clip-path ease-in-out;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	transition-delay: 1.25s;
}
.Mainvisual__item.swiper-slide-active .Mainvisual__item-text{
	transition: var(--transition);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	transition-delay: 1.75s;
}
.Mainvisual__item.swiper-slide-active .Mainvisual__item-list{
	transition: var(--transition);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	transition-delay: 2s;
}
.Mainvisual__item.-active_prev .Mainvisual__item-image img,
.Mainvisual__item.swiper-slide-active .Mainvisual__item-image img,
.Mainvisual__item.swiper-slide-duplicate-active .Mainvisual__item-image img{
	animation: mainvisualZoomOut 12s linear infinite;
}
@keyframes mainvisualZoomOut{
	0%{
		transform: scale(1);
		filter: blur(0);
	}
	85%{
		filter: blur(0);
	}
	100%{
		transform: scale(1.1);
		filter: blur(.2rem);
	}
}

.Mainvisual__arrow-item.C-Button:hover{
	border-color: var(--maincolor);
}
.Mainvisual__arrow-item.C-Button .a:hover{
	background: var(--maincolor);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1520px) and (min-width: 769px){

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Mainvisual__item-tag{
		font-size: 2.4rem;
		margin-bottom: 2.2rem;
		padding-bottom: .8rem;
		padding-left: 0;
		padding-right: 0;
		line-height: .85;
	}
	.Mainvisual__item-title{
		font-size: 4.8rem;
		margin-bottom: 1.8rem;
		padding-bottom: .2rem;
		line-height: 1.15;
	}
	.Mainvisual__item-list-item{
		font-size: 1.3rem;
	}

	.Mainvisual__arrow{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		right: 0;
		bottom: 3.6rem;
		width: 100%;
	}

	@keyframes mainvisualZoomOut{
		0%{
			transform: scale(1);
			filter: blur(0);
		}
		85%{
			filter: blur(0);
		}
		100%{
			transform: scale(1.2);
			filter: blur(.2rem);
		}
	}

}



/*-------------------------------
	施工事例
-------------------------------*/

.Works{
	padding-bottom: 0;
}
.Works__block-wrap{
	width: calc(100% + (var(--padding-leftright) * 2));
	border-top: 1px solid var(--blackcolor);
	margin-left: calc(var(--padding-leftright) * -1);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	position: relative;
}
.Works__block-wrap::after{
	background: var(--blackcolor);
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 50%;
	z-index: 6000;
}
.Works__block{
	width: 50%;
}
.Works__block-header{
	border-bottom: 1px solid var(--blackcolor);
	padding: 4rem var(--padding-leftright) 3.8rem;
	top: var(--header-height);
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	position: sticky;
	left: 0;
	right: 0;
	z-index: 5000;
	background: #ececec;
}
.Works__block-header-title{
	width: calc(100% - 10.4rem);
	padding-right: 2.5rem;
}
.Works__block-header-title-jp{
	font-size: 2.2rem;
	margin-bottom: 1.5rem;
	font-weight: 500;
	line-height: 1;
}
.Works__block-header-title-en{
	font-family: var(--en);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	display: block;
}

.Works__item{
	border-bottom: 1px solid var(--blackcolor);
}
.Works__item a{
	width: 100%;
	height: 100%;
	padding: 3rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
	z-index: 5000;
	opacity: 1 !important;
}
.Works__item a::before{
	transition: .3s transform var(--transition-easing);
	background: var(--maincolor);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	transform: scaleY(0);
	transform-origin: top;
}
.Works__item-image{
	width: 100%;
	margin-bottom: 2.8rem;
	aspect-ratio: 66 / 44;
	overflow: hidden;
}
.Works__item-image img{
	transition: var(--transition);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Works__item-body{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Works__item-title{
	width: calc(100% - 4.2rem);
	padding-right: 2.5rem;
}
.Works__item-tag-wrap{
	gap: 1.5rem;
	margin-bottom: .6rem;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.Works__item-tag{
	transition: var(--transition);
	width: fit-content;
	font-size: 1.2rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #808080;
}
.Works__item-tag::before{
	content: "#";
	line-height: 1;
	display: block;
}
.Works__item-title-jp{
	transition: var(--transition);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
}

.Works__item a:hover::before{
	transform-origin: bottom;
	transform: scaleY(1);
}
.Works__item a:hover .Works__item-image img{
	transform: scale(1.1);
}
.Works__item a:hover .Works__item-tag{
	color: #fff;
}
.Works__item a:hover .Works__item-title-jp{
	color: #fff;
}
.Works__item a:hover .C-Button{
	border-color: #fff;
}

.Works__bottom{
	width: calc(100% + (var(--padding-leftright) * 2));
	margin-left: calc(var(--padding-leftright) * -1);
}
.Works__bottom a{
	padding-left: var(--padding-leftright);
	padding-right: var(--padding-leftright);
	width: 100%;
	height: 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	opacity: 1 !important;
}
.Works__bottom a::before{
	transition: transform .3s var(--transition-easing);
	background: var(--maincolor);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	transform: scaleY(0);
	transform-origin: top;
}
.Works__bottom-text{
	transition: var(--transition);
	font-size: 1.6rem;
	margin-right: 1.6rem;
	font-weight: 500;
	line-height: 1;
	display: block;
}

.Works__bottom a:hover::before{
	transform: scaleY(1);
	transform-origin: bottom;
}
.Works__bottom a:hover .Works__bottom-text{
	color: #fff;
}
.Works__bottom a:hover .Works__button{
	border-color: #fff;
}

.Video{
	width: 100%;
	overflow: hidden;
}
.Video video{
	width: 100%;
	/* height: 100svh; */
	height: 85svh;
	vertical-align: middle;
	object-fit: cover;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1520px) and (min-width: 769px){

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

	.Works__block-header{
		padding-top: 3rem;
		padding-bottom: 3rem;
		align-items: center;
	}
	.Works__block-header-title{
		padding-right: 0;
	}

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

	.Works{
		padding-bottom: 0;
	}
	.Works__block-wrap{
		flex-direction: column;
	}
	.Works__block-wrap::after{
		display: none;
	}
	.Works__block{
		width: 100%;
	}
	.Works__block-header{
		padding: 3.2rem var(--padding-leftright) 3rem;
	}
	.Works__block-header-title{
		width: calc(100% - 10rem);
	}
	.Works__block-header-title-jp{
		font-size: 2rem;
		margin-bottom: 1.5rem;
	}
	.Works__block-header-title-en{
		font-size: 1.3rem;
	}

	.Works__item a{
		padding: 1.8rem var(--padding-leftright) 2.5rem;
	}
	.Works__item-image{
		margin-bottom: 2.5rem;
	}
	.Works__item-body{
		align-items: flex-end;
	}
	.Works__item-title{
		width: calc(100% - 4rem);
	}
	.Works__item-tag-wrap{
		gap: 1.5rem;
		margin-bottom: .6rem;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.Works__item-tag{
		font-size: 1.1rem;
	}
	.Works__item-title-jp{
		font-size: 1.8rem;
	}

	.Works__bottom a{
		background: var(--maincolor);
		height: 9.4rem;
		color: #fff;
		justify-content: flex-end;
	}
	.Works__button.-green{
		border-color: #fff;
	}
	.Works__button .C-Button__arrow{
		transform: translateY(-100%);
	}
	.Works__bottom-text{
		margin-right: 1.4rem;
	}

	.Video video{
		height: 45.4rem;
	}

}



/*-------------------------------
	会社案内
-------------------------------*/

.Company__header{
	margin-bottom: 2.8rem;
}
.Company__header .sec__header-text{
	color: #fff;
}

.Company__image{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Company__image-item-wrap{
	width: 50%;
	row-gap: 3rem;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	flex-direction: column;
}
.Company__image-item{
	width: 50%;
	position: relative;
}
.Company__image-item.-logo::before{
	right: 6rem;
}
.Company__image-item span{
	width: 100%;
	aspect-ratio: 677 / 456;
	display: block;
	overflow: hidden;
}
.Company__image-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Company__image-item-wrap .Company__image-item:nth-of-type(1){
	width: 37.5%;
}
.Company__image-item-wrap .Company__image-item:nth-of-type(2){
	width: 82.6%;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1520px) and (min-width: 769px){

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Company__header{
		margin-bottom: 5.8rem;
	}

	.Company__image{
		row-gap: 5.4rem;
		flex-direction: column;
	}
	.Company__image-item-wrap{
		width: 100%;
		row-gap: 2rem;
	}
	.Company__image-item{
		width: 100%;
	}
	.Company__image-item.-logo::before{
		right: 2rem;
	}
	.Company__image-item-wrap .Company__image-item:nth-of-type(1){
		width: 17rem;
	}
	.Company__image-item-wrap .Company__image-item:nth-of-type(2){
		width: 26.5rem;
		align-self: flex-start;
	}

}



/*-------------------------------
	お取引実績
-------------------------------*/

.Clients{
	border-bottom: 1px solid var(--blackcolor);
}

.Clients__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Clients__header{
	width: 50%;
	margin-bottom: 0;
}
.Clients__title{
	width: 100%;
}
.Clients__item-wrap{
	width: 50%;
}
.Clients__item{
	width: 100%;
	display: flex;
	gap: 3.2rem 5rem;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.Clients__item-image{
	width: 15rem;
	height: 5.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Clients__item-image img{
	max-width: 100%;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1520px) and (min-width: 769px){

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

	.Clients__header{
		width: 60%;
	}
	.Clients__item-wrap{
		width: 40%;
	}

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

	.Clients__inner{
		flex-direction: column;
	}
	.Clients__header{
		width: 100%;
		margin-bottom: 5rem;
	}
	.Clients__item-wrap{
		width: 100%;
	}

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

	.Clients__inner{
		flex-direction: column;
	}
	.Clients__header{
		width: 100%;
		margin-bottom: 0;
	}
	.Clients__item-wrap{
		width: 100%;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.Clients__item{
		width: 100%;
		display: flex;
		gap: 3rem 5.4rem;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.Clients__item-image{
		width: calc(50% - 2.7rem);
		height: 4.8rem;
	}

}



/*-------------------------------
	フリーキスワークスについて
-------------------------------*/

.About{
	border-bottom: 1px solid var(--blackcolor);
}
.About__item-body{
	width: calc(100% + (var(--padding-leftright) * 2));
	margin-left: calc(var(--padding-leftright) * -1);
}
.About__item-wrap{
	transition-timing-function: linear;
}
.About__item{
	width: calc(44.2rem + 2.4rem);
	padding-left: 1.2rem;
	padding-right: 1.2rem;
}
.About__item-image{
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.About__item-image img{
	width: 100%;
	height: 53.5rem;
	flex-shrink: 0;
	object-fit: cover;
}
.About__item-body-wrap.-logo::before{
	right: 16.6rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1520px) and (min-width: 769px){

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

	.About__item{
		width: 37.5rem;
	}

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

	.About__item-body{
		width: calc(100% + (var(--padding-leftright) * 2));
		margin-left: calc(var(--padding-leftright) * -1);
	}
	.About__item-wrap{
		transition-timing-function: linear;
	}
	.About__item{
		width: calc(24.5rem + 1.4rem);
		padding-left: .7rem;
		padding-right: .7rem;
	}
	.About__item img{
		height: 29.7rem;
	}
	.About__item-body-wrap.-logo::before{
		right: .2rem;
	}

}



/*-------------------------------
	イベント情報・お知らせ
-------------------------------*/

.Topics{
	padding-top: 0;
}
.Topics__inner{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.Topics__header{
	width: 46.8rem;
	padding-top: 8rem;
	flex-direction: column;
	align-items: flex-start;
}
.Topics__title{
	width: 100%;
	margin-bottom: 3.8rem;
}

.Topics__item-wrap{
	width: calc(100% - 46.8rem);
}
.Topics__item{
	width: calc(100% + var(--padding-leftright));
	border-bottom: 1px solid var(--blackcolor);
}
.Topics__item > a{
	padding: 3rem var(--padding-leftright);
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	position: relative;
	opacity: 1 !important;
}
.Topics__item > a::before{
	transition: .3s transform var(--transition-easing);
	background: var(--maincolor);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	transform: scaleY(0);
	transform-origin: top;
}
.Topics__item-image{
	width: 24rem;
}
.Topics__item-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Topics__item-body{
	width: calc(100% - 24rem);
	padding-left: 2.6rem;
	row-gap: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}
.Topics__item-content{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Topics__item-title{
	transition: var(--transition);
	width: calc(100% - 11.5rem);
}
.Topics__item-data{
	width: calc(100% - 4.2rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.Topics__item-category{
	background: var(--subcolor);
	min-width: 6rem;
	height: 1.6rem;
	margin-bottom: .6rem;
	padding-bottom: .2rem;
	padding-left: .8rem;
	padding-right: .8rem;
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.Topics__item-time{
	color: var(--subcolor);
	font-size: 1.3rem;
	line-height: 1;
	display: block;
}

.Topics__item a:hover .C-Button{
	border-color: #fff;
}
.Topics__item > a:hover::before{
	transform: scaleY(1);
	transform-origin: bottom;
}
.Topics__item > a:hover .Topics__item-title{
	color: #fff;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1520px) and (min-width: 769px){

}
@media screen and (max-width:1380px) and (min-width: 769px){

	.Topics__item-title{
		width: 100%;
	}

}
@media screen and (max-width:1240px) and (min-width: 769px){

	.Topics__header{
		width: 37.5rem;
	}
	.Topics__item-wrap{
		width: calc(100% - 37.5rem);
	}

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Topics{
		padding-top: var(--padding-topbottom);
	}
	.Topics__inner{
		flex-direction: column;
	}
	.Topics__header{
		padding-top: 0;
		width: 100%;
	}
	.Topics__title{
		margin-bottom: 0;
	}
	.Topics__item-wrap{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.Topics__item{
		width: calc(100% + (var(--padding-leftright) * 2));
	}
	.Topics__item:first-child{
		border-top: 1px solid var(--blackcolor);
	}
	.Topics__item-image{
		width: 20rem;
	}
	.Topics__item-body{
		width: calc(100% - 20rem);
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Topics{
		padding-bottom: 4rem;
	}
	.Topics__inner{
		flex-direction: column;
	}
	.Topics__header{
		padding-top: var(--padding-topbottom);
		width: 100%;
		margin-bottom: 3rem;
	}
	.Topics__title{
		width: 100%;
		margin-bottom: 3.8rem;
	}

	.Topics__item-wrap{
		width: calc(100% + (var(--padding-leftright) * 2));
		margin-left: calc(var(--padding-leftright) * -1);
	}
	.Topics__item{
		width: 100%;
	}
	.Topics__item:last-child{
		border-bottom: none;
	}
	.Topics__item > a{
		padding: 3.5rem var(--padding-leftright);
		align-items: flex-start;
	}
	.Topics__item-image{
		width: 17rem;
		height: 10.6rem;
	}
	.Topics__item-body{
		width: calc(100% - 17rem);
		padding-left: 1.6rem;
		row-gap: 1.8rem;
	}
	.Topics__item-title{
		width: 100%;
		line-height: calc(2.6 / 1.4);
	}
	.Topics__item-content{
		align-items: flex-end;
	}
	.Topics__item-data{
		width: calc(100% - 4.2rem);
	}
	.Topics__item-category{
		min-width: 5.6rem;
		height: 1.7rem;
		margin-bottom: .8rem;
	}

}