@charset "utf-8";
/*BASE*/
menu input { display:none; }
menu input[type="radio"]:not(:checked) + label {
	background-color:#FFF;
	color:rgba(77,35,44,1);
}
menu input[type="radio"]:checked + label {
	color:#FFF;
	background-color:rgba(77,35,44,1);
}

/*HEADER*/
.keyvisual {
	background-color:#070302;
}

/*CONTENTS*/
#events-list li {
	background-color:#FFF;
}

@media screen and (max-width: 767.98px) {
/*BASE*/
#headerNavi nav .sp li.event .en {
	color:rgb(175, 47, 47) !important;
}

/*HEADER*/
.keyvisual .txt-box ,
.keyvisual .txt-box h1 {
	backdrop-filter:none;
}

/*NAVI*/
.button-box {
	font-size:12px;
	position: sticky;
	top:60px;
	left:0;
	z-index:1;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}
.button-box::-webkit-scrollbar {
	width:.5rem;
	height:.5rem;
}
.button-box::-webkit-scrollbar-track {
  border-radius: 0;
  background:#CCC;
}
.button-box::-webkit-scrollbar-thumb {
  border-radius: 0;
  background:#000;
}
menu {
	display:table;
	border-collapse:separate;
	border-spacing:0;
	width:100%;
	background-color:rgba(77,35,44,1);
}
menu li {
	display:table-cell;
	white-space:nowrap;
	border-bottom:solid 1px rgba(77,35,44,1);
}
menu li:not(:last-child) {
	border-right:solid 1px rgba(77,35,44,1);
}
menu li label {
	display:block;
	text-align:center;
	padding:.5rem 1rem;
}

/*CONTENTS*/
#events {
	background-color:rgba(240,240,240,.98);
	position:relative;
}

#events-list {
	display:grid;
	grid-template-columns:1fr 1fr;
	place-items: stretch stretch;
	gap:1.5rem 1.5rem;
	width:100%;
	padding:2rem 2rem 4rem;
}
#events-list li {
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,.2);
	border-radius:6px;
	overflow:clip;
}
#events-list li a {
	display:block;
	color:#333;
	background-color:rgba(255,255,255,1);
	width:100%;
	height:100%;
	position:relative;
}
#events-list li a::after {
	content:"READ MORE";
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	width:100%;
	height:32px;
	color:#FFF;
	font-size:10px;
	text-align:center;
	background-color:rgba(77,35,44,1);
	border:solid 1px rgba(77,35,44,1);
	background-image:url(../images/tmpl/icon_next-w.svg);
	background-repeat:no-repeat;
	background-position: right 1rem center;
	background-size: 1em;
	padding:0 1rem;
	position:absolute;
	bottom:0;
	left:0;
}
#events-list li a img {
	width:100%;
	max-width:none;
}
#events-list li a .txt-box {
	padding:.5rem;
}
#events-list li a .time {
	font-size:10px;
}
#events-list li a h2 {
	font-size:12px;
	color:rgba(77,35,44,1);
	margin-bottom:.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#events-list li a .comment-box {
	font-size:10px;
	color:#666;
	text-align:justify;
}
/*横向き*/
@media (orientation: landscape){
#events-list li a .comment-box {
	padding-bottom:32px;
}
}
/*縦向き*/
@media (orientation: portrait){
#events-list li {
	aspect-ratio:3 / 4;
}
#events-list li a .comment-box {
	display:none;
}
}
}


@media screen and (min-width: 768px), print {
/*BASE*/

#headerNavi.display-on li.news .en {
	color:rgb(175, 47, 47) !important;
}

/*HEADER*/
.keyvisual .img-bg {
	width:auto;
	height:400px;
	top:0;
	left:0;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.keyvisual .img-bg img {
	max-width:none;
	width:auto;
	height:400px;
}
.keyvisual .txt-box ,
.keyvisual .txt-box h1 {
	backdrop-filter:none;
}

/*NAVI*/
menu {
	display:flex;
	justify-content:center;
	gap:2rem;
	padding:60px 80px;
}
menu li {
	min-width:160px;
}
menu li label {
	display:block;
	text-align:center;
	padding:.5rem 1rem;
	border:solid 1px rgba(77,35,44,1);
	cursor:pointer;
}

/*CONTENTS*/
#events {
	background-color:rgba(240,240,240,.98);
	padding:0 80px 100px;
}

#events-list {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	place-items: stretch stretch;
	gap:20px 20px;
	width:100%;
	max-width:1440px;
	min-height:300px;
	margin:auto;
}
#events-list li {
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,.2);
	/*transition:box-shadow ease-in-out .2s 0s;*/
	border-radius:6px;
	overflow:clip;
}
#events-list li a {
	display:block;
	color:#333;
	background-color:rgba(255,255,255,1);
	width:100%;
	aspect-ratio:3 / 4;
	position:relative;
}
#events-list li a::before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.6);
	/*backdrop-filter:blur(2px);*/
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	opacity:0;
	transition:opacity ease .4s;
}
#events-list li a::after {
	content:"READ MORE";
	display:block;
	width:100%;
	max-width:100px;
	color:#FFF;
	text-align:center;
	background-color:rgba(77,35,44,1);
	padding:.5rem 2rem .5rem 1rem;
	border:solid 1px rgba(77,35,44,1);
	background-image:url(../images/tmpl/icon_next-w.svg);
	background-repeat:no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
	position:absolute;
	top: 50%;
    left: 50%;
	z-index:1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	opacity:0;
	transition:opacity ease .4s;
}
#events-list li a:hover::before,
#events-list li a:hover::after {
	opacity:1;
}
#events-list li a img {
	width:100%;
	max-width:none;
}
#events-list li a .txt-box {
	padding:1rem;
}
#events-list li a h2 {
	font-size:14px;
	color:rgba(77,35,44,1);
	text-align:justify;
	margin-bottom:0.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;/* 3行まで表示 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#events-list li a .time {
	font-size:10px;
}
#events-list li a .comment-box {
	font-size:12px;
	color:#666;
	text-align:justify;
	display: -webkit-box;
	-webkit-line-clamp: 4;/* 3行まで表示 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
}
@media screen and (min-width: 1440px) {
#events-list li a h2 {
	font-size:18px;
	margin-bottom:0.5rem;
	display: block;
	-webkit-line-clamp:unset;
	-webkit-box-orient:unset;
	overflow: visible;
}
#events-list li a .time {
	font-size:12px;
}
#events-list li a .comment-box {
	font-size:14px;
	display: block;
	-webkit-line-clamp:unset;
	-webkit-box-orient:unset;
	overflow: visible;
}
}