@charset "UTF-8";


/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
#topics-list-wrap > ul > li{
background:#fff;
border-radius:1rem;
overflow:hidden;
}
#topics-list-wrap > ul > li > .info-text-box > p.icon{
font-family:var(--font-family-en);
display:flex;
flex-wrap:wrap;
gap:.5rem;
}
#topics-list-wrap > ul > li > .info-text-box > p.icon > span{
padding:.7rem 0;
text-align:center;
letter-spacing:.06em;
color:#fff;
line-height:1;
}
#topics-list-wrap > ul > li > .info-text-box > p.icon > .store{
background:#b1ad9f;
}
#topics-list-wrap > ul > li > .info-text-box > p.icon > .event{
background:#ff9400;
}
#topics-list-wrap > ul > li > .info-text-box > p.icon > .brand{
background:#00a1ef;
}
#topics-list-wrap > ul > li > .info-text-box > p.icon > .publicity{
background:#00a340;
}
#topics-list-wrap > ul > li > .info-text-box > p.link{
width:max-content;
border-bottom:1px solid #bebebe;
}
#topics-list-wrap > ul > li > .info-text-box > p.link > a{
overflow:visible;
}
#topics-list-wrap > ul > li > .info-text-box > p.link > a:before,
#topics-list-wrap > ul > li > .info-text-box > p.link > a:hover:before{
color:#fff;
border:1px solid #212121;
background:#212121;
transform:scale(1);
}
#topics-list-wrap > ul > li > .info-text-box > p.link.finish{
opacity:.4;
}
#topics-list-wrap > ul > li > .info-text-box > p.link.finish > a{
pointer-events:none;
cursor:default;
}
#topics-list-wrap > ul > li > .info-text-box > p.link.finish > a > span{
text-decoration:line-through;
}
#topics-list-wrap > ul > li > .info-text-box > p.data{
font-family:var(--font-family-en);
}
@media all and (min-width:769px){
	#topics-list-wrap{
	width:85vw;
	min-width:calc(1400px - 4rem);
	margin:12rem auto;
	padding:0 2rem;
	}
	#topics-list-wrap > ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:6rem 3rem;
	}
	#topics-list-wrap > ul > li{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	}
	#topics-list-wrap > ul > li > .info-text-box{
	padding:3rem;
	margin:0 auto auto auto;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.icon{
	margin-bottom:2rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.icon > span{
	width:12rem;
	font-size:1.3rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > h2{
	font-size:2rem;
	margin-bottom:3rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.text{
	margin-bottom:3rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.link{
	margin-bottom:3rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.link > a{
	height:auto;
	font-size:1.4rem;
	gap:0 1.5rem;
	margin-bottom:1rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.link > a:before{
	width:3rem;
	height:3rem;
	font-size:1.0rem;
	order:2;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.link > a:hover:before{
	transform:scale(1.2);
	}
	#topics-list-wrap > ul > li > figure{
	margin:auto auto 0 auto;
	width:100%;
	}
}
@media all and (max-width:768px){
	#topics-list-wrap{
	padding:4rem 3rem 6rem 3rem;
	}
	#topics-list-wrap > ul{
	display:grid;
	grid-template-columns:1fr;
	gap:3rem 0;
	}
	#topics-list-wrap > ul > li > .info-text-box{
	padding:2.5rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.icon{
	margin-bottom:1rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.icon > span{
	width:10rem;
	font-size:1.0rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > h2{
	font-size:1.5rem;
	margin-bottom:2rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.text{
	margin-bottom:2rem;
	font-size:1.3rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.link{
	margin-bottom:3rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.link > a{
	height:auto;
	font-size:1.3rem;
	gap:0 1.5rem;
	margin-bottom:.5rem;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.link > a:before{
	width:3rem;
	height:3rem;
	font-size:1.0rem;
	order:2;
	}
	#topics-list-wrap > ul > li > .info-text-box > p.data{
	line-height:1;
	}
}



/* --------------------------------------------------------
　ページャー設定
-------------------------------------------------------- */
.custom-pager-wrap{
display:flex;
justify-content:center;
align-items:center;
}
.custom-pager {
display:flex;
align-items:center;
list-style:none;
padding:0;
margin:0;
gap:8px;
}
.custom-pager li {
display:flex;
justify-content:center;
align-items:center;
min-width:40px;
height:40px;
padding:0 6px;
border:1px solid #ddd;
background-color:#fff;
color:#333;
font-size:14px;
font-weight:bold;
cursor:pointer;
border-radius:4px;
transition:all 0.2s ease;
user-select:none;
}
.custom-pager li:not(.is-active):not(.is-disabled):not(.pager-ellipsis):hover {
color:#fff;
border-color:#333;
}
.custom-pager li.is-active {
background-color:#333; /* 現在地のアクティブ色 */
color:#fff;
border-color:#333;
cursor:default;
}
.custom-pager li.is-disabled {
color:#ccc;
border-color:#eee;
background-color:#fafafa;
cursor:not-allowed;
}
.custom-pager li.pager-ellipsis {
border:none;
background:transparent;
cursor:default;
min-width:24px;
}
@media all and (min-width:769px){
	.custom-pager-wrap{
	padding-bottom:20rem;
	}
}
@media all and (max-width:768px){
	.custom-pager-wrap{
	padding-bottom:6rem;
	}
}