@charset "UTF-8";

.info_box {
	margin:calc(2.975rem - 35px) 0 1.5rem;
	overflow:hidden;
	padding:0;
	position:relative;
	width:100%;
}

[data-info-cat] {
	background-color:transparent;
	display:none;
	left:0;
	pointer-events:none;
	position:absolute;
	top:0;
	width:100%;
	z-index:1;
}

[data-info-cat="other"] {
	display:block;
	z-index:2;
}

[data-info-show="no"] {display:block;}

[data-info-show="yes"] {
	display:block;
	z-index:3;
}

.info_title {
	border-radius: 5px 5px 0px 0px;
	color:#fff;
	font-weight:normal;
	height:35px;
	line-height:35px;
	margin:0;
	padding:0;
	pointer-events:auto;
	position:relative;
	text-align:center;
	top:0;
}

[data-info-show="no"] .info_title {cursor:pointer;}

[data-info-cat="other"] .info_title {background-color:#177eac;}
[data-info-cat="intro"] .info_title {background-color:#038f1b;}
[data-info-cat="event"] .info_title {background-color:#d23344;}

@media not all and (max-width: 530px) {

	.info_title {
		font-size:1.25rem;
		width:150px;
	}

	[data-info-cat="other"] .info_title {left:0;}
	[data-info-cat="intro"] .info_title {left:160px;}
	[data-info-cat="event"] .info_title {left:320px;}

}

@media (max-width: 530px) {

	.info_title {
		font-size:calc((200vw - 120px) / 53); /* 1.25rem * (100vw - 60px) / 530px */
		width:calc((100vw - 60px) / 3); /* (100vw - 60px) / 3 */
	}

	[data-info-cat="intro"] .info_title {left:calc((100vw - 60px) / 3 + 10px);}
	[data-info-cat="event"] .info_title {left:calc((200vw - 120px) / 3 + 20px);}

}

.info_list {
	background-color:#fff;
	border-top-width:5px;
	border-top-style:solid;
	box-sizing:border-box;
	margin:0;
	overflow-y:hidden;
	padding:0;
	pointer-events:auto;
	width:100%;
}

[data-info-cat] .info_list {border-top-color:#177eac;}

[data-info-cat="other"] .info_list {border-top-color:#177eac;}
[data-info-cat="intro"] .info_list {border-top-color:#038f1b;}
[data-info-cat="event"] .info_list {border-top-color:#d23344;}

.info_list > li {
	display:block;
	margin:0;
}

.info_list > li:nth-of-type(odd) {background-color:#e4f3f6;}

.info_link_box {
	box-sizing:border-box;
	color:inherit;
	column-gap:15px;
	display:-ms-grid;
	display:grid;
	height:100%;
	padding:20px;
	row-gap:10px;
	text-decoration:none;
	width:100%;
}

@media not all and (max-width: 650px) {

	.info_box {height:450px;}

	.info_list {height:365px;}

	.info_list > li {height:120px;}

	.info_link_box {
		grid-template-areas:"a b c" "a b d";
		-ms-grid-columns:120px 15px 80px 15px calc(100% - 230px);
		grid-template-columns:120px 80px auto;
		-ms-grid-rows:20px 10px 50px;
		grid-template-rows:20px 50px;
	}

}

@media (max-width: 650px) {

	.info_box {height:540px;}

	.info_list {height:455px;}

	.info_list > li {height:150px;}

	.info_link_box {
		grid-template-areas:"b a" "b c" "b d";
		-ms-grid-columns:80px 15px calc(100% - 95px);
		grid-template-columns:80px auto;
		-ms-grid-rows:20px 10px 20px 10px 50px;
		grid-template-rows:20px 20px 50px;
	}

}

.info_link_time {
	align-self:center;
	display:block;
	grid-area:a;
}

@media not all and (max-width: 650px) {

	.info_link_time {
		-ms-grid-row:1;
	    -ms-grid-column:1;
	    -ms-grid-row-span:3;
	}

}

@media (max-width: 650px) {

	.info_link_time {
		-ms-grid-row:1;
	    -ms-grid-column:3;
	}

}

.info_link_img {
	align-items:center;
	grid-area:b;
	text-align:center;
}

@media not all and (max-width: 650px) {

	.info_link_img {
		-ms-grid-row:1;
	    -ms-grid-column:3;
	    -ms-grid-row-span:3;
	}

}

@media (max-width: 650px) {

	.info_link_img {
		-ms-grid-row:1;
	    -ms-grid-column:1;
	    -ms-grid-row-span:5;
	}

}

.info_link_img > img {
	height:auto;
	max-height:100%;
	width:auto;
	max-width:100%;
}

.info_link_title {
	font-size:1.125rem;
	font-weight:normal;
	grid-area:c;
	line-height:1;
	margin:0;
	overflow:hidden;
	padding:0;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media not all and (max-width: 650px) {

	.info_link_title {
		-ms-grid-row:1;
    	-ms-grid-column:5;
	}

}

@media (max-width: 650px) {

	.info_link_title {
		-ms-grid-row:3;
    	-ms-grid-column:3;
	}

}

.info_link_text {
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}

.info_link_text {
	grid-area:d;
	margin:0;
	padding:0;
}

@media not all and (max-width: 650px) {

	.info_link_text {
		-ms-grid-row:3;
    	-ms-grid-column:5;
	}

}

@media (max-width: 650px) {

	.info_link_text {
		-ms-grid-row:5;
    	-ms-grid-column:3;
	}

}

.info_page_link {
	border:1px solid currentcolor;
	bottom:0;
	color:#177eac;
	display:block;
	font-size:0.875rem;
	line-height:1;
	margin:0;
	padding:0.5em 2.5em;
	position:absolute;
	right:0;
	text-decoration:none;
	max-width:max-content;
}