@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.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; } /* 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; } /* 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::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; } @-webkit-keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-moz-keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-webkit-keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @-moz-keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @-moz-keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @-webkit-keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-moz-keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @-moz-keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @-webkit-keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } @-moz-keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } @keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } .top-preorder { margin: 0 auto; } .top-preorder span { display: inline-block; -webkit-transform: skew(25deg); transform: skew(25deg); } .btn-normal { text-align: center; display: inline-block; min-width: 240px; /*aaa*/ font-size: 0.875rem; } .btn-normal span { display: inline-block; -webkit-transform: skew(25deg); transform: skew(25deg); } .btn-normal a { position: relative; display: inline-block; padding: 1rem 3rem; -webkit-transform: skew(-25deg); transform: skew(-25deg); color: #f0f5fa; /* background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf)); background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%); background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%); */ width: 100%; height: fit-content; margin: 0 auto; transition: all 0.3s; } .btn-normal a:hover { color: #f0f5fa; } .video { display: block; position: relative; width: 100%; margin: 0 auto; } .video::before { position: absolute; width: 100%; height: 100%; top: 1px; right: -1px; bottom: 1px; left: 1px; content: ""; -webkit-transition: background 0.3s; transition: background 0.3s; background: rgba(0, 0, 0, 0.3); } .video:hover::before { background: rgba(0, 0, 0, 0.1); } /*scroll*/ .page-top { position: fixed; right: 16px; bottom: 16px; z-index: 100; opacity: 0; background-color: #b1c9d1; width: 60px; height: 60px; border-radius: 50%; color: #4d6777; line-height: 70px; text-align: center; /*aaa*/ font-size: 1rem; font-family: urw-din; font-weight: 500; font-style: normal; transition: all 0.3s; } .page-top::before { content: ""; display: block; position: absolute; top: 25%; left: 24px; width: 12px; height: 12px; border-top: 2px solid #4d6777; border-right: 2px solid #4d6777; transform: rotate(-45deg); } .page-top:hover { width: 60px; height: 60px; cursor: pointer; } .page-top:hover::before { border-top: 2px solid #2882f0; border-right: 2px solid #2882f0; } .is-hide { pointer-events: none; } /* ローディング画面 */ #loading { width: 100vw; height: 100vh; transition: all 1s; background-color: #000000; position: fixed; top: 0; left: 0; z-index: 9999; } .spinner { width: 37px; height: 37px; margin: 46vh auto; background-color: transparent; border-radius: 50%; animation: sk-scaleout 1s infinite ease-in-out; } .spinner .circle-border { width: 40px; height: 40px; padding: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #968264; background: linear-gradient(0deg, rgba(150, 130, 100, 0.1) 33%, rgba(150, 130, 100, 0.6) 100%); animation: spin 0.8s linear 0s infinite; } .spinner .circle-core { width: 100%; height: 100%; background-color: #000000; border-radius: 50%; } /* ローディングアニメーション */ @keyframes spin { from { transform: rotate(0); } to { transform: rotate(359deg); } } .loaded { opacity: 0; visibility: hidden; } /*popup anime*/ /*====== Zoom effect ======*/ .mfp-zoom-in { /* start state */ /* animate in */ /* animate out */ } .mfp-zoom-in .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform: scale(0.8); } .mfp-zoom-in.mfp-bg { opacity: 0; transition: all 0.3s ease-out; } .mfp-zoom-in.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); } .mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-zoom-in.mfp-removing .mfp-with-anim { transform: scale(0.8); opacity: 0; } .mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /* gallery /* overlay at start */ .mfp-bg { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* overlay animate in */ .mfp-bg.mfp-ready { opacity: 0.8; } /* overlay animate out */ .mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* content animate it */ .mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .category-website_update { background: linear-gradient(-64deg, #87d0ff 0%, #87d0ff 50%, #647c98 50%, #647c98 100%); } .category-important { background: linear-gradient(-64deg, #af0716 0%, #af0716 50%, #647c98 50%, #647c98 100%); } .category-event { background: linear-gradient(-64deg, #6b2f76 0%, #6b2f76 50%, #b1c9d1 50%, #b1c9d1 100%); } .category-update, .category-version-update { background: linear-gradient(-64deg, #a384ff 0%, #a384ff 50%, #647c98 50%, #647c98 100%); } .category-emergency, .category-completed, .category-failure, .category-follow_up, .category-recovery, .category-information { background: linear-gradient(-64deg, #b89872 0%, #b89872 50%, #647c98 50%, #647c98 100%); } [v-cloak] { display: none; } img { vertical-align: top; } li { list-style: none; } a { text-decoration: none; transition: all 0.3s; } a:hover { color: #2882f0; } html { overflow: auto; height: 100%; } body { position: relative; height: 100%; font-family: "メイリオ", Meiryo, "ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", Arial, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #f0f5fa; -webkit-text-size-adjust: 100%; word-wrap: break-word; overflow-wrap: break-word; background: #000000; } .wrapper { overflow: hidden; position: relative; } .site-header { position: absolute; display: flex; justify-content: space-between; height: 46px; width: 100%; z-index: 200; } .site-header .hdr-konami { width: 100%; max-width: 130px; } .site-header a { display: inline-block; } .site-header a .hdr-logo-anniversary { position: absolute; top: 10px; right: 10px; display: block; max-width: 100px; } @media only screen and (min-width: 768px) { .site-header a .hdr-logo-anniversary { max-width: 140px; transition: all 0.3s; } .site-header a .hdr-logo-anniversary:hover { filter: brightness(120%); } } .ftr-dlBtn { padding: 15px 0; } .btn-home { width: 240px; margin: 0 auto; /*aaa*/ font-size: 0.8125rem; } .btn-home a { position: relative; display: block; padding: 10px; color: #f0f5fa; background: #2882f0; transition: all 0.3s; } .btn-home a:after { /* position: absolute; content: ""; top: 15px; right: 10px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);*/ } .btn-home a:hover { color: #ffffff; background: rgba(125, 230, 255, 0.4); } footer { padding: 0 0 50px; box-sizing: border-box; /*aaa*/ font-size: 0.625rem; text-align: center; background: black; position: relative; z-index: 300; color: #878c91; } footer::before { content: ""; display: block; height: 1px; width: 100%; background-color: rgba(135, 140, 145, 0.5); } footer .share { padding: 2rem 0; display: flex; justify-content: center; } footer .share li { display: inline-block; width: 50px; height: 50px; margin: 0 10px; } footer .share li a { display: block; width: 100%; height: 100%; border-radius: 3px; background-size: 100% auto; box-shadow: 0 0 0 0 rgba(85, 85, 85, 0.3); transition: box-shadow 0.2s ease; } footer .share li a:hover { filter: drop-shadow(0 0 2px 3px #555); } footer .share li.twitter a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_x.png"); } footer .share li.facebook a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_facebook.png"); } @media screen and (min-width: 980px) { footer .share li.line { display: none; } } footer .share li.line a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_line.png"); } footer .ftr-product { margin: 0 auto; max-width: 96%; } footer .ftr-product .ftr-product-list > li { position: relative; margin-bottom: 40px; padding-bottom: 15px; border: 1px solid #ea95ff; background: #1d1d1d; } footer .ftr-product .ftr-product-list > li table { width: 100%; border-collapse: collapse; border-spacing: 0; } footer .ftr-product .ftr-product-list > li table th { padding: 4px; color: #ffffff; /*aaa*/ font-size: 0.8125rem; font-weight: normal; border-bottom: 1px solid #ea95ff; background: #4d6777; } footer .ftr-product .ftr-product-list > li table td dl { padding: 10px; } footer .ftr-product .ftr-product-list > li table td dl dt { padding: 2px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #d2aa78; background: #a384ff; } footer .ftr-product .ftr-product-list > li table td dl dt.product-bonus { background: #248521; } footer .ftr-product .ftr-product-list > li table td dl dd { padding: 10px 5px; text-align: left; } footer .license_logo { margin: 2rem auto 0; } footer .license_logo ul { display: flex; justify-content: center; flex-wrap: nowrap; width: 100%; align-items: center; flex-direction: column; } footer .license_logo ul li { box-sizing: border-box; overflow: hidden; text-indent: 100%; white-space: nowrap; margin: 0 0.5rem; width: 50%; text-align: center; } footer .license_logo ul li::before { content: ""; display: block; background-repeat: no-repeat; background-size: contain; background-position: center 0; } footer .license_logo ul li.eb { width: 100%; max-width: 302px; height: 44px; } footer .license_logo ul li.eb::before { width: 100%; max-width: 302px; height: 44px; background: url("/games/prospi/2024-2025/s/images/common/logo_ebaseball-engine_h.svg") 0 50% no-repeat; background-size: contain; } footer .license_logo ul li.ue { width: 100%; max-width: 220px; height: 88px; } footer .license_logo ul li.ue::before { width: 100%; max-width: 220px; height: 88px; background: url("/games/prospi/2024-2025/s/images/common/logo_ue_h.svg") 0 50% no-repeat; background-size: contain; } @media only screen and (min-width: 768px) { footer .license_logo ul { flex-direction: row; } footer .license_logo ul li { margin-bottom: 0; } footer .license_logo ul li.eb { max-width: calc($ue_logo_w * 1.3); height: calc($ue_logo_h * 1.3); } footer .license_logo ul li.eb::before { max-width: calc($ue_logo_w * 1.3); height: calc($ue_logo_h * 1.3); } footer .license_logo ul li.ue { max-width: 220px; height: 88px; } footer .license_logo ul li.ue::before { max-width: 220px; height: 88px; } } footer .pet { margin: 0 auto; padding: 0 2.5rem; box-sizing: border-box; max-width: 600px; /* span { display: block; $mainVisualAspectSp: 192 / 608; // 画像(背景)の縦横比 position: relative; padding-top: $mainVisualAspectSp * 100%; margin: 0 10%; background: url('/games/prospi/2024-2025/s/images/common/petmark_sp.png') center 0 / 100% auto no-repeat; }*/ } footer .pet picture img { width: 100%; } footer .copyright { padding: 0 10vw; box-sizing: border-box; text-align: left; line-height: 1.5em; } footer .copyright:not(:first-child) { margin-top: 2%; } footer .copyright span { display: inline-block; } footer .copyright .img-npb { height: 2em; padding-right: 1%; vertical-align: middle; } footer .copyright svg { position: relative; height: auto; max-height: 14px; fill: currentColor; } footer .copyright svg.icon-ps { max-width: 16px; } footer .copyright svg.logo-ps4, footer .copyright svg.logo-ps5 { max-width: 44px; } footer .ftr-bnr { margin: 20px auto 0; } footer .ftr-bnr ul li img { max-width: 100%; } footer .kde-nav, footer .series-link { padding: 0 10vw; margin: 2rem 0 1rem; } footer .kde-nav ul, footer .series-link ul { display: flex; justify-content: center; flex-wrap: wrap; } footer .kde-nav ul li, footer .series-link ul li { width: 46%; padding: 6px; display: flex; align-content: stretch; } footer .kde-nav ul li a, footer .kde-nav ul li button, footer .series-link ul li a, footer .series-link ul li button { display: inline-block; width: 100%; } footer .kde-nav ul li a span, footer .kde-nav ul li button span, footer .series-link ul li a span, footer .series-link ul li button span { display: inline-block; } footer .kde-nav ul li #ot-sdk-btn, footer .series-link ul li #ot-sdk-btn { color: #878c91; transition: 0.5s; border: none; cursor: pointer; outline: none; padding: 6px; box-sizing: border-box; appearance: none; /*aaa*/ font-size: 0.625rem; line-height: 1.2; display: inline-block; width: 100%; border-radius: 6px; } footer .kde-nav ul li #ot-sdk-btn:hover, footer .series-link ul li #ot-sdk-btn:hover { color: #2882f0; } footer .series-link { margin: 20px 0 10px 0; } footer .series-link ul li { /*aaa*/ font-size: 0.75rem; display: flex; align-items: stretch; } footer .series-link ul li a { display: inline-block; width: 100%; color: #878c91; padding: 12px 6px; box-sizing: border-box; border-radius: 6px; transition: all 0.3s; } footer .site-copyright { padding: 0 10vw 25px; line-height: 1.5; } footer .site-copyright span { display: inline-block; } @media only screen and (min-width: 768px) { footer { /*aaa*/ font-size: 0.6875rem; } footer .ftr-product .ftr-product-list { display: flex; flex-wrap: wrap; max-width: 980px; margin: 0 auto 20px; } footer .ftr-product .ftr-product-list > li { width: 32.6%; margin: 0 10px 10px 0; } footer .ftr-product .ftr-product-list > li:last-child { margin-right: 0; } footer .ftr-product .ftr-product-list > li table th { /*aaa*/ font-size: 0.9375rem; } footer .ftr-product .ftr-product-list > li .ftr-product-btn > li a { background: rgba(125, 230, 255, 0.3); } footer .ftr-product .ftr-product-list > li .ftr-product-btn > li a:hover { color: #ffffff; border: 1px solid #aaa; background: rgba(125, 230, 255, 0.5); } footer .ftr-product .ftr-product-note { max-width: 980px; margin: auto; padding-top: 10px; } footer .ftr-product .ftr-reservation { max-width: 33%; margin: 20px auto 30px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; } footer .ftr-product .ftr-reservation:hover { -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); } footer .ftr-spec { max-width: 980px; } footer .ftr-spec .ftr-spec-pkg { float: left; width: 230px; margin-left: 15px; } footer .ftr-spec table { padding: 10px; } footer .ftr-spec table:after:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } footer .ftr-spec table tr th { padding-right: 10px; } footer .pet { max-width: 950px; margin: 0 auto; padding: 0 3rem; /*span { display: block; max-width: 950px; margin: 0 auto; $mainVisualAspectPc: 77 / 950; // メインビジュアル(背景)の縦横比 align-items: center; padding-top: $mainVisualAspectPc * 100%; background: url('/games/prospi/2024-2025/s/images/common/petmark_pc.png') center 0 / 100% auto no-repeat; }*/ } footer .copyright { padding: 0 3rem; max-width: 980px; margin: 0 auto; } footer .copyright:not(:first-child) { margin-top: 1%; } footer .ftr-bnr { width: 500px; } footer .kde-nav ul { max-width: 980px; margin: 0 auto; display: flex; } footer .kde-nav ul li { width: fit-content; border-right: 1px solid #878c91; padding: 0 0.5rem; box-sizing: border-box; text-align: center; margin-bottom: 1rem; } footer .kde-nav ul li:last-child { border-right: none; } footer .kde-nav ul li a, footer .kde-nav ul li button { padding: 0; background: none; color: #878c91; } footer .kde-nav ul li a:hover, footer .kde-nav ul li button:hover { color: #2882f0; background: none; } footer .kde-nav ul li a:after, footer .kde-nav ul li button:after { top: 13px; } footer .kde-nav ul li #ot-sdk-btn { transition: all 0.2s; background: none; color: #878c91; padding: 0; } footer .kde-nav ul li #ot-sdk-btn:hover { color: #2882f0; background: none; } footer .series-link ul { max-width: 980px; margin: 0 auto; } footer .series-link ul li { /*aaa*/ font-size: 0.75rem; max-width: calc(100% / 3); } footer .series-link ul li a { padding: 10px; } footer .series-link ul li a:after { top: 20px; } } .sub-heading { position: relative; display: flex; align-items: center; height: 150px; padding-top: 100px; } .sub-heading .logo { margin: auto; max-width: 530px; } .sub-heading .logo img { min-width: 420px; width: 100%; } .global-nav input { display: none; } .global-nav-icon-slot { position: absolute; top: 50px; right: 0; } .global-nav-icon { position: relative; z-index: 110; top: 0; right: 0; width: 46px; height: 46px; background: #1d1d1d; } .global-nav-icon.fixed-only, .global-nav-icon.fixed { position: fixed; top: 0; } .global-nav-icon label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } .global-nav-icon label::before { display: block; padding: 2px 0; content: "MENU"; /*aaa*/ font-size: 0.75rem; transition: color 0.3s; text-align: center; color: #ffffff; } .global-nav-icon label > span { position: absolute; right: 0; bottom: 16px; left: 0; display: block; width: 24px; height: 1px; margin: 0 auto; transition: background-color 0.3s; background-color: #ffffff; } .global-nav-icon label > span::before, .global-nav-icon label > span::after { position: absolute; right: 0; bottom: 0; left: 0; width: 24px; height: 1px; content: ""; transition: background-color 0.3s, transform 0.3s; transform: translateY(-5px); background-color: #ffffff; } .global-nav-icon label > span::after { transform: translateY(5px); } input:checked ~ .global-nav-icon-slot .global-nav-icon { position: fixed; z-index: 110; top: 0; background-color: rgba(0, 0, 0, 0); } input:checked ~ .global-nav-icon-slot .global-nav-icon label::before { content: "CLOSE"; } input:checked ~ .global-nav-icon-slot .global-nav-icon label span { height: 0; } input:checked ~ .global-nav-icon-slot .global-nav-icon label span::before, input:checked ~ .global-nav-icon-slot .global-nav-icon label span::after { transform: translateY(0) rotate(-45deg); } input:checked ~ .global-nav-icon-slot .global-nav-icon label span::after { transform: translateY(0) rotate(45deg); } .global-nav-content { position: fixed; transition: background-color 0.2s ease-out 0s; background-color: rgba(0, 0, 0, 0); } .global-nav-list { display: flex; flex-direction: column; margin-top: 30px; transition: all 0.5s ease-out 0s; opacity: 0; } .global-nav-item-1 { position: relative; color: rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .global-nav-item-1.current a { color: #f0f5fa; background: #ffecfd; } .global-nav-item-1.current a:after { display: none; } .global-nav-item-1 img { display: none; } .global-nav-item-1 span { display: block; padding: 10px; } .global-nav-item-1 a { position: relative; display: block; height: 100%; color: #000000; background: rgba(255, 255, 255, 0.2); } .global-nav-item-1 a:after { position: absolute; content: ""; top: 40%; right: 10px; width: 8px; height: 8px; border-top: 1px solid #000000; border-right: 1px solid #000000; -webkit-transform: rotate(45deg); transform: rotate(45deg); } input:checked ~ .global-nav-content-slot .global-nav-content { z-index: 100; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; background-color: rgba(33, 65, 85, 0.9); } input:checked ~ .global-nav-content-slot .global-nav-content .global-nav-list { margin-top: 48px; opacity: 1; } @media only screen and (min-width: 768px) { .global-nav-icon-slot { display: none; } .global-nav-content-slot { position: relative; height: 64px; margin-bottom: 15px; } .global-nav-content { position: relative; z-index: 100; width: 100%; height: auto; } .global-nav-content.fixed { position: fixed; top: 0; bottom: initial; height: auto; } .global-nav-list { flex-direction: row; justify-content: space-between; max-width: 980px; margin: 0 auto; transition: none; opacity: 1; } .global-nav-item-1 { flex-grow: 1; border: none; } .global-nav-item-1 img { display: block; width: 80%; margin: auto; padding: 15px 5px; transform: skewX(45deg); opacity: 0.2; } .global-nav-item-1.no-link img { transform: skewX(0deg); } .global-nav-item-1 span { display: none; } .global-nav-item-1.current a { background: linear-gradient(-64deg, #fdd6f3 0%, #e4e6f8 50%, #c1fbfe 100%); } .global-nav-item-1 a { padding: 0; transform: skewX(-45deg); transition: all 250ms ease-out; border: none; background: none; } .global-nav-item-1 a:after { display: none; } .global-nav-item-1 a img { opacity: 1; } .global-nav-item-1 a span { display: none; } .global-nav-item-1 a.current a { background: linear-gradient(-64deg, #fdd6f3 0%, #e4e6f8 50%, #c1fbfe 100%); } .global-nav-item-1 a:hover { background: linear-gradient(-64deg, #fdd6f3 0%, #e4e6f8 50%, #c1fbfe 100%); } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.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; } /* 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; } /* 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::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; } @-webkit-keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-moz-keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-webkit-keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @-moz-keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @-moz-keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @-webkit-keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-moz-keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @-moz-keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @-webkit-keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } @-moz-keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } @keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } .top-preorder { margin: 0 auto; } .top-preorder span { display: inline-block; -webkit-transform: skew(25deg); transform: skew(25deg); } .btn-normal { text-align: center; display: inline-block; min-width: 240px; /*aaa*/ font-size: 0.875rem; } .btn-normal span { display: inline-block; -webkit-transform: skew(25deg); transform: skew(25deg); } .btn-normal a { position: relative; display: inline-block; padding: 1rem 3rem; -webkit-transform: skew(-25deg); transform: skew(-25deg); color: #f0f5fa; /* background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf)); background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%); background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%); */ width: 100%; height: fit-content; margin: 0 auto; transition: all 0.3s; } .btn-normal a:hover { color: #f0f5fa; } .video { display: block; position: relative; width: 100%; margin: 0 auto; } .video::before { position: absolute; width: 100%; height: 100%; top: 1px; right: -1px; bottom: 1px; left: 1px; content: ""; -webkit-transition: background 0.3s; transition: background 0.3s; background: rgba(0, 0, 0, 0.3); } .video:hover::before { background: rgba(0, 0, 0, 0.1); } /*scroll*/ .page-top { position: fixed; right: 16px; bottom: 16px; z-index: 100; opacity: 0; background-color: #b1c9d1; width: 60px; height: 60px; border-radius: 50%; color: #4d6777; line-height: 70px; text-align: center; /*aaa*/ font-size: 1rem; font-family: urw-din; font-weight: 500; font-style: normal; transition: all 0.3s; } .page-top::before { content: ""; display: block; position: absolute; top: 25%; left: 24px; width: 12px; height: 12px; border-top: 2px solid #4d6777; border-right: 2px solid #4d6777; transform: rotate(-45deg); } .page-top:hover { width: 60px; height: 60px; cursor: pointer; } .page-top:hover::before { border-top: 2px solid #2882f0; border-right: 2px solid #2882f0; } .is-hide { pointer-events: none; } /* ローディング画面 */ #loading { width: 100vw; height: 100vh; transition: all 1s; background-color: #000000; position: fixed; top: 0; left: 0; z-index: 9999; } .spinner { width: 37px; height: 37px; margin: 46vh auto; background-color: transparent; border-radius: 50%; animation: sk-scaleout 1s infinite ease-in-out; } .spinner .circle-border { width: 40px; height: 40px; padding: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #968264; background: linear-gradient(0deg, rgba(150, 130, 100, 0.1) 33%, rgba(150, 130, 100, 0.6) 100%); animation: spin 0.8s linear 0s infinite; } .spinner .circle-core { width: 100%; height: 100%; background-color: #000000; border-radius: 50%; } /* ローディングアニメーション */ @keyframes spin { from { transform: rotate(0); } to { transform: rotate(359deg); } } .loaded { opacity: 0; visibility: hidden; } /*popup anime*/ /*====== Zoom effect ======*/ .mfp-zoom-in { /* start state */ /* animate in */ /* animate out */ } .mfp-zoom-in .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform: scale(0.8); } .mfp-zoom-in.mfp-bg { opacity: 0; transition: all 0.3s ease-out; } .mfp-zoom-in.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); } .mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-zoom-in.mfp-removing .mfp-with-anim { transform: scale(0.8); opacity: 0; } .mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /* gallery /* overlay at start */ .mfp-bg { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* overlay animate in */ .mfp-bg.mfp-ready { opacity: 0.8; } /* overlay animate out */ .mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* content animate it */ .mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .category-website_update { background: linear-gradient(-64deg, #87d0ff 0%, #87d0ff 50%, #647c98 50%, #647c98 100%); } .category-important { background: linear-gradient(-64deg, #af0716 0%, #af0716 50%, #647c98 50%, #647c98 100%); } .category-event { background: linear-gradient(-64deg, #6b2f76 0%, #6b2f76 50%, #b1c9d1 50%, #b1c9d1 100%); } .category-update, .category-version-update { background: linear-gradient(-64deg, #a384ff 0%, #a384ff 50%, #647c98 50%, #647c98 100%); } .category-emergency, .category-completed, .category-failure, .category-follow_up, .category-recovery, .category-information { background: linear-gradient(-64deg, #b89872 0%, #b89872 50%, #647c98 50%, #647c98 100%); } [v-cloak] { display: none; } img { vertical-align: top; } li { list-style: none; } a { text-decoration: none; transition: all 0.3s; } a:hover { color: #2882f0; } html { overflow: auto; height: 100%; } body { position: relative; height: 100%; font-family: "メイリオ", Meiryo, "ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", Arial, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #f0f5fa; -webkit-text-size-adjust: 100%; word-wrap: break-word; overflow-wrap: break-word; background: #000000; } .wrapper { overflow: hidden; position: relative; } .site-header { position: absolute; display: flex; justify-content: space-between; height: 46px; width: 100%; z-index: 200; } .site-header .hdr-konami { width: 100%; max-width: 130px; } .site-header a { display: inline-block; } .site-header a .hdr-logo-anniversary { position: absolute; top: 10px; right: 10px; display: block; max-width: 100px; } @media only screen and (min-width: 768px) { .site-header a .hdr-logo-anniversary { max-width: 140px; transition: all 0.3s; } .site-header a .hdr-logo-anniversary:hover { filter: brightness(120%); } } .ftr-dlBtn { padding: 15px 0; } .btn-home { width: 240px; margin: 0 auto; /*aaa*/ font-size: 0.8125rem; } .btn-home a { position: relative; display: block; padding: 10px; color: #f0f5fa; background: #2882f0; transition: all 0.3s; } .btn-home a:after { /* position: absolute; content: ""; top: 15px; right: 10px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);*/ } .btn-home a:hover { color: #ffffff; background: rgba(125, 230, 255, 0.4); } footer { padding: 0 0 50px; box-sizing: border-box; /*aaa*/ font-size: 0.625rem; text-align: center; background: black; position: relative; z-index: 300; color: #878c91; } footer::before { content: ""; display: block; height: 1px; width: 100%; background-color: rgba(135, 140, 145, 0.5); } footer .share { padding: 2rem 0; display: flex; justify-content: center; } footer .share li { display: inline-block; width: 50px; height: 50px; margin: 0 10px; } footer .share li a { display: block; width: 100%; height: 100%; border-radius: 3px; background-size: 100% auto; box-shadow: 0 0 0 0 rgba(85, 85, 85, 0.3); transition: box-shadow 0.2s ease; } footer .share li a:hover { filter: drop-shadow(0 0 2px 3px #555); } footer .share li.twitter a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_x.png"); } footer .share li.facebook a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_facebook.png"); } @media screen and (min-width: 980px) { footer .share li.line { display: none; } } footer .share li.line a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_line.png"); } footer .ftr-product { margin: 0 auto; max-width: 96%; } footer .ftr-product .ftr-product-list > li { position: relative; margin-bottom: 40px; padding-bottom: 15px; border: 1px solid #ea95ff; background: #1d1d1d; } footer .ftr-product .ftr-product-list > li table { width: 100%; border-collapse: collapse; border-spacing: 0; } footer .ftr-product .ftr-product-list > li table th { padding: 4px; color: #ffffff; /*aaa*/ font-size: 0.8125rem; font-weight: normal; border-bottom: 1px solid #ea95ff; background: #4d6777; } footer .ftr-product .ftr-product-list > li table td dl { padding: 10px; } footer .ftr-product .ftr-product-list > li table td dl dt { padding: 2px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #d2aa78; background: #a384ff; } footer .ftr-product .ftr-product-list > li table td dl dt.product-bonus { background: #248521; } footer .ftr-product .ftr-product-list > li table td dl dd { padding: 10px 5px; text-align: left; } footer .license_logo { margin: 2rem auto 0; } footer .license_logo ul { display: flex; justify-content: center; flex-wrap: nowrap; width: 100%; align-items: center; flex-direction: column; } footer .license_logo ul li { box-sizing: border-box; overflow: hidden; text-indent: 100%; white-space: nowrap; margin: 0 0.5rem; width: 50%; text-align: center; } footer .license_logo ul li::before { content: ""; display: block; background-repeat: no-repeat; background-size: contain; background-position: center 0; } footer .license_logo ul li.eb { width: 100%; max-width: 302px; height: 44px; } footer .license_logo ul li.eb::before { width: 100%; max-width: 302px; height: 44px; background: url("/games/prospi/2024-2025/s/images/common/logo_ebaseball-engine_h.svg") 0 50% no-repeat; background-size: contain; } footer .license_logo ul li.ue { width: 100%; max-width: 220px; height: 88px; } footer .license_logo ul li.ue::before { width: 100%; max-width: 220px; height: 88px; background: url("/games/prospi/2024-2025/s/images/common/logo_ue_h.svg") 0 50% no-repeat; background-size: contain; } @media only screen and (min-width: 768px) { footer .license_logo ul { flex-direction: row; } footer .license_logo ul li { margin-bottom: 0; } footer .license_logo ul li.eb { max-width: calc($ue_logo_w * 1.3); height: calc($ue_logo_h * 1.3); } footer .license_logo ul li.eb::before { max-width: calc($ue_logo_w * 1.3); height: calc($ue_logo_h * 1.3); } footer .license_logo ul li.ue { max-width: 220px; height: 88px; } footer .license_logo ul li.ue::before { max-width: 220px; height: 88px; } } footer .pet { margin: 0 auto; padding: 0 2.5rem; box-sizing: border-box; max-width: 600px; /* span { display: block; $mainVisualAspectSp: 192 / 608; // 画像(背景)の縦横比 position: relative; padding-top: $mainVisualAspectSp * 100%; margin: 0 10%; background: url('/games/prospi/2024-2025/s/images/common/petmark_sp.png') center 0 / 100% auto no-repeat; }*/ } footer .pet picture img { width: 100%; } footer .copyright { padding: 0 10vw; box-sizing: border-box; text-align: left; line-height: 1.5em; } footer .copyright:not(:first-child) { margin-top: 2%; } footer .copyright span { display: inline-block; } footer .copyright .img-npb { height: 2em; padding-right: 1%; vertical-align: middle; } footer .copyright svg { position: relative; height: auto; max-height: 14px; fill: currentColor; } footer .copyright svg.icon-ps { max-width: 16px; } footer .copyright svg.logo-ps4, footer .copyright svg.logo-ps5 { max-width: 44px; } footer .ftr-bnr { margin: 20px auto 0; } footer .ftr-bnr ul li img { max-width: 100%; } footer .kde-nav, footer .series-link { padding: 0 10vw; margin: 2rem 0 1rem; } footer .kde-nav ul, footer .series-link ul { display: flex; justify-content: center; flex-wrap: wrap; } footer .kde-nav ul li, footer .series-link ul li { width: 46%; padding: 6px; display: flex; align-content: stretch; } footer .kde-nav ul li a, footer .kde-nav ul li button, footer .series-link ul li a, footer .series-link ul li button { display: inline-block; width: 100%; } footer .kde-nav ul li a span, footer .kde-nav ul li button span, footer .series-link ul li a span, footer .series-link ul li button span { display: inline-block; } footer .kde-nav ul li #ot-sdk-btn, footer .series-link ul li #ot-sdk-btn { color: #878c91; transition: 0.5s; border: none; cursor: pointer; outline: none; padding: 6px; box-sizing: border-box; appearance: none; /*aaa*/ font-size: 0.625rem; line-height: 1.2; display: inline-block; width: 100%; border-radius: 6px; } footer .kde-nav ul li #ot-sdk-btn:hover, footer .series-link ul li #ot-sdk-btn:hover { color: #2882f0; } footer .series-link { margin: 20px 0 10px 0; } footer .series-link ul li { /*aaa*/ font-size: 0.75rem; display: flex; align-items: stretch; } footer .series-link ul li a { display: inline-block; width: 100%; color: #878c91; padding: 12px 6px; box-sizing: border-box; border-radius: 6px; transition: all 0.3s; } footer .site-copyright { padding: 0 10vw 25px; line-height: 1.5; } footer .site-copyright span { display: inline-block; } @media only screen and (min-width: 768px) { footer { /*aaa*/ font-size: 0.6875rem; } footer .ftr-product .ftr-product-list { display: flex; flex-wrap: wrap; max-width: 980px; margin: 0 auto 20px; } footer .ftr-product .ftr-product-list > li { width: 32.6%; margin: 0 10px 10px 0; } footer .ftr-product .ftr-product-list > li:last-child { margin-right: 0; } footer .ftr-product .ftr-product-list > li table th { /*aaa*/ font-size: 0.9375rem; } footer .ftr-product .ftr-product-list > li .ftr-product-btn > li a { background: rgba(125, 230, 255, 0.3); } footer .ftr-product .ftr-product-list > li .ftr-product-btn > li a:hover { color: #ffffff; border: 1px solid #aaa; background: rgba(125, 230, 255, 0.5); } footer .ftr-product .ftr-product-note { max-width: 980px; margin: auto; padding-top: 10px; } footer .ftr-product .ftr-reservation { max-width: 33%; margin: 20px auto 30px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; } footer .ftr-product .ftr-reservation:hover { -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); } footer .ftr-spec { max-width: 980px; } footer .ftr-spec .ftr-spec-pkg { float: left; width: 230px; margin-left: 15px; } footer .ftr-spec table { padding: 10px; } footer .ftr-spec table:after:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } footer .ftr-spec table tr th { padding-right: 10px; } footer .pet { max-width: 950px; margin: 0 auto; padding: 0 3rem; /*span { display: block; max-width: 950px; margin: 0 auto; $mainVisualAspectPc: 77 / 950; // メインビジュアル(背景)の縦横比 align-items: center; padding-top: $mainVisualAspectPc * 100%; background: url('/games/prospi/2024-2025/s/images/common/petmark_pc.png') center 0 / 100% auto no-repeat; }*/ } footer .copyright { padding: 0 3rem; max-width: 980px; margin: 0 auto; } footer .copyright:not(:first-child) { margin-top: 1%; } footer .ftr-bnr { width: 500px; } footer .kde-nav ul { max-width: 980px; margin: 0 auto; display: flex; } footer .kde-nav ul li { width: fit-content; border-right: 1px solid #878c91; padding: 0 0.5rem; box-sizing: border-box; text-align: center; margin-bottom: 1rem; } footer .kde-nav ul li:last-child { border-right: none; } footer .kde-nav ul li a, footer .kde-nav ul li button { padding: 0; background: none; color: #878c91; } footer .kde-nav ul li a:hover, footer .kde-nav ul li button:hover { color: #2882f0; background: none; } footer .kde-nav ul li a:after, footer .kde-nav ul li button:after { top: 13px; } footer .kde-nav ul li #ot-sdk-btn { transition: all 0.2s; background: none; color: #878c91; padding: 0; } footer .kde-nav ul li #ot-sdk-btn:hover { color: #2882f0; background: none; } footer .series-link ul { max-width: 980px; margin: 0 auto; } footer .series-link ul li { /*aaa*/ font-size: 0.75rem; max-width: calc(100% / 3); } footer .series-link ul li a { padding: 10px; } footer .series-link ul li a:after { top: 20px; } } .sub-heading { position: relative; display: flex; align-items: center; height: 150px; padding-top: 100px; } .sub-heading .logo { margin: auto; max-width: 530px; } .sub-heading .logo img { min-width: 420px; width: 100%; } .floating-banner { position: fixed; z-index: 500; bottom: 0; right: -100%; display: block; transition: all 0.8s; } .floating-banner span { /*aaa*/ font-size: 0.875rem; } .floating-banner span::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/games/prospi/2024-2025/s/images/common/pre_order.png") 0 0 no-repeat; z-index: -1; } .floating-banner a { display: inline-block; color: #ffffff; padding: 10px 20px 10px 40px; box-sizing: border-box; transition: all 0.3s; } .floating-banner a:hover { cursor: pointer; color: #ffffff; filter: contrast(120%); } .banner-hide { pointer-events: none; } @media only screen and (min-width: 768px) { .floating-banner { width: 264px; } .floating-banner span { /*aaa*/ font-size: 1.125rem; } .floating-banner a { padding: 18px 20px 18px 46px; } } .link_view { right: 0; } /*** The new CSS reset - version 1.11.2 (last updated 15.11.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; } /* 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; } /* 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::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; } @-webkit-keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInanime { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-moz-keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOutanime { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-webkit-keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @-moz-keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeUpanime { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @-moz-keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @keyframes fadeDownanime { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-100px); } } @-webkit-keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-moz-keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInscrollanime { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @-moz-keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @keyframes topTitleanime { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @-webkit-keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } @-moz-keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } @keyframes topScaleanime { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 100%; transform: scale(1); } } .top-preorder { margin: 0 auto; } .top-preorder span { display: inline-block; -webkit-transform: skew(25deg); transform: skew(25deg); } .btn-normal { text-align: center; display: inline-block; min-width: 240px; /*aaa*/ font-size: 0.875rem; } .btn-normal span { display: inline-block; -webkit-transform: skew(25deg); transform: skew(25deg); } .btn-normal a { position: relative; display: inline-block; padding: 1rem 3rem; -webkit-transform: skew(-25deg); transform: skew(-25deg); color: #f0f5fa; /* background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf)); background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%); background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%); */ width: 100%; height: fit-content; margin: 0 auto; transition: all 0.3s; } .btn-normal a:hover { color: #f0f5fa; } .video { display: block; position: relative; width: 100%; margin: 0 auto; } .video::before { position: absolute; width: 100%; height: 100%; top: 1px; right: -1px; bottom: 1px; left: 1px; content: ""; -webkit-transition: background 0.3s; transition: background 0.3s; background: rgba(0, 0, 0, 0.3); } .video:hover::before { background: rgba(0, 0, 0, 0.1); } /*scroll*/ .page-top { position: fixed; right: 16px; bottom: 16px; z-index: 100; opacity: 0; background-color: #b1c9d1; width: 60px; height: 60px; border-radius: 50%; color: #4d6777; line-height: 70px; text-align: center; /*aaa*/ font-size: 1rem; font-family: urw-din; font-weight: 500; font-style: normal; transition: all 0.3s; } .page-top::before { content: ""; display: block; position: absolute; top: 25%; left: 24px; width: 12px; height: 12px; border-top: 2px solid #4d6777; border-right: 2px solid #4d6777; transform: rotate(-45deg); } .page-top:hover { width: 60px; height: 60px; cursor: pointer; } .page-top:hover::before { border-top: 2px solid #2882f0; border-right: 2px solid #2882f0; } .is-hide { pointer-events: none; } /* ローディング画面 */ #loading { width: 100vw; height: 100vh; transition: all 1s; background-color: #000000; position: fixed; top: 0; left: 0; z-index: 9999; } .spinner { width: 37px; height: 37px; margin: 46vh auto; background-color: transparent; border-radius: 50%; animation: sk-scaleout 1s infinite ease-in-out; } .spinner .circle-border { width: 40px; height: 40px; padding: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #968264; background: linear-gradient(0deg, rgba(150, 130, 100, 0.1) 33%, rgba(150, 130, 100, 0.6) 100%); animation: spin 0.8s linear 0s infinite; } .spinner .circle-core { width: 100%; height: 100%; background-color: #000000; border-radius: 50%; } /* ローディングアニメーション */ @keyframes spin { from { transform: rotate(0); } to { transform: rotate(359deg); } } .loaded { opacity: 0; visibility: hidden; } /*popup anime*/ /*====== Zoom effect ======*/ .mfp-zoom-in { /* start state */ /* animate in */ /* animate out */ } .mfp-zoom-in .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform: scale(0.8); } .mfp-zoom-in.mfp-bg { opacity: 0; transition: all 0.3s ease-out; } .mfp-zoom-in.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); } .mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-zoom-in.mfp-removing .mfp-with-anim { transform: scale(0.8); opacity: 0; } .mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /* gallery /* overlay at start */ .mfp-bg { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* overlay animate in */ .mfp-bg.mfp-ready { opacity: 0.8; } /* overlay animate out */ .mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* content animate it */ .mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .category-website_update { background: linear-gradient(-64deg, #87d0ff 0%, #87d0ff 50%, #647c98 50%, #647c98 100%); } .category-important { background: linear-gradient(-64deg, #af0716 0%, #af0716 50%, #647c98 50%, #647c98 100%); } .category-event { background: linear-gradient(-64deg, #6b2f76 0%, #6b2f76 50%, #b1c9d1 50%, #b1c9d1 100%); } .category-update, .category-version-update { background: linear-gradient(-64deg, #a384ff 0%, #a384ff 50%, #647c98 50%, #647c98 100%); } .category-emergency, .category-completed, .category-failure, .category-follow_up, .category-recovery, .category-information { background: linear-gradient(-64deg, #b89872 0%, #b89872 50%, #647c98 50%, #647c98 100%); } [v-cloak] { display: none; } img { vertical-align: top; } li { list-style: none; } a { text-decoration: none; transition: all 0.3s; } a:hover { color: #2882f0; } html { overflow: auto; height: 100%; } body { position: relative; height: 100%; font-family: "メイリオ", Meiryo, "ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", Arial, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #f0f5fa; -webkit-text-size-adjust: 100%; word-wrap: break-word; overflow-wrap: break-word; background: #000000; } .wrapper { overflow: hidden; position: relative; } .site-header { position: absolute; display: flex; justify-content: space-between; height: 46px; width: 100%; z-index: 200; } .site-header .hdr-konami { width: 100%; max-width: 130px; } .site-header a { display: inline-block; } .site-header a .hdr-logo-anniversary { position: absolute; top: 10px; right: 10px; display: block; max-width: 100px; } @media only screen and (min-width: 768px) { .site-header a .hdr-logo-anniversary { max-width: 140px; transition: all 0.3s; } .site-header a .hdr-logo-anniversary:hover { filter: brightness(120%); } } .ftr-dlBtn { padding: 15px 0; } .btn-home { width: 240px; margin: 0 auto; /*aaa*/ font-size: 0.8125rem; } .btn-home a { position: relative; display: block; padding: 10px; color: #f0f5fa; background: #2882f0; transition: all 0.3s; } .btn-home a:after { /* position: absolute; content: ""; top: 15px; right: 10px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);*/ } .btn-home a:hover { color: #ffffff; background: rgba(125, 230, 255, 0.4); } footer { padding: 0 0 50px; box-sizing: border-box; /*aaa*/ font-size: 0.625rem; text-align: center; background: black; position: relative; z-index: 300; color: #878c91; } footer::before { content: ""; display: block; height: 1px; width: 100%; background-color: rgba(135, 140, 145, 0.5); } footer .share { padding: 2rem 0; display: flex; justify-content: center; } footer .share li { display: inline-block; width: 50px; height: 50px; margin: 0 10px; } footer .share li a { display: block; width: 100%; height: 100%; border-radius: 3px; background-size: 100% auto; box-shadow: 0 0 0 0 rgba(85, 85, 85, 0.3); transition: box-shadow 0.2s ease; } footer .share li a:hover { filter: drop-shadow(0 0 2px 3px #555); } footer .share li.twitter a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_x.png"); } footer .share li.facebook a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_facebook.png"); } @media screen and (min-width: 980px) { footer .share li.line { display: none; } } footer .share li.line a { background-image: url("/games/prospi/2024-2025/s/images/common/sns_icon_line.png"); } footer .ftr-product { margin: 0 auto; max-width: 96%; } footer .ftr-product .ftr-product-list > li { position: relative; margin-bottom: 40px; padding-bottom: 15px; border: 1px solid #ea95ff; background: #1d1d1d; } footer .ftr-product .ftr-product-list > li table { width: 100%; border-collapse: collapse; border-spacing: 0; } footer .ftr-product .ftr-product-list > li table th { padding: 4px; color: #ffffff; /*aaa*/ font-size: 0.8125rem; font-weight: normal; border-bottom: 1px solid #ea95ff; background: #4d6777; } footer .ftr-product .ftr-product-list > li table td dl { padding: 10px; } footer .ftr-product .ftr-product-list > li table td dl dt { padding: 2px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #d2aa78; background: #a384ff; } footer .ftr-product .ftr-product-list > li table td dl dt.product-bonus { background: #248521; } footer .ftr-product .ftr-product-list > li table td dl dd { padding: 10px 5px; text-align: left; } footer .license_logo { margin: 2rem auto 0; } footer .license_logo ul { display: flex; justify-content: center; flex-wrap: nowrap; width: 100%; align-items: center; flex-direction: column; } footer .license_logo ul li { box-sizing: border-box; overflow: hidden; text-indent: 100%; white-space: nowrap; margin: 0 0.5rem; width: 50%; text-align: center; } footer .license_logo ul li::before { content: ""; display: block; background-repeat: no-repeat; background-size: contain; background-position: center 0; } footer .license_logo ul li.eb { width: 100%; max-width: 302px; height: 44px; } footer .license_logo ul li.eb::before { width: 100%; max-width: 302px; height: 44px; background: url("/games/prospi/2024-2025/s/images/common/logo_ebaseball-engine_h.svg") 0 50% no-repeat; background-size: contain; } footer .license_logo ul li.ue { width: 100%; max-width: 220px; height: 88px; } footer .license_logo ul li.ue::before { width: 100%; max-width: 220px; height: 88px; background: url("/games/prospi/2024-2025/s/images/common/logo_ue_h.svg") 0 50% no-repeat; background-size: contain; } @media only screen and (min-width: 768px) { footer .license_logo ul { flex-direction: row; } footer .license_logo ul li { margin-bottom: 0; } footer .license_logo ul li.eb { max-width: calc($ue_logo_w * 1.3); height: calc($ue_logo_h * 1.3); } footer .license_logo ul li.eb::before { max-width: calc($ue_logo_w * 1.3); height: calc($ue_logo_h * 1.3); } footer .license_logo ul li.ue { max-width: 220px; height: 88px; } footer .license_logo ul li.ue::before { max-width: 220px; height: 88px; } } footer .pet { margin: 0 auto; padding: 0 2.5rem; box-sizing: border-box; max-width: 600px; /* span { display: block; $mainVisualAspectSp: 192 / 608; // 画像(背景)の縦横比 position: relative; padding-top: $mainVisualAspectSp * 100%; margin: 0 10%; background: url('/games/prospi/2024-2025/s/images/common/petmark_sp.png') center 0 / 100% auto no-repeat; }*/ } footer .pet picture img { width: 100%; } footer .copyright { padding: 0 10vw; box-sizing: border-box; text-align: left; line-height: 1.5em; } footer .copyright:not(:first-child) { margin-top: 2%; } footer .copyright span { display: inline-block; } footer .copyright .img-npb { height: 2em; padding-right: 1%; vertical-align: middle; } footer .copyright svg { position: relative; height: auto; max-height: 14px; fill: currentColor; } footer .copyright svg.icon-ps { max-width: 16px; } footer .copyright svg.logo-ps4, footer .copyright svg.logo-ps5 { max-width: 44px; } footer .ftr-bnr { margin: 20px auto 0; } footer .ftr-bnr ul li img { max-width: 100%; } footer .kde-nav, footer .series-link { padding: 0 10vw; margin: 2rem 0 1rem; } footer .kde-nav ul, footer .series-link ul { display: flex; justify-content: center; flex-wrap: wrap; } footer .kde-nav ul li, footer .series-link ul li { width: 46%; padding: 6px; display: flex; align-content: stretch; } footer .kde-nav ul li a, footer .kde-nav ul li button, footer .series-link ul li a, footer .series-link ul li button { display: inline-block; width: 100%; } footer .kde-nav ul li a span, footer .kde-nav ul li button span, footer .series-link ul li a span, footer .series-link ul li button span { display: inline-block; } footer .kde-nav ul li #ot-sdk-btn, footer .series-link ul li #ot-sdk-btn { color: #878c91; transition: 0.5s; border: none; cursor: pointer; outline: none; padding: 6px; box-sizing: border-box; appearance: none; /*aaa*/ font-size: 0.625rem; line-height: 1.2; display: inline-block; width: 100%; border-radius: 6px; } footer .kde-nav ul li #ot-sdk-btn:hover, footer .series-link ul li #ot-sdk-btn:hover { color: #2882f0; } footer .series-link { margin: 20px 0 10px 0; } footer .series-link ul li { /*aaa*/ font-size: 0.75rem; display: flex; align-items: stretch; } footer .series-link ul li a { display: inline-block; width: 100%; color: #878c91; padding: 12px 6px; box-sizing: border-box; border-radius: 6px; transition: all 0.3s; } footer .site-copyright { padding: 0 10vw 25px; line-height: 1.5; } footer .site-copyright span { display: inline-block; } @media only screen and (min-width: 768px) { footer { /*aaa*/ font-size: 0.6875rem; } footer .ftr-product .ftr-product-list { display: flex; flex-wrap: wrap; max-width: 980px; margin: 0 auto 20px; } footer .ftr-product .ftr-product-list > li { width: 32.6%; margin: 0 10px 10px 0; } footer .ftr-product .ftr-product-list > li:last-child { margin-right: 0; } footer .ftr-product .ftr-product-list > li table th { /*aaa*/ font-size: 0.9375rem; } footer .ftr-product .ftr-product-list > li .ftr-product-btn > li a { background: rgba(125, 230, 255, 0.3); } footer .ftr-product .ftr-product-list > li .ftr-product-btn > li a:hover { color: #ffffff; border: 1px solid #aaa; background: rgba(125, 230, 255, 0.5); } footer .ftr-product .ftr-product-note { max-width: 980px; margin: auto; padding-top: 10px; } footer .ftr-product .ftr-reservation { max-width: 33%; margin: 20px auto 30px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; } footer .ftr-product .ftr-reservation:hover { -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); } footer .ftr-spec { max-width: 980px; } footer .ftr-spec .ftr-spec-pkg { float: left; width: 230px; margin-left: 15px; } footer .ftr-spec table { padding: 10px; } footer .ftr-spec table:after:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } footer .ftr-spec table tr th { padding-right: 10px; } footer .pet { max-width: 950px; margin: 0 auto; padding: 0 3rem; /*span { display: block; max-width: 950px; margin: 0 auto; $mainVisualAspectPc: 77 / 950; // メインビジュアル(背景)の縦横比 align-items: center; padding-top: $mainVisualAspectPc * 100%; background: url('/games/prospi/2024-2025/s/images/common/petmark_pc.png') center 0 / 100% auto no-repeat; }*/ } footer .copyright { padding: 0 3rem; max-width: 980px; margin: 0 auto; } footer .copyright:not(:first-child) { margin-top: 1%; } footer .ftr-bnr { width: 500px; } footer .kde-nav ul { max-width: 980px; margin: 0 auto; display: flex; } footer .kde-nav ul li { width: fit-content; border-right: 1px solid #878c91; padding: 0 0.5rem; box-sizing: border-box; text-align: center; margin-bottom: 1rem; } footer .kde-nav ul li:last-child { border-right: none; } footer .kde-nav ul li a, footer .kde-nav ul li button { padding: 0; background: none; color: #878c91; } footer .kde-nav ul li a:hover, footer .kde-nav ul li button:hover { color: #2882f0; background: none; } footer .kde-nav ul li a:after, footer .kde-nav ul li button:after { top: 13px; } footer .kde-nav ul li #ot-sdk-btn { transition: all 0.2s; background: none; color: #878c91; padding: 0; } footer .kde-nav ul li #ot-sdk-btn:hover { color: #2882f0; background: none; } footer .series-link ul { max-width: 980px; margin: 0 auto; } footer .series-link ul li { /*aaa*/ font-size: 0.75rem; max-width: calc(100% / 3); } footer .series-link ul li a { padding: 10px; } footer .series-link ul li a:after { top: 20px; } } .sub-heading { position: relative; display: flex; align-items: center; height: 150px; padding-top: 100px; } .sub-heading .logo { margin: auto; max-width: 530px; } .sub-heading .logo img { min-width: 420px; width: 100%; } .side_navi { position: fixed; top: 50%; right: -100px; transform: translateY(-50%); z-index: 400; display: block; transition: all 0.3s; } @media screen and (orientation: landscape) { .side_navi { max-height: 38vmin; height: 38lvh; top: 28lvh; } } .side_navi ul .side_navi_link { /*aaa*/ font-size: 1.125rem; } .side_navi ul .side_navi_link a { display: block; position: relative; font-family: urw-din; font-weight: 500; font-style: normal; right: 0; overflow: hidden; color: #878c91; width: 50px; height: 72px; margin-bottom: 0; line-height: 72px; text-indent: 100%; text-align: center; opacity: 0.8; transition: all 0.3s; } .side_navi ul .side_navi_link a::before { content: ""; display: block; position: absolute; top: 5px; right: 0; width: 6px; height: 64px; background-color: #878c91; transition: all 0.3s; transform: skewY(135deg); } .side_navi ul .side_navi_link a:hover { text-indent: 0; opacity: 1; color: #2882f0; } .side_navi ul .side_navi_link a:hover::before { background-color: #2882f0; } @media screen and (orientation: landscape) { .side_navi ul .side_navi_link a { height: calc(72px * 0.75); line-height: calc(72px * 0.75); } .side_navi ul .side_navi_link a::before { top: 3px; height: calc(64px * 0.75); } } .side_navi ul .side_navi_link.active a { text-indent: 0%; opacity: 1; color: #2882f0; } .side_navi ul .side_navi_link.active a::before { background-color: #2882f0; } .side_navi .side_navi_guide { font-family: urw-din; font-weight: 500; font-style: normal; /*aaa*/ font-size: 1rem; color: #878c91; transform: rotate(-90deg) translate(-32px, 10px); } @media only screen and (min-width: 980px) { .side_navi ul .side_navi_link { /*aaa*/ font-size: 1.375rem; } .side_navi ul .side_navi_link a { width: 50px; height: 72px; line-height: 72px; } .side_navi ul .side_navi_link a::before { top: 5px; height: 64px; } } @media only screen and (min-width: 980px) and (min-width: 1400px) { .side_navi { top: calc(50% - 63px); /*aaa*/ font-size: 1.5rem; } .side_navi .side_navi_link a { width: 50px; height: 72px; line-height: 72px; } .side_navi .side_navi_link a::before { top: 5px; height: 64px; } } .view { right: 2%; } main { font-family: a-otf-ud-shin-go-pr6n; /* "urw-din", sans-serif;*/ font-weight: 500; font-style: normal; position: relative; } .bg_video { width: 100%; height: 100vh; position: relative; overflow: hidden; z-index: 10; } @media only screen and (min-width: 768px) { .bg_video { height: 100%; } } .bg_video .video-wrap { position: relative; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden; aspect-ratio: 9/16; /*&::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: url("/games/prospi/2024-2025/s/images/common/dot.png") repeat 0 0 rgba($clBase1,0.3); }*/ } @media only screen and (min-width: 768px) { .bg_video .video-wrap { aspect-ratio: 16/9; /* 縦横比（アスペクト比） */ } } .bg_video .video-wrap video { position: absolute; z-index: -1; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 9/16; width: 177.77777778vh; height: 56.25vw; object-fit: cover; } @media only screen and (min-width: 768px) { .bg_video .video-wrap video { aspect-ratio: 16/9; /* 縦横比（アスペクト比） */ } } .bg_video.block { position: absolute; } .bg_video.fixed { position: fixed; } #bg_video { position: relative; z-index: -1; /*最背面に設定*/ width: 100%; height: 100%; } #bg_video .video-wrap { position: fixed; z-index: -1; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden; } #bg_video .video-wrap::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: url("/games/prospi/2024-2025/s/images/common/dot.png") repeat 0 0; } #bg_video .video-wrap video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*縦横幅指定*/ /* width: calc(16vh / 9); !* 16:9 の幅　*! height: calc(9vw / 16); !* 16:9の高さ　*!*/ width: 177.77777778vh; height: 56.25vw; min-width: 100vw; min-height: 100dvh; } @media only screen and (min-width: 768px) { #bg_video .video-wrap video { width: 100%; height: auto; } } .section_trailer { width: 100%; position: relative; z-index: 10; } .section_trailer .trailer { padding: 0 16vw; box-sizing: border-box; } .section_trailer .trailer ul { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; margin: auto; justify-content: center; } .section_trailer .trailer ul li { max-width: 320px; } .section_trailer .trailer ul li img { width: 100%; } @media only screen and (min-width: 768px) { .section_trailer .trailer ul { flex-direction: row; /* li { max-width: 880px; }*/ } } .section_trailer .trailer ul .videos_ttl { padding: 1rem; text-align: center; color: #968264; /*aaa*/ font-size: 1rem; } .section_trailer .trailer ul .videos_ttl span { display: inline-block; position: relative; } .section_trailer .trailer ul .videos_ttl span::before, .section_trailer .trailer ul .videos_ttl span::after { position: absolute; content: ""; display: block; background-size: cover; vertical-align: middle; top: -5px; left: -3rem; height: 38px; width: 38px; } .section_trailer .trailer ul .videos_ttl span::before { background-image: url(/games/prospi/2024-2025/s/images/common/icon_play.png); } .js-fadeIn { filter: blur(4px); opacity: 0; transform: scale(1.1); transition: all 0.6s ease-out, opacity 0.3s linear, filter 0.7s linear; } .scroll-in { filter: blur(0); opacity: 1; transform: translate(0, 0) scale(1); } .scroll-out { -webkit-animation: fadeUpanime 1.2s ease-in-out 0s; -moz-animation: fadeUpanime 1.2s ease-in-out 0s; animation: fadeUpanime 1.2s ease-in-out 0s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; pointer-events: none; } .fade-in { -webkit-animation: fadeInanime 1.2s ease-in-out 0s; -moz-animation: fadeInanime 1.2s ease-in-out 0s; animation: fadeInanime 1.2s ease-in-out 0s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .fade-out { -webkit-animation: fadeOutanime 1s ease-in-out 0s; -moz-animation: fadeOutanime 1s ease-in-out 0s; animation: fadeOutanime 1s ease-in-out 0s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .pc { display: none; } .sp { display: block; } .info-popup { position: relative; z-index: 1; text-align: center; margin: 0 auto 2rem; max-width: 400px; /*aaa*/ font-size: 0.75rem; width: 100%; } .info-popup a { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.8rem; box-sizing: border-box; max-width: 420px; width: 76%; } .info-popup a span { display: inline-block; } .info-popup a:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.3); } #inline-wrap { width: 80%; max-width: 600px; margin: 0 auto; } #inline-wrap h1 { text-align: center; /*aaa*/ font-size: 1.125rem; padding-bottom: 1rem; } #inline-wrap h1 span { display: inline-block; } #inline-wrap p { padding-bottom: 0.8rem; } #inline-wrap .popup-modal-dismiss { margin: 2rem auto; text-align: center; /*aaa*/ font-size: 0.75rem; } #inline-wrap .popup-modal-dismiss a { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.8rem; box-sizing: border-box; min-width: 200px; } #inline-wrap .popup-modal-dismiss a:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.3); } .main-visual { position: relative; min-height: 100dvh; } .main-visual .main-element { position: relative; z-index: 100; } .main-visual .main-element .title_wrapper { min-height: 100svh; position: relative; } .main-visual .main-element .title_wrapper .scroll-sign { -webkit-animation: fadeInscrollanime 0.5s ease-in 2.3s; -moz-animation: fadeInscrollanime 0.5s ease-in 2.3s; animation: fadeInscrollanime 0.5s ease-in 2.3s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; position: absolute; left: 50%; width: 22px; height: 22px; bottom: 8svh; z-index: 100; text-indent: 100%; white-space: nowrap; transition: all 0.3s; } .main-visual .main-element .title_wrapper .scroll-sign.off { opacity: 0; } .main-visual .main-element .title_wrapper .scroll-sign a { display: inline-block; } .main-visual .main-element .title_wrapper .scroll-sign a::before { position: absolute; content: ""; display: block; top: 0; left: 0; width: 16px; height: 16px; transform: rotate(45deg); border-bottom: 2px solid #968264; border-right: 2px solid #968264; transition: all 0.3s; } .main-visual .main-element .title_wrapper .scroll-sign a:hover::before { border-color: #2882f0; } .main-visual .main-element .title_wrapper .title_ebaseball-engine { display: block; padding-bottom: 1rem; margin: auto; width: 100%; max-width: 200px; -webkit-animation: fadeInanime 1s ease-in 0.5s; -moz-animation: fadeInanime 1s ease-in 0.5s; animation: fadeInanime 1s ease-in 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .main-visual .main-element .title_wrapper .title_ebaseball-engine img { width: 100%; } .main-visual .main-element .title_wrapper .title { width: 80%; position: absolute; top: calc(50% - 50px); left: 50%; transform: translate(-50%, -50%); text-align: center; color: #c8aa90; box-sizing: border-box; } .main-visual .main-element .title_wrapper .title .title_1 { display: block; margin: 0 auto; width: 100%; color: #968264; /*aaa*/ font-size: 2rem; font-family: urw-din; font-weight: 500; font-style: normal; -webkit-animation: fadeInanime 1s ease-in 1s; -moz-animation: fadeInanime 1s ease-in 1s; animation: fadeInanime 1s ease-in 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; line-height: 1.2; } .main-visual .main-element .title_wrapper .title .title_1 span { display: inline-block; } .main-visual .bg_box { contain: paint; pointer-events: none; transition: all 3s ease-in-out; opacity: 0; margin: 0 auto; padding: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; overflow: hidden; background-color: #000000; z-index: -1; } .main-visual .bg_box img { width: 100%; height: 100vh; height: 100dvh; -o-object-fit: cover; object-fit: cover; } .main-visual .bg_fixed { position: relative; height: 100vh; overflow: hidden; } .main-visual .contents_wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main-visual .bg_anime { position: absolute; top: 0; display: none; background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 100vh; height: 100dvh; transition: none; opacity: 0; } .main-visual .bg_anime.bg_active { position: fixed; top: 0; opacity: 1; } .main-visual .bg_anime.bg_block { display: block; } .main-visual .key-img { position: relative; z-index: 1; } .main-visual .movie-wrapper { height: 100%; min-height: 100vh; z-index: 200; position: relative; padding: 25vh 6vw; box-sizing: border-box; } .main-visual .movie-wrapper .top-movie { width: 100%; max-width: 880px; margin: auto; position: relative; } .main-visual .movie-wrapper .top-movie .dot { display: inline-block; } .main-visual .movie-wrapper .top-movie .dot::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/games/prospi/2024-2025/s/images/common/dot.png") repeat 0 0; } .main-visual .movie-wrapper .top-movie .youtube { display: inline-block; width: 100%; margin: 0 auto; z-index: 1; position: relative; display: inline-block; vertical-align: middle; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); } .main-visual .movie-wrapper .top-movie .youtube::before, .main-visual .movie-wrapper .top-movie .youtube::after { position: absolute; top: 0; bottom: 0; left: 50%; margin: auto; content: ""; vertical-align: middle; z-index: 1; } .main-visual .movie-wrapper .top-movie .youtube::before { width: 4rem; height: 4rem; -webkit-border-radius: 50%; border-radius: 50%; background: rgba(0, 0, 0, 0.3); border: 2px solid #ffffff; transform: translateX(-25px); transition: background-color 0.5s ease; } .main-visual .movie-wrapper .top-movie .youtube::after { left: 50%; box-sizing: border-box; width: 10px; height: 10px; border: 10px solid transparent; border-left: 18px solid #ffffff; } .main-visual .movie-wrapper .top-movie .youtube:hover::before { background: rgba(0, 0, 0, 0.6); } .main-visual .movie-wrapper .top-movie .youtube img { width: 100%; } .main-visual .movie-wrapper .top-movie .youtube h1 { display: block; /*aaa*/ font-size: 0.875rem; } .main-visual .movie-wrapper .top-movie .youtube h1 span { padding: 10px 35px 8px 25px; box-sizing: border-box; } .main-visual .movie-wrapper .top-movie .video_text { padding: 1.5rem 1rem 1rem; text-align: center; color: #968264; /*aaa*/ font-size: 1rem; z-index: 1; } .main-visual .movie-wrapper .top-movie .video_text span { position: revert; z-index: 10; display: inline-block; } .main-visual .logo_prospi_2024-2025 { margin: 2vh auto 10vh; max-width: 620px; width: 80%; } .main-visual .logo_prospi_2024-2025 img { width: 100%; } .main-visual .logo-area { height: 100vh; position: relative; margin: auto; width: 100%; box-sizing: border-box; z-index: 3; } .main-visual .logo-area .logo_ebaseball { width: 75%; max-width: 280px; margin: 0 auto; text-align: center; } .main-visual .logo-area .copy_play { width: 80vw; max-width: 480px; padding: 30vh 4rem 3vh; box-sizing: border-box; margin: 0 auto; } .main-visual .release_date { text-align: center; padding: 32vh 2rem 0; max-width: 320px; margin: 0 auto; } .main-visual .platform_data { position: relative; left: 0; margin: 3vh auto 10vh; height: 60vh; } .main-visual .platform_data .date { position: relative; max-width: 520px; margin: 0 auto; } .main-visual .platform_data .date img { width: 100%; } .main-visual .platform_data .platform { display: flex; justify-content: center; flex-wrap: nowrap; padding: 0 0 2vh; align-items: center; max-width: 50vw; margin: 0 auto; } .main-visual .platform_data .platform li { color: #ffffff; width: 140px; margin: 0 2%; box-sizing: border-box; } .main-visual .platform_data .platform li svg { fill: currentColor; } .main-visual .platform_data .platform li.steam { width: 134px; } @media only screen and (min-width: 768px) { .main-visual .logo-area { height: 120vh; } .main-visual .logo-area .copy_play { padding: 16vh 4rem 3vh; } .main-visual .release_date { max-width: 380px; padding: 0 2rem; } .main-visual .bg_box img { width: 100%; height: 100vh; -o-object-fit: cover; object-fit: cover; } .main-visual .movie-wrapper .top-movie { max-width: 800px; } .main-visual .movie-wrapper .top-movie .youtube { position: relative; display: inline-block; vertical-align: middle; z-index: 10; } .main-visual .movie-wrapper .top-movie .youtube::before, .main-visual .movie-wrapper .top-movie .youtube::after { position: absolute; top: 0; bottom: 0; left: 50%; margin: auto; content: ""; vertical-align: middle; z-index: 1; } .main-visual .movie-wrapper .top-movie .youtube::before { width: 6rem; height: 6rem; -webkit-border-radius: 50%; border-radius: 50%; background: rgba(0, 0, 0, 0.3); border: 2px solid #ffffff; transform: translateX(-36px); transition: background-color 0.5s ease; } .main-visual .movie-wrapper .top-movie .youtube::after { left: 50%; box-sizing: border-box; width: 18px; height: 18px; border: 18px solid transparent; border-left: 30px solid #ffffff; } .main-visual .movie-wrapper .top-movie .youtube:hover::before { background: rgba(0, 0, 0, 0.6); } .main-visual .movie-wrapper .top-movie .youtube h1 { display: block; /*aaa*/ font-size: 0.875rem; } .main-visual .movie-wrapper .top-movie .youtube h1 span { padding: 10px 35px 8px 25px; } } @media only screen and (min-width: 768px) and (min-width: 980px) { .main-visual .main-visual .logo_prospi_2024-2025 { margin: 2vh auto 40vh; max-width: 620px; width: 80%; } .main-visual .main-visual .platform { max-width: 500px; } } .server-status_area { position: relative; height: 48px; padding: 8px; color: #ffffff; text-align: center; } @media only screen and (min-width: 768px) { .server-status_area { box-sizing: border-box; text-align: left; } } .server-status_area .server-status { /*aaa*/ font-size: 0.6875rem; display: inline-block; box-sizing: border-box; width: 100%; padding: 5px 20px; text-align: center; border-radius: 16px; background: #1d1d1d; } .server-status_area .server-status.status-0 { background: linear-gradient(-45deg, #6ec200 0%, #6ec200 50%, #4d6777 50%, #4d6777 100%); } .server-status_area .server-status.status-1 { background: linear-gradient(-45deg, #c734b3 0%, #c734b3 50%, #4d6777 50%, #4d6777 100%); } .server-status_area .server-status.status-2 { background: linear-gradient(-45deg, #c1bf17 0%, #c1bf17 50%, #4d6777 50%, #4d6777 100%); } .server-status_area .server-status[v-cloak] { display: none; } @media only screen and (min-width: 768px) { .server-status_area .server-status { width: 240px; margin-top: -3px; border-radius: 5px; } } @media only screen and (min-width: 980px) { .server-status_area .server-status { /*aaa*/ font-size: 0.75rem; margin-top: -6px; padding: 8px 20px; } } .server-status_area .server-status .server-status-txt { display: flex; } .server-status_area .server-status .server-status-txt > span { width: 50%; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .server-status_area .loading { animation: blink 1s ease-in-out 0s infinite normal; } .server-status-fade-leave-active { transition: opacity 0.5s ease; opacity: 0; } .server-status-fade-enter { opacity: 0; } .server-status-fade-enter-active { transition: opacity 0.5s ease; } .contents::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-image: url("/games/prospi/2024-2025/s/images/common/bg_right.png"), url("/games/prospi/2024-2025/s/images/common/bg_left.png"); background-repeat: repeat-y, repeat-y; background-position: 200% top, -200% top; background-size: 100% auto, 100% auto; z-index: 1; transition: all 1s ease-in-out; opacity: 0; } @media only screen and (min-width: 768px) { .contents::before { background-position: right top, left top; background-size: 35% auto, 35% auto; } } .contents.active::before { opacity: 1; } .contents .chapter-bg-wraper { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 10; } .contents .chapter-bg-wraper .bg-inner { position: relative; width: 100%; height: 100vh; } .contents .chapter-bg-wraper .bg-inner .bg-block { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; clip-path: inset(100% 0 0 0); text-align: center; background: #000; } .contents .chapter-bg-wraper .bg-inner .bg-block video { width: 100%; height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); object-fit: cover; } .contents .chapter-bg-wraper .bg-inner .bg-block::before, .contents .chapter-bg-wraper .bg-inner .bg-block:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .contents .chapter-bg-wraper .bg-inner .bg-block:after { background: rgba(0, 0, 0, 0.4) url("/games/prospi/2024-2025/s/images/common/dot.png") repeat 0 0; } .contents .chapter-bg-wraper .bg-inner .bg-block.ch2::before { background: url("/games/prospi/2024-2025/s/images/common/detail_bg_sp.png") center top no-repeat; background-size: cover; /* @media only screen and (min-width: $bpTablet) { background-image: url("/games/prospi/2024-2025/s/images/common/bg_detail.jpg"); background-size: 100%; }*/ } @media screen and (orientation: portrait) { .contents .chapter-bg-wraper .bg-inner .bg-block.ch2::before { background: url("/games/prospi/2024-2025/s/images/common/detail_bg_sp.png") center top no-repeat; background-size: cover; } } @media screen and (orientation: landscape) { .contents .chapter-bg-wraper .bg-inner .bg-block.ch2::before { background-image: url("/games/prospi/2024-2025/s/images/common/bg_detail.jpg"); background-size: 100%; } } .contents section[class^=chapter] { position: relative; display: block; width: 100%; height: auto; transition: all 0.5s; } .contents section[class^=chapter] .chapter-num { position: relative; top: 2%; right: 0; left: 0; margin: auto; text-align: center; color: #878c91; font-family: urw-din; font-weight: 500; font-style: normal; /*aaa*/ font-size: 1rem; padding: 0 12px; } .contents section[class^=chapter] .chapter-num::before { content: ""; display: block; position: absolute; height: 1px; right: 0; top: 50%; width: calc(50% - 2.5rem); background-color: #878c91; } .contents section[class^=chapter] .chapter-num::after { content: ""; display: block; position: absolute; height: 1px; width: calc(50% - 2.5rem); top: 50%; left: 0; background-color: #878c91; } .contents section[class^=chapter] .chapter-num::before { content: ""; display: block; top: 0; left: 0; width: 100%; height: 100lvh; min-height: 80rem; z-index: -100; position: fixed; background-size: cover; opacity: 0.6; } .contents section[class^=chapter] .logo_20th { max-width: 320px; width: 60%; margin: 2rem auto 1rem; } .contents section[class^=chapter] .logo_20th img { width: 100%; } .contents section[class^=chapter] .chapter-wrapper { overflow: hidden; width: 100%; } .contents section[class^=chapter] .chapter-inner { position: relative; padding: 8vh 2vh 2vh; width: 100%; margin: 0 auto; z-index: 150; } .contents section[class^=chapter] header[class^=point], .contents section[class^=chapter] header.title { margin: 0 auto; } .contents section[class^=chapter] header[class^=point] h2, .contents section[class^=chapter] header.title h2 { /*aaa*/ font-size: 1.5625rem; } @media only screen and (min-width: 768px) { .contents section[class^=chapter] header[class^=point] h2, .contents section[class^=chapter] header.title h2 { /*aaa*/ font-size: 2.25rem; padding: 1rem 0 1.5rem; } } .contents section[class^=chapter] header[class^=point] > em, .contents section[class^=chapter] header.title > em { display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; background-size: contain; background-position: center center; width: 80px; } @media only screen and (min-width: 768px) { .contents section[class^=chapter] header[class^=point] > em, .contents section[class^=chapter] header.title > em { width: 120px; } } .contents section[class^=chapter] header { text-align: center; margin: 60px 0 20px; } .contents section[class^=chapter] header span { display: inline-block; } .contents section[class^=chapter] header em { color: #968264; } .contents section[class^=chapter] header.point_detail em { background: url("/games/prospi/2024-2025/s/images/ebaseball_engine/text_detail.svg") no-repeat; } .contents section[class^=chapter] header.point_action em { background: url("/games/prospi/2024-2025/s/images/ebaseball_engine/text_action.svg") no-repeat; } @media only screen and (min-width: 768px) { .contents section[class^=chapter] header.point_action em { width: 140px; } } .contents section[class^=chapter] header.point_studium em { width: 100px; background: url("/games/prospi/2024-2025/s/images/ebaseball_engine/text_stadium.svg") no-repeat; } @media only screen and (min-width: 768px) { .contents section[class^=chapter] header.point_studium em { width: 140px; } } .contents section[class^=chapter] header.point_sound em { width: 76px; background: url("/games/prospi/2024-2025/s/images/ebaseball_engine/text_sound.svg") no-repeat; } @media only screen and (min-width: 768px) { .contents section[class^=chapter] header.point_sound em { width: 93px; } } .contents section[class^=chapter] header.sample em { width: 80px; background: url("/games/prospi/2024-2025/s/images/common/sample.svg") no-repeat; } @media only screen and (min-width: 768px) { .contents section[class^=chapter] header.sample em { width: 120px; } } .contents .text-wrap { position: relative; width: fit-content; max-width: 360px; margin: 0 auto; padding: 6vh 20px; box-sizing: border-box; } .contents .text-wrap h2 { /*aaa*/ font-size: 2.5rem; font-family: ruika; /* "urw-din", sans-serif;*/ font-weight: 500; font-style: normal; padding-bottom: 0.5em; line-height: 1.2; } .contents .text-wrap .top-text { position: relative; display: block; } .contents .text-wrap .top-text::after { content: ""; position: absolute; display: block; width: 2.8em; height: 1px; top: 50%; left: 4.5em; background-color: #323c41; } .contents .text-wrap header { display: contents; max-width: 580px; font-family: ruika; /* "urw-din", sans-serif;*/ font-weight: 500; font-style: normal; } .contents .text-wrap header span { display: inline-block; color: #000000; background-color: #ffffff; padding: 6px 12px; box-sizing: border-box; /*aaa*/ font-size: 1rem; font-family: a-otf-ud-shin-go-pr6n; /* "urw-din", sans-serif;*/ font-weight: 500; font-style: normal; font-weight: 800; } .contents .text-wrap strong { color: #323c41; display: inline-block; } .contents .text-link { position: relative; display: inline-block; margin: 0 auto; } .contents .text-link a { color: #d2aa78; /*aaa*/ font-size: 1rem; } .contents .text-link a::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; position: absolute; width: 8px; height: 8px; top: 50%; border-top: 2px solid #d2aa78; border-right: 2px solid #d2aa78; transform: rotate(45deg) translateY(-50%); right: -0.5em; left: auto; transition: all 0.3s; } .contents .text-link a:hover::before { border-color: #2882f0; } .contents .text-link a:hover { color: #2882f0; } .contents .sub-heading { position: relative; /*aaa*/ font-size: 1.5rem; padding-bottom: 0.5em; z-index: 100; } .contents .asset-popup { max-width: 320px; box-sizing: border-box; margin: 3rem auto; display: grid; gap: 1.5rem; grid-template-columns: 1fr; grid-template-rows: 2fr; justify-items: center; grid-template-areas: "a" "b"; } .contents .asset-popup .text-wrap { padding: 0; grid-area: a; max-width: 360px; } .contents .asset-popup a { grid-area: b; } .contents .asset-popup a .thumbnail { position: relative; display: inline-block; border-radius: 12px; max-width: 280px; margin: 0 auto; } .contents .asset-popup a .thumbnail::before, .contents .asset-popup a .thumbnail::after { content: ""; display: block; position: absolute; } .contents .asset-popup a .thumbnail::before { width: 20px; height: 20px; bottom: 6px; right: 7px; background: url("/games/prospi/2024-2025/s/images/common/btn_zoom.png") no-repeat 0 0/100% auto; z-index: 1; } .contents .asset-popup a .thumbnail img { border-radius: 12px; border: 1px solid #ffffff; } .contents .chapter-text-box { margin: 20px 0 45px; } .contents .chapter-lead { /*aaa*/ font-size: 1rem; line-height: 1.8; } .contents .point-color { color: #d2aa78; } .contents .point-color span { display: inline-block; } .contents .point-color span.color { color: #ffffff; } .contents .astarisk { font-size: 0.75rem; vertical-align: top; } .contents .note { padding: 1rem 0 0; } .contents section.chapter0 { min-height: fit-content; padding: 4% 0; } .contents .chapter0 { position: relative; background-color: #ffffff; padding-top: 0; } .contents .chapter0 h2 { color: #323c41; /*aaa*/ font-size: 2.375rem; } .contents .chapter0 h2 span { display: inline-block; } .contents .chapter0 p.chapter-lead { color: #968264; } .contents .chapter0 p:first-of-type { padding-bottom: 1.5rem; } .contents .chapter0 span { display: inline-block; } .contents .chapter1 { position: relative; padding-top: 6vh; background-color: #000000; } .contents .chapter1 .text-wrap { padding: 1rem 0; } .contents .chapter1 .top-element { max-width: 880px; display: flex; flex-wrap: wrap; flex-direction: column; } .contents .chapter1 .top-element img { width: 100%; } .contents .chapter1 .top-element .ebaseball-engine_copy { max-width: 600px; width: 100%; margin: 0 auto; padding: 0 2rem 2rem; box-sizing: border-box; text-align: center; } @media only screen and (min-width: 768px) { .contents .chapter1 .top-element .ebaseball-engine_copy { max-width: 880px; } } .contents .chapter1 .top-element .ebaseball-engine_section { text-align: left; } .contents .chapter1 .top-element .ebaseball-engine_section p { padding: 20px 5vw; margin: 0 auto; box-sizing: border-box; } .contents .chapter1 .top-element .ebaseball-engine_section .logo-img { display: flex; justify-content: center; padding: 2rem 0; box-sizing: border-box; max-width: 420px; margin: 0 auto; } .contents .chapter1 .top-element .ebaseball-engine_section .logo-img p { margin: auto; text-align: center; padding: 0 1rem; width: calc(100% - 1rem)/2; } .contents .chapter1 .top-element .ebaseball-engine_section .logo-img p span { display: inline-block; } .contents .chapter1 .top-element .ebaseball-engine_section .logo-img p img { width: 100%; } .contents .chapter1 .top-element .ebaseball-engine_section .logo-img p.logo_ebaseball-engine { max-width: 180px; } .contents .chapter1 .top-element .ebaseball-engine_section .logo-img p.logo_unreal-engine { max-width: 154px; } .contents .chapter1 .top-element .swiper { /*padding: 0 4%; box-sizing: border-box;*/ border-radius: 12px; } .contents .chapter1 .top-element .swiper .ss_slide img { width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) inset; } .contents .chapter1 .point_action_video { display: flex; margin: 40px auto; flex-direction: column; justify-content: center; max-width: 880px; width: 100%; padding: 20px; } .contents .chapter1 .point_action_video .video_thumb { width: 100%; height: auto; max-width: 100%; margin-bottom: 40px; } .contents .chapter1 .point_action_video .video_thumb .thumbnail { position: relative; position: relative; display: inline-block; vertical-align: middle; } .contents .chapter1 .point_action_video .video_thumb .thumbnail::before, .contents .chapter1 .point_action_video .video_thumb .thumbnail::after { position: absolute; top: 0; bottom: 0; left: 50%; margin: auto; content: ""; vertical-align: middle; z-index: 1; } .contents .chapter1 .point_action_video .video_thumb .thumbnail::before { width: 5rem; height: 5rem; -webkit-border-radius: 50%; border-radius: 50%; background: rgba(0, 0, 0, 0.3); border: 2px solid #ffffff; transform: translateX(-18px); transition: background-color 0.5s ease; } .contents .chapter1 .point_action_video .video_thumb .thumbnail::after { left: 50%; box-sizing: border-box; width: 10px; height: 10px; border: 10px solid transparent; border-left: 18px solid #ffffff; } .contents .chapter1 .point_action_video .video_thumb .thumbnail:hover::before { background: rgba(0, 0, 0, 0.6); } .contents .chapter1 .point_action_video .video_thumb .thumbnail img { border-radius: 12px; border: 2px solid #2882f0; width: 100%; position: relative; display: inline-block; vertical-align: middle; } .contents .chapter2 { position: relative; padding-top: 20vh; z-index: 200; /* ch2用　テキスト背景*/ } .contents .chapter2 .text-bg { background-color: #000000; background-image: url("/games/prospi/2024-2025/s/images/common/bg_right.png"), url("/games/prospi/2024-2025/s/images/common/bg_left.png"); background-repeat: repeat-y, repeat-y; background-position: 200% top, -200% top; background-size: 100% auto, 100% auto; transition: all 1s ease-in-out; padding-bottom: 2rem; } @media only screen and (min-width: 768px) { .contents .chapter2 .text-bg { background-position: right top, left top; background-size: 35% auto, 35% auto; } } .contents .chapter2 .bg_slide { width: 100%; text-align: center; margin: 0 auto; } .contents .chapter2 .bg_slide img { width: 100%; } .contents .chapter2 .ss-box { position: relative; z-index: 1; margin-bottom: 3vh; } .contents .chapter2 .ss-box ul { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; justify-content: center; width: 100%; padding: 0 2rem; box-sizing: border-box; } .contents .chapter2 .ss-box ul li { position: relative; width: calc(100% - 4%)/2; max-width: 310px; padding: 0 0.5rem; box-sizing: border-box; } .contents .chapter2 .ss-box ul li::before { content: ""; display: block; position: absolute; width: 1.3rem; height: 1.3rem; bottom: 7px; right: 16px; background: url("/games/prospi/2024-2025/s/images/common/btn_zoom.png") no-repeat 0 0/100% auto; } .contents .chapter2 .ss-box ul li img { width: 100%; border: 1px solid #ffffff; border-radius: 17px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) inset; } .contents .chapter3 { padding-top: 100vh; z-index: 200; } .contents .chapter3 img { width: 100%; } .contents .chapter3 .bg_block { height: 70vh; } .contents .chapter3 .point_action_video { position: relative; z-index: 10; } .contents .chapter4 { position: relative; min-height: fit-content; background-size: contain; padding-top: 30vh; z-index: 200; } .contents .chapter4 .mode-list { max-width: fit-content; padding: 20px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.3); line-height: 1.8; margin: 4vh auto; } .contents .chapter4 .mode-list .new { position: relative; color: #d2aa78; } .contents .chapter4 .mode-list .new::before { content: "New"; font-weight: 800; text-transform: uppercase; position: absolute; width: 30px; height: 30px; line-height: 30px; top: -2px; left: -2.5rem; text-align: center; border-radius: 100vh; -webkit-border-radius: 100vh; box-shadow: 0 0 8px #d2aa78, 0 0 8px #d2aa78; background-color: #ffffff; /*aaa*/ font-size: 0.5rem; color: #000000; -webkit-animation: topScaleanime 0.3s ease-in 1.8s; -moz-animation: topScaleanime 0.3s ease-in 1.8s; animation: topScaleanime 0.3s ease-in 1.8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; opacity: 0; } .contents .chapter5 { padding: 100vh 0; z-index: 200; } .contents .chapter5 .point_studium_video { display: flex; justify-content: center; margin: 40px auto; flex-direction: column; max-width: 880px; width: 100%; height: 100vh; padding: 20px; } .contents .chapter5 .point_studium_video .video_thumb { width: 100%; height: auto; margin-bottom: 40px; text-align: center; } .contents .chapter5 .point_studium_video .video_thumb .thumbnail img { width: 100%; } .contents .chapter5 .sound_sample { padding: 2rem 0; box-sizing: border-box; } .contents .chapter5 .sound_sample .sound_play { width: 100%; display: flex; justify-content: center; flex-direction: column; text-align: center; z-index: 1; } .contents .chapter5 .sound_sample .sound_play .sound_title { /*aaa*/ font-size: 1.125rem; } .contents .chapter5 .sound_sample .sound_play .sound_title p { padding-bottom: 1rem; } .contents .chapter5 .sound_sample .sound_play .sound_title img { max-width: 280px; border-radius: 2vw; box-shadow: 0 0 3px #000000; } .contents .chapter5 .sound_sample .sound_play dl { padding: 1rem; box-sizing: border-box; } .contents .chapter5 .sound_sample .sound_play dl dt { padding: 0.5rem; } .contents .preorder { position: relative; margin: auto; text-align: center; padding: 1rem 16%; box-sizing: border-box; z-index: 100; } .contents .preorder dl { display: flex; flex-direction: column; } .contents .preorder dl .preorder_text { padding-bottom: 1em; } .contents .preorder dl .link-btn { max-width: 510px; margin: 0 auto; display: flex; justify-content: space-between; box-sizing: border-box; width: 100%; } .contents .preorder dl .link-btn li { width: 100%; min-width: 40%; transition: all 0.3s; margin: 0 4px; box-sizing: border-box; max-height: 50px; transform: skewX(-30deg); background: url("/games/prospi/2024-2025/s/images/common/btn_base.png") no-repeat 0 0; /*@include before() { background: url("/games/prospi/2024-2025/s/images/common/btn_base.png") no-repeat 0 0; background-size: 100%; transition: all 0.3s; transform: skewX(30deg); clip-path:polygon(12% 0%, 100% 0, 88% 100%, 0% 100%); }*/ } .contents .preorder dl .link-btn li:hover { filter: brightness(110%); } .contents .preorder dl .link-btn li span { display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; text-align: center; line-height: 0; transform: skewX(30deg); } .contents .preorder dl .link-btn li span::after { content: ""; display: block; background-repeat: no-repeat; background-size: contain; background-position: center center; height: 26px; max-width: 70%; margin-inline: auto; } .contents .preorder dl .link-btn li.btn-ps5 span::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393.37 85.04' style='enable-background:new 0 0 393.37 85.04' xml:space='preserve'%3E%3Cpath fill='%23ffffff' d='M41.18 0v79.35l17.97 5.69V18.51c0-3.13 1.4-5.22 3.64-4.5 2.93.81 3.5 3.7 3.5 6.8v26.57c11.18 5.41 19.99 0 19.99-14.28 0-14.59-5.16-21.09-20.35-26.32-5.99-2-17.09-5.37-24.75-6.78'/%3E%3Cpath fill='%23ffffff' d='m62.57 73.44 28.86-10.27c3.26-1.21 3.76-2.85 1.12-3.72-2.68-.88-7.47-.63-10.77.56l-19.2 6.78V55.97l1.1-.36s5.56-1.97 13.38-2.82c7.8-.86 17.37.11 24.9 2.95 8.47 2.69 9.42 6.62 7.28 9.35-2.17 2.7-7.45 4.66-7.45 4.66L62.57 83.83V73.44zM8.27 72.35C-.42 69.93-1.87 64.82 2.1 61.86c3.66-2.7 9.88-4.73 9.88-4.73l25.74-9.18V58.4l-18.51 6.63c-3.28 1.17-3.77 2.82-1.13 3.69 2.69.9 7.46.66 10.74-.55l8.9-3.21v9.32c-.57.1-1.21.19-1.79.29-8.88 1.47-18.33.87-27.66-2.22zM103.13 76.54c2.53 0 4.23 1.88 4.23 4.25 0 2.39-1.71 4.25-4.23 4.25-2.53 0-4.27-1.86-4.27-4.25 0-2.37 1.74-4.25 4.27-4.25zm0 7.87c2.15 0 3.57-1.62 3.57-3.62 0-1.98-1.42-3.6-3.57-3.6-2.19 0-3.59 1.62-3.59 3.6 0 2 1.41 3.62 3.59 3.62zm-1.68-6.09h1.95c.9 0 1.56.26 1.56 1.28 0 .59-.28 1.01-.9 1.19v.02c.32.08.54.32.7.89.16.55.34 1.07.48 1.54h-.9c-.12-.36-.28-.99-.38-1.34-.14-.57-.3-.75-1.04-.75h-.58v2.09h-.88v-4.92zm.88 2.2h.78c.62 0 1-.24 1-.81 0-.67-.46-.77-.94-.77h-.84v1.58zM384.67 62.94h-1.71v-.58h4.07v.58h-1.67v5.09h-.69v-5.09zM390.58 67.4h.02l1.6-5.04h1.18v5.67h-.67v-5.15h-.02l-1.68 5.15h-.87l-1.63-5.15h-.02v5.15h-.65v-5.67h1.17l1.57 5.04zM242.15 68.03c7.58 0 13.72-6.14 13.72-13.71v-23.6c0-4.57 3.7-8.27 8.27-8.27h26.61c.2 0 .36-.16.36-.36v-4.72c0-.2-.16-.36-.36-.36h-32.06c-7.58 0-13.72 6.14-13.72 13.72v23.6c0 4.57-3.7 8.27-8.27 8.27h-26.24c-.2 0-.36.16-.36.36v4.72c0 .2.16.36.36.36h31.69zM302.12 36.17v-18.8c0-.2.16-.36.36-.36h72.46c.2 0 .36.16.36.36v4.72c0 .2-.16.36-.36.36h-61.56c-.2 0-.36.16-.36.36v12.25a3.92 3.92 0 0 0 3.92 3.92h45.83c8.02 0 14.52 6.5 14.52 14.52s-6.5 14.52-14.52 14.52h-60.29c-.2 0-.36-.16-.36-.36v-4.72c0-.2.16-.36.36-.36h54.84c5 0 9.05-4.04 9.07-9.04.02-5.01-4.13-9.11-9.14-9.11h-46.86c-4.57.01-8.27-3.69-8.27-8.26zM194.5 38.99c4.57 0 8.27-3.7 8.27-8.27s-3.7-8.27-8.27-8.27h-55.59c-.2 0-.36-.16-.36-.36v-4.72c0-.2.16-.36.36-.36h61.04c7.57 0 13.72 6.14 13.72 13.72s-6.14 13.72-13.72 13.72h-42.24c-4.56 0-8.27 3.7-8.27 8.27v14.96c0 .2-.16.36-.36.36h-10.17c-.2 0-.36-.16-.36-.36V52.71c0-7.58 6.14-13.72 13.72-13.72h42.23z'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat; } .contents .preorder dl .link-btn li.btn-ps5 a { padding: 12px 0; } .contents .preorder dl .link-btn li.btn-steam span::after { background-image: url("/games/prospi/2024-2025/s/images/common/logo_steam.svg"); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 293.5 88.5'%3E%3Cpath fill='%23ffffff' d='M44.1 0C20.8 0 1.8 17.9 0 40.7l23.7 9.8c2-1.4 4.4-2.2 7-2.2h.7L42 33.1v-.2c0-9.2 7.5-16.7 16.7-16.7s16.7 7.5 16.7 16.7-7.5 16.7-16.7 16.7h-.4l-15 10.7v.6c0 6.9-5.6 12.5-12.5 12.5-6.1 0-11.1-4.3-12.3-10.1l-17-7c5.3 18.6 22.3 32.2 42.6 32.2 24.4 0 44.2-19.8 44.2-44.2C88.3 19.8 68.5 0 44.1 0z'/%3E%3Cpath fill='%23ffffff' d='m27.7 67.1-5.4-2.2c1 2 2.6 3.7 4.8 4.6 4.8 2 10.3-.3 12.3-5.1 1-2.3 1-4.9 0-7.2s-2.8-4.1-5.1-5.1-4.8-.9-6.9-.1l5.6 2.3c3.5 1.5 5.2 5.5 3.7 9-1.4 3.6-5.5 5.3-9 3.8zM69.8 32.8c0-6.1-5-11.1-11.1-11.1s-11.1 5-11.1 11.1S52.6 44 58.7 44s11.1-5 11.1-11.2zm-19.5 0c0-4.6 3.7-8.4 8.4-8.4 4.6 0 8.4 3.7 8.4 8.4 0 4.6-3.7 8.3-8.4 8.3-4.6.1-8.4-3.7-8.4-8.3zM135.6 30.3l-3 5.2c-2.3-1.6-5.4-2.6-8.1-2.6-3.1 0-5 1.3-5 3.6 0 2.8 3.4 3.4 8.4 5.2 5.4 1.9 8.5 4.2 8.5 9.1 0 6.8-5.3 10.6-13 10.6-3.7 0-8.3-1-11.7-3.1l2.2-5.8c2.8 1.5 6.2 2.4 9.2 2.4 4.1 0 6-1.5 6-3.7 0-2.5-2.9-3.3-7.7-4.9-5.4-1.8-9.1-4.2-9.1-9.7 0-6.2 5-9.8 12.1-9.8 4.9.2 8.9 1.8 11.2 3.5zM158.7 33.6v27.3h-7V33.6h-10.1v-6h27.2v6h-10.1zM183.5 33.5V41h13.4v6h-13.4v7.8H199v6h-22.5V27.6H199v6h-15.5zM214.6 54.4l-2.2 6.5h-7.3l12.5-33.3h7l12.8 33.3h-7.6l-2.3-6.5h-12.9zm6.5-18.9-4.5 13.3h9.2l-4.7-13.3zM273.3 40.5 264.2 60h-3.9l-9-19.3V61h-6.7V27.6h6.7l11.2 24.1 10.8-24.1h6.7v33.3h-6.7V40.5zM293.5 31.8c0 2.9-2.1 4.6-4.6 4.6-2.5 0-4.6-1.8-4.6-4.6 0-2.9 2.2-4.6 4.6-4.6 2.4-.1 4.6 1.7 4.6 4.6zm-8.5 0c0 2.4 1.7 3.9 3.8 3.9 2.1 0 3.8-1.5 3.8-3.9s-1.7-3.9-3.8-3.9c-2.1 0-3.8 1.5-3.8 3.9zm3.9-2.4c1.2 0 1.6.6 1.6 1.3 0 .6-.4 1-.8 1.3l1.1 2h-.9l-.9-1.8h-1V34h-.7v-4.6h1.6zm-.8 2.1h.8c.5 0 .8-.3.8-.7 0-.4-.2-.7-.8-.7h-.8v1.4z'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat; height: 30px; } .contents .preorder dl .link-btn li.no-link { opacity: 0.4; } .contents .preorder dl .link-btn li.no-link a { pointer-events: none; } .contents .preorder dl .link-btn li.no-link:hover { filter: none; } .contents .preorder dl .link-btn a { position: relative; display: block; padding: 10px 0; box-sizing: border-box; width: 100%; transition: all 0.3s; } .contents .product { position: relative; min-height: fit-content; padding: 0 0 6vh; background-color: #000000; z-index: 200; } .contents .product::before { content: ""; display: block; width: 100%; height: 1px; background-color: rgba(135, 140, 145, 0.5); margin: auto; } .contents .product .product-inner { max-width: 640px; margin: 0 auto; } .contents .product .product-inner h1 img { max-width: 90%; } .contents .product .product-inner h2 { margin: 0 auto 15px; padding: 0; /*aaa*/ font-size: 1.75rem; } .contents .product .product-inner .heading { width: 100%; max-width: 700px; margin: 0 auto; } .contents .product .product-inner .heading > h2 { /*aaa*/ font-size: 2rem; } .contents .product .product-inner .heading span { /*aaa*/ font-size: 0.875rem; display: inline-table; padding: 6px; color: #000000; background-color: #ffffff; } .contents .product .product-inner .product-detail { max-width: 700px; margin: 3vh auto 6vh; } .contents .product .product-inner .product-detail .product-pkg { max-width: 280px; text-align: center; margin: 0 auto; } .contents .product .product-inner .product-detail .product-pkg img { width: 100%; } .contents .product .product-inner .product-detail .product-data { display: flex; flex-direction: column; padding: 30px 0; } .contents .product .product-inner .product-detail .product-data .product-name { width: 100%; /*aaa*/ font-size: 1.375rem; color: #f0f5fa; } .contents .product .product-inner .product-detail .product-data .product-name { /*aaa*/ font-size: 1.125rem; color: #f0f5fa; text-align: center; } .contents .product .product-inner .product-detail .product-data dl { display: grid; margin: 0 auto; /*aaa*/ font-size: 0.875rem; padding: 12px 0; grid-template-columns: 6rem 1fr; grid-template-rows: 4fr auto; gap: 12px; } .contents .product .product-inner .product-detail .product-data dt { box-sizing: border-box; } .contents .product .product-inner .product-detail .product-data dt span { display: inline-block; } .contents .product .product-inner .product-detail .product-data dd { text-align: left; } .contents .product .product-inner .product-detail .product-data dd.cero img { max-width: 60px; border-radius: 6px; -webkit-border-radius: 6px; } .contents .product .product-inner .product-detail .product-data dd.note { width: 100%; } .contents .product .product-inner .product-detail dl { margin: 0 auto; /*aaa*/ font-size: 0.875rem; padding: 12px 0; } .contents .product .product-inner .product-detail dl span { display: inline-block; } .contents .product .product-inner .product-detail dt, .contents .product .product-inner .product-detail dd { box-sizing: border-box; } .contents .product .product-inner .product-detail dt { color: #968264; text-align: right; } .contents .product .product-inner .product-detail dt::after { content: " : "; } .contents .product .product-inner .product-detail dt span { display: inline-block; } .contents .product .product-inner .product-detail dd.note { width: 100%; } .contents .product .product-inner .product-detail dd.cero img { max-width: 50px; } .contents .product .product-info { border: 1px solid rgba(255, 255, 255, 0.5); padding: 1.5rem; box-sizing: border-box; display: grid; /*aaa*/ font-size: 0.875rem; grid-template-columns: 1fr; grid-template-rows: 2fr auto; gap: 0.5rem; } .contents .product .product-info .pkg_img img { width: 100%; } .contents .product .product-info .package_label { /*aaa*/ font-size: 0.875rem; display: inline-block; padding: 6px 12px; margin: 1rem 0; box-sizing: border-box; color: #000000; background-color: #ffffff; width: 100%; text-align: center; } .contents .product .product-info .product-info_copy { /*aaa*/ font-size: 1.125rem; font-family: ruika; /* "urw-din", sans-serif;*/ font-weight: 500; font-style: normal; padding-bottom: 1.5rem; } .contents .product .product-info .product-info_copy span { display: inline-block; } .contents .product .top-preorder { /*aaa*/ font-size: 1.125rem; display: block; max-width: 280px; margin: 0 auto; background: url("/games/prospi/2024-2025/s/images/common/btn_base.png") no-repeat center center; transition: all 0.3s; } .contents .product .top-preorder:hover { opacity: 0.8; } .contents .product .online-service-list { margin: 0 20px; } .contents .product .online-service-list li { width: calc((100% / 2) - (5px * 1 / 2)); } .asset-box { display: flex; flex-direction: column; margin: 0 auto; position: relative; z-index: 20; } .asset-box.full { width: 100%; } .asset-box.full img { width: 100%; aspect-ratio: 16/9; } .asset-box .ss-img { display: block; margin: 0 12px 20px; width: 100%; } .asset-box img { width: 100%; } .asset-box .asset-box-text { width: 100%; padding: 0 12px; box-sizing: border-box; } .carousel-ss { position: relative; width: 100%; margin: 12% 0; padding: 0 20px; box-sizing: border-box; /*------------------------------------------------------*/ } .carousel-ss img { width: 100%; } .carousel-ss .swiper-slide { /* opacity: .3; transform: scale(.8); //中央意外の縮小サイズ transition: .7s;*/ } .carousel-ss .swiper-slide:not(.swiper-slide-visible) .slide { pointer-events: none; opacity: 0; } .carousel-ss .swiper-slide.swiper-slide-active { opacity: 1; transform: scale(1); /* 中央のスライドは標準サイズ */ z-index: 1; } .carousel-ss .swiper-button-prev, .carousel-ss .swiper-button-next { background: #f0f5fa; border-radius: 100vh; width: 50px; height: 50px; top: 50%; } .carousel-ss .swiper-button-prev { left: -20px; } .carousel-ss .swiper-button-prev:before { content: ""; display: block; position: absolute; top: 18px; left: 21px; width: 12px; height: 12px; border-top: 2px solid #2882f0; border-left: 2px solid #2882f0; transform: rotate(-45deg); } .carousel-ss .swiper-button-next { right: -20px; } .carousel-ss .swiper-button-next:before { content: ""; display: block; position: absolute; top: 20px; right: 21px; width: 12px; height: 12px; border-top: 2px solid #2882f0; border-right: 2px solid #2882f0; transform: rotate(45deg); } .carousel-ss .swiper-pagination { left: 0; right: 0; margin: 12px auto 0; } .carousel-ss .dots { display: inline-block; width: 12px; height: 12px; border: 1px solid #2882f0; border-radius: 20px; margin: 0 8px; background-color: transparent; /* &::before { content: ''; display: block; width: 14px; height: 14px; border: 3px solid $clBase1; border-radius: 100vh; }*/ } .carousel-ss .dots.swiper-pagination-bullet-active { background-color: #2882f0; } @media only screen and (min-width: 768px) { .pc { display: block; } .sp { display: none; } .contents { /* chapter */ } .contents section[class^=chapter] .chapter-inner { max-width: 700px; margin: 0 auto; } .contents section[class^=chapter] .logo_20th { max-width: 500px; width: 60%; margin: 2rem auto; } .contents section[class^=chapter] .logo_20th img { width: 100%; } .contents .chapter0 .chapter-lead span { display: inline-block; } .contents .chapter1 .top-element .ebaseball-engine_section { text-align: center; padding: 40px 0; } .contents .chapter1 .top-element .ebaseball-engine_section > p { padding: 0; } .contents .chapter1 .top-element .point_action_video { flex-direction: row; } .contents .chapter1 .top-element .point_action_video .video_thumb { max-width: 300px; margin-right: 30px; } .contents .chapter1 .top-element .point_studium_video { flex-direction: row; } .contents .chapter1 .top-element .point_studium_video .video_thumb { max-width: 300px; margin-right: 30px; } .contents .chapter1 .point_action_video { flex-direction: row; } .contents .chapter1 .point_action_video .video_thumb { max-width: 300px; margin-right: 30px; } .contents .chapter1 .point_studium_video { flex-direction: row; } .contents .chapter1 .point_studium_video .video_thumb { max-width: 300px; margin-right: 30px; } .contents .chapter2 { height: 100vh; } .contents .chapter5 .sound_sample .sound_play { flex-direction: row; } .contents .text-wrap { max-width: 980px; margin: 0 auto; } .contents .text-wrap h2 { /*aaa*/ font-size: 2.875rem; } .contents .text-wrap h2 .top-text::after { width: 4em; } .contents .text-wrap .chapter-lead span { display: inline-block; } .contents .carousel-ss { max-width: 800px; margin: 4vw auto 12vw; width: 100%; } .contents .carousel-ss img { width: 100%; } .contents .carousel-ss .swiper-pagination { left: 0; right: 0; margin: 12px auto 0; } .contents .carousel-ss .dots { display: inline-block; width: 14px; height: 14px; border: 2px solid #2882f0; border-radius: 20px; margin: 0 4px; background-color: transparent; } .contents .carousel-ss .dots.swiper-pagination-bullet-active { background-color: #2882f0; } .contents .asset-popup { max-width: 720px; gap: 2rem; grid-template-columns: 220px 2fr; grid-template-areas: "b a"; } .contents .asset-popup .popup-text { max-width: 540px; width: 100%; padding: 0; margin: 0; } .contents .asset-popup .popup-text span { display: inline-block; } .contents .asset-box { display: flex; flex: 0 0 50%; flex-direction: row; margin: 0 auto; max-width: 800px; } .contents .asset-box.full { max-width: 100%; } .contents .product .product-inner { max-width: 780px; } .contents .product .product-inner h2 { /*aaa*/ font-size: 3rem; } .contents .product .product-inner .product-detail { display: flex; max-width: 700px; margin: 6vh auto; align-items: start; justify-content: space-evenly; } .contents .product .product-inner .product-detail .product-pkg { width: 100%; max-width: 230px; text-align: center; margin: 0; } .contents .product .product-inner .product-detail .product-data { padding: 0; } .contents .product .product-inner .product-detail .product-data .product-name { /*aaa*/ font-size: 1.125rem; color: #f0f5fa; } .contents .product .product-inner .product-detail .product-data dl { display: grid; margin: 0 auto; /*aaa*/ font-size: 0.875rem; padding: 12px 0; grid-template-columns: 6rem 1fr; grid-template-rows: 4fr auto; gap: 12px; } .contents .product .product-inner .product-detail .product-data dt { box-sizing: border-box; } .contents .product .product-inner .product-detail .product-data dt span { display: inline-block; } .contents .product .product-inner .product-detail .product-data dd { text-align: left; } .contents .product .product-inner .product-detail .product-data dd.cero img { max-width: 60px; } .contents .product .product-inner .product-detail .product-data dd.note { width: 100%; } .contents .product .product-info { grid-template-columns: 290px auto; grid-template-rows: 1fr; gap: 1.5rem; } .contents .product .product-info .package_label { width: auto; margin: 0 0 0.5rem; /*aaa*/ font-size: 0.875rem; font-weight: bold; } .contents .product .product-info .product-info_copy { /*aaa*/ font-size: 1.25rem; padding-bottom: 0.5rem; } .contents .product .product-info .top-preorder { margin: 0; padding: 0; /*aaa*/ font-size: 1rem; max-width: 180px; } } @media only screen and (min-width: 1400px) { .contents .product .product-inner h2 { /*aaa*/ font-size: 2.25rem; } .contents .product .product-inner .online-service-list li { width: calc((100% / 4) - (5px * 2 / 4)); } .contents .carousel-ss { max-width: 980px; } .contents .asset-box { display: flex; flex: 0 0 50%; flex-direction: row; margin: 0 auto; max-width: 1200px; } .contents .asset-box .ss-img { margin-right: 4%; max-width: 660px; } .contents .asset-box .ss-img img { width: 100%; } .contents .asset-box .asset-box-text { width: calc(100% - 50%); } }