@charset "UTF-8";
/* **************************************************************** *
 * カラー設定
 * **************************************************************** *
 * トランジション
 * ================================================================ */
body.is-fade #top,
body.is-fade #top .pagenav .totte .icon,
body.is-fade #top .pagenav .totte .icon:after,
body.is-fade #top .pagenav .totte .icon:before,
body.is-fade #top .pagenav nav ul li:after{
  transition: background 1.0s ease-in-out;
}

body.is-fade #top .pagenav,
body.is-fade #top .pagenav nav{
  transition: background 1.0s ease-in-out;
}

body.is-fade #top h1 img{
  transition: filter 1.0s ease-in-out;
}
/* ================================================================ *
 * blue
 * ================================================================ */
#top.blue,
#top .pagenav.blue .totte .icon,
#top .pagenav.blue .totte .icon:after,
#top .pagenav.blue .totte .icon:before,
#top .pagenav.blue nav ul li:after,
#top .pagenav.blue .bnr > div:hover a{
  background: #21a1f0;
}

#top .pagenav.blue a{
  color: #21a1f0;
}

#top .pagenav.blue nav ul li,
#top .pagenav.blue .bnr > div{
  border-color: #21a1f0;
}

#top .pagenav.blue a:hover,
#top .pagenav.blue .bnr > div:hover a{
  color: #000;
}
/* ---------------------------------------------------------------- *
 * 700px以下
 * ---------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #menu_icon.blue{
    background: #000;
    color: #000;
  }

  #menu_icon.blue .icon span,
  #menu_icon.blue .icon:after,
  #menu_icon.blue .icon:before{
    background: #21a1f0;
  }
}
/* ================================================================ *
 * yellow
 * ================================================================ */
#top.yellow,
#top .pagenav.yellow .totte .icon,
#top .pagenav.yellow .totte .icon:after,
#top .pagenav.yellow .totte .icon:before,
#top .pagenav.yellow nav ul li:after,
#top .pagenav.yellow .bnr > div:hover a{
  background: #feef1c;
}

#top .pagenav.yellow a{
  color: #feef1c;
}

#top .pagenav.yellow nav ul li,
#top .pagenav.yellow .bnr > div{
  border-color: #feef1c;
}

#top .pagenav.yellow a:hover,
#top .pagenav.yellow .bnr > div:hover a{
  color: #000;
}
/* ---------------------------------------------------------------- *
 * 700px以下
 * ---------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #menu_icon.yellow{
    background: #000;
    color: #000;
  }

  #menu_icon.yellow .icon span,
  #menu_icon.yellow .icon:after,
  #menu_icon.yellow .icon:before {
    background: #feef1c;
  }
}
/* ================================================================ *
 * pink
 * ================================================================ */
#top.pink,
#top .pagenav.pink .totte .icon,
#top .pagenav.pink .totte .icon:after,
#top .pagenav.pink .totte .icon:before,
#top .pagenav.pink nav ul li:after,
#top .pagenav.pink .bnr > div:hover a{
  background: #ff82b4;
}

#top .pagenav.pink a{
  color: #ff82b4;
}

#top .pagenav.pink nav ul li,
#top .pagenav.pink .bnr > div{
  border-color: #ff82b4;
}

#top .pagenav.pink a:hover,
#top .pagenav.pink .bnr > div:hover a{
  color: #000;
}
/* ---------------------------------------------------------------- *
 * 700px以下
 * ---------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #menu_icon.pink{
    background: #000;
    color: #000;
  }

  #menu_icon.pink .icon span,
  #menu_icon.pink .icon:after,
  #menu_icon.pink .icon:before {
    background: #ff82b4;
  }
}
/* ================================================================ *
 * white
 * ================================================================ */
#top.white,
#top .pagenav.white .totte .icon,
#top .pagenav.white .totte .icon:after,
#top .pagenav.white .totte .icon:before,
#top .pagenav.white nav ul li:after,
#top .pagenav.white .bnr > div:hover a{
  background: #fff;
}

#top .pagenav.white a{
  color: #fff;
}

#top .pagenav.white nav ul li,
#top .pagenav.white .bnr > div{
  border-color: #fff;
}

#top .pagenav.white a:hover,
#top .pagenav.white .bnr > div:hover a{
  color: #000;
}
/* ---------------------------------------------------------------- *
 * 700px以下
 * ---------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #menu_icon.white{
    background: #000;
    color: #000;
  }

  #menu_icon.white .icon span,
  #menu_icon.white .icon:after,
  #menu_icon.white .icon:before {
    background: #fff;
  }
}
/* ================================================================ *
 * black
 * ================================================================ */
#top.black,
#top .pagenav.black .totte .icon,
#top .pagenav.black .totte .icon:after,
#top .pagenav.black .totte .icon:before,
#top .pagenav.black nav ul li:after,
#top .pagenav.black .bnr > div:hover a{
  background: #000;
}

#top .pagenav.black a{
  color: #000;
}

#top .pagenav.black nav ul li,
#top .pagenav.black .bnr > div{
  border-color: #000;
}

#top .pagenav.black a:hover,
#top .pagenav.black .bnr > div:hover a {
  color: #fff;
}

#top .pagenav.black,
#top .pagenav.black nav{
  background: #fff;
}

#top.black h1 img{filter: invert(100%) brightness(200%);}
/* ---------------------------------------------------------------- *
 * 700px以下
 * ---------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #menu_icon.black{
    background: #fff;
    color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  #menu_icon.black .icon span,
  #menu_icon.black .icon:after,
  #menu_icon.black .icon:before {
    background: #000 !important;
  }

  #menu_icon.black p {
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  #top.black .bnr a {
    background: #fff;
    color: #000;
  }
}
/* ================================================================ *
 * gold
 * ================================================================ */
#top.gold,
#top .pagenav.gold .totte .icon,
#top .pagenav.gold .totte .icon:after,
#top .pagenav.gold .totte .icon:before,
#top .pagenav.gold nav ul li:after,
#top .pagenav.gold .bnr > div:hover a{
  background: #bf9224;
}

#top .pagenav.gold a{
  color: #bf9224;
}

#top .pagenav.gold nav ul li,
#top .pagenav.gold .bnr > div{
  border-color: #bf9224;
}

#top .pagenav.gold a:hover,
#top .pagenav.gold .bnr > div:hover a {
  color: #fff;
}

#top .pagenav.gold,
#top .pagenav.gold nav{
  background: #fff;
}

#top.gold h1 img{filter: invert(100%) brightness(200%);}
/* ---------------------------------------------------------------- *
 * 700px以下
 * ---------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #menu_icon.gold{
    background: #fff;
    color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  #menu_icon.gold .icon span,
  #menu_icon.gold .icon:after,
  #menu_icon.gold .icon:before {
    background: #bf9224 !important;
  }

  #menu_icon.gold p {
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  #top.gold .bnr a {
    background: #fff;
    color: #bf9224;
  }
}
/* ================================================================ *
 * silver
 * ================================================================ */
#top.silver,
#top .pagenav.silver .totte .icon,
#top .pagenav.silver .totte .icon:after,
#top .pagenav.silver .totte .icon:before,
#top .pagenav.silver nav ul li:after,
#top .pagenav.silver .bnr > div:hover a{
  background: #979c9a;
}

#top .pagenav.silver a{
  color: #979c9a;
}

#top .pagenav.silver nav ul li,
#top .pagenav.silver .bnr > div{
  border-color: #979c9a;
}

#top .pagenav.silver a:hover,
#top .pagenav.silver .bnr > div:hover a {
  color: #fff;
}

#top .pagenav.silver,
#top .pagenav.silver nav{
  background: #fff;
}

#top.silver h1 img{filter: invert(100%) brightness(200%);}
/* ---------------------------------------------------------------- *
 * 700px以下
 * ---------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #menu_icon.silver{
    background: #fff;
    color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  #menu_icon.silver .icon span,
  #menu_icon.silver .icon:after,
  #menu_icon.silver .icon:before {
    background: #979c9a !important;
  }

  #menu_icon.silver p {
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  #top.silver .bnr a {
    background: #fff;
    color: #979c9a;
  }
}