@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ===== リセット & ベース ===== */ :root { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; font-synthesis: none; line-height: 1; color: #231815; line-break: strict; word-break: normal; overflow-wrap: anywhere; color-scheme: light dark; background: #fcd702; text-rendering: optimizelegibility; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex-direction: column; } body > * { flex-shrink: 0; } body .is-not-mobile { display: none; } body.is-not-mobile .is-not-mobile { display: block; } body.is-not-mobile .is-mobile { display: none; } img { max-width: 100%; height: auto; vertical-align: top; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border-style: 0; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring { outline: 1px dotted ButtonText; } button, input, select, textarea { color: inherit; background-color: transparent; border-style: none; } .l-container { overflow: hidden; width: 100%; } .bg-slider { position: fixed; bottom: 16px; left: 0; width: 100%; height: 96px; overflow: hidden; background: none !important; display: flex; } #permission-screen .bg-slider { position: static; padding-bottom: 16px; } .is-not-mobile #permission-screen .bg-slider { display: none; } .l-container > .bg-slider { display: none; } .is-not-mobile .l-container > .bg-slider { display: flex; } .bg-slider .js-slide { display: flex; flex-direction: row-reverse; gap: 3px; margin-right: 3px; position: relative; will-change: transform; } .bg-slider .bg-slide { flex-shrink: 0; display: flex; gap: 3px; } .bg-slider .bg-slide img { width: 56px; display: block; } .l-left, .l-right { position: fixed; top: 0; height: 100dvh; width: calc((100% - 430px) / 2); background-color: #fcd702; } @media all and (max-width: 480px) { .l-left, .l-right { display: none; } } @media all and (min-width: 481px) { .l-left { left: 0; } } .is-not-mobile .l-left::before { position: absolute; content: ""; top: calc(50% - 72px); left: 50%; width: 57.264957265%; aspect-ratio: 268/212; background: url("images/logo.svg") no-repeat center/contain; transform: translate(-50%, -50%); } @media all and (min-width: 481px) { .l-right { right: 0; } } .is-not-mobile .l-right::before { position: absolute; content: ""; top: calc(50% - 72px); left: 50%; width: 71.7948717949%; aspect-ratio: 336/116; background: url("images/copy.png") no-repeat center/contain; transform: translate(-50%, -50%); } .l-center { position: relative; width: 100%; min-height: 100svh; container-type: inline-size; overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; z-index: 2; } .l-center::-webkit-scrollbar { display: none; } @media all and (min-width: 481px) { .l-center { width: 430px; margin-inline: auto; box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.16); } } /* カウントダウンオーバーレイ */ .countdown-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .countdown-overlay.active { opacity: 1; pointer-events: auto; } /* 左下の揺れるキャラクター */ .countdown-character { position: absolute; bottom: -11.7333333333cqi; left: -7.4666666667cqi; width: 50.6666666667cqi; height: auto; } .countdown-character-img { width: 100%; height: auto; animation: character-swing 0.5s ease-in-out infinite; transform-origin: bottom center; } @keyframes character-swing { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, 0, 0) rotate(10deg); } } /* ===== 許可画面 ===== */ #permission-screen { justify-content: flex-start; } #permission-screen .content { display: flex; flex-direction: column; align-items: center; background: #fff100; } .is-not-mobile #permission-screen.screen { position: relative; } /* バナー画像表示 */ .description { font-size: 1.1rem; color: #555; margin: 1.5rem 0; line-height: 1.6; } .start-btn { display: block; margin: 2.1333333333cqi auto 0; width: 87.2cqi; } .start-btn img { transition: 0.3s ease-out; } .start-btn[disabled] img { filter: grayscale(100%); } .start-button { margin-top: 4.2666666667cqi; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 44.2666666667cqi; } .is-secret .start-button { background: url("images/btn_replay_secret.png") no-repeat center/contain; } .is-secret .start-button img { opacity: 0; } .back-button { margin-top: 2.1333333333cqi; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 69.8666666667cqi; } .is-secret .back-button { background: url("images/btn_back_secret.png") no-repeat center/contain; } .is-secret .back-button img { opacity: 0; } .start-balloon { margin-top: 6.4cqi; width: 94.2666666667cqi; } .note { display: flex; flex-direction: column; gap: 1.0666666667cqi; width: 87.2cqi; margin: 4.2666666667cqi auto 0; font-size: 3.2cqi; line-height: 1.4; } /* ティアー表 */ .tier-list { margin-top: 10.6666666667cqi; padding-bottom: 8.5333333333cqi; } /* レインボー背景（最高ランク用） */ body.rainbow-bg, #game-screen.rainbow-bg { background-color: transparent !important; } body.rainbow-bg::before, #game-screen.rainbow-bg::before { content: ""; position: fixed; top: -100%; left: -100%; width: 300%; height: 300%; background-image: url("images/bg_rainbow.jpg"); background-size: cover; background-position: center; animation: rainbow-rotate 10s linear infinite; z-index: -1; } @keyframes rainbow-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== 画面管理 ===== */ .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; overflow-y: auto; } .screen.active { opacity: 1; pointer-events: auto; } /* ===== ゲーム画面 ===== */ #game-screen { justify-content: flex-start; overflow: hidden; background: #fff; touch-action: none; /* ピンチイン/アウトを防止 */ } .header-text { margin-top: 6.4cqi; display: flex; align-items: center; justify-content: center; } .header-text-img { width: 64cqi; } .header { width: 100%; max-width: 500px; margin-top: 2.6666666667cqi; margin-bottom: 6.4cqi; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .counter-digits { display: flex; justify-content: center; align-items: center; height: 88px; background: rgba(255, 255, 255, 0.95); padding: 0 24px; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16); } .counter-digits img { height: 80px; width: auto; } /* タイマー表示 */ .timer { display: none; /* タイマーバーを使用するため非表示 */ background: rgba(255, 255, 255, 0.95); padding: 0.5rem 1.2rem; border-radius: 12px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); margin-top: 0.5rem; } .timer-label { font-size: 0.8rem; color: #666; font-weight: 500; margin-bottom: 0.2rem; } .timer-value { font-size: 2rem; font-weight: bold; color: #333; line-height: 1; } .timer-value.warning { color: #ff6b35; animation: pulse-timer 1s ease-in-out infinite; } @keyframes pulse-timer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* 終了カウントダウンオーバーレイ */ .end-countdown-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .end-countdown-overlay.active { opacity: 1; pointer-events: auto; } /* 上部見出し */ .countdown-header { position: absolute; top: 6.4cqi; width: 100%; display: flex; justify-content: center; } .countdown-header-img { width: 64cqi; } /* カウント数字コンテナ */ .countdown-number-container { display: flex; align-items: center; justify-content: center; animation: countdown-pulse 0.8s ease-out; } .countdown-number-container img { height: 74.6666666667cqi; width: auto; } .countdown-number-container.go img { height: 54.9333333333cqi; } /* 終了カウントダウン用テキストスタイル */ .end-countdown-number-container.end-countdown-number { font-family: "Lato", sans-serif; font-size: 120px; font-weight: 900; color: #000; animation: countdown-pulse 0.8s ease-out; } .end-countdown-number-container.end-countdown-finish { font-family: "Lato", sans-serif; font-size: 90px; font-weight: 900; color: #000; animation: finish-animation 0.8s ease-out; } @keyframes countdown-pulse { 0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } 50% { transform: translate3d(0, 0, 0) scale(1.2); } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } } .countdown-number-container.go { animation: go-animation 1s ease-out; } .countdown-number-container.finish { animation: finish-animation 0.8s ease-out; } @keyframes go-animation { 0% { transform: translate3d(0, 0, 0) scale(0.3); opacity: 0; } 30% { transform: translate3d(0, 0, 0) scale(1.3); } 60% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 100% { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0; } } @keyframes finish-animation { 0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } 50% { transform: translate3d(0, 0, 0) scale(1.2); } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } } /* ===== コーンコンテナ ===== */ .corn-container { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .corn-main { position: relative; z-index: 5; } .corn-main .corn-image { width: min(48.8cqi, 280px); height: auto; max-width: 100%; transition: transform 0.1s ease; border: none !important; outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* 振動アニメーション */ .corn-main.shaking { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes shake { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0) rotate(-5deg); } 20%, 40%, 60%, 80% { transform: translate(10px, 0) rotate(5deg); } } /* ヒビアニメーション */ .crack-line { transition: opacity 0.3s ease; } .corn-main.cracking .crack-line { opacity: 1; animation: crackAppear 0.3s ease; } @keyframes crackAppear { 0% { opacity: 0; stroke-dasharray: 0 200; } 100% { opacity: 1; stroke-dasharray: 200 0; } } /* ===== 破片 ===== */ .fragments-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .fragment { position: absolute; pointer-events: none; } .fragment svg { width: 100%; height: 100%; } /* 破片フェードアウト */ @keyframes fragmentFade { 0% { opacity: 1; } 70% { opacity: 0.8; } 100% { opacity: 0; } } /* ===== 吹き出し ===== */ .speech-bubble { position: absolute; width: 17.3333333333cqi; height: 23.2cqi; background-image: url("images/sound.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; pointer-events: none; z-index: 150; transform-origin: center; } /* 右上の吹き出し */ .bubble-top-right { top: 1.0666666667cqi; right: 5.6cqi; } /* 左の吹き出し */ .bubble-left { top: 19.2cqi; left: 8.8cqi; width: 15.4666666667cqi; } /* 右下の吹き出し */ .bubble-bottom-right { bottom: 0.6666666667cqi; right: 17.8666666667cqi; width: 13.3333333333cqi; } /* 吹き出し表示アニメーション */ .speech-bubble.show { animation: bubblePop 0.8s ease-out forwards; } @keyframes bubblePop { 0% { opacity: 0; transform: scale(0.3) rotate(-5deg); } 50% { opacity: 1; transform: scale(1.1) rotate(2deg); } 70% { transform: scale(0.95) rotate(-1deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } /* 吹き出し消去アニメーション */ .speech-bubble.hide { animation: bubbleFade 0.3s ease-out forwards; } @keyframes bubbleFade { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.8); } } /* ===== 説明文 ===== */ .instruction { display: none; text-align: center; color: white; font-size: 1rem; font-weight: 500; margin-top: 1.5rem; padding-bottom: 1rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } /* ===== タイマーバー ===== */ .timer-bar-container { position: absolute; bottom: 6px; width: 100%; padding: 0 24px; box-sizing: border-box; } .timer-bar-wrapper { position: relative; width: 100%; max-width: 327px; margin: 0 auto; } .timer-bar-bg { width: 100%; height: 12px; border-radius: 999px; background: linear-gradient(to right, #fff100, #e60012); overflow: hidden; position: relative; } .timer-bar-overlay { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #eee; border-radius: 0 999px 999px 0; transition: width 0.1s linear; } .timer-labels { display: flex; justify-content: space-between; max-width: 327px; margin: 2px auto 0; padding: 0 4px; font-family: "Lato", sans-serif; font-size: 16px; line-height: 1.2; font-weight: 900; color: #000; letter-spacing: 0.04em; } .timer-label-start { text-align: left; } .timer-label-mid { text-align: center; } .timer-label-end { text-align: right; } .timer-character { position: absolute; left: calc(50% - 16px); bottom: 16px; width: 31px; height: 53px; transform: translateX(-163.5px); transition: transform 0.1s linear; pointer-events: none; z-index: 10; } .timer-character img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* ===== カウントアップアニメーション ===== */ .counter-digits.bump { animation: bump 0.3s ease; } @keyframes bump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } /* ===== 結果画面 ===== */ #result-screen { padding: 6.4cqi 4cqi 13.8666666667cqi; } .is-secret #result-screen { background: url("images/bg_secret.png") no-repeat center/cover; } #result-screen .content { display: flex; flex-direction: column; align-items: center; z-index: 1; } .result-display { margin: 4.2666666667cqi 0 6.4cqi; } .result-label { margin-inline: auto; width: 64.5333333333cqi; } .is-secret .result-label { filter: invert(1); } .result-score-digits { display: flex; justify-content: center; align-items: center; height: 132px; background: rgba(255, 255, 255, 0.95); padding: 0 36px; border-radius: 24px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.16); } .result-score-digits img { height: 120px; width: auto; } .result-message { font-size: 9.0666666667cqi; font-weight: 900; text-align: center; line-height: 1.2; white-space: pre-line; } .is-secret .result-message { color: #fff; } /* ランク別詳細テキスト */ .result-description { margin-top: 2.1333333333cqi; font-size: 4.2666666667cqi; font-weight: 500; line-height: 1.5; text-align: center; white-space: pre-line; } .is-secret .result-description { color: #fff; } /* ランク別画像 */ .result-image { position: absolute; top: 19.2cqi; left: 50%; transform: translateX(-50%); width: 100cqi; height: auto; z-index: 1; } .result-balloon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100cqi; height: auto; z-index: -1; } .result-block { margin-top: 6.4cqi; padding: 4.2666666667cqi; border-radius: 4.2666666667cqi; background-color: rgba(244, 244, 244, 0.7); } .is-secret .result-block { background-color: rgba(255, 255, 255, 0.9); } .result-block-text { margin-bottom: 4.2666666667cqi; font-size: 4cqi; font-weight: 700; line-height: 1.5; text-align: center; } .result-block-text span { background: linear-gradient(transparent 20%, #fff100 20%); } /* ボタングループ */ .button-group { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; width: 100%; } /* Xシェアボタン */ .share-button { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .start-box { width: 87.2cqi; padding: 4.2666666667cqi; margin-top: 7.4666666667cqi; border-radius: 2.1333333333cqi; background: #fc0; } .start-box-inner { display: flex; flex-direction: column; align-items: center; padding-top: 8.5333333333cqi; border-radius: 2.1333333333cqi; background-color: #fff; } .start-text { font-size: 4cqi; font-weight: 700; line-height: 1.5; text-align: center; } .start-text a { color: inherit; text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .start-text span { background: linear-gradient(transparent 20%, #fff100 20%); } .start-date { display: flex; align-items: center; justify-content: center; width: 70.1333333333cqi; height: 10.6666666667cqi; margin-top: 3.2cqi; border-top: 0.2666666667cqi solid #e60012; border-bottom: 0.2666666667cqi solid #e60012; color: #e60012; font-size: 5.3333333333cqi; font-family: Lato, "Zen Kaku Gothic New", sans-serif; font-weight: 900; letter-spacing: 0.04em; } .start-date span { font-size: 3.7333333333cqi; margin-left: -1.2cqi; } .start-date span:first-child { margin-right: 2.1333333333cqi; } .start-present { position: relative; width: 70.1333333333cqi; margin-top: 6.4cqi; } .start-present-heading { display: flex; align-items: center; justify-content: center; background-color: #e60012; height: 10.6666666667cqi; color: #fff; border-radius: 1.0666666667cqi; font-size: 5.3333333333cqi; font-weight: 900; } .start-present-body { position: relative; padding-bottom: 5.3333333333cqi; } .start-present-text { padding: 3.2cqi 0 0 3.2cqi; font-size: 4.2666666667cqi; font-weight: 900; line-height: 1.1; } .start-present-circle { display: flex; align-items: center; justify-content: center; width: 26.6666666667cqi; height: 26.6666666667cqi; margin-top: 2.1333333333cqi; border-radius: 50%; background-color: #4e2c1e; font-size: 4.2666666667cqi; font-style: normal; font-weight: 900; line-height: 1.5; color: #fff; text-align: center; transform: rotate(-15deg); } .start-present-circle span { font-family: Lato; font-size: 24px; line-height: 1; } .start-present-image { position: absolute; top: -2.1333333333cqi; right: -9.6cqi; width: 54.9333333333cqi; } body .is-not-mobile { width: 100%; margin-top: 40px; background: url("images/bg_is-not-mobile.png") no-repeat bottom left; background-size: 99px auto; } .pc-text { font-size: 20px; font-weight: 700; line-height: 1.5; text-align: center; } .pc-subtext { margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; text-align: center; } .pc-qr { display: flex; align-items: center; justify-content: center; width: 192px; height: 192px; background-color: #fff; margin: 24px auto 0; } .pc-qr img { width: 100%; }/*# sourceMappingURL=style.css.map */