@charset "UTF-8";
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.contents div {
    padding: 0;
}
br.pc {
    display: none;
}
.contents {
    width: 100%;
    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.contents img {
    max-width: 100%;
    height: auto;
}
.contents h1,
.contents h2 {
    font-weight: bold;
}
.contents h1 {
    display: none;
}
.contents h2 {
    background-color: #229af9 !important;
    margin-bottom: 20px !important;
    color: #fff;
    /*文字色*/
    padding: 10px;
    border-bottom: solid 6px #a4e0ff;
    font-size: 1.5em;
}
.orange{
  color:#f37404;
  font-weight: bold;
}
.contents .header {
    background-color: #ffffff;
    text-align: center;
}
.contents .header .header-innner .header_sp {
    display: block;
    width: 100%;
}
.contents .header .header-innner .header_sp img {
    width: 100%;
    height: auto;
}
.contents .header .header-innner .header_pc {
    display: none;
}
.contents .nav {
    background-color: #00ca6e;
}
.contents .nav nav {
    background-color: #2acef6;
    color: white;
    width: 100%;
    padding: 0;
    font-size: 1.2em;
    font-weight: bold;
}
.contents .nav nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    /* Safari */
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 !important;
    list-style-type: none;
}
.contents .nav nav ul li {
    width: 50%;
    text-align: center;
    padding: 5px;
}
.contents .nav nav a.no-link {
    pointer-events: none;
}
.contents .nav nav ul li {
    border-bottom: solid 2px #ffffff;
}
.contents .nav nav ul li:nth-child(1),
.nav nav ul li:nth-child(3) {
    border-right: solid 2px #ffffff;
}
.contents .nav nav ul li img {
    max-width: 50% !important;
}
.contents .nav nav a {
    display: block;
    border-radius: 4px;
    padding: 3px;
    color: white;
    text-decoration: none;
    text-align: center;
}
.contents .nav nav li a:link,
.nav nav li a:visited {
    color: white;
}
.contents .nav nav li a:active,
.nav nav li a:hover {
    background-color: #fff;
    text-decoration: none;
    color: #2acef6 !important;
}
.wrapper .Main-contents {
    background-color: #ffffff;
    padding-bottom: 10px;
}

.wrapper .Main-contents .Main {
    margin: 20px 0;
}
#player { position: absolute !important; }
#player iframe { background: initial; }

