@charset "UTF-8";
/* --------------------

0.html & body
1.header
2.top
3.about
4,switch
5.store
6.footer

 -------------------- */
img {
  height: auto;
  width: 100%; }

.InVfadeInUp, .InVfadeInDown,
.InVfadeInRight, .InVfadeInLeft {
  opacity: 1; }
  @media (min-width: 750px) {
    .InVfadeInUp, .InVfadeInDown,
    .InVfadeInRight, .InVfadeInLeft {
      opacity: 0;
      -webkit-animation-delay: .2s;
      animation-delay: .2s; }
      .InVfadeInUp .stop, .InVfadeInDown .stop,
      .InVfadeInRight .stop, .InVfadeInLeft .stop {
        opacity: 1; } }

.eWrapper .eInner {
  display: inline-block; }

@media (min-width: 750px) {
  a, .modal_open {
    transition: all .3s; }

  a:hover, .modal_open:hover {
    cursor: pointer;
    filter: brightness(1.35); }

  footer .bn a:hover {
    filter: brightness(1); }

  .btn {
    position: relative; }
    .btn a {
      display: block;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%; }

  .btn a:hover {
    filter: brightness(1.8); }

  #top .btn a:hover {
    filter: brightness(1.35); } }
@-webkit-keyframes day {
  0% {
    filter: brightness(1); }
  50% {
    filter: brightness(1.4); }
  100% {
    filter: brightness(1); } }
@keyframes day {
  0% {
    filter: brightness(1); }
  50% {
    filter: brightness(1.4); }
  100% {
    filter: brightness(1); } }
@media (min-width: 750px) {
  .InVFlashIn {
    filter: brightness(0.8); }

  .flashIn {
    -webkit-animation-name: flashIn;
    -webkit-animation-duration: 1s;
    animation-name: flashIn;
    animation-duration: 1s; } }
@-webkit-keyframes flashIn {
  0% {
    filter: brightness(0.8); }
  50% {
    filter: brightness(1.8); }
  100% {
    filter: brightness(1); } }
@keyframes flashIn {
  0% {
    filter: brightness(0.8); }
  50% {
    filter: brightness(1.8); }
  100% {
    filter: brightness(1); } }
@keyframes color_open_left {
  0% {
    left: 0%; }
  100% {
    left: -100%; } }
@keyframes color_open_right {
  0% {
    right: 0%; }
  100% {
    right: -100%; } }
@keyframes color_open_top {
  0% {
    top: 0%; }
  100% {
    top: -100%; } }
@keyframes color_open_bottom {
  0% {
    bottom: 0%; }
  100% {
    bottom: -100%; } }
/*@keyframes color_passing{
  0%{
    left: 0%;
  }
  30%{
    left: -100%;
    width: 100%;
  }
  30.1%{
    left: 200%;
    width: 100%;
  }
  50%{
    left: -100%;
    width: 200%;
  }
  100%{
    left: -100%;
    width: 100%;
  }
}*/
/* 0.html & body */
#loading {
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 999; }
  #loading::before {
    background: #001747;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .7s;
    width: 100%;
    height: 50%; }
  #loading::after {
    background: #001747;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all .7s;
    width: 100%;
    height: 50%; }
  #loading.out {
    pointer-events: none; }
    #loading.out::before {
      left: 0;
      top: -100%; }
    #loading.out::after {
      left: 0;
      bottom: -100%; }
    #loading.out #percent {
      display: none; }
  #loading #percent {
    display: block;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transition: all .2s;
    transform: rotateY(-1px);
    z-index: 999; }

html {
  position: relative; }
  html body {
    background: url(../img/bg-sp.jpg) no-repeat top left/contain;
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    color: #fff;
    font-size: 2.4vw;
    text-align: left;
    position: relative; }
    html body::before {
      background: url(../img/bg-sp.jpg) no-repeat top left/100% auto;
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-bottom: 108px;
      content: "";
      z-index: -1; }
    @media (min-width: 750px) {
      html body {
        font-size: 0.9375vw; } }
    @media (min-width: 960px) {
      html body {
        background: linear-gradient(to bottom, rgba(0, 5, 148, 0) 0%, rgba(0, 5, 148, 0.3) 30%, #000594 100%) scroll, url(../img/bg.jpg) no-repeat top left/cover fixed;
        background: -moz-linear-gradient(top, rgba(0, 5, 148, 0) 0%, #000594 100%) scroll, url(../img/bg.jpg) no-repeat top/cover fixed;
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0, 5, 148, 0) 0%, #000594 100%) scroll, url(../img/bg.jpg) no-repeat top left/cover fixed;
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0, 5, 148, 0) 0%, #000594 100%) scroll, url(../img/bg.jpg) no-repeat top left/cover fixed;
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        background-blend-mode: overlay;
        font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
        color: #fff;
        font-size: 0.9375vw;
        text-align: left;
        position: relative; }
        html body::before {
          display: none; } }
    html body .page_wrap {
      position: relative;
      overflow: hidden; }
    html body canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-width: 1280px;
      z-index: -1; }
    html body .pc {
      display: none; }
      @media (min-width: 750px) {
        html body .pc {
          display: block; } }
    html body .sp {
      display: block; }
      @media (min-width: 750px) {
        html body .sp {
          display: none; } }

/* 1.header */
header {
  position: absolute;
  right: 0;
  z-index: 100;
  width: 14.4vw; }
  @media (min-width: 750px) {
    header {
      width: 5.625vw; } }

/* 2.top */
#top {
  width: 100%; }
  @media (min-width: 750px) {
    #top {
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      position: relative;
      margin: 0 auto;
      width: 61.4583333333vw; } }
  #top .visual {
    transform: translate3d(0, 0, 0);
    position: relative;
    top: -28.8vw;
    width: 100%; }
    @media (min-width: 750px) {
      #top .visual {
        top: -11.2vw;
        left: -6.4vw;
        right: 0;
        margin: 0;
        width: 43.75vw; } }
    #top .visual .glitch {
      position: relative;
      height: 141.86vw; }
      @media (min-width: 750px) {
        #top .visual .glitch {
          margin-top: -1.2vw;
          margin-left: 4.5vw;
          height: 66.4583333333vw; } }
      #top .visual .glitch figure {
        margin: 0 auto;
        height: 100%;
        width: 92%; }
        #top .visual .glitch figure img {
          position: absolute;
          top: -1.2vw;
          left: 4.5vw; }
        @media (min-width: 750px) {
          #top .visual .glitch figure {
            margin: 0;
            height: 100%;
            width: 43.0729166667vw; } }
    #top .visual > figure:nth-child(2) {
      position: absolute;
      top: 50vw;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 95%; }
      @media (min-width: 750px) {
        #top .visual > figure:nth-child(2) {
          top: 22.9vw;
          left: 2vw;
          margin: 0;
          width: 43.75vw; } }
  #top .inr {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    margin: -50.5vw auto 0;
    width: 94vw; }
    @media (min-width: 750px) {
      #top .inr {
        position: absolute;
        right: -2.34375vw;
        box-sizing: border-box;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        margin: 0 auto;
        width: 32.8125vw; } }
    #top .inr div {
      width: 51.6%; }
      @media (min-width: 750px) {
        #top .inr div {
          width: 32.7604166667vw; } }
      @media (min-width: 750px) {
        #top .inr div h1 {
          margin: 2.0833333333vw auto 0;
          width: 24.84375vw; } }
      #top .inr div .day {
        margin-top: 1vw;
        margin-left: 2vw; }
        @media (min-width: 750px) {
          #top .inr div .day {
            margin: 0 auto 0.2604166667vw 1.3020833333vw;
            width: 31.4583333333vw; } }
        #top .inr div .day img {
          -webkit-animation-name: day;
          -webkit-animation-duration: 3s;
          -webkit-animation-iteration-count: infinite;
          animation-name: day;
          animation-duration: 3s;
          animation-iteration-count: infinite; }
    #top .inr figure {
      background: url(../img/thumb_switch.png) no-repeat center/contain;
      margin-bottom: 1.5vw;
      width: 48%; }
      @media (min-width: 750px) {
        #top .inr figure {
          margin: 0.5208333333vw auto 0 4.7916666667vw;
          width: 23.75vw; }
          #top .inr figure img {
            opacity: 0;
            transition: all .5s; }
            #top .inr figure img:hover {
              opacity: .5; } }
  #top .spec {
    margin-top: 5.3333333333vw; }
    @media (min-width: 750px) {
      #top .spec {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        display: flex;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        top: -28vw;
        position: relative;
        z-index: 10;
        width: 100%; } }
    #top .spec .btn {
      margin: 4vw auto 0;
      width: 73.7333vw; }
      #top .spec .btn + .btn {
        margin: 1.3333333333vw auto 4vw; }
      @media (min-width: 750px) {
        #top .spec .btn {
          margin: 0.5208333333vw auto 0;
          width: 28.6979166667vw; } }
    #top .spec table {
      display: block;
      table-layout: fixed;
      margin: 0 auto;
      width: 100%; }
      @media (min-width: 750px) {
        #top .spec table {
          margin: 0;
          width: 29.6875vw; } }
      #top .spec table tr th {
        line-height: 150%;
        font-weight: normal;
        vertical-align: top;
        width: 30%; }
        @media (min-width: 750px) {
          #top .spec table tr th {
            line-height: 170%; } }
      #top .spec table tr td {
        line-height: 150%; }
        @media (min-width: 750px) {
          #top .spec table tr td {
            line-height: 170%; } }
      #top .spec table tr:first-child td small {
        font-size: 1.6vw;
        vertical-align: top;
        line-height: 120%;
        width: 70%; }
        @media (min-width: 750px) {
          #top .spec table tr:first-child td small {
            line-height: 160%;
            font-size: 0.625vw; } }
    #top .spec .right {
      border: #35e6ed solid 1px;
      box-sizing: border-box;
      background: rgba(0, 40, 60, 0.75);
      padding: 2.6666666667vw;
      margin: 1.3333333333vw auto 0;
      width: 94vw; }
      @media (min-width: 750px) {
        #top .spec .right {
          border: #35e6ed solid 1px;
          box-sizing: border-box;
          background: rgba(0, 40, 60, 0.75);
          padding: 1.0416666667vw;
          margin: 0;
          width: 50%; } }
      #top .spec .right .btn {
        width: 24vw; }
    #top .spec .left {
      margin: 1.3333333333vw auto 10.6666666667vw;
      width: 94vw; }
      @media (min-width: 750px) {
        #top .spec .left {
          margin: 0;
          width: 48%; } }
      #top .spec .left > ul {
        border: #35e6ed solid 1px;
        box-sizing: border-box;
        background: rgba(0, 40, 60, 0.75);
        padding: 2.6666666667vw; }
        @media (min-width: 750px) {
          #top .spec .left > ul {
            border: #35e6ed solid 1px;
            box-sizing: border-box;
            background: rgba(0, 40, 60, 0.75);
            padding: 1.0416666667vw; } }
        #top .spec .left > ul > li {
          padding-left: 1.2em;
          position: relative;
          line-height: 150%; }
          #top .spec .left > ul > li::before {
            content: "■";
            position: absolute;
            top: 0;
            left: 0; }
          #top .spec .left > ul > li:not(:first-child) {
            margin-top: 0.9333333333vw; }
            @media (min-width: 750px) {
              #top .spec .left > ul > li:not(:first-child) {
                margin-top: 0.3645833333vw; } }
        #top .spec .left > ul ul li {
          margin-top: 0.9333333333vw;
          padding-left: 1.2em;
          position: relative;
          line-height: 150%; }
          @media (min-width: 750px) {
            #top .spec .left > ul ul li {
              margin-top: 0.3645833333vw; } }
          #top .spec .left > ul ul li::before {
            content: "・";
            position: absolute;
            top: 0;
            left: 0; }
      #top .spec .left .btn {
        margin: 4vw auto; }
        @media (min-width: 750px) {
          #top .spec .left .btn {
            margin: 1.7wvw auto;
            width: 28.8020833333vw; } }
  #top .bn_update {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 47.2vw; }
    @media (min-width: 750px) {
      #top .bn_update {
        margin-top: .5em;
        width: 15.8333333333vw; } }

