@charset "UTF-8";
.match{
	margin-top: 9.25rem;
	color: #111;
	overflow: hidden;
}

.matchTitle{
	padding: 3.5rem 0 2rem;
	text-align: center;
	color: var(--color-red);
}
.matchTitle h1{
	font-style:oblique;
	line-height: .9;
	font-size: 1.4rem;
}
.matchTitle h1 span{
	display: block;
	font-family: var(--font-en);
	font-size:6rem;
	font-weight: 400;
}

table{
	font-size: 1rem;
	border: 1px solid var(--color-primary);
	width: 100%;
}
table.m1{
	margin-bottom: 2em;
}
table th{
	background-color: var(--color-primary);
	color: #fff;
	text-align: center;
	vertical-align: middle;
	
	padding: 1em;
}
table th.line{
	border-right: 1px solid var(--color-white);
}
table th.line2{
	border-bottom: 1px solid var(--color-white);
}
table td{
	padding: 1em;
	border: 1px solid var(--color-primary);
	text-align: center;
	vertical-align: middle;
}
table td span{
	font-size: 80%;
}
table td span.att{
	display: block;
	text-align: left;
	padding-top: 1em;
}
/*---------------------------------

MAIN

---------------------------------*/
.matchMian{
	/*padding: 1rem;*/
	/*background-color:#ef9bb5;*/
}
.matchMian img.spim{
	display: none;
}
.matchMian .l-inner{
    width: 100%;
    text-align: center;
}

