/* 全体設定 */
	html { scroll-behavior: smooth;}
/* 横画面 */
@media (orientation: landscape){
	:root {
	  --width_top_all: 90vw;
	  --width_top_all-max: 1300px;
	  --width_main1: 44vw;
	  --width_main1-max: 650px;
	  --width_main2: 44vw;
	  --width_main2-max: 650px;
	}

	  /* BODY */
	  .bodyx{
	    background-image: url('back_ground_PC2.jpg');
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-color: #000;
	    overflow-x: hidden;
	    display: flex;
	    flex-direction: column;
	    min-height: 100vh;
	    margin: 0;
	    font-family: Noto Sans JP, sans-serif;
	    line-height: 1.2;
	  }

	  .show-portrait {
	    display: none;
	  }
	  .all-out_box{
	  position: relative;
	    display:grid;
	    grid-template-rows: auto auto auto auto auto auto auto;
	    width: 100%;
	    grid-template-areas:
	    "header"
	    "main-head"
	    "spacer1"
	    "switch-video"
	    "switch2edition-main"
	    "spec-main"
	    "footer";
	  }

	  .header-box{
	    grid-area: header;
	    display: grid;
	    grid-template-columns: auto auto;
	    width: 100%;
	    position: absolute;
	  }
	  .header-box_l{
	    text-align: left;
	  }
	  .header-box_l-img{
	    height: 4.4vw;
	  }
	  .header-box_r{
	    text-align: right;
	  }
	  .header-box_r-img{
	    height: 4.4vw;
	  }

	/* メインタイトル */
	  .title-logo_box{
	    grid-area: main-head;
	    width: var(--width_top_all);
	    margin: auto;
	    display:grid;
	    grid-template-rows: auto auto auto;
	    grid-template-columns: 50% 50%;
	    grid-template-areas: 
	    "top-dummy-box top-dummy-box"
	    "main1_box main2_box";
	  }
	  .main1_box{
	    grid-area: main1_box;
	    position: relative;
	    text-align:center;
	    width: 100%;
	    height: calc(var(--width_main1) * 1.3);
	    transform: translateX(0%);
	  }
	  .main2_box{
	    grid-area: main2_box;
	    width: 100%;
	    height: calc(var(--width_main1) * 1.17);
	    margin: auto;
	  }
	  .logo-grid{
	    position: absolute;
	    top: calc(var(--width_main1) * 0.125);
	    left: calc(var(--width_main1) * 0.09);
	    display: grid;
	    grid-template-rows: auto auto auto auto auto;
	    grid-template-areas:
	    "viractal-logo"
	    "platform"
	    "sell-date"
	    "notice"
	    "steam-store-box";
	  }
	  /* Grid ロゴ */
	  .viractal-logo-grid{
	    grid-area: viractal-logo;
	    margin: auto;
	  }
	  /* Grid Switch2 Edition */
	  .platform-grid{
	    grid-area: platform;
	    margin: auto;
	    margin-top: 1vw;
	  }
	  /* Grid 発売日 */
	  .sell-date-grid{
	    grid-area: sell-date;
	    margin: auto;
	    margin-top: 1vw;
	  }
	  /* Grid 注記 */
	  .notice-grid{
	    grid-area: notice;
	    margin: auto;
	    width: 100%;
	    margin-top: 2vw;
	    margin-bottom: 2vw;
	  }
	  /* Grid Steam Store */
	  .steam-store-box-grid{
	    grid-area: steam-store-box;
	    margin: auto;
	    position: relative;
	  }
	  .steam-store{
	    grid-area: steam-store1;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.07);
	    left: calc(var(--width_main1) * 0.07);
	  }
	  .steam-demo{
	    grid-area: steam-demo1;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.07);
	    right: calc(var(--width_main1) * 0.07);
	  }

	  /* Viracatal ロゴ */
	  .viractal-logo-img{
	    width: calc(var(--width_main1) * 0.8);
	    filter: drop-shadow(0px 0px 2vw rgba(0, 0, 0, 1));
	  }
	  /* Switch2 Edition */
	  .platform-img{
	    width: calc(var(--width_main1) * 0.75);
	    filter: drop-shadow(0px 0px 1vw rgba(0, 0, 0, 1))
	  }
	  /* 発売日 */
	  .sell-date-img{
	    width: calc(var(--width_main1) * 0.50);
	    filter: drop-shadow(0px 0px 1vw rgba(0, 0, 0, 1))
	  }
	  /* 注記 */
	  .notice-img{
	    width: calc(var(--width_main1) * 0.8);
	  }
	  .notices-img{
	    display:none;
	  }

	  /* ニンテンドーストア */
	  .nintendo-store-bg{
	    width: calc(var(--width_main1) * 0.8);
	  }
	  .nintendo-store-text{
	    width: calc(var(--width_main1) * 0.6);
	    filter: drop-shadow(0px 0px 0.9vw rgba(0, 0, 0, 1));
	  }

	  .nintendo-store-grid{
	    display: grid;
	    grid-template-rows: 50% 50%;
	    grid-template-columns: 50% 50%;
	    grid-template-areas:
	    "nintendo-text nintendo-text"
	    "nintendo-sw2-edition nintendo-sw-edition";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;

	  }
	  .nintendo-store-in1{
	    grid-area: nintendo-text;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100%;
	  }
	  .nintendo-store-in2{
	    grid-area: nintendo-sw2-edition;
	    display: flex;
	    justify-content: center;
	    position: relative;
	    top: -10%;
	  }
	  .nintendo-store-in3{
	    grid-area: nintendo-sw-edition;
	    display: flex;
	    justify-content: center;
	    position: relative;
	    top: -10%;
	    left: -9%;
	  }
	  .nintendo-store-btn{
	    width: calc(var(--width_main1) * 0.3);
	  }





	  /* Steam Store */
	  .steam-store-box-img{
	    width: calc(var(--width_main1) * 0.8);
	  }
	  .steam-store-boxs-img{
	    display: none;
	  }
	  .steam-store-img{
	    width: calc(var(--width_main1) * 0.3);
	  }
	  .steam-demo-img{
	    width: calc(var(--width_main1) * 0.3);
	  }

	  /* キャラ側 */
	  .main-left_box{
	    position:relative;
	  }
	  /* 駒1 */
	  .main-figure1{
	    z-index: 10;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.32);
	    left: calc(var(--width_main1) * 0.05);
	  }
	  .main-figure1-img{
	    width: calc(var(--width_main1) * 0.94);
	  }
	  /* 駒2 */
	  .main-figure2{
	    position: absolute;
	    top: calc(var(--width_main1) * 1.04);
	    left: calc(var(--width_main1) * 0.09);
	  }
	  .main-figure2-img{
	    width: calc(var(--width_main1) * 0.25);
	  }
	  /* 駒3 */
	  .main-figure3{
	    position: absolute;
	    top: calc(var(--width_main1) * 0.93);
	    left: calc(var(--width_main1) * 0.85);
	  }
	  .main-figure3-img{
	    width: calc(var(--width_main1) * 0.19);
	  }
	  /* 駒4 */
	  .main-figure4{
	    position: absolute;
	    top: calc(var(--width_main1) * 0.61);
	    left: calc(var(--width_main1) * 0.13);
	  }
	  .main-figure4-img{
	    width: calc(var(--width_main1) * 0.20);
	  }
	  /* ダイス */
	  .main-dice{
	    z-index: 11;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.23);
	    left: calc(var(--width_main1) * 0.11);
	  }
	  .main-dice-img{
	    width: calc(var(--width_main1) * 0.40);
	  }
      /* 遊ぶたびに違う冒険が待っている！ */
	  .main-text1{
	    z-index: 12;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.38);
	    left: calc(var(--width_main1) * 0.03);
	  }
	  .main-text1-img{
	    width: calc(var(--width_main1) * 0.16);
	  }
      /* ボードゲームXRPGXカードゲームの合体！ */
	  .main-text2{
	    z-index: 12;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.95);
	    left: calc(var(--width_main1) * 0.38);
	  }
	  .main-text2-img{
	    width: calc(var(--width_main1) * 0.50);
	  }
	  .main-text2s{
	    display: none;
	  }
	  .main-text2s-img{
	    display: none;
	  }

	  /* カード1 */
	  .card1-box{
	    position: absolute;
	    top: calc(var(--width_main1) * 0.64);
	    left: calc(var(--width_main1) * 0.88);
	  }
	  .card1-scene {
	    perspective: 3000px;
	  }
	  .card1-tilt {
	    transform: rotateX(340deg) rotateY(-15deg) rotateZ(20deg);
	    transform-style: preserve-3d;
	  }
	  .card1-card {
	    width: calc(var(--width_main1) * 0.11);
	    animation: card1-spin 6s linear infinite;
	  }
	  @keyframes card1-spin {
	    0% { transform: rotateY(0deg); }
	    50% { transform: rotateY(180deg);filter: brightness(2);}
	    100% { transform: rotateY(360deg); }
	  }
	  /* カード2 */
	  .card2-box{
	    position: absolute;
	    top: calc(var(--width_main1) * 0.84);
	    left: calc(var(--width_main1) * 0.20);
	  }
	  .card2-scene {
	    perspective: 3000px;
	  }
	  .card2-tilt {
	    transform: rotateX(370deg) rotateY(200deg) rotateZ(40deg);
	    transform-style: preserve-3d;
	  }
	  .card2-card {
	    width: calc(var(--width_main1) * 0.06);
	    animation: card2-spin 4.5s linear infinite;
	  }
	  @keyframes card2-spin {
	    0% { transform: rotateY(0deg); }
	    50% { transform: rotateY(180deg);filter: brightness(2);}
	    100% { transform: rotateY(360deg); }
	  }
	  /* カード3 */
	  .card3-box{
	    position: absolute;
	    top: calc(var(--width_main1) * 1.15);
	    left: calc(var(--width_main1) * 0.55);
	  }
	  .card3-scene {
	    perspective: 3000px;
	  }
	  .card3-tilt {
	    transform: rotateX(250deg) rotateY(190deg) rotateZ(30deg);
	    transform-style: preserve-3d;
	  }
	  .card3-card {
	    width: calc(var(--width_main1) * 0.07);
	    animation: card3-spin 5s linear infinite;
	  }
	  @keyframes card3-spin {
	    0% { transform: rotateY(0deg); }
	    50% { transform: rotateY(180deg);filter: brightness(2);}
	    100% { transform: rotateY(360deg); }
	  }

	  /* 調整スペーサ */
	  .spacer1{
	    grid-area: spacer1;
	    height: calc(var(--width_main1) * 0.11);
	  }

