@charset utf-8;

/* デフォルト：980px以上用（PC用）の記述 */
@media screen and (min-width: 769px) {

  .site-header{
    margin: 0;
    background-color: #fff;
    width: 100%;
  }

  .site-header .header-inner{
    width: 960px;
    margin: 0 auto;
  }
  .site-header .header-inner:after,
  .site-header .header-inner .language:after{
    content: '';
    clear: both;
    display: block;
  }

  .site-header .header-inner .site-branding{
    float: left;
  }

  .site-header .header-inner .language{
    float: right;
    margin-top: 20px;
  }

  .site-header .header-inner .language li{
    cursor: pointer;
    float: left;
    text-align: center;
    border-top: 4px solid #575757;
    padding: 0 3px;
    margin-right: 8px;
  }

  .site-header .header-inner .language li:last-child{
    margin-right: 0;
  }

  .site-header .header-inner .language.ja li.lang-ja,
  .site-header .header-inner .language.en li.lang-en,
  .site-header .header-inner .language.tc li.lang-tc,
  .site-header .header-inner .language.sc li.lang-sc{
    border-top: 4px solid #1375a7;
    color: #1375a7;
  }

  .site-header .main-navigation{
    background-color: #f2f2f2;
    padding: 10px 0;
  }

  .site-header .main-navigation li{
    width: 20%;
    text-align: center;
    padding: 0 10px;
  }

/*  .site-header .main-navigation li a{
    color: #575757;
    padding: 10px 0;
    border-radius: 30px;
    border: 2px solid #fff;
  }

  .site-header .main-navigation li.admission a{
    border: 2px solid #1a96d5;
    background-color: #fff;
  }
*/

  .site-header .main-navigation li a{
    width: 184px;
    height: 46px;
    color: transparent;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
  }

  /* グローバルメニュー */
  /* トップページ */
  .site-header .main-navigation ul.ja li.top-page a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-off.png);
  }
  .site-header .main-navigation ul.en li.top-page a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-off-en.png);
  }
  .site-header .main-navigation ul.tc li.top-page a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-off-tc.png);
  }
  .site-header .main-navigation ul.sc li.top-page a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-off-sc.png);
  }

  .site-header .main-navigation ul.ja li.top-page a:hover,
  #home .site-header .main-navigation ul.ja li.top-page a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-on.png);
  }
  .site-header .main-navigation ul.en li.top-page a:hover,
  #home .site-header .main-navigation ul.en li.top-page a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-on-en.png);
  }
  .site-header .main-navigation ul.tc li.top-page a:hover,
  #home .site-header .main-navigation ul.tc li.top-page a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-on-tc.png);
  }
  .site-header .main-navigation ul.sc li.top-page a:hover,
  #home .site-header .main-navigation ul.sc li.top-page a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-top-on-sc.png);
  }

  /* JOGAとは*/
  .site-header .main-navigation ul.ja li.about a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-off.png);
  }
  .site-header .main-navigation ul.en li.about a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-off-en.png);
  }
  .site-header .main-navigation ul.tc li.about a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-off-tc.png);
  }
  .site-header .main-navigation ul.sc li.about a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-off-sc.png);
  }

  .site-header .main-navigation ul.ja li.about a:hover,
  #about_joga .site-header .main-navigation ul.ja li.about a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-on.png);
  }
  .site-header .main-navigation ul.en li.about a:hover,
  #about_joga .site-header .main-navigation ul.en li.about a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-on-en.png);
  }
  .site-header .main-navigation ul.tc li.about a:hover,
  #about_joga .site-header .main-navigation ul.tc li.about a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-on-tc.png);
  }
  .site-header .main-navigation ul.sc li.about a:hover,
  #about_joga .site-header .main-navigation ul.sc li.about a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-about-on-sc.png);
  }

  /* JOGA会員一覧 */
  .site-header .main-navigation ul.ja li.joga-list a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-off.png);
  }
  .site-header .main-navigation ul.en li.joga-list a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-off-en.png);
  }
  .site-header .main-navigation ul.tc li.joga-list a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-off-tc.png);
  }
  .site-header .main-navigation ul.sc li.joga-list a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-off-sc.png);
  }

  .site-header .main-navigation ul.ja li.joga-list a:hover,
  #member_list .site-header .main-navigation ul.ja li.joga-list a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-on.png);
  }
  .site-header .main-navigation ul.en li.joga-list a:hover,
  #member_list .site-header .main-navigation ul.en li.joga-list a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-on-en.png);
  }
  .site-header .main-navigation ul.tc li.joga-list a:hover,
  #member_list .site-header .main-navigation ul.tc li.joga-list a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-on-tc.png);
  }
  .site-header .main-navigation ul.sc li.joga-list a:hover,
  #member_list .site-header .main-navigation ul.sc li.joga-list a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-member-on-sc.png);
  }

  /* JOGAガイドライン*/
  .site-header .main-navigation ul.ja li.guideline a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-off.png);
  }
  .site-header .main-navigation ul.en li.guideline a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-off-en.png);
  }
  .site-header .main-navigation ul.tc li.guideline a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-off-tc.png);
  }
  .site-header .main-navigation ul.sc li.guideline a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-off-sc.png);
  }

  .site-header .main-navigation ul.ja li.guideline a:hover,
  #joga_guideline .site-header .main-navigation ul.ja li.guideline a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-on.png);
  }
  .site-header .main-navigation ul.en li.guideline a:hover,
  #joga_guideline .site-header .main-navigation ul.en li.guideline a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-on-en.png);
  }
  .site-header .main-navigation ul.tc li.guideline a:hover,
  #joga_guideline .site-header .main-navigation ul.tc li.guideline a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-on-tc.png);
  }
  .site-header .main-navigation ul.sc li.guideline a:hover,
  #joga_guideline .site-header .main-navigation ul.sc li.guideline a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-guideline-on-sc.png);
  }

  /* 入会のご案内 */
  .site-header .main-navigation ul.ja li.admission a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-off.png);
  }
  .site-header .main-navigation ul.en li.admission a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-off-en.png);
  }
  .site-header .main-navigation ul.tc li.admission a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-off-tc.png);
  }
  .site-header .main-navigation ul.sc li.admission a{
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-off-sc.png);
  }

  .site-header .main-navigation ul.ja li.admission a:hover,
  #admission_item .site-header .main-navigation ul.ja li.admission a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-on.png);
  }
  .site-header .main-navigation ul.en li.admission a:hover,
  #admission_item .site-header .main-navigation ul.en li.admission a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-on-en.png);
  }
  .site-header .main-navigation ul.tc li.admission a:hover,
  #admission_item .site-header .main-navigation ul.tc li.admission a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-on-tc.png);
  }
  .site-header .main-navigation ul.sc li.admission a:hover,
  #admission_item .site-header .main-navigation ul.sc li.admission a
  {
    background-image: url(/wp-content/uploads/img/gmenu/gmenu-admission-on-sc.png);
  }


