@media screen and (max-width: 640px) {


/* common
-------------------------------------------------------------------- */
body {
  font-size: 12px;
}

#wrapper {
  min-width: 100%;
  overflow: hidden;
}

dd {
    display: block;
    margin-inline-start: 5px;
}



/* header footer
-------------------------------------------------------------------- */
#headTopWrap {
  height: auto;
}

#headLeft h1 img {
  width: 60%;
}

#headLeft p#spLink,
ul#headRight {
  display: none;
}

#fixFooter {
  background-color: transparent;
}

div#fixTopics {
  display: none;
}

p#toTop a {
  background: url(/common/img/foot/btn_pagetop.png) no-repeat right top;
  background-color: #0cc61d;
  padding: 16px 30px 0 10px;
  bottom: 0;
  height: 24px;
  width: auto;
}


/* container
-------------------------------------------------------------------- */
#container {
  width: auto;
  padding-bottom: 0;
}
/* .panelContainer {
  padding: 0 10px;
} */

#container h2 {
  font-size: 20px;
}

#container h3 {
  font-size: 16px;
}


/* title
-------------------------------------------------------------------- */
#title h1 {
  width: 100%;
  height: auto;
  font-size: 20px;
  padding: 35px 0;
}

#title h1 span {
  display: block;
  margin-left: 0;
}


/* section
-------------------------------------------------------------------- */
#container section {
  margin: 0 3.2% 20px;
  padding: 10px 3.2%;
}

.tw {
  position: inherit;
  text-align: right;
}

.data {
  font-size: 2.5vw;
  height: auto;
  line-height: 1.3;
  padding: 10px 3.2%;
}

.data span {
  display: none;
}


/* contWrap
-------------------------------------------------------------------- */
.contWrap + .contWrap {
  margin-top: 20px;
}

.contWrapInner {
  padding: 20px 3.2%;
}
    .contWrapInner img {
  height: auto;
  max-width: 100%;
}
  

#container .contWrapInner h3 {
  font-size: 16px;
}

#container .contWrapInner h4 {
  font-size: 14px;
}


.innerImg {
  float: none;
  margin-bottom: 10px;
}

.innerImg > img {
  height: auto;
  width: 100%;
}

.innerImg dl img {
  height: auto;
  width: 60%;
}

.innerText {
  padding-left: 0;
}

.innerText img {
  height: auto;
  width: 100%;
}

#container .btn_list a {
  width: auto;
}

.movie {
  margin: 0 3.2% 15px;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  overflow: hidden;
    z-index: 1;
}

.movie iframe,
.movie object,
.movie embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.artists li {
    display: block;
    width: auto;
}

.artists li img {
    height: auto;
    width: 50%;
}

  
  
  .box3 {
    color: #fff;
  text-decoration: none;
    font-size: 14px;
    padding: 3px 10px;
    margin: 5px 3px 5px 0px;
    line-height: 28px;
    background-color: #6091d3;
border-radius: 30px;/*角の丸み*/
  width: 100%;
  
}

  

/* goods
-------------------------------------------------------------------- */
.boxWrap {
  margin: 0;
}

.box {
  float: none;
  margin: 0;
  padding: 10px 3.2%;
  width: auto;
}

.boxWrap.boxCard .box {
  width: auto;
}

.boxWrap + .boxWrap.boxCard,
.box + .box,
.boxWrap.boxCard .box + .box {
  margin-top: 10px;
}

.boxPhoto {
  float: none;
  text-align: center;
  width: auto;
}

.boxlink img {
  width: 130px;
  height: 43px;
  overflow: hidden;
}

.boxText {
  float: none;
  margin-top: 10px;
  width: auto;
}

.boxWrap.boxCard .boxPhoto {
  margin: 12px auto;
}

.otherGoods {
    width: auto;
    font-size: 16px;
    padding: 10px;
    margin: 10px 0;
}


/* webshop
-------------------------------------------------------------------- */
.shopBn,
.shopText {
  float: none;
  width: auto;
}

.shopBn {
  margin-bottom: 10px;
  text-align: center;
}