.switch2video-head{
  display: flex;
  justify-content: center;}
.switch2video-text{
}
.switch2video-head-img{
  width: calc(var(--width_main1) * 1.9);
}
.switch-video-box{
  grid-area: switch-video;

  position: relative;
  top: calc(var(--width_main1) * 0.1);
}
.youtube-out-box{
  position: relative;
  margin: auto auto 3vh;
  width: calc(var(--width_main1) * 1.9);
  max-width: calc(var(--width_main1) * 1.9);
  aspect-ratio: 1 / 0.579;
  border-radius: 1vw;
}
.youtube-in-box{
  position: absolute;
  height: 100%;
  width: 100%;
  background: #2F3046;
  border-radius: 1vw;
}
.youtube-frame{
  position: absolute;
  background:#00000000;
  color: #fff;
  border-radius: 1vw;
  border: solid #2F3046 2vw;
  width: calc(var(--width_main1) * 1.665);
  aspect-ratio: 1 / 0.505;
  margin: auto;
  padding: 2vw;
  /* z-index: -10; */
  /* opacity: 0.9;*/
}
.yt-iframe{
  position: absolute;
  width: 95.5%;
  height: 93%;
  top: 3.5%;
  left: 2.2%;
  border-radius: 1vw;
}

	  .switch2edition-box{
	    grid-area: switch2edition-main;
	    margin: auto;
	    position: relative;
	    top: calc(var(--width_main1) * 0.1);
	  }
	  .switch2edition-head{
	  }
	  .switch2edition-text{
	  }
	  .switch2edition-head-img{
	    width: calc(var(--width_main1) * 1.9);
	  }
	  /* SPEC */
	  .spec-box-out{
	    grid-area: spec-main;
	    position: relative;
	    top: calc(var(--width_main1) * 0.1);
	  }
	  .spec-box{
	    position: absolute;
	    left: 50%;
	    transform: translate(-50%);
	  }
	  .spec-box-texts-img{
	    display:none;
	  }
	  .spec-img{
	    position:relative;
	    left: 50%;
	    transform: translate(-50%);
	    width: calc(var(--width_main1) * 0.52);
	  }
	  .spec-box-head{
	    position:relative;
	  }
	  .spec-box-text-img{
	    width: calc(var(--width_main1) * 1.81);
	  }

	  /* フッタ */
	  .footer-box{
	    grid-area: footer;
	    position: relative;
	    bottom: -65vw;
	    left: 0;
	    width: 100%;
	  }
	  .footer-text-box{
	    padding-left: 2vw;
	    padding-right: 2vw;
	  }
	  .footer-text{
	    font-size: 1.3vw;
	    color: #fff;
	  }
	  .footer-copyright{
	    background:#2F3046;
	  }
	  .footer-copyright-img{
	    width: 100%;
	  }

	  /* SPEC */
	  .spec-text-box{
	    background:#2F3046;
	    color: #fff;
	    border-radius: 1vw;
	    width: calc(var(--width_main1) * 1.75);
	    margin: auto;
	    padding: 2vw;
	    opacity: 0.9;
	  }
	  .spec-text-box-head{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size:  calc(var(--width_main1) * 0.038);
	    opacity: 1;
	  }
	  .spec-text-box-body{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size:  calc(var(--width_main1) * 0.038);
	    opacity: 1;
	  }
	  .spec-text-box-body_e{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size:  calc(var(--width_main1) * 0.038);
	    opacity: 1;
	  }
	  .spec-text-box-body_o{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size:  calc(var(--width_main1) * 0.038);
	    opacity: 1;
	    color: #ffa;
	  }
	  .spec-text-line{
	    border-top: 0.5vw;
	  }
	  /* タイトル */
	  .spec-text-box-in1{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* 発売日 */
	  .spec-text-box-in2{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* 対応機種 */
	  .spec-text-box-in3{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* 希望小売価格 */
	  .spec-text-box-in4{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* 対応言語 */
	  .spec-text-box-in5{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* ジャンル */
	  .spec-text-box-in6{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* プレイ人数 */
	  .spec-text-box-in7{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* CERO */
	  .spec-text-box-in8{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }
	  /* 開発　販売 */
	  .spec-text-box-in9{
	    display:grid;
	    grid-template-columns: 20% 80%;
	  }

	  .spec-text-box-in4-grid{
	    display: grid;
	    grid-template-columns: auto auto;
	  }
	  .spec-text-box-in-price{
	    text-align: right;
	  }


	  /* Switch2Edition版機能 */
	  .sw2ed-text-box{
	    background:#2F3046;
	    color: #fff;
	    border-radius: 1vw;
	    width: calc(var(--width_main1) * 1.75);
	    margin: auto;
	    padding: 2vw;
	    opacity: 0.9;
	  }
	  .sw2ed-text-box-head{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 1.8vw;
	    opacity: 1;
	  }
	  .sw2ed-text-box-body{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 1.8vw;
	    opacity: 1;
	  }
	  /* 一番上(ダミー) */
	  .sw2ed-text-box-in1{
	    display:grid;
	    grid-template-columns: 0vw auto;
	  }
	  /* 高解像度 */
	  .sw2ed-text-box-in2{
	    display:grid;
	    grid-template-columns: 18vw auto;
	    margin-top: 2vw;
	  }
	  /* 高フレームレート */
	  .sw2ed-text-box-in3{
	    display:grid;
	    grid-template-columns: 18vw auto;
	    margin-top: 2vw;
	  }
	  /* おすそわけ通信 */
	  .sw2ed-text-box-in4{
	    display:grid;
	    grid-template-columns: 18vw auto;
	    margin-top: 2vw;
	  }

	/* 発売予定日 */
	.sell-date-in{
	  animation: sell-date-in_frame 0.4s 0.3s ease-out both;
	  display: inline-block;
	  perspective: 400px;
	}
	@keyframes sell-date-in_frame{
	  0%{
	    opacity: 0;
	    transform: rotateY(-180deg);
	  }
	  100%{
	    opacity: 1;
	    transform: rotateY(0deg);
	  }
	}
	/* 予約受付中 */
	.notice-in{
	  animation: notice-in_frame 0.4s 0.4s ease-out both;
	  display: inline-block;
	  perspective: 400px;
	}
	@keyframes notice-in_frame{
	  0%{
	    opacity: 0;
	    transform: rotateY(-180deg);
	  }
	  100%{
	    opacity: 1;
	    transform: rotateY(0deg);
	  }
	}
	/* Steamストア */
	.steam-store-in{
	  animation: steam-store-in_frame 0.4s 0.5s ease-out both;
	  display: inline-block;
	  perspective: 400px;
	}
	@keyframes steam-store-in_frame{
	  0%{
	    opacity: 0;
	    transform: rotateY(-180deg);
	  }
	  100%{
	    opacity: 1;
	    transform: rotateY(0deg);
	  }
	}

	/* STINGロゴボタン */
	.sting-button-box {
	  position: relative;
	}
	.sting-button-img {
	  z-index: 5;
	  opacity: 0;
	  position: fixed;
	  right: 1vw;
	  width: 5vw;
	  max-width: 110px;
	  top: 0vw;
	  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
	}
	.top-button-box {
	  position: relative;
	  height: 12vw;
	}
	.top-button-div{
	    position: fixed;
	    right: 2.5vw;
	    bottom: 1.5vw;
	    text-align: center;
	    color: #fff;
	    font-weight: 900;
	    opacity:0;
	}
	.top-button_circle {
	    height: 4vw;
	    width: 4vw;
	    background: #334;
	    border: solid 0.2vw #fff;
	    border-radius: 50%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    z-index: 2;
	}
	.pagetop_arrow {
	    height: 0.8vw;
	    width: 0.8vw;
	    border-top: 0.3vw solid #fff;
	    border-right: 0.3vw solid #fff;
	    transform: translateY(20%) rotate(-45deg);
	}
}



/* 縦画面 */
@media (orientation: portrait){
	:root {
	  --width_top_all: 97vw;
	  --width_top_all-max: 97vw;
	  --width_main1: 97vw;
	  --width_main1-max: 97vw;
	  --width_main2: 97vw;
	  --width_main2-max: 97vw;
	}
	  /* BODY */
	  .bodyx{
	    background-image: url('back_ground_Smartphone2.jpg');
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-color: #000;
	    overflow-x: hidden;
	    display: flex;
	    flex-direction: column;
	    min-height: 100vh;
	    margin: 0;
	    font-family: Noto Sans JP, sans-serif;
	    line-height: 1;
	  }

	  .show-portrait {
	    display: inline;
	  }
	  .all-out_box{
	    display:grid;
	    grid-template-rows: auto auto auto auto auto auto auto;
	    width: 100%;
	    grid-template-areas:
	    "header"
	    "main-head"
	    "spacer1"
	    "switch-video"
	    "switch2edition-main"
	    "spec-main"
	    "footer";
	  }

	  .header-box{
	    display: grid;
	    grid-template-columns: auto auto;
	    width: 100%;
	    position: absolute;
	  }
	  .header-box_l{
	    text-align: left;
	  }
	  .header-box_l-img{
	    height: calc(var(--width_main1) * 0.09);
	  }
	  .header-box_r{
	    text-align: right;
	  }
	  .header-box_r-img{
	    height: calc(var(--width_main1) * 0.09);
	  }

	/* メインタイトル */
	  .title-logo_box{
	    width: var(--width_top_all);
/*	    margin: auto; */
	    display:grid;
	    grid-template-rows: auto auto auto auto;
	    grid-template-areas: 
	    "top-dummy-box"
	    "main1_box"
	    "main2_box";
	  }
	  .main1_box{
	    grid-area: main1_box;
	    position: relative;
	    text-align:center;
	    width: 100%;
	    height: calc(var(--width_main1) * 1.3);
	    transform: translateX(0%);
	  }
	  .main2_box{
	    grid-area: main2_box;
	    width: 100%;
	    height: calc(var(--width_main1) * 1.17);
	    margin: auto;
	  }
	  .logo-grid{
	    position: absolute;
	    top: calc(var(--width_main1) * -0.30);
	    left: 50%;
	    transform: translate(-50%);
	    display: grid;
	    grid-template-rows: auto auto auto auto auto;
	    grid-template-areas:
	    "viractal-logo"
	    "platform"
	    "sell-date"
	    "notice"
	    "steam-store-box";
	  
	  }
	  /* Grid ロゴ */
	  .viractal-logo-grid{
	    grid-area: viractal-logo;
	    margin: auto;
	  }
	  /* Grid Switch2 Edition */
	  .platform-grid{
	    grid-area: platform;
	    margin: auto;
	    margin-top: 1.9vw;
	  }
	  /* Grid 発売日 */
	  .sell-date-grid{
	    grid-area: sell-date;
	    margin: auto;
	    margin-top: 1.5vw;
	  }
	  /* Grid 注記 */
	  .notice-grid{
	    grid-area: notice;
	    margin: auto;


	    margin-top: 2vw;
	    margin-bottom: 2vw;

	  }
	  /* Grid Steam Store */
	  .steam-store-box-grid{
	    grid-area: steam-store-box;
	    margin: auto;
	    position: relative;
	    width: calc(var(--width_main1) * 0.96);
	  }
	  .steam-store{
	    grid-area: steam-store1;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.1);
	    left: calc(var(--width_main1) * 0);
	  }
	  .steam-demo{
	    grid-area: steam-demo1;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.1);
	    right: calc(var(--width_main1) * 0);
	  }

	  /* Viracatal ロゴ */
	  .viractal-logo-img{
	    width: calc(var(--width_main1) * 0.8);
	    filter: drop-shadow(0px 0px 2vw rgba(0, 0, 0, 1));
	  }
	  /* Switch2 Edition */
	  .platform-img{
	    width: calc(var(--width_main1) * 0.75);
	    filter: drop-shadow(0px 0px 1vw rgba(0, 0, 0, 1))
	  }
	  /* 発売日 */
	  .sell-date-img{
	    width: calc(var(--width_main1) * 0.50);
	    filter: drop-shadow(0px 0px 1vw rgba(0, 0, 0, 1))
	  }
	  /* 注記 */
	  .notice-img{
	    display: none;
	  }
	  .notices-img{
	    margin-top: 6vw;
	    width: calc(var(--width_main1) * 0.96);
	  }

	  /* ニンテンドーストア */
	  .nintendo-store-bg{
	    width: calc(var(--width_main1) * 0.96);
	    opacity: 0;
	  }
	  .nintendo-store-text{
	    width: calc(var(--width_main1) * 0.75);
	    filter: drop-shadow(0px 0px 0.9vw rgba(0, 0, 0, 1));
	  }
	  .nintendo-store-grid{
	    display: grid;
	    grid-template-rows: 50% 50%;
	    grid-template-columns: 50% 50%;
	    grid-template-areas:
	    "nintendo-text nintendo-text"
	    "nintendo-sw2-edition nintendo-sw-edition";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;

	  }
	  .nintendo-store-in1{
	    grid-area: nintendo-text;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100%;
	  }
	  .nintendo-store-in2{
	    grid-area: nintendo-sw2-edition;
	    display: flex;
	    justify-content: center;
	    position: relative;

	  }
	  .nintendo-store-in3{
	    grid-area: nintendo-sw-edition;
	    display: flex;
	    justify-content: center;
	    position: relative;

	  }
	  .nintendo-store-btn{
	    width: calc(var(--width_main1) * 0.47);
	  }







	  /* Steam Store */
	  .steam-store-box-img{
	    display: none;
	  }
	  .steam-store-boxs-img{
	    width: calc(var(--width_main1) * 0.55);
	    position: relative;
	    left: 50%;
	    transform: translate(-50%);
	  }
	  .steam-store-img{
	    width: calc(var(--width_main1) * 0.47);
	  }
	  .steam-demo-img{
	    width: calc(var(--width_main1) * 0.47);
	  }


	  .Viractal-logo_in{
	    animation: viractal-logo_in_frame 0.3s ease-in;
	    opacity: 1;
	  }
	  @keyframes viractal-logo_in_frame{
	    0%{
	      transform-origin: 50% 100vw;
	      transform: scale(1.0) rotate(-8deg);
	      opacity: 0;
	    }
	    100%{
	      transform: scale(1);
	      opacity: 1;
	    }
	  }

	  /* キャラ側 */
	  .main-left_box{
	    position:relative;
	  }
	  /* 駒1 */
	  .main-figure1{
	    z-index: 10;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.41);
	    left: calc(var(--width_main1) * 0.04);
	  }
	  .main-figure1-img{
	    width: calc(var(--width_main1) * 0.88);
	  }
	  /* 駒2 */
	  .main-figure2{
	    position: absolute;
	    top: calc(var(--width_main1) * 1.50);
	    left: calc(var(--width_main1) * -0.03);
	  }
	  .main-figure2-img{
	    width: calc(var(--width_main1) * 0.30);
	  }
	  /* 駒3 */
	  .main-figure3{
	    position: absolute;
	    top: calc(var(--width_main1) * 1.37);
	    left: calc(var(--width_main1) * 0.80);
	  }
	  .main-figure3-img{
	    width: calc(var(--width_main1) * 0.20);
	  }
	  /* 駒4 */
	  .main-figure4{
	    position: absolute;
	    top: calc(var(--width_main1) * 0.8);
	    left: calc(var(--width_main1) * -0.08);
	  }
	  .main-figure4-img{
	    width: calc(var(--width_main1) * 0.22);
	  }
	  /* ダイス */
	  .main-dice{
	    z-index: 11;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.13);
	    left: calc(var(--width_main1) * 0.02);
	  }
	  .main-dice-img{
	    width: calc(var(--width_main1) * 0.59);
	  }
      /* 遊ぶたびに違う冒険が待っている！ */
	  .main-text1{
	    z-index: 12;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.38);
	    left: calc(var(--width_main1) * 0.02);
	  }
	  .main-text1-img{
	    width: calc(var(--width_main1) * 0.12);
	  }
      /* ボードゲームXRPGXカードゲームの合体！ */
	  .main-text2{
	    display: none;
	  }
	  .main-text2-img{
	    display: none;
	  }
	  .main-text2s{
	    z-index: 12;
	    position: absolute;
	    top: calc(var(--width_main1) * 0.14);
	    left: calc(var(--width_main1) * 0.86);
	  }
	  .main-text2s-img{
	    width: calc(var(--width_main1) * 0.14);
	  }

	  /* カード1 */
	  .card1-box{
	    position: absolute;
	    top: calc(var(--width_main1) * 1.18);
	    left: calc(var(--width_main1) * 0.86);
	  }
	  .card1-scene {
	    perspective: 3000px;
	  }
	  .card1-tilt {
	    transform: rotateX(340deg) rotateY(-15deg) rotateZ(20deg);
	    transform-style: preserve-3d;
	  }
	  .card1-card {
	    width: calc(var(--width_main1) * 0.11);
	    animation: card1-spin 6s linear infinite;
	  }
	  @keyframes card1-spin {
	    0% { transform: rotateY(0deg); }
	    50% { transform: rotateY(180deg);filter: brightness(2);}
	    100% { transform: rotateY(360deg); }
	  }
	  /* カード2 */
	  .card2-box{
	    position: absolute;
	    top: calc(var(--width_main1) * 0.65);
	    left: calc(var(--width_main1) * 0.16);
	  }
	  .card2-scene {
	    perspective: 3000px;
	  }
	  .card2-tilt {
	    transform: rotateX(370deg) rotateY(200deg) rotateZ(40deg);
	    transform-style: preserve-3d;
	  }
	  .card2-card {
	    width: calc(var(--width_main1) * 0.06);
	    animation: card2-spin 4.5s linear infinite;
	  }
	  @keyframes card2-spin {
	    0% { transform: rotateY(0deg); }
	    50% { transform: rotateY(180deg);filter: brightness(2);}
	    100% { transform: rotateY(360deg); }
	  }
	  /* カード3 */
	  .card3-box{
	    position: absolute;
	    top: calc(var(--width_main1) * 1.15);
	    left: calc(var(--width_main1) * 0.04);
	  }
	  .card3-scene {
	    perspective: 3000px;
	  }
	  .card3-tilt {
	    transform: rotateX(250deg) rotateY(190deg) rotateZ(30deg);
	    transform-style: preserve-3d;
	  }
	  .card3-card {
	    width: calc(var(--width_main1) * 0.07);
	    animation: card3-spin 5s linear infinite;
	  }
	  @keyframes card3-spin {
	    0% { transform: rotateY(0deg); }
	    50% { transform: rotateY(180deg);filter: brightness(2);}
	    100% { transform: rotateY(360deg); }
	  }



	  /* 調整スペーサ */
	  .spacer1{
	    height: calc(var(--width_main1) * 0.08);
	  }



.switch2video-head{
  display: flex;
  justify-content: center;}
.switch2video-text{
}
.switch2video-head-img{
  width: calc(var(--width_main1) * 1);
}
.switch-video-box{
  grid-area: switch-video;

  position: relative;
  top: calc(var(--width_main1) * -1.1);
}
.youtube-out-box{
  position: relative;
  margin: auto auto 3vh;
  width: calc(var(--width_main1) * 0.95);
  max-width: calc(var(--width_main1) * 0.95);
  aspect-ratio: 1 / 0.579;
  border-radius: 1vw;
}
.youtube-in-box{
  position: absolute;
  height: 93%;
  width: 97%;
  background: #2F3046;
  border-radius: 1vw;
}
.youtube-frame{
  position: absolute;
  background:#2F3046;
  color: #fff;
  border-radius: 1vw;
  width: calc(var(--width_main1) * 1.75);
  aspect-ratio: 1 / 0.535;
  margin: auto;
  padding: 2vw;
  z-index: -10;
  /* opacity: 0.9;*/
}
.yt-iframe{
position: absolute;
width: 95.5%;
height: 96%;
top: 2%;
left: 2%;
border-radius: 1vw;
}





	  .switch2edition-box{
	    margin: auto;
	    position: relative;
	    top: calc(var(--width_main1) * 0.30);
	  }
	  .switch2edition-head{
	  }
	  .switch2edition-text{
	  }
	  .switch2edition-head-img{
	    width: calc(var(--width_main1) * 1);
	  }
	  .switch2edition-text-img{
	    position: relative;
	    left: 50%;
	    transform: translate(-50%);
	    width: calc(var(--width_main1) * 0.9);
	  }


	  /* SPEC */
	  .spec-box-out{
	    position: relative;
	    top: calc(var(--width_main1) * -0.15);
	  }
	  .spec-box{
	    position: absolute;
	    left: 50%;
	    transform: translate(-50%);
	  }
	  .spec-img{
	    position:relative;
	    left: 50%;
	    transform: translate(-50%);
	    width: calc(var(--width_main1) * 0.3);
	  }
	  .spec-box-head{
	    position:relative;
	  }
	  .spec-box-text-img{
	    display:none;
	  }
	  .spec-box-texts-img{
	    position: relative;
	    left: 50%;
	    transform: translate(-50%);
	    width: calc(var(--width_main1) * 0.9);
	  }

	  /* フッタ */
	  .footer-box{
	    position: relative;
	    bottom: -160vw;
	    left: 0;
	    width: 100%;
	  }
	  .footer-text-box{
	    padding-left: 2vw;
	    padding-right: 2vw;
	    background: #000;
	    opacity: 0.7;
	    line-height: 1.5vw;
	  }
	  .footer-text{
	    font-family: Noto Sans JP, sans-serif;
	    font-size: 1.3vw;
	    color: #fff;
	    opacity: 1;
	  }
	  .footer-copyright{
	    background:#2F3046;
	  }
	  .footer-copyright-img{
	    width: 100%;
	  }

	  /* SPEC */
	  .spec-text-box{
	    background:#2F3046;
	    color: #fff;
	    border-radius: 2vw;
	    width: calc(var(--width_main1) * 0.85);
	    margin: auto;
	    padding: 2.5vw;
	    opacity: 0.9;
	  }
	  .spec-text-box-head{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 3.5vw;
	    color: #ffb;
	    opacity: 1;
	  }
	  .spec-text-box-body{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 2.9vw;
	    opacity: 1;
	    line-height: 1.2;
	  }
	  .spec-text-box-body_e{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 2.9vw;
	    opacity: 1;
	    line-height: 1.2;
	  }
	  .spec-text-box-body_o{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 2.9vw;
	    opacity: 1;
	    line-height: 1.2;
	  }
	  /* タイトル */
	  .spec-text-box-in1{
	    display:grid;
	    grid-template-rows: auto auto;
	  }
	  /* 発売日 */
	  .spec-text-box-in2{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* 対応機種 */
	  .spec-text-box-in3{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* 希望小売価格 */
	  .spec-text-box-in4{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* 対応言語 */
	  .spec-text-box-in5{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* ジャンル */
	  .spec-text-box-in6{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* プレイ人数 */
	  .spec-text-box-in7{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* CERO */
	  .spec-text-box-in8{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* 開発　販売 */
	  .spec-text-box-in9{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }

	  .spec-text-box-in4-grid{
	    display: grid;
	    grid-template-rows: auto auto;
	  }
	  .spec-text-box-in-price{
	    text-align: right;
	  }

	  /* Switch2Edition版機能 */
	  .sw2ed-text-box{
	    background:#2F3046;
	    color: #fff;
	    border-radius: 2vw;
	    width: calc(var(--width_main1) * 0.85);
	    margin: auto;
	    padding: 3.5vw;
	    opacity: 0.9;
	  }
	  .sw2ed-text-box-head{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 3.5vw;
	    color: #bff;
	    opacity: 1;
	  }
	  .sw2ed-text-box-body{
	    font-family: Noto Sans JP, sans-serif;
	    font-weight: 800;
	    font-size: 3.5vw;
	    opacity: 1;
	  }
	  /* 一番上(ダミー) */
	  .sw2ed-text-box-in1{
	    display:grid;
	    grid-template-rows: auto auto;
	  }
	  /* 高解像度 */
	  .sw2ed-text-box-in2{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* 高フレームレート */
	  .sw2ed-text-box-in3{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }
	  /* おすそわけ通信 */
	  .sw2ed-text-box-in4{
	    display:grid;
	    grid-template-rows: auto auto;
	    margin-top: 2vw;
	  }


	/* 発売予定日 */
	.sell-date-in{
	  animation: sell-date-in_frame 0.4s ease-out both;
	  display: inline-block;
	  perspective: 400px;
	}
	@keyframes sell-date-in_frame{
	  0%{
	    opacity: 0;
	    transform: rotateY(-180deg);
	  }
	  100%{
	    opacity: 1;
	    transform: rotateY(0deg);
	  }
	}
	/* 予約受付中 */
	.notice-in{
	  animation: notice-in_frame 0.4s ease-out both;
	  display: inline-block;
	  perspective: 400px;
	}
	@keyframes notice-in_frame{
	  0%{
	    opacity: 0;
	    transform: rotateY(-180deg);
	  }
	  100%{
	    opacity: 1;
	    transform: rotateY(0deg);
	  }
	}
	/* Steamストア */
	.steam-store-in{
	  animation: steam-store-in_frame 0.4s ease-out both;
	  display: inline-block;
	  perspective: 400px;
	}
	@keyframes steam-store-in_frame{
	  0%{
	    opacity: 0;
	    transform: rotateY(-180deg);
	  }
	  100%{
	    opacity: 1;
	    transform: rotateY(0deg);
	  }
	}

	/* STINGロゴボタン */
	.sting-button-box {
	  position: relative;
	}
	.sting-button-img {
	  z-index: 5;
	  opacity: 0;
	  position: fixed;
	  right: 1vw;
	  width: 11vw;
	  max-width: 110px;
	  top: 0vw;
	  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
	}
	.top-button-box {
	  position: relative;
	  height: 12vw;
	}
	.top-button-div{
	    position: fixed;
	    right: 2.5vw;
	    bottom: 1.5vw;
	    text-align: center;
	    color: #fff;
	    font-weight: 900;
	    opacity:0;
	}
	.top-button_circle {
	    height: 8vw;
	    width: 8vw;
	    background: #334;
	    border: solid 0.4vw #fff;
	    border-radius: 50%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    z-index: 2;
	}
	.pagetop_arrow {
	    height: 1.6vw;
	    width: 1.6vw;
	    border-top: 0.6vw solid #fff;
	    border-right: 0.6vw solid #fff;
	    transform: translateY(20%) rotate(-45deg);
	}
}




/*

アニメーション関連

*/
	/* 背景フェード用 */
	.bg-fade{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #000;
	  opacity: 0;
	  animation: bg-fade_frame 2s ease-in;
	}
	@keyframes bg-fade_frame{
	    0%{
	    opacity: 1;
	  }
	  100%{
	    opacity: 0;
	  }
	}

	  /* 駒1 */
	.figure1_in{
	  animation: figure1_in_frame 0.8s ease-in;
	  opacity: 1;
	}
	@keyframes figure1_in_frame{
	  0%{
	    transform: scale(2);
	    opacity: 0;
	  }
	  98%{
	    transform: scale(0.95);
	    opacity: 1;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	  /* 駒2 */
	.figure2_in{
	  animation: figure2_in_frame 0.5s ease-in both;
	  opacity: 1;
	}
	@keyframes figure2_in_frame{
	  0%{
	    transform: translateX(-10vw) translateY(-10vh) scale(1.2);
	    opacity: 0;
	  }
	  80%{
	    transform: scale(0.9);
	    opacity: 1;
	  }
	  83%{
	    transform: scale(1);
	    opacity: 1;
	  }
	   85%  { transform: rotate( 3deg); }
	   90%  { transform: rotate( 0deg); }
	   95%  { transform: rotate(-3deg); }
	  100%  { transform: rotate( 0deg); }
	}
	  /* 駒3 */
	.figure3_in{
	  animation: figure3_in_frame 0.5s 0.1s ease-in both;
	  opacity: 1;
	}
	@keyframes figure3_in_frame{
	  0%{
	    transform: translateX(10vw) translateY(-13vh) scale(1.3);
	    opacity: 0;
	  }
	  80%{
	    transform: scale(0.9);
	    opacity: 1;
	  }
	  83%{
	    transform: scale(1);
	    opacity: 1;
	  }
	   85%  { transform: rotate( 3deg); }
	   90%  { transform: rotate( 0deg); }
	   95%  { transform: rotate(-3deg); }
	  100%  { transform: rotate( 0deg); }
	}
	  /* 駒4 */
	.figure4_in{
	  animation: figure4_in_frame 0.5s 0.2s ease-in both;
	  opacity: 1;
	}
	@keyframes figure4_in_frame{
	  0%{
	    transform: translateX(-10vw) translateY(-13vh) scale(1.3);
	    opacity: 0;
	  }
	  80%{
	    transform: scale(0.9);
	    opacity: 1;
	  }
	  83%{
	    transform: scale(1);
	    opacity: 1;
	  }
	   85%  { transform: rotate( 3deg); }
	   90%  { transform: rotate( 0deg); }
	   95%  { transform: rotate(-3deg); }
	  100%  { transform: rotate( 0deg); }
	}
	/* ダイス */
	.dice_in{
	  animation: dice_in_frame 1.4s ease-in;
	  opacity: 1;
	}
	@keyframes dice_in_frame{
	  0%{
	    transform: rotate(-900deg) translateX(-10vw) translateY(20vh) scale(3);
	    opacity: 0;
	  }
	  98%{
	    transform: scale(0.95);
	    opacity: 1;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	/* カード1 */
	.card1_in{
	  animation: card1_in_frame 0.8s ease-in;
	  opacity: 1;
	}
	@keyframes card1_in_frame{
	  0%{
	    transform: translateX(10vw) translateY(-10vh) scale(1.2);
	    opacity: 0;
	  }
	  98%{
	    transform: scale(0.95);
	    opacity: 1;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	/* カード2 */
	.card2_in{
	  animation: card2_in_frame 0.9s ease-in;
	  opacity: 1;
	}
	@keyframes card2_in_frame{
	  0%{
	    transform: translateX(-10vw) translateY(-10vh) scale(1.2);
	    opacity: 0;
	  }
	  98%{
	    transform: scale(0.95);
	    opacity: 1;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	/* カード3 */
	.card3_in{
	  animation: card3_in_frame 0.9s ease-in;
	  opacity: 1;
	}
	@keyframes card3_in_frame{
	  0%{
	    transform: translateX(0vw) translateY(5vh) scale(1.2);
	    opacity: 0;
	  }
	  98%{
	    transform: scale(0.95);
	    opacity: 1;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}

	  /* Viracatal ロゴ */
	.Viractal-logo_in{
	  animation: viractal-logo_in_frame 0.4s 0.3s ease-out both;
	  opacity: 1;
	}
	@keyframes viractal-logo_in_frame{
	  0%{
	    transform-origin: 50% 100vw;
	    transform: scale(1.0) rotate(-6deg);
	    opacity: 0;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}

	/* Switch2 Edition */
	.sw2edition_in{
	  animation: sw2edition_in_frame 0.4s 0.3s ease-out both;
	  opacity: 1;
	}
	@keyframes sw2edition_in_frame{
	  0%{
	    transform-origin: 50% 100vw;
	    transform: scale(1.0) rotate(6deg);
	    opacity: 0;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}

	/* 遊ぶたびに違う冒険が待っている！ */
	.main-text1_in{
	  animation: main-text1_in_frame 0.4s 0.3s ease-in both;
	  opacity: 1;
	}
	@keyframes main-text1_in_frame{
	  0%{
	    transform-origin: 50% 100vw;
	    transform: scale(1.0) rotate(-6deg);
	    opacity: 0;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	/* ボードゲームXRPGXカードゲームの合体！ */
	.main-text2_in{
	  animation: main-text2_in_frame 1.2s ease-in both;
	  opacity: 1;
	}
	@keyframes main-text2_in_frame{
	  0%{
	    transform: translateX(0vw) translateY(10vh) scale(1.1);
	    opacity: 0;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	.main-text2s_in{
	  animation: main-text2s_in_frame 0.4s 0.3s ease-in both;
	  opacity: 1;
	}
	@keyframes main-text2s_in_frame{
	  0%{
	    transform-origin: 50% 100vw;
	    transform: scale(1.0) rotate(6deg);
	    opacity: 0;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	.main-text2_in-after{
	  opacity: 1;
	}
	.main-text2s_in-after{
	  opacity: 1;
	}

	/* ダイスアニメーション2 */
	.dice_anim{
	  animation: dice_frame 5s linear infinite;
	}
	@keyframes dice_frame{
	  0%{
	    transform: rotate(0deg);
	  }
	  25%{
	    transform: rotate(10deg);
	  }
	  50%{
	    transform: rotate(20deg);
	    filter: brightness(1.4);
	  }
	  75%{
	    transform: rotate(10deg);
	  }
	}

	.wobble1{
	  animation-direction: alternate;
	  animation: wobble1_key 15s infinite;
	}

	@keyframes wobble1_key{
	  0%{
	    transform: scale(1);
	  }
	  50%{
	    transform: scale(1.05);
	  }
	  100%{
	    transform: scale(1);
	  }
	}
	.wobble2{
	  transform-origin: bottom right;
	  animation: wobble2_key 10s ease-in-out infinite;
	}

	  /* 駒1 */
	.figure1_in{
	  animation: figure1_in_frame 1.2s ease-in;
	  opacity: 1;
	}
	@keyframes figure1_in_frame{
	  0%{
	    transform: scale(2);
	    opacity: 0;
	  }
	  98%{
	    transform: scale(0.95);
	    opacity: 1;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}

	@keyframes wobble2_key{
	 92%  { transform: rotate( 0deg); }
	 93%  { transform: rotate( 4deg); }
	 94%  { transform: rotate( 0deg); }
	 95%  { transform: rotate(-5deg); }
	 96%  { transform: rotate( 0deg); }
	 97%  { transform: rotate( 3deg); }
	 98%  { transform: rotate( 0deg); }
	 99%  { transform: rotate(-3deg); }
	100%  { transform: rotate( 0deg); }
	}
	.wobble3{
	  transform-origin: bottom left;
	  animation: wobble3_key 8s ease-in-out infinite;
	}

	@keyframes wobble3_key{
	 92%  { transform: rotate( 0deg); }
	 93%  { transform: rotate( 4deg); }
	 94%  { transform: rotate( 0deg); }
	 95%  { transform: rotate(-5deg); }
	 96%  { transform: rotate( 0deg); }
	 97%  { transform: rotate( 3deg); }
	 98%  { transform: rotate( 0deg); }
	 99%  { transform: rotate(-3deg); }
	100%  { transform: rotate( 0deg); }
	}
	.wobble4{
	  transform-origin: bottom right;
	  animation: wobble4_key 6s ease-in-out infinite;
	}

	@keyframes wobble4_key{
	 92%  { transform: rotate( 0deg); }
	 93%  { transform: rotate( 4deg); }
	 94%  { transform: rotate( 0deg); }
	 95%  { transform: rotate(-5deg); }
	 96%  { transform: rotate( 0deg); }
	 97%  { transform: rotate( 3deg); }
	 98%  { transform: rotate( 0deg); }
	 99%  { transform: rotate(-3deg); }
	100%  { transform: rotate( 0deg); }
	}



	  .fadeUp{
	    animation-name:fadeUpAnim;
	    animation-duration:0.5s;
	    animation-fill-mode:forwards;
	    opacity:0;
	  }
	  @keyframes fadeUpAnim{
	    0% {
	      opacity: 0;
	      transform: scale(1.5);
	    }
	    100% {
	      opacity: 1;
	      transform: scale(1);
	    }
	  }

	  .fadeOut{
	    animation-name:fadeOutAnim;
	    animation-duration:0.5s;
	    animation-fill-mode:forwards;
	    opacity:1;
	  }
	  @keyframes fadeOutAnim{
	    0% {
	      opacity: 1;
	      transform: scale(1);
	    }
	    100% {
	      opacity: 0;
	      transform: scale(0.5);
	      z-index: -1;
	    }
	  }



	  .flip-btn {
	    display: inline-block;
	    perspective: 400px;
	  }
	  .flip-btn img {
	    transition: transform 0.3s ease; 
	  }
	  .flip-btn:hover img {
	    transform: rotateY(360deg);
	  }

	  .flip-btn2 {
	    display: inline-block;
	    perspective: 1000px;
	  }
	  .flip-btn2 img {
	    transition: transform 0.3s ease; 
	  }
	  .flip-btn2:hover img {
	    transform: rotateY(360deg);
	  }