@charset "utf-8";
@import url(./reset-min.css);
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

html {
	background-color: #F5F5F5;
}

body {
max-width: 1100px;
margin: 0 auto;
/*font-family: 'BIZ UDGothic', sans-serif;*/
font-family: 'Noto Sans JP', sans-serif;
background-color: #FFF;
}
img{
max-width: 100%;
height: auto;
width /***/:auto;
margin: 0;
padding: 0;
vertical-align:bottom;
}

a {
	color:#00a0e9;
}
.pcIn {
display: inline;
}
.spIn {
display: none;
}


@media (max-width: 900px) {
.pcIn {
display: none;
}
.spIn {
display: inline;
}

}



/*===============================================
	■header
===============================================*/
header {
	background-color: #0E195E;
}


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

}

/*===============================================
	■live
===============================================*/
#live {
	margin: 0 0 50px;
	padding:20px 20px 40px;
	background-color: #0E195E;
	display: flex;
	justify-content:space-around;
	align-items:baseline;
}

#live .day {
	width:45%;
}
#live .price {
	width:50%;
}
@media screen and (max-width:900px){
#live {
	display: block;
	margin: 0 0 40px;
	padding:20px 0 10px;
}
#live .day {
	width:85%;
	margin: 0 auto 25px;
}
#live .price {
	width:94%;
	margin: 0 auto 10px;
}
}

/*===============================================
	■friend
===============================================*/
#friend {
	max-width: 900px;
	margin: 0 auto 60px;
	text-align: center;
}
#friend h2 {
	margin: 0 0 25px;
	padding: 0 0 10px;
	color:#00A3CA;
	font-size:2.5rem;
	font-weight: 900;
	line-height: 1.2;
	border-bottom: 3px solid #000;
}
#friend h3 {
	font-weight: 900;
	font-size:2.0rem;
}
#friend .day {
	margin: -10px 0 30px;
	color:#C30837;
	font-weight: 900;
	font-size:3.0rem;
	line-height: 1;
}
#friend .day span {
	font-size:5.0rem;
}
#friend .note {
	margin: 0 0 30px;
	text-align: 1.6;	
}


@media screen and (max-width:900px){
#friend {
	margin: 0 5% 50px;
}
#friend h2 {
	font-size:1.6rem;
}
#friend h3 {
	font-size:1.5rem;
}
#friend .day {
	margin: 0 0 30px;
	font-size:2rem;
	line-height: 1;
}
#friend .day span {
	font-size:2.7rem;
}
#friend .note {
	text-align: left;
	font-size:0.9rem;
}
}


/* btn------------------ */
#friend .btn {
	text-align: center;
}
#friend .btn a {
	max-width: 500px;
	display:block;
	margin: 0 auto;
	padding:15px 0;
	background-color: #07b43b;
	text-align: center;
	color:#FFF;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
}
#friend .btn a:hover {
	color:#FFF !important;
	background-color: #035C1E;
}
.btn a {
	position: relative;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
.btn a::after {
    position: absolute;
	font-family: 'Material Icons';
	content: '\e5df';
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	font-size:50px;
}

@media screen and (max-width:900px){
#friend .btn a {
	max-width:none;
	width:80%;
	font-size: 20px;
}
.btn a::after {
	font-size:40px;
}
}


/*===============================================
	■ticket
===============================================*/
#ticket {
	padding: 50px 0;
	background-color: #F5F5F5;
}
#ticket .ticketBox {
	max-width: 900px;
	margin: 0 auto;
}
#ticket h3 {
	margin: 0 0 25px;
	font-size:1.6rem;
	font-weight: 700;
}
#ticket .note {
	line-height: 1.6;
}

/* btn------------------ */
#ticket .ticketBtn {
	margin: 0 0 15px;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}
#ticket .btn {
	width: 48%;
	text-align: center;
}
#ticket .btn.out a {

	background-color: #CCC;
}
#ticket .btn.out a:hover {

	background-color: #CCC;
}
#ticket .btn a {
	display:block;
	margin: 0 auto;
	padding:20px 0;
	background-color: #d31a3d;
	text-align: center;
	color:#FFF;
	font-size: 21px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
}
#ticket .btn a:hover {
	background-color: #a91531;
}

@media screen and (max-width:900px){
#ticket {
	padding: 30px 0;
}
#ticket .ticketBox {
	margin: 0 5%;
}
#ticket h3 {
	margin: 0 0 20px;
}
#ticket .note {
	font-size:0.9rem;
}
/* btn------------------ */
#ticket .ticketBtn {
	margin: 0;
}
#ticket .btn {
	width: 100%;
	margin: 0 0 15px;
}
#ticket .btn a {
	font-size: 17px;
}
}







/*===============================================
	■entry
===============================================*/
#entry {
	position: fixed;
	width:100%;
	left: 0;
	bottom: 0;
	z-index: 1000000;
}
#entry a {
	width:100%;
	display: block;
	padding:10px 0;
	font-weight: 700;
	font-size: 1.6rem;
	text-align: center;
	background-color: #d31a3d;
	color:#FFF;
	text-decoration: none;
}
#entry a:hover {
	color:#FFF !important;
	background-color: #a91531;
}
@media (max-width: 900px) {

}


/*===============================================
	■footer
===============================================*/

#pageTop {
	position: absolute;
	bottom: 15px;
	right: 15px;

}
#pageTop a {
	text-decoration: none;
}
#pageTop a span {
	font-size:50px;
	color:#666666;
}
#pageTop a {
}
@media screen and (max-width:900px){
#pageTop {
	bottom:5px;
    right:5px;
}
}


footer {
	padding:0 0 20px;
	position: relative;
	text-align: center;
	line-height: 1.6em;
}

footer address {
	margin: 0 0 20px;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	background-color: #0E195E;
	color:#FFF;
	font-size:1.2rem;
}
footer address p {
	margin: 0 20px;
}
footer .logo {
	width:250px;
	margin: 0 auto;
}
@media screen and (max-width:900px){

footer address {
	display: block;
}
	footer address p:first-child {
		margin: 0 0 5px;
	}

footer .logo {
	width:200px;
}

}
/* fadeIn ------------------- */
.fadeIn {
    transform: translate3d(0, -20px, 0);
    transition: 2s;
    opacity: 0;
}

.fadeIn.animated {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}