@charset "UTF-8";
@import url(_ress.css);
/* ========================================================
common
=========================================================*/
html, body {
  height: 100%;
  font-family: 'Yu Gothic Pr6N W50 M', "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #000;
  line-height: 1.8; }

html {
  background: #000; }

body {
  font-size: 14px; }

a {
  color: #222;
  text-decoration: underline;
  cursor: pointer; }

section {
  position: relative; }

li {
  list-style: none; }

a:hover {
  opacity: .8;
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out; }
  @media (max-width: 1023px) {
    a:hover {
      opacity: 1; } }

img {
  vertical-align: bottom; }

/* ===============
magnificPopup
================== */
.white-popup {
  position: relative;
  background: #fff;
  border: 5px solid #fff;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: auto;
  max-width: 650px;
  /* デフォルトのモーダルサイズ */
  margin: 20px auto; }

/*特報ムービーサイズ
########################*/
.white-popup-movie {
  position: relative;
  background: #fff;
  border: 5px solid #fff;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: auto;
  max-width: 900px;
  /* 特報のモーダルサイズ */
  margin: 20px auto; }
  .white-popup-movie .backnumber p {
    text-align: left; }
    .white-popup-movie .backnumber p a {
      display: inline-block;
      font-size: 11px;
      text-decoration: none;
      border-radius: 5px;
      margin: 2px;
      padding: 2px 10px; }
      .white-popup-movie .backnumber p a.common {
        color: #fff;
        background: #3d3d3d;
        background: -moz-linear-gradient(left, #3d3d3d 0%, #2b2b2b 100%);
        background: -webkit-linear-gradient(left, #3d3d3d 0%, #2b2b2b 100%);
        background: -webkit-gradient(linear, left top, right top, from(#3d3d3d), to(#2b2b2b));
        background: -o-linear-gradient(left, #3d3d3d 0%, #2b2b2b 100%);
        background: linear-gradient(to right, #3d3d3d 0%, #2b2b2b 100%); }
      .white-popup-movie .backnumber p a.zi-o {
        color: #000;
        border: 1px solid #ccc;
        background: #f4f4f4;
        background: -moz-linear-gradient(left, #f4f4f4 0%, #e8e8e8 100%);
        background: -webkit-linear-gradient(left, #f4f4f4 0%, #e8e8e8 100%);
        background: -webkit-gradient(linear, left top, right top, from(#f4f4f4), to(#e8e8e8));
        background: -o-linear-gradient(left, #f4f4f4 0%, #e8e8e8 100%);
        background: linear-gradient(to right, #f4f4f4 0%, #e8e8e8 100%); }
      .white-popup-movie .backnumber p a.ryusoul {
        color: #fff;
        border: 1px solid #df0000;
        background: #ff2b2b;
        background: -moz-linear-gradient(left, #ff2b2b 0%, #cc0c0c 100%);
        background: -webkit-linear-gradient(left, #ff2b2b 0%, #cc0c0c 100%);
        background: -webkit-gradient(linear, left top, right top, from(#ff2b2b), to(#cc0c0c));
        background: -o-linear-gradient(left, #ff2b2b 0%, #cc0c0c 100%);
        background: linear-gradient(to right, #ff2b2b 0%, #cc0c0c 100%); }

/* ========================================================
presite
=========================================================*/
.main-visual {
  position: relative;
  width: 100%;
  background-image: url(../img/cover_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0; }
  .main-visual .wrap {
    position: relative;
    background-color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 1200px;
    height: 848px;
    margin: 0 auto;
    /* hover animation */ }
    .main-visual .wrap a.goto_zi-o,
    .main-visual .wrap a.goto_ryusoul {
      display: block;
      width: 600px;
      height: 848px;
      position: absolute;
      top: 0;
      z-index: 9;
      opacity: 0;
      -webkit-transition: opacity .6s ease-out;
      -o-transition: opacity .6s ease-out;
      transition: opacity .6s ease-out; }
      .main-visual .wrap a.goto_zi-o img,
      .main-visual .wrap a.goto_ryusoul img {
        display: block; }
      .main-visual .wrap a.goto_zi-o:hover,
      .main-visual .wrap a.goto_ryusoul:hover {
        opacity: 1; }
    .main-visual .wrap a.goto_zi-o {
      left: 0; }
    .main-visual .wrap a.goto_ryusoul {
      right: 0; }
    .main-visual .wrap .cover1, .main-visual .wrap .cover2 {
      width: 600px;
      position: relative; }
      .main-visual .wrap .cover1 img, .main-visual .wrap .cover2 img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin: 0 auto;
        opacity: 0; }
    .main-visual .wrap .loadshow {
      left: 510px;
      position: absolute;
      bottom: 0;
      z-index: 10;
      opacity: 0; }
      .main-visual .wrap .loadshow img {
        width: 178px;
        color: #000; }

/*----- Animation [s] -----*/
body.js-loaded {
  /*
	@keyframes ani-cover1-4 {
		20%		{ opacity: 0; width: 0%;}
		25%		{ opacity: 1; width: 100%; }
		100%	{ opacity: 1; width: 100%; }
	}
	*/ }
  body.js-loaded .main-visual .wrap {
    background-color: none; }
  body.js-loaded .cover1 img.cover1-1 {
    -webkit-animation-name: ani-cover1-1;
    animation-name: ani-cover1-1;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover1 img.cover1-2 {
    -webkit-animation-name: ani-cover1-2;
    animation-name: ani-cover1-2;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover1 img.cover1-3 {
    -webkit-animation-name: ani-cover1-3;
    animation-name: ani-cover1-3;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover1 img.cover1-5 {
    -webkit-animation-name: ani-cover1-5;
    animation-name: ani-cover1-5;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }

@-webkit-keyframes ani-cover1-1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover1-1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover1-2 {
  5% {
    opacity: 0; }
  15% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover1-2 {
  5% {
    opacity: 0; }
  15% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover1-3 {
  7% {
    opacity: 0; }
  17% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover1-3 {
  7% {
    opacity: 0; }
  17% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover1-5 {
  25% {
    opacity: 0;
    left: -50px; }
  30% {
    opacity: 1;
    left: 0; }
  100% {
    opacity: 1;
    left: 0; } }

@keyframes ani-cover1-5 {
  25% {
    opacity: 0;
    left: -50px; }
  30% {
    opacity: 1;
    left: 0; }
  100% {
    opacity: 1;
    left: 0; } }
  body.js-loaded .cover2 img.cover2-1 {
    -webkit-animation-name: ani-cover2-1;
    animation-name: ani-cover2-1;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover2 img.cover2-2 {
    -webkit-animation-name: ani-cover2-2;
    animation-name: ani-cover2-2;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover2 img.cover2-3 {
    -webkit-animation-name: ani-cover2-3;
    animation-name: ani-cover2-3;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover2 img.cover2-4 {
    -webkit-animation-name: ani-cover2-4;
    animation-name: ani-cover2-4;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover2 img.cover2-5 {
    -webkit-animation-name: ani-cover2-5;
    animation-name: ani-cover2-5;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  body.js-loaded .cover2 img.cover2-6 {
    -webkit-animation-name: ani-cover2-6;
    animation-name: ani-cover2-6;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }

@-webkit-keyframes ani-cover2-1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover2-1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover2-2 {
  5% {
    opacity: 0; }
  15% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover2-2 {
  5% {
    opacity: 0; }
  15% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover2-3 {
  7% {
    opacity: 0; }
  17% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover2-3 {
  7% {
    opacity: 0; }
  17% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover2-4 {
  10% {
    opacity: 0; }
  20% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover2-4 {
  10% {
    opacity: 0; }
  20% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover2-5 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-cover2-5 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes ani-cover2-6 {
  25% {
    opacity: 0;
    left: 50px; }
  30% {
    opacity: 1;
    left: 0; }
  100% {
    opacity: 1;
    left: 0; } }

@keyframes ani-cover2-6 {
  25% {
    opacity: 0;
    left: 50px; }
  30% {
    opacity: 1;
    left: 0; }
  100% {
    opacity: 1;
    left: 0; } }
  body.js-loaded .loadshow {
    -webkit-animation-name: ani-loadshow;
    animation-name: ani-loadshow;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running; }

@-webkit-keyframes ani-loadshow {
  35% {
    opacity: 0; }
  45% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-loadshow {
  35% {
    opacity: 0; }
  45% {
    opacity: 1; }
  100% {
    opacity: 1; } }

/*----- Animation [e] -----*/
.box-btn {
  width: 100%;
  height: 7vh;
  min-height: 65px;
  background-color: #000; }
  .box-btn ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left: 1px solid #000; }
    .box-btn ul li {
      display: block;
      width: 100%;
      border-right: 1px solid #000; }
      .box-btn ul li a {
        display: block;
        height: 66px;
        margin: 0;
        padding: 15px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        text-decoration: none;
        border-top: solid 2px #1a76d9;
        background: #0057af;
        background: -moz-linear-gradient(top, #0057af 0%, #19477f 100%);
        background: -webkit-linear-gradient(top, #0057af 0%, #19477f 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(#0057af), to(#19477f));
        background: -o-linear-gradient(top, #0057af 0%, #19477f 100%);
        background: linear-gradient(to bottom, #0057af 0%, #19477f 100%); }
        .box-btn ul li a span {
          font-size: 10px;
          color: #f1c40f; }
        .box-btn ul li a:hover {
          opacity: .6;
          -webkit-transition: all .6s ease-out;
          -o-transition: all .6s ease-out;
          transition: all .6s ease-out; }

.sec-bnr-lowerpage {
  width: 100%;
  border-bottom: 1px solid #4e4e4e;
  margin-bottom: 30px; }
  .sec-bnr-lowerpage ul {
    width: 1200px;
    margin: 30px auto;
    text-align: center; }
    .sec-bnr-lowerpage ul li {
      display: inline-block;
      text-align: center;
      padding: 0 5px; }

.sec-bnr {
  width: 1200px;
  margin: 0 auto; }
  .sec-bnr ul.large {
    width: 100%;
    margin: 20px 0; }
    .sec-bnr ul.large li {
      display: inline-block;
      text-align: center;
      padding: 0 5px 10px; }
  .sec-bnr ul.small {
    width: 100%;
    text-align: center;
    margin: 0 0 20px; }
    .sec-bnr ul.small li {
      display: inline-block;
      text-align: center;
      padding: 0 5px 10px; }
      .sec-bnr ul.small li img {
        height: 70px; }

footer {
  height: 3vh;
  background-color: #000; }
  footer .copyright {
    min-height: 60px;
    font-size: 11px;
    color: #fff;
    text-align: center;
    margin: 10px 0 8px; }
    footer .copyright:after {
      position: relative;
      top: -2px;
      left: 10px;
      content: " ";
      display: inline-block;
      width: 23px;
      height: 20px;
      background: url(../img/toeilogo.png);
      background-size: contain;
      vertical-align: middle; }

/* ========================================================
zi-o
=========================================================*/
.lowerpage header {
  width: 100%;
  height: 68px; }
  .lowerpage header ul {
    text-align: center; }
    .lowerpage header ul li {
      display: inline-block;
      width: 250px;
      vertical-align: top; }
      .lowerpage header ul li a,
      .lowerpage header ul li span.roadshow-img {
        display: block;
        height: 66px;
        margin: 0;
        padding: 15px 0;
        text-align: center;
        color: #fff;
        font-size: 16px;
        letter-spacing: -1px;
        font-weight: bold;
        line-height: 1;
        text-decoration: none; }
        .lowerpage header ul li a span.en,
        .lowerpage header ul li span.roadshow-img span.en {
          font-size: 10px;
          color: #f1c40f; }

.lowerpage #main-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1000px;
  margin: 0 auto; }
  .lowerpage #main-content nav.localnav {
    display: block;
    width: 330px;
    margin-top: 380px; }
    .lowerpage #main-content nav.localnav h1 {
      margin-bottom: 10px; }
    .lowerpage #main-content nav.localnav ul li {
      display: block;
      margin-bottom: 15px; }
  .lowerpage #main-content .content-wrap {
    width: 670px;
    margin-top: 50px; }
    .lowerpage #main-content .content-wrap .content-txt {
      display: none; }
    .lowerpage #main-content .content-wrap .copyright {
      font-size: 11px;
      text-align: center;
      margin: 10px 0 20px; }

#content-zi-o {
  background: #fff url(../zi-o/img/bg_zi-o.png) no-repeat center top; }
  #content-zi-o header ul {
    border-top: solid 2px #6ba8d8;
    background: #38617b;
    background: -moz-linear-gradient(top, #457fac 0%, #38617b 100%);
    background: -webkit-linear-gradient(top, #457fac 0%, #38617b 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#457fac), to(#38617b));
    background: -o-linear-gradient(top, #457fac 0%, #38617b 100%);
    background: linear-gradient(to bottom, #457fac 0%, #38617b 100%); }
    #content-zi-o header ul li {
      border-right: 1px solid #2b516a; }
      #content-zi-o header ul li a:hover {
        opacity: 1;
        background: #38617b; }
  #content-zi-o #main-content .copyright {
    color: #000; }

#content-ryusoul {
  background: #010000 url(../ryusoul/img/bg_ryusoul.png) no-repeat center top; }
  #content-ryusoul header ul {
    border-top: solid 2px #f36767;
    background: #b10d10;
    background: -moz-linear-gradient(top, #d31f22 0%, #b10d10 100%);
    background: -webkit-linear-gradient(top, #d31f22 0%, #b10d10 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#d31f22), to(#b10d10));
    background: -o-linear-gradient(top, #d31f22 0%, #b10d10 100%);
    background: linear-gradient(to bottom, #d31f22 0%, #b10d10 100%); }
    #content-ryusoul header ul li {
      border-right: 1px solid #660406; }
      #content-ryusoul header ul li a:hover {
        opacity: 1;
        background: #b10d10; }
  #content-ryusoul #main-content .copyright {
    color: #fff; }