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

/*
Theme Name: xforceone
Template: habakiri
*/

/*---------------------------------------------
all
---------------------------------------------*/
a                 { overflow: hidden; }
a:link            { color: #fff; text-decoration: underline; }
a:visited         { color: #fff; text-decoration: underline; }
a:hover, a:active { color: #fff; text-decoration: none; }

img { vertical-align: bottom; transition: all 0.2s;}
a img:hover { transform: scale(1.05, 1.05);} 

html { background-color: #0a0a0a; font-size: 100%;}

body { background-color: #0a0a0a; transition: 1.0s; width: 100%; text-align: center; font-size: 1em; line-height: 1.5em; margin: 0 auto; color: #fff; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}

/*---------------------------------------------
index
---------------------------------------------*/
header { max-width: 1000px; margin: 0 auto; position: relative; z-index: 100; margin-bottom: -128px;}
header h1 { margin: 0; }
header h1 img { width: 20%;}

#mainvisualpc { width: 100%; text-align: center;}
#mainvisualpc .swiper-slide img { width: 100%;}

#mainvisualsp { display: none;}

#mainvisualpc a img { transition: unset;} 
#mainvisualsp a img { transition: unset;} 
#mainvisualpc a img:hover { transform: none;} 
#mainvisualsp a img:hover { transform: none;} 

nav { font-family: 'Roboto Condensed', sans-serif; font-size: 1.2em;}
nav ul { display: flex; justify-content: center; align-items: center; padding: 20px 0 0 0; margin-bottom: 0;}
nav ul li { padding: 0 20px;}
nav ul li a                 { overflow: hidden; }
nav ul li a:link            { color: #fff; text-decoration: none; }
nav ul li a:visited         { color: #fff; text-decoration: none; }
nav ul li a:hover, nav ul li a:active { color: #ca0915; text-decoration: none; }

main#top { background: url("images/bg.png") no-repeat center top; background-size: cover; padding: 15% 0% 8% 0%; margin-top: -7%; z-index: 100; position: relative;}

article.news { max-width: 1000px; margin: 0 auto;}
article.news h2 { margin-bottom: 50px;}
article.news h2 img { width: 155px;}
article.news ul { list-style: none;}
article.news ul li { float: left; width: 30%; margin: 0 1.6%; height: 320px;}
article.news ul li dl { text-align: left;}
article.news ul li dl dt { margin-bottom: 20px;}
article.news ul li dl dt img { width: 100%;}
article.news ul li dl dd { margin-bottom: 10px;}

p.more { font-family: 'Roboto Condensed', sans-serif; font-size: 1.5em;}

section.banner { max-width: 1000px; margin: 0 auto; padding: 8% 0%;}
section.banner ul { display: flex; list-style: none; justify-content: space-between; align-items: center; flex-wrap: wrap;}
section.banner ul li { margin: 0 0 30px; width: 48%;}
section.banner ul li img { width: 100%;}


footer {font-family: 'Roboto Condensed', sans-serif; font-size: 1.2em; background: url("images/footerbg.jpg") no-repeat center top; background-size: cover; padding: 8% 0;}
footer ul { display: flex; list-style: none; justify-content: center; align-items: center; max-width: 1000px; margin: 0 auto;}
footer ul li { margin: 0 2%;}
footer ul li img { width: 75px;}
footer h4 { color: #fff; margin-bottom: 50px; font-size: 1.5em; font-weight: normal;}
footer p { color: #fff; margin-top: 50px;}


/*---event------------------------------------------*/
main#event { background: url("images/bg_event.jpg") no-repeat center top; background-size: cover; padding: 15% 0% 8% 0%;}
main#event h2 { margin-bottom: 50px;}
main#event h2 img { width: 170px;}

main#event ul { max-width: 1000px; margin: 0 auto; text-align: left; list-style: none;}
main#event ul li { margin-bottom: 5px;}
main#event ul li dl { display: flex; justify-content: space-between;}
main#event ul li dl dt { width: 19.5%; background-color: #0a0a0a; padding: 2%;}
main#event ul li dl dd { width: 80%; background-color: rgba(0,0,0,0.5); padding: 2%;}


/*---about------------------------------------------*/
main#about { background: url("images/bg_about.jpg") no-repeat center top; background-size: cover; padding: 15% 0% 8% 0%;}
main#about h2 { margin-bottom: 50px;}
main#about h2 img { width: 359px;}
main#about h3 { font-size: 100%; line-height: 3em; padding-bottom: 15%;}


/*---news------------------------------------------*/
main#news { background: url("images/bg_all.jpg") repeat center top; padding: 15% 0% 8% 0%;}
main#news h2 { margin-bottom: 50px;}
main#news h2 img { width: 155px;}

main.archive-news .archive-block { max-width: 1000px; margin: 0 auto;}
main.archive-news  ul li { margin-bottom: 40px; list-style: none;}
main.archive-news  ul li a { text-decoration: none;}
main.archive-news  ul li dl { display: flex; justify-content: space-between; flex-wrap: wrap;}
main.archive-news  ul li dl dt { width: 30%;}
main.archive-news  ul li dl dd { width: 68%; text-align: left;}
main.archive-news  ul li dl dd h3 { display: inline-block; color: #fff; background: #ca0915; margin-top: 0; }
.wp-pagenavi { margin-top: 100px; }
.wp-pagenavi a, .wp-pagenavi span { border: none; text-decoration: none; font-size: 2rem; }

main.single-news .single-block { max-width: 1000px; margin: 0 auto;}
main.single-news h3 { text-align: left;}
main.single-news h3 span { color: #fff; background: #ca0915; }
main.single-news .day { text-align: left;}
main.single-news .icatch img { max-width: 100%; margin-bottom: 40px; }
main.single-news .desc { text-align: left;}
main.single-news .btn-back { margin: 40px 0 0; }


/*---ticket------------------------------------------*/
main#ticket { background: url("images/bg_all.jpg") repeat center top; padding: 15% 0% 8% 0%;}
main#ticket h2 { margin-bottom: 50px;}
main#ticket h2 img { width: 185px;}

main#ticket .ticket-block { max-width: 1000px; margin: 0 auto;}
main#ticket .ticket-block ul { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 60px;}
main#ticket .ticket-block ul li { list-style: none; margin-bottom: 40px;}
main#ticket .ticket-block ul li:nth-of-type(1),main#ticket .ticket-block ul li:nth-of-type(2) { width: 48%; }
main#ticket .ticket-block ul li:nth-of-type(3),main#ticket .ticket-block ul li:nth-of-type(4),main#ticket .ticket-block ul li:nth-of-type(5) { width: 30%; }
main#ticket .ticket-block .line img { max-width: 240px; margin-bottom: 10px;}
main#ticket .ticket-block .line p { font-weight: bold;}
main#ticket .ticket-block .notes { text-align: left; border-top: solid 1px #fff; padding: 50px 0 0; margin-top: 80px;}


/*---versus------------------------------------------*/
main#versus { background: url("images/bg_all.jpg") repeat center top; padding: 15% 0% 8% 0%;}
main#versus h2 { margin-bottom: 50px;}
main#versus .versus-block h2 img { width: 212px;}
main#versus .tournament-block h2 img { width: 370px;}

main#versus .versus-block { max-width: 1000px; margin: 0 auto 80px;}
main#versus .versus-block ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
main#versus .versus-block ul li { list-style: none; width: 48%; margin-bottom: 40px; }

main#versus .tournament-block { max-width: 1000px; margin: 0 auto 80px;}
main#versus .tournament-block ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
main#versus .tournament-block ul li { list-style: none; width: 48%; margin-bottom: 40px; }


/*---rules------------------------------------------*/
main#rules { background: url("images/bg_all.jpg") repeat center top; padding: 15% 0% 8% 0%;}
main#rules h2 { margin-bottom: 50px;}
main#rules h2 img { width: 172px;}

main#rules .page-link { display: flex; justify-content: center; margin-bottom: 80px;}
main#rules .page-link li { display: inline-block; border: solid 1px #fff; margin: 0 10px; min-width: 150px;}
main#rules .page-link li a { display: inline-block; text-decoration: none; padding: 20px;} 

main#rules .rule-block { max-width: 1000px; margin: 0 auto;}
main#rules .rule-block .ttl { font-size: 1.8rem; font-weight: bold; margin-bottom: 40px;}
main#rules .rule-block h3 { text-align: left; color: #ca0915; font-size: 1.6rem; font-weight: bold; margin: 100px 0 40px;}
main#rules .rule-block h3:nth-of-type(1) { margin-top: 0;}
main#rules .rule-block h4 { text-align: left; text-decoration: underline;}
main#rules .rule-block p { text-align: left;}
main#rules .rule-block .text01 { font-size: 1.4rem; font-weight: bold; margin-bottom: 20px;}
main#rules .rule-block .box01 { margin-bottom: 60px;}
main#rules .rule-block .box01 ul li { text-align: left; list-style: none;}
main#rules .rule-block .box01 > ul > li { margin-bottom: 10px;}
main#rules .rule-block .box01 > ul > li ul { margin: 10px 0 10px 0;}
main#rules .rule-block .box01 > ul > li li { margin-bottom: 10px;}

main#rules .kick-block { margin-top: 100px; padding-top: 100px; border-top: solid 2px #fff;}



/*---artist------------------------------------------*/
main#artist { background: url("images/bg_all.jpg") repeat center top; padding: 15% 0% 8% 0%;}
main#artist h2 { margin-bottom: 50px;}
main#artist h2 img { width: 191px;}

main#artist .artist-block { max-width: 1000px; margin: 0 auto;}
main#artist .artist-block ul { display: flex; justify-content: center; flex-wrap: wrap;}
main#artist .artist-block ul li { display: flex; align-items: start; justify-content: center; flex-wrap: wrap; list-style: none; width: 24%; padding: 0 3% 50px 0;}
main#artist .artist-block ul li .name { font-weight: bold;  padding-top: 10px;}



/*---fighters------------------------------------------*/
main#fighters { background: url("images/bg_all.jpg") repeat center top; padding: 15% 0% 8% 0%;}
main#fighters h2 { margin-bottom: 50px;}
main#fighters h2 img { width: 191px;}

main#fighters .fighters-block { max-width: 1000px; margin: 0 auto;}
main#fighters .fighters-block ul { display: flex; justify-content: center; flex-wrap: wrap;}
main#fighters .fighters-block ul li { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; list-style: none; width: 24%; padding: 0 3% 50px 0;}
main#fighters .fighters-block ul li .name { font-weight: bold;  padding-top: 10px;}




/*---------------------------------------------
SP
---------------------------------------------*/
@media screen and (max-width: 999px) {

body { background-color: #0a0a0a; transition: 1.0s; width: 100%;}

header { padding: 30px 0; position: static; margin-bottom: 0px;}
header h1 img { width: 40%;}

#mainvisualpc { display: none;}
#mainvisualsp { display: block;}

main#top { background: url("images/bgsp.png") no-repeat center top; background-size: cover; padding: 20% 0% 50px 0%; margin-top: -7.5%; z-index: 100; position: relative;}

article.news {}
article.news h2 { margin-bottom: 50px;}
article.news h2 img { width: 100px;}
article.news ul { list-style: none;}
article.news ul li { float: none; width: 88%; margin: 0 auto 50px; height: auto;}
article.news ul li dl { text-align: left;}
article.news ul li dl dt { margin-bottom: 20px;}
article.news ul li dl dt img { width: 100%;}
article.news ul li dl dd { margin-bottom: 10px;}

section.banner { padding: 30px 0 0 0}
section.banner ul { display: block; list-style: none; justify-content: center;}
section.banner ul li { margin: 0 auto 30px; width: 88%;}

footer h4 { margin-bottom: 30px; font-size: 1.5em; font-weight: normal;}
footer p { margin-top: 30px;}


/*---event---*/
main#event { background: url("images/bgsp_event.jpg") no-repeat center top; background-size: cover; padding: 15% 0% 8% 0%;}
main#event h2 { margin-bottom: 50px;}
main#event h2 img { width: 120px;}

main#event ul { width: 88%; margin: 0 auto; text-align: left; list-style: none;}
main#event ul li { margin-bottom: 5px;}
main#event ul li dl { display: block;}
main#event ul li dl dt { width: 100%; background-color: #0a0a0a; padding: 4%;}
main#event ul li dl dd { width: 100%; background-color: rgba(0,0,0,0.5); padding: 4%;}


/*---about---*/
main#about { background: url("images/bgsp_about.jpg") no-repeat center top; background-size: cover; padding: 15% 0% 8% 0%;}
main#about h2 { margin-bottom: 50px;}
main#about h2 img { width: 250px;}
main#about h3 { line-height: 3em; padding-bottom: 15%;; width: 88%; margin: 0 auto; text-align: left;}
main#about h3 br { display: none;}


/*---news------------------------------------------*/
main#news { background: url("images/bgsp_all.jpg") repeat center top; background-size: 100% auto; padding: 15% 0% 8% 0%;}
main#news h2 { margin-bottom: 50px;}
main#news h2 img { width: 115px;}

main.archive-news .archive-block { padding: 0 20px;}
main.archive-news  ul li dl dt { width: 100%;}
main.archive-news  ul li dl dd { width: 100%;}
main.archive-news  ul li dl dd h3 { font-size: 1.2rem; margin-top: 10px; }

main.single-news .single-block { padding: 0 20px;}
main.single-news .single-block h3 { font-size: 1.3rem; }


/*---ticket------------------------------------------*/
main#ticket { background: url("images/bgsp_all.jpg") repeat center top; background-size: 100% auto; padding: 15% 0% 8% 0%;}
main#ticket h2 { margin-bottom: 50px;}
main#ticket h2 img { width: 130px;}

main#ticket .ticket-block { max-width: 88%; }


/*---versus------------------------------------------*/
main#versus{ background: url("images/bgsp_all.jpg") repeat center top; background-size: 100% auto; padding: 15% 0% 8% 0%;}
main#versus .versus-block h2 img { width: 152px;}
main#versus .tournament-block h2 img { width: 250px;}

main#versus .versus-block { max-width: 88%; margin-bottom: 40px; }
main#versus .versus-block ul li { width: 100%; margin-bottom: 20px; }

main#versus .versus-block { max-width: 88%; padding: 0 10px; }

main#versus .tournament-block { padding: 0 10px; }
main#versus .tournament-block { max-width: 88%; margin-bottom: 40px; }
main#versus .tournament-block ul li { width: 100%; margin-bottom: 20px; }

/*---rules------------------------------------------*/
main#rules{ background: url("images/bgsp_all.jpg") repeat center top; background-size: 100% auto; padding: 15% 0% 8% 0%;}
main#rules h2 img { width: 125px;}

main#rules .rule-block { max-width: 88%;}
main#rules .rule-block .ttl { font-size: 1.4rem; margin-bottom: 30px;}
main#rules .rule-block h3 { font-size: 1.2rem; margin: 60px 0 20px;}
main#rules .rule-block h4 { font-size: 1.1rem;}
main#rules .rule-block .text01 { font-size: 1.2rem;}

main#rules .kick-block { margin-top: 60px; padding-top: 60px;}


/*---artist------------------------------------------*/
main#artist{ background: url("images/bgsp_all.jpg") repeat center top; background-size: 100% auto; padding: 15% 0% 8% 0%;}
main#artist h2 img { width: 140px;}

main#artist .artist-block { max-width: 88%;}
main#artist .artist-block ul { justify-content: space-between;}
main#artist .artist-block ul li { width: 47%; padding: 0 0 30px 0;}


/*---fighters------------------------------------------*/
main#fighters{ background: url("images/bgsp_all.jpg") repeat center top; background-size: 100% auto; padding: 15% 0% 8% 0%;}
main#fighters h2 img { width: 140px;}

main#fighters .fighters-block { max-width: 88%;}
main#fighters .fighters-block ul { justify-content: space-between;}
main#fighters .fighters-block ul li { width: 47%; padding: 0 0 30px 0;}



}

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

/*---ticket------------------------------------------*/
main#ticket .ticket-block { padding: 0 20px; }
main#ticket .ticket-block ul { justify-content: center;}
main#ticket .ticket-block ul li:nth-of-type(1),main#ticket .ticket-block ul li:nth-of-type(2) { width: 100%; }
main#ticket .ticket-block ul li:nth-of-type(3),main#ticket .ticket-block ul li:nth-of-type(4),main#ticket .ticket-block ul li:nth-of-type(5) { width: 70%; }
main#ticket .ticket-block .notes { padding: 40px 0 0; margin-top: 40px;}

}


/*---------------------------------------------
indexスライドの動き
---------------------------------------------*/
.zoom-1 img {
      width: 100%;
      height: auto;
      animation: animationZoom1 20s ease-in-out forwards;
    }
.zoom-2 img {
      width: 100%;
      height: auto;
      animation: animationZoom2 20s ease-in-out infinite;
    }
.zoom {
      overflow: hidden;
    }

    @keyframes animationZoom1 {
      100% { transform:scale(1.1)} 
    }
    @keyframes animationZoom2 {
      50% { transform:scale(1.1)} 
    }