.shopBn img {
  max-width: 70%;
  height: auto;
}


/* copyright
-------------------------------------------------------------------- */
.copyright {
  margin: 0 3.2% 20px;
}


/* accordion 
-------------------------------------------------------------------- */
.accordionComment {
  padding: 20px 3.2%;
}


/*　formSet
-------------------------------------------------------------------- */
.formSet {
  margin-bottom:5px;
  margin-left: 0;
  padding-top:10px;
}

.formSet p.formSetLeft{
  width: auto;
  float: none;
  margin: 0 !important;
  text-align: left;
}

.formSet div.formSetRight{
  width: auto;
  float: none;
}

.formSetText {
  padding-top: 0;
}

.formSet input[type="text"] {
  width: 88%;
}

.formSet textarea.areaText {
  width: 88%;
  height: 80px;
}

p#requiredEntryText,
p.requiredEntryText {
  padding-left: 0;
}

.formBtnWrap {
  margin-top: 30px;
}

.formBtnWrap input{
  display: block;
    margin: 10px auto;
}

#container .innerText .btn_list{
  width: 100%;
  margin: 5px 0;
}


/* tokuten
-------------------------------------------------------------------- */
.tokutenImg li {
  display: block;
  margin-bottom: 10px;
  width: auto;
}

.tokutenImg li img {
  height: auto;
  width: 100%;
}

.innerText_tokuten {
  padding-left: 0;
}

  
  /* subtitle2
-------------------------------------------------------------------- */
  
  .subtitle2 img {
  height: auto;
  width: 100%;
}

  
.subtitle2Img li {
  display: block;
  margin-bottom: 10px;
  width: auto;
}

.subtitle2Img li img {
  height: auto;
  width: 100%;
}

.innerText_tokuten {
  padding-left: 0;
}
  
@media only screen and (max-device-width: 480px) {
.subtitle2 img{
    width: 95%;
}

}



/* question
-------------------------------------------------------------------- */


textarea {
    max-width: 95%;
    height: auto;
}


/* live
-------------------------------------------------------------------- */
#live h2 {
  color: #fffed4;
}

#live .contWrapInner {
  background: #fffed4;
}

.live_comment{
  width:100%;
  position:static;
  overflow:hidden;
  list-style-type:none;
}
.live_comment li{
  float:left;
  width:30%;
  margin:5px;
}

/* nav
-------------------------------------------------------------------- */
nav#globalNav li a {
  background-size: 770%; 
  margin: -5px 10px 5px;
  padding-top: 80px;
  width: 70px;
}

nav#globalNav li.navAbout a {background-position: -6px 0px;}
nav#globalNav li.navTopics a {background-position: -87px 0;}
nav#globalNav li.navQuestion a {background-position: -163px 0;}
nav#globalNav li.navRenewal a {background-position: -243px 0;}
nav#globalNav li.navLive a {background-position: -318px 0;}
nav#globalNav li.navEvent a {background-position: -393px 0;}
nav#globalNav li.navProgram a {background-position: -468px 0;}



  

  
  .content-newprogram .content-item {
    flex-direction: column;
  }
  .content-newprogram .newprogram-img {
    width: 100%;
    margin-right: 0;
    min-width: auto;
    max-width: none;
    padding-bottom: 20px;
  }
  .content-item-newprogram-title {
    margin-left: 0;
  }
  .title-content {
    padding: 30px 0;
  }
  #page-top a {
    width: 60px;
  }
}

.is-phone .tabss li {
  width: 100%;
}
.is-phone .is-pc {
  display: none;
}
.is-phone .is-mobile {
  display: block;
}
.is-phone .tabss {
  display: flex;
  flex-direction: column;
}
.is-phone .tabss li a {
  padding: 15px 0;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.is-phone .form-wrapper-tabs {
  width: auto;
  padding: 0 10px;
}
.header-wrapper, .header-wrapper-phone{
  display: none;
}

.is-desktop .header-wrapper, .is-phone .header-wrapper-phone {
  display: block;
}
.is-desktop {
  min-width: 1197px;
}
