body {
    font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro', HiraKakuProN, 'Droid Sans', 'メイリオ', Meiryo, sans-serif;
    background-color: #011322;
    margin: 0;
    padding: 0;
    color: #fff;
}

h2 {
    width: 90%;
    margin: 0 auto 1em auto;
}

h3 {
    font-size: 2em;
    width: 70%;
    margin: 0 auto 1em auto;
}
h4{
    margin:0 0 1em 0;
}

img {
    width: 100%;
}
.lity-image img{
    width:auto;
}

a:hover {
    opacity: 0.7;
}

.container {
    width: 100%;
    text-align: center;
    margin: 0 auto;

}

.contents {
    margin: 0 auto;
    width: 100%;
    text-align: center;

}

@media all and (min-width: 640px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }

    h2 {
        width: 80%;
        margin: 0 auto 2em auto;
    }

    h3 {
        width: 70%;
        margin: 0 auto 1em auto;
    }
    h4{
    margin:0 0 1em 0;
    }
}

@media all and (min-width: 1200px) {
    h2 {
        width: 1100px;
        margin: 0 auto 4em auto;
    }

    h3 {
        width: 300px;
        margin: 0 auto 1em auto;
    }
}

/*-------------------ビジュアル---------------------------*/
.visual {
    background-image: url("../img/sp_visual_bg.jpg");
    background-repeat: no-repeat;
    background-position: center, top;
    background-size: cover;
    padding:0 0 2em 0;
}

.viz {
    width: 100%;
    margin: 3em auto 1em auto;
}
.visual ul {
    width: 70%;
    padding: 1em;
    list-style-type: none;
    /*「・」とか消す*/
    display: flex;
    /*こいつで横並び*/
    flex-wrap: wrap;
    /*折り返す*/
    flex-direction: column;
    /*縦横並びを簡単にできる*/
    justify-content: space-between;
    /*均等に並べる*/
    margin: 0 auto;
}

.visual li {
    width: 100%;
    text-align: left;
}
.btn_top_abema{
    margin: 0 0 1em 0;
}
.kochira{
    font-size: 1em;
    margin: 0 auto 1em auto;
    width:80%;
}

