@charset "utf-8";

/*-------------------------------
	Topics flex
-------------------------------*/

.Topics__flex {
	display: flex;
	flex-wrap:wrap;
	position:relative;
	padding:0 var(--padding-leftright);
	align-items: flex-start;
	margin-bottom:12rem;
}

.Topics__link {
	width:47rem;
	margin-top:3rem;
}

.Topics__link .page__link-inner {
	max-width:32.7rem;
	display: block;
}

.Topics__link .page__link-block {
	width:100%;
}

.Topics__link .page__link-block a,
.Topics__link .page__link-block .a{
	padding-top:3.7rem;
	padding-bottom:3.7rem;
	border-right:none;
}

.Topics__link .page__link-arrow-wrap {
	transform:rotate(-90deg);
}

.Topics__link  .page__link-arrow::after {
	top:auto;
	bottom:100%;
}

.Topics__link .page__link-block a:hover .page__link-arrow {
	transform:translateY(100%);
}
.Topics__link .page__link-block.-current .page__link-arrow{
	transform: translateY(0%) !important;
}
.Topics__link .page__link-block.-current .page__link-arrow-wrap{
	background: var(--maincolor);
}
.Topics__link .page__link-block.-current .page__link-arrow{
	background-image: url(../images/common/icon_arrow_link-white.svg) !important;
}
.Topics__link .page__link-block.-current .page__link-arrow::after{
	display: none;
}

/*-------------------------------
	Topics__list
-------------------------------*/

.Topics__list-wrap {
	width:calc(100% - 47rem);
}

.Topics__item{
	width: calc(100% + var(--padding-leftright));
	/* width: 100%; */
	border-bottom: 1px solid var(--blackcolor);
}
.Topics__item > a{
	padding: 3rem var(--padding-leftright);
	/* padding: 3rem 0; */
	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;
}

/*-------------------------------
	responsive
-------------------------------*/

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

.Topics__item-title{
	width: 100%;
}

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

/*-------------------------------
	Topics flex
-------------------------------*/

.Topics__link {
	width:37.5rem;
}

/*-------------------------------
	Topics__list
-------------------------------*/

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

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

/*-------------------------------
	Topics flex
-------------------------------*/

.Topics__flex {
	padding:0;
}

.Topics__link {
	width:100%;
	margin-top:0;
	padding:0 var(--padding-leftright);

}

.Topics__link .page__link-inner {
	max-width:100%;
	display: flex;
	padding:4rem 0 3rem;
}

.Topics__link .page__link-block {
	width:auto;
	margin-right:3rem;
	margin-bottom:2rem;
}

.Topics__link .page__link-block a,
.Topics__link .page__link-block .a {
	padding:1rem 6rem 1rem 0.5rem;
}

.Topics__link .page__link-arrow-wrap {
	right:0.5rem;
}
/*-------------------------------
	Topics list	
-------------------------------*/

.Topics__list-wrap {
	width:100%;
}

.Topics__item{
	width: 100%;
}

.Topics__item:first-child{
	border-top: 1px solid var(--blackcolor);
}

.Topics__item a {
	padding:3rem var(--padding-leftright);
}

.Topics__item-image{
	width: 20rem;
}
.Topics__item-body{
	width: calc(100% - 20rem);
}

} /* end 1100px */

} /* end 1240px */

} /* end 1380px */


/*-------------------------------
	ver SP
-------------------------------*/

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

.Subpagevisual-02 {
	padding-bottom:4.5rem;
	border-bottom:0;
}

/*-------------------------------
	Topics flex
-------------------------------*/

.Topics__flex {
	margin-bottom:7rem;
	padding:0;
}

.Topics__link {
	width:100%;
	margin-top:0;
	padding:0 var(--padding-leftright);
	position:relative;
	left:auto;
	top:auto;
}

.Topics__link .page__link-inner {
	max-width:100%;
	display: flex;
	padding:0rem;
	margin-bottom:6rem;
}

.Topics__link .page__link-block {
	width:auto;
	margin-right:1.6rem;
	margin-bottom:0.7rem;
}

.Topics__link .page__link-block a,
.Topics__link .page__link-block .a {
	padding:1rem 4rem 1rem 0.5rem;
}

.Topics__link .page__link-txt {
	text-align: left;
}

.Topics__link .page__link-arrow-wrap {
	right:0.2rem;
	display: flex;
	width:1.6rem;
	height:1.6rem;
}

.Topics__link .page__link-arrow {
	width:0.7rem;
	height:0.4rem;
	margin-top:0.1rem;
}


/*-------------------------------
	Topics list
-------------------------------*/

.Topics__list-wrap {
	width:100%;
}

.Topics__item:first-child{
	border-top: 1px solid var(--blackcolor);
}

	.Topics__item{
		width: 100%;
	}
	.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;
	}


} /* end 768px */