.Main .Main1,
.Main .Main2,
.Main .Main3,
.Main .Main4,
.Main .Main5 {
    background-color: #ffffff;
    margin-bottom: 10px;
    padding:20px 10px 0 10px;
}
.Main .Main1 .Main1_innner,
.Main .Main2 .Main2_innner,
.Main .Main3 .Main3_innner,
.Main .Main4 .Main4_innner,
.Main .Main5 .Main5_innner,
.aside1 .aside1_innner,
.aside2 .aside2_innner,
.aside3 .aside3_innner {
    margin: 0 10px !important;
}
.Main1 p {
    font-size: 1.2em;
    color: #033054;
    padding-left: 10px 0 10px 0;
    margin-bottom: 0;
}
.Main1 .ttl {
    background: #f7ba01;
    color: #fff !important;
    font-weight: bold;
    padding: 20px !important;
    margin: 20px;
}
.Main2 .txt {
    font-size: 1.2em;
    color: #033471;
    margin: 10px;
}
.Main2 .ttl {
    background: #2acef6;
    color: #fff !important;
    font-weight: bold;
    padding: 20px !important;
    margin: 10px;
    font-size: 1.2em;
}
.Main2 h3{
    width:80%;
    margin: 0 auto;
}
.Main2 .nama h4{
  font-size: 1.4em;
  background:#25b06c;
  margin-bottom: 10px;
  color: #fff;
  padding:5px;
}
.Main2 .nettou h4{
  font-size: 1.4em;
  background:#f37404;
  margin-bottom: 10px;
  color: #fff;
  padding:5px;
}
.Main2 .program{
  padding:20px; 
  margin-bottom: 20px;
} 
.Main2 .program p{
  font-size:1.2em;
  margin-bottom: 20px;
}
.Main2 .nama{
  border: solid 4px #25b06c;
}
.Main2 .nettou{
  border: solid 4px #f37404;
}
.Main2 .caution{
  font-size: 0.9em !important;
}
.Main2 .program .l-st{
  margin-bottom:0 !important;
} 
.Main2 .program .main2-r{
  text-align: center;
}
.Main3 img {
    max-width: 90%;
    margin: 10px auto;
    border:solid 1px #d4d4d5;
}
.Main3 .caster-out {
    margin: 10px 0 0 0;
}
.Main3 .caster-img {
    text-align: center;
    color: #033471;
    font-size: 1.1em;
    width:70%;
    margin:0 auto;
}
.Main3 .caster-img p{
  margin:0 0 5px;
}
.Main3 .caster-comment {
    font-size: 0.9em;
    width: 90%;
}
.aside .aside1,
.aside .aside2,
.aside .aside3,
.aside .aside4 {
    background-color: #ffffff !important;
}
.aside .aside2 .aside2_innner .twitter_innner {
    width: 90%;
}
.aside .aside2 .aside2_innner {
    text-align: center;
}
.aside .aside2 .aside2_innner .twitter_ttl {
    padding: 10px !important;
    width: 80%;
}
.aside .aside1 .ttl {
    background: #1da1f3;
    color: #fff;
    padding: 10px 0 !important;
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
}
.aside .aside1 .twitter_innner {
    border: solid 2px #1da1f3 !important;
}
.aside .aside1 .aside1_innner {
    width: 90%;
    margin: 0 auto !important;
}
.aside {
    margin-bottom: 40px;
}
.aside .aside2 {
    margin:40px auto;
}
.aside .aside2 .bn {
    width: 80%;
    margin: 20px auto;
    margin-top: 20px;
}
/* ########### 800px以上 ########### */
@media (min-width: 800px) {
    .contents .nav nav ul li {
        padding: 5px;
    }
    .contents .nav nav ul li {
        width: 25%;
    }
    .contents .nav nav ul li img {
        max-width: 100% !important;
    }
    .contents .nav nav a {
        padding: 8px 24px;
    }
    .nav nav ul li:nth-child(2),
    .nav nav ul li:nth-child(3) {
        border-right: solid 2px #ffffff;
    }
    .aside .aside2 .bn {
        width: 30%;
    }
}
/* ########### 700px以上 ########### */
@media (min-width: 700px) {
    .contents .header .header-innner .header_sp {
        display: none;
    }
    .contents .header .header-innner .header_pc {
        display: block;
    }
    br.sp {
        display: none;
    }
    br.pc {
        display: block;
    }
  .contents h2 {
      margin-bottom: 40px !important;
  }
    .Main .Main1,
    .Main .Main2,
    .Main .Main3,
    .Main .Main4,
    .Main .Main5 {
        margin-bottom: 20px;
    }
  .Main .Main1{
    padding:10px 10px 0 10px;
   }
    .Main1 .Main1_innner p {
        text-align: left;
        padding-left: 5px;
    }
  .Main1 .Main1_innner .freetext{
    margin-top: 40px !important;
  }
    .Main2 .natsu-i {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .Main2 .natsu-i .logo {
        width: 100%;
        text-align: center;
    }
    .Main2 .program {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
  .Main2 .program .main2-l{
        width:35%;
    } 
  .Main2 .program .main2-r{
        width:65%;
    } 
    .Main2 .ttl {
        margin: 0 10px 10px 10px;
        text-align: center;
    }
    .Main2 .natsu-i .txt {
        width: 0%;
    }
    .Main3 .caster-out {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: flex-start;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      -o-flex-wrap: wrap;
      flex-wrap: wrap;
    }
.Main3 .caster-out::after{
  content: '';
        width: 33%;
}
  
    .Main3 .caster-out .caster-img {
        width: 33%;
    }
    .Main3 .caster-out .caster-comment {
        width: 62%;
    }
    .Main3 .caster-img {
      display: block;
    margin:0;
    }
    .aside .aside2 p {
        text-align: center;
        font-size: 1.2em;
    }
    .aside .aside2 {
        margin-bottom: 0 !important;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-wrap: wrap;
       margin:20px auto;
    }
    .aside .aside2 .bn {
        width: 48%;
    }
    .aside .aside1,
    .aside .aside2,
    .aside .aside3,
    .aside .aside4 {
        padding: 0 !important;
    }
    .aside .aside1 .aside1_innner {
        width: 80%;
    }
}
/* ########### 1200px以上 ########### */
@media (min-width: 1200px) {
    .contents .header .header-innner {
        background-color: #ffffff;
    }
    .contents .header .header-innner img {
        text-align: center;
        margin: 0 auto;
    }
    .wrapper .Main-contents {
        width: 100%;
        display: -moz-flex;
        display: -o-flex;
        display: -ms-flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 15px;
    }
    .wrapper .Main-contents .Main {
        width: calc(80% - 45px);
        padding: 30px 0 !important;
    }
    .wrapper .Main-contents .aside {
        width: 20%;
        margin: 0 15px 0 30px;
        padding: 60px 0 0 !important;
    }
    .Main .Main1,
    .Main .Main2,
    .Main .Main4,
    .Main .Main5 {
        margin-bottom: 30px;
    }
    .Main1 .ttl {
        margin: 20px;
    }
    .Main2 .ttl {
        margin: 20px;
    }
    .Main2 .natsu-i {
        margin: 20px 20px 0 20px;
    }
    .aside .aside1 .aside1_innner {
        width: 100%;
    }
    .aside .aside2 .bn {
        width: 100%;
    }
    .footernav {
        margin-top: 0 !important;
    }
}

/* 2022追加開発CSS */
.livenav ul {
    display: table;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    text-align: center;
}

.livenav ul li {
    display: block;
    min-width: 50px;
}

.livenav ul li div {
    border: 3px solid #229af9;
    margin: 10px;
}

@media (min-width: 701px) {
    .livenav ul li a {
        display: block;
        width: 100%;
        padding: 10px 0;
        text-decoration: none;
        color: rgb(91, 91, 91);
        font-weight: bold;
    }

    #tyuukei .stream .logo {
        width: 80%;
    }

    #tyuukei .stream .txt {
        width: 20%;
    }

    .stream {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

@media (max-width: 700px) {
    .livenav ul li a {
        display: block;
        width: 100%;
        padding: 10px 0;
        text-decoration: none;
        color: rgb(91, 91, 91);
        font-weight: bold;
    }

    #tyuukei .stream .logo {
        width: 100%;
    }

    #tyuukei .stream .txt {
        width: 100%;
    }
    .stream {
        display: block;
        align-items: center;
    }
}

@media (max-width: 1200px) {
    .aside .aside2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
       width:80%;
    }
}

@media (max-width: 700px) {
    .aside .aside2 {
        display: block !important;
    }
}


.livenav ul li a:before {
    content: url(/khb/yakyu/images/link_right_pink.svg);
    display: inline-block;
    width: 20px;
    height: auto;
    margin-right: 10px;
    position: relative;
    top: 3px;
    left: 0;
}

.freetext p {
    margin: 20px 0;
    font-size: 1.2em;
    border: solid 3px #427502;
    text-align: left;
    padding:10px;
   box-shadow: 10px 10px 0 #012916;
}