@charset "UTF-8";

html{
  font-size: 62.5%;
}

body{
  background-color: #f4f4ef;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
}

.wrapper {
  width: 100%;
  margin-right: 100%;
  color: #20232A;
  background-color: #f4f4ef;
  margin: 0 auto;
  }


  /* -------------------header-------------------- */

.header{
  background-color: #f4f4ef;
  height: 670px;
}

h1{
  text-align: center;
  padding-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  height: auto;
}

h1 img{
  width: 500px;
  height: auto;

}

.gnav{
  line-height: 26px ;
  margin-top: 20px;
  background-color: #20232A;
  }

  .gnav ul{
    width: 1240px;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    }
    
    .gnav li a{
      font-family: "Shippori Mincho B1", serif;
      width: 207px;
      height: 58px;
      display: block;
      font-weight: bold;
      text-align: center;
      color: #f4f4ef;
      background-color: #20232A;
      line-height: 15px;
      font-size: 2.6rem;
      text-decoration: none;
      padding: 18px 0 0 20px;
      border: solid 3px #20232A;
      box-sizing: border-box;
    }

    .gnav li a:hover{
     color: #A01D26;
     background-color: #f4f4ef;
     background-image: url(../images/nikukyuu.png);
     background-repeat: no-repeat;
     background-size: 20%;
     background-position: left 3px center;
    }

    .about .gnav li:nth-child(1) span a ,
    .member .gnav li:nth-child(2) span a ,
    .work .gnav li:nth-child(3) span a ,
    .item .gnav li:nth-child(4) span a ,
    .link .gnav li:nth-child(5) span a ,
    .contact .gnav li:nth-child(6) span a{
      background-image: url(../images/nikukyuu.png);
      background-repeat: no-repeat;
      background-size: 20%;
      background-position: left 3px center;
    }

    .first{
      width: 1240px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-left: auto;
      margin-right: auto;
    }

    .box{
      width: 920px;
      height: auto;
      margin-top: 10px;

    }
    
    .slider{
      min-width: 100%;
      height: auto;
    }

    element.style{
      width: 920px;
      height: auto;
    }

    .side{
      width: 250px;
      margin-top: 30px;
    }

    .button{
      display: flex;
      justify-content: center;
    }
    
    .button p a{
      display: block;
      font-size: 2.2rem;
      line-height: 30px;
      color: #A01D26;
      background-color: #F4F4EF;
      border: solid 4px #20232A;
      border-radius: 30px 30px 0 0;
      height: 105px;
      width: 160px;
      text-decoration: none;
      text-align: justify;
      padding: 30px 45px 30px 45px;
      box-shadow: 5px 3px 10px rgba(0, 0, 0, 0.4);
    }

    .access {
      display: flex;
      justify-content: center;
    }

    .access p a{
      display: block;
      font-size: 3rem;
      line-height: 30px;
      color: #F4F4EF;
      background-color: #A01D26;
      border: solid 4px #20232A;
      border-radius: 0 0 30px 30px;
      height: 105px;
      width: 160px;
      text-decoration: none;
      text-align: justify;
      padding: 30px 45px 30px 45px;
      box-shadow: 5px 3px 10px rgba(0, 0, 0, 0.4);
    }

.side span{
font-size: 3.5rem;
font-weight: bold;
line-height: 60px;
text-align: justify;
}

.nav{
  display: none;
}

/* ------------TOP-------------- */
    .top{
      width: 1240px;
      height: auto;
      display: flex;
      justify-content: space-between;
      margin-left: auto;
      margin-right: auto;
    }

.news{
  width: 600px;
  text-align: center;
  display: block;
}

