@font-face {
    font-family: "Local Noto Sans JP";
    src: local("Noto Sans JP");
  }

  body {
    font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  }

  a {
    text-decoration: none;
  }

/* 全体div */
  .All-out-Box{
    width: 100%;
    overflow: hidden;
  }

/* 予約販売ストア背景 */
  .bq-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background-image: url('../images/BG_PreOrder.jpg');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    filter: brightness(50%) blur(10px);
    animation: bg-bg-anim 5s infinite;
  }
  @keyframes bg-bg-anim {
    90%{ filter: brightness(50%) blur(10px);}
    93%{ filter: brightness(100%);}
    100%{ filter: brightness(50%) blur(10px);}
  }

  .BAROQUE_NT-image {
    position: relative;
    display: inline-block;
    background-color: #000;
  }

  .header-right{
    background: #000;
  }



/* 横画面 */
	@media (orientation: landscape){
	  .Title-Box{
	    position: relative;
	    display: grid;
	    grid-template-columns: 15vw 1fr 1fr 15vw;
	    grid-template-rows: 6vw auto auto auto auto 5vw 1.5vw;
	    height: 100%
	    
	  }
	  .Head-Box{
	    display: grid;
	    grid-template-columns: 50% 50%;
	    grid-template-rows: 80vw;
	    overflow: hidden;
	  }
	  .title_title{grid-area: 1 / 1 / 1 / 5;}
	  .bov_title{ grid-area: 2 / 2 / 2 / 5;place-content: center center;}
	  .bsy_title{grid-area: 3 / 1 / 3 / 4;place-content: center center;}
	  .bsh_title{grid-area: 4 / 2 / 4 / 5;place-content: center center;}
	  .bmb_title{grid-area: 5 / 1 / 5 / 4;place-content: center center;}
	  .title_notice{grid-area: 6 / 1 / 6 / 5;place-content: center center;position:relative;}

	  /* 各タイトル注釈 */
	  .bov-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 1vw;
	    bottom: 4vw;
	    font-size: 1vw;
	  }
	  .bsy-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 1vw;
	    bottom: 4vw;
	    font-size: 1vw;
	  }
	  .bsh-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 1vw;
	    bottom: 2vw;
	    font-size: 1vw;
	  }
	  .bmb-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 1vw;
	    bottom: 2vw;
	    font-size: 1vw;
	  }
	  .title-noticeText{
	    position: absolute;
	    top: 0;
	    color: #fff;
	    text-align: left;
	    font-size: 1vw;
	  }

	  .Title-out-box{
	    position:absolute;
	    top:4vw;
	  }
	  .Title-Logo-box{
	    position: relative;
	    top: 50vw;
	    text-align:center;
	  }
	  .Title-Logo-img{
	    width: 47vw;
	  }
	  .Title-Date-box{
	    position: relative;
	    top: 49vw;
	    text-align: center;
	  }
	  .Title-Date-img{
	    width: 41vw;
	  }
	  .Title-SwPac-box{
	    position: relative;
	    top: 49vw;
	    text-align: center;
	  }
	  .Title-SwPac-img{
	    width: 35vw;
	  }

	  .title-bg {
	    position: absolute;
	    z-index: -1;
	  }
	  .pre-order-store{
	    background: #800;
	    color: #fff;
	    text-align: center;
	    font-size: 2.5vw;
	    position: relative;
	    padding: 1vw;
	  }

	  .pre-order-store-block {
	    display: grid;
	    grid-template-columns: 1vw 1fr 1vw 1fr 1vw 1fr 1vw;
	    grid-template-rows:    1vw auto 1vw auto 1vw 1fr 1vw;
	  }

	  .pre-order-store_01 {grid-area: 2 / 2 / 3 / 3;place-content: center center;}
	  .pre-order-store_02 {grid-area: 2 / 4 / 3 / 5;place-content: center center;}
	  .pre-order-store_03 {grid-area: 2 / 6 / 3 / 7;place-content: center center;}

	  .pre-order-store_04 {grid-area: 4 / 2 / 5 / 3;place-content: center center;}
	  .pre-order-store_05 {grid-area: 4 / 4 / 5 / 5;place-content: center center;}
	  .pre-order-store_06 {grid-area: 4 / 6 / 5 / 7;place-content: center center;}

	  .pre-order-store_07 {grid-area: 6 / 2 / 7 / 3;place-content: center center;}
	  .pre-order-store_08 {grid-area: 6 / 4 / 7 / 5;place-content: center center;}
	  .pre-order-store_09 {grid-area: 6 / 6 / 7 / 7;place-content: center center;}

	/* 予約販売ストア */
	  .pre-order-storeText{
	    font-size: 4vw;
	    font-weight: 600;
	  }
	  .pre-order-notice{
	    background: #400;
	    color: #fff;
	    text-align: left;
	    font-size: 1vw;
	    border-left: solid 3px #fff;
	    padding: 0.5vw;
	  }
	  .pre-order-out-box{
	    border: 3px solid rgba(255,255,255,0.4);
	    padding: 2vw;
	    border-radius: 1.2vw;
	    backdrop-filter: brightness(0.95);
	    background: rgba(255,255,255,0.2);
	  }
	  .pre-order-in-box{
	    margin: auto;
	    text-align: center;
	    background: #666;
	    padding: 1vw;
	    border-radius: 0.5vw;
	  }
	  .pre-order-img {
	    width: 20vw;
	  }
	  .pre-order-storeName {
	    background: #333;
	    margin: 1vw;
	    text-align: center;
	    font-weight: 600;
	    padding: 0.2vw;
	  }
	  .pre-order-storeNameText {
	    font-size: 2vw;
	    color: #ff8;
	  }
	  .pre-order-bonus{
	      background: #333;
	      margin: 0.5vw;
	      text-align: left;
	      padding-left: 0.5vw;
	  }
	  .pre-order-bonusText{
	      font-size: 1.3vw;
	      color: #fff;
	  }
	  .pre-order-bonus_blank{
	      background: #666;
	      margin: 0.5vw;
	      text-align: left;
	      padding-left: 0.5vw;
	  }
	  .pre-order-bonusText_blank{
	      font-size: 1.3vw;
	      color: #000;
	  }

	  .pre-order-plate{
	  }
	  .pre-order-plate:hover {
	    animation: pre-order-plate4-anim 0.5s forwards;
	    -webkit-animation: pre-order-plate-anim 0.5s forwards;
	  }
	  @keyframes pre-order-plate-anim{
	    10%{
	      transform: scale(1.05);
	      opacity:0.5;
	      filter: brightness(300%) blur(7px);
	      box-shadow: 0 0 10px 10px rgba(255,255,255,0.5);
	    }
	    100%{
	      transform: scale(0.98);
	      opacity:1;
	      box-shadow: 0 0 5px 10px rgba(0,255,0,0.5);
	    }
	  }


	  .paid-bonus-box{
	    margin: 0;
	    text-align: left;
	  }
	  .paid-bonusText{
	    border: solid 1px #ffa;
	    border-radius: 0.5vw;
	    color: #ffa;
	    background: #000;
	    margin: 0.5vw;
	    padding-left: 0.2vw;
	    font-size: 1.2vw;
	  }
	  .paid-bonusName{
	    color: #fff;
	    font-weight: 700;
	    font-size: 1.2vw;
	  }


	  .footer{
	    text-align: center;
	    background: #000;
	    color: #fff;
	    font-size: 1.2vw;
	  }
	  .fade-black{
	    display:block;
	    mask-image:linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0) 99%);
	    mask-repeat: no-repeat;
	    mask-size: cover;
	  }
	  /* STINGロゴボタン */
	  .sting-button-box {
	    position: relative;
	  }
	  .sting-button-img {
	    z-index: 2;
	    opacity: 0;
	    position: fixed;
	    right: 1vw;
	    width: 5vw;
	    max-width: 110px;
	    top: 0vw;
	  }
	  .top-button-box {
	    position: relative;
	    height: 12vw;
	  }
	  .top-button-img {
	    z-index: -1;
	    opacity: 0;
	    position: fixed;
	    right: 1vw;
	    width: 5vw;
	    max-width: 110px;
	    bottom: 4vw;
	  }
	  /* CERO C */
	  .CERO-C-box{
	    position: absolute;
	    top: 0;
	    width:100%;
	    z-index: 3;
	  }
	  .CERO-C-img{
	    position: absolute;
	    right: 50vw;
	    width: 5vw;
	    max-width: 110px;
	  }
	  /* Nintendo Switch */
	  .switch-logo-img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 5vw;
	    max-width: 110px;
	    z-index: 3;
	  }
	  .switch-logo{
	    position: absolute;
	    top:0;
	  }

	}