@media all and (min-width: 640px) {
    .visual {
        background-image: url("../img/visual_bg.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        padding:0 0 5em 0;
    }
    .viz {
        margin: 2em auto 3em auto;
    }
    .visual ul {
        flex-direction: row;
        width: 50%;
        margin: 0 auto 2em auto;
        padding: 0;
    }

    .visual li {
        width: 44%;
    }
    .btn_top_abema{
        margin: 0;
    }
    .kochira{
        font-size: 1.5em;
        margin: 0 auto 1em auto;
        width:80%;
    }
    .contents {
        width: 100%;
    }
}

@media all and (min-width: 1200px) {
    .viz {
        width: 1200px;
    }
    .visual ul {
        width: 650px;
    }
    .visual li {
        width: 45%;
    }
}

/*-------------------概要---------------------------*/
.gaiyo {
    padding: 1em 0 3em 0;
    background-image: url("../img/gaiyo_bg.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}
.gaiyo_midashi{
    display: none;
}
.sp_gaiyo_midashi{
    display: block;
}
.about{
    width:80%;
}
.about_star{
    width:95%;
}
.gaiyo ul {
    margin: 0;
    padding: 1em;
    list-style-type: none;
    /*「・」とか消す*/
    display: flex;
    /*こいつで横並び*/
    flex-wrap: wrap;
    /*折り返す*/
    flex-direction: column-reverse;
    /*縦横並びを簡単にできる*/
    justify-content: space-between;
    /*均等に並べる*/
    margin: 0 auto;
}

.gaiyo li {
    width: 100%;
    text-align: left;
    margin: 0 0 1em 0;
}
.gaiyo2 ul {
    margin: 0;
    padding: 1em;
    list-style-type: none;
    /*「・」とか消す*/
    display: flex;
    /*こいつで横並び*/
    flex-wrap: wrap;
    /*折り返す*/
    flex-direction: column;
    /*縦横並びを簡単にできる*/
    justify-content: space-between;
    /*均等に並べる*/
    margin: 0 auto;
}

.gaiyo2 li {
    width: 100%;
    text-align: left;
}

@media all and (min-width: 640px) {
    .gaiyo {
        padding: 4em 0 5em 0;
    }
    .gaiyo_midashi{
        display: block;
    }
    .sp_gaiyo_midashi{
        display: none;
    }
    .about{
        width:70%;
    }
    .about_star{
        width:85%;
    }
    .gaiyo ul {
        flex-direction: row;
        width: 90%;
        margin: 0 auto 2em auto;
        padding: 0;
    }

    .gaiyo li {
        width: 48%;
    }
    .gaiyo2 ul {
        flex-direction: row;
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }

    .gaiyo2 li {
        width: 48%;
    }
}

@media all and (min-width: 1200px) {
    .gaiyo ul {
        width: 1200px;
    }
}

/*-------------------放送---------------------------*/

.broad {
    padding: 3em 0 3em 0;
    background-image: url("../img/broad_bg.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

.broad ul {
    margin: 0;
    padding: 1em;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
}

.broad li {
    width: 100%;
    margin: 0 0 1em 0;
}
.broad li:last-child {
    margin: 0 ;
}

.btn_abema {
    display: none;
    width: 100%;
    margin: 0 0 1em 0;
}
.sp_btn_abema {
    display: inline-block;
    width: 100%;
    margin: 0 0 1em 0;
}
.btn_openrec{
    display: none;
}
.sp_btn_openrec{
    display: inline-block;
}

@media all and (min-width: 640px) {
    .broad {
        padding: 5em 0 5em 0;
    }

    .broad ul {
        flex-direction: row;
        width: 70%;
        margin: 0 auto;
        padding: 0;
    }

    .broad li {
        width: 50%;
        margin: 0;
    }

    .broad li:last-child {
        width: 40%;
    }

    .btn_abema {
        display: inline-block;
        width: 100%;
        margin: 0 0 1em 0;
    }
    .sp_btn_abema {
        display: none;
    }
    .btn_openrec{
        display: inline-block;
    }
    .sp_btn_openrec{
        display: none;
    }
}

@media all and (min-width: 1200px) {
    .broad ul {
        width: 900px;
    }
}


/*-------------------出場選手---------------------------*/

.team {
    padding: 0 1em 3em 1em;
    background-image: url("../img/sp_team_bg.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
}
.team_midashi{
    width:100%;
}

.team ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;
}

.team li {
	margin: 0 auto 1em auto;
    width: 50%;
    text-align: center;
    font-size:80%;
    line-height:50%;

}
.coming{
    width: 80%;
}
.player{
    width:2em;
    margin:0 1em 0 0;
    vertical-align:middle;
}
.jikkyo ul{
    margin: 2em 0 0 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;

}
.jikkyo li {
    margin: 0 auto 1em auto;
    width: 50%;
    text-align: center;
    font-size:80%;
    line-height:50%;
}
.jikkyo img{
        width:70%;
        margin:0 0 1em 0;
}
@media all and (min-width: 640px) {
    .team {
    	padding: 4em 0 4em 0;
        background-image: url("../img/team_bg.jpg");
        background-position: bottom;
        background-size: 100%;
    }
    .team_midashi{
        width:40%;
    }
    .team ul {
        flex-direction: row;
        width: 100%;
        margin: 0 auto;
    }

    .team li {
    	margin: 0 0 2em 0;
        width: 50%;
        font-size:80%;
        line-height:50%;
    }
    .player{
    width:5em;
    margin:0 1em 0 0;
    vertical-align:middle;
    }
    .coming{
        margin: 3em 0 0 0;
        width: 40%;
    }
    .jikkyo ul {
        margin: 2em auto 0em auto;
        flex-direction: row;
        width: 50%;
        
    }
    .jikkyo li {
        margin: 0 0 2em 0;
        width: 50%;
        font-size:80%;
        line-height:50%;
        text-align:center;
    }
    .jikkyo img{
        width:10em;
        margin:0 0 1em 0;
    }
}
@media all and (min-width: 800px) {
    .team li {
        width: 25%;
        font-size:90%;
    }
    .jikkyo li {
        width: 50%;
    }
    .jikkyo img{
        width:10em;
    }
}
@media all and (min-width: 1200px) {
    .team_midashi{
        width:100%;
    }
    .team ul {
        width: 1000px;
    }
    .coming{
        width: 500px;
    }
    .jikkyo ul {
        width: 600px;
    }
}

/*-------------------他注意書き---------------------------*/
.attention {
    padding: 3em 0 3em 0;
    background-image: url("../img/sp_attention_bg.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    color: #fff;
    text-align: center;
}

.attention ul {
    margin: 0;
    padding: 1em;
    list-style-type: none;
    /*「・」とか消す*/
    display: flex;
    /*こいつで横並び*/
    flex-wrap: wrap;
    /*折り返す*/
    flex-direction: column;
    /*縦横並びを簡単にできる*/
    justify-content: space-between;
    /*均等に並べる*/
    margin: 0 auto;
}

.attention li {
    width: 100%;
    text-align: center;
    margin: 0 0 2em 0;
}

.koumoku {
    margin: 0 0 3em 0;
    padding: 1em;
}
.taikai{
    margin:0;
    padding: 0;
    text-align:center;
}
.taikai ul{
    list-style-type: none;
     margin: 0;
     padding: 0 1em 0 1em;
     width:90%;
 }
.taikai li{
     width:100%;
    margin: 0;
    text-align:center;
}
.taikai li:nth-child(even){
    margin:0 0 1em 0;
}


@media all and (min-width: 640px) {
    .attention {
        background-image: url("../img/attention_bg.jpg");
    	padding: 5em 0 4em 0;
        background-size: cover;
    }
    .attention ul {
        flex-direction: row;
        width: 80%;
        margin: 0 auto;
        padding: 0;
    }

    .attention li {
        width: 48%;
        margin: 0 0 4em 0;
        text-align:center;
    }
    .taikai ul{
        width:100%;
    }
    .taikai li{
        width:30%;
        margin:0;
        text-align:left;
    }
    .taikai li:nth-child(even){
        width:70%;
        margin: 0;
    }
    .koumoku {
        margin: 0 0 3em 0;
        padding: 0;
    }

}
@media all and (min-width: 1000px) {
    .taikai li{
        width:25%;
    }
     .taikai li:nth-child(even){
        width:75%;
     }
}
@media all and (min-width: 1200px) {
    .taikai ul{
        width:500px;
    }
    .taikai li{
        width:25%;
    }
    .taikai li:nth-child(even){
        width:75%;
    }
}

/*-------------------コピーライト---------------------------*/
.copy {
    color: #fff;
    font-size: 0.8em;
    margin: 0;
    padding: 5em 0 5em 0;
    background-color: #273643;
}

.copy ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
}

.copy li {
    width: 100%;
}

.copy li:last-child {
    margin: 0 0 2em 0;
}

.rage {
    width: 40%;
    margin: 0 0 2em 0;
}

.abema {
    width: 45%;
    margin: 0 0 2em 0;
}

.openrec {
    width: 50%;
    padding: 0.5em 0 0 0;
}

@media all and (min-width: 640px) {
    .copy ul {
        flex-direction: row;
        width: 30%;
        margin: 0 auto 1em auto;
    }

    .copy li {
        width: 45%;
        text-align:left;
    }

    .rage {
        width: 10%;
        margin: 0 0 4em 0;
    }

    .abema {
        width: 85%;
        margin: 0;
    }

    .openrec {
        width: 100%;
        padding: 0.5em 0 0 0;
    }
}


/*-------------------結果---------------------------*/
.kekka {
    padding: 2em 0 3em 0;
}
.kekka_midashi{
    width:100%;
}
.kekka ul {
    width:90%;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
}
.kekka li {
    width: 100%;
}
.kekka_sum li{
        width: 100%;
        margin: 0 0 0.5em 0;
}
.kekka_bun{
    width:90%;
    margin:2em auto 2em auto;
}
.kekka_btn{
    width:90%;
    margin:2em auto 0 auto;
}
.kekka_btn a{
    font-size:0.9em;
    color: #000;
    font-weight: 800;
    padding:0.5em 1em 0.5em 1em;
    background-color: #cebd81;
    border-radius: 10em 10em 10em 10em;
    display: inline-block;
}
@media all and (min-width: 640px) {
    .kekka {
        padding: 4em 0 3em 0;
    }
    .kekka ul {
        flex-direction: row;
        width: 70%;
        margin: 0 auto;
    }
    .kekka_midashi{
        width:40%;
    }
    .kekka li {
        width: 47%;
        text-align:left;
    }
    .kekka_sum li{
        width: 24%;
        margin: 0 0 0.5em 0;
    }
    .kekka_btn a{
        font-size:1em;
        padding:0.5em 2em 0.5em 2em;
    }
}
@media all and (min-width: 1200px) {
    .kekka_midashi{
        width:100%;
    }
    .kekka ul {
        width:1000px;
    }
}