/* 全体のスタイルの設定 */

body {
background: #51B2DE;
word-wrap: break-word;
word-break: break-all;
font-size: 0.65em;
letter-spacing: 0.10em;
}

.contents {max-width: 1100px;min-width: 900px;margin: 0 auto;padding: 3em 3em;background: white;text-align: center;}

.contents img {
width: 97%;
margin: 0 0 2em;
}

.contents div.cat img {
width: 40%;
margin: 0 auto 2em;
}

.contents img.header {
width: 100%;
margin: 0;
}

.Announcement {font-size: 1.5em;line-height: 170%;text-align: justify;}

.Announcement span.wgt-700 {
font-size: 1.35em;
line-height: 140%;
}

.Announcement span.title {
font-size: 1.9em;
}

.contents img.egs-header {width: 80%;}

.perform {
margin-bottom: 1em;
}

.caption {
padding: 0.2em 1.0em;
background: #4ebded;
border-radius: 0.2em;
color: black;
display: inline-block;
}

.index-footer {
text-align: center;
}

#footer-inner{
margin-left:0px;
background:#3387c4;
padding:2% 0;
}

#footer-inner a{
margin: 0 1em 0 0;
}

.sns-banner{
padding:0 0 10px 0;
}

#credit{
min-height:320px;
font-size:12px;
color:orange;
background-image:url(./images/footer-bg.png);
background-repeat:repeat-x;
background-color:black;
background-size: contain;
padding:3% 0 20px 0;
}

#credit img{
margin: 0 0 1em 0
}

div.main {
  width: 67%;
  margin-right: 3%;
  float: left;
}

div.snsbox {
  width: 30%;
  float: left;
}

.description {
font-size: 0.7em;
line-height: 130%;
}

.update {
color: gray;
text-align: right;
}

div.artist {
width: 30%;
height: auto;
margin: 0 1%;
text-align: center;
font-size: 0.9em;
display: inline-block;
vertical-align: top;
position: relative;
}

div.artist img {
width: 100%;
height: auto;
margin: 0 auto 0.1em;
}

div.artist img.vertical {
width: 75%;
}

img.pre-order-qr {
width: 30%;
height: auto;
margin: 0;
}

img.news-body {
width: 60%;
margin: 0 0 0.5em;
}

img.news-goods {
width: 100%;
margin: 2rem 0;
}

.spacer {
width: 100%;
height: 2px;
background: #FF9700;
margin: 2em 0;
}

.wgt-700 {
font-weight: 700;
}

.text-l {
font-size: 1.4em;
}

.text-m {
font-size: 1.2em;
}

.text-s {
font-size: 0.8em;
}

.mb {
  display:none;
}

.pc {
  display: initial;
}

a, a:visited, a:hover {
color: #4ebded;
text-decoration: none;
}

a:hover {
opacity: 0.8;
}

nav {
margin: 1em auto;
z-index: 10000;
}

nav div {
float: left;
}

a.nav-l,
a.nav-c,
a.nav-r {
padding: 0.8em 1.24em;
font-size: 1.36em;
color: #4ebded;
text-shadow: 0 0 1px rgba(78, 189, 237, 0.7);
text-decoration: none;
display: inline-block;
}

a.nav-l {
border-left: 1px solid #e6e7ff;
border-right: 1px solid #e6e7ff;
}

a.nav-c {
border-right: 1px solid #e6e7ff;
}

a.nav-r {
border-right: 1px solid #e6e7ff;
}

/* film_roll CSS */

.film_roll_wrapper {
   display: block;
   text-align: center;
   float: none;
   position: relative;
   top: auto;
   right: auto;
   bottom: auto;
   left: auto;
   margin: 0 auto 1.5em !important;
   padding: 0 !important;
   overflow: hidden;
   width: 100%;
 }
.film_roll_shuttle {
   text-align: left;
   float: none;
   position: relative;
   top: 0;
   left: 0;
   right: auto;
   bottom: auto;
   margin: 0 !important;
   padding: 0 !important;
 }
 .film_roll_shuttle.vertical_center:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   margin-right: -0.25em;
 }
.film_roll_child {
  position: relative;
  display: inline-block;
  *display:inline;
  vertical-align:middle;
  zoom:1;
  padding-left: 10px;
}
.film_roll_prev, .film_roll_next {
   position: absolute;
   top: 50%;
   left: 15px;
   width: 30px;
   height: 40px;
   margin: 0;
   padding: 0;
   font-size: 60px;
   font-weight: 100;
   line-height: 24px;
   color: white;
   text-align: center;
   background: #222;
   border: 1px solid white;
   border-radius: 3px;
   opacity: 0.2;
   text-decoration: none;
   display: none;
 }
.film_roll_prev:hover, .film_roll_next:hover {
   color: white;
   text-decoration: none;
   opacity: 0.9;
 }
.film_roll_next {
   left: auto;
   right: 15px;
 }
.film_roll_pager {
   text-align: center;
 }
.film_roll_pager a {
   width: 5px;
   height: 5px;
   border: 2px solid #333;
   border-radius: 5px;
   display: inline-block;
   margin: 0 5px 0 0;
   transition: all 1s ease;
 }
.film_roll_pager a:hover {
   background: #666;
 }
.film_roll_pager a.active {
   background: #333;
 }
.film_roll_pager span {
   display: none;
 }
 .film_roll_pager a, a.film_roll_prev, a.film_roll_next {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 }

.remodal {
font-size: 1.4em;
}

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

.index-banner-size-mb {
    height: 118px;
}

.contents {max-width: 85%;min-width: 85%;padding: 1.5em 1em;}

.contents div.cat img {
width: 97%;
}

.Announcement {font-size: 1.2em;}

.egs-header {
width: 80%;
}

#credit {
  background-size: cover;
  background-position: center;
}

div.artist {
width: 47%;
}

img.pre-order-qr {
width: 50%;
}

div.main {
  width: 100%;
  margin-right: 0;
  float: none;
}

div.snsbox {
  width: 100%;
  float: none;
}

img.news-body {
width: 100%;
}

.pc {
  display: none;
}

.mb {
  display:initial;
}

nav {
position: fixed;
right: 5%;
bottom: 2em;
margin: 0;
}

nav div {
float: none;
}

a.nav-l,
a.nav-c,
a.nav-r {
padding: 0.8em 1em;
}

div.nav-t {
border-top: 1px solid #e6e7ff;
}

div.nav-m {
border-top: 1px solid #e6e7ff;
}

div.nav-b {
border-top: 1px solid #e6e7ff;
border-bottom: 1px solid #e6e7ff;
}

a.nav-l {
border: none;
}

a.nav-c {
border: none;
}

a.nav-r {
border: none;
}

#nav-wrapper {
position: relative;
top: -3em;
background: white;
}

div.nav-open {
color: white;
background: black;
padding: 0.35em;
border-radius: 0.2em;
position: fixed;
right: 5%;
bottom: 0.3em;
font-size: 2.5em;
}

a.comment {
font-size: 2em;
margin-bottom: 1em;
display: inline-block;
}

} /* @media screen and (max-width: 768px) */