.news h2{
  width: 150px;
  display: flex;
  justify-content: center;
font-size: 3rem;
background-color: #A01D26;
border: solid 2px #A01D26;
border-radius: 10px 10px 0 0;
color: #f4f4ef;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

.update{
  font-size: 2rem;
  border: solid 10px #20232A;
  width: 600px;
  height: 520px;
  padding: 10px 20px;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

.update div{
  display: flex;
  justify-content: flex-start;
  line-height: 40px;
  padding: 10px 0;
  margin-bottom: 5px;
  border-bottom: dotted 1px #20232A;
}

.update dt{
  width: 9em;
}

.update dd{
  width: calc(100% - 9em);
  text-align: justify;
}

.twitter{
  text-align: center;
}

.timeline{
  width: 600px;
  height: 520px;
  border: solid 10px #20232A;
  box-sizing: border-box;
  overflow-y: auto;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

.twitter h2{
  width: 250px;
  display: flex;
  justify-content: center;
font-size: 3rem;
background-color: #A01D26;
border: solid 2px #A01D26;
border-radius: 10px 10px 0 0;
color: #f4f4ef;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  }

  /* -------------------footer-------------------- */

footer{
  color: #F4F4EF;
  background-color: #20232A;
  height: 200px;
  margin-top: 50px;
}

.return{
  display: flex;
  justify-content: center;
  font-size: 2rem;
  background-color: #F4F4EF;
}

.return a{
  width: 200px;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: #A01D26;
  border: solid 2px #A01D26;
  border-radius: 10px 10px 0 0;
}

.foot{
  width: 1240px;
  margin-left: auto;
  margin-right: auto; 
  background-image: url(../images/logo_lage.png);
  background-repeat: no-repeat;
  background-size: 80px;
  background-position: top 10px left;
  background-color: #20232A;
}

footer h2{
  font-family: "Shippori Mincho B1", serif;
  font-weight: 100;
font-size: 5rem;
line-height: 2px;
padding-top: 45px;
padding-left: 80px;
order: 1;
display: flex;
}

footer .fnav{
  margin-top: -25px;

  }

  footer .fnav ol{
    display: flex;
    justify-content: flex-end;
    }
    
    footer .fnav li a{
      width: 130px;
      height: 15px;
    display: block;
    text-align: center;
    color: #ACBEBE;
    line-height: 20px;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 23px 0 10px 0;
    border-bottom: solid 3px #ACBEBE;
    }

    footer .fnav li a:hover{
      color: #A04D26;
      border-bottom: solid 3px #A01D26;
    }

    .flink p{
      display: flex;
      justify-content: flex-end;
      }

      .flink p a{
      font-size: 1.5rem;
      line-height: 10px;
      text-decoration: none;
      color: #ACBEBE;
      font-size: 1.5rem;
      text-decoration: none;
      padding: 23px 0 10px 0;
      border-bottom: solid 3px #ACBEBE;
    }

    .flink p a:hover{
      color: #A04D26;
      border-bottom: solid 3px #A04D26;
    }

    .ficon{
      width: 120px;
      display: flex;
      justify-content: space-between;
      margin-top: -25px;
      margin-left: 15px;
    }

    .small p{
      text-align: center;
    }

    .fonertune{
      display: none;
    }
    
  /* -------------------共通-------------------- */
.about .header,
.member .header,
.work .header,
.item .header,
.link .header,
.contact .header,
.danninn .header{
  height: 200px;
}

  .about article,
.member article,
.work article,
.item article,
.link article,
.contact article,
.danninn article{
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding: 50px 0;
  }

  .member article h2,
  .work article h2,
  .item article h2,
  .link article h2,
  .contact article h2,
  .danninn article h2{
    font-family: "Shippori Mincho B1", serif;
    font-weight: 100;
    width: 500px;
    display: flex;
    justify-content: center;
  font-size: 5rem;
  margin-left: auto;
  margin-right: auto; 
  }

  
  .member article .titel,
  .work article .titel,
  .item article .titel,
  .link article .titel,
  .danninn article .titel,
  .contact article .titel{
    background-image:url(../images/nikukyuu4.png);
    background-repeat: repeat-x;
    background-size:3%;
    height: 50px;
    border-bottom: solid 4px #20232A;
    margin-top: 30px;
    background-position: top;
    padding-bottom: 8px;
  }


  /* -------------------about-------------------- */

  .about section{
    width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }

  .about article h2{
    width: 500px;
    display: flex;
    justify-content: center;
  font-size: 3rem;
  background-color: #A01D26;
  border: solid 2px #A01D26;
  border-radius: 10px 10px 0 0;
  color: #f4f4ef;
  text-shadow: 5px 5px  rgba(0, 0, 0, 0.6);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  }

  .about article div{
    width: 100%;
    border: solid 10px #20232A;
    box-sizing: border-box;
    font-size: 2rem;
    text-align: justify;
    line-height: 32px;
    padding: 10px 0 0 10px;
    background-color: #F4F4EF;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  }

  .about article img{
    width: 30%;
    height: auto;
    border: 1px solid #ACBEBE;
    float: right;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
    margin-right: 10px;
    margin-left: 10px;
  }

  /* -------------------member-------------------- */
  
  .member article{
    height: auto;
  }

  .member article p{
    display: flex;
    justify-content: center;
    width: 1240px;
    font-size: 2rem;
    margin-left: auto;
    margin-right: auto; 
    line-height: 30px;
  }

  .member h3{
    width: 200px;
    text-align: center;
  font-size: 4rem;
  margin: 0 auto;
  background-color: #A01D26;
  border: solid 2px #A01D26;
  border-radius: 0 0 10px 10px;
  color: #f4f4ef;
  text-shadow: 5px 5px  rgba(0, 0, 0, 0.6);
  }

  .acter ol,
  .creator ol{
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    margin-top: 30px;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto; 
  }

  .member .acter ol li,
  .member .creator ol li{
   width: 390px;
   height: 410px;
   margin: 5px 30px;
   background-color: #A01D26;
   border: solid 2px #A01D26;
   border-radius: 20px 20px 20px 20px;
  }

  .member .acter ol li a,
  .member .creator ol li a{
    display: block;
    font-size: 2.5rem;
    text-align: center;
    text-decoration: none;
    color: #F4F4EF;
    padding: 15px 0 0 0;
    line-height: 47px;
  }

  .member .acter ol li a img,
  .member .creator ol li a img{
    background-color: #fff;
    width: 90%;
    height: auto;
    border-radius: 20px 20px 20px 20px;
  }

  /* -------------------work-------------------- */
  
  .work article{
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .work article p{
    display: flex;
    justify-content: center;
    font-size: 2rem;
    margin-left: auto;
    margin-right: auto; 
    line-height: 30px;
  }

  .work .midashi{
    width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }
  .work h3{
    width: 650px;
    text-align: center;
  font-size: 4rem;
  background-color: #A01D26;
  border: solid 2px #A01D26;
  border-radius: 0 0 10px 10px;
  line-height: 50px;
  color: #f4f4ef;
  text-shadow: 5px 5px  rgba(0, 0, 0, 0.6);
  }

.work .youtube p{
  padding-right: 18px;
  padding-left: 18px;
}

.work .youtube  div {
  width: 100%;
  margin-left: auto;
  margin-right: auto;

}

.work .youtube  div p {
  width: 610px;
  color: #F4F4EF; 
  font-size: 2rem;
  font-weight: bold;
  background-color: #A01D26;
  border-radius: 10px 10px 10px 10px;
  line-height: 21px;
  padding-top: 5px;
}

  .work .movie{
    width: 1240px;
    height: auto;
    line-height: 40px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    font-size: 2rem;
    padding-bottom: 30px;
  }

  .work iframe{
    float: right;
    border-left: 3px dotted #20232A;
    padding-left: 20px;
  }

  .work .plan{
display: block;
width: 1240px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;

  }

.work h4{
  font-size: 2.5rem;
}

.work h4 span{
  font-size: 1.5rem;
}

.work .plan p{
  display: flex;
  justify-content: flex-start;
  width: 1240px;
  line-height: 40px;
  text-align: justify;
}

.work .channel{
  display: flex;
  justify-content: center;
  align-content: center;
  font-weight: bold;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.work .channel p a{
  
  width: 300px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #F4F4EF;
  background-color: #A01D26;
  border: solid 2px #20232A;
  border-radius: 30px 30px 30px 30px;
  padding-top: 5px;
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.7);
}

   
  /* -------------------item-------------------- */
  .item article{
    height: auto;
  }

  .item article p{
    display: block;
    font-size: 2rem;
    margin-left: auto;
    margin-right: auto; 
    line-height: 30px;
  }

  .announcement{
    width: 1000px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-left: auto;
    margin-right: auto; 
  }

  .item .store{
    font-weight: bold;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .item .store p {
    font-size: 3rem;
    width: 302px;
    line-height: 35px;
    text-align: center;
  }

  .item .store p img{
    padding-right: 5px;
  }
  
  .item .store p a{
    font-size: 3rem;
    width: 200px;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    color: #F4F4EF;
    background-color: #A01D26;
    border: solid 2px #20232A;
    border-radius: 30px 30px 30px 30px;
    padding: 10px 15px;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.7);
  }

  .item h3{
    width: 530px;
    text-align: center;
    font-size: 4rem;
    background-color: #A01D26;
    border: solid 2px #A01D26;
    border-radius: 0 0 10px 10px;
    line-height: 50px;
    color: #f4f4ef;
    text-shadow: 5px 5px  rgba(0, 0, 0, 0.6);
    margin-left: auto;
    margin-right: auto;
  }

  .item .midashi{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  .item article p{
    display: block;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

.item .content{
  margin: auto;
  padding: 20px;
  width: 1000px;
}

.badge{
  width: 1000px;
  height: 256px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.badge a{
  border: 2px solid #ACBEBE;
  padding: -20px 0;
  margin: 0 10px;
  box-shadow: 0px 5px 4px 0px rgba(32, 35, 42, 0.5);
}

.item dl{
  width: 1000px;
font-size: 3rem;
font-weight: bold;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}

.item .content img{
  border: 2px solid #ACBEBE;
  margin-left: 50px;
  box-shadow: 0px 5px 4px 0px rgba(32, 35, 42, 0.5);
}


.item dd{
  font-size: 2.5rem;
  font-weight: normal;
  margin-top: 20px;
  font-weight: bold;
}

.item dt{
  font-size: 2rem;
  font-weight: normal;
  margin-top: 10px;
}

.slick-prev:before, .slick-next:before{
color: #20232A;
font-size: 40px;
}


 /* -------------------link-------------------- */
 .link article{
  height: auto;
  }
  
.link article p{
  text-align: center;
  display: block;
  font-size: 2rem;
  margin-left: auto;
  margin-right: auto; 
  line-height: 30px;
}

.link article .kaoicon img{
  border: 1px solid #20232A;
  border-radius: 30px 30px 30px 30px;
  box-shadow: 0px 5px 4px 0px rgba(32, 35, 42, 0.5);
}

.link .X,
.image .X,
.contact .X{
  width: 200px;
  display: flex;
  align-content: center;
}

.link .X a,
.image .X a,
.contact .X a{
  font-size: 2.5rem;
  width: 200px;
display: block;
color: #fff;
border: 3px solid #000000;
border-radius: 30px 30px 30px 30px;
text-decoration: none;
text-align: start;
background-color: #000;
box-shadow: 0px 5px 4px 0px rgba(32, 35, 42, 0.5);
}

.link .X a span,
.image .X a span,
.contact .X a span{
  line-height: 49px;
}

.image .youtube{
  width: 200px;
  display: flex;
  align-content: flex-start;
}

.link .youtube a,
.image .youtube a{
  font-size: 2.8rem;
  width: 200px;
display: block;
border: 3px solid #f00;
border-radius: 30px 30px 30px 30px;
text-decoration: none;
text-align: start;
background-color: #f00;
color: #fff;
box-shadow: 0px 5px 4px 0px rgba(32, 35, 42, 0.5);
}

.link .youtube a span,
.image .youtube a span{
  line-height: 50px;
  margin-left: 3px;
}


.link .ather,
.image .ather{
  width: 200px;
  display: flex;
  align-content: center;
}

.link .ather a,
.image .ather a{
  font-size: 2.8rem;
  width: 200px;
display: block;
border: 3px solid rgb(0, 0, 0);
border-radius: 30px 30px 30px 30px;
text-decoration: none;
text-align: start;
background-color: rgb(255, 255, 255);
color: #000;
box-shadow: 0px 5px 4px 0px rgba(32, 35, 42, 0.5);
}

.link .ather a span,
.image .ather a span{
  line-height: 50px;
  margin-left: 10px;
}


.link .suzuri{
  width: 200px;
  display: flex;
  align-content: center;
}

.link .suzuri a{
  font-size: 2.8rem;
  width: 200px;
display: block;
border: 3px solid rgb(0, 0, 0);
border-radius: 30px 30px 30px 30px;
text-decoration: none;
text-align: start;
background-color: rgb(255, 255, 255);
color: #000;
box-shadow: 0px 5px 4px 0px rgba(32, 35, 42, 0.5);
}

.link .suzuri a span{
  line-height: 50px;
  margin-left: 15px;
}

.link .suzuri img{
  background-color: rgb(255, 255, 255);
margin-left: 3px;
border-radius: 20px 20px 20px 20px;
}

.link article h3{
  font-size: 3rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link article h3::before,
.link article h3::after {
    content: "";
    width: 95px;
    height: 30px;
    /* background-color: #20232A; */
    background-image: url(../images/nikukyuu.png);
    background-repeat: no-repeat;
    background-size: 35%;
  }
  
.link article h3::after{
background-position: left 10px top 0px;

}
  
.link article h3::before{
background-position: right 10px top 0px;

}


.link .linkbutton{
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  width: 420px;
  height: auto;
  flex-wrap: wrap;
  margin-top: 20px;
}

.link .kata{
  width: 700px;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  padding-bottom: 25px;
  border-bottom: #ACBEBE dotted 5px;
}


/* -------------------contact-------------------- */

.contact article{
  width: 100%;
  height: auto;
}

.contact article p{
  text-align: center;
  display: block;
  font-size: 2rem;
  margin-left: auto;
  margin-right: auto; 
  line-height: 30px;
}

.contact p span{
  font-size: 2rem;
  color: #f00;
}

.info{
  width: 90%;
  margin-left: auto;
  margin-right: auto; 
  margin-top: 30px;
}

table{
  width: calc(100% - 20px);
margin-left: 50px;
}

table th{
width: 180px;
font-size: 1.6rem;
text-align: right;
padding: 10px 20px;
}

table td{
  font-size: 1.6rem;
  padding: 10px 20px;

}

table tr:last-child{
text-align: center;
}

input{
font-size: 1.6rem;
padding: 5px;
}

form span{
color: #fff;
font-size: 1rem;
margin-left: 10px;
background-color: #f00;
width: calc(2.5em + 10px);
margin-right: 5px;
padding: 0 2px;
}

.which{
  color: #fff;
  font-size: 1rem;
  margin-left: 10px;
  background-color: #3a3;
  width: calc(2.5em + 10px);
  margin-right: 5px;
  padding: 0 2px;
  }

td label{
  margin-right: 20px;
}

input[type="text"]{
width: 70%;
}

label {display:inline-block;}

input#mail{
margin-bottom: 10px;
}

select{
font-size: 1.6rem;
padding: 5px;
}

textarea{
font-size: 1.6rem;
width: 90%;
padding: 5px;
box-sizing: border-box;
resize: none;
vertical-align: bottom;
}

.send input{
  width: 200px;
  margin-bottom: 60px;
}

.contact .kata{
  display: flex;
  justify-content: center;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

.contact .kata h4{
  font-size: 2.5rem;
}

.contact .kaoicon img{
  background-color: #A01D26;
  border: solid 5px #A01D26;
  border-radius: 20px 20px 20px 20px;
  margin-right: 20px;
}
.rute{
  display: flex;
  justify-content: space-evenly;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.contact .rute p span{
  color: #fff;
  font-size: 2.5rem;
}

/* -------------------profile-------------------- */
.danninn article{
  width: 100%;
  height: auto;
}

.danninn .profile{
  width: 80%;
}

.danninn article p{
  text-align: center;
  display: block;
  font-size: 2rem;
  margin-left: auto;
  margin-right: auto; 
  line-height: 30px;
}

.detail{
  font-size: 1.5rem;
  width: 620px;
}

.detail div{
  display: flex;
  justify-content: flex-start;
  line-height: 30px;
  border-bottom: dotted 1px #20232A;
}

.detail dt{
  width: 8em;
}

.detail dd{
  width: calc(100% - 8em);
  text-align: justify;
}

.detail dd span{
  display: flex;
  justify-content: center;
  align-items: center;
}

.detail dd span::before,
.detail dd span::after {
    content: "";
    width: 150px;
    height: 5px;
    background-color: #20232A;
  }

  .detail dd span::before {
    margin-right: 10px;
  }

  .detail dd span::after {
    margin-left: 10px;
  }

.profile{
  display: flex;
  justify-content: space-evenly;
  align-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

.image{
  width: 300px;
  height: 430px;
  display: flex;
  justify-content: center;
  align-content: space-between;
  flex-wrap: wrap;
}

.kao img{
  border: 1px solid #20232A;
  background-color: rgb(255, 255, 255);
margin-left: 3px;
border-radius: 20px 20px 20px 20px;
}

.image .linkbutton{
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-content: space-evenly;
  flex-wrap: wrap;
}

.detail .achievements{
  width: 620px;
  height: 200px;
  overflow: auto;
  padding: 5px 0px;
  border-bottom: none;
}
.vs{
  background-color: #ACBEBE;
  height: auto;
}

.danninn h3{
  width: 240px;
  text-align: center;
font-size: 3rem;
margin: 0 auto;
background-color: #A01D26;
border: solid 2px #A01D26;
border-radius: 0 0 10px 10px;
color: #f4f4ef;
text-shadow: 5px 5px  rgba(0, 0, 0, 0.6);
}

.voice{
  margin-top: 30px;
  border-bottom: solid 4px #20232A;
}

.sanple{
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  height: auto;
  width: 80%;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-bottom: 30px;
}

.sanple div{
  width: 330px;
  margin-top: 20px;
}

.danninn article .sanple p{
font-size: 10rem;
text-align: center;
padding-top: 60px;
padding-bottom: 30px;
}

audio{
  display: block;
}

.sanple dt{
  font-size: 2rem;
  font-weight: bold;
  margin-left: 20px;
}





/* --------max-width:1199px～768px--------- */

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

  /* ----------header---------- */
  
  .wrapper{
    width: 100%;
  }
  
  .header{
    width: 100%;
    height: auto;
  }
  
  h1{
    width: 280px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .gnav ul{
    display: none;
  }
  
  .first{
    flex-wrap: wrap;
    width: 100%;
    margin-top: -25px;
  }
  
  .box{
    width: 100%;
    height: auto;
    margin-bottom: -25px;
  }

  element.style{
width: 100%;

  }

  .side .button p a,
  .side .access p a{
    font-size: 2rem;
    line-height: 27px;
    width: 200px;
    padding: 5px 0px 0px 5px;
    height: 80px;
    text-align: center;
  }
  
  .side{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0px;

  }
  
  .side .button p a{
    border-radius: 30px 0 0 30px;
  }
  
  .side .access p a{
    border-radius: 0 30px 30px 0;
  }
  
  .side .button p a span,
  .side .access p a span{
    font-size: 2.2rem;
    line-height: 20px;
  }
  
  /* ここから下がハンバーガーメニューに関するCSS */
      
  .phonetop{
    display: flex;
    width: 100%;
    height: 80px;
    border-bottom: solid 5px #20232A;
    background-color: #ACBEBE;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
  }
  
  .nav{
    display: block;
  }
  
    /* チェックボックスを非表示にする */
    .drawer_hidden {
      display: none;
    }
    
    /* ハンバーガーアイコンの設置スペース */
    .drawer_open {
      display: flex;
      height: 60px;
      width: 60px;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 100;/* 重なり順を一番上にする */
      cursor: pointer;
    }
    
    /* ハンバーガーメニューのアイコン */
    .drawer_open span,
    .drawer_open span:before,
    .drawer_open span:after {
      content: '';
      display: block;
      height: 3px;
      width: 25px;
      border-radius: 3px;
      background: #333;
      transition: 0.5s;
      position: absolute;
    }
    
    /* 三本線の一番上の棒の位置調整 */
    .drawer_open span:before {
      bottom: 8px;
    }
    
    /* 三本線の一番下の棒の位置調整 */
    .drawer_open span:after {
      top: 8px;
    }
    
    /* アイコンがクリックされたら真ん中の線を透明にする */
    #drawer_input:checked ~ .drawer_open span {
      background: rgba(255, 255, 255, 0);
    }
    
    /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
    #drawer_input:checked ~ .drawer_open span::before {
      bottom: 0;
      transform: rotate(45deg);
      background: #f4f4ef;
    }
    
    #drawer_input:checked ~ .drawer_open span::after {
      top: 0;
      transform: rotate(-45deg);
      background: #f4f4ef;
    }
      
    /* メニューのデザイン*/
    .nav_content {
      width: 50%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 100%; /* メニューを画面の外に飛ばす */
      z-index: 99;
      background: rgba(32, 35, 42, 1);
      transition: .5s;
    }
    
    /* メニュー黒ポチを消す */
    .nav_list {
      list-style: none;
      margin-left: 25px;
    }
  
    .nav_list .nav_item{
      width: 100%;
      height: 60px;
      border-bottom: solid 1px #F4F4EF;
      padding-right: 20px;
    }
  
    .nav_list .nav_item a{
      width: 100%;
      display: block;
      font-family: "Shippori Mincho B1", serif;
      color: #fff;
      line-height: 60px;
      font-size: 3rem;
      text-decoration: none;
        height: 60px;
    }
  
    
    .nav_list .nav_item a span{
      background-color: #20232A;
      padding-right: 16px;
      padding-left: 50px;
      background-image: url(../images/nikukyuu6.png);
      background-repeat: no-repeat;
      background-size: 18%;
      background-position: left 7px top 5px;
      
    }

    .nav_list .nav_item:first-child{
      border-bottom:none;
    }
    .nav_list .nav_item a img{
      margin-top: 5px;
      width: 250px;
      height: auto;
      background-color: #f4f4ef;
      border: solid 1px #F4F4EF;
      border-radius: 30px 30px 30px 30px;
      padding-right: 30px;
  }
  
      .about .nav_content li:nth-child(2),
      .member .nav_content li:nth-child(3) ,
      .work .nav_content li:nth-child(4) ,
      .item .nav_content li:nth-child(5) ,
      .link .nav_content li:nth-child(6) ,
      .contact .nav_content li:nth-child(7) {
        background-image: url(../images/nikukyuu5.png);
        background-repeat: repeat-x;
        background-size: 5%;
        background-position: right 1px center;
        width: 100%;
      }

      
.about .nav_content li:nth-child(2) a,
.member .nav_content li:nth-child(3)  a,
.work .nav_content li:nth-child(4)  a,
.item .nav_content li:nth-child(5)  a,
.link .nav_content li:nth-child(6)  a,
.contact .nav_content li:nth-child(7)  a{
  color: rgb(255, 92, 127);
    }
    
    /* アイコンがクリックされたらメニューを表示 */
    #drawer_input:checked ~ .nav_content {
      left: 50%;/* メニューを画面に入れる */}
  
  /* ----------TOP---------- */
  
  article{
    width: 100%;
  }

  .top{
    width: 100%;
    height: 650px;
    flex-wrap: wrap;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .update,
  .twitter,
  .timeline{
    width: 80%;
    height: 300px;
    font-size: 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  .update div{
    line-height: 20px;
    padding: 10px 0;
    margin-bottom: 5px;
    border-bottom: dotted 1px #20232A;
  }
  
  .update{
    border: solid 10px #20232A;
    width: 80%;
    height: 300px;
    padding: 10px 3px;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #fff;
  }
  
  .update div{
    display: flex;
    justify-content: flex-start;
    line-height: 20px;
    padding: 5px 0;
    margin-bottom: 5px;
    border-bottom: dotted 1px #20232A;
  }
  
  .update dt{
    width: 9em;
  }
  
  .update dd{
    width: calc(100% - 9em);
    text-align: justify;
  }
  
  
  .twitter{
    margin-top: 40px;
  }
  
  .news{
    width: 80%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .news h2,
  .twitter h2{
    width: 200px;
    text-align: center;
    font-size: 2rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* -------footer---------- */
  
  footer{
    width: 100%;
    height: 300px;
    flex-wrap: wrap;
  }
  
  .return{
    display: none;
  }
  .fonertune {
    display: block;
    padding: 6px 40px;
  }
  
  .fonertune a{
    width: 80px;
    height: 80px;
    display: block;
    text-decoration: none;
    color: #f4f4ef;
    font-size: 1.5rem;
    text-align: center;
    background-color: #A01D26;
    border-radius: 40px 40px 40px 40px;
    border: solid 1px #A01D26;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    line-height: 36px;
  }
  
  
  .foot{
    width: 100%;
    background-size: 40px;
    background-position: top 10px left;
  }
  
  .foot h2{
    font-size: 4rem;
    padding-top: 28px;
    padding-left: 44px;
    text-align: center;
  }
  
  footer .fnav{
    width: 100%;
    margin-top: 10px;
    }
  
    footer .fnav ol{
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      }
      
      footer .fnav li a{
        width: 125px;
        height: 15px;
      display: block;
      text-align: center;
      color: #ACBEBE;
      line-height: 20px;
      font-size: 1.5rem;
      text-decoration: none;
      padding: 23px 0 10px 0;
      border-bottom: solid 3px #ACBEBE;
      }
  
      .ficon{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin: -35px 0 0 0 ;
      }
  
      .ficon img{
        width: 38px;
        height: auto;
        margin-left: 10px;
      }
  
      .flink p{
        justify-content: flex-end;
      }
  
      .small{
        margin-top: 30px;
      }
  
  
  /* -------------------共通-------------------- */
  .about .header,
  .member .header,
  .work .header,
  .item .header,
  .link .header,
  .contact .header,
  .danninn .header{
    height: 100px;
  }
  
    .about article,
  .member article,
  .work article,
  .item article,
  .link article,
  .contact article,
  .danninn article{
    width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
      padding: 0 0;
    }
  
    .member article h2,
    .work article h2,
    .item article h2,
    .link article h2,
    .contact article h2,
    .danninn article h2{
      width: 220px;
    font-size: 3rem;
    }
  
    
    .member article .titel,
    .work article .titel,
    .item article .titel,
    .link article .titel,
    .danninn article .titel,
    .contact article .titel{
      background-image:url(../images/nikukyuu4.png);
      background-repeat: repeat-x;
      background-size: 6%;
      height: 40px;
      border-bottom: solid 4px #20232A;
      margin-top: 30px;
      background-position: top;
      padding-bottom: 25px;
    }
  
  /* -------------------about-------------------- */
  
  .about section{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .about article h2{
    width: 80%;
  font-size: 2.2rem;
  margin-left: auto;
  margin-right: auto;
  }
  
  .about article div{
    width: 100%;
    border: solid 10px #20232A;
    box-sizing: border-box;
    font-size: 1.7rem;
    text-align: justify;
    line-height: 32px;
    padding: 10px 10px 0 10px;
    background-color: #F4F4EF;
  }

  .about article img{
    width: 35%;
    height: auto;
    border: 1px solid #ACBEBE;
    float: right;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
    margin-right: 10px;
    margin-left: 10px;
  }

  
    /* -------------------member-------------------- */
    
  
    .member article p{
      width: 100%;
      font-size: 1.8rem;
      line-height: 22px;
      text-align: justify;
    }
  
    .member h3{
      width: 80%;
    font-size: 3rem;
    text-shadow: 3px 3px  rgba(0, 0, 0, 0.6);
    }
  
    .acter ol,
    .creator ol{
      width: 90%;
      margin-top: 15px;
      justify-content: space-evenly;
    }
  
    .member .acter ol li,
    .member .creator ol li{
     width: 200px;
     height: 220px;
     margin: 10px 10px;
     padding: 5px 10px 15px 10px;
    }
  
    .member .acter ol li a,
    .member .creator ol li a{
      font-size: 1.7rem;
      padding: 7px 0 0 0;
      line-height: 30px;
    }
  
  
    .member .acter ol li a img,
    .member .creator ol li a img{
      background-color: #fff;
      width: 100%;
      height: auto;
      border-radius: 20px 20px 20px 20px;
    }
  
  
    /* -------------------work-------------------- */
    
    .work article p{
      width: 100%;
      font-size: 1.8rem;
      line-height: 25px;
      text-align: justify;
    }
    
  
    .work h3{
      width: 80%;
    font-size: 2.2rem;
    line-height: 30px;
    text-shadow: 3px 3px  rgba(0, 0, 0, 0.6);
    margin-left: auto;
    margin-right: auto;
    }
    
    .work .midashi{
      width: 100%;
    }
  
  .work .youtube{
    width: 100%;
  }

  .work .youtube p{
    padding: 0px 18px;
  }
  
  .work .youtube .text {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin: 10px 0;
  }
  
.work .youtube  div p {
  width: 90%;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 23px;
  padding-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

  .work .movie{
    width: 80%;
    height: auto;
    text-align: justify;
    margin-top: 20px;
    font-size: 1.8rem;
    padding-bottom: 0px;
  }

  .work .youtubemovie{
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;

  }

  .work iframe{
    float: right;
    border-left: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .work h4{
    font-size: 2.2rem;
    width: 375px;
    text-align: start;
    margin-top: 10px;
  }
  
  .work h4 span{
    font-size: 1.8rem;
  }
  .work .plan{
    margin-top: 0px;
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .work .plan p{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    line-height: 30px;
    text-align: justify;
    font-size: 1.8rem;
    padding: 0px 18px;
  }
  
  .work .channel{
    width: 350px;
    width: 80%;
    margin-top: 30px;
    flex-wrap: wrap;
  }
  
  .work .channel p a{
    width: 80%;
    line-height: 50px;
    font-size: 2rem;
    padding-top: 5px;
    margin-top: 10px;
  }
  
     
  
    /* -------------------item-------------------- */
    
    .item article p{
      width: 90%;
      font-size: 1.8rem;
      text-align: center;
    }
    
  
    .announcement{
      width: 100%;
      display: block;
      flex-wrap: nowrap;
      margin-left: auto;
      margin-right: auto;
    }
  
    .item .store{
      font-weight: bold;
      width: 100%;
      margin-left: 0px;
    }
  
    .item .store p {
      font-size: 3rem;
      width: 100%;
      line-height: 35px;
      text-align: center;
      margin-left: 0px;
    }
  
    .item .store p img{
      padding-right: 5px;
    }
    
    .item .store p a{
      font-size: 3rem;
      width: 200px;
      line-height: 48px;
    }
  
    .item h3{
      width: 80%;
      font-size: 2.2rem;
      line-height: 25px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .item .midashi{
      width: 100%;
    }
  

  
  .item .content{
    margin: auto;
    padding: 20px;
    width: 80%;
  }
  
  .badge{
    width: 100%;
    height: auto;
  }
  
  .item dl{
    width: 80%;
  font-size: 2.2rem;
  margin-top: 15px;
  }
  
  .item .content img{
    width: 80%;
    height: auto;
    border: 2px solid #ACBEBE;
    margin-left: 4px;
  }
  
  
  .item dd{
    font-size: 2rem;
    margin-top: 15px;
  }
  
  .item dt{
    font-size: 1.5rem;
  }
  .slick-prev{
    left: -37px;
  }
  
  .slick-next{
    right: -18px;
  }
  
   /* -------------------link-------------------- */
.link article p{
  width: 100%;
  font-size: 2rem;
}

.link article .kaoicon img{
  width: 300px;
  height: auto;
}

.link .X,
.image .X,
.contact .X{
  width: 200px;
  display: flex;
  align-content: center;
}

.link .X a,
.image .X a,
.contact .X a{
  font-size: 2.5rem;
  width: 200px;
}

.link .X a span,
.image .X a span,
.contact .X a span{
  line-height: 50px;
}

.image .youtube{
  width: 200px;
  display: flex;
  align-content: flex-start;
}

.link .youtube a,
.image .youtube a{
  font-size: 2.8rem;
  width: 200px;
}

.link .youtube a span,
.image .youtube a span{
  line-height: 50px;
  margin-left: 3px;
}


.link .ather,
.image .ather{
  width: 200px;
  display: flex;
  align-content: center;
}

.link .ather a,
.image .ather a{
  font-size: 2.8rem;
  width: 200px;
}

.link .ather a span,
.image .ather a span{
  line-height: 50px;
  margin-left: 10px;
}


.link .suzuri{
  width: 200px;
  display: flex;
  align-content: center;
}

.link .suzuri a{
  font-size: 2.8rem;
  width: 200px;
}

.link .suzuri a span{
  line-height: 50px;
  margin-left: 15px;
}

.link .suzuri img{
  background-color: rgb(255, 255, 255);
margin-left: 3px;
border-radius: 20px 20px 20px 20px;
}

.link article h3{
  font-size: 3.5rem;
  width: 320px;
  text-align: center;
}

.link article h3::before,
.link article h3::after {
    width: 35px;
    height: 30px;
    background-size: 90%;
  }
  
.link article h3::after{
background-position: left 2px top 0px;

}
  
.link article h3::before{
background-position: right 2px top 0px;

}

.link article h3 span{
font-size: 2.5rem;
display: flex;
justify-content: center;
}

.link .linkbutton{
  display: flex;
  justify-content: center;
  align-content: space-evenly;
  width: 320px;
  height: 220px;
  flex-wrap: wrap;
}

.link .kata{
  width: 85%;
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
.link .block{
  width: 320px;
  height: 290px;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}


  
  /* -------------------contact-------------------- */
  
  .contact article p{
    width: 80%;
    font-size: 1.8rem;
    line-height: 20px;
    text-align: justify;
  }


.contact p span{
  font-size: 2rem;
  color: #f00;
}
  
  .info{
    width: 80%;
  }
  
  table{
    width: calc(100% - 10px);
  margin-left: 0px;
  }
  
  table th{
    display: block;
  font-size: 1.8rem;
  text-align: left;
  padding: 5px 0px;
  font-weight: bold;
  margin-left: -4px;
  }
  
  table td{
    width: 100%;
    font-size: 1.8rem;
    padding: 5px 0 5px 5px;
  text-align: left;
  display:inline-block;
  }
  
  table tr:last-child{
  text-align: center;
  }
  
  input{
  font-size: 1.8rem;
  padding: 5px;
  }
  
  label {display:inline-block;}
  
  label {
    white-space: nowrap;
    }
  
  form span{
  width: calc(2.5em + 5px);
  margin-right: 5px;
  font-weight: normal;
  }
  
  .which{
    width: 20px;
    margin-right: 5px;
    }
  
  td label{
    margin-right: 20px;
  }
  
  input[type="text"]{
  width: 90%;
  }
  
  input#mail{
  margin-bottom: 10px;
  }
  
  select{
  font-size: 1.8rem;
  padding: 5px;
  }
  
  textarea{
  font-size: 1.8rem;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  resize: none;
  vertical-align: bottom;
  }
  
  .send input{
    width: 140px;
    margin-bottom: 60px;
  }
  
  .contact .kata{
    display: flex;
    justify-content: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }
  
  .contact .kata h4{
    width: 100%;
    font-size: 1.8rem;
    text-align: start;
    margin-left: 30px;
  }
  
  .contact .kaoicon img{
    margin-right: 10px;
  }
  .rute{
    width: 100%;
    flex-wrap: wrap;
  }

  .contact .block{
    width: 50%;
  }
  
  
.contact .rute p span{
  font-size: 2.5rem;
  color: #fff;
  
  }
  
  /* -------------------profile-------------------- */
  
  .danninn article p{
    width: 100%;
  }
  
  .danninn .profile{
    width: 80%;
  }
  
  .detail{
    width: 100%;
    font-size: 1.4rem;
    margin-top: 20px;
  }
  
  .detail div{
    line-height: 30px;
    width: 100%;
  }
  
  .detail dt{
    text-align: right;
  }
  
  
  .profile{
    display: block;
    justify-content: space-between;
    align-content: flex-start;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }
  
  .image{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-content: space-evenly;
  }
  
  .kao img{
    width: 190px;
    height: auto;
    margin: 10px;
  display: block;
  }
  
  .image .linkbutton{
    width: 190px;
    height: 210px;
    flex-wrap: wrap;
    margin: 0px;
  }
  
  .detail .achievements{
    width: 100%;
    height: 200px;
    overflow: auto;
    padding: 5px 0px;
    border-bottom: none;
  }
  .vs{
    background-color: #ACBEBE;
    height: auto;
  }
  
  .danninn h3{
    width: 80%;
  font-size: 2.2rem;
  }
  
  .voice{
    margin-top: 30px;
  }
  
  .sanple{
    justify-content: center;
    height: auto;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
  }
  
  .sanple div{
    width: 350px;
    margin-top: 20px;
  }
  
  audio{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .sanple dt{
    font-size: 1.4rem;
    font-weight: bold;
    margin-left: 45px;
  }
  
  .danninn article .sanple p{
    font-size: 5rem;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 30px;
    }
    
  }

  .profile .point{
  color: #ff0000; 
  border: none;
  }

  

/* --------max-width:767px～375px--------- */

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

/* ----------header---------- */

.wrapper{
  width: 100%;
}

.header{
  width: 100%;
  height: auto;
}

h1{
  width: 250px;
  height: auto;
  margin-left: 37px;
  display: block;
}

.gnav ul{
  display: none;
}

.first{
  flex-wrap: wrap;
    width: 100%;
  margin-top: -25px;
  height: auto;
}

.box{
  width: 100%;
  height: auto;
}

.side .button p a,
.side .access p a{
  font-size: 1.5rem;
  line-height: 20px;
  width: 150px;
  padding: 5px 0px 0px 5px;
  height: 60px;
  text-align: center;
}

.side{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

element.style{
  width: 100%;
  
    }

.side .button p a{
  border-radius: 30px 0 0 30px;
}

.side .access p a{
  border-radius: 0 30px 30px 0;
}

.side .button p a span,
.side .access p a span{
  font-size: 1.5rem;
  line-height: 20px;
}

/* ここから下がハンバーガーメニューに関するCSS */
    
.phonetop{
  display: flex;
    width: 100%;
  height: 80px;
  border-bottom: solid 5px #20232A;
  background-color: #ACBEBE;
}

.nav{
  display: block;
}

  /* チェックボックスを非表示にする */
  .drawer_hidden {
    display: none;
  }
  
  /* ハンバーガーアイコンの設置スペース */
  .drawer_open {
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;/* 重なり順を一番上にする */
    cursor: pointer;
  }
  
  /* ハンバーガーメニューのアイコン */
  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #333;
    transition: 0.5s;
    position: absolute;
  }
  
  /* 三本線の一番上の棒の位置調整 */
  .drawer_open span:before {
    bottom: 8px;
  }
  
  /* 三本線の一番下の棒の位置調整 */
  .drawer_open span:after {
    top: 8px;
  }
  
  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer_input:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
  }
  
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer_input:checked ~ .drawer_open span::before {
    bottom: 0;
    transform: rotate(45deg);
    background: #f4f4ef;
  }
  
  #drawer_input:checked ~ .drawer_open span::after {
    top: 0;
    transform: rotate(-45deg);
    background: #f4f4ef;
  }
    
  /* メニューのデザイン*/
  .nav_content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%; /* メニューを画面の外に飛ばす */
    z-index: 99;
    background: rgba(32, 35, 42, 1);
    transition: .5s;
  }
  
  /* メニュー黒ポチを消す */
  .nav_list {
    list-style: none;
    margin-left: 25px;
  }

  .nav_list .nav_item{
    width: 100%;
    height: 60px;
    border-bottom: solid 1px #F4F4EF;
    padding-right: 20px;
  }

  .nav_list .nav_item:first-child{
    border-bottom:none
  }
  .nav_list .nav_item a{
    width: 100%;
    display: block;
    font-family: "Shippori Mincho B1", serif;
    color: #fff;
    line-height: 60px;
    font-size: 1.7rem;
    text-decoration: none;
    height: 60px;
  }
  
    
  .nav_list .nav_item a span{
    background-color: #20232A;
    padding-right: 16px;
    padding-left: 50px;
    padding-bottom: 10px;
    background-image: url(../images/nikukyuu6.png);
    background-repeat: no-repeat;
    background-size: 18%;
    background-position: left 7px top 0px;
    
  }

  .nav_list .nav_item:first-child{
    border-bottom:none;
  }
  
  .nav_list .nav_item a img{
    margin-top: 5px;
    width: 250px;
    height: auto;
    background-color: #f4f4ef;
    border: solid 1px #F4F4EF;
    border-radius: 30px 30px 30px 30px;
    padding-right: 30px;
}

.about .nav_content li:nth-child(2),
.member .nav_content li:nth-child(3) ,
.work .nav_content li:nth-child(4) ,
.item .nav_content li:nth-child(5) ,
.link .nav_content li:nth-child(6) ,
.contact .nav_content li:nth-child(7) {
  background-image: url(../images/nikukyuu5.png);
  background-repeat: repeat-x;
  background-size: 5%;
  background-position: right 1px center;
  width: 100%;
    }

    
.about .nav_content li:nth-child(2) a,
.member .nav_content li:nth-child(3)  a,
.work .nav_content li:nth-child(4)  a,
.item .nav_content li:nth-child(5)  a,
.link .nav_content li:nth-child(6)  a,
.contact .nav_content li:nth-child(7)  a{
  color: rgb(255, 92, 127);
    }
  
  /* アイコンがクリックされたらメニューを表示 */
  #drawer_input:checked ~ .nav_content {
    left: 0;/* メニューを画面に入れる */}

/* ----------TOP---------- */

article{
  width: 100%;
}

.top{
  width: 100%;
  height: 650px;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
}

.update,
.twitter,
.timeline{
  width: 100%;
  height: 300px;
  font-size: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

.update div{
  line-height: 20px;
  padding: 10px 0;
  margin-bottom: 5px;
  border-bottom: dotted 1px #20232A;
}

.update{
  border: solid 10px #20232A;
  width: 100%;
  height: 300px;
  padding: 10px 3px;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #fff;
}

.update div{
  display: flex;
  justify-content: flex-start;
  line-height: 20px;
  padding: 5px 0;
  margin-bottom: 5px;
  border-bottom: dotted 1px #20232A;
}

.update dt{
  width: 9em;
}

.update dd{
  width: calc(100% - 9em);
  text-align: justify;
}


.twitter{
  width: 100%;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}

.news{
  width: 100%;
  height: 300px;
}

.news h2,
.twitter h2{
  width: 200px;
  text-align: center;
  font-size: 2rem;
  margin-left: auto;
  margin-right: auto;
}


/* -------footer---------- */

footer{
  width: 100%;
  height: 250px;
  flex-wrap: wrap;
}

.return{
  display: none;
}
.fonertune {
  display: block;
  padding: 6px 40px;
}

.fonertune a{
  width: 60px;
  height: 60px;
  display: block;
  text-decoration: none;
  color: #f4f4ef;
  font-size: 1.4rem;
  text-align: center;
  background-color: #A01D26;
  border-radius: 30px 30px 30px 30px;
  border: solid 1px #A01D26;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 1;
  line-height: 20px;
}


.foot{
  width: 100%;
  background-size: 40px;
  background-position: top 10px left;
}

.foot h2{
  font-size: 2rem;
  padding-top: 28px;
  padding-left: 44px;
}

footer .fnav{
  margin-top: 10px;
  }

  footer .fnav ol{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    }
    
    footer .fnav li a{
      width: 125px;
      height: 15px;
    display: block;
    text-align: center;
    color: #ACBEBE;
    line-height: 20px;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 23px 0 10px 0;
    border-bottom: solid 3px #ACBEBE;
    }

    .ficon{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      order: 2;
      margin: -177px 0 0 0 ;
    }

    .ficon img{
      width: 38px;
      height: auto;
      margin-right: 10px;
    }

    .flink p{
      justify-content: center;
    }

    .small{
      margin-top: 165px;
    }


/* -------------------共通-------------------- */
.about .header,
.member .header,
.work .header,
.item .header,
.link .header,
.contact .header,
.danninn .header{
  height: 100px;
}

  .about article,
.member article,
.work article,
.item article,
.link article,
.contact article,
.danninn article{
  width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0px;
    margin-top: 0px;
    padding: 0 0;
  }

  .member article h2,
  .work article h2,
  .item article h2,
  .link article h2,
  .contact article h2,
  .danninn article h2{
    width: 220px;
  font-size: 3rem;
  }

  
  .member article .titel,
  .work article .titel,
  .item article .titel,
  .link article .titel,
  .danninn article .titel,
  .contact article .titel{
    width: 100%;
    background-image:url(../images/nikukyuu4.png);
    background-repeat: repeat-x;
    background-size:15%;
    height: 50px;
    border-bottom: solid 4px #20232A;
    margin-top: 30px;
    background-position: top;
    padding-bottom: 8px;
  }

/* -------------------about-------------------- */

.about section{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.about article h2{
  width: 70%;
font-size: 2.2rem;
margin-left: auto;
margin-right: auto;
}

.about article div{
  width: 80%;
  border: none;
  box-sizing: border-box;
  font-size: 1.5rem;
  text-align: justify;
  line-height: 28px;
  padding: 0 0 0 0;
  margin-left: auto;
  margin-right: auto;
  box-shadow: none;
}

.about article img{
  display: block;
  width: 90%;
  height: auto;
  border: 1px solid #ACBEBE;
  float: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}


  /* -------------------member-------------------- */
  

  .member article p{
    width: 100%;
    font-size: 1.5rem;
    line-height: 22px;
    text-align: justify;
  }

  .member h3{
    width: 100px;
  font-size: 2.2rem;
  text-shadow: 3px 3px  rgba(0, 0, 0, 0.6);
  }

  .acter ol,
  .creator ol{
    width: 100%;
    margin-top: 15px;
    justify-content: space-evenly;
  }

  .member .acter ol li,
  .member .creator ol li{
   width: 150px;
   height: 170px;
   margin: 5px;
  }

  .member .acter ol li a,
  .member .creator ol li a{
    font-size: 1.5rem;
    padding: 7px 0 0 0;
    line-height: 30px;
  }



  /* -------------------work-------------------- */
  
  .work article p{
    width: 80%;
    font-size: 1.5rem;
    line-height: 25px;
    text-align: justify;
  }
  

  .work h3{
    width: 200px;
  font-size: 2.2rem;
  line-height: 30px;
  text-shadow: 3px 3px  rgba(0, 0, 0, 0.6);
  margin-left: auto;
  margin-right: auto;
  }
  
  .work .midashi{
    width: 100%;
  }

.work .youtube p{
  padding-right: 10px;
  padding-left: 10px;
}

.work .youtube  div p {
  width: 80%;
  color: #F4F4EF; 
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 21px;
  padding-top: 5px;
}

  .work .movie{
    width: 350px;
    height: auto;
    text-align: justify;
    margin-top: 20px;
    font-size: 1.5rem;
    padding-bottom: 0px;
  }

  .work iframe{
    float: none;
    border-left: none;
    padding: 0 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }


.work h4{
  font-size: 2rem;
  width: 350px;
  text-align: start;
  margin-top: 10px;
}

.work h4 span{
  font-size: 1.4rem;
}

.work .plan{
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
font-size: 1.4rem;
margin-top: 0px;

}
.work .plan p{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  line-height: 20px;
  text-align: justify;
  font-size: 1.4rem;
}

.work .channel{
  width: 100%;
  margin-top: 30px;
  flex-wrap: wrap;
}

.work .channel p a{
  width: 100%;
  line-height: 50px;
  font-size: 2rem;
  padding-top: 5px;
  margin-top: 10px;
}

   

  /* -------------------item-------------------- */
  
  .item article p{
    width: 80%;
    font-size: 1.5rem;
    text-align: justify;
  }
  

  .announcement{
    flex-wrap: wrap;
  }

  .item .store{
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
  }

  .item .store p {
    font-size: 3rem;
    width: 100%;
    line-height: 35px;
    text-align: center;
  }

  .item .store p img{
    padding-right: 5px;
  }
  
  .item .store p a{
    font-size: 3rem;
    width: 100%;
    line-height: 48px;
  }

  .item h3{
    width: 80%;
    font-size: 2.2rem;
    line-height: 25px;
    margin-left: auto;
    margin-right: auto;
  }

  .item .midashi{
    width: 100%;
  }


.item .content{
  margin: auto;
  padding: 20px;
  width: 76%;
}

.badge{
  width: 100%;
  height: auto;
}

.item dl{
  width: 80%;
font-size: 2.2rem;
margin-top: 15px;
}

.item .content img{
  width: 90%;
  height: auto;
  border: 2px solid #ACBEBE;
  margin-left: 4px;
}


.item dd{
  font-size: 2rem;
  margin-top: 15px;
}

.item dt{
  font-size: 1.5rem;
}
.slick-prev{
  left: -37px;
}

.slick-next{
  right: -18px;
}

 /* -------------------link-------------------- */
 
.link article p{
  width: 80%;
  font-size: 1.5rem;
line-height: 25px;
text-align: justify;
}


.link article .kaoicon img{
  width: 300px;
  height: auto;
}


.link .X,
.image .X,
.contact .X{
width: 150px;
height: 30px;
display: flex;
align-content: center;
}

.link .X a,
.image .X a,
.contact .X a{
font-size: 1.6rem;
width: 150px;
height: 30px;
}

.link .X a img,
.image .X a img,
.contact .X a img{
width: 20%;
height: auto;
}

.link .X a span,
.image .X a span,
.contact .X a span{
line-height: 28px;
margin-left: 9px;
}

.image .youtube{
width: 150px;
display: flex;
align-content: flex-start;
}

.link .youtube a,
.image .youtube a{
font-size: 1.6rem;
width: 150px;
}

.link .youtube a img,
.image .youtube a img{
  width: 20%;
  height: auto;
}

.link .youtube a span,
.image .youtube a span{
  line-height: 28px;
margin-left: 18px;
}


.link .ather,
.image .ather{
width: 150px;
}

.link .ather a,
.image .ather a{
font-size: 1.6rem;
width: 150px;
}

.link .ather a img,
.image .ather a img{
  width: 20%;
  height: auto;
}

.link .ather a span,
.image .ather a span{
  line-height: 28px;
  margin-left: 25px;
}


.link .suzuri{
width: 150px;
}

.link .suzuri a{
font-size: 1.8rem;
width: 150px;
}

.link .suzuri a span{
  line-height: 28px;
  margin-left: 25px;
}

.link .suzuri img{
  width: 20%;
  height: auto;
margin-left: 3px;
}

.link article h3{
font-size: 2rem;
text-align: center;
}

.link article h3::before,
.link article h3::after {
    width: 25px;
    height: 17px;
    background-size: 65%;
  }
  
.link article h3::after{
background-position: left 4px top 0px;

}
  
.link article h3::before{
background-position: right 4px top 0px;

}


.link article h3 span{
  font-size: 1.5rem;
  }

.link article h3 span{
font-size: 1.4rem;
}

.link .linkbutton{
display: flex;
justify-content: flex-start;
align-content: space-between;
width: 150px;
height: 130px;
flex-wrap: wrap;
}

.link .kata{
  width: 100%;
display: flex;
justify-content: space-evenly;
align-content: flex-start;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}

.link .block{
  width: 190px;
  height: 185px;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;}


/* -------------------contact-------------------- */

.contact article p{
  width:80%;
  font-size: 1.5rem;
  line-height: 20px;
  text-align: justify;
}

.contact p span{
  font-size: 1.5rem;
  color: #f00;
}

.info{
  width:80%;
}

table{
  width: calc(100% - 10px);
margin-left: 0px;
}

table th{
  display: block;
  width:80%;
font-size: 1.6rem;
text-align: left;
padding: 5px 0px;
font-weight: bold;
margin-left: -4px;
}

table td{
  width: 100%;
  font-size: 1.4rem;
  padding: 5px 0 5px 5px;
text-align: left;
display:inline-block;
}

table tr:last-child{
text-align: center;
}

input{
font-size: 1.6rem;
padding: 5px;
}

label {display:inline-block;}

label {
  white-space: nowrap;
  }

form span{
width: calc(2.5em + 5px);
margin-right: 5px;
font-weight: normal;
}

.which{
  width: 20px;
  margin-right: 5px;
  }

td label{
  margin-right: 20px;
}

input[type="text"]{
width: 90%;
}

input#mail{
margin-bottom: 10px;
}

select{
font-size: 1.6rem;
padding: 5px;
}

textarea{
font-size: 1.6rem;
width: 100%;
padding: 5px;
box-sizing: border-box;
resize: none;
vertical-align: bottom;
}

.send input{
  width: 140px;
  margin-bottom: 60px;
}

.contact .kata{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

.contact .kata h4{
  font-size: 1.7rem;
}

.contact .kaoicon img{
  margin-right: 10px;
  width: 100%;
}
.rute{
  width: 100%;
  flex-wrap: wrap;

}

.contact .block{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


.contact .rute p span{
font-size: 1.6rem;
color: #fff;

}

/* -------------------profile-------------------- */

.danninn article p{
  text-align: center;
  display: block;
  font-size: 2rem;
  margin-left: auto;
  margin-right: auto; 
  line-height: 30px;
}

.danninn .profile{
  width: 350px;
}

.detail{
  font-size: 1.4rem;
  width: 350px;
  margin-top: 20px;
}

.detail div{
  line-height: 30px;
  width: 350px;
}

.detail dt{
  text-align: right;
}


.profile{
  width: 350px;
  display: block;
  justify-content: space-between;
  align-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

.image{
  width: 350px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-content: space-evenly;
}

.kao img{
  width: 150px;
  height: auto;
  margin: 10px;
display: block;
}

.image .linkbutton{
  width: 150px;
  height: 150px;
  flex-wrap: wrap;
  margin: 10px;
}

.detail .achievements{
  height: 100px;
  overflow: auto;
  padding: 5px 0px;
  border-bottom: none;
}


.detail dd span::before,
.detail dd span::after {
    content: "";
    width: 40px;
    height: 5px;
    background-color: #20232A;
  }

  .detail dd span::before {
    margin-right: 10px;
  }

  .detail dd span::after {
    margin-left: 10px;
  }

.vs{
  background-color: #ACBEBE;
  height: auto;
}

.danninn h3{
  width: 180px;
font-size: 2.2rem;
}

.voice{
  margin-top: 30px;
}

.sanple{
  justify-content: center;
  height: auto;
  width: 350px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.sanple div{
  width: 350px;
  margin-top: 20px;
}

audio{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sanple dt{
  font-size: 1.4rem;
  font-weight: bold;
  margin-left: 45px;
}

.danninn article .sanple p{
  font-size: 5rem;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 30px;
  }
  
}