#top .spec .left > li.notice {
  line-height: 150%;
  margin-left: -1vw;
  font-size: 2.1333333333vw;
  padding: 1.66667vw; }

#top .spec .left > ul > li.notice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0; }

@media (min-width: 750px) {
  #top .spec .left > ul > li.notice {
    font-size: 15px;
    line-height: 150%;
    margin-top: 1vw;
    font-size: 0.8333333333vw;
    padding-left: 0; }

  #top .spec .left > ul > li.notice::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; } }
/* 3.about */
#about {
  background: url(../img/bg_about.jpg) no-repeat center top/cover;
  border-top: #35e6ed solid 1px;
  border-bottom: #35e6ed solid 1px;
  padding: 4vw 0;
  margin-bottom: 10.6666666667vw; }
  @media (min-width: 750px) {
    #about {
      margin-top: -26vw;
      padding: 1.3020833333vw 0;
      position: relative;
      z-index: 10;
      margin-bottom: 7.2916666667vw; } }
  #about .txt {
    filter: brightness(0.8);
    margin: 0 auto 4vw;
    width: 94vw; }
    @media (min-width: 750px) {
      #about .txt {
        margin: 0 auto 0.2604166667vw;
        width: 55vw; } }
  #about .btn {
    margin: 0 auto;
    width: 57.0666666667vw; }
    @media (min-width: 750px) {
      #about .btn {
        width: 22.2916666667vw; } }
  #about .caution {
    font-size: 1.6vw;
    text-shadow: 1px 1px 0.4vw #000000, -1px -1px 0.4vw #000000, 1px -1px 0.4vw #000000, -1px 1px 0.4vw #000000;
    margin-top: 0.6666666667vw;
    text-align: center; }
    @media (min-width: 750px) {
      #about .caution {
        font-size: 0.8333333333vw;
        margin-top: 0.2604166667vw; } }

/* 4,switch */
#switch h2 {
  background: url(../img/bg_ttl.png) no-repeat left/cover;
  text-align: center;
  padding: 2.4vw 0;
  margin-bottom: 6.6666666667vw;
  -webkit-animation-delay: 0;
  animation-delay: 0; }
  @media (min-width: 750px) {
    #switch h2 {
      background: url(../img/bg_ttl.png) no-repeat left/contain;
      text-align: left;
      padding: 0.625vw 0;
      margin-bottom: 0; } }
  #switch h2 span {
    -webkit-animation-delay: .2s;
    animation-delay: .2s; }
    @media (min-width: 750px) {
      #switch h2 span {
        display: block;
        margin: 0 auto;
        width: 61.4583333333vw; } }
  #switch h2 img {
    width: 78.5333333333vw; }
    @media (min-width: 750px) {
      #switch h2 img {
        width: 30.6770833333vw; } }