/*  #home .site-header .main-navigation li.top-page a,
  #about_joga .site-header .main-navigation li.about a,
  #member_list .site-header .main-navigation li.joga-list a,
  #joga_guideline .site-header .main-navigation li.guideline a,
  #admission_item .site-header .main-navigation li.admission a,
  .site-header .main-navigation li a:hover{
    color: #fff;
    background-color: #1a96d5;
    border-color: #1a96d5;
  }

  .site-header .main-navigation li a:hover{
    text-decoration: underline;
  }*/

  .main-navigation{
    clear: none;
  }
}

@media screen and (min-width: 769px) and ( max-width: 979px) {

}

@media screen and (max-width: 768px) { 
  
  body.home{
    /*width: 95%;*/
    margin: 0 auto;
  }

  .site-header{
    margin: 0;
    background-color: #fff;
    width: 100%;
  }

  .site-header .header-inner{
    width: 70%;
    margin: 0;
  }

  .sp-menu{
    position: fixed;
    top: 10px;
    right: 10px;
    width: 15%;
    z-index: 1;
  }


  .site-header .main-navigation-sp{
    border-top: 8px solid #1a96d5;
    background-color: #f2f2f2;
    padding: 10px 0;
    z-index: 100;
  }

  .site-header .main-navigation-sp li{
    width: 90%;
    text-align: center;
    padding: 0 10px;
    margin: 20px auto;
  }

  .site-header .main-navigation-sp li a{
    display: block;
    width: 100%;
    color: #575757;
    border-radius: 30px;
    border: 2px solid #fff;
    padding: 10px 0;
  }

  .site-header .main-navigation-sp li.admission a{
    border: 2px solid #1a96d5;
    background-color: #fff;
  }

  .site-header .main-navigation-sp #primary-menu.en li a,
  .site-header .main-navigation-sp #primary-menu.tc li a,
  .site-header .main-navigation-sp #primary-menu.sc li a{
    font-size: 0;
  }

  .site-header .main-navigation-sp #primary-menu.en li a:before,
  .site-header .main-navigation-sp #primary-menu.tc li a:before,
  .site-header .main-navigation-sp #primary-menu.sc li a:before{
    font-size: 14px;
  }

  .site-header .main-navigation-sp #primary-menu.en li.top-page a:before{
    content: 'Top Page';
  }
  .site-header .main-navigation-sp #primary-menu.tc li.top-page a:before{
    content: '首頁';
  }
  .site-header .main-navigation-sp #primary-menu.sc li.top-page a:before{
    content: '首页';
  }

  .site-header .main-navigation-sp #primary-menu.en li.about a:before{
    content: 'What is JOGA? ';
  }
  .site-header .main-navigation-sp #primary-menu.tc li.about a:before{
    content: '關於JOGA';
  }
  .site-header .main-navigation-sp #primary-menu.sc li.about a:before{
    content: 'JOGA简介';
  }

  .site-header .main-navigation-sp #primary-menu.en li.joga-list a:before{
    content: 'List of JOGA members';
  }
  .site-header .main-navigation-sp #primary-menu.tc li.joga-list a:before{
    content: 'JOGA會員一覽';
  }
  .site-header .main-navigation-sp #primary-menu.sc li.joga-list a:before{
    content: 'JOGA会员一览';
  }

  .site-header .main-navigation-sp #primary-menu.en li.guideline a:before{
    content: 'JOGA Guidelines';
  }
  .site-header .main-navigation-sp #primary-menu.tc li.guideline a:before{
    content: 'JOGA指導方針';
  }
  .site-header .main-navigation-sp #primary-menu.sc li.guideline a:before{
    content: 'JOGA指导线';
  }

  .site-header .main-navigation-sp #primary-menu.en li.admission a:before{
    content: 'How to Join';
  }
  .site-header .main-navigation-sp #primary-menu.tc li.admission a:before{
    content: '入會說明';
  }
  .site-header .main-navigation-sp #primary-menu.sc li.admission a:before{
    content: '入会说明';
  }

  #home .site-header .main-navigation-sp li.top-page a,
  #about_joga .site-header .main-navigation-sp li.about a,
  #member_list .site-header .main-navigation-sp li.joga-list a,
  #joga_guideline .site-header .main-navigation-sp li.guideline a,
  #admission_item .site-header .main-navigation-sp li.admission a,
  .site-header .main-navigation-sp li a:hover{
    color: #fff;
    background-color: #1a96d5;
    border-color: #1a96d5;
  }

  .site-header .language{
    width: 188px;
    margin: 0 auto;
  }

  .site-header .language li{
    float: left;
    width: 90px;
    text-align: center;
    border-top: 4px solid #575757;
    padding: 0 3px;
    margin-right: 8px;
    margin-bottom: 0;
  }

  .site-header .language li:last-child{
    margin-right: 0;
  }

  .site-header .language li {
    float: left;
    text-align: center;
    border-top: 4px solid #575757;
    padding: 0 3px;
    margin-right: 8px;
  }

  .site-header .language li:nth-child(even){
    margin-right: 0;
  }

  .site-header .language li a{
    font-size: 14px;
    border-radius: initial;
    border: none;
  }

  .site-header .language li a:hover{
    background-color: transparent;
    color: #575757;
  }

  .site-header .language.ja li.lang-ja,
  .site-header .language.en li.lang-en,
  .site-header .language.tc li.lang-tc,
  .site-header .language.sc li.lang-sc{
    border-top: 4px solid #1375a7;
    color: #1375a7;
  }


  .main-navigation-sp{
    clear: none;
  }

  .main-navigation-sp{
    position: fixed;
    top: -100%;
    left: 0;
    background-color: #FFF;
    width: 100%;

    -webkit-transition: 0.5s cubic-bezier(.19,1,.22,1);
    -moz-transition: 0.5s cubic-bezier(.19,1,.22,1);
    -ms-transition: 0.5s cubic-bezier(.19,1,.22,1);
    -o-transition: 0.5s cubic-bezier(.19,1,.22,1);
    transition: 0.5s cubic-bezier(.19,1,.22,1);

  }

  .main-navigation-sp.on{
    top: 0;
  }

  #sp-menu-open.off{
    display: none !important;
  }

  .sp-menu-button-close{
    text-align: center;
    width: 75px;
    margin: 20px auto 0;
  }

}