.twoWayInputBK{ position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1200; backdrop-filter: blur(3px); } .twoWayInputWindow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; aspect-ratio: 1 / 1; width: 100%; max-width: 780px; height: fit-content; max-height: 780px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(3px); border-radius: 5px; padding: 2% 3%; z-index: 1210; box-shadow: 0 0 23px rgba(0, 0, 0, 0.31); } .twoWayInputWindow h1 { text-align: center; font-size: 24px; margin: 0 0 20px 0; } .twoWayInputWindow strong { display: block; } .InputExp { display: flex; flex-wrap: wrap; gap: 1%; } .expCard { width: 49.5%; background: #f1f1f1; padding: 1px 7px; margin-bottom: 1%; border-radius: 7px; } .twoWayIputArea { padding: 30px 0; } .twoWayIputObj { margin: 0 0 20px 0; } .twoWayIputObj input { font-size: 20px; width: 100%; } .twoWayIputObj strong { font-size: 20px; } .twoWayIputArea button { margin-top: 20px; border-radius: 50px; border: 0; padding: 20px; width: 40%; background: #dcdcdc; font-size: 25px; color: #fff; text-align: center; } .tarotFieldCover{ display: none; position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1); opacity:0; z-index: 2000; } /* 左 */ @keyframes coverIn { 0% {backdrop-filter: blur(0); opacity:0;} 100% {backdrop-filter: blur(3px); opacity:0.8;} } h2.tarotConfirm { position: absolute; top: -60%; left: 0; right: 0; bottom: 0; margin: auto; padding: 10px 20px; text-align: center; border-radius: 5px; width: fit-content; height: fit-content; background: #f2e5d8; color: #4b2c12; z-index: 300; } #tarotDrawConfirm{ display: none; } .tarotField{ position: relative; width: 100%; max-width: 1023px; aspect-ratio: 1 / 1; background-color: #d8e3ee; background-size: contain; background-repeat: no-repeat; background-position: center; transform-origin: 50%; border-radius: 5px; z-index: 1000; } .cardBody{ position: absolute; height: 23%; width: 13.0%; border-radius: 10px; transform-style: preserve-3d; box-shadow: 0 0 3px rgb(0 0 0 / 10%); } .card_back{ position: absolute; height: 100%; width: 100%; background-image: url(../../cmmn/img/tarot_mini/card_back_mini.png); background-color: #000000; background-size: contain; background-repeat: no-repeat; background-position: center; transform-origin: 50%; backface-visibility: hidden; border-radius: 13px; cursor: pointer; } .card_front{ position: absolute; height: 100%; width: 100%; border-radius: 6px; background-color: #fff; background-image: url(../../cmmn/img/tarot_mini/1.png); background-size: 92%; background-repeat: no-repeat; background-position: center; transform-origin: 50%; transform: rotateY(180deg); backface-visibility: hidden; } .shuffle{ top : calc((100% - 23%) / 2); left: calc((100% - 13.0%) / 2); } /* 右上*/ @keyframes cardAnim_bomb_1 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% + 13%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_2 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% + 19%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_3 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% + 26%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_4 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% + 32%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_5 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% + 39%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_6 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 73%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_7 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 60%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_8 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 47%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_9 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 34%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_10 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 23%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_11 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 15%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_12 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 2%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_13 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 15%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_14 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 28%) / 2);left:calc((100% + 72%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_15 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% + 39%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_16 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% + 33%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_17 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% + 26%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_18 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% + 20%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_19 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% - 13%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_20 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% - 30%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_21 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% - 47%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_22 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% - 64%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_23 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% - 81%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_24 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 55%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_25 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 36%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_26 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% + 17%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_27 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 2%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_28 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_29 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 31%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_30 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 44%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_31 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 49%) / 2);left:calc((100% - 98%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_32 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 60%) / 2);left:calc((100% - 83%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_33 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% - 68%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_34 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% - 53%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_35 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% - 38%) / 2);transform: rotate(360deg);}} @keyframes cardAnim_bomb_36 {0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - 98%) / 2);left:calc((100% - 22%) / 2);transform: rotate(360deg);}} /* 左 */ @keyframes cardDivide_1 { 0% {top:calc((100% - 23%) / 2) ;left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);} } /* 中央 */ @keyframes cardDivide_2 { 0% {top:calc((100% - 23%) / 2) ;left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);} } /* 右 */ @keyframes cardDivide_3 { 0% {top:calc((100% - 23%) / 2) ;left:calc((100% - 13.0%) / 2);} 100% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);} } /* 1枚引き */ @keyframes drw_1_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_1_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_1_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_1_p1{ 0% {transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 2枚引き */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_2_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 33.05%) / 2);} } @keyframes drw_2_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 33.05%) / 2);} } @keyframes drw_2_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 33.05%) / 2);} } /* カード回転して裏返し */ @keyframes flip_2_p1{ 0% {top:calc((100% - 23%) / 2);left:calc((100% - 33.05%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 23%) / 2);left:calc((100% - 33.05%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 33.05%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_2_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -6%) / 2);} } @keyframes drw_2_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -6%) / 2);} } @keyframes drw_2_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -6%) / 2);} } /* カード回転して裏返し */ @keyframes flip_2_p2{ 0% {top:calc((100% - 23%) / 2);left:calc((100% - -6%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 23%) / 2);left:calc((100% - -6%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -6%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 3枚引き 3オラクル */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_3A_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 43.05%) / 2);} } @keyframes drw_3A_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 43.05%) / 2);} } @keyframes drw_3A_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 43.05%) / 2);} } /* カード回転して裏返し */ @keyframes flip_3A_p1{ 0% {top:calc((100% - 23%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 23%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_3A_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_3A_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_3A_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_3A_p2{ 0% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 23%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 3枚目 */ @keyframes drw_3A_1_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -19%) / 2);} } @keyframes drw_3A_2_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -19%) / 2);} } @keyframes drw_3A_3_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -19%) / 2);} } /* カード回転して裏返し */ @keyframes flip_3A_p3{ 0% {top:calc((100% - 23%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 23%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 23%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 3枚引き ゴールデントリン */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_3B_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 18%) / 2);left:calc((100% - 33.05%) / 2);} } @keyframes drw_3B_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 18%) / 2);left:calc((100% - 33.05%) / 2);} } @keyframes drw_3B_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 18%) / 2);left:calc((100% - 33.05%) / 2);} } /* カード回転して裏返し */ @keyframes flip_3B_p1{ 0% {top:calc((100% - 18%) / 2);left:calc((100% - 33.05%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 18%) / 2);left:calc((100% - 33.05%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 18%) / 2);left:calc((100% - 33.05%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_3B_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 18%) / 2);left:calc((100% - -6%) / 2);} } @keyframes drw_3B_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 18%) / 2);left:calc((100% - -6%) / 2);} } @keyframes drw_3B_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 18%) / 2);left:calc((100% - -6%) / 2);} } /* カード回転して裏返し */ @keyframes flip_3B_p2{ 0% {top:calc((100% - 18%) / 2);left:calc((100% - -6%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 18%) / 2);left:calc((100% - -6%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 18%) / 2);left:calc((100% - -6%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 3枚目 */ @keyframes drw_3B_1_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 73%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_3B_2_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 73%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_3B_3_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 73%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_3B_p3{ 0% {top:calc((100% - 73%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 73%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 73%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 4枚引き */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_4_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 43%) / 2);left:calc((100% - 43.05%) / 2);} } @keyframes drw_4_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 43%) / 2);left:calc((100% - 43.05%) / 2);} } @keyframes drw_4_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 43%) / 2);left:calc((100% - 43.05%) / 2);} } /* カード回転して裏返し */ @keyframes flip_4_p1{ 0% {top:calc((100% - 43%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 43%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 43%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_4_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 43%) / 2);left:calc((100% - -19%) / 2);} } @keyframes drw_4_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 43%) / 2);left:calc((100% - -19%) / 2);} } @keyframes drw_4_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 43%) / 2);left:calc((100% - -19%) / 2);} } /* カード回転して裏返し */ @keyframes flip_4_p2{ 0% {top:calc((100% - 43%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 43%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 43%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 3枚目 */ @keyframes drw_4_1_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 13%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_4_2_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 13%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_4_3_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 13%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_4_p3{ 0% {top:calc((100% - 13%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 13%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 13%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 4枚目 */ @keyframes drw_4_1_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 70%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_4_2_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 70%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_4_3_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 70%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_4_p4{ 0% {top:calc((100% - 70%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 70%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 70%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 5枚引き */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_5_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 43.05%) / 2);} } @keyframes drw_5_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 43.05%) / 2);} } @keyframes drw_5_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 43.05%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5_p1{ 0% {top:calc((100% - 47%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 47%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 43.05%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_5_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -19%) / 2);} } @keyframes drw_5_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -19%) / 2);} } @keyframes drw_5_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -19%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5_p2{ 0% {top:calc((100% - 47%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 47%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -17%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 3枚目 */ @keyframes drw_5_1_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5_2_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5_3_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5_p3{ 0% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 4枚目 */ @keyframes drw_5_1_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5_2_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5_3_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5_p4{ 0% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 5枚目 */ @keyframes drw_5_1_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5_2_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5_3_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5_p5{ 0% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 5枚引き 二者択一 */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_5B_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 12%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5B_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 12%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_5B_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 12%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5B_p1{ 0% {top:calc((100% - 12%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 12%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 12%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_5B_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 22%) / 2);left:calc((100% - 50%) / 2);} } @keyframes drw_5B_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 22%) / 2);left:calc((100% - 50%) / 2);} } @keyframes drw_5B_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 22%) / 2);left:calc((100% - 50%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5B_p2{ 0% {top:calc((100% - 22%) / 2);left:calc((100% - 50%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 22%) / 2);left:calc((100% - 50%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 22%) / 2);left:calc((100% - 50%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 3枚目 */ @keyframes drw_5B_1_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 22%) / 2);left:calc((100% - -23%) / 2);} } @keyframes drw_5B_2_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 22%) / 2);left:calc((100% - -23%) / 2);} } @keyframes drw_5B_3_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 22%) / 2);left:calc((100% - -23%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5B_p3{ 0% {top:calc((100% - 22%) / 2);left:calc((100% - -23%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 22%) / 2);left:calc((100% - -23%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 22%) / 2);left:calc((100% - -23%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 4枚目 */ @keyframes drw_5B_1_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 32%) / 2);left:calc((100% - 88.0%) / 2);} } @keyframes drw_5B_2_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 32%) / 2);left:calc((100% - 88.0%) / 2);} } @keyframes drw_5B_3_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 32%) / 2);left:calc((100% - 88.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5B_p4{ 0% {top:calc((100% - 32%) / 2);left:calc((100% - 88.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 32%) / 2);left:calc((100% - 88.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 32%) / 2);left:calc((100% - 88.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 5枚目 */ @keyframes drw_5B_1_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 32%) / 2);left:calc((100% - -61.0%) / 2);} } @keyframes drw_5B_2_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 32%) / 2);left:calc((100% - -61.0%) / 2);} } @keyframes drw_5B_3_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 32%) / 2);left:calc((100% - -61.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_5B_p5{ 0% {top:calc((100% - 32%) / 2);left:calc((100% - -61.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 32%) / 2);left:calc((100% - -61.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 32%) / 2);left:calc((100% - -61.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 6枚引き */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_6_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 46.05%) / 2);} } @keyframes drw_6_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 46.05%) / 2);} } @keyframes drw_6_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 46.05%) / 2);} } /* カード回転して裏返し */ @keyframes flip_6_p1{ 0% {top:calc((100% - -2%) / 2);left:calc((100% - 46.05%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - -2%) / 2);left:calc((100% - 46.05%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 46.05%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_6_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_6_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_6_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_6_p2{ 0% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 3枚目 */ @keyframes drw_6_1_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - -20%) / 2);} } @keyframes drw_6_2_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - -20%) / 2);} } @keyframes drw_6_3_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - -20%) / 2);} } /* カード回転して裏返し */ @keyframes flip_6_p3{ 0% {top:calc((100% - -2%) / 2);left:calc((100% - -20%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - -2%) / 2);left:calc((100% - -20%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - -2%) / 2);left:calc((100% - -20%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 4枚目 */ @keyframes drw_6_1_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 30.05%) / 2);} } @keyframes drw_6_2_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 30.05%) / 2);} } @keyframes drw_6_3_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 30.05%) / 2);} } /* カード回転して裏返し */ @keyframes flip_6_p4{ 0% {top:calc((100% - 47%) / 2);left:calc((100% - 30.05%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 47%) / 2);left:calc((100% - 30.05%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 30.05%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 5枚目 */ @keyframes drw_6_1_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -3%) / 2);} } @keyframes drw_6_2_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -3%) / 2);} } @keyframes drw_6_3_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -3%) / 2);} } /* カード回転して裏返し */ @keyframes flip_6_p5{ 0% {top:calc((100% - 47%) / 2);left:calc((100% - -3%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 47%) / 2);left:calc((100% - -3%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 47%) / 2);left:calc((100% - -3%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 6枚目 */ @keyframes drw_6_1_p6{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_6_2_p6{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_6_3_p6{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_6_p6{ 0% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* ------------------------------------------------------------------ */ /* 7枚引き */ /* ------------------------------------------------------------------ */ /* 1枚目 */ @keyframes drw_7_1_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_7_2_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_7_3_p1{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_7_p1{ 0% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 96%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 2枚目 */ @keyframes drw_7_1_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 20%) / 2);left:calc((100% - -29%) / 2);} } @keyframes drw_7_2_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 20%) / 2);left:calc((100% - -29%) / 2);} } @keyframes drw_7_3_p2{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 20%) / 2);left:calc((100% - -29%) / 2);} } /* カード回転して裏返し */ @keyframes flip_7_p2{ 0% {top:calc((100% - 20%) / 2);left:calc((100% - -29%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 20%) / 2);left:calc((100% - -29%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 20%) / 2);left:calc((100% - -29%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 3枚目 */ @keyframes drw_7_1_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 20%) / 2);left:calc((100% - 55%) / 2);} } @keyframes drw_7_2_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 20%) / 2);left:calc((100% - 55%) / 2);} } @keyframes drw_7_3_p3{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 20%) / 2);left:calc((100% - 55%) / 2);} } /* カード回転して裏返し */ @keyframes flip_7_p3{ 0% {top:calc((100% - 20%) / 2);left:calc((100% - 55%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 20%) / 2);left:calc((100% - 55%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 20%) / 2);left:calc((100% - 55%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 4枚目 */ @keyframes drw_7_1_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_7_2_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_7_3_p4{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_7_p4{ 0% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - -2%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 5枚目 */ @keyframes drw_7_1_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 72%) / 2);left:calc((100% - 55%) / 2);} } @keyframes drw_7_2_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 72%) / 2);left:calc((100% - 55%) / 2);} } @keyframes drw_7_3_p5{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 72%) / 2);left:calc((100% - 55%) / 2);} } /* カード回転して裏返し */ @keyframes flip_7_p5{ 0% {top:calc((100% - 72%) / 2);left:calc((100% - 55%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 72%) / 2);left:calc((100% - 55%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 72%) / 2);left:calc((100% - 55%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 6枚目 */ @keyframes drw_7_1_p6{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 72%) / 2);left:calc((100% - -29%) / 2);} } @keyframes drw_7_2_p6{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 72%) / 2);left:calc((100% - -29%) / 2);} } @keyframes drw_7_3_p6{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 72%) / 2);left:calc((100% - -29%) / 2);} } /* カード回転して裏返し */ @keyframes flip_7_p6{ 0% {top:calc((100% - 72%) / 2);left:calc((100% - -29%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 72%) / 2);left:calc((100% - -29%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 72%) / 2);left:calc((100% - -29%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } /* 7枚目 */ @keyframes drw_7_1_p7{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 75.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_7_2_p7{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - 13.0%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);} } @keyframes drw_7_3_p7{ 0% {top:calc((100% - -52%) / 2);left:calc((100% - -45.5%) / 2);z-index:200;} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);} } /* カード回転して裏返し */ @keyframes flip_7_p7{ 0% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1) ;box-shadow: 3px 3px 3px rgba(0 0 0 / 80%);} 30% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(0deg) scale(1.1);box-shadow: 23px 23px 10px rgba(0 0 0 / 40%);} 100% {top:calc((100% - 47%) / 2);left:calc((100% - 13.0%) / 2);transform: rotateY(180deg) scale(1);box-shadow: 3px 3px 3px rgba(0 0 0 / 30%);} } @media only screen and (max-width: 767px){ .cardBody { height: 22.4%; width: 13.0%; border-radius: 5px; } .card_back { border-radius: 2px; } .card_front { border-radius: 2px; } h2.tarotConfirm { font-size: 17px; } .twoWayInputBK { /* max-width: 358px; max-height: 358px; */ } .twoWayInputWindow { width: calc(100% - 2px); margin: 1px; height: calc(100% - 2px); } .twoWayInputWindow h1 { font-size: 15px; margin: 0 0 2px 0; } .InputExp { display: flex; /* flex-direction: column; flex-wrap: nowrap; */ } .twoWayComment { font-size: 12px; } .twoWayIputArea { padding: 6px 0; } .twoWayIputObj { margin: 0 0 5px 0; } .twoWayIputObj strong { font-size: 12px; } .twoWayIputObj input { font-size: 16px; padding: 0px 5px; } .twoWayIputArea button { padding: 1px; width: 58%; font-size: 20px; } .expCard { /* width: 100%; */ font-size: 10px; } }