#switch .box {
  border: #35e6ed solid 1px;
  box-sizing: border-box;
  background: rgba(18, 80, 94, 0.75);
  padding: 2.6666666667vw;
  margin: 0 auto;
  width: 94vw; }
  @media (min-width: 750px) {
    #switch .box {
      border: #35e6ed solid 1px;
      box-sizing: border-box;
      background: rgba(18, 80, 94, 0.75);
      padding: 1.0416666667vw;
      width: 61.4583333333vw; } }
  #switch .box:not(:first-child) {
    margin-top: 6.6666666667vw; }
    @media (min-width: 750px) {
      #switch .box:not(:first-child) {
        margin-top: 5.2083333333vw; } }
  @media (min-width: 750px) {
    #switch .box:nth-child(2) {
      margin-top: 4.9479166667vw; } }
  @media (min-width: 750px) {
    #switch .box:nth-child(3) {
      margin-top: 7.8125vw; } }
  @media (min-width: 750px) {
    #switch .box.chara {
      display: flex;
      padding-bottom: 3.9583333333vw;
      position: relative; } }
  #switch .box.chara .txt_inr {
    box-sizing: border-box;
    text-align: center;
    padding: 0px 14vw; }
    @media (min-width: 750px) {
      #switch .box.chara .txt_inr {
        text-align: left;
        padding: 0;
        position: relative;
        z-index: 2; } }
    #switch .box.chara .txt_inr p {
      margin: 0 auto; }
      @media (min-width: 750px) {
        #switch .box.chara .txt_inr p {
          margin-left: 0; } }
      #switch .box.chara .txt_inr p:nth-child(1) {
        width: 41.6vw; }
        @media (min-width: 750px) {
          #switch .box.chara .txt_inr p:nth-child(1) {
            width: 16.25vw; } }
      #switch .box.chara .txt_inr p:nth-child(2) {
        width: 58.4vw; }
        @media (min-width: 750px) {
          #switch .box.chara .txt_inr p:nth-child(2) {
            width: 22.8125vw; } }
      #switch .box.chara .txt_inr p:nth-child(3) {
        margin-top: -0.4vw;
        width: 58.6666666667vw; }
        @media (min-width: 750px) {
          #switch .box.chara .txt_inr p:nth-child(3) {
            margin-top: -0.15625vw;
            width: 22.9166666667vw; } }
  #switch .box.chara .img_inr {
    position: relative; }
    @media (min-width: 750px) {
      #switch .box.chara .img_inr {
        position: absolute;
        top: -4.0625vw;
        right: 0;
        z-index: 1; } }
    #switch .box.chara .img_inr figure {
      margin: 0 auto; }
      #switch .box.chara .img_inr figure:nth-child(1) {
        position: relative;
        right: -7.5vw;
        width: 86.6666666667vw; }
        @media (min-width: 750px) {
          #switch .box.chara .img_inr figure:nth-child(1) {
            right: -5.7291666667vw;
            width: 41.7708333333vw; } }
      #switch .box.chara .img_inr figure:nth-child(2) {
        position: absolute;
        bottom: 1vw;
        left: -19vw;
        width: 98vw; }
        @media (min-width: 750px) {
          #switch .box.chara .img_inr figure:nth-child(2) {
            right: 1.1458333333vw;
            bottom: 0;
            left: auto;
            width: 48.8541666667vw; } }
  #switch .box.voice_color .inr:nth-child(1) {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    flex-direction: column; }
    @media (min-width: 750px) {
      #switch .box.voice_color .inr:nth-child(1) {
        -webkit-flex-direction: row;
        flex-direction: row; } }
    #switch .box.voice_color .inr:nth-child(1) .caution {
      font-size: 1.6vw;
      text-shadow: 1px 1px 0.4vw #000000, -1px -1px 0.4vw #000000, 1px -1px 0.4vw #000000, -1px 1px 0.4vw #000000;
      margin-top: 0.6666666667vw;
      text-align: center; }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(1) .caution {
          font-size: 0.8333333333vw;
          text-shadow: 1px 1px 0.15625vw #000000, -1px -1px 0.15625vw #000000, 1px -1px 0.15625vw #000000, -1px 1px 0.15625vw #000000;
          margin-top: 0.2604166667vw; } }
    #switch .box.voice_color .inr:nth-child(1) .txt_inr {
      margin-bottom: 1.3333333333vw;
      order: 1; }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(1) .txt_inr {
          order: 2;
          margin-bottom: 0;
          width: 28.125vw; } }
      #switch .box.voice_color .inr:nth-child(1) .txt_inr div {
        -webkit-align-items: baseline;
        align-items: baseline;
        display: flex;
        display: -webkit-flex;
        -webkit-justify-content: center;
        justify-content: center; }
        @media (min-width: 750px) {
          #switch .box.voice_color .inr:nth-child(1) .txt_inr div {
            display: block;
            margin: 0 auto; } }
        #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(1) {
          width: 37.0666666667vw; }
          @media (min-width: 750px) {
            #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(1) {
              margin: 0 auto;
              width: 14.4791666667vw; } }
          #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(1) img {
            margin-bottom: 0.2666666667vw; }
            @media (min-width: 750px) {
              #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(1) img {
                margin-bottom: 0; } }
        #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(2) {
          width: 44.4vw; }
          @media (min-width: 750px) {
            #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(2) {
              margin: 0 auto;
              width: 17.34375vw; } }
          #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(2) img {
            margin-left: -1.3333333333vw; }
            @media (min-width: 750px) {
              #switch .box.voice_color .inr:nth-child(1) .txt_inr div p:nth-child(2) img {
                margin-left: 0; } }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(1) .txt_inr .btn {
          margin: 0.6666666667vw auto 0;
          width: 16.40625vw; } }
    #switch .box.voice_color .inr:nth-child(1) .img_inr {
      order: 2; }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(1) .img_inr {
          margin-top: -2.8645833333vw;
          margin-left: 1.5625vw;
          order: 1; } }
      #switch .box.voice_color .inr:nth-child(1) .img_inr figure {
        margin: 0 auto;
        width: 75.7333333333vw; }
        @media (min-width: 750px) {
          #switch .box.voice_color .inr:nth-child(1) .img_inr figure {
            width: 29.5833333333vw; } }
      #switch .box.voice_color .inr:nth-child(1) .img_inr .btn {
        margin: 0 auto;
        width: 51.4666666667vw; }
  #switch .box.voice_color .inr:nth-child(2) {
    margin-top: 4vw; }
    @media (min-width: 750px) {
      #switch .box.voice_color .inr:nth-child(2) {
        display: flex;
        display: -webkit-flex;
        -webkit-align-items: center;
        align-items: center;
        margin-top: 0; } }
    #switch .box.voice_color .inr:nth-child(2) .txt_inr {
      margin-bottom: 1.3333333333vw; }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(2) .txt_inr {
          margin-left: 1.0416666667vw;
          margin-bottom: 0; } }
      #switch .box.voice_color .inr:nth-child(2) .txt_inr p {
        margin: 0 auto; }
        #switch .box.voice_color .inr:nth-child(2) .txt_inr p:nth-child(1) {
          width: 66.1333333333vw; }
          @media (min-width: 750px) {
            #switch .box.voice_color .inr:nth-child(2) .txt_inr p:nth-child(1) {
              width: 25.8333333333vw; } }
        #switch .box.voice_color .inr:nth-child(2) .txt_inr p:nth-child(2) {
          width: 38.9333333333vw; }
          @media (min-width: 750px) {
            #switch .box.voice_color .inr:nth-child(2) .txt_inr p:nth-child(2) {
              width: 15.2083333333vw; } }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(2) .txt_inr .btn {
          margin: 0.6666666667vw auto 0;
          width: 16.40625vw; } }
    @media (min-width: 750px) {
      #switch .box.voice_color .inr:nth-child(2) .img_inr {
        width: 32.4479166667vw; } }
    #switch .box.voice_color .inr:nth-child(2) .img_inr figure {
      margin: 0 auto;
      width: 70.2666666667vw; }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(2) .img_inr figure {
          width: 27.4479166667vw; } }
    #switch .box.voice_color .inr:nth-child(2) .img_inr .btn {
      margin: 0 auto;
      width: 51.4666666667vw; }
      @media (min-width: 750px) {
        #switch .box.voice_color .inr:nth-child(2) .img_inr .btn {
          width: 20.1041666667vw; } }
  #switch .box.mode .txt_inr {
    margin-bottom: 2.6666666667vw; }
    @media (min-width: 750px) {
      #switch .box.mode .txt_inr {
        margin-bottom: 0; } }
    #switch .box.mode .txt_inr p {
      margin: 0 auto; }
      @media (min-width: 750px) {
        #switch .box.mode .txt_inr p {
          margin-left: 0; } }
      #switch .box.mode .txt_inr p:nth-child(1) {
        width: 51.2vw; }
        @media (min-width: 750px) {
          #switch .box.mode .txt_inr p:nth-child(1) {
            width: 20vw; } }
      #switch .box.mode .txt_inr p:nth-child(2) {
        width: 87.6vw; }
        @media (min-width: 750px) {
          #switch .box.mode .txt_inr p:nth-child(2) {
            width: 34.21875vw; } }
      #switch .box.mode .txt_inr p:nth-child(3) {
        width: 73.7333333333vw; }
        @media (min-width: 750px) {
          #switch .box.mode .txt_inr p:nth-child(3) {
            width: 28.8020833333vw; } }
        #switch .box.mode .txt_inr p:nth-child(3) img {
          margin-top: -0.2666666667vw; }
          @media (min-width: 750px) {
            #switch .box.mode .txt_inr p:nth-child(3) img {
              margin-top: -0.1041666667vw; } }
  #switch .box.mode .img_inr {
    position: relative; }
    #switch .box.mode .img_inr figure {
      margin: 0 auto; }
      @media (min-width: 750px) {
        #switch .box.mode .img_inr figure {
          margin-top: -10.4166666667vw;
          margin-right: 0; } }
      #switch .box.mode .img_inr figure:nth-child(1) {
        position: relative;
        right: -15.5vw;
        width: 46.9333333333vw; }
        @media (min-width: 750px) {
          #switch .box.mode .img_inr figure:nth-child(1) {
            right: -2.6041666667vw;
            width: 18.3333333333vw; } }
      #switch .box.mode .img_inr figure:nth-child(2) {
        position: absolute;
        bottom: 1vw;
        left: 2vw;
        width: 38.1333333333vw; }
        @media (min-width: 750px) {
          #switch .box.mode .img_inr figure:nth-child(2) {
            bottom: 0;
            left: auto;
            right: 14.2708333333vw;
            width: 14.8958333333vw; } }
  #switch .box.early {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    flex-direction: column; }
    @media (min-width: 750px) {
      #switch .box.early {
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between; } }
    #switch .box.early .caution_list {
      background: rgba(7, 42, 62, 0.7);
      box-sizing: border-box;
      padding: 2vw; }
      @media (min-width: 750px) {
        #switch .box.early .caution_list {
          margin-top: 0.8333333333vw;
          padding: 1.0416666667vw; } }
      #switch .box.early .caution_list li {
        font-size: 1.6vw;
        text-shadow: 1px 1px 0.4vw #000000, -1px -1px 0.4vw #000000, 1px -1px 0.4vw #000000, -1px 1px 0.4vw #000000;
        line-height: 130%;
        margin-top: 0.6666666667vw;
        padding-left: 1.2em;
        position: relative;
        text-align: left; }
        @media (min-width: 750px) {
          #switch .box.early .caution_list li {
            font-size: 0.8333333333vw;
            text-shadow: 1px 1px 0.15625vw #000000, -1px -1px 0.15625vw #000000, 1px -1px 0.15625vw #000000, -1px 1px 0.15625vw #000000;
            margin-top: 0.2604166667vw; } }
        #switch .box.early .caution_list li:not(:first-child) {
          margin-top: 0.6666666667vw; }
          @media (min-width: 750px) {
            #switch .box.early .caution_list li:not(:first-child) {
              margin-top: 0.2604166667vw; } }
        @media (min-width: 750px) {
          #switch .box.early .caution_list li:first-child {
            margin-top: 0; } }
        #switch .box.early .caution_list li:before {
          content: "※";
          position: absolute;
          top: 0;
          left: 0; }
    #switch .box.early .txt_inr {
      margin-bottom: 1.3333333333vw;
      order: 1; }
      @media (min-width: 750px) {
        #switch .box.early .txt_inr {
          margin-bottom: 0;
          order: 2; } }
      #switch .box.early .txt_inr p {
        margin: 0 auto; }
        @media (min-width: 750px) {
          #switch .box.early .txt_inr p {
            margin-left: 0; } }
        #switch .box.early .txt_inr p:nth-child(1) {
          width: 36vw; }
          @media (min-width: 750px) {
            #switch .box.early .txt_inr p:nth-child(1) {
              width: 14.0625vw; } }
        #switch .box.early .txt_inr p:nth-child(2) {
          width: 63.7333333333vw; }
          @media (min-width: 750px) {
            #switch .box.early .txt_inr p:nth-child(2) {
              width: 24.8958333333vw; } }
        #switch .box.early .txt_inr p:nth-child(3) {
          width: 48.2666666667vw; }
          @media (min-width: 750px) {
            #switch .box.early .txt_inr p:nth-child(3) {
              width: 18.8541666667vw; } }
    #switch .box.early .img_inr {
      order: 2; }
      @media (min-width: 750px) {
        #switch .box.early .img_inr {
          order: 1;
          margin-left: 1.5625vw; } }
      #switch .box.early .img_inr figure {
        margin: 0 auto;
        width: 56.1333333333vw; }
        @media (min-width: 750px) {
          #switch .box.early .img_inr figure {
            width: 21.9270833333vw; } }
      #switch .box.early .img_inr figcaption {
        font-size: 2.4vw;
        text-shadow: 1px 1px 0.4vw rgba(255, 0, 60, 0.45), -1px -1px 0.4vw rgba(255, 0, 60, 0.45), 1px -1px 0.4vw rgba(255, 0, 60, 0.45), -1px 1px 0.4vw rgba(255, 0, 60, 0.45);
        margin-top: 0.6666666667vw;
        margin: 1.3333333333vw 0 2.6666666667vw;
        text-align: center; }
        @media (min-width: 750px) {
          #switch .box.early .img_inr figcaption {
            font-size: 0.8333333333vw;
            text-shadow: 1px 1px 0.15625vw rgba(255, 0, 60, 0.45), -1px -1px 0.15625vw rgba(255, 0, 60, 0.45), 1px -1px 0.15625vw rgba(255, 0, 60, 0.45), -1px 1px 0.15625vw rgba(255, 0, 60, 0.45);
            margin-top: 0.2604166667vw;
            margin: 0.6770833333vw;
            text-align: center; } }

