@charset "UTF-8";
/* CSS Document */

/* =========================================================
PAGE COMMON
========================================================= */
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

body {
}

#allWrap {
}

main {
	/*padding: 0 3%;*/
}

article {
}

/* ==================================================
LIVE LIST
================================================== */
#livelistArea {
	position: relative;
}

#livelistArea::after {
	content: "";
	display: block;
	width: 94%;
	max-width: 1200px;
	height: 10px;
	margin: 0 auto;
	background: #000;
	border-radius: 20px;
}

#livelistArea ul {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 20px 0 20px;
}

#livelistArea ul li {
	margin: 0 15px 40px;
	/*! border: 4px solid #000; */
	border-radius: 12px;
	overflow: hidden;
	/*! padding: 10px 0 15px; */
	background: #fff;
	width: calc(100% / 4 - 30px);
	max-width: 240px;
}

#livelistArea ul li a {
	/*! display: block; */
	height: 100%;
	/*! padding: 10px 0 15px; */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

#livelistArea ul li .logo {
	/*! min-height: 160px; */
	transition: all 0.4s ease-out 0s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

#livelistArea ul li .logo img {
}

#livelistArea ul li a:hover {
	opacity: 1;
}

/* .wide */
#livelistArea ul li.wide {
	width: calc(100% / 2 - 30px);
	max-width: 370px;
}

#livelistArea ul li.wide a {
}

#livelistArea ul li.wide .logo {
}

#livelistArea ul li.wide .logo img {
}

/* .linkBtn */
#livelistArea ul li .linkBtn {
	background: #000;
	color: #fff;
	font-size: 1.2rem;
	display: inline-block;
	width: 90%;
	max-width: 140px;
	padding: 3px 5px 4px;
	border-radius: 50px;
	position: relative;
	transition: all 0.4s ease-out 0s;
	display: none;
}

#livelistArea ul li .linkBtn::after {
	content: "";
	width: 11px;
	height: 8px;
	display: inline-block;
	background: url(../img/icon_window.svg) no-repeat center center;
	background-size: 100%;
	margin-left: 10px;
	transform: translateY(-1px);
}

/* hover */
#livelistArea ul li a:hover .logo {
	filter: brightness(110%) contrast(110%) saturate(120%);
	transform: scale(1.08);
}

#livelistArea ul li a:hover .logo {
	filter: brightness(110%) contrast(110%) saturate(120%);
	transform: scale(1.05);
}

#livelistArea ul li a:hover .linkBtn {
	background: #0095e2;
}

/* a.nolink */
#livelistArea ul li a.nolink {
	transition: none;
	pointer-events: none;
}

#livelistArea ul li a.nolink .linkBtn {
	display: none;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 768px) {
#livelistArea::after {
	height: 6px;
}

#livelistArea ul {
	padding: 10px 0 20px;
}
	
#livelistArea ul li {
	width: calc(100% / 3 - 20px);
	margin: 0 10px 30px;
}

#livelistArea ul li .logo {
	/*! min-height: 110px; */
}

/* .wide */
#livelistArea ul li.wide {
}

#livelistArea ul li.wide .logo {
}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 540px) {
#livelistArea ul li {
	width: calc(100% / 2 - 12px);
	margin: 0 6px 30px;
}

#livelistArea ul li .logo {
	/*! min-height: 90px; */
}

/* .wide */
#livelistArea ul li.wide {
	width: calc(100% - 12px);
	max-width: 100%;
}

#livelistArea ul li.wide .logo {
}

#livelistArea ul li.wide .logo img {
	width: 80%;
}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* ##########　MEMO　################################################################################## */
/* #################################################################################################### */
/* #################################################################################################### */

/* ==================================================
大見出し
================================================== */

/* 中見出し（他、説明など）
------------------------------ */

/* ### 小見出し 1 ### */
/* ### ----- ### */

/* 小見出し 2 */
/* ----- */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 768px) {

} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */