@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { /* フレームアニメーションのため　max-inline-size: 100%; max-block-size: 100%; */ } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .overlay { position: absolute; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(39, 39, 39, 0.8); -webkit-animation: 0.3s linear; animation: ovelLayFadeInAnime 0.3s linear; } .overlay.is-close { opacity: 0; -webkit-animation: 0.3s linear; animation: ovelLayFadeOutAnime 0.3s linear; } @keyframes ovelLayFadeInAnime { from { opacity: 0; } to { opacity: 0.8; } } @keyframes ovelLayFadeOutAnime { from { opacity: 1; } to { opacity: 0; } } .popup { position: absolute; z-index: 101; width: 100%; height: auto; aspect-ratio: 1.65; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden auto; visibility: hidden; transition: 0.3s; display: flex; justify-content: center; align-items: center; } @media print, screen and (min-width: 1280px) { .popup { max-height: 775px; max-width: 1280px; } } .popup.is-open { visibility: visible; } .popup.is-open .popup__inner { opacity: 1; transform: scale(1); } .popup.is-heightLow { width: auto; height: 100%; } .popup__inner { width: calc(934 * var(--contentsWidth) / 1280 * 1px); max-height: 100%; background-color: #fff; overflow-y: scroll; border-radius: 32px; opacity: 0; transform: scale(0.9); transition: transform 0.3s ease-out, opacity 0.3s linear, -webkit-transform 0.3s ease-out; -ms-overflow-style: none; scrollbar-width: none; } .popup__inner::-webkit-scrollbar { display: none; } .popup__buttons { margin: 2.5695931% -2.8% 0; display: flex; justify-content: center; align-items: center; } .popup__buttons > * { margin: 0 2.8%; } .popup.is-heightLow { height: 100%; width: auto; } .btn-back { display: block; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_back.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn-back:hover, .btn-back:focus { background-position: 0 100%; } .btn-start { display: block; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_start.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn-start:hover, .btn-start:focus { background-position: 0 100%; } .start__inner { position: relative; width: 100%; height: 100%; background: #b7b7b7; overflow: hidden; } .start__inner.is-hide { display: none; } .start__right { position: absolute; top: 0; left: 0; width: 100%; } .start__title { display: block; position: absolute; width: 52.109375%; top: 1.0322580645%; left: 0; right: 0; margin: auto; z-index: 1; } .start__btn { position: absolute; display: block; width: 46.015625%; height: auto; top: 12.7741935484%; left: 0; right: 0; margin: auto; transition: 0.3s all ease; } .start__btn img { width: 100%; } .start__btn.is-brink { animation: door 2s 0.4s ease-in-out forwards; animation-iteration-count: infinite; transform-origin: center center; } .start__btn.is-hide { transform: scale(0.9); opacity: 0; } @keyframes door { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .start__open { position: absolute; display: block; width: 82.5%; height: auto; top: 4%; left: 0; right: 0; margin: auto; opacity: 0; visibility: hidden; transition: 0.5s all ease; transform-origin: center center; } .start__open.is-show { opacity: 1; visibility: visible; } .start__open.is-scal { transition-duration: 2.5s; transform: scale(1.5); } .start__open-right { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: 0.5s all ease; } .start__open-right.is-show { opacity: 1; visibility: visible; } .start__open-right.is-show img:last-child { animation: chikachika 1s 0.6s ease-in-out forwards; animation-iteration-count: infinite; } .start__open-right.is-scal { transition-duration: 2.5s; transform: scale(1.5); } .start__open-right img { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; } @keyframes chikachika { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .start__receive { position: absolute; bottom: 6.7096774194%; left: 0; right: 0; margin: auto; width: 21.875%; height: 10.3225806452%; background-image: url("../img/home/start/btn_receive.png"); background-repeat: no-repeat; background-size: 100% auto; text-indent: -9999px; display: none; } .start__receive:hover { background-position: 0 100%; } .start__receive.is-show { display: block; } .home__test-btns { width: 100%; height: 100%; display: flex; position: relative; align-items: center; justify-content: center; flex-direction: column; gap: 20px; } .home__test-btns.is-hide { display: none; } .home__inner { position: relative; width: 100%; height: 100%; background: url(../img/home/home/bg.jpg) no-repeat center; background-size: cover; overflow: hidden; display: none; } .home__inner.is-show { display: block; } .home__notice { display: flex; align-items: center; justify-content: center; border-radius: 1% 1% 1% 1%/16% 16% 16% 16%; border: 0.1em solid #e20625; box-sizing: border-box; background: #fff; padding: 8px 0; padding: 0.65% 0; position: absolute; top: 3.0967741935%; left: 0; right: 0; margin: auto; width: 57.5%; color: #e20625; font-family: G-OTF Jo Shin Maru Go ProN; font-style: normal; font-weight: 700; line-height: 160%; text-align: center; font-size: 20px; } @media print, screen and (max-width: 1279px) { .home__notice { font-size: 1.5625vw; } } .home__incentive { position: absolute; background: rgba(0, 103, 252, 0.6); border-radius: 6% 6% 6% 6%/10% 10% 10% 10%; overflow: hidden; width: 25.15625%; height: 24.4%; top: 14.3%; left: 1.875%; box-sizing: border-box; } .home__incentive::before { content: ""; display: block; position: absolute; z-index: 0; border: 0.8em solid #ffe600; width: 100%; height: 100%; top: 0; left: 0; border-radius: 5.5% 5.5% 5.5% 5.5%/9.5% 9.5% 9.5% 9.5%; opacity: 0; transition: 0.3s all ease; } .home__incentive.is-active::before { opacity: 1; } .home__incentive__coin { position: absolute; width: 35%; height: 56.5%; top: 12%; left: 9%; } .home__incentive__coin-img { position: relative; width: 100%; height: 100%; background-image: url(../img/home/home/coin/0.png); background-repeat: no-repeat; background-position: center center; background-size: contain; } .home__incentive__coin-img.is-0 { background-image: url(../img/home/home/coin/0.png); } .home__incentive__coin-img.is-1 { background-image: url(../img/home/home/coin/1.png); } .home__incentive__coin-img.is-2 { background-image: url(../img/home/home/coin/2.png); } .home__incentive__coin-img.is-3 { background-image: url(../img/home/home/coin/3.png); } .home__incentive__coin-img.is-4 { background-image: url(../img/home/home/coin/4.png); } .home__incentive__coin-img.is-5 { background-image: url(../img/home/home/coin/5.png); } .home__incentive__coin-img.is-6 { background-image: url(../img/home/home/coin/6.png); } .home__incentive__coin-img.is-7 { background-image: url(../img/home/home/coin/7.png); } .home__incentive__coin-img.is-8 { background-image: url(../img/home/home/coin/8.png); } .home__incentive__coin-img.is-more { background-image: url(../img/home/home/coin/9.png); } .home__incentive__coin-count { margin-top: 4%; text-align: center; color: #fff; text-align: center; font-family: VAG Rounded; font-style: normal; font-weight: 700; line-height: 100%; font-size: 32px; } @media print, screen and (max-width: 1279px) { .home__incentive__coin-count { font-size: 2.5vw; } } .home__incentive__coin-in { position: absolute; top: -22.4299065421%; left: 0; right: 0; margin: 0 auto; width: 30px; height: 30px; overflow: hidden; opacity: 0; transition: 0.3s all ease; } .home__incentive__coin-in::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/home/home/incentive_coin.png) no-repeat center center; background-size: contain; transition: 0.3s opacity ease 0.3s, 0.3s transform ease 0.5s; opacity: 0; } .home__incentive__coin-in.is-change { opacity: 1; } .home__incentive__coin-in.is-change::after { opacity: 1; transform: translateY(100%); } .home__incentive__coin-add { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.5s all ease; } .home__incentive__coin-add::before { content: ""; position: absolute; top: 60%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(0); transform-origin: center center; border-radius: 50%; background: #fff; filter: blur(8px); transition: 0.5s all ease 0.3s; } .home__incentive__coin-add::after { content: ""; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -60%); width: 80%; height: 80%; background: url(../img/home/home/incentive_coin-add.png) no-repeat center center; background-size: contain; z-index: 2; opacity: 0; transition: 0.5s all ease 0.6s; } .home__incentive__coin-add.is-change { opacity: 1; } .home__incentive__coin-add.is-change::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .home__incentive__coin-add.is-change::after { opacity: 1; transform: translate(-50%, -50%); } .home__incentive__present { position: absolute; width: 37%; height: 80%; top: 12%; right: 12%; pointer-events: none; } .home__incentive__present-img { position: absolute; } .home__incentive__present-img.is-active { opacity: 0; transition: 0.3s all ease; } .home__incentive__present::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300%; height: 120%; background: url(../img/home/home/img_present-bg.png) no-repeat center center; background-size: 150%; opacity: 0; transition: 0.5s all ease; } .home__incentive__present.is-active { pointer-events: all; } .home__incentive__present.is-active img.is-active { opacity: 1; } .home__incentive__present.is-active::before { opacity: 1; transform: translate(-50%, -50%); } .home__shimajiro { position: absolute; opacity: 0; transition: 0.3s all ease 0.3s; } .home__shimajiro.is-show { opacity: 1; transform: none; } .home__shimajiro-1 { bottom: 0; left: 1.875%; width: 27.421875%; transform: translateY(30px); } .home__shimajiro-2 { bottom: 2%; left: 4.375%; width: 16.640625%; transform: translateX(-10px); } .home__lesson { position: absolute; border-radius: 50%; box-shadow: 0px 3px 11px 0px rgba(36, 23, 17, 0.2); bottom: 19%; opacity: 0; transform: translateY(-20px); transition: 0.5s all ease; pointer-events: none; } .home__lesson.is-show { opacity: 1; transform: translateY(0); } .home__lesson a { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #fff; } .home__lesson a img { overflow: hidden; border-radius: 50%; } .home__lesson a:hover { background: #513626; } .home__lesson a:hover img { opacity: 0.72; } .home__lesson img { position: relative; display: block; width: 100%; } .home__lesson-1 { width: 31.25%; left: 25.859375%; } .home__lesson-1.is-active { left: 33.59375%; } .home__lesson-1.is-clear { left: 23.4375%; } .home__lesson-2 { width: 31.25%; left: 58.984375%; } .home__lesson-2.is-active { left: 52.03125%; } .home__lesson-2.is-disable { left: 70%; } .home__lesson.is-active { pointer-events: all; width: 35.15625%; animation: blink 1s 0.4s ease-in-out forwards; animation-iteration-count: infinite; animation-direction: alternate; transform-origin: center center; } .home__lesson.is-active::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 103%; height: 103%; border-radius: 50%; background: #fff; filter: blur(20px); z-index: -1; opacity: 0; transform: translate(-50%, -50%) scale(0.5); animation: glow 1s 0.4s ease-in-out forwards; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes blink { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } @keyframes glow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .home__lesson::after { content: ""; display: block; position: absolute; top: 0; right: 0; opacity: 0; transform: scale(0.9); transition: 0.3s all ease; } .home__lesson.is-disable { width: 27.34375%; background: #fff; } .home__lesson.is-disable img { opacity: 0.72; box-shadow: none; } .home__lesson.is-disable::after { width: 24.2857142857%; height: 28.5714285714%; background: url(../img/home/home/icon_lock.png) no-repeat center center; background-size: contain; opacity: 1; transform: scale(1); } .home__lesson.is-clear { pointer-events: all; width: 23.4375%; } .home__lesson.is-clear::after { width: 31%; height: 41.6666666667%; background: url(../img/home/home/icon_medal.png) no-repeat center center; background-size: contain; opacity: 1; transform: scale(1); } .home__lesson.is-finish { pointer-events: all; } .home__lesson.is-finish::after { width: 27.5%; height: 37%; background: url(../img/home/home/icon_medal.png) no-repeat center center; background-size: contain; opacity: 1; transform: scale(1); } .overlay { position: absolute; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(39, 39, 39, 0.8); -webkit-animation: 0.3s linear; animation: ovelLayFadeInAnime 0.3s linear; } .overlay.is-close { opacity: 0; -webkit-animation: 0.3s linear; animation: ovelLayFadeOutAnime 0.3s linear; } @keyframes ovelLayFadeInAnime { from { opacity: 0; } to { opacity: 0.8; } } @keyframes ovelLayFadeOutAnime { from { opacity: 1; } to { opacity: 0; } } .popup { position: absolute; z-index: 101; width: 100%; height: auto; aspect-ratio: 1.65; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden auto; visibility: hidden; transition: 0.3s; display: flex; justify-content: center; align-items: center; } @media print, screen and (min-width: 1280px) { .popup { max-height: 775px; max-width: 1280px; } } .popup.is-open { visibility: visible; } .popup.is-open .popup__inner { opacity: 1; transform: scale(1); } .popup.is-heightLow { width: auto; height: 100%; } .popup__inner { width: calc(934 * var(--contentsWidth) / 1280 * 1px); max-height: 100%; background-color: #fff; overflow-y: scroll; border-radius: 32px; opacity: 0; transform: scale(0.9); transition: transform 0.3s ease-out, opacity 0.3s linear, -webkit-transform 0.3s ease-out; } .popup__buttons { margin: 2.5695931% -2.8% 0; display: flex; justify-content: center; align-items: center; } .popup__buttons > * { margin: 0 2.8%; } .btn-back { display: block; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_back.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn-back:hover, .btn-back:focus { background-position: 0 100%; } .btn-close { display: block; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_close.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn-close:hover, .btn-close:focus { background-position: 0 100%; } .btn-understand { display: block; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_understand.png"); background-repeat: no-repeat; background-size: 100% auto; width: calc(280 * var(--contentsWidth) / 1280 * 1px); height: calc(80 * var(--contentsHeight) / 775 * 1px); } .btn-understand:hover, .btn-understand:focus { background-position: bottom; } .btn-end { display: block; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_end.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn-end:hover, .btn-end:focus { background-position: 0 100%; } .btn-continue { display: block; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_continue.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn-continue:hover, .btn-continue:focus { background-position: 0 100%; } .gametop { display: none; position: fixed; top: auto; bottom: auto; left: auto; right: auto; z-index: 100; width: calc(var(--contentsWidth) * 1px); height: calc(var(--contentsHeight) * 1px); background-image: url("../img/home/gametop/bg.png"); background-repeat: no-repeat; background-size: cover; } .gametop__test-btns { width: 100%; height: 100%; display: flex; position: relative; align-items: center; justify-content: center; flex-direction: column; gap: 20px; } .gametop__test-btns.is-hide { display: none; } .gametop.is-show { display: block; } .gametop__indicator { margin: calc(40 * var(--contentsHeight) / 775 * 1px) auto calc(84 * var(--contentsHeight) / 775 * 1px); width: calc(674 * var(--contentsWidth) / 1280 * 1px); background-color: #fff; border-radius: 32px; padding: calc(24 * var(--contentsHeight) / 775 * 1px) 0 calc(16 * var(--contentsHeight) / 775 * 1px) calc(40 * var(--contentsWidth) / 1280 * 1px); display: flex; align-items: flex-start; } .gametop__indicator__coin { flex: 0 0 calc(113 * var(--contentsWidth) / 1280 * 1px); margin-right: calc(30 * var(--contentsWidth) / 1280 * 1px); } .gametop__indicator__coin__img { position: relative; width: calc(112 * var(--contentsWidth) / 1280 * 1px); height: calc(106 * var(--contentsHeight) / 775 * 1px); background-image: url("../img/home/home/coin/0.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } .gametop__indicator__coin__img.is-1 { background-image: url("../img/home/home/coin/1.png"); } .gametop__indicator__coin__img.is-2 { background-image: url("../img/home/home/coin/2.png"); } .gametop__indicator__coin__img.is-3 { background-image: url("../img/home/home/coin/3.png"); } .gametop__indicator__coin__img.is-4 { background-image: url("../img/home/home/coin/4.png"); } .gametop__indicator__coin__img.is-5 { background-image: url("../img/home/home/coin/5.png"); } .gametop__indicator__coin__img.is-6 { background-image: url("../img/home/home/coin/6.png"); } .gametop__indicator__coin__img.is-7 { background-image: url("../img/home/home/coin/7.png"); } .gametop__indicator__coin__img.is-8 { background-image: url("../img/home/home/coin/8.png"); } .gametop__indicator__coin__img.is-9 { background-image: url("../img/home/home/coin/9.png"); } .gametop__indicator__coin__count { margin-top: calc(4 * var(--contentsHeight) / 775 * 1px); display: flex; justify-content: center; } .gametop__indicator__coin__count img { height: calc(26 * var(--contentsHeight) / 775 * 1px); width: auto; margin: 0 calc(1 * var(--contentsWidth) / 1280 * 1px); } .gametop__indicator__coin__remove { position: absolute; left: calc(41 * var(--contentsWidth) / 1280 * 1px); top: calc(-14 * var(--contentsHeight) / 775 * 1px); width: calc(30 * var(--contentsWidth) / 1280 * 1px); height: calc(30 * var(--contentsHeight) / 775 * 1px); background-image: url("../img/home/gametop/remove_coin.png"); background-repeat: no-repeat; background-size: cover; background-position: bottom; transition-duration: 0.2s; transition-property: left, top, opacity; } .gametop__indicator__coin__remove.is-remove { left: calc(80 * var(--contentsWidth) / 1280 * 1px); top: calc(-54 * var(--contentsHeight) / 775 * 1px); background-position: top; opacity: 0; } .gametop__indicator__coin__light { position: absolute; left: 50%; bottom: calc(-20 * var(--contentsHeight) / 775 * 1px); transform: translateX(-50%); width: calc(131 * var(--contentsWidth) / 1280 * 1px); height: calc(131 * var(--contentsHeight) / 775 * 1px); background-image: url("../img/home/gametop/coin_light.png"); background-repeat: no-repeat; background-size: contain; transition-duration: 0.5s; opacity: 0; } .gametop__indicator__coin__light.is-show { opacity: 1; } .gametop__indicator__gameCount { display: flex; width: calc(440 * var(--contentsWidth) / 1280 * 1px); margin-top: calc(20 * var(--contentsHeight) / 775 * 1px); } .gametop__indicator__gameCount li { flex: 0 0 calc(72 * var(--contentsWidth) / 1280 * 1px); margin: 0 calc(8 * var(--contentsWidth) / 1280 * 1px); background-image: url("../img/home/gametop/indicator_off.svg"); background-repeat: no-repeat; background-size: contain; } .gametop__indicator__gameCount li img { opacity: 1; transition-duration: 0.2s; } .gametop__indicator__gameCount li.is-off img { opacity: 0; } .gametop__close { position: absolute; top: 0; right: calc(52 * var(--contentsWidth) / 1280 * 1px); width: calc(64 * var(--contentsWidth) / 1280 * 1px); } .gametop__games { display: flex; justify-content: center; } .gametop__games li { flex: 0 0 calc(340 * var(--contentsWidth) / 1280 * 1px); margin: 0 calc(20 * var(--contentsWidth) / 1280 * 1px); } .gametop__games__item { display: block; transition-duration: 0.2s; } .gametop__games__item img { display: block; } .gametop .popup__inner { width: calc(700 * var(--contentsWidth) / 1280 * 1px); } .gametop .popup__inner .lowGameCount { padding: calc(32 * var(--contentsHeight) / 775 * 1px) calc(155 * var(--contentsWidth) / 1280 * 1px) calc(36 * var(--contentsHeight) / 775 * 1px); } .gametop .popup__inner .lowCoin { padding: calc(47 * var(--contentsHeight) / 775 * 1px) calc(76 * var(--contentsWidth) / 1280 * 1px) calc(36 * var(--contentsHeight) / 775 * 1px); } .loading__container { position: relative; width: 100%; height: 100%; } .loading__container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .rotation__container { position: fixed; top: 0; left: 0; align-items: center; background-color: #191776; margin: auto; width: 100%; height: 100vh; } .rotation__inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .rotation__img { margin: 0 auto; width: 45.3333333333%; } .rotation__img img { width: 100%; height: auto; } .rotation__text { margin-top: 4.7976011994%; width: 71.2%; } .rotation__text img { width: 100%; height: auto; } .error__container { position: relative; width: 100%; height: 100%; background: url(../common/img/bg.png); } .error__inner { position: relative; border-radius: 4px; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15); position: absolute; top: 50%; left: 50%; width: 49.84375%; height: auto; transform: translate(-50%, -50%); padding: 2.8125% 3.359375% 3.4375%; } .error__title { display: flex; align-items: center; } .error__title-icon { width: 7.6802507837%; height: auto; margin-right: 3.1347962382%; } .error__title-title { width: 76.9592476489%; height: auto; } .error__text { border-radius: 12px; background-color: rgb(237, 237, 237); margin: 3.4482758621% 0 0; padding: 3.9184952978% 3.7617554859% 5.0156739812%; height: auto; min-height: 36.3636363636%; } .error__text-title { display: flex; justify-content: center; align-items: center; } .error__text-title__icon { width: 12.5226860254%; height: auto; margin-right: 3.6297640653%; } .error__text-title__text { width: 62.7949183303%; height: auto; } .error__text p { margin-top: 5.5%; font-size: 22px; font-weight: bold; font-family: "GShinMGoPro"; color: #0d0d0d; line-height: 1.818; text-align: center; } @media print, screen and (max-width: 1279px) { .error__text p { font-size: 1.71875vw; } } .error__text p.microphone-access__text { text-align: left; font-size: 20px; } @media print, screen and (max-width: 1279px) { .error__text p.microphone-access__text { font-size: 1.5625vw; } } .error__text p.microphone-access__text-small { margin-top: 10px; text-align: left; font-size: 17px; font-weight: normal; } @media print, screen and (max-width: 1279px) { .error__text p.microphone-access__text-small { font-size: 1.328125vw; } } .error__code { margin-top: 3%; font-size: 18px; font-family: "GJShinGoProN"; color: #000; font-weight: bold; line-height: 2; text-align: center; } @media print, screen and (max-width: 1279px) { .error__code { font-size: 1.40625vw; } } .error__ok { position: relative; display: block; left: 0; right: 0; margin: 3% auto 0; width: 36.4791288566%; height: auto; } .error__ok img { display: block; width: 100%; } .error__ok img.is-def { position: absolute; top: 0; left: 0; } .error__ok:hover img.is-def { opacity: 0; } .error__qr { position: absolute; bottom: 5%; right: 6.1128526646%; width: 15.987460815%; } /* .video-js .vjs-control-bar { display: none; } */ .lineup__back { position: absolute; top: 7%; left: -0.3125%; width: 15.625%; height: 40%; background-image: url("../img/parents/lineup/btn_back.png"); background-repeat: no-repeat; background-size: 100% auto; text-indent: -9999px; } .lineup__back:hover { background-position: 0 100%; } .lineup__inner { position: relative; width: 100%; height: 100%; background: #ede387; overflow: hidden; } .lineup__header { position: relative; width: 100%; height: 20.6451612903%; } .lineup__header::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 5%; background: #513626; } .lineup__header-title { position: absolute; top: 14.375%; left: 0; right: 0; margin: auto; width: 25%; } .lineup__header-title img { width: 100%; } .lineup__header-btn { position: absolute; top: 62%; left: 2%; display: block; width: 28.125%; height: 38%; background-image: url("../img/parents/lineup/btn_step.png"); background-repeat: no-repeat; background-size: 100% auto; text-indent: -9999px; } .lineup__header-btn.is-active { background-position: 0 100%; pointer-events: none; } .lineup__header-btn.is-jump { background-image: url("../img/parents/lineup/btn_jump.png"); left: 30.7%; } .lineup__header-logo { position: absolute; top: 13.5%; right: 2.5%; width: 6.25%; } .lineup__contents { width: 100%; height: 79.3548387097%; overflow-y: scroll; } .lineup__contents-inner { padding: 2%; display: none; } .lineup__contents-inner.is-active { display: block; } .support__main { background: #ecf3f6; width: 100%; height: 100%; position: relative; font-family: "vag", "shinmgo", "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "MS PGothic", sans-serif; padding-bottom: calc(120 * var(--contentsHeight) / 775 * 1px); } .support__wrapper { width: 100%; height: 100%; margin: 0 auto; padding: calc(30 * var(--contentsHeight) / 775 * 1px) calc(100 * var(--contentsWidth) / 1280 * 1px); box-sizing: border-box; overflow-y: scroll; } .support__list-item { margin: calc(15 * var(--contentsHeight) / 775 * 1px) 0; box-shadow: 0 2px 5px #c4c4c4; border-radius: 16px; } .support__list-item__toggle { position: relative; background: #fff; border-radius: 16px; padding: calc(16 * var(--contentsHeight) / 775 * 1px) calc(80 * var(--contentsWidth) / 1280 * 1px) calc(16 * var(--contentsHeight) / 775 * 1px) calc(40 * var(--contentsWidth) / 1280 * 1px); color: #513626; font-family: Jo Shin Maru Go; font-size: 32px; font-weight: 700; line-height: 152%; } @media print, screen and (max-width: 1279px) { .support__list-item__toggle { font-size: 2.5vw; } } .support__list-item__toggle::after { content: ""; background: url(../img/parents/support/btn_open.png) no-repeat; background-repeat: no-repeat; background-position: 0 0; background-size: contain; width: calc(60 * var(--contentsWidth) / 1280 * 1px); height: calc(60 * var(--contentsWidth) / 1280 * 1px); display: inline-block; position: absolute; right: calc(20 * var(--contentsWidth) / 1280 * 1px); top: 50%; transform: translateY(-50%); } .support__list-item__toggle.is-active { border-radius: 16px 16px 0 0; background: #35b6f9; color: #fff; } .support__list-item__toggle.is-active::after { background-image: url(../img/parents/support/btn_close.png); } .support__list-item__contents { background: #fff; border-radius: 0 0 16px 16px; padding: calc(30 * var(--contentsHeight) / 775 * 1px) calc(50 * var(--contentsWidth) / 1280 * 1px) calc(50 * var(--contentsHeight) / 775 * 1px); line-height: 1.4; display: none; border: 2px solid #35b6f9; } .support__list-item__contents iframe { display: block; cursor: pointer; width: 100%; margin: calc(20 * var(--contentsHeight) / 775 * 1px) auto; } .support__list-item__text { color: #272727; font-family: Jo Shin Maru Go; font-size: 24px; line-height: 1.5; font-style: normal; font-weight: 400; line-height: 152%; } @media print, screen and (max-width: 1279px) { .support__list-item__text { font-size: 1.875vw; } } .support__list-item__img.is-l span img { width: 100%; margin-top: calc(20 * var(--contentsHeight) / 775 * 1px); } .support__list-item__img.is-m span img { width: calc(504 * var(--contentsWidth) / 1280 * 1px); margin-top: calc(20 * var(--contentsHeight) / 775 * 1px); } .support__list-item__img.is-s span img { width: calc(336 * var(--contentsWidth) / 1280 * 1px); margin-top: calc(20 * var(--contentsHeight) / 775 * 1px); } .support__footer { margin-bottom: 0; position: absolute; bottom: 0; width: 100%; padding: calc(30 * var(--contentsHeight) / 775 * 1px) calc(45 * var(--contentsWidth) / 1280 * 1px); background: #ecf3f6; box-shadow: 0 -1px 4px #d0d9dd; } .support__footer-btn a { display: block; width: calc(190 * var(--contentsWidth) / 1280 * 1px); height: calc(60 * var(--contentsHeight) / 775 * 1px); background: url(../img/parents/sitepolicy/back_btn.png) no-repeat; background-size: 100%; border: none; } .sitepolicy__main { width: 100%; height: 100%; position: relative; font-family: "vag", "shinmgo", "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "MS PGothic", sans-serif; padding-bottom: calc(120 * var(--contentsHeight) / 775 * 1px); overflow-y: scroll; } .sitepolicy__main h2 { background: #35b6f9; color: #fff; padding: calc(18 * var(--contentsHeight) / 775 * 1px) calc(96 * var(--contentsWidth) / 1280 * 1px); font-family: "shinmgobold"; font-weight: bold; font-family: Jo Shin Maru Go; font-size: 32px; font-style: normal; font-weight: 700; line-height: 160%; } @media print, screen and (max-width: 1279px) { .sitepolicy__main h2 { font-size: 2.5vw; } } .sitepolicy__list-contents { margin: 0 auto; padding: calc(21 * var(--contentsHeight) / 775 * 1px) calc(96 * var(--contentsWidth) / 1280 * 1px) calc(39 * var(--contentsHeight) / 775 * 1px); } .sitepolicy__list-contents h3 { margin: calc(32 * var(--contentsHeight) / 775 * 1px) 0 0; font-family: Jo Shin Maru Go; font-size: 24px; font-style: normal; font-weight: 700; line-height: 200%; } @media print, screen and (max-width: 1279px) { .sitepolicy__list-contents h3 { font-size: 1.875vw; } } .sitepolicy__list-contents h3:first-child { margin-top: 0; } .sitepolicy__list-contents h3.is-kids { color: #1d8697; } .sitepolicy__list-contents h3.is-science { color: #5ca707; } .sitepolicy__list-contents h3.is-art { color: #d069cc; } .sitepolicy__list-contents h3.is-talk { color: #fa555e; } .sitepolicy__list-contents h3.is-rule { color: #e57402; } .sitepolicy__list-contents h3.is-english { color: #856ec6; } .sitepolicy__list-contents h3.is-app { color: #2851b2; } .sitepolicy__list-contents p { color: #272727; font-family: Jo Shin Maru Go; font-size: 20px; font-weight: 400; line-height: 200%; } @media print, screen and (max-width: 1279px) { .sitepolicy__list-contents p { font-size: 1.5625vw; } } .sitepolicy__footer { margin-bottom: 0; position: absolute; bottom: 0; width: 100%; padding: calc(30 * var(--contentsHeight) / 775 * 1px) calc(45 * var(--contentsWidth) / 1280 * 1px); background: #ecf3f6; box-shadow: 0 -1px 4px #d0d9dd; } .sitepolicy__footer-btn a { display: block; width: calc(190 * var(--contentsWidth) / 1280 * 1px); height: calc(60 * var(--contentsHeight) / 775 * 1px); background: url(../img/parents/sitepolicy/back_btn.png) no-repeat; background-size: 100%; border: none; } .archive__inner { position: relative; width: 100%; height: 100%; background-color: rgb(237, 227, 135); } .archive__header { position: absolute; z-index: 5; width: 100%; height: 14.967742%; } .archive__header__yearly { position: absolute; left: 1.875%; top: 16.37931%; display: block; width: 25%; height: 63.793103%; overflow: hidden; text-indent: -9999px; background-image: url("../img/parents/archive/btn_lineup.png"); background-repeat: no-repeat; background-size: 100% auto; } .archive__header__yearly:hover, .archive__header__yearly:focus { background-position: 0 100%; } .archive__header__close { position: absolute; top: 0; right: 4.0625%; width: 5%; } .archive__navi { position: absolute; left: 33.359375%; top: 18.103448%; width: 34.296875%; height: 60.344828%; background-color: rgba(255, 255, 255, 0.4); border-radius: 35px; } .archive__navi__link { display: block; position: absolute; left: 1.594533%; top: 8.5714286%; width: 13.211845%; height: 82.857143%; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_move.png"); background-repeat: no-repeat; background-size: 100% auto; } .archive__navi__link:hover, .archive__navi__link:focus { background-position: 0 53%; } .archive__navi__link.is-next { left: auto; right: 1.594533%; transform: rotate(180deg); } .archive__navi__link.is-disable { background-position: 0 105%; } .archive__navi__course { position: absolute; left: 28.701595%; top: 21.428571%; width: 39.407745%; display: flex; align-items: flex-start; justify-content: space-between; } .archive__navi__course__logo { width: 40.641711%; flex: 40.641711% 0 0; } .archive__navi__course__logo img { display: block; } .archive__navi__course__issue { margin-top: 3.7735849%; display: flex; align-items: center; justify-content: flex-end; } .archive__navi__course__issue__num { margin: 0 1.8867925%; } .archive__navi__course__issue__num.is-0 { width: 21.698113%; } .archive__navi__course__issue__num.is-1 { width: 6.9264151%; } .archive__navi__course__issue__num.is-2 { width: 20.09434%; } .archive__navi__course__issue__num.is-3 { width: 20.424528%; } .archive__navi__course__issue__num.is-4 { width: 22.537736%; } .archive__navi__course__issue__num.is-5 { width: 20.132075%; } .archive__navi__course__issue__num.is-6 { width: 20.839623%; } .archive__navi__course__issue__num.is-7 { width: 21.915094%; } .archive__navi__course__issue__num.is-8 { width: 20.509434%; } .archive__navi__course__issue__num.is-0 { width: 21.698113%; } .archive__navi__course__issue__label { width: 59.433962%; } .archive__card { position: relative; z-index: 1; padding-top: 9.0625%; display: flex; align-items: flex-start; justify-content: center; } .archive__card__theme { flex: 0 0 75.703125%; margin-right: 1.875%; } .archive__card__label { flex: 0 0 18.671875%; } .archive__lineup { margin: -0.3125% 0 0 4%; display: flex; flex-wrap: wrap; } .archive__lineup__item { margin: 2.421875% 3.4% 0; flex: 0 0 17.1875%; border-radius: 50%; background-color: #513626; } .archive__lineup__item a { display: block; position: relative; } .archive__lineup__item a:hover .archive__lineup__item__inner, .archive__lineup__item a:focus .archive__lineup__item__inner { opacity: 0.72; } .archive__lineup__item__inner { position: relative; z-index: 1; display: block; border-radius: 50%; overflow: hidden; padding: 3.5211268%; background-color: #fff; box-shadow: 0px 1.57277px 5.76681px rgba(36, 23, 17, 0.2); } .archive__lineup__item__inner img { display: block; width: 100%; } .archive__lineup__item.is-has_level a::before { display: block; content: ""; position: absolute; z-index: 2; left: -3.3018868%; top: -3.7735849%; width: 43.273585%; height: 21.636792%; background-image: url("../img/parents/archive/badge_lesson.png"); background-size: contain; background-repeat: no-repeat; } .archive__lineup__item.is-done a::after { display: block; content: ""; position: absolute; z-index: 2; right: 5.8962264%; top: 3.7735849%; width: 25%; height: 33.962264%; background-image: url("../img/parents/archive/badge_medal.png"); background-size: contain; background-repeat: no-repeat; } .curriculum { padding: 4.6376812% 15.417559%; } .curriculum img { display: block; } .curriculum .btn-back { width: calc(272 * var(--contentsWidth) / 1280 * 1px); height: calc(74 * var(--contentsHeight) / 775 * 1px); } .curriculum .btn-start { width: calc(280 * var(--contentsWidth) / 1280 * 1px); height: calc(80 * var(--contentsHeight) / 775 * 1px); } .parent__inner { position: relative; width: 100%; height: 100%; background-color: rgb(237, 227, 135); } .parent__header { position: absolute; z-index: 5; width: 100%; height: 14.967742%; } .parent__header__title { position: absolute; top: calc(40 * var(--contentsHeight) / 775 * 1px); left: 0; right: 0; margin: auto; width: calc(360 * var(--contentsWidth) / 1280 * 1px); } .parent__header__close { position: absolute; top: 0; right: 4.0625%; width: 5%; } .parent__btn { position: absolute; display: block; overflow: hidden; text-indent: -9999px; background-repeat: no-repeat; background-size: 100% auto; } .parent__btn:hover, .parent__btn:focus { background-position: 0 100%; } .parent__btn-archive { background-image: url("../img/parents/parents/btn_archive.png"); top: calc(212 * var(--contentsHeight) / 775 * 1px); left: calc(300 * var(--contentsWidth) / 1280 * 1px); width: calc(320 * var(--contentsWidth) / 1280 * 1px); height: calc(292 * var(--contentsHeight) / 775 * 1px); } .parent__btn-help { background-image: url("../img/parents/parents/btn_help.png"); top: calc(212 * var(--contentsHeight) / 775 * 1px); left: calc(660 * var(--contentsWidth) / 1280 * 1px); width: calc(320 * var(--contentsWidth) / 1280 * 1px); height: calc(292 * var(--contentsHeight) / 775 * 1px); } .parent__btn-terms { background-image: url("../img/parents/parents/btn_terms.png"); top: calc(584 * var(--contentsHeight) / 775 * 1px); left: calc(126 * var(--contentsWidth) / 1280 * 1px); width: calc(326 * var(--contentsWidth) / 1280 * 1px); height: calc(78 * var(--contentsHeight) / 775 * 1px); } .parent__btn-privacy { background-image: url("../img/parents/parents/btn_privacy.png"); top: calc(584 * var(--contentsHeight) / 775 * 1px); left: calc(482 * var(--contentsWidth) / 1280 * 1px); width: calc(326 * var(--contentsWidth) / 1280 * 1px); height: calc(78 * var(--contentsHeight) / 775 * 1px); } .parent__btn-license { background-image: url("../img/parents/parents/btn_license.png"); top: calc(584 * var(--contentsHeight) / 775 * 1px); left: calc(838 * var(--contentsWidth) / 1280 * 1px); width: calc(326 * var(--contentsWidth) / 1280 * 1px); height: calc(78 * var(--contentsHeight) / 775 * 1px); } .terms { position: relative; padding: 5.5% 3.5% 5%; } .terms img { display: block; } .terms__url { position: absolute; top: calc(463 * var(--contentsHeight) / 775 * 1px); left: 0; right: 0; color: #272727; text-align: center; font-family: VAGRoundedcustom; font-size: 16px; font-weight: 400; line-height: 1; } @media print, screen and (max-width: 1279px) { .terms__url { font-size: 1.25vw; } } .terms .btn-close { width: calc(272 * var(--contentsWidth) / 1280 * 1px); height: calc(74 * var(--contentsHeight) / 775 * 1px); } .privacy { position: relative; padding: 5.5% 3.5% 5%; } .privacy img { display: block; } .privacy__url { position: absolute; top: calc(463 * var(--contentsHeight) / 775 * 1px); left: 0; right: 0; color: #272727; text-align: center; font-family: VAGRoundedcustom; font-size: 16px; font-weight: 400; line-height: 1; } @media print, screen and (max-width: 1279px) { .privacy__url { font-size: 1.25vw; } } .privacy .btn-close { width: calc(272 * var(--contentsWidth) / 1280 * 1px); height: calc(74 * var(--contentsHeight) / 775 * 1px); } .popup__inner-exit { width: calc(700 * var(--contentsWidth) / 1280 * 1px); } .exit { padding: calc(64 * var(--contentsWidth) / 1280 * 1px) calc(62 * var(--contentsWidth) / 1280 * 1px) calc(44 * var(--contentsWidth) / 1280 * 1px); box-sizing: border-box; } .exit img { display: block; } .exit .btn-end { width: calc(272 * var(--contentsWidth) / 1280 * 1px); height: calc(70 * var(--contentsHeight) / 775 * 1px); } .exit .btn-continue { width: calc(280 * var(--contentsWidth) / 1280 * 1px); height: calc(79 * var(--contentsHeight) / 775 * 1px); } html, body { height: 100%; min-width: 100%; padding: 0; margin: 0; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .main { align-items: center; background-color: #000; display: flex; height: 100%; justify-content: center; width: 100%; } .main__inner, .main__inner-initialLoading { height: 100%; width: 100%; } @media print, screen and (min-width: 1280px) { .main__inner, .main__inner-initialLoading { max-height: 775px; max-width: 1280px; } } @media print, screen and (max-width: 1279px) { .main__inner, .main__inner-initialLoading { align-items: center; display: flex; justify-content: center; } } .main__inner-initialLoading{ position: absolute; background: black; } .main__inner-contents, #js-loading-container { position: relative; margin: 0 auto; aspect-ratio: 1.65; background: #fff; width: 100%; height: auto; opacity: 0; } #js-loading-container{ opacity: 1; width: calc(100vh * 1.6516); max-width: 1280px; max-height: 100%; } .main__inner-contents.is-heightLow, #js-loading-container.is-heightLow { height: 100%; width: auto; } .main__inner-contents.is-show, #js-loading-container.is-show { opacity: 1; } .test { width: 100%; height: 100%; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 10%; } .container { width: 1280px; margin: 0 auto; } .contents { position: relative; margin: 0 auto; width: 1280px; height: 775px; z-index: 1; } .common__btn-parent { position: absolute; top: 0; left: 1.875%; width: 6.875%; height: 12.1%; overflow: hidden; text-indent: -9999px; background-image: url("../img/common/btn_parent.png"); background-repeat: no-repeat; background-size: 100% auto; } .common__btn-parent:hover { background-position: 0 100%; } .video-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ddd; opacity: 0; visibility: hidden; transition: 0.3s all ease; z-index: 99; } .video-modal.is-show { opacity: 1; visibility: visible; } .video-modal__inner { width: 100%; height: 100%; } .video-modal .video-js { width: 100% !important; height: 100% !important; pointer-events: none; } .video-modal .vjs-dock-text { display: none; } #disable-overlay { display: none; position: fixed; z-index: 10000; width: 100vw; height: 100vh; left: 0; top: 0; } #disable-overlay.is-show { display: block; } html { touch-action: pan-x pan-y; } #lesson-app { /* width: 100vw; min-height: calc(775 / 1280 * 100vw); height: auto; */ width: 100%; height: 100%; background-color: #fff; position: relative; overflow: hidden; } .initialLessonLoading { font-size: 16px; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; display: flex; justify-content: center; align-items: center; background-color: #ffffff; z-index: 3; background-image: url("../img/nowloading_bg.png"); background-size: contain; background-position: center; pointer-events: none; } .lessonLoading { font-size: 16px; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; display: flex; justify-content: center; align-items: center; background-color: #4d4d4d; z-index: 3; background-image: url("../img/nowloading_bg.png"); background-size: cover; pointer-events: none; } .lessonLoading2 { font-size: 16px; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; display: flex; justify-content: center; align-items: center; background-color: #ffffff; z-index: 20; background-size: cover; pointer-events: none; } .lds-default { display: inline-block; position: relative; width: 10%; height: 16.52%; } .lds-default div { position: absolute; width: 8%; height: 8%; background: currentColor; border-radius: 50%; animation: lds-default 1.2s linear infinite; } .lds-default div:nth-child(1) { animation-delay: 0s; top: 46.25%; left: 82.5%; } .lds-default div:nth-child(2) { animation-delay: -0.1s; top: 27.5%; left: 77.5%; } .lds-default div:nth-child(3) { animation-delay: -0.2s; top: 13.75%; left: 65%; } .lds-default div:nth-child(4) { animation-delay: -0.3s; top: 8.75%; left: 46.25%; } .lds-default div:nth-child(5) { animation-delay: -0.4s; top: 13.75%; left: 27.5%; } .lds-default div:nth-child(6) { animation-delay: -0.5s; top: 27.5%; left: 13.75%; } .lds-default div:nth-child(7) { animation-delay: -0.6s; top: 46.25%; left: 8.75%; } .lds-default div:nth-child(8) { animation-delay: -0.7s; top: 65%; left: 13.75%; } .lds-default div:nth-child(9) { animation-delay: -0.8s; top: 77.5%; left: 27.5%; } .lds-default div:nth-child(10) { animation-delay: -0.9s; top: 82.5%; left: 46.25%; } .lds-default div:nth-child(11) { animation-delay: -1s; top: 77.5%; left: 65%; } .lds-default div:nth-child(12) { animation-delay: -1.1s; top: 65%; left: 77.5%; } @keyframes lds-default { 0%, 20%, 80%, 100% { background: rgba(115,115,115, 0.2); } 50% { background: rgba(115,115,115, 1); } } @media (min-aspect-ratio: 1280/775) { } .lessonLoading { background-color: #fff; z-index: 100; } .lessonLoadingBar { width: 71.8%; height: 3%; background-color: #faf3e3; border-radius: 12px; overflow: hidden; position: absolute; left: 0; right: 0; bottom: 10%; top: auto; margin: auto; } .lessonLoadingBar svg { height: 100%; } .lessonLoadingBar svg rect { transition: width 0.3s ease-in-out; } .lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin: -4px 0 0 -4px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 63px; left: 63px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 68px; left: 56px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 71px; left: 48px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 71px; left: 32px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 68px; left: 24px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 63px; left: 17px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .consoleArea { position: fixed; top: 0; left: 0; right: 0; margin: auto; width: fit-content; height: fit-content; background-color: #fff; padding: 10px; opacity: 0.5; } .consoleArea button { margin: 0 5px; } #mainContents, .template { width: 100%; height: 100%; background-color: #000000; } #mainContents .template:nth-child(2){ pointer-events:none; } #quitContainer { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 1000; aspect-ratio: 1.65; display: flex; justify-content: center; align-items: center; pointer-events: none; } #quitDialog { width: 100%; height: 100%; position: relative; z-index: 10; pointer-events: all; } #quitBtn{ position: absolute; right: 5%; top: 0; width: 5%; pointer-events: all; z-index: 11; } #quitBtn1 { position: absolute; width: 20.937%; top: 69.34%; left: 28%; } #quitBtn2 { position: absolute; width: 20.937%; top: 69.34%; left: 51%; } #quitbg{ position: absolute; width: 100%; height: 100%; } iframe{ width: 100%; aspect-ratio: 1.65; border: none; } .template2ver1{ display: flex; align-items: center; height: 100%; } .domObj{ cursor: pointer; } .correctEffect { filter: drop-shadow(0 0 5px yellow); /* ここでdrop-shadowを使用 */ } .incorrectEffect { filter: drop-shadow(0 0 5px blue); /* ここでdrop-shadowを使用 */ } .blink-background{ position: absolute; filter: invert(49%) sepia(86%) saturate(2929%) hue-rotate(146deg) brightness(112%) contrast(191%); scale: 1.3; left: 0; } .playing-background{ position: absolute; filter:invert(33%) sepia(100%) saturate(0) hue-rotate(2deg) brightness(200%) contrast(200%); left: 0; } .rotation{ position: fixed; z-index: 1001; } .template{ position: absolute; } .template:first-child{ z-index: 10; } img { user-select: none; }