@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: .5;
  -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; }

/* ========================================================
presite
=========================================================*/
.pre .visual {
  margin: 0 auto;
  line-height: 0; }
  .pre .visual span {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0; }
  .pre .visual img {
    width: 100%; }

nav.toplocalnav {
  display: block;
  width: 100%;
  border-bottom: 1px solid #000; }
  nav.toplocalnav ul {
    overflow: hidden; }
    nav.toplocalnav ul li {
      display: inline-block;
      width: 50%;
      float: left; }
      nav.toplocalnav ul li img {
        width: 100%; }

.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 {
    background-color: #000;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0 auto; }
    .main-visual .wrap .loadshow {
      left: 39vw;
      position: absolute;
      bottom: 0;
      opacity: 0;
      z-index: 9;
      -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; }
      .main-visual .wrap .loadshow img {
        width: 80px;
        color: #000; }
    .main-visual .wrap .cover1, .main-visual .wrap .cover2 {
      position: relative;
      width: 50%;
      opacity: 0; }
      .main-visual .wrap .cover1 img, .main-visual .wrap .cover2 img {
        width: 100%; }

/*----- Animation [s] -----*/
body.js-loaded .main-visual .wrap {
  background-color: none; }

body.js-loaded .cover1 {
  -webkit-animation-name: ani-cover1;
  animation-name: ani-cover1;
  -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 {
  -webkit-animation-name: ani-cover2;
  animation-name: ani-cover2;
  -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 .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-cover1 {
  10% {
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    opacity: 1; } }

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

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

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

@-webkit-keyframes ani-loadshow {
  30% {
    opacity: 0; }
  40% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes ani-loadshow {
  30% {
    opacity: 0; }
  40% {
    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%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0057af', endColorstr='#19477f',GradientType=0 );
        /*&:hover{
					opacity: .6;
					transition: all .6s ease-out;
				}*/ }
        .box-btn ul li a span {
          font-size: 10px;
          color: #f1c40f; }

.sec-bnr {
  width: 100%;
  margin: 0 auto; }
  .sec-bnr ul.large {
    width: 100%; }
    .sec-bnr ul.large li {
      text-align: center;
      margin: 20px 0; }
      .sec-bnr ul.large li img {
        width: 90%;
        margin: 0 auto; }
  .sec-bnr ul.small {
    width: 100%; }
    .sec-bnr ul.small li {
      text-align: center;
      margin: 0 0 20px; }
      .sec-bnr ul.small li img {
        width: 50%;
        margin: 0 auto; }

#sec-movie {
  background-color: #fff;
  padding: 20px; }
  #sec-movie h2 {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-bottom: 2vh;
    font-size: 8vw; }
  #sec-movie article .iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; }
    #sec-movie article .iframe-wrap iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%; }
  #sec-movie article p {
    text-align: center;
    font-weight: bold;
    margin-top: 1vh;
    margin-bottom: 2vh; }
    #sec-movie article p span {
      padding-right: 5px; }
    #sec-movie article p.common span {
      color: #222; }
    #sec-movie article p.zi-o span {
      color: #aaa; }
    #sec-movie article p.ryusoul span {
      color: #ff2b2b; }

#sec-maeuri_tokuten {
  background-color: #ffde00;
  padding: 20px; }
  #sec-maeuri_tokuten figure img {
    width: 100%; }
  #sec-maeuri_tokuten figure figcaption {
    display: none; }

#sec-premium_tokuten {
  background-color: #0082ff;
  padding: 20px; }
  #sec-premium_tokuten figure img {
    width: 100%; }
  #sec-premium_tokuten figure figcaption {
    display: none; }

#sec-visitor_tokuten {
  background-color: #ff0042;
  padding: 20px; }
  #sec-visitor_tokuten figure img {
    width: 100%; }
  #sec-visitor_tokuten figure figcaption {
    display: none; }

footer {
  height: 3vh; }
  footer .copyright {
    min-height: 25px;
    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; }

#switchSphone2PC p {
  text-align: center;
  color: #fff; }
  #switchSphone2PC p a {
    color: #fff; }

/* ========================================================
zi-o
=========================================================*/
.lowerpage h1 {
  position: relative; }
  .lowerpage h1 img {
    display: block;
    width: 100%;
    vertical-align: bottom; }

.lowerpage header {
  width: 100%; }
  .lowerpage header ul {
    text-align: center; }
    .lowerpage header ul li {
      display: inline-block;
      width: 50%;
      vertical-align: top; }
      .lowerpage header ul li a,
      .lowerpage header ul li span.roadshow-img {
        display: block;
        margin: 0;
        padding: 10px 0;
        text-align: center;
        color: #fff;
        font-size: 14px;
        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 {
  width: 100%; }
  .lowerpage #main-content .content-wrap {
    width: 100%; }
    .lowerpage #main-content .content-wrap h2 {
      position: relative; }
      .lowerpage #main-content .content-wrap h2 img {
        display: block;
        width: 100%;
        vertical-align: bottom; }
    .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; }

.lowerpage nav.localnav {
  display: block;
  width: 100%; }
  .lowerpage nav.localnav ul li {
    width: 100%;
    display: block; }
    .lowerpage nav.localnav ul li img {
      width: 100%; }

#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 header ul li:first-child {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #2b516a; }
  #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 header ul li:first-child {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #660406; }
  #content-ryusoul #main-content .copyright {
    color: #fff; }