/* 5.store */
#store h2 {
  background: url(../img/bg_ttl.png) no-repeat left/cover;
  text-align: center;
  padding: 2.4vw 0;
  margin: 10.6666666667vw 0 6.6666666667vw;
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }
  @media (min-width: 750px) {
    #store h2 {
      padding: 0.625vw 0;
      margin: 5.2083333333vw 0 1.8229166667vw; } }
  #store h2 span {
    -webkit-animation-delay: .2s;
    animation-delay: .2s; }
    @media (min-width: 750px) {
      #store h2 span {
        display: block;
        margin: 0 auto 0 0;
        width: 61.4583333333vw; } }
  #store h2 img {
    width: 59.7333333333vw; }
    @media (min-width: 750px) {
      #store h2 img {
        width: 23.3333333333vw; } }
#store .wrap {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  width: 94vw; }
  @media (min-width: 750px) {
    #store .wrap {
      width: 61.4583333333vw; } }
  #store .wrap .box {
    border: #35e6ed solid 1px;
    box-sizing: border-box;
    background: rgba(0, 40, 60, 0.75);
    padding: 2.6666666667vw;
    width: 47.3%;
    /*width: 100%;*/
    text-align: center;
    /*border: #4A4A4A solid 1px;*/ }
    @media (min-width: 750px) {
      #store .wrap .box {
        border: #35e6ed solid 1px;
        box-sizing: border-box;
        background: rgba(0, 40, 60, 0.75);
        padding: 1.0416666667vw;
        padding: 1.5625vw;
        opacity: 0;
        /*border: #4A4A4A solid 1px;*/
        width: 31.6%;
        /*width: 100%;*/ }
        #store .wrap .box:nth-child(1) {
          animation-delay: 0s; }
        #store .wrap .box:nth-child(2) {
          animation-delay: 0.2s; }
        #store .wrap .box:nth-child(3) {
          animation-delay: 0.4s; }
        #store .wrap .box:nth-child(3n+1) {
          animation-delay: 0s; }
        #store .wrap .box:nth-child(3n+2) {
          animation-delay: 0.2s; }
        #store .wrap .box:nth-child(3n+3) {
          animation-delay: 0.4s; } }
    #store .wrap .box:nth-child(n+3) {
      margin-top: 5.3333333333vw; }
      @media (min-width: 750px) {
        #store .wrap .box:nth-child(n+3) {
          margin-top: 0; } }
    @media (min-width: 750px) {
      #store .wrap .box:nth-child(n+4) {
        margin-top: 2.0833333333vw; } }
    #store .wrap .box .store_name {
      background: rgba(0, 0, 0, 0.7);
      font-weight: bold;
      font-size: 3.2vw;
      padding: 1.3333333333vw 0 1.0666666667vw;
      text-align: center; }
      @media (min-width: 750px) {
        #store .wrap .box .store_name {
          font-size: 1.4583333333vw;
          padding: 0.6770833333vw 0 0.4166666667vw; } }
    #store .wrap .box figure {
      margin: 2vw auto;
      width: 100%; }
      @media (min-width: 750px) {
        #store .wrap .box figure {
          margin: 0.78125vw auto;
          width: 16.1458333333vw; } }
    #store .wrap .box figcaption {
      background: rgba(0, 0, 0, 0.5);
      font-size: 2.9333333333vw;
      padding: 1.3333333333vw 0 1.0666666667vw;
      margin-bottom: 2vw;
      text-shadow: 1px 1px 0.2666666667vw rgba(255, 145, 64, 0.4), -1px -1px 0.2666666667vw rgba(255, 145, 64, 0.4), 1px -1px 0.2666666667vw rgba(255, 145, 64, 0.4), -1px 1px 0.2666666667vw rgba(255, 145, 64, 0.4);
      text-align: center;
      line-height: 140%; }
      @media (min-width: 750px) {
        #store .wrap .box figcaption {
          font-size: 1.1979166667vw;
          padding: 0.6770833333vw 0 0.4166666667vw;
          margin-bottom: 0.78125vw;
          text-shadow: 1px 1px 0.1041666667vw rgba(255, 145, 64, 0.4), -1px -1px 0.1041666667vw rgba(255, 145, 64, 0.4), 1px -1px 0.1041666667vw rgba(255, 145, 64, 0.4), -1px 1px 0.1041666667vw rgba(255, 145, 64, 0.4); } }
      #store .wrap .box figcaption small {
        display: block;
        margin: 0 0 .6em;
        font-size: 2.1333333333vw; }
        @media (min-width: 750px) {
          #store .wrap .box figcaption small {
            font-size: 0.8333333333vw; } }
      #store .wrap .box figcaption span {
        display: block;
        text-shadow: none;
        margin: .8em 0 .6em;
        padding-left: 1em;
        text-align: left;
        font-size: 1.8666666667vw;
        line-height: 140%; }
        @media (min-width: 750px) {
          #store .wrap .box figcaption span {
            font-size: 0.7291666667vw; } }
    @media (min-width: 750px) {
      #store .wrap .box .btn {
        margin-left: -0.5208333333vw;
        width: 17.2916666667vw; } }