/* 横画面 ここまで*/

/* 縦画面 */
	@media (orientation: portrait){
	  .Head-Box{
	    display: grid;
	    grid-template-columns: auto;
	    grid-template-rows: 163vw 163vw;
	    overflow: hidden;
	  }

	  .Title-out-box{
	    position:absolute;
	    top:55vw;
	  }
	  .Title-Logo-box{
	    position: relative;
	    top: 50vw;
	    text-align:center;
	  }
	  .Title-Logo-img{
	    width: 98vw;
	  }
	  .Title-Date-box{
	    position: relative;
	    top: 49vw;
	    text-align: center;
	  }
	  .Title-Date-img{
	    width: 80vw;
	  }
	  .Title-SwPac-box{
	    position: relative;
	    top: 49vw;
	    text-align: center;
	  }
	  .Title-SwPac-img{
	    width: 70vw;
	  }

	  .Title-Box{
	    position: relative;
	    height: 160vw;
	    display: grid;
	    grid-template-rows: 11vw auto auto auto auto 15vw;
	    grid-template-columns: 3.7vw auto 3.7vw;
	  }
	  .title_title{grid-area: 1 / 2 / 1 / 3;}
	  .bov_title{grid-area: 2 / 2 / 2 / 3;place-content: center center;}
	  .bsy_title{grid-area: 3 / 2 / 3 / 3;place-content: center center;}
	  .bsh_title{grid-area: 4 / 2 / 4 / 3;place-content: center center;}
	  .bmb_title{grid-area: 5 / 2 / 5 / 3;place-content: center center;}
	  .title_notice{grid-area: 6 / 2 / 6 / 3;place-content: center center;position:relative;}

	  .title-bg {
	    position: absolute;
	    z-index: -1;
	  }

	  /* 各タイトル注釈 */
	  .bov-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 4vw;
	    bottom: 7vw;
	    font-size: 2vw;
	  }
	  .bsy-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 4vw;
	    bottom: 2vw;
	    font-size: 2vw;
	  }
	  .bsh-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 4vw;
	    bottom: 0vw;
	    font-size: 2vw;
	  }
	  .bmb-noticeText{
	    position: absolute;
	    color: #fff;
	    right: 4vw;
	    bottom: 0.5vw;
	    font-size: 2vw;
	  }
	  .title-noticeText{
	    position: absolute;
	    top: 0;
	    color: #fff;
	    text-align: left;
	    font-size: 1.5vw;
	  }

	  .pre-order-store{
	     background: #800;
	     color: #fff;
	     text-align: center;
	     position: relative;
	     top: -1vw;
	     padding: 1vw;
	   }

	  .pre-order-store-block {
	    display: grid;
	    grid-template-columns: auto 82vw auto;
	    grid-template-rows:    1vw auto 1vw auto 1vw auto 1vw auto 1vw auto 1vw auto 1vw 1fr 1vw 1fr 1vw 1fr 1vw ;
	  }

	  .pre-order-store_01 {grid-area: 2 / 2 / 3 / 3;place-content: center center;}
	  .pre-order-store_02 {grid-area: 4 / 2 / 5 / 3;place-content: center center;}
	  .pre-order-store_03 {grid-area: 6 / 2 / 7 / 3;place-content: center center;}

	  .pre-order-store_04 {grid-area: 8  / 2 / 9  / 3;place-content: center center;}
	  .pre-order-store_05 {grid-area: 10 / 2 / 11 / 3;place-content: center center;}
	  .pre-order-store_06 {grid-area: 12 / 2 / 13 / 3;place-content: center center;}

	  .pre-order-store_07 {grid-area: 14 / 2 / 15 / 3;place-content: center center;}
	  .pre-order-store_08 {grid-area: 16 / 2 / 17 / 3;place-content: center center;}
	  .pre-order-store_09 {grid-area: 18 / 2 / 19 / 3;place-content: center center;}

	/* 予約販売ストア */
	  .pre-order-storeText{
	    font-size: 5vw;
	    font-weight: 600;
	  }
	  .pre-order-notice{
	    background: #400;
	    color: #fff;
	    text-align: left;
	    font-size: 2vw;
	    border-left: solid 3px #fff;
	    padding: 1vw;
	  }
	  .pre-order-out-box{
	    border: 3px solid rgba(255,255,255,0.4);
	    padding: 2vw;
	    border-radius: 1.2vw;
	    backdrop-filter: brightness(0.95);
	    background: rgba(255,255,255,0.2);
	  }
	  .pre-order-in-box{
	    margin: auto;
	    text-align: center;
	    background: #666;
	    padding: 3vw;
	    border-radius: 0.5vw;
	  }
	  .pre-order-img {
	    width: 60vw;
	  }
	  .pre-order-storeName {
	    background: #333;
	    margin: 1vw;
	    text-align: center;
	    font-weight: 600;
	    padding: 0.2vw;
	  }
	  .pre-order-storeNameText {
	    font-size: 4vw;
	    color: #ff8;
	  }
	  .pre-order-bonus{
	      background: #333;
	      margin: 0.5vw;
	      text-align: left;
	      padding-left: 1vw;
	  }
	  .pre-order-bonusText{
	      font-size: 4vw;
	      color: #fff;
	  }

	  .pre-order-bonus_blank{
	      background: #666;
	      margin: 0.5vw;
	      text-align: left;
	      padding-left: 0.5vw;
	  }
	  .pre-order-bonusText_blank{
	      font-size: 4vw;
	      color: #000;
	  }

	  .pre-order-plate{
	  }
	  .pre-order-plate:hover {
	    animation: pre-order-plate4-anim 0.5s forwards;
	    -webkit-animation: pre-order-plate-anim 0.5s forwards;
	  }
	  @keyframes pre-order-plate-anim{
	    10%{
	      transform: scale(1.05);
	      opacity:0.5;
	      filter: brightness(300%) blur(7px);
	      box-shadow: 0 0 10px 10px rgba(255,255,255,0.5);
	    }
	    100%{
	      transform: scale(0.98);
	      opacity:1;
	      box-shadow: 0 0 5px 10px rgba(0,255,0,0.5);
	    }
	  }

	  .paid-bonus-box{
	    margin: 0;
	    text-align: left;
	  }
	  .paid-bonusText{
	    border: solid 1px #ffa;
	    border-radius: 1vw;
	    color: #ffa;
	    background: #000;
	    margin: 0.5vw;
	    padding-left: 0.4vw;
	    font-size: 3.7vw;
	  }
	  .paid-bonusName{
	    color: #fff;
	    font-weight: 700;
	    font-size: 3.7vw;
	  }

	  .footer{
	    text-align: center;
	    background: #000;
	    color: #fff;
	    font-size: 3vw;
	  }

	  .fade-black{
	  }


	  /* STINGロゴボタン */
	    .sting-button-box {
	      position: relative;
	    }
	    .sting-button-img {
	      z-index: 2;
	      opacity: 0;
	      position: fixed;
	      right: 1vw;
	      width: 11vw;
	      max-width: 110px;
	      top: 0vw;
	    }
	  .top-button-box {
	    position: relative;
	    height: 12vw;
	  }
	  .top-button-img {
	    z-index: -1;
	    opacity: 0;
	    position: fixed;
	    right: 1vw;
	    width: 11vw;
	    max-width: 110px;
	    bottom: 4vw;
	  }

	  /* CERO C */
	  .CERO-C-box{
	    position: absolute;
	    top: 0;
	    width:100%;
	    z-index: 3;
	  }
	  .CERO-C-img{
	    position: absolute;
	    right: 0vw;
	    width: 11vw;
	    max-width: 110px;
	  }
	  /* Nintendo Switch */
	  .switch-logo-img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 11vw;
	    max-width: 110px;
	    z-index: 3;
	  }
	  .switch-logo{
	    position: absolute;
	    top:0;
	  }
	}
/* 縦画面 ここまで*/