@charset "UTF-8";
/* Template 
   v0.1 | 20150430
   License: none (public domain)
   ―
*/
img {
  vertical-align: top;
}

body {
  background: #000;
}

article {
  position: relative;
}

.item__noactive {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

#wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  color: #fff;
}

a {
  -webkit-tap-highlight-color: transparent;
  background: none;
  color: none;
  text-decoration: none;
}

.cf {
  position: relative;
  width: 93.7%;
  height: auto;
  margin: 0 auto 21px;
  padding: 16px 0;
  border-bottom: 1px dotted #000;
}

.cf h1 {
  position: relative;
  margin: 0;
  width: 20.6%;
  z-index: 1;
}

.cf .nav_btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 20px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: 25px;
  height: 22px;
  margin: 0;
  float: none;
  background: url("../img/top/header/menu/btn_menu_off.png") center center no-repeat;
  -webkit-background-size: contain;
          background-size: contain;
}

.cf .nav_btn a {
  display: inline-block;
  width: 25px;
  height: 22px;
}

.cf .open {
  background: url("../img/top/header/menu/btn_menu_on.png") center center no-repeat;
  -webkit-background-size: contain;
          background-size: contain;
}

.nav_bg {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: none;
}

.nav {
  position: absolute;
  width: 100%;
  top: 80px;
  left: 0;
  display: none;
}

.nav ul {
  border-top: 1px dotted #000;
}

.nav ul li {
  border-bottom: 1px dotted #000;
  width: 100%;
  text-align: center;
  padding: 25px 0;
  font-family: 'Oswald',"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  letter-spacing: 0.07em;
  text-align: center;
  color: #dedede;
}

.nav ul li a {
  color: #000;
}

.nav_btn {
  margin-top: 33px;
  margin-left: 53px;
  width: 44px;
  height: 38px;
  background: url("../img/top/header/menu/btn_menu_off.png");
  float: left;
}

.nav_btn a {
  display: block;
  width: 44px;
  height: 38px;
}

.open {
  background: url("../img/top/header/menu/btn_menu_on.png");
}

.devide {
  width: 100%;
  height: 1px;
  background: url("../img/top/line_dot_hor.png") top left repeat;
}

.w560 {
  margin: 0 auto;
  width: 560px !important;
}

.footer {
  margin-top: 40px;
  padding-bottom: 30px;
}

.footer .banner_list {
  width: 89.333%;
  margin: 0 auto;
  letter-spacing: -.40em;
  text-align: center;
}

.footer .banner_list li {
  letter-spacing: normal;
  display: inline-block;
  width: 45%;
  margin-left: 5%;
  margin-bottom: 10px;
}

.footer .banner_list li:nth-child(2n+1) {
  margin-left: 0;
}

.footer .youtube_ch {
  width: 89.333%;
  margin: 20px auto;
}

.footer .archive_list {
  width: 89.333%;
  margin: 0 auto;
  letter-spacing: -.40em;
  text-align: center;
}

.footer .archive_list li {
  letter-spacing: normal;
  display: inline-block;
  vertical-align: top;
  width: 47%;
  margin-left: 5%;
  margin-bottom: 15px;
}

.footer .archive_list li:nth-child(2n+1) {
  margin-left: 0;
}

.footer .share_list {
  margin-top: 20px;
  letter-spacing: -.40em;
  text-align: center;
}

.footer .share_list li {
  letter-spacing: normal;
  display: inline-block;
  vertical-align: top;
  width: 8.1%;
  margin-left: 25px;
}

.footer .share_list li:first-child {
  margin-left: 0px;
}

.footer .page_top {
  width: 18.2%;
  margin: 30px auto;
  text-align: center;
}

.footer .cr {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #000;
}

.wrapper_back {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.wrapper_back .round {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wrapper_back .round img {
  position: relative;
}

.wrapper_back .round_anime1 {
  -webkit-animation: round_animation 40s infinite -110s linear;
  animation: round_animation 40s infinite -110s linear;
}

.wrapper_back .round_anime2 {
  -webkit-animation: round_animation 50s infinite -60s linear;
  animation: round_animation 50s infinite -60s linear;
}

.wrapper_back .round_anime3 {
  -webkit-animation: round_animation 60s infinite -30s linear;
  animation: round_animation 60s infinite -30s linear;
}

.wrapper_back .round_anime4 {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-animation: round_animation 30s infinite 0s linear;
  animation: round_animation 30s infinite 0s linear;
}

.wrapper_back .round_anime5 {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-animation: round_animation 35s infinite 20s linear;
  animation: round_animation 35s infinite 20s linear;
}

.wrapper_back .round_anime6 {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-animation: round_animation 40s infinite 50s linear;
  animation: round_animation 40s infinite 50s linear;
}

.wrapper_back .round_anime1 {
  -webkit-animation: round_animation 60s infinite -100s linear;
  animation: round_animation 60s infinite -100s linear;
}

.wrapper_back .round_anime2 {
  -webkit-animation: round_animation 80s infinite -50s linear;
  animation: round_animation 80s infinite -50s linear;
}

.wrapper_back .round_anime3 {
  -webkit-animation: round_animation 100s infinite -20s linear;
  animation: round_animation 100s infinite -20s linear;
}

@-webkit-keyframes round_animation {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes round_animation {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}