/*---------------------------------

TITLE

---------------------------------*/
.matchSubTitle_en{
	text-align: center;
	color: var(--color-primary);
	font-size:1.6rem;
	line-height: .9;
	margin-bottom: 5rem;
}
.matchSubTitle_en span{
	font-family: var(--font-en);
	display: block;
	font-size:5.5rem;
	font-weight: 400;
}
.matchSubTitle{
	text-align: center;
	color: var(--color-primary);
	font-size:2.8rem;
	line-height: .9;
	margin-bottom: 5rem;
}
/*---------------------------------

PICK

---------------------------------*/
.matchPick{
	padding: 12rem 0;
	color:  var(--color-white);
	background-color: var(--color-primary);
	position: relative;
	background-image: url("../images/match/bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.matchPick .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:rgba(255, 255, 255,0.7);
}
.matchPick .matchSubTitle_en{
	color: var(--color-white);
}
.matchPick .l-inner{
	position: relative;
	z-index: 2;
}
.matchPick dl{
	width: 80%;
	margin: 0 auto 3em;
	display: flex;
	flex-wrap: wrap;
}
.matchPick dl dt{
	width: 55%;
}
.matchPick dl dt img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
.matchPick dl dd{
	width: 45%;
	padding-left: 5%;
	
}
.matchPick dl dd p.tx{
	font-size: 1.1rem;
	line-height: 1.8;
}
.matchPick .pick__button{
	padding-top: 1em;
}
.matchPick .pickBana{
	width:700px;
	margin: 0 auto;
}
.matchPick .pickBana img{
	width: 100%;
	height: auto;
}
/*---------------------------------

MENU

---------------------------------*/
.matchMenu{
	padding: 8rem 0
}
.matchMenu ul{
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	column-gap: 2%;
	row-gap: 1em;
	margin: 0 auto;
}
.matchMenu ul li{
	width: 32%;
	text-align: center;
}
.matchMenu ul a:link{
	font-size: 1.1rem;
	background-color: #e51784;
	display: block;
	color: var(--color-white);
	border-radius: 2em;
	padding: .5em;
	position: relative;
}
.matchMenu ul a:link::after {
    position: absolute;
    top: 50%;
    right: 1.5em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(135deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
.matchMenu ul a:visited{
	background-color: var(--color-primary);
	color: var(--color-white);
}
.matchMenu ul a:hover{
	background-color: var(--color-primary);
	color: var(--color-white);
	opacity: .8;
}
/*---------------------------------

BEST

---------------------------------*/
.bestMatch{
	padding: 8rem 0;
}
.sliderBox{
	width: 80%;
	margin: 60px auto;
}
.sliderBox .pick__button{
	padding-top: .5em;
	text-align: center;
}
.pick{
	padding: 0 .3em;
}
.sliderBox.c2 .pick{
	padding: 0 .5em;
}
.pick img{
	width: 100%;
	height: auto;
	margin-bottom: .2em;
}
.pick p.e_titile{
	font-weight: bold;
	font-size: 1.1rem;
}
.pick p.tx{
	font-size: .9rem;
}
.slick-dots{
	text-align: center;
}
.slick-dots li button {
   text-indent: -9999px;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
	background-color: #999;
	border-radius: 50%;
}
.slick-dots li.slick-active{
	background-color: #333;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:before {
    content: '•';
    font-size: 22px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    opacity: .25;
    color: black;
}
.sliderBox .slide-arrow{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
}
.sliderBox .slide-arrow.prev-arrow{
	left: -3em;
}
.sliderBox .slide-arrow.next-arrow{
	right: -3em;
}
.sliderBox img.slide-arrow{
	width: 25px;
	height: auto;
}
/*---------------------------------

TIME

---------------------------------*/
.timeMatch{
	padding: 6rem 0 10rem;
	background-color: #f6f6f6;
}
.history_outline{
	width:70%;
	margin: 0 auto;
}
.timeMatch .history_outline dl{
	display: flex;
    flex-wrap: wrap;
    position: relative;
	padding-bottom: 2em;
}
.timeMatch .history_outline dl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 16px;
    height: 16px;
    background-color: #e51784;
    border-radius: 50%;
	z-index: 1;
}
.timeMatch .history_outline dl::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 9px;
    bottom: -9px;
    background-color: #b5b5b5;
    width: 2px;
    z-index: 0;
}
.timeMatch .history_outline dl dt {
    width: 15%;
    padding-left: 35px;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 1;
}
.timeMatch .history_outline dl dd {
    width: 75%;
    padding-left: 20px;
    font-size: 17px;
    line-height: 2;
}
.timeMatch .history_outline dl .event_list {
    line-height: 1;
}
.timeMatch .history_outline dl .event_list__item {
    display: flex;
}
.timeMatch .history_outline dl .event_list__item_cat {
    width: 25%;
	font-size: .8rem;
	line-height: 2.2;
	text-align: center;
	color: var(--color-white);
	padding-right: 5%;
	padding-top: .5em;
	
}
.timeMatch .history_outline dl .event_list__item_cat .c1{
	background-color: #636363;
	border-radius: 2em;
	display: block;	
}
.timeMatch .history_outline dl .event_list__item_cat .c2{
	background-color:  #e51784;
	border-radius: 2em;
	display: block;	
}
.timeMatch .history_outline dl .event_list__item_txt {
    width: 75%;
    font-weight: bold;
    font-size: 1.2rem;
	line-height: 2;
	
}
.timeMatch .history_outline dl .event_list__item_txt a:link{
	text-decoration: underline;
}
.timeMatch p.game{
	background-color:#e51784;
	color: var(--color-white);
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 1em 0;
	margin-top: 1em;
}
.timeMatch p.t1{
	font-weight: bold;
    font-size: 1.2rem;
	margin-bottom: .5em;
}
/*---------------------------------

EVENT

---------------------------------*/
.eventMatch{
	padding: 8rem 0;
}
p.eventTitle{
	text-align: center;
	font-size: 1.7rem;
	font-weight: 500;
	margin-bottom: 3em;
	
}
p.eventTitle2{
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	margin: 2rem 0 1em 0;
	color: var(--color-primary);
	
}
p.eventTitle span{
	background-color:  var(--color-primary);
	color: var(--color-white);
	padding: 0.3em 1em 0.4em;
}
.eventBox{
	padding-top: 3em;
	margin-bottom: 3em;
}
.eventMatch .eventBox:last-child{
	margin-bottom: 0;
}
.eventBox p.im.ev{
	width: 80%;
	margin: 0 auto;
}
.eventBox p.im img{
	width: 100%;
	height: auto;
}
/*---------------------------------

FUN

---------------------------------*/
.funMatch{
	padding: 6rem 0 10rem;
	background-color: var(--color-primary);
	position: relative;
}
.funMatch p.kazari01{
	position: absolute;
	top: -.2em;
	right: -.2em;
	width: 70%;
	opacity: .1;
}
.funMatch p.kazari02{
	position: absolute;
	bottom:-.2em;
	left: -.2em;
	width: 70%;
	opacity: .4;
	
}
.funMatchArea{
	position: relative;
	z-index: 2;
}
.funMatch .matchSubTitle_en{
	color: var(--color-white);
}
.funBox{
	background-color:  var(--color-white);
	padding: 2em;
	border-radius: 1em;
	width: 80%;
	margin: 0 auto;
}
.funBox dl{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.funBox dt{
	width: 25%;
}
.funBox dd{
	width: 75%;
	padding-left: 5%;
}
.funBox p.t1{
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: .5em;
}
.funBox p.t2{
	font-size: 5.5rem;
	color: var(--color-primary);
	font-family: var(--font-en);
	text-transform:lowercase;
	line-height: .8;
}
.funBox p.t2 span{
	font-size: 80%;
}
.funBox p.t3{
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: .5em;
}
.funBox p.cat{
	font-weight: 600;
	font-size: 1.8rem;
}
.funBox .bt{
	width: 300px;
	padding-top: 1.5em;
}
.funBox .bt a:link{
	font-size: 1.1rem;
	background-color: var(--color-primary);
	display: block;
	color: var(--color-white);
	padding: 1em 1.5em;
	position: relative;
}
.funBox .bt a:link::after {
    position: absolute;
    top: 50%;
    right: 1.5em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
.funBox .bt a:visited{
	background-color: var(--color-primary);
	color: var(--color-white);
}
.funBox .bt a:hover{
	background-color: var(--color-primary);
	color: var(--color-white);
	opacity: .8;
}
/*---------------------------------

SEAT

---------------------------------*/
.seatMatch{
	padding: 8rem 0
}
.seatMain{
	width: 80%;
	margin: 0 auto;
}
.seatMain p.im{
	margin-bottom: 3em;
}
.seatMain .atte{
	padding-top: 2em;
}
.seatMain .atte li{
	list-style: disc;
	font-size: .9rem;
	margin-left: 2em;
	margin-bottom: .5em;
}
.seatMain .atte li:last-child{
	margin-bottom: 0;
}
/*---------------------------------

FIELD

---------------------------------*/
.field{
	width: 100%;
	height: 50vh;
	background-image: url("../images/match/kazari.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
/*---------------------------------

ACCESS

---------------------------------*/
.accessMatch{
	padding: 8rem 0
}
.accessMain{
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
.accessMain p.tx{
	display: inline-block;
	text-align: left;
	font-size: 1rem;
	padding-top: 1rem;
}
.mapBtn{
	padding-top: 3em;
}
.mapBtn a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
    background: var(--color-red);
    max-width: 29.3rem;
    height: 4.5rem;
    width: 100%;
    margin: 0 auto;
}
.mapBtn a i {
    display: inline-block;
    padding-right: 1rem;
	width: 45px;
}
.mapBtn a i img{
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.mapInfo{
	text-align: left;
	padding-top: 8rem;
}
.mapInfo p.title{
	color: var(--color-primary);
	font-size: 1.4rem;
	font-weight: 600;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: .5em;
	position: relative;
	cursor: pointer;
}
.mapInfo p.title::before,.mapInfo p.title::after {
    right: 0;
}
.mapInfo p.title::before,.mapInfo p.title::after {
    content: "";
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 3px;
    background-color: var(--color-primary);
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    transition: 0.5s;	
}
.mapInfo p.title::after {
    transform: translateY(-50%) rotate(90deg);
}
.mapInfo p.title.open::after {
    transform: translateY(-50%) rotate(0deg);
}
.accessMatch p.mapIm{
	width: 90%;
	margin: 0 auto;
}
.mapInfo p.title i {
    display: inline-block;
    padding-right: 1rem;
	width: 45px;
}
.mapInfo p.title i img{
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.mapInfoBox{
	padding-top: 2em;
	margin-bottom: 3em;
}
.mapInfo .mapInfoBox:last-child{
	margin-bottom: 0;
	
}
.mapInfoBox .mapInfoBox2{
	margin-bottom: 5em;
}
.mapInfoBox .mapInfoBox2:last-child{
	margin-bottom: 0;
}
.mapInfoBox p.mapTitle{
	color: var(--color-primary);
	font-weight: 600;
	font-size: 1.3rem;
	margin-bottom: 1em;
}
.mapInfoBox p.mapTitle2{
	font-weight: 600;
	font-size: 1.2rem;
	padding-top: 2em;
}
.mapInfoBox p.mapTitle3{
	font-weight: 600;
	font-size: 1.25rem;
	border-bottom: 1px solid #000;
	margin-bottom: 1em;
	
}
.mapInfoBox p.tx{
	line-height: 2;
	font-size: 1.1rem;
	padding-top: 0;
}
.mapInfoBox p.tx span.red{
	color: var(--color-red);
}
.mapInfoBox .m1{
	margin-bottom: 1em;
}
.mapInfoBox .m2{
	margin-bottom: 2em;
}
.mapInfoBoxArea{
	
}
/*---------------------------------

NEXT

---------------------------------*/
.nextMatch{
	background-color: #f6f6f6;
	padding: 8rem 0
}
ul.matchGame{
	display: flex;
	column-gap: 2%;
	flex-wrap: wrap;
	row-gap:2em;
}
ul.matchGame li{
	background-color: var(--color-white);
	width: 32%;
	display: flex;
	flex-direction: column;
	padding-bottom: .3em;
}

ul.matchGame li dl.host{
	display: flex;
	align-items: center;
	background-color: #dddddd;
}
ul.matchGame li dl.host dt,ul.matchGame li dl.host dd{
	
}
ul.matchGame li dl.host dt{
	width: 30%;
	background-color: var(--accent-color-yellow);
	font-family: var(--font-en);
	text-align: center;
	font-weight: 400;
	font-size: 2rem;
	line-height: var(--line-height-sm);
    text-transform: uppercase;
	padding: 0.2em 0.44em 0.08em;
}
ul.matchGame li dl.host.vis dt{
	background-color: #636363;
	color: #fff;
	
}
ul.matchGame li dl.host dd{
	width: 70%;
	text-align: right;
	font-weight: 500;
	font-size: 1.3rem;
	padding: 0 0.44em;
	
}
ul.matchGame li dl.matchDay{
	display: flex;
	align-items: center;
	padding: .5em .2em ;
}
ul.matchGame li dl.matchDay dt{
	width: 40%;
	padding: 0 .3em;
}
ul.matchGame li dl.matchDay dd{
	width: 60%;
	padding: 0 .3em;
}
ul.matchGame p.day{
	font-family: var(--font-en);
	font-weight: 300;
	line-height: .9;
	font-size: 3.5rem;
	color: var(--color-primary);
}
ul.matchGame p.day span.we{
	font-size: 70%;
}
ul.matchGame p.day span.sub{
	font-size: 60%;
	display: block;
}
ul.matchGame p.area{
	font-size: .9rem;
	font-weight: 500;
	margin-bottom: .2rem;
}
ul.matchGame p.vs{
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.2;
}
ul.matchGame p.vs span{
	font-family: var(--font-en);
	font-size: 110%;
	margin-right: .3em;
}
ul.matchBt{
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding: 0 .5em;
	
}
ul.matchBt li{
	width: 48%;
	text-align: center;
}
ul.matchBt li a:link{
	display: block;
	font-size: .9rem;
	background-color: var(--color-red);
	color: var(--color-white);
	padding: .5em .2em;
	position: relative;
}
ul.matchBt li a:link::after {
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
ul.matchBt li.g a:link{
	background-color: var(--color-primary);
}
ul.matchBt li a:visited{
	background-color: var(--color-red);
	color: var(--color-white);
}
ul.matchBt li.g a:visited{
	background-color: var(--color-primary);
}
ul.matchBt li a:hover{
	background-color: var(--color-red);
	color: var(--color-white);
	opacity: .8;
}


.follow_ticket_cv {
    position: fixed;
    bottom: 0;
    z-index: 200;
    background-color: rgb(255 255 255 / 0.95);
    padding: 1rem 0;
    width: 100%;
}
.follow_ticket_cv a {
    width: 40rem;
    height: 5rem;
    margin: 0 auto;
    background: var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size:1.8rem;
    line-height: 1;
    font-weight: 600;
    transition: 0.5s ease-in-out;
	position: relative;
}
.follow_ticket_cv a:visited{
	background: var(--color-red);
	color: var(--color-white);
}
.follow_ticket_cv a:hover{
	background: var(--color-red);
	color: var(--color-white);
	opacity: .8;
}
.follow_ticket_cv a::before {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
	background-image: url(https://www.rugguts.secom.co.jp/assets/images/icon_ticket-white.svg);
	margin-right: .3em;
}


.pop-content {
    padding: 3.2rem 2.4rem 3.2rem 2.4rem;
    width: 600px;
    overflow: hidden;
	background-color: var(--color-white);
}
.pop-content p.tx{
	font-size: .9rem;
}
.pop-content img{
	width: 100%;
	height: auto;
}
.pop-content p.close{
	text-align: center;
	font-family: var(--font-en);
	width: 150px;
	margin: 0 auto;
	padding-top: .5em;
	
}
.pop-content p.close a:link{
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	display: block;
	font-size: 1rem;
	border-radius: 3em;
	padding: .1em;
	transition: 0.5s ease-in-out;
}
.pop-content p.close a:visited{
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}
.pop-content p.close a:hover{
	border: 2px solid var(--color-primary);
	color: var(--color-white);
	background-color:var(--color-primary);
}

.marquee-left {
	overflow: hidden;
}
.marquee-left ul {
	animation: marquee-left 30s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-left ul li {
	list-style: none;
	width: calc(100vw / 5);
}
.marquee-left img {
	display: block;
	width: 100%;
}
.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 30s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	width: calc(100vw / 5);
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}
@keyframes marquee-left {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0%);
	}
}
@media (max-width: 1200px) {
	
	

}
@media (max-width: 1100px) {


}