#store .caution_box {
  margin: 0 auto;
  margin-top: 5.3333333333vw;
  width: 94vw; }
  @media (min-width: 750px) {
    #store .caution_box {
      width: 61.4583333333vw;
      margin-top: 2.0833333333vw;
      opacity: 1; } }
  #store .caution_box p {
    border: #35e6ed solid 1px;
    box-sizing: border-box;
    background: rgba(0, 40, 60, 0.75);
    padding: 2.6666666667vw;
    margin: 0 auto;
    line-height: 150%;
    width: 100%; }
    @media (min-width: 750px) {
      #store .caution_box p {
        border: #35e6ed solid 1px;
        box-sizing: border-box;
        background: rgba(0, 40, 60, 0.75);
        padding: 1.0416666667vw;
        padding: 1.0416666667vw;
        width: 70%; } }

/* 6.footer */
footer ul.bn {
  margin: 16vw auto 6.6666666667vw;
  width: 85.3333vw; }
  @media (min-width: 750px) {
    footer ul.bn {
      margin: 8.3333333333vw auto 0;
      display: flex;
      display: -webkit-flex;
      width: 100%; } }
  footer ul.bn li {
    position: relative;
    overflow: hidden; }
    @media (min-width: 750px) {
      footer ul.bn li {
        width: calc(100% / 3); } }
    footer ul.bn li.none a {
      pointer-events: none; }
    footer ul.bn li:not(:first-child) {
      margin-top: 4vw; }
      @media (min-width: 750px) {
        footer ul.bn li:not(:first-child) {
          margin-top: 0; } }
    footer ul.bn li:nth-child(1) a {
      display: block;
      width: 100%;
      height: 100%; }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(1) a::before {
          background: rgba(0, 119, 211, 0.7);
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 50%;
          transition: all .2s;
          z-index: 2; } }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(1) a:hover::before {
          -webkit-animation-name: color_open_top;
          -webkit-animation-duration: .2s;
          animation-name: color_open_top;
          animation-duration: .2s;
          top: -100%;
          z-index: 2; } }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(1) a::after {
          background: rgba(0, 119, 211, 0.7);
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 50%;
          transition: all .2s;
          z-index: 2; } }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(1) a:hover::after {
          -webkit-animation-name: color_open_bottom;
          -webkit-animation-duration: .25s;
          animation-name: color_open_bottom;
          animation-duration: .2s;
          bottom: -100%;
          z-index: 2; } }
    footer ul.bn li:nth-child(1) span {
      display: block;
      height: 100%;
      position: absolute;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10; }
    footer ul.bn li:nth-child(2) a, footer ul.bn li:nth-child(3) a {
      display: block;
      width: 100%;
      height: 100%; }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(2) a::before, footer ul.bn li:nth-child(3) a::before {
          background: rgba(0, 119, 211, 0.7);
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 50%;
          transition: all .2s;
          z-index: 2; } }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(2) a:hover::before, footer ul.bn li:nth-child(3) a:hover::before {
          -webkit-animation-name: color_open_top;
          -webkit-animation-duration: .2s;
          animation-name: color_open_top;
          animation-duration: .2s;
          top: -100%;
          z-index: 2; } }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(2) a::after, footer ul.bn li:nth-child(3) a::after {
          background: rgba(0, 119, 211, 0.7);
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 50%;
          transition: all .2s;
          z-index: 2; } }
      @media (min-width: 750px) {
        footer ul.bn li:nth-child(2) a:hover::after, footer ul.bn li:nth-child(3) a:hover::after {
          -webkit-animation-name: color_open_bottom;
          -webkit-animation-duration: .25s;
          animation-name: color_open_bottom;
          animation-duration: .2s;
          bottom: -100%;
          z-index: 2; } }
    footer ul.bn li:nth-child(2) span, footer ul.bn li:nth-child(3) span {
      display: block;
      height: 100%;
      position: absolute;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10; }
footer .inr {
  background: rgba(0, 0, 0, 0.7);
  border-top: #27799b 1px solid;
  padding-top: 4vw; }
  @media (min-width: 750px) {
    footer .inr {
      padding-top: 1.5625vw; } }
  footer .inr .sns {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto 2.6666666667vw;
    width: 28vw; }
    @media (min-width: 750px) {
      footer .inr .sns {
        margin: 0 auto 1.0416666667vw;
        width: 10.9375vw; } }
    footer .inr .sns li {
      width: 6.6666666667vw; }
      @media (min-width: 750px) {
        footer .inr .sns li {
          width: 2.6041666667vw; } }
  footer .inr .link {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto 2.6666666667vw;
    width: 85.3333333333vw; }
    @media (min-width: 750px) {
      footer .inr .link {
        margin: 0 auto 0.5208333333vw;
        width: 33.3333333333vw; } }
    footer .inr .link li:nth-child(1) {
      width: 8vw; }
      @media (min-width: 750px) {
        footer .inr .link li:nth-child(1) {
          width: 3.125vw; } }
    footer .inr .link li:nth-child(2) {
      width: 35.7333333333vw; }
      @media (min-width: 750px) {
        footer .inr .link li:nth-child(2) {
          width: 13.9583333333vw; } }
    footer .inr .link li:nth-child(3) {
      width: 35.7333333333vw; }
      @media (min-width: 750px) {
        footer .inr .link li:nth-child(3) {
          width: 13.9583333333vw; } }
  footer .inr > p {
    border-top: #27799b 1px solid;
    padding: 1.3333333333vw 0 2.6666666667vw;
    text-align: center; }
    @media (min-width: 750px) {
      footer .inr > p {
        padding: 0.5208333333vw 0 1.0416666667vw; } }
    footer .inr > p img {
      width: 70.6666666667vw; }
      @media (min-width: 750px) {
        footer .inr > p img {
          width: 27.6041666667vw; } }

/* modal */
.modal {
  display: none;
  background: rgba(0, 0, 0, 0.4);
  color: #000;
  overflow-y: scroll;
  overflow-x: hidden;
  /*padding-right: 17px;*/
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999; }
  @media (min-width: 750px) {
    .modal {
      height: 100%; } }
  .modal > .modal_close {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; }

.modal_wrap {
  display: inline-block;
  margin: 12vw 0 0;
  position: relative;
  width: 100%;
  height: auto; }
  @media (min-width: 750px) {
    .modal_wrap {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      margin: 0 auto;
      width: 61.4583333333vw; } }

.modal .box {
  box-sizing: border-box;
  display: none;
  background: rgba(255, 255, 255, 0.9);
  margin: 0 auto 0;
  padding: 4vw;
  padding-bottom: 0;
  width: 97.5vw; }
  @media (min-width: 750px) {
    .modal .box {
      padding: 1.5625vw 1.5625vw 0 2.0833333333vw;
      width: 61.4583333333vw; } }
  .modal .box h4 {
    font-size: 4.2666666667vw;
    margin-top: -.8em;
    padding-left: .8em;
    position: relative;
    pointer-events: none; }
    @media (min-width: 750px) {
      .modal .box h4 {
        font-size: 1.25vw;
        padding-left: 1em; } }
    .modal .box h4::before {
      background: #000;
      content: "";
      display: block;
      position: absolute;
      top: -.05em;
      left: 0em;
      height: 4.2666666667vw;
      width: 1.3333333333vw; }
      @media (min-width: 750px) {
        .modal .box h4::before {
          height: 1.25vw;
          width: 0.5208333333vw; } }
  .modal .box .caution {
    font-size: 2.1333333333vw;
    margin-top: 1.3333333333vw;
    pointer-events: none;
    line-height: 130%; }
    @media (min-width: 750px) {
      .modal .box .caution {
        font-size: 0.8333333333vw;
        margin-top: 0.5208333333vw; } }
  .modal .box figure.f1 {
    margin-top: -5vw;
    width: 68vw; }
    @media (min-width: 750px) {
      .modal .box figure.f1 {
        margin-top: 1.0416666667vw;
        width: 25.9895833333vw; } }
  .modal .box figure.f2 {
    position: relative;
    margin-top: -22vw;
    right: -8vw;
    width: 82vw; }
    @media (min-width: 750px) {
      .modal .box figure.f2 {
        right: -1vw;
        margin: -24.5vw 0 -.8vw auto;
        width: 33.28125vw; } }

.modal .box .modal_close {
  margin: 0 0 0 auto;
  width: 5.3333333333vw;
  transition: all .4s; }
  @media (min-width: 750px) {
    .modal .box .modal_close {
      width: 1.875vw; } }

.modal .modal_close:hover {
  opacity: .4; }