@charset "utf-8";

/* common.css 2018-07-24 Rewrite */
/* =base
------------------------------------------------------------------------------------------*/
html {height: 100%;line-height: 1.3;} /*overflow: auto;overflow-y: auto;*/
body {height: 100%;color: #333333;background-color: #fafafa;
font-family: "Oswald", "Hiragino Sans W3", "ヒラギノ角ゴシック W3", "ヒラギノ角ゴ ProN W3",  "Hiragino Kaku Gothic ProN","Lucida Grande","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic", "sans-serif", -apple-system;}
a {color: #cc0000;text-decoration: none;outline: none;}
a:hover {color: #cc0000;text-decoration: underline;}
a:hover img {opacity: 0.8;filter: alpha(opacity=80);}

body.nav_fixed {overflow: hidden;}

/* =fade
------------------------------------------------------------------------------------------*/
#js_fade2 {position : fixed;top: 0;left : 0;width: 100%;height: 100%;background-color: white;background-image: url( ../images/loading.gif );background-repeat: no-repeat;background-position: 50% 50%;z-index: 100;}
.main_content {margin-bottom: 2rem;}
@media only screen and (max-width: 999px) {
.main_content {padding-top: 45px;} // header size
}

/* =header
------------------------------------------------------------------------------------------*/
header {background-color: black;}
header .head_wrap.osaka_head h1 a {background-image: url(../images/head_logo_osaka2.png);background-repeat:no-repeat;background-size: contain;}
header h1 a {display: block;text-indent: -9999px;background-image:url(../images/head_logo.png);background-size: 100%;background-repeat: no-repeat;background-position: right center;}

@media only screen and (min-width: 1000px), print {
header {padding-top: 22px;}
header .head_wrap {width:1000px;margin: 0 auto;}
header .head_wrap:after {clear: both;display: block;height: 0;line-height: 0;visibility: hidden;font-size: 0.1em;content: ".";}
header h1 {float: left;line-height: 0;}
header h1 a {width: 122px;height: 68px;}
header h1 a:hover {opacity: 0.8;}
header .head_wrap.osaka_head h1 a{width:272px;}
}
@media only screen and (max-width: 999px) {
header {padding: 0;position: fixed;width: 100%;z-index: 15;}
header .head_wrap {width: 92%;height: 45px;}
header h1 a {width: 65px;height: 45px;}
header .head_wrap.osaka_head h1 a {width: 140px;background-position: left;}
}


/* =navi CSS
------------------------------------------------------------------------------------------*/
#toggle{display: none;}
header nav li a {display: block;text-indent: -9999px;-moz-transition: .2s;-webkit-transition: .2s;-o-transition: .2s;-ms-transition: .2s;transition: .2s;}
header nav li a:hover, nav li a.at {text-decoration:none;}

@media only screen and (min-width: 1000px), print {
header nav {float: right;}
header nav ul {display: table;}
header nav li {display: table-cell;}
header nav li a {background-image: url(../images/main_nav2.png);background-repeat: no-repeat;line-height: 0;height: 80px;height: 80px;}
header nav li.nav_top {display: none;}
header nav li a.news {width: 95px;background-position: 0 -80px;}
header nav li a:hover.news {background-position: 0 0;}
header nav li a.artists {width: 115px;background-position: -95px -80px;}
header nav li a:hover.artists {background-position: -95px 0;}
header nav li a.calendar {width: 115px;background-position: -210px -80px;}
header nav li a:hover.calendar {background-position: -210px 0;}
header nav li a.about {width: 115px;background-position: -325px -80px;}
header nav li a:hover.about {background-position: -325px 0;}
header nav li a.members {width: 105px;background-position: -440px -80px;}
header nav li a:hover.members {background-position: -440px 0;}
header nav li a.faq {width: 95px;background-position: -545px -80px;}
header nav li a:hover.faq {background-position: -545px 0;}
header nav li a.english {width: 95px;background-position: -640px -80px;}
header nav li a:hover.english {background-position: -640px 0;}
header nav li a.osaka {width: 95px;background-position: -735px -80px;}
header nav li a:hover.osaka {background-position: -735px 0;}
header nav li a.tokyo {width: 95px;background-position: -830px -80px;}
header nav li a:hover.tokyo {background-position: -830px 0;}
}
@media only screen and (max-width: 999px) {
#menu{display: none;width:100%;position:absolute;z-index:10;top:0;left:0;overflow-y: scroll;top:45px;height:calc(100vh - 45px);background-color:rgba(0,0,0,0.9);}
#menu li{width: 100%;display:inherit;background-color:black;text-align: center;}
#toggle{display: block;position: fixed;top:0;right:0;background-color:#663300;height:45px;width: 45px;z-index:11;}
#toggle a{display: block;position: relative;padding: 39px 0 10px;color: white;text-align: center;text-decoration: none;}
#toggle:before{display: block;content: "";position: absolute;top: 50%;left: 10px;width: 26px;height: 24px;margin-top: -13px;background: white;}
#toggle a:before, #toggle a:after{display: block;content: "";position: absolute; top: 50%;left: 10px;width: 30px;height: 6px;background: #663300;}
#toggle a:before{margin-top: -11px;}
#toggle a:after{margin-top: -1px;}
header nav {margin-bottom: 0;width: 100%;}
header nav li {border-bottom: 1px dotted #663300;}
header nav li a:hover, nav li a.at {border-bottom: none;}
header nav li.nav_top{display:block;border-top:1px solid #444444;}
header nav li.nav_top a{padding:2.3vh 0;}
header nav li.nav_top a strong{padding:0;}
header nav li a {background-image: none;text-indent: inherit;font-size: 0.8rem;line-height: 1.2rem;height: auto;width: auto !important;padding: 1.6vh 0;color: white;}
header nav li a strong {display: block;font-weight: inherit;font-size: 1.2rem;}
header nav li a.news, header nav li a.artists, header nav li a.calendar {background-color: #cc0000;}
header nav li a.about, header nav li a.faq, header nav li a.members {background-color: #336699;}
header nav li a.osaka, header nav li a.tokyo {background-color:#339933;}
header nav li a.english {background-color: #993399;padding: 3.5vh 0;}
header nav li a.english strong {padding: 0;}

/* Default navigation icon */
.nav_trigger {display: block;position: fixed;width: 30px;height: 25px;right: 10px;top: 10px;z-index: 200;}
.nav-active .nav_trigger {opacity: 0.7;}
.nav_icon {display: inline-block;position: relative;width: 30px;height: 5px;background-color: white;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.nav_icon:before, .nav_icon:after {content: '';display: block;width: 30px;height: 5px;position: absolute;background: white;
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.nav_icon:before {margin-top: -10px;}
.nav_icon:after {margin-top: 10px;}
.nav-active .nav_icon {background: rgba(0, 0, 0, 0);}
.nav-active .nav_icon:before {margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.nav-active .nav_icon:after {margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
}

/* =foot
-----------------------------------------------------------------------------------------*/
footer {border-top:1px dotted #666666;}
footer .copyright {font-family: 'Hammersmith One';text-align: center;font-size: 0.8rem;}
.foot_bnr {margin: 0 auto 25px;}
.foot_bnr ul:after {clear: both;display: block;height: 0;line-height: 0;visibility: hidden;font-size: 0.1em;content: ".";}
.foot_bnr li {float: left;}
.foot_bnr li img {width: 100%;}
.foot_sns:after {clear: both;display: block;height: 0;line-height: 0;visibility: hidden;font-size: 0.1em;content: ".";}
.foot_nav li a {color: #333333;}
@media only screen and (min-width: 1000px), print {
footer {padding: 2rem 0 3rem 0;}
footer .copyright {padding-top: 15px;}
.foot_bnr {width: 1000px;}
.foot_bnr li {width: 192px;padding-right: 8px;}
.foot_bnr li:nth-child(5n) {padding-right: 0;}
.foot_sns {width: 1000px;margin: 0 auto 20px;}
.foot_nav {display: table;margin: 0 auto;}
.foot_nav ul {font-size: 0.9rem;}
.foot_nav li {display: table-cell;}
.foot_nav li:before{ content:"|"; padding:0 10px;}
.foot_nav li:first-child:before {content: no-close-quote;}
}
@media only screen and (max-width: 999px) { 
footer { padding: 10px 0 40px 0;}
footer img {width: 70%;}
footer .copyright {padding-top: 2rem;margin: 0;}
.foot_bnr {width: 94%;}
.foot_bnr li {width: 32%;padding-right: 2%;}
.foot_bnr li:nth-child(3n) {padding-right: 0;}
.foot_sns {width: 94%;}
.foot_nav {width: 94%;margin: 0 auto;}
.foot_nav li {display: inherit;width: 100%;}
.foot_nav li a {display: block;border-bottom: 3px solid white;background-color: #eeeeee;text-align: center;padding: 7px 0;}
.foot_nav li:before {content: no-close-quote;padding: 0;}
}
@media only screen and (max-width: 567px){
.foot_bnr {width: 94%;}
.foot_bnr li {width: 48%;padding-bottom: 0.6rem;}
.foot_bnr li:nth-child(2n+1) {padding-right: 2%;}
}


/* =ページトップ
------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1000px) {
.page_top {margin: 0;width: 80px;text-align: center;position: fixed;right: 30px;bottom: 40px;z-index: 10;}
.page_top a {background-color: black;display: block;border-radius: 50%;height: 80px;width: 80px;line-height: 80px;color: white;font-family: 'Oswald';}
.page_top a:hover {background-color: #cc0000;text-decoration: none;}
}
@media only screen and (max-width: 999px), print { 
.page_top {display: none;}
}


/* = pagination 
------------------------------------------------------------------------------------------*/
ul.pageNav {text-align: center;padding: 10px 0 20px;} 
ul.pageNav li {display: inline;margin: 0 1px;padding: 0;} 
ul.pageNav li span, ul.pageNav li a {display: inline-block;padding: 5px 12px;background: white;border: 1px solid #ccc;vertical-align: middle;text-decoration: none; color: #666666;} 
ul.pageNav li span {background: #333333;color: white;} 
ul.pageNav li a:hover {background: #efefef;} 


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after {clear: both;display: block;height: 0;line-height: 0;visibility: hidden;font-size: 0.1em;content: ".";}