@charset "UTF-8";
.reggae-one {font-family: "Reggae One", system-ui; font-weight: 400; font-style: normal;}


.contents{background-color: rgb(252, 248, 239);}
.contents *{box-sizing: border-box;}
.contents img{vertical-align: top;}
.contents .date{display: flex; align-items: center; justify-content: center; margin: 1.5em 0; color: rgb(74, 26, 11);}
.contents .date b{margin-right: 1.0em; padding-right: 1.0em; border-right: 2px solid rgb(74, 26, 11)}
.contents .date p em{font-family: "Reggae One", system-ui; font-size: 1.5em; line-height: 1.0;}
.contents nav ul{display: flex; align-items: center; justify-content: center; margin-bottom: 1.0em;}
.contents nav ul li{margin: 0 0.25em;}
.contents nav ul li a{display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 0.25em; padding: 0.5em 1.0em; color: #ffffff; border: 2px solid #ffffff; border-radius: 5.0em; transition: all 0.25s;}
.contents nav ul li a:hover{transform: scale(1.05);}
.contents nav ul li a span{display: inline-block; margin-left: 0.5em; font-family: "Reggae One", system-ui; font-weight: 400;}
.contents nav ul li.beer a{background-color: rgb(198, 40, 40);}
.contents nav ul li.music a{background-color: rgb(255, 179, 0);}
.contents nav ul li.match a{background-color: rgb(230, 81, 0);}
.contents .item-pr a{display: block; width: max-content; margin: 0 auto; padding: 0.25em 0.75em; color: #ffffff; background-image: linear-gradient(135deg, rgb(198, 40, 40) 0%, rgb(230, 81, 0) 100%); border: 3px solid rgb(255, 179, 0); border-radius: 16px; box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.25); transition: all 0.25s;}
.contents .item-pr a p{display: flex; align-items: center; justify-content: center; padding: 0.25em 0.75em;}
.contents .item-pr a p:after{display: inline-block; content: "\f054"; margin-left: 1.0em; font-family: "Font Awesome 6 Free"; font-size: 0.75em; font-weight: 900;}
.contents .item-pr a:hover{transform: scale(1.05);}
.contents .label{display: inline-block; margin-right: 0.5em; padding: 0.25em 0.5em; color: rgb(198, 40, 40);; background-color: #ffffff; border-radius: 5.0em; font-family: "Reggae One", system-ui; font-size: 0.85em; font-weight: 400;}
.contents > section > section{padding: 3.0em 1.0em;}
.contents > section > section.music{margin-top: 3.0em; color: #ffffff;  background-color: rgb(74, 26, 11);}
.contents > section > section.beer{background-color: rgba(255,254,251)}
.contents > section > section.match{background-color: rgba(255,245,230)}

.contents section h1{margin-bottom: 0; text-align: center;}
.contents section h1 span{display: block; font-size: 1.6rem;}
.contents section.music h1 span{color: rgb(255, 179, 0);}
.contents section.beer h1 .fa-beer{color: rgb(255, 179, 0);;}
.contents section.beer h1 span{color: rgb(230, 81, 0);}
.contents section.beer h1 em{color: rgb(138, 52, 18);}
.contents section.match h1 .fa-futbol{color: rgb(239, 108, 0);}
.contents section.match h1 span{color: rgb(230, 81, 0);}
.contents section.match h1 em{color: rgb(198, 40, 40);}
.contents section h1 em{display: inline-block; margin-left: 0.15em; font-family: "Reggae One", system-ui; font-weight: 400;}
.contents section h1 + p{margin: 0 0 1.5em; font-weight: bold; text-align: center;}
.contents section.beer h1 + p{color: rgb(138, 52, 18);}
.contents section.match h1 + p{color: rgb(198, 40, 40);}
.contents .comingsoon{padding: 1.5em 1.0em; background-color: #ffffff; border: 2px dashed rgb(138, 52, 18); border-radius: 10px; text-align: center}

.contents .comingsoon .fa-solid{width: 80px; height: 80px; line-height: 76px; color: #ffffff; background-color: rgb(255, 179, 0); border: 2px solid rgb(138, 52, 18); border-radius: 40px; font-size: 40px; text-align: center;}
.contents .comingsoon .label{margin-top: 1.0em; color: #ffffff; background-color: rgb(198, 40, 40);}
.contents .comingsoon b{display: block; margin: 1.0em 0 0.5em;}

.contents > section > section.music .tab li{padding: 1.0em 0; border: 2px solid rgba(255,255,255,0.25); border-radius: 6px; text-align: center;}
.contents > section > section.music .tab li.active{background-color: rgb(239, 108, 0); border-color: rgb(255, 179, 0);;}

.contents > section > section.music .tab li em{display: block; color: rgb(255, 179, 0); font-family: "Reggae One", system-ui; font-size: 1.25em; line-height: 1.6;}
.contents > section > section.music .tab li.active em{color: #ffffff;}
.contents > section > section.music .tab-content .photo{display: block; margin: 1.0em; text-align: center;}
.contents > section > section.music .tab-content .photo img{display: block; margin: 0 auto; border-radius: 50%; }
.contents > section > section.music .tab-content em, .contents > section > section.match ul li > strong em{color: rgb(255, 179, 0);;  font-family: "Reggae One", system-ui; font-size: 1.25em; line-height: 1.0;}
.contents > section > section.music .tab-content strong{display: block; font-size: 1.5em;}
.contents > section > section.match ul li{display: flex; align-items: stretch; justify-content: space-between; background-color: #ffffff; border: 2px solid rgb(138, 52, 18); border-radius: 10px;}
.contents > section > section.match ul li:not(:first-child){margin-top: 1.0em;}
.contents > section > section.match ul li > strong{display: flex; align-items: center; flex-direction: column; flex-shrink: 0; justify-content: center; position: relative; width: 5.0em; margin-right: 1.0em; color: #ffffff; background-color: rgb(74, 26, 11);}
.contents > section > section.match ul li > strong:after{display: block; content: ""; position: absolute; top: 0; right: -3px; bottom: 0; border-right: 2px dashed rgb(74, 26, 11);}
.contents > section > section.match ul li > strong span{display: block; margin-top: 0.5em;}
.contents > section > section.match ul li .info{display: flex; align-items: center; flex-grow: 1;	 justify-content: space-between; padding: 1.0em; color: rgb(74, 26, 11);;}
.contents > section > section.match ul li .info strong{font-size: 1.5em;}
.contents > section > section.match ul li .info p{margin: 0.5em 0 0;}
.contents > section > section.match ul li .info p:before{display: inline-block; content: "\f145"; margin-right: 0.25em; font-family: "Font Awesome 6 Free"; font-weight: 900;}
.contents > section > section.match ul li .info p b{color: rgb(198, 40, 40);}
.contents > section > section.match ul li .info p b em{font-size: 1.25em;}
.contents > section > section.match ul li .game{display: flex; align-items: center; justify-content: flex-end;}
.contents > section > section.match ul li .game > *{display: block; width: 15.0em; padding: 1.0em; border-radius: 5.0em; font-weight: bold; text-align: center; transition: all 0.25s;}
.contents > section > section.match ul li .game a{color: #ffffff; background-color: rgb(230, 81, 0);}
.contents > section > section.match ul li .game a:hover{background-color: rgb(198, 40, 40);}
.contents > section > section.match ul li .game a:after{display: inline-block; content: "\f35d"; margin-left: 0.25em; font-family: "Font Awesome 6 Free"; font-weight: 900;}
.contents > section > section.match ul li .game span{color: #ffffff; background-color: #aaaaaa;}
.contents .item-footer{position: relative; margin-top: 3.0em; padding: 2.5em 1.5em 1.5em; color: #ffffff; background-color: rgb(74, 26, 11); text-align: center;}
.contents .item-footer strong{display: block; color: rgb(255, 179, 0); font-size: 1.25em;}
.contents .item-footer ul{display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%;}
.contents .item-footer ul li{width: 20px; height: 20px; clip-path: polygon(52% 100%, 100% 0%, 0% 0%);}
.contents .item-footer ul li:nth-of-type(1n){background-color: rgb(198, 40, 40);}
.contents .item-footer ul li:nth-of-type(2n){background-color: rgb(239, 108, 0);}
.contents .item-footer ul li:nth-of-type(3n){background-color: rgb(224, 224, 224);}

@media (max-width: 834px) {
	.contents .date{font-size: 0.75em;}
	.contents .date b{margin-right: 0.5em; padding-right: 0; border-right: none; border-bottom: 2px solid rgb(74, 26, 11)}
	.contents .date p em{font-size: 1.25em;}
	.contents nav{padding-top: 1.0em; border-top: 2px dashed rgb(74, 26, 11); border-bottom: 2px dashed rgb(74, 26, 11);}
	.contents .tab-sm .tab-content:not(.active){display: none}
	.contents > section > section.music .tab{display: flex; align-items: center;}
	.contents > section > section.music .tab li{width: calc(25% - 0.6em);}
	.contents > section > section.music .tab li:not(:nth-of-type(4n+1)){margin-left: 0.84em;}
	.contents > section > section.music .tab-content{text-align: center;}
	.contents > section > section.music .tab-content .photo{margin: 2.0em 2.0em 1.0em;}
	.contents > section > section.match ul li .info{flex-wrap: wrap;}
	.contents > section > section.match ul li .game > *{margin-top: 0.75em; padding: 0.5em 1.0em;}
}

@media (min-width: 835px) {
	.contents .date{font-size: 1.5em;}
	.contents nav ul li a{font-size: 1.75em;}
	.contents .item-pr a{font-size: 1.5em;}
	.contents section h1{font-size: 3.0em;;}
	.contents > section > section.music .field{display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center;}
	.contents > section > section.music .tab{display: none;}
	.contents > section > section.music .tab-content{display: block; width: 23.584%; padding: 1.0em 0; border: 2px dashed rgba(245,184,51,0.6); border-radius: 10px;}
	.contents > section > section.music .tab li:not(:nth-of-type(4n+1)), .contents > section > section.music .tab-content:not(:nth-of-type(4n+1)){margin-left: 1.886%;}
	.contents > section > section.match ul li > strong{width: 8.0em;;}
}
	
@media (min-width: 960px) {
}

@media (min-width: 1060px) {
}

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

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