@charset "UTF-8";
/* reset
---------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input, textarea, select, button {
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 0;
  vertical-align: middle; }

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea,
select,
button {
  border-radius: 0; }

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea,
button {
  -webkit-appearance: none; }

textarea {
  resize: none; }

input[type="button"],
input[type="submit"],
button {
  background: none;
  border: 0;
  cursor: pointer; }

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0; }

.fc-white {
  color: #fff !important; }

  .norBorder {
    border: none !important;
  }

@media screen and (min-width: 770px) {
  body {
    background: #fff repeat;
    color: #333;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "Hiragino Mincho ProN", HGS明朝E, 游明朝, "MS PMincho", "MS 明朝", メイリオ, Meiryo, Georgia, serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased; }
    body a {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: none !important; }
    body a:hover {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: underline !important; }
    body a:active {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: none !important; }
    body a:visited {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: none !important; }
    body .wot {
      display: block !important;
      overflow: hidden !important;
      text-indent: 200% !important;
      white-space: nowrap !important; }
    body .vertical {
      -ms-writing-mode: tb-rl !important;
      writing-mode: vertical-rl !important; }
    body a.btn {
      border-radius: 2px;
      border: 1px #333 solid;
      background: #fff !important;
      box-sizing: border-box;
      color: #333 !important;
      display: block !important;
      font-size: 15px !important;
      font-weight: bold !important;
      height: 65px !important;
      letter-spacing: 0.2em;
      margin: 0 auto !important;
      padding: 24px 0 0 0 !important;
      text-align: center !important;
      width: auto !important; }
      body a.btn:before {
        display: inline-block;
        content: "＞";
        margin-right: 7px; }
      body a.btn:hover {
        background: #333 !important;
        color: #fff !important;
        opacity: 1 !important;
        text-decoration: none !important; }
    body button.btn {
      border-radius: 2px;
      background: #fff !important;
      border: 1px #333 solid !important;
      box-sizing: border-box;
      color: #333 !important;
      display: block !important;
      font-size: 15px !important;
      font-weight: bold !important;
      height: 65px !important;
      letter-spacing: 0.2em;
      margin: 0 auto !important;
      padding: 23px 0 0 0 !important;
      text-align: center !important;
      width: auto !important; }
      body button.btn:before {
        display: inline-block;
        content: "＞";
        margin-right: 7px; }
      body button.btn:hover {
        background: #333 !important;
        color: #fff !important;
        opacity: 0.9 !important;
        text-decoration: none !important; }
    body #isSp {
      display: none;
      height: 0;
      line-height: 0;
      max-height: 0;
      max-width: 0;
      min-height: 0;
      min-width: 0;
      width: 0; }
    body.page #wrapper #header .container .logo a {
      background: url(../../images/pc/logo-black.svg) transparent no-repeat;
      background-position: center top;
      background-size: 100% auto; }
    body.page #wrapper #header .container #gnav ul li a {
      color: #333 !important;
      text-shadow: none; }
      body.page #wrapper #header .container #gnav ul li a:hover {
        color: #333 !important; }
    body.page #wrapper #header .container #gnav ul li.store a {
      background: #333;
      color: #fff !important; }
      body.page #wrapper #header .container #gnav ul li.store a:hover {
        background: transparent;
        border-color: #333;
        color: #333 !important;
        text-decoration: none !important; }
    body.page #wrapper .bannerOnlineStore {
      background: url(../../images/pc/kv-banner-store.jpg) transparent no-repeat;
      background-position: center center;
      background-size: cover;
      display: block;
      height: 380px;
      margin: 100px auto 0 auto;
      padding: 0;
      width: 100%; }
      body.page #wrapper .bannerOnlineStore .container {
        -ms-flex-align: center;
            align-items: center;
        -webkit-align-items: center;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-pack: center;
            justify-content: center;
        height: 380px;
        margin: 0 auto;
        max-width: auto;
        overflow: hidden;
        padding: 0 0 0 0;
        text-align: left;
        width: 98%; }
        body.page #wrapper .bannerOnlineStore .container .beaten {
          display: block;
          height: 173px;
          width: 342px; }
          body.page #wrapper .bannerOnlineStore .container .beaten .pc {
            display: block;
            height: auto;
            margin: 0 0 0 30px;
            width: 100%; }
          body.page #wrapper .bannerOnlineStore .container .beaten .sp {
            display: none; }
        body.page #wrapper .bannerOnlineStore .container .btn.online {
          float: left !important;
          font-size: 15px !important;
          height: 58px !important;
          margin: 10px 0 0 90px  !important;
          padding-top: 21px !important;
          width: 290px !important; }
          body.page #wrapper .bannerOnlineStore .container .btn.online.camingsoon {
            color: #aaa !important;
            font-weight: normal !important; }
            body.page #wrapper .bannerOnlineStore .container .btn.online.camingsoon:before {
              display: none; }
            body.page #wrapper .bannerOnlineStore .container .btn.online.camingsoon:hover {
              background: #fff !important;
              border-color: #aaa !important;
              color: #aaa !important; }
    body #wrapper {
      height: auto;
      margin: 0 auto;
      overflow: hidden; }
      body #wrapper .gnavSp {
        display: none; }
      body #wrapper #header {
        display: block;
        height: 100px;
        position: absolute;
        width: 100%;
        z-index: 1000; }
        body #wrapper #header .container {
          display: block;
          height: auto;
          overflow: hidden;
          width: 100%; }
          body #wrapper #header .container .logo {
            display: block;
            float: left;
            height: 82px;
            margin: 30px 0 0 30px;
            width: 232px; }
            body #wrapper #header .container .logo a {
              background: url(../../images/pc/logo-white.svg) transparent no-repeat;
              background-position: center top;
              background-size: 100% auto;
              display: block;
              height: 82px;
              width: 232px; }
              body #wrapper #header .container .logo a:hover {
                opacity: 0.9; }
          body #wrapper #header .container #gnav {
            display: block;
            float: right;
            margin: 37px 30px 0 0; }
            body #wrapper #header .container #gnav ul li {
              display: block;
              float: left;
              margin: 0 20px 0 0; }
              body #wrapper #header .container #gnav ul li:last-child {
                margin-right: 0; }
              body #wrapper #header .container #gnav ul li a {
                box-sizing: border-box;
                color: #fff !important;
                display: block;
                font-size: 15px;
                font-weight: bold;
                padding: 16px 10px;
                text-align: center;
                text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 3px, rgba(0, 0, 0, 0.4) -1px -1px 3px, rgba(0, 0, 0, 0.4) -1px 1px 3px, rgba(0, 0, 0, 0.4) 1px -1px 3px, rgba(0, 0, 0, 0.4) 0px 1px 3px, rgba(0, 0, 0, 0.4) 0 -1px 3px, rgba(0, 0, 0, 0.4) -1px 0 3px, rgba(0, 0, 0, 0.4) 1px 0 3px; }
                body #wrapper #header .container #gnav ul li a:hover {
                  text-shadow: none; }
              body #wrapper #header .container #gnav ul li.store a {
                border-radius: 2px;
                background: rgba(0, 0, 0, 0.6);
                border: 1px #fff solid;
                padding: 15px 25px;
                text-shadow: none; }
                body #wrapper #header .container #gnav ul li.store a:hover {
                  background: rgba(0, 0, 0, 0.4);
                  text-decoration: none !important; }
          body #wrapper #header .container .switchGnav {
            display: none; }
      body #wrapper #footer {
        background: #fff;
        box-sizing: border-box;
        display: block;
        padding: 10px 0 35px 0;
        overflow: hidden; }
        body #wrapper #footer .logo {
          display: block;
          float: left;
          height: 70px;
          margin: 30px 0 0 30px;
          width: 197px; }
          body #wrapper #footer .logo a {
            background: url(../../images/pc/logo-black.svg) transparent no-repeat;
            background-position: center top;
            background-size: 100% auto;
            display: block;
            height: 70px;
            width: 197px; }
            body #wrapper #footer .logo a:hover {
              opacity: 0.9; }
        body #wrapper #footer .fnav {
          display: block;
          float: right;
          margin: 50px 40px 0 0;
          overflow: hidden; }
          body #wrapper #footer .fnav ul li {
            display: block;
            float: left; }
            body #wrapper #footer .fnav ul li:after {
              display: inline-block;
              content: " | ";
              padding: 0 12px; }
            body #wrapper #footer .fnav ul li:last-child {
              margin-right: 0; }
              body #wrapper #footer .fnav ul li:last-child:after {
                display: none; }
            body #wrapper #footer .fnav ul li a {
              box-sizing: border-box;
              color: #333 !important;
              display: inline-block;
              font-size: 15px;
              font-weight: bold;
              text-align: center; }
        body #wrapper #footer .copyright {
          clear: both;
          display: block;
          float: right;
          font-size: 14px;
          margin: 20px 40px 0 0; }
      body #wrapper .breadcrumb {
        display: block;
        width: 100%; }
        body #wrapper .breadcrumb .container {
          box-sizing: border-box;
          margin: 120px auto 0 auto;
          padding: 30px 30px 20px 30px;
          width: 100%; }
          body #wrapper .breadcrumb .container ul {
            display: block;
            overflow: hidden; }
            body #wrapper .breadcrumb .container ul li {
              display: block;
              float: left;
              font-size: 14px; }
              body #wrapper .breadcrumb .container ul li:after {
                content: "＞";
                padding: 0 20px; }
              body #wrapper .breadcrumb .container ul li:last-child:after {
                display: none; }
              body #wrapper .breadcrumb .container ul li a {
                color: #333 !important;
                font-size: 14px;
                font-weight: bold; }
                body #wrapper .breadcrumb .container ul li a:hover {
                  color: #333 !important; } }

@media screen and (min-width: 770px) and (max-width: 1240px) {
  body #wrapper .about .container .movie .description {
    margin: 20px 0 0 18% !important;
    width: 80% !important; } }

@media screen and (min-width: 770px) and (max-width: 1080px) {
  body #wrapper #header #gnav ul li {
    margin-right: 12px !important; }
  body #wrapper #header #gnav ul li.store {
    margin-right: 10px !important; }
  body #wrapper #header #gnav ul li a {
    padding: 16px 8px !important; }
  body #wrapper #header #gnav ul li.store a {
    padding: 16px 12px !important; } }

@media screen and (min-width: 770px) and (max-width: 979px) {
  body #wrapper #header .logo {
    margin-left: 20px !important; }
  body #wrapper #header #gnav {
    margin-right: 20px !important; }
  body #wrapper #header #gnav ul li {
    margin-right: 7px !important; }
  body #wrapper #header #gnav ul li.store {
    margin-right: 0 !important; }
  body #wrapper #header #gnav ul li a {
    padding: 16px 6px !important; }
  body #wrapper #header #gnav ul li.store a {
    padding: 16px 12px !important; }
  body #wrapper .breadcrumb .container {
    padding: 20px 20px 20px 20px; } }

@media screen and (min-width: 770px) and (max-width: 899px) {
  body #wrapper #header .logo {
    height: 61px !important;
    margin-left: 10px !important;
    width: 174px !important; }
    body #wrapper #header .logo a {
      height: 61px !important;
      width: 174px !important; }
  body #wrapper #header #gnav {
    margin-right: 10px !important; }
  body #wrapper #header #gnav ul li {
    margin-right: 4px !important; }
  body #wrapper #header #gnav ul li.store {
    margin-top: 1px !important;
    margin-right: 0 !important; }
  body #wrapper #header #gnav ul li a {
    font-size: 14px !important;
    padding: 16px 6px !important; }
  body #wrapper #header #gnav ul li.store a {
    padding: 13px 8px !important; }
  body #wrapper .breadcrumb .container {
    padding: 0 10px 20px 10px; } }

@media screen and (max-width: 769px) {
  body {
    background: #fff repeat;
    color: #333;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "Hiragino Mincho ProN", HGS明朝E, 游明朝, "MS PMincho", "MS 明朝", メイリオ, Meiryo, Georgia, serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased; }
    body a {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: none !important; }
    body a:hover {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: none !important; }
    body a:active {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: none !important; }
    body a:visited {
      color: #013566 !important;
      cursor: pointer !important;
      text-decoration: none !important; }
    body .wot {
      display: block !important;
      overflow: hidden !important;
      text-indent: 200% !important;
      white-space: nowrap !important; }
    body a.btn {
      border-radius: 2px;
      background: #fff !important;
      border: 1px #333 solid !important;
      box-sizing: border-box;
      color: #333 !important;
      display: block !important;
      font-size: 12px !important;
      font-weight: bold !important;
      height: 45px !important;
      margin: 0 auto !important;
      padding: 15px 0 0 0 !important;
      text-align: center !important;
      width: auto !important; }
      body a.btn:before {
        display: inline-block;
        content: "＞";
        margin-right: 7px; }
      body a.btn:hover {
        background: #333 !important;
        color: #fff !important;
        opacity: 1 !important;
        text-decoration: none !important; }
    body button.btn {
      border-radius: 2px;
      background: #fff !important;
      border: 1px #333 solid !important;
      box-sizing: border-box;
      color: #333 !important;
      display: block !important;
      font-size: 12px !important;
      font-weight: bold !important;
      height: 45px !important;
      margin: 0 auto !important;
      padding: 15px 0 0 0 !important;
      text-align: center !important;
      width: auto !important; }
      body button.btn:before {
        display: inline-block;
        content: "＞";
        margin-right: 7px; }
      body button.btn:hover {
        background: #333 !important;
        color: #fff !important;
        opacity: 0.9 !important;
        text-decoration: none !important; }
    body #isSp {
      display: block;
      height: 0;
      line-height: 0;
      max-height: 0;
      max-width: 0;
      min-height: 0;
      min-width: 0;
      width: 0; }
    body.page.headerBlack #wrapper #header .container .logo a {
      background: url(../../images/sp/logo-black.svg) transparent no-repeat;
      background-position: center top;
      background-size: 100% auto; }
    body.page.headerBlack #wrapper #header .container .switchGnav a.ico {
      color: #333 !important; }
    body.page #wrapper #header .container .logo {
      display: block;
      height: 37px;
      margin: 15px 0 0 0;
      position: absolute;
      z-index: 1000;
      width: 105px; }
      body.page #wrapper #header .container .logo a {
        background: url(../../images/sp/logo-white.svg) transparent no-repeat;
        background-position: center top;
        background-size: 100% auto;
        display: block;
        height: 37px;
        width: 105px; }
    body.page #wrapper .bannerOnlineStore {
      background: url(../../images/sp/kv-banner-store.jpg) transparent no-repeat;
      background-position: center center;
      background-size: cover;
      display: block;
      height: 320px;
      margin: 3em auto 0 auto;
      padding: 0;
      width: 100%; }
      body.page #wrapper .bannerOnlineStore .container {
        -ms-flex-align: center;
            align-items: center;
        -webkit-align-items: center;
        box-sizing: border-box !important;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 320px; }
        body.page #wrapper .bannerOnlineStore .container .beaten {
          display: block;
          height: auto;
          margin: 0 auto;
          overflow: hidden;
          padding: 0;
          width: 50%; }
          body.page #wrapper .bannerOnlineStore .container .beaten .pc {
            display: none; }
          body.page #wrapper .bannerOnlineStore .container .beaten .sp {
            display: block;
            height: auto;
            margin: 0 auto;
            width: 100%; }
        body.page #wrapper .bannerOnlineStore .container .btn.online {
          margin: 45px auto 0 auto !important;
          width: 70% !important; }
          body.page #wrapper .bannerOnlineStore .container .btn.online.camingsoon {
            border-color: #aaa !important;
            color: #aaa !important;
            font-weight: normal !important; }
            body.page #wrapper .bannerOnlineStore .container .btn.online.camingsoon:before {
              display: none; }
            body.page #wrapper .bannerOnlineStore .container .btn.online.camingsoon:hover {
              background: #fff !important;
              border-color: #aaa !important;
              color: #aaa !important; }
    body #wrapper {
      height: auto;
      margin: 0 auto;
      overflow: hidden;
      min-width: 320px !important; }
      body #wrapper .gnavSp {
        background: #333;
        box-sizing: border-box;
        display: none;
        height: auto;
        margin: 0 auto;
        min-height: 568px;
        position: fixed;
        z-index: 1100;
        width: 100%; }
        body #wrapper .gnavSp .head {
          margin: 0 auto;
          overflow: hidden;
          width: 92%; }
          body #wrapper .gnavSp .head .logo {
            display: block;
            float: left;
            height: 37px;
            margin: 15px 0 0 0;
            width: 105px; }
            body #wrapper .gnavSp .head .logo a {
              background: url(../../images/sp/logo-white.svg) transparent no-repeat;
              background-position: center top;
              background-size: 100% auto;
              display: block;
              height: 37px;
              width: 105px; }
          body #wrapper .gnavSp .head .switchGnav {
            display: block;
            float: right;
            margin: 19px 2px 0 0; }
            body #wrapper .gnavSp .head .switchGnav a.ico {
              color: #fff !important;
              display: block;
              font-size: 26px; }
        body #wrapper .gnavSp .main {
          display: block;
          margin: 1.5em auto 0 auto;
          width: 92%; }
          body #wrapper .gnavSp .main li {
            margin: 0 auto;
            width: 90%; }
            body #wrapper .gnavSp .main li a {
              display: block;
              color: #fff !important;
              font-size: 13px !important;
              padding: 0.75em 0;
              width: 100%; }
          body #wrapper .gnavSp .main li.store.store {
            margin-bottom: 1.5em;
            width: 100%; }
            body #wrapper .gnavSp .main li.store.store a.btn {
              color: #333 !important;
              padding: 15px 0 0 0 !important; }
              body #wrapper .gnavSp .main li.store.store a.btn:before {
                display: none !important; }
              body #wrapper .gnavSp .main li.store.store a.btn:hover, body #wrapper .gnavSp .main li.store.store a.btn:active, body #wrapper .gnavSp .main li.store.store a.btn:visited {
                background: #fff !important; }
        body #wrapper .gnavSp .foot {
          display: block;
          margin: 3em auto 0 auto;
          padding: 0 0 2.5em 0;
          text-align: center;
          width: 92%; }
          body #wrapper .gnavSp .foot li {
            display: inline-block; }
            body #wrapper .gnavSp .foot li:after {
              display: inline-block;
              color: #fff;
              content: " | ";
              padding: 0 0.2em 0 0.5em; }
            body #wrapper .gnavSp .foot li:last-child {
              margin-right: 0; }
              body #wrapper .gnavSp .foot li:last-child:after {
                display: none; }
            body #wrapper .gnavSp .foot li a {
              box-sizing: border-box;
              color: #fff !important;
              display: inline-block;
              font-size: 12px;
              text-align: center; }
      body #wrapper #header {
        display: block;
        height: 100px;
        position: absolute;
        width: 100%;
        z-index: 1000; }
        body #wrapper #header .container {
          display: block;
          height: auto;
          margin: 0 auto;
          overflow: hidden;
          width: 92%; }
          body #wrapper #header .container .logo {
            display: none; }
          body #wrapper #header .container #gnav {
            display: none; }
          body #wrapper #header .container .switchGnav {
            display: block;
            float: right;
            margin: 19px 2px 0 0; }
            body #wrapper #header .container .switchGnav a.ico {
              color: #fff !important;
              display: block;
              font-size: 26px; }
      body #wrapper #footer {
        background: #fff;
        box-sizing: border-box;
        display: block;
        padding: 2em 0 2em 0;
        overflow: hidden; }
        body #wrapper #footer .logo {
          display: block;
          height: 49px;
          margin: 0 auto;
          width: 138px; }
          body #wrapper #footer .logo a {
            background: url(../../images/sp/logo-black.svg) transparent no-repeat;
            background-position: center top;
            background-size: 100% auto;
            display: block;
            height: 49px;
            width: 138px; }
            body #wrapper #footer .logo a:hover {
              opacity: 0.9; }
        body #wrapper #footer .fnav {
          display: block;
          margin: 2em auto 3em auto;
          overflow: hidden;
          text-align: center;
          width: 92%; }
          body #wrapper #footer .fnav ul li {
            display: inline-block; }
            body #wrapper #footer .fnav ul li:after {
              display: inline-block;
              content: " | ";
              padding: 0 0.2em 0 0.5em; }
            body #wrapper #footer .fnav ul li:last-child {
              margin-right: 0; }
              body #wrapper #footer .fnav ul li:last-child:after {
                display: none; }
            body #wrapper #footer .fnav ul li a {
              box-sizing: border-box;
              color: #333 !important;
              display: inline-block;
              font-size: 10px;
              font-weight: bold;
              text-align: center; }
        body #wrapper #footer .copyright {
          clear: both;
          display: block;
          font-size: 9px;
          margin: 0 auto;
          text-align: center; }
      body #wrapper .breadcrumb {
        display: none; } }

@media screen and (min-width: 411px) and (max-width: 769px) {
  body #wrapper .bannerOnlineStore .container .beaten {
    width: 40% !important; } }

.animation {
  position: relative;
  opacity: 0;
  -ms-transform: translate(0, 1em);
      transform: translate(0, 1em);
  transition: all 2s cubic-bezier(0.155, 0.91, 0.695, 0.95); }
  .animation.run {
    opacity: 1;
    -ms-transform: translate(0, 0);
        transform: translate(0, 0); }

.animationIndexMvLogo {
  animation: fadeOut 1s ease 3s 1 forwards;
  -webkit-animation: fadeOut 1s ease 3s 1 forwards;
  opacity: 1; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }