"); background-repeat: no-repeat; background-size: contain; font-size: 0px; text-indent: 100%; overflow: hidden; } #toppage .heroSec__staticBnr { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #toppage .heroSec__staticBnr .basicBtnFrame__inFrame { padding: 0.666667vw 1.2vw; } #toppage .heroSec .reserveBnr { position: relative; } #toppage .heroSec .reserveBnr__inner { background-color: rgb(0, 0, 0); padding-bottom: 1.88679%; } #toppage .heroSec .reserveBnr__ttl { position: relative; } #toppage .heroSec .reserveBnr__ttl::before, #toppage .heroSec .reserveBnr__ttl::after { content: ""; display: block; position: absolute; inset: 0px; } #toppage .heroSec .reserveBnr__ttl::before { background-image: repeating-linear-gradient(90deg, rgba(192, 0, 0, 0.18), rgba(192, 0, 0, 0.6) 40%, rgba(192, 0, 0, 0.6) 60%, rgba(192, 0, 0, 0.18)); } #toppage .heroSec .reserveBnr__ttl::after { background-image: repeating-linear-gradient(0deg, rgb(192, 0, 0), rgb(192, 0, 0) 1px, transparent 1px, transparent 3px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0.1)); } #toppage .heroSec .reserveBnr__ttl img { position: relative; z-index: 1; } #toppage .heroSec .reserveBnr__btnList { position: relative; width: 100%; display: flex; justify-content: center; column-gap: calc(.0133333333 * (100vw - var(--scrollbarW))); } #toppage .heroSec .reserveBnr__btnList li { width: 44.0252%; } #toppage .heroSec__pickupBnr { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #toppage .heroSec__award { position: relative; margin-inline: auto; margin-top: 2.66667%; padding-bottom: 4%; } #toppage .heroSec .awardBlock__conts { display: block; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 70%, transparent); } #toppage .heroSec .awardBlock__conts.--active { mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%, transparent); } #toppage .heroSec .awardBlock__btn { display: block; position: absolute; bottom: 2.66667vw; left: 0px; width: 100%; padding: 2.66667vw; border: none; outline: none; appearance: none; background: none; font-size: 0px; cursor: pointer; } #toppage .heroSec .awardBlock__btnImg { display: block; width: 9.33333vw; height: 2.66667vw; margin-inline: auto; background-color: rgb(67, 155, 181); clip-path: polygon(0% 0%, 50% 70%, 100% 0%, 100% 30%, 50% 100%, 0% 30%); } #toppage .heroSec .awardBlock__btn.--active { transform: scale(-1); } @media screen and (min-width: 769px) { #toppage .heroSec { background-color: rgb(0, 0, 0); padding-bottom: 0%; } #toppage .heroSec__visual { width: 100%; height: 100%; } #toppage .heroSec__logo { width: 31.3542%; margin-top: 4.42708%; } #toppage .heroSec__release { width: 26.0938%; margin-top: -0.104167%; margin-right: 6.61458%; } #toppage .heroSec__availablenow { width: 22.0312%; margin-top: -0.572917%; margin-right: 8.69792%; } #toppage .heroSec__buyBtn { width: 25.5208%; margin-top: 0.416667%; margin-right: 6.77083%; } #toppage .heroSec__buyBtn a { padding: 0.6em; font-size: 0.9375vw; transition: transform 0.23s ease 0s; } #toppage .heroSec__buyBtn a:hover { transform: scale(1.1); } #toppage .heroSec__xBtn { width: 2.60417vw; height: 2.60417vw; position: absolute; left: 5.20833%; top: calc(.4739583333 * (100vw - var(--scrollbarW))); margin: 0px; } #toppage .heroSec__xBtn.--noPB { top: 53.6458vw; } #toppage .heroSec__xBtn a { transition: transform 0.23s ease 0s; } #toppage .heroSec__xBtn a:hover { transform: scale(1.3); } #toppage .heroSec__staticBnr { width: 28.6458%; margin-top: 1.5625%; margin-right: 5.20833%; } #toppage .heroSec__staticBnr .basicBtnFrame__inFrame { padding: .2604166667vw calc(.0052083333 * (100vw - var(--scrollbarW))); } #toppage .heroSec .reserveBnr__inner { padding-bottom: 1.86567%; } #toppage .heroSec .reserveBnr__btnList { column-gap: calc(.0083333333 * (100vw - var(--scrollbarW))); } #toppage .heroSec .reserveBnr__btnList li { width: auto; } #toppage .heroSec__pickupBnr { width: 89.5833%; margin-top: 1.04167%; min-height: 5.57292vw; } #toppage .heroSec__pickupBnr.--noPB { visibility: hidden; pointer-events: none; } #toppage .heroSec__pickupBnr > ul.--less li:first-child { margin-left: auto; } #toppage .heroSec__pickupBnr > ul.--less li:last-child { margin-right: 0px !important; } #toppage .heroSec__award { width: 100%; margin-top: 1.04167%; padding-bottom: 3.125%; } #toppage .heroSec .awardBlock__conts img { width: 100%; } #toppage .heroSec .awardBlock__btn { bottom: 1.04167vw; padding: 1.04167vw; } #toppage .heroSec .awardBlock__btnImg { width: 3.54167vw; height: 0.885417vw; transition: transform 0.2s ease 0s; } #toppage .heroSec .awardBlock__btn:hover .awardBlock__btnImg { transform: scale(1.4); } } #toppage .latestSec { position: relative; background-color: rgb(0, 30, 40); background-image: url(""); background-position: center top; background-size: cover; padding-bottom: 9.33333%; } #toppage .latestSec::after { content: ""; display: block; width: 100%; height: 1px; background-color: rgb(0, 71, 112); position: absolute; left: 0px; bottom: 1.33333vw; } #toppage .latestSec__newsList { width: 86.6667%; margin-inline: auto; margin-top: 6.66667%; } #toppage .latestSec__newsList > ul > li { position: relative; } #toppage .latestSec__newsList > ul > li + li { margin-top: 3.07692%; border-top: 1px solid rgba(38, 141, 172, 0.5); padding-top: 3.07692%; } #toppage .latestSec__videoList { width: 86.6667%; margin-inline: auto; margin-top: 8%; } #toppage .latestSec__videoList a { display: block; text-decoration: none; } #toppage .latestSec__videoList.swiperCustom .--baseControl::after { align-self: flex-start; margin-top: 20vw; } #toppage .latestSec__btnBlock { position: relative; border-top: 2px solid rgb(0, 0, 0); margin-top: 2.66667%; text-align: right; } #toppage .latestSec__btnBlock a { display: inline-flex; justify-content: center; align-items: center; column-gap: 1.33333vw; position: relative; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); text-decoration: none; font-size: 2.93333vw; padding: 0.6em 6.66667%; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 9% 100%); } #toppage .latestSec__btnBlock a::before { content: ""; display: block; background: rgb(67, 155, 181); width: 1.6vw; height: 2.4vw; clip-path: polygon(0% 0%, 30% 0%, 100% 50%, 30% 100%, 0% 100%, 70% 50%); } #toppage .latestSec .newsListItem { position: relative; text-decoration: none; color: rgb(255, 255, 255); display: grid; grid-template-columns: min-content; gap: calc(.0133333333 * (100vw - var(--scrollbarW))); } #toppage .latestSec .newsListItem__category { width: 17.3333vw; position: relative; } #toppage .latestSec .newsListItem__category::before, #toppage .latestSec .newsListItem__category::after { content: ""; display: block; position: absolute; top: 0px; width: 3.84615%; height: 100%; border-width: 1px 0.4vw; border-style: solid; border-color: rgba(255, 255, 255, 0.3); border-image: initial; } #toppage .latestSec .newsListItem__category::before { left: 0px; border-right: none; } #toppage .latestSec .newsListItem__category::after { right: 0px; border-left: none; } #toppage .latestSec .newsListItem__category img { display: block; } #toppage .latestSec .newsListItem[data-category="information"] .newsListItem__category { background-color: rgb(147, 0, 38); } #toppage .latestSec .newsListItem[data-category="campaign"] .newsListItem__category { background-color: rgb(185, 95, 0); } #toppage .latestSec .newsListItem[data-category="movie"] .newsListItem__category { background-color: rgb(32, 124, 0); } #toppage .latestSec .newsListItem__date { display: flex; align-items: center; color: rgb(0, 192, 232); font-size: 2.4vw; line-height: 1; } #toppage .latestSec .newsListItem__text { grid-column: span 2 / span 2; grid-row-start: 2; font-size: 2.66667vw; line-height: 1.51; padding-bottom: 1.53846%; } #toppage .latestSec .newsListItem__platform { grid-column: span 2 / span 2; grid-row-start: 3; display: flex; justify-content: flex-end; column-gap: 2.46154%; } #toppage .latestSec .newsListItem .newsPlatform { display: block; position: relative; width: 23.0769%; background-color: rgba(8, 34, 46, 0.8); } #toppage .latestSec .newsListItem .newsPlatform::before, #toppage .latestSec .newsListItem .newsPlatform::after { content: ""; display: block; position: absolute; inset: 0px; } #toppage .latestSec .newsListItem .newsPlatform::before { border: 1px solid rgb(0, 0, 0); } #toppage .latestSec .newsListItem .newsPlatform::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.3; } #toppage .latestSec .newsListItem .newsPlatform.--sw2::before { border-color: rgb(132, 0, 0); } #toppage .latestSec .newsListItem .newsPlatform.--xboxwin::before { border-color: rgb(16, 124, 15); } #toppage .latestSec .newsListItem .newsPlatform.--ps5::before { border-color: rgb(0, 130, 191); } #toppage .latestSec .newsListItem .newsPlatform.--pc::before { border-color: rgb(100, 113, 163); } #toppage .latestSec .newsListItem .newsPlatform img { display: block; } @media screen and (min-width: 769px) { #toppage .latestSec { background-image: url(""); padding-bottom: 3.125%; } #toppage .latestSec::after { bottom: 0.520833vw; } #toppage .latestSec__newsList { width: 89.5833%; margin-top: 2.60417%; } #toppage .latestSec__newsList > ul > li + li { margin-top: 1.16279%; padding-top: 1.16279%; } #toppage .latestSec__videoList { width: 89.5833%; margin-top: 3.125%; } #toppage .latestSec__videoList.swiperCustom .--baseControl::after { align-self: flex-start; margin-top: 5.72917vw; } #toppage .latestSec__btnBlock { margin-top: 1.04167%; } #toppage .latestSec__btnBlock a { column-gap: 0.520833vw; font-size: 0.9375vw; padding: 0.6em 5.20833% 0.6em 1.82292%; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 9% 100%); transition: background-color 0.23s ease 0s, color 0.23s ease 0s, padding-right 0.23s ease 0s; } #toppage .latestSec__btnBlock a::before { width: 0.520833vw; height: 0.833333vw; } #toppage .latestSec__btnBlock a:hover { background-color: rgb(67, 155, 181); color: rgb(0, 0, 0); padding-right: 6.25%; } #toppage .latestSec__btnBlock a:hover::before { background-color: rgb(0, 0, 0); } #toppage .latestSec .newsListItem { gap: calc(.0052083333 * (100vw - var(--scrollbarW))); transition: color 0.23s ease 0s; } #toppage .latestSec .newsListItem__category { width: 6.77083vw; } #toppage .latestSec .newsListItem__category::before, #toppage .latestSec .newsListItem__category::after { border-left-width: 0.15625vw; border-right-width: 0.15625vw; } #toppage .latestSec .newsListItem__category img { width: 89.2308%; margin-inline: auto; } #toppage .latestSec .newsListItem__date { grid-column: span 2 / span 2; font-size: 0.9375vw; } #toppage .latestSec .newsListItem__text { grid-column: span 2 / span 2; grid-row-start: 2; font-size: 0.9375vw; padding-bottom: 0px; } #toppage .latestSec .newsListItem__platform { grid-column-start: 3; grid-row-start: 2; display: inline-flex; align-items: flex-start; column-gap: 0.260417vw; } #toppage .latestSec .newsListItem .newsPlatform { display: block; position: relative; width: 4.79167vw; } #toppage .latestSec .newsListItem:hover { color: rgb(166, 223, 250); } #toppage .latestSec .newsListItem:hover .newsListItem__text { text-decoration: underline; } } #toppage .mainStorySec { position: relative; overflow: hidden; } #toppage .mainStorySec__bgVideo { position: absolute; inset: 0px; } #toppage .mainStorySec__videoWrap { position: relative; width: 100%; height: 100%; } #toppage .mainStorySec__videoWrap::after { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 70%; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7) 100%); } #toppage .mainStorySec__videoWrap video { object-fit: cover; width: 100%; height: 100%; pointer-events: none; } #toppage .mainStorySec__hdg { position: relative; margin-inline: auto; } #toppage .mainStorySec__textBlock { position: relative; width: 100%; margin-inline: auto; margin-top: 62.9333%; padding-bottom: 6.13333%; } #toppage .mainStorySec__keywordBtnList { position: absolute; inset: 0px; } #toppage .mainStorySec__keywordBtnList li { position: absolute; top: 0px; left: 50%; height: 4.66667vw; cursor: pointer; } #toppage .mainStorySec__keywordBtnList li::before { content: ""; display: block; position: absolute; left: 0px; bottom: 0px; background-color: red; width: 100%; min-height: 3px; height: 0.4vw; transition: height 0.13s ease 0s; } #toppage .mainStorySec__keywordBtnList li.--active::before { height: 100%; } #toppage .mainStorySec__keywordBtnList li span { display: block; overflow: hidden; white-space: nowrap; text-indent: 100%; } #toppage .mainStorySec__keywordBtnList .--kw1 { margin-top: -0.8%; margin-left: 5.46667%; width: 24.2667%; } #toppage .mainStorySec__keywordBtnList .--kw2 { margin-top: 5.06667%; margin-left: 26.2667%; width: 18%; } #toppage .mainStorySec__keywordBtnList .--kw3 { margin-top: 10.9333%; margin-left: -24.8%; width: 14.9333%; } #toppage .mainStorySec__keywordBtnList .--kw4 { margin-top: 16.5333%; margin-left: -22.1333%; width: 33.6%; } #toppage .mainStorySec__text { position: relative; width: 100%; margin-inline: auto; pointer-events: none; } #toppage .mainStorySec__keywordList { position: absolute; top: 0px; left: 50%; width: 86.6667%; margin-top: 56%; transform: translate(-50%); } #toppage .mainStorySec__keywordList li { position: absolute; top: 0px; left: 0px; width: 100%; pointer-events: none; opacity: 0; transform: scale(0.97); transition: all 0.23s ease 0s; } #toppage .mainStorySec__keywordList li.--active { opacity: 1; transform: scale(1); pointer-events: all; } @media screen and (min-width: 769px) { #toppage .mainStorySec__videoWrap::after { height: 30%; } #toppage .mainStorySec__hdg { width: 70.8333%; } #toppage .mainStorySec__textBlock { margin-top: 36.1979%; padding-bottom: 2.86458%; } #toppage .mainStorySec__keywordBtnList li { height: 2.39583vw; } #toppage .mainStorySec__keywordBtnList li::before { height: 0.260417vw; } #toppage .mainStorySec__keywordBtnList .--kw1 { margin-top: -0.3125%; margin-left: 3.07292%; width: 13.2292%; } #toppage .mainStorySec__keywordBtnList .--kw2 { margin-top: 2.34375%; margin-left: 14.375%; width: 9.63542%; } #toppage .mainStorySec__keywordBtnList .--kw3 { margin-top: 5.05208%; margin-left: -26.25%; width: 8.17708%; } #toppage .mainStorySec__keywordBtnList .--kw4 { margin-top: 5.05208%; margin-left: 9.0625%; width: 18.2292%; } #toppage .mainStorySec__text { width: 67.0833%; } #toppage .mainStorySec__keywordList { width: 44.7917%; margin-top: 34.3229%; } } #toppage .sephirothSec { position: relative; padding-top: 71.3333%; padding-bottom: 5.33333%; overflow: hidden; } #toppage .sephirothSec__bgVideo { position: absolute; inset: 0px; } #toppage .sephirothSec__videoWrap { position: relative; width: 100%; height: 100%; } #toppage .sephirothSec__videoWrap::after { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50%; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%); } #toppage .sephirothSec__videoWrap video { object-fit: cover; width: 100%; height: 100%; pointer-events: none; } #toppage .sephirothSec__copy { position: relative; margin-inline: auto; } #toppage .sephirothSec__copy img { position: relative; } #toppage .sephirothSec__copy .name { position: absolute; top: 0px; left: 50%; margin-left: -20.1333%; margin-top: -8.93333%; width: 40.2667%; } @media screen and (min-width: 769px) { #toppage .sephirothSec { padding-top: 39.7917%; padding-bottom: 2.86458%; } #toppage .sephirothSec__videoWrap::after { height: 60%; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); background-position: left 50% top 0%; background-size: 100% 200%; background-repeat: no-repeat; } #toppage .sephirothSec__copy { text-align: center; } #toppage .sephirothSec__copy .name { margin-left: -9.42708%; margin-top: -3.80208%; width: 18.8542%; } #toppage .sephirothSec__copy .copy { width: 41.8229%; } } #toppage .aboutSec { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 8%; } #toppage .aboutSec__hdg { width: 56.2667%; margin-inline: auto; } #toppage .aboutSec__hdg img { mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 300% 100%; display: block; mask-repeat: no-repeat; mask-position: 0% 0%; } #toppage .aboutSec__lead { width: 100%; margin-inline: auto; margin-top: 4.66667%; } #toppage .aboutSec__list { width: 86.6667%; margin-inline: auto; margin-top: 5.2%; display: flex; justify-content: space-between; } #toppage .aboutSec__list li { width: 30.7692%; } #toppage .aboutSec__btnBlock { margin-top: 8%; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100% 100%; padding-top: 4.93333%; padding-bottom: 5.33333%; display: flex; justify-content: center; align-items: center; min-height: calc(.1746666667 * (100vw - var(--scrollbarW))); } @media screen and (min-width: 769px) { #toppage .aboutSec { background-color: rgb(3, 10, 1); background-image: url(""); padding-top: 4.0625%; border-bottom-width: 2px; } #toppage .aboutSec__hdg { width: 51.875%; } #toppage .aboutSec__lead { width: 35.9375%; margin-top: 2.13542%; } #toppage .aboutSec__list { width: 89.5833%; margin-top: 2.08333%; justify-content: center; gap: 0px 1.5625%; } #toppage .aboutSec__list li { width: 24.4186%; } #toppage .aboutSec__btnBlock { margin-top: 2.08333%; background-image: url(""); padding-top: 1.92708%; padding-bottom: 1.45833%; min-height: calc(.0619791667 * (100vw - var(--scrollbarW))); } } #toppage .characterSec { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-bottom: 10.6667%; } #toppage .characterSec__list { position: relative; margin-top: 5.46667%; display: flex; flex-wrap: wrap; } #toppage .characterSec__list li { position: relative; width: 33.3333%; cursor: pointer; } #toppage .characterSec__list li a { position: relative; display: block; } #toppage .characterSec__list li img { position: relative; z-index: 0; } #toppage .characterSec__list li::before, #toppage .characterSec__list li::after { content: ""; position: absolute; pointer-events: none; } #toppage .characterSec__list li::before { inset: 0px; background-image: url(""); background-position: center bottom; background-repeat: no-repeat; background-size: 100%; z-index: 1; } #toppage .characterSec__list li::after { inset: 0.4vw; border: 1px solid rgba(67, 155, 181, 0.5); z-index: 3; pointer-events: none; } #toppage .characterSec__list li span { font-family: "M PLUS 1p"; font-weight: 400; width: 100%; position: absolute; left: 0px; bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 4vw; letter-spacing: -0.05em; text-shadow: rgb(0, 0, 0) 0px 0px 4px, rgb(0, 0, 0) 1px 1px 2px; margin-bottom: 1em; z-index: 2; } #toppage .characterSec__btnList { width: 86.6667%; margin-inline: auto; margin-top: 4%; display: flex; justify-content: space-between; } #toppage .characterSec__btnList li { width: 46.1538%; } #toppage .characterSec__btnList li .btnMore { min-width: 100%; } #toppage .characterSec__btnList li p { font-size: 2.4vw; line-height: 1.41; text-align: center; margin-top: 0.25em; } @media screen and (min-width: 769px) { #toppage .characterSec { background-image: url(""); padding-bottom: 3.125%; } #toppage .characterSec__list { flex-wrap: nowrap; margin-top: 1.875%; } #toppage .characterSec__list li { width: 11.1111%; overflow: hidden; } #toppage .characterSec__list li img { transition: transform 0.23s ease 0s, filter 0.23s ease 0s; } #toppage .characterSec__list li::before { background-image: url(""); } #toppage .characterSec__list li::after { inset: 0.260417vw; } #toppage .characterSec__list li span { font-size: 1.5625vw; } #toppage .characterSec__list li span.adj { letter-spacing: -0.1em; } #toppage .characterSec__list li:hover img { transform: scale(1.1); filter: brightness(110%); } #toppage .characterSec__list:hover img { filter: brightness(50%); } #toppage .characterSec__btnList { width: 89.5833%; margin-top: 1.30208%; justify-content: center; gap: 0px 1.5625%; } #toppage .characterSec__btnList li { width: 18.6047%; } #toppage .characterSec__btnList li p { font-size: 0.729167vw; text-align: left; letter-spacing: -0.05em; } } #toppage .worldSec { position: relative; background-color: rgb(2, 24, 41); padding-bottom: 10.6667%; overflow: hidden; } #toppage .worldSec .baseHdg { z-index: 2; } #toppage .worldSec .baseHdg::before { background-color: rgba(0, 0, 0, 0.75); } #toppage .worldSec__catchcopy { position: relative; z-index: 1; } #toppage .worldSec__visual { overflow: hidden; } #toppage .worldSec__visualArea { position: absolute; inset: 0px; z-index: 0; height: 129.867vw; } #toppage .worldSec__visual .swiper-slide { pointer-events: none; } #toppage .worldSec__visual .--baseControl { align-items: flex-start; } #toppage .worldSec__visual .--baseControl::before { content: ""; display: block; position: absolute; top: 0px; margin-top: 41.3333vw; width: 40vw; aspect-ratio: 1 / 2; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); background-size: 100% 100%; background-repeat: no-repeat; } #toppage .worldSec__visual .--baseControl::after { margin-top: calc(.7466666667 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-prev { right: 86.6667%; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::before { right: 0px; margin-right: -6.66667vw; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::after { margin-right: calc(.084 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-next { left: 86.6667%; } #toppage .worldSec__visual .--baseControl.swiper-button-next::before { left: 0px; margin-left: -6.66667vw; } #toppage .worldSec__visual .--baseControl.swiper-button-next::after { margin-left: calc(.084 * (100vw - var(--scrollbarW))); } #toppage .worldSec__list { position: relative; z-index: 2; width: 86.6667%; margin-inline: auto; } #toppage .worldSec__list li { position: relative; } #toppage .worldSec__list.--step { margin-top: 84%; } #toppage .worldSec__list.--step li::before { content: ""; display: block; position: absolute; bottom: -8vw; left: 50%; width: 11.7333vw; height: 3.86667vw; margin-left: -5.86667vw; background-image: url(""); background-repeat: no-repeat; background-size: contain; } #toppage .worldSec__list.--step li + li { margin-top: 13.8462%; } #toppage .worldSec__list.--step li:last-of-type::before { display: none; } #toppage .worldSec__subhl { width: 90.7692%; position: absolute; top: -2.66667vw; left: 4vw; z-index: 1; } #toppage .worldSec__videoEmbed { position: relative; } @media screen and (min-width: 769px) { #toppage .worldSec { padding-bottom: 4.16667%; } #toppage .worldSec__catchcopy { width: 70.8333%; margin-inline: auto; } #toppage .worldSec__visualArea { height: 52.9167vw; } #toppage .worldSec__visual .--baseControl::before { margin-top: 10.9375vw; width: 15.625vw; aspect-ratio: 1 / 2; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); } #toppage .worldSec__visual .--baseControl::after { margin-top: calc(.2708333333 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-prev { right: 94.7917%; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::before { margin-right: -2.60417vw; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::after { margin-right: calc(.0276041667 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-next { left: 94.7917%; } #toppage .worldSec__visual .--baseControl.swiper-button-next::before { margin-left: -2.60417vw; } #toppage .worldSec__visual .--baseControl.swiper-button-next::after { margin-left: calc(.0276041667 * (100vw - var(--scrollbarW))); } #toppage .worldSec__list { width: 89.5833%; display: flex; justify-content: space-between; position: relative; } #toppage .worldSec__list.--step { margin-top: 27.3438%; z-index: 1; } #toppage .worldSec__list.--step li { width: 31.0465%; } #toppage .worldSec__list.--step li::before { top: 50%; left: inherit; right: 0%; width: 4.58333vw; height: 1.51042vw; margin-top: -0.78125vw; margin-left: 0px; margin-right: -3.85417vw; transform: rotate(-90deg); } #toppage .worldSec__list.--step li + li { margin-top: 0px; } #toppage .worldSec__list.--step .videoItem::before { background-size: 155.431%; } #toppage .worldSec__subhl { width: 25.7292vw; top: -1.5625vw; left: 1.04167vw; pointer-events: none; } } #toppage .systemSec { position: relative; background-color: rgb(38, 0, 3); background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; overflow: hidden; } #toppage .systemSec .baseHdg { position: absolute; z-index: 1; } #toppage .systemSec .baseHdg::before { background-color: rgba(0, 0, 0, 0.7); } #toppage .systemSec__visual { position: relative; z-index: 0; } @media screen and (min-width: 769px) { #toppage .systemSec { background-image: url(""); } #toppage .systemSec .videoItem::before { content: ""; position: absolute; inset: 0px; background-image: url(""); background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 0.23s ease 0s; } #toppage .systemSec .videoItem:hover::before { opacity: 0; } #toppage .systemSec .videoItem::after { height: 50%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.7) 100%); } } #toppage .battleArea { position: relative; margin-top: -2.26667%; } #toppage .battleArea__header { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 7.2%; padding-bottom: 5.86667%; } #toppage .battleArea__hl { width: 49.8667%; margin-inline: auto; } #toppage .battleArea__lead { width: 100%; margin-inline: auto; margin-top: 4%; } #toppage .battleArea__list { width: 86.6667%; margin-inline: auto; position: relative; z-index: 2; } #toppage .battleArea__list li { position: relative; } #toppage .battleArea__list.--step { margin-top: 12%; } #toppage .battleArea__list.--step li + li { margin-top: 13.8462%; } #toppage .battleArea__list.--step li:last-of-type::before { display: none; } #toppage .battleArea__list.--list { margin-top: 14.4%; } #toppage .battleArea__list.--list li + li { margin-top: 9.69231%; } #toppage .battleArea__subhl { width: 90.7692%; position: absolute; top: -6.66667vw; left: 4vw; z-index: 1; } #toppage .battleArea__videoEmbed { position: relative; } #toppage .battleArea__copy { position: relative; z-index: 1; margin-top: -7.6%; } @media screen and (min-width: 769px) { #toppage .battleArea { position: relative; margin-top: -1.09375%; } #toppage .battleArea__header { background-image: url(""); padding-top: 3.4375%; padding-bottom: 1.14583%; } #toppage .battleArea__hl { width: 18.125%; } #toppage .battleArea__lead { width: 53.75%; margin-top: 0.9375%; } #toppage .battleArea__list { width: 89.5833%; display: flex; justify-content: space-between; position: relative; } #toppage .battleArea__list.--step { margin-top: 3.64583%; z-index: 1; } #toppage .battleArea__list.--step li { width: 48.2558%; } #toppage .battleArea__list.--step li + li { margin-top: 0px; } #toppage .battleArea__list.--list { margin-top: 4.16667%; justify-content: center; } #toppage .battleArea__list.--list li { width: 48.2558%; } #toppage .battleArea__list.--list li + li { margin-top: 0px; } #toppage .battleArea__subhl { width: 41.1458vw; top: -1.5625vw; left: 1.04167vw; pointer-events: none; } #toppage .battleArea__copy { width: 70.8333%; margin-inline: auto; margin-top: -2.5%; z-index: 0; } } #toppage .boostArea { position: relative; background-color: rgba(0, 0, 0, 0.5); margin-top: 9.33333%; padding-block: 8%; } #toppage .boostBlock { width: 92%; margin-inline: auto; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100% 100%; padding-block: 6.66667%; position: relative; } #toppage .boostBlock__hl { width: 84.058%; margin-inline: auto; } #toppage .boostBlock__videoWrap { position: relative; width: 84.058%; margin-inline: auto; margin-top: 4.92754%; } #toppage .boostBlock__videoEmbed.videoItem::after { display: none; } @media screen and (min-width: 769px) { #toppage .boostArea { margin-top: 4.16667%; padding-block: 4.16667%; border-top: 2px solid rgba(163, 13, 13, 0.5); } #toppage .boostBlock { width: 89.5833%; background-image: url(""); padding-block: 1.71875%; display: flex; justify-content: space-between; } #toppage .boostBlock__hl { width: 38.9535%; margin-inline: 0px; margin-top: 1.62791%; margin-left: 5.23256%; } #toppage .boostBlock__videoWrap { width: 41.8605%; margin-inline: 0px; margin-top: 0px; margin-right: 4.06977%; } #toppage .boostBlock__videoEmbed.videoItem::before { background-size: 115.278%; } } #toppage .byPlatformSec { position: relative; background-color: rgb(16, 16, 16); padding-bottom: 10.6667%; overflow: hidden; } #toppage .byPlatformSec .baseHdg { z-index: 2; } #toppage .byPlatformSec__wrapper { position: relative; width: 100%; margin-top: 3.2%; } #toppage .byPlatformSec__tabNav { background-color: rgba(0, 0, 0, 0.6); padding-top: 1.33333%; padding-bottom: 2.66667%; position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; } #toppage .byPlatformSec__tabNav nav { width: 86.6667%; margin-inline: auto; overflow: visible; } #toppage .byPlatformSec__tabNavBtn { display: block; position: relative; } #toppage .byPlatformSec__tabNavBtn::before { content: ""; display: block; width: 100%; height: clamp(2px, 0.533333vw, 4px); position: absolute; left: 0px; bottom: 0px; background-color: rgb(0, 0, 0); opacity: 0; transition: all 0.3s ease 0s; } #toppage .byPlatformSec__tabNavBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-color: rgb(255, 255, 255); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .byPlatformSec__tabNavBtn[data-pf="sw2"] { background-color: rgb(132, 0, 0); } #toppage .byPlatformSec__tabNavBtn[data-pf="sw2"]::before { background-color: rgb(132, 0, 0); } #toppage .byPlatformSec__tabNavBtn[data-pf="xbox"] { background-color: rgb(16, 124, 15); } #toppage .byPlatformSec__tabNavBtn[data-pf="xbox"]::before { background-color: rgb(16, 124, 15); } #toppage .byPlatformSec__tabNavBtn[data-pf="ps5"] { background-color: rgb(1, 63, 153); } #toppage .byPlatformSec__tabNavBtn[data-pf="ps5"]::before { background-color: rgb(1, 63, 153); } #toppage .byPlatformSec__tabNavBtn[data-pf="pc"] { background-color: rgb(62, 70, 100); } #toppage .byPlatformSec__tabNavBtn[data-pf="pc"]::before { background-color: rgb(62, 70, 100); } #toppage .byPlatformSec__tabNav .swiper-slide.swiper-slide-thumb-active .byPlatformSec__tabNavBtn::before { opacity: 1; bottom: -1.33333vw; } #toppage .byPlatformSec__pfList { position: relative; z-index: 1; } #toppage .byPlatformSec .platformBlock, #toppage .byPlatformSec .platformBlock__visual { position: relative; } #toppage .byPlatformSec .platformBlock__list { position: relative; margin-top: 5.33333%; } #toppage .byPlatformSec .platformBlock__list li + li { margin-top: 6.53333%; } #toppage .byPlatformSec .platformBlock .hardPic { display: block; margin-inline: auto; } #toppage .byPlatformSec .platformBlock.--sw2 .platformBlock__list { margin-top: -13.7333%; } #toppage .byPlatformSec .platformBlock.--sw2 .hardPic { width: 86.8%; margin-bottom: 3.6%; } #toppage .byPlatformSec .platformBlock.--xboxwin .platformBlock__list { margin-top: -9.46667%; } #toppage .byPlatformSec .platformBlock.--xboxwin .hardPic { width: 80.8%; margin-bottom: 2.66667%; } @media screen and (min-width: 769px) { #toppage .byPlatformSec { background-color: rgb(30, 26, 24); padding-bottom: 0px; } #toppage .byPlatformSec .baseHdg { position: absolute; top: 0px; left: 0px; } #toppage .byPlatformSec__wrapper { margin-top: 0px; padding-top: 1px; } #toppage .byPlatformSec__tabNav { padding-top: 0.46875%; padding-bottom: 0.46875%; margin-top: 6.25%; } #toppage .byPlatformSec__tabNav nav { width: 46.4583%; } #toppage .byPlatformSec__tabNavBtn { cursor: pointer; } #toppage .byPlatformSec__tabNavBtn::before { height: clamp(2px, 0.208333vw, 4px); } #toppage .byPlatformSec__tabNav .swiper-slide.swiper-slide-thumb-active .byPlatformSec__tabNavBtn::before { bottom: max(-.0067708333 * (100vw - var(--scrollbarW)),-13px); } #toppage .byPlatformSec__tabNav .swiper-slide:hover:not(.swiper-slide-thumb-active) .byPlatformSec__tabNavBtn::before { bottom: max(-.0067708333 * (100vw - var(--scrollbarW)),-13px); } #toppage .byPlatformSec__tabNav .swiper-slide:hover:not(.swiper-slide-thumb-active) .byPlatformSec__tabNavBtn::after { opacity: 0.6; } #toppage .byPlatformSec .platformBlock__list { position: absolute; bottom: 0px; left: 3.64583%; width: 94.7917%; margin-top: 0px; margin-bottom: 2.70833%; display: flex; justify-content: space-between; } #toppage .byPlatformSec .platformBlock__list li { position: relative; width: 33.2967%; } #toppage .byPlatformSec .platformBlock__list li + li { margin-top: 0px; } #toppage .byPlatformSec .platformBlock .hardPic { position: absolute; top: 0px; left: 0px; margin-inline: 0px; } #toppage .byPlatformSec .platformBlock.--sw2 .platformBlock__list { margin-top: 0px; } #toppage .byPlatformSec .platformBlock.--sw2 .hardPic { width: 96.6997%; margin-bottom: 0px; margin-top: -45.3795%; margin-left: 1.65017%; } #toppage .byPlatformSec .platformBlock.--xboxwin .platformBlock__list { margin-top: 0px; } #toppage .byPlatformSec .platformBlock.--xboxwin .hardPic { width: 99.835%; margin-bottom: 0px; margin-top: -45.5446%; margin-left: 0px; } } #toppage .specSec { position: relative; background-color: rgb(0, 0, 0); padding-top: 10.6667%; padding-bottom: 16%; } #toppage .specSec__title { width: 74.2667%; margin-left: 5.46667%; } #toppage .specSec__specList { width: 86.6667%; margin-inline: auto; margin-top: 4%; display: flex; flex-direction: column; gap: min(4vw, 30px) 0px; font-size: 2.93333vw; color: rgb(255, 255, 255); } #toppage .specSec__specList dl { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; height: 100%; } #toppage .specSec__specList dt { display: flex; justify-content: center; align-items: center; background: rgb(22, 65, 93); width: 30.7692%; padding: 0.3em; line-height: 1.41; text-align: center; position: relative; } #toppage .specSec__specList dt::before, #toppage .specSec__specList dt::after { content: ""; display: block; position: absolute; top: 0px; width: 0.8vw; height: 100%; border-width: 1px 0.533333vw; border-style: solid; border-color: rgb(35, 96, 125); border-image: initial; } #toppage .specSec__specList dt::before { left: 0px; border-right: none; } #toppage .specSec__specList dt::after { right: 0px; border-left: none; } #toppage .specSec__specList dd { display: flex; align-items: center; width: 66.1538%; padding: 0.3em 0px; line-height: 1.61; font-feature-settings: "palt"; } #toppage .specSec__specList dd.--fs { font-size: 2.8vw; } #toppage .specSec__specList dd.--lang { flex-direction: column; } #toppage .specSec__specList dd.--lang p { line-height: 1.61; } #toppage .specSec__specList dd.--lang p + p { margin-top: 0.5em; } #toppage .specSec__specList dd .icon { color: rgb(38, 141, 172); margin-right: 0.25em; } #toppage .specSec__relatedArea { width: 86.6667%; margin-inline: auto; margin-top: 10.6667%; } #toppage .specSec__relatedArea dl + dl { margin-top: 5.38462%; } #toppage .specSec__relatedArea dl dt { color: rgb(255, 255, 255); font-family: "M PLUS 1p"; font-size: 2.93333vw; font-weight: 400; border-bottom: 1px solid rgb(38, 141, 172); padding-bottom: 0.3em; } #toppage .specSec__relatedArea dl dd { margin-top: 2.30769%; } #toppage .specSec__relatedArea dl dd ul { display: flex; justify-content: space-between; } #toppage .specSec__relatedArea dl dd li { width: 48%; } #toppage .specSec__relatedArea dl dd li a { display: block; } #toppage .specSec__relatedArea dl dd li p { font-family: "M PLUS 1p"; font-size: 2.4vw; font-weight: 300; margin-top: 0.5em; } #toppage .specSec__notes { width: 86.6667%; margin-inline: auto; margin-top: 4%; color: rgb(212, 212, 212); font-size: 2.4vw; font-weight: 300; font-feature-settings: "palt"; letter-spacing: 0.035em; } @media screen and (min-width: 769px) { #toppage .specSec { padding-top: 3.125%; padding-bottom: 6.25%; } #toppage .specSec__title { width: 29.0104%; margin-left: 4.84375%; } #toppage .specSec__specList { width: 89.5833%; margin-top: 2.08333%; gap: 0.78125vw 0px; font-size: 0.833333vw; } #toppage .specSec__specList dl { justify-content: start; gap: 0 min(.0052083333 * (100vw - var(--scrollbarW)),10px); } #toppage .specSec__specList dt { min-width: 6.25vw; width: 6.25vw; white-space: nowrap; padding: 0.3em 1em; } #toppage .specSec__specList dt::before, #toppage .specSec__specList dt::after { width: 0.3125vw; border-left-width: 0.208333vw; border-right-width: 0.208333vw; } #toppage .specSec__specList dd { flex-wrap: wrap; width: auto; padding: 0.3em 0px; letter-spacing: 0.05em; } #toppage .specSec__specList dd.--fs { font-size: 0.833333vw; letter-spacing: 0.05em; } #toppage .specSec__specList dd.--lang { flex-direction: row; } #toppage .specSec__specList dd.--lang p + p { margin-top: 0.5em; } #toppage .specSec__relatedArea { width: 89.5833%; margin-top: 4.16667%; display: flex; justify-content: space-between; } #toppage .specSec__relatedArea dl { width: 49.4186%; } #toppage .specSec__relatedArea dl + dl { margin-top: 0px; } #toppage .specSec__relatedArea dl dt { font-size: 0.9375vw; } #toppage .specSec__relatedArea dl dd { margin-top: 0.697674%; } #toppage .specSec__relatedArea dl dd li { width: 48.4706%; } #toppage .specSec__relatedArea dl dd li p { font-size: 0.729167vw; } #toppage .specSec__notes { width: 89.5833%; margin-top: 1.5625%; font-size: 0.729167vw; } } #toppage .linkBtn { position: relative; display: block; } #toppage .linkBtn span { display: block; text-indent: 200vw; white-space: nowrap; position: relative; width: 100%; height: 100%; } #toppage .linkBtn::before, #toppage .linkBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100%; } #toppage .linkBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .linkBtn.--heroReserveBnrSw2 { width: calc(.3733333333 * (100vw - var(--scrollbarW))); height: calc(.0906666667 * (100vw - var(--scrollbarW))); } #toppage .linkBtn.--heroReserveBnrSw2::before, #toppage .linkBtn.--heroReserveBnrSw2::after { background-image: url(""); } #toppage .linkBtn.--heroReserveBnrXboxwin { width: calc(.3733333333 * (100vw - var(--scrollbarW))); height: calc(.0906666667 * (100vw - var(--scrollbarW))); } #toppage .linkBtn.--heroReserveBnrXboxwin::before, #toppage .linkBtn.--heroReserveBnrXboxwin::after { background-image: url(""); } @media screen and (min-width: 769px) { #toppage .linkBtn { transition: transform 0.23s ease 0s; } #toppage .linkBtn:hover { transform: scale(1.1); z-index: 10; } #toppage .linkBtn:hover::after { opacity: 1; } #toppage .linkBtn.--heroReserveBnrSw2, #toppage .linkBtn.--heroReserveBnrXboxwin { width: calc(.1229166667 * (100vw - var(--scrollbarW))); height: calc(.0296875 * (100vw - var(--scrollbarW))); } } #toppage .videoItem { position: relative; background-color: rgb(0, 0, 0); z-index: 0; width: 100%; aspect-ratio: 16 / 9; } #toppage .videoItem::after { content: ""; display: block; position: absolute; inset: 0px; height: 80%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.5) 100%); } #toppage .videoItem video { width: 100%; height: auto; aspect-ratio: 16 / 9; pointer-events: none; } @media screen and (min-width: 769px) { #toppage .videoItem::before { content: ""; position: absolute; inset: 0px; background-image: url(""); background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 0.23s ease 0s; } #toppage .videoItem:hover::before { opacity: 0; } #toppage .videoItem::after { height: 50%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.7) 100%); } } #toppage .productsSec { position: relative; background-color: rgb(5, 30, 31); background-image: url(""), url(""); background-position: center top; background-repeat: no-repeat, repeat; background-size: 100%; padding-bottom: 18.4615%; } #toppage .productsSec__tabArea { margin-top: 8.93333%; } #toppage .productsSec__tabArea h3 { position: relative; } #toppage .productsSec__tabArea h3::before { content: ""; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; background-color: rgb(23, 64, 74); } #toppage .productsSec__tabArea h3:nth-of-type(n+2) { margin-top: 5.33333%; } #toppage .productsSec__tabArea h3 img { display: block; width: 48%; margin-inline: auto; position: relative; } #toppage .productsSec__listArea { margin-top: 8%; } #toppage .productsTab { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 4%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(.04 * (100vw - var(--scrollbarW))); } #toppage .productsTab .productsBtn { position: relative; z-index: 0; } #toppage .productsTab .productsBtn::before, #toppage .productsTab .productsBtn::after { content: ""; display: block; position: absolute; inset: 0px; z-index: -1; background-position: center top; background-repeat: no-repeat; background-size: 100%; } #toppage .productsTab .productsBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .productsTab .productsBtn.--current::after { opacity: 1; } #toppage .productsTab[data-tablist="pf"] .productsBtn { width: calc(.4133333333 * (100vw - var(--scrollbarW))); } #toppage .productsTab[data-tablist="pf"] .productsBtn::before, #toppage .productsTab[data-tablist="pf"] .productsBtn::after { background-image: url(""); } #toppage .productsTab[data-tablist="edition"] { flex-direction: column; } #toppage .productsTab[data-tablist="edition"] .productsBtn { display: inline-flex; width: 100%; margin-bottom: auto; } #toppage .productsTab[data-tablist="edition"] .productsBtn::before, #toppage .productsTab[data-tablist="edition"] .productsBtn::after { background-image: url(""); } #toppage .productsList { width: 86.6667%; margin-inline: auto; } #toppage .productsBlock, #toppage .productsItem { position: relative; } #toppage .productsItem + .productsItem { margin-top: 16%; } #toppage .productsItem__firsttime { position: relative; margin-bottom: 4.61538%; } #toppage .productsItem__visual { position: relative; } #toppage .productsItem__price { margin-top: 6.15385%; display: flex; flex-wrap: wrap; align-items: baseline; font-feature-settings: "palt"; letter-spacing: 0.035em; } #toppage .productsItem__price > span { font-size: 2.93333vw; font-weight: 300; } #toppage .productsItem__price > strong { font-size: 6.93333vw; font-weight: 500; margin-left: auto; } #toppage .productsItem__price > hr { width: 100%; border-top-color: rgb(100, 100, 100); margin-top: 0.8em; margin-bottom: 0px; } #toppage .productsItem__priceAnnounce { width: 100%; background-color: rgb(132, 0, 12); clip-path: polygon(0% 50%, 1.5% 0%, 98.5% 0%, 100% 50%, 98.5% 100%, 1.5% 100%); padding: 0.3em 0.2em; margin-bottom: 1em; text-align: center; font-size: 2.93333vw; line-height: 1.61; font-weight: 400; } #toppage .productsItem__priceAnnounce strong { font-size: 5.33333vw; font-weight: 500; line-height: 0.8em; } #toppage .productsItem__priceNotes { width: 100%; font-size: 2.93333vw; font-weight: 300; letter-spacing: -0.025em; text-align: left; color: rgb(180, 180, 180); margin-top: 0.5em; margin-bottom: 1em; } #toppage .productsItem__priceNotes li { text-indent: -1em; padding-left: 1em; line-height: 1.21; } #toppage .productsItem__priceNotes li + li { margin-top: 0.25em; } #toppage .productsItem__btnList { margin-top: 3.07692%; } #toppage .productsItem__btnList li { width: 61.5385%; margin-inline: auto; } #toppage .productsItem__btnList li + li { margin-top: 4.61538%; } #toppage .productsItem .pcLine { display: none; } #toppage .productsItem__notesBlock { margin-top: 4.61538%; } #toppage .productsItem__notesBlock > li { font-size: 2.93333vw; font-weight: 300; font-feature-settings: "palt"; line-height: 1.61; color: rgb(180, 180, 180); text-indent: -1em; padding-left: 1em; } #toppage .productsItem__notesBlock > li + li { margin-top: 0.3em; } #toppage .productsItem__notesBlock > li a { color: rgb(255, 62, 62); } #toppage .productsItem__reservAnnouncement { margin-top: 18.4615%; } #toppage .productsItem__reservAnnouncement + .productsItem__shopBlock { margin-top: 6.15385%; } #toppage .productsItem__shopBlock { margin-top: 12.3077%; } #toppage .productsItem__shopBlock li + li { margin-top: 6.15385%; } #toppage .productsItem .shopBonus { position: relative; } #toppage .productsItem .shopBonus__btn { position: absolute; left: 50%; bottom: 0px; margin-left: -30.7692%; margin-bottom: 3.07692%; } #toppage .productsItem__saveBlock { margin-top: 10.7692%; } #toppage .productsItem__saveBlock > li + li { margin-top: 9.23077%; } #toppage .productsItem__saveBlock .productsItem__notesBlock { margin-top: 0.7em; } #toppage .productsItem__trialBlock { margin-top: 15.3846%; } #toppage .productsItem__trialBlock .trialBonus, #toppage .productsItem__trialBlock .trialBonus__item { position: relative; } #toppage .productsItem__trialBlock .trialBonus__btn { position: absolute; left: 50%; bottom: 0px; margin-left: -23.0769%; margin-bottom: 5.07692%; } #toppage .productsItem__trialBlock .productsItem__notesBlock { margin-top: 0.7em; } #toppage .productsItem .buyBtn { position: relative; display: inline-block; width: calc(.5333333333 * (100vw - var(--scrollbarW))); height: calc(.1066666667 * (100vw - var(--scrollbarW))); } #toppage .productsItem .buyBtn span { display: block; text-indent: 200vw; white-space: nowrap; position: relative; width: 100%; height: 100%; } #toppage .productsItem .buyBtn::before, #toppage .productsItem .buyBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100%; } #toppage .productsItem .buyBtn.--estore::before { background-image: url(""); } #toppage .productsItem .buyBtn.--amazon::before { background-image: url(""); } #toppage .productsItem .buyBtn.--familymart::before { background-image: url(""); } #toppage .productsItem .buyBtn.--nintendo::before { background-image: url(""); } #toppage .productsItem .buyBtn.--psstore::before { background-image: url(""); } #toppage .productsItem .buyBtn.--trialPS5 { width: calc(.4 * (100vw - var(--scrollbarW))); height: calc(.08 * (100vw - var(--scrollbarW))); } #toppage .productsItem .buyBtn.--trialPS5::before { background-image: url(""); } #toppage .productsItem .buyBtn.--microsoft::before { background-image: url(""); } #toppage .productsItem .buyBtn.--epic::before { background-image: url(""); } #toppage .productsItem .buyBtn.--steam::before { background-image: url(""); } #toppage [data-id="sw2-standard-pkg"] .productsItem__visual a { display: block; position: absolute; left: 0px; bottom: 0px; width: 84.6154%; margin-left: 7.69231%; margin-bottom: 5.53846%; } @media screen and (min-width: 769px) { #toppage .productsSec { background-image: url(""), url(""); background-size: 100%, 50%; padding-bottom: 6.25%; } #toppage .productsSec__tabArea { margin-top: 2.86458%; } #toppage .productsSec__tabArea h3:nth-of-type(n+2) { margin-top: 2.39583%; } #toppage .productsSec__tabArea h3 img { width: 15.1042%; } #toppage .productsSec__listArea { margin-top: 2.60417%; } #toppage .productsTab { width: 89.5833%; margin-top: 1.25%; justify-content: center; gap: calc(.0130208333 * (100vw - var(--scrollbarW))) calc(.0104166667 * (100vw - var(--scrollbarW))); } #toppage .productsTab .productsBtn { cursor: pointer; } #toppage .productsTab .productsBtn span { width: 100%; } #toppage .productsTab .productsBtn:not(.--current):hover::after { opacity: 1; } #toppage .productsTab[data-tablist="pf"] .productsBtn { width: calc(.1708333333 * (100vw - var(--scrollbarW))); } #toppage .productsTab[data-tablist="pf"] .productsBtn::before, #toppage .productsTab[data-tablist="pf"] .productsBtn::after { background-image: url(""); } #toppage .productsTab[data-tablist="edition"] { flex-direction: row; } #toppage .productsTab[data-tablist="edition"] .productsBtn { width: calc(.1708333333 * (100vw - var(--scrollbarW))); } #toppage .productsTab[data-tablist="edition"] .productsBtn::before, #toppage .productsTab[data-tablist="edition"] .productsBtn::after { background-image: url(""); } #toppage .productsList { width: 100%; } #toppage .productsBlock { width: 89.5833%; margin-inline: auto; } #toppage .productsItem { display: grid; grid-template-columns: 1fr auto; } #toppage .productsItem + .productsItem { margin-top: 4.16667%; } #toppage .productsItem__firsttime { grid-column: span 2 / span 2; width: 43.2558%; margin-inline: auto; margin-bottom: 1.74419%; } #toppage .productsItem__visual { grid-column: span 2 / span 2; } #toppage .productsItem__price { width: calc(.15625 * (100vw - var(--scrollbarW))); margin-top: calc(.0182291667 * (100vw - var(--scrollbarW))); margin-left: auto; grid-column-start: 2; justify-content: flex-end; height: fit-content; } #toppage .productsItem__price span { font-size: 0.78125vw; font-weight: 400; } #toppage .productsItem__price strong { font-size: 2.1875vw; } #toppage .productsItem__priceAnnounce { width: fit-content; clip-path: polygon(0% 50%, 0.581395vw 0%, calc(100% - 0.581395vw) 0%, 100% 50%, calc(100% - 0.581395vw) 100%, 0.581395vw 100%); padding: 0.5em 1em 0.4em; font-size: 0.9375vw; letter-spacing: 0.025em; white-space: nowrap; text-align: center; } #toppage .productsItem__priceAnnounce strong { font-size: 1.875vw; } #toppage .productsItem__priceNotes { width: 100%; font-size: 0.677083vw; letter-spacing: 0.025em; white-space: nowrap; text-align: right; margin-bottom: -0.5em; position: relative; } #toppage .productsItem__priceNotes li { width: 200%; position: relative; right: 100%; } #toppage .productsItem__btnList { width: 100%; margin-top: calc(.0104166667 * (100vw - var(--scrollbarW))); grid-column-start: 2; display: flex; justify-content: flex-end; } #toppage .productsItem__btnList li { margin-inline: 0px; } #toppage .productsItem__btnList.--row2 { display: flex; justify-content: space-between; } #toppage .productsItem__btnList.--row2 li { margin-inline: 0px; } #toppage .productsItem__btnList li { width: calc(.15625 * (100vw - var(--scrollbarW))); } #toppage .productsItem__btnList li + li { margin-top: 0px; } #toppage .productsItem .pcLine { display: block; grid-column: span 2 / span 2; border-color: rgb(23, 64, 74); margin-top: 1.27907%; margin-bottom: 0px; } #toppage .productsItem__notesBlock { grid-column: span 2 / span 2; margin-top: 1.16279%; } #toppage .productsItem__notesBlock.--ps5UPG { border: none; margin-top: calc(.0135416667 * (100vw - var(--scrollbarW))); padding-top: 0px; grid-area: 2 / 1 / 5 / 2; } #toppage .productsItem__notesBlock > li { font-size: 0.729167vw; letter-spacing: 0.035em; line-height: 1.21; } #toppage .productsItem__notesBlock > li + li { margin-top: 0.5em; } #toppage .productsItem__reservAnnouncement { grid-column: span 2 / span 2; width: 100%; margin-top: 5.81395%; } #toppage .productsItem__reservAnnouncement + .productsItem__shopBlock { margin-top: 1.74419%; } #toppage .productsItem__shopBlock { grid-column: span 2 / span 2; margin-top: 4.47674%; display: flex; justify-content: space-between; } #toppage .productsItem__shopBlock li { width: 31.3953%; } #toppage .productsItem__shopBlock li + li { margin-top: 0px; } #toppage .productsItem .shopBonus__btn { margin-left: -27.7778%; margin-bottom: 2.77778%; } #toppage .productsItem__saveBlock { grid-column: span 2 / span 2; margin-top: 0.581395%; display: flex; justify-content: space-between; } #toppage .productsItem__saveBlock > li { width: 48.3721%; } #toppage .productsItem__saveBlock > li + li { margin-top: 0px; } #toppage .productsItem__trialBlock { grid-column: span 2 / span 2; margin-top: 4.65116%; } #toppage .productsItem__trialBlock .trialBonus__btn { margin-left: -8.72093%; margin-bottom: 1.86047%; } #toppage .productsItem .buyBtn { width: calc(.15625 * (100vw - var(--scrollbarW))); height: calc(.03125 * (100vw - var(--scrollbarW))); transition: transform 0.23s ease 0s; } #toppage .productsItem .buyBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .productsItem .buyBtn:hover { transform: scale(1.1); z-index: 10; } #toppage .productsItem .buyBtn:hover::after { opacity: 1; } #toppage .productsItem .buyBtn.--estore::before, #toppage .productsItem .buyBtn.--estore::after { background-image: url(""); } #toppage .productsItem .buyBtn.--amazon::before, #toppage .productsItem .buyBtn.--amazon::after { background-image: url(""); } #toppage .productsItem .buyBtn.--familymart::before, #toppage .productsItem .buyBtn.--familymart::after { background-image: url(""); } #toppage .productsItem .buyBtn.--nintendo::before, #toppage .productsItem .buyBtn.--nintendo::after { background-image: url(""); } #toppage .productsItem .buyBtn.--psstore::before, #toppage .productsItem .buyBtn.--psstore::after { background-image: url(""); } #toppage .productsItem .buyBtn.--trialPS5 { width: calc(.15625 * (100vw - var(--scrollbarW))); height: calc(.0260416667 * (100vw - var(--scrollbarW))); } #toppage .productsItem .buyBtn.--trialPS5::before { background-image: url(""); } #toppage .productsItem .buyBtn.--microsoft::before, #toppage .productsItem .buyBtn.--microsoft::after { background-image: url(""); } #toppage .productsItem .buyBtn.--epic::before, #toppage .productsItem .buyBtn.--epic::after { background-image: url(""); } #toppage .productsItem .buyBtn.--steam::before, #toppage .productsItem .buyBtn.--steam::after { background-image: url(""); } #toppage [data-id="sw2-standard-pkg"] .productsItem__visual a { width: 23.2558%; margin-left: 73.2558%; margin-bottom: 2.38372%; transition: all 0.23s ease 0s; } #toppage [data-id="sw2-standard-pkg"] .productsItem__visual a:hover { filter: brightness(120%); transform: scale(1.05); } #toppage [data-id="ps5-dlc-dl"] .productsItem__visual + .productsItem__btnList { margin-top: calc(.0182291667 * (100vw - var(--scrollbarW))); } } #about { padding-top: 12.8%; padding-bottom: 21.3333%; background-color: rgb(0, 26, 39); } @media screen and (min-width: 769px) { #about { padding-top: 4.47917%; padding-bottom: 7.29167%; background-color: rgb(0, 20, 26); } } #about .heroSec { background-color: rgb(2, 27, 29); position: relative; } #about .heroSec__visual { overflow: hidden; } #about .heroSec__visual img { display: block; } #about .heroSec__hdg, #about .heroSec__leadtext { position: absolute; top: 0px; left: 50%; } #about .heroSec__hdg img, #about .heroSec__leadtext img { display: block; mask-repeat: no-repeat; mask-position: 0% 0%; } #about .heroSec__hdg { width: 71.0667%; margin-left: -35.5333%; margin-top: 50.8%; } #about .heroSec__hdg img { mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 300% 100%; mask-repeat: no-repeat; } #about .heroSec__leadtext { width: 100%; margin-left: -50%; margin-top: 68.4%; } #about .heroSec__leadtext img { mask-image: linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 100% 300%; } #about .heroSec__listArea { background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 51.0667%; padding-bottom: 7.6%; } #about .heroSec__list { display: flex; justify-content: center; gap: 3.33333%; } #about .heroSec__list li { width: 26.6667%; } @media screen and (min-width: 769px) { #about .heroSec__hdg { width: 52.3958%; margin-left: -26.1979%; margin-top: 13.8542%; } #about .heroSec__leadtext { width: 27.9688%; margin-left: -13.9844%; margin-top: 18.4375%; } #about .heroSec__listArea { background-image: url(""); padding-top: 3.64583%; padding-bottom: 10.1042%; } #about .heroSec__list { gap: 1.5625%; } #about .heroSec__list li { width: 21.875%; } } #about .intergradeSec, #about .rebirthSec { position: relative; background-position: center top; background-repeat: no-repeat; background-size: 100%; } #about .intergradeSec__hdg, #about .rebirthSec__hdg { position: relative; margin-inline: auto; } #about .intergradeSec { background-image: url(""), linear-gradient(rgba(0, 26, 39, 0) 20vw, rgb(0, 26, 39) 20vw, rgb(0, 26, 39) 100%); margin-top: -2.26667%; padding-top: 6.26667%; padding-bottom: 13.0667%; } #about .intergradeSec__softList { width: 86.6667%; margin-inline: auto; margin-top: 4%; } #about .intergradeSec__softList li + li { position: relative; margin-top: 12.3077%; } #about .intergradeSec__softList li + li::before { content: ""; display: block; position: absolute; top: 0%; left: 50%; width: 8vw; aspect-ratio: 1 / 1; margin-top: -10.7692%; margin-left: -4.61538%; background-color: rgb(24, 136, 171); mask-image: url("data:image/svg+xml;utf8,"); mask-size: 100%; mask-repeat: no-repeat; } #about .intergradeSec__softList .doubleFrame__inFrame { border: none; } #about .intergradeSec__softList .doubleFrame.--another::before, #about .intergradeSec__softList .doubleFrame.--another::after { border-color: rgb(18, 124, 68); } @media screen and (min-width: 769px) { #about .intergradeSec { background-image: url(""); margin-top: -6.30208%; padding-top: 2.44792%; padding-bottom: 10.4688%; } #about .intergradeSec__hdg { width: 49.8958%; } #about .intergradeSec__softList { width: 89.5833%; margin-inline: auto; margin-top: 2.60417%; display: flex; justify-content: space-between; } #about .intergradeSec__softList li { width: 47.6744%; } #about .intergradeSec__softList li + li { margin-top: 0px; } #about .intergradeSec__softList li + li::before { top: 50%; left: 0%; width: 3.125vw; aspect-ratio: 1 / 1; margin-top: -3.65854%; margin-left: -8.53659%; } } #about .rebirthSec { background-image: url(""), linear-gradient(transparent 26.6667vw, rgb(57, 0, 8) 33.3333vw, rgb(57, 0, 8) 66.6667vw, rgb(16, 15, 18) 106.667vw, rgb(16, 15, 18) 100%); margin-top: -2.26667%; padding-top: 6.26667%; padding-bottom: 10.6667%; } #about .rebirthSec__leadtext { margin-inline: auto; margin-top: 4.13333%; } #about .rebirthSec__stroy { position: relative; margin-top: 5.33333%; } @media screen and (min-width: 769px) { #about .rebirthSec { background-image: url(""), linear-gradient(transparent 10.4167vw, rgb(57, 0, 8) 10.4167vw, rgb(57, 0, 8) 41.6667vw, rgb(16, 15, 18) 52.0833vw, rgb(16, 15, 18) 100%); margin-top: -6.30208%; padding-top: 2.44792%; padding-bottom: 5.20833%; } #about .rebirthSec__hdg { width: 34.1667%; } #about .rebirthSec__leadtext { width: 38.8542%; margin-top: 1.77083%; } #about .rebirthSec__stroy { margin-top: 2.23958%; } } #about .storyBlock { width: 100%; margin-inline: auto; } #about .storyBlock__inner { margin-top: -31.2%; } #about .storyBlock__subhl { position: relative; width: 18.5333%; margin-left: 6.26667%; } #about .storyBlock__text { position: relative; width: 100%; margin-top: 3.46667%; } #about .storyBlock__text img { display: block; mask-repeat: no-repeat; mask-position: 0% 0%; mask-image: linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 100% 300%; } #about .storyBlock__picList { width: 86.6667%; margin-inline: auto; margin-top: 12%; display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(.04 * (100vw - var(--scrollbarW))); } #about .storyBlock__picList li:first-of-type { grid-column: span 2 / span 2; } #about .storyBlock__picList li:nth-of-type(2) { grid-row-start: 2; } #about .storyBlock__picList li:nth-of-type(3) { grid-row-start: 2; } #about .storyBlock__picFrame { display: block; position: relative; background-color: rgba(2, 10, 11, 0.8); padding: 0.533333vw; } #about .storyBlock__picFrame::before, #about .storyBlock__picFrame::after { content: ""; display: block; position: absolute; inset: 0px; pointer-events: none; } #about .storyBlock__picFrame::before { border: 1px solid rgb(9, 62, 95); } #about .storyBlock__picFrame::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.5; } #about .storyBlock__picFrame span { display: block; } #about .storyBlock__charaBlock { width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #about .storyBlock__charaBlock dt { display: block; background-color: rgb(9, 49, 79); width: 43.8462%; margin-inline: auto; font-family: "M PLUS 1p"; font-weight: 300; font-size: 2.66667vw; text-align: center; padding: 0.5em; position: relative; z-index: 1; } #about .storyBlock__charaBlock dt::before, #about .storyBlock__charaBlock dt::after { content: ""; display: block; position: absolute; top: 0px; width: 1.75439%; height: 100%; border-width: 1px 0.266667vw; border-style: solid; border-color: rgb(67, 155, 181); border-image: initial; } #about .storyBlock__charaBlock dt::before { left: 0px; border-right: none; } #about .storyBlock__charaBlock dt::after { right: 0px; border-left: none; } #about .storyBlock__charaBlock dd { position: relative; margin-top: -3.53846%; } #about .storyBlock__navText { position: relative; width: 100%; margin-inline: auto; margin-top: 5.99369%; } #about .storyBlock__charaList { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.0266666667 * (100vw - var(--scrollbarW))); padding-block: 3.15457%; padding-inline: 2em; } #about .storyBlock__charaList li { width: calc(.1333333333 * (100vw - var(--scrollbarW))); } @media screen and (min-width: 769px) { #about .storyBlock__inner { width: 89.5833%; margin-inline: auto; margin-top: -29.2708%; display: grid; grid-template-columns: 52.3256% 42.1512%; grid-template-rows: auto 1fr; column-gap: 5.52326%; } #about .storyBlock__subhl { width: 13.931%; margin-top: 9.7931%; margin-left: 0.689655%; grid-column-start: 2; grid-row-start: 1; } #about .storyBlock__text { width: 96.4138%; margin-top: 3.86207%; grid-column-start: 2; grid-row-start: 2; } #about .storyBlock__picList { width: 100%; height: min-content; margin-inline: auto 0px; margin-top: 0px; gap: 1.5625vw 1.04167vw; grid-row: 1 / span 2; grid-column-start: 1; } #about .storyBlock__picFrame { padding: 0.208333vw; } #about .storyBlock__charaBlock { width: 89.5833%; margin-inline: auto; margin-top: 2.60417%; } #about .storyBlock__charaBlock dt { width: 16.5698%; font-size: 1.04167vw; z-index: 1; } #about .storyBlock__charaBlock dt::before, #about .storyBlock__charaBlock dt::after { border-left-width: 0.104167vw; border-right-width: 0.104167vw; } #about .storyBlock__charaBlock dd { margin-top: -1.33721%; } #about .storyBlock__navText { width: 48.7104%; margin-inline: auto; margin-top: 2.22743%; } #about .storyBlock__charaList { flex-wrap: nowrap; gap: calc(.0119791667 * (100vw - var(--scrollbarW))); padding-block: 1.46542%; } #about .storyBlock__charaList li { width: 5.86166%; } } #about .navBtn { display: block; position: relative; overflow: hidden; } #about .navBtn span { display: block; position: relative; } #about .navBtn span::before, #about .navBtn span::after { content: ""; display: block; position: absolute; inset: 0px; } #about .navBtn span::before { border-width: 6.66667vw; border-style: solid; border-color: rgb(79, 142, 160); transition: opacity 0.23s ease 0s, border-width 0.3s ease 0s; opacity: 0; } #about .navBtn span::after { border-width: 1px; border-style: solid; border-color: rgb(74, 88, 98); transition: border-color 0.23s ease 0s; } #about .navBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.2; transition: opacity 0.23s ease 0s; } #about .navBtn:hover span::before { opacity: 0.5; border-width: 3px; } #about .navBtn:hover span::after { border-color: rgb(79, 142, 160); } #about .navBtn:hover::after { opacity: 0.4; } #about .themesongSec { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 51.3333%; padding-bottom: 8%; } #about .themesongSec__block > dt { width: 74.4%; margin-inline: auto; } #about .themesongSec__block > dd { margin-top: 6%; } #about .themesongSec__list { width: fit-content; max-width: 93.3333%; margin-inline: auto; font-family: "M PLUS 1p"; font-size: 2.53333vw; } #about .themesongSec__list li span:first-of-type { color: rgb(255, 12, 12); } #about .themesongSec__list li + li { margin-top: 1em; } @media screen and (min-width: 769px) { #about .themesongSec { background-image: url(""); padding-top: 22.9688%; padding-bottom: 2.39583%; } #about .themesongSec__block > dt { width: 55.2083%; margin-inline: auto; } #about .themesongSec__block > dd { margin-top: 1.71875%; } #about .themesongSec__list { max-width: 89.5833%; font-size: 0.9375vw; } } #character { background-color: rgb(3, 25, 40); } #character .pageHead { z-index: inherit; } #character .pageHead::before, #character .pageHead::after { position: relative; z-index: 1; } #character .pageHead__logo, #character .pageHead__ttlWrap { z-index: 3; } #character .bgb { position: absolute; top: 0px; left: 50%; margin-left: 29.3333%; background: rgba(0, 0, 0, 0.4); width: 200%; height: 100%; transform: skew(-10deg); transform-origin: left top; } #character .bgb::before, #character .bgb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #character .bgb::before { background: rgba(0, 0, 0, 0.2); margin-left: -3.33333%; } #character .bgb::after { background: rgba(0, 0, 0, 0.3); margin-left: -2%; } #character .bgb.anmBe { transform: translate(-100%) skew(-10deg) scaleX(2); } #character .bgb.anmBe::before { margin-left: -66.6667%; width: 200%; } #character .bgb.anmBe::after { margin-left: -66.6667%; width: 200%; } #character .bgb.anmStart { animation: 0.5s cubic-bezier(0, 0.75, 0.12, 1) 0.8s 1 normal forwards running bgbAnm; } #character .bgb.anmStart::before { animation: 0.8s cubic-bezier(0, 0.75, 0.12, 1) 1.1s 1 normal forwards running bgbAnmBefore; } #character .bgb.anmStart::after { animation: 0.8s cubic-bezier(0, 0.75, 0.12, 1) 1s 1 normal forwards running bgbAnmAfter; } @keyframes bgbAnm { 0% { transform: translate(-100%) skew(-10deg) scaleX(2); } 100% { transform: translate(0px) skew(-10deg) scaleX(1); } } @keyframes bgbAnmBefore { 0% { margin-left: -66.6667%; } 100% { margin-left: -3.33333%; } } @keyframes bgbAnmAfter { 0% { margin-left: -66.6667%; } 100% { margin-left: -2%; } } @media screen and (min-width: 769px) { #character .bgb { margin-left: 19.7917vw; width: 100%; transform: skew(-13deg); } } #character .secCharacter { position: relative; background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 62.5333%; padding-bottom: 21.3333%; z-index: auto; } #character .secCharacter__bustshot, #character .secCharacter__addBustshot { position: absolute; top: 0px; left: 0px; width: 100%; z-index: 2; pointer-events: none; } #character .secCharacter__full, #character .secCharacter__addFull { position: absolute; top: 0px; right: 0px; z-index: 4; } #character .secCharacter__detail { position: relative; margin-inline: auto; z-index: 5; } #character .secCharacter .charaDetail { width: 86.6667%; position: relative; color: rgb(255, 255, 255); } #character .secCharacter .charaDetail__line { width: 100%; } #character .secCharacter .charaDetail__name { width: 100%; position: relative; margin-top: 5.38462%; } #character .secCharacter .charaDetail__name__en { position: relative; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); padding: 0.3em 0px 0.4em 0.85em; font-size: 3.46667vw; font-family: Oswald; font-weight: 300; letter-spacing: 0.07em; } #character .secCharacter .charaDetail__name__en span { color: rgb(200, 200, 200); font-weight: 200; } #character .secCharacter .charaDetail__name__en::before { content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 7px; height: 100%; background-color: rgba(154, 0, 0, 0.6); border-left: 4px solid rgb(154, 0, 0); } #character .secCharacter .charaDetail__name__ja { margin-top: 0.4em; margin-left: -0.1em; font-size: 6.93333vw; font-family: "M PLUS 1p"; font-weight: 300; letter-spacing: -0.05em; text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px, rgba(0, 0, 0, 0.5) 1px 1px 3px; } #character .secCharacter .charaDetail__name__ja span { font-family: "Noto Sans JP"; font-size: 6.4vw; margin: 0px -0.1em; } #character .secCharacter .charaDetail__addName { position: absolute; inset: 0px; } #character .secCharacter .charaDetail__cv { position: relative; margin-top: 1em; display: inline-flex; border: 1px solid rgb(154, 0, 0); background-color: rgba(13, 16, 14, 0.5); width: auto; border-radius: 2em; overflow: hidden; } #character .secCharacter .charaDetail__cv dt { background-color: rgba(154, 0, 0, 0.6); padding: 0.3em 0.7em 0.3em 1em; font-size: 3.2vw; font-family: Oswald; font-weight: 200; letter-spacing: 0.07em; display: flex; align-items: center; } #character .secCharacter .charaDetail__cv dd { padding: 0.3em 1em 0.3em 0.7em; font-size: 3.73333vw; font-family: "M PLUS 1p"; font-weight: 300; } #character .secCharacter .charaDetail__text { margin-top: 1.3em; font-size: 3.73333vw; font-family: "M PLUS 1p"; font-weight: 300; letter-spacing: -0.04em; line-height: 1.81; text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px, rgba(0, 0, 0, 0.5) 1px 1px 3px; } #character .secCharacter .charaDetail__defText { position: relative; display: block; } #character .secCharacter .charaDetail__addText { position: absolute; left: 0px; top: 0px; } #character .secCharacter .charaDetail__boxsWrap { margin-top: 9.23077%; } #character .secCharacter .charaDetail__box.--itemPic { overflow: visible; } #character .secCharacter .charaDetail__box.--itemWeapon { margin-top: 7.69231%; overflow: visible; } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame { background: none; } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame::before { content: ""; display: block; position: absolute; inset: 0px; border: 4px solid rgb(94, 10, 10); } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame .baseFrame__inFrame { background: linear-gradient(0deg, rgba(13, 49, 90, 0.6), rgba(8, 73, 129, 0.9)); } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame .baseFrame__inFrame::after { content: ""; display: block; position: absolute; inset: 0px; border: 3px solid rgb(0, 56, 109); } #character .secCharacter .charaDetail__changeBtn { position: absolute; top: 0px; right: 0px; margin-top: 40.7692%; width: 12.9231%; } #character .secCharacter#cloud { background-image: url(""); } #character .secCharacter#cloud .secCharacter__full { width: 45.3333%; margin-top: 6.4%; margin-right: 2%; } #character .secCharacter#aerith { background-image: url(""); } #character .secCharacter#aerith .secCharacter__full { width: 70.8%; margin-top: 15.2%; margin-right: 2%; } #character .secCharacter#barret { background-image: url(""); } #character .secCharacter#barret .secCharacter__full { width: 56%; margin-top: 11.0667%; margin-right: 1.6%; } #character .secCharacter#tifa { background-image: url(""); } #character .secCharacter#tifa .secCharacter__full { width: 33.3333%; margin-top: 12.2667%; margin-right: 7.86667%; } #character .secCharacter#redxiii { background-image: url(""); } #character .secCharacter#redxiii .secCharacter__full { width: 124.933%; margin-top: 38.4%; margin-right: -63.0667%; } #character .secCharacter#redxiii .charaDetail__name__en span { display: inline-flex; width: 4.53333vw; } #character .secCharacter#redxiii .charaDetail__name__ja { display: inline-flex; align-items: center; } #character .secCharacter#redxiii .charaDetail__name__ja span { display: flex; align-items: center; width: 9.6vw; margin-left: 0.3em; } #character .secCharacter#yuffie { background-image: url(""); } #character .secCharacter#yuffie .secCharacter__full { width: 63.2%; margin-top: -4.4%; margin-right: 1.6%; } #character .secCharacter#caitsith { background-image: url(""); } #character .secCharacter#caitsith .secCharacter__full { width: 86.2667%; margin-top: 12.6667%; margin-right: -18.4%; } #character .secCharacter#caitsith .secCharacter__addFull { width: 72%; margin-top: 17.6%; margin-right: -9.6%; } #character .secCharacter#caitsith .charaDetail__name__ja { letter-spacing: -0.1em; } #character .secCharacter#vincent { background-image: url(""); } #character .secCharacter#vincent .secCharacter__full { width: 57.3333%; margin-top: 2%; margin-right: -14.4%; } #character .secCharacter#cid { background-image: url(""); } #character .secCharacter#cid .secCharacter__full { width: 37.0667%; margin-top: 6%; margin-right: 4.26667%; } #character .secCharacter#rufus { background-image: url(""); } #character .secCharacter#rufus .secCharacter__full { width: 36.1333%; margin-top: 10.8%; margin-right: 3.86667%; } #character .secCharacter#tseng { background-image: url(""); } #character .secCharacter#tseng .secCharacter__full { width: 33.2%; margin-top: 10.9333%; margin-right: 2%; } #character .secCharacter#reno { background-image: url(""); } #character .secCharacter#reno .secCharacter__full { width: 30%; margin-top: 9.6%; margin-right: 4.93333%; } #character .secCharacter#rude { background-image: url(""); } #character .secCharacter#rude .secCharacter__full { width: 28.1333%; margin-top: 10.9333%; margin-right: 5.2%; } #character .secCharacter#elena { background-image: url(""); } #character .secCharacter#elena .secCharacter__full { width: 29.6%; margin-top: 13.8667%; margin-right: 9.2%; } #character .secCharacter#sephiroth { background-image: url(""); } #character .secCharacter#sephiroth .secCharacter__full { width: 68.1333%; margin-top: 11.4667%; margin-right: 3.46667%; } #character .secCharacter#zack { background-image: url(""); } #character .secCharacter#zack .secCharacter__full { width: 34.5333%; margin-top: 6.93333%; margin-right: 6.8%; } @media screen and (max-width: 768px) { #character .secCharacter#redxiii .charaDetail__name__en { background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 50%); } #character .secCharacter#vincent .charaDetail__name__ja { letter-spacing: -0.13em; } } @media screen and (min-width: 769px) { #character .secCharacter { padding-top: 8.33333%; padding-bottom: 15.625%; background-size: cover; overflow: hidden; } #character .secCharacter__bustshot, #character .secCharacter__addBustshot { height: 100%; } #character .secCharacter__bustshot img, #character .secCharacter__addBustshot img { width: 100%; height: 100%; object-fit: cover; } #character .secCharacter__detail { left: 50%; margin: 0px 0px 0px -6.77083%; } #character .secCharacter .charaDetail { width: 34.8958%; } #character .secCharacter .charaDetail__name { margin-top: 4.47761%; } #character .secCharacter .charaDetail__name__en { width: 41.791%; font-size: 0.833333vw; } #character .secCharacter .charaDetail__name__en::before { width: 6px; border-left-width: 3px; } #character .secCharacter .charaDetail__name__ja { font-size: 1.97917vw; } #character .secCharacter .charaDetail__name__ja span { font-size: 1.45833vw; } #character .secCharacter .charaDetail__cv { margin-top: 0.55em; } #character .secCharacter .charaDetail__cv dt { font-size: 0.78125vw; letter-spacing: 0.07em; } #character .secCharacter .charaDetail__cv dd { font-size: 0.833333vw; } #character .secCharacter .charaDetail__text { width: 149.254%; margin-top: 1em; font-size: 0.9375vw; letter-spacing: 0.04em; line-height: 1.61; min-height: 105px; height: 9.3em; } #character .secCharacter .charaDetail__boxsWrap { margin-top: 4.47761%; width: 120.597%; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; } #character .secCharacter .charaDetail__box { width: auto; } #character .secCharacter .charaDetail__box.--itemPic { width: 40.099%; } #character .secCharacter .charaDetail__box.--itemWeapon { width: 57.4257%; margin: 0px; z-index: 0; } #character .secCharacter .charaDetail__box.--itemWeapon .baseFrame::before { border-width: 3px; } #character .secCharacter .charaDetail__box.--itemWeapon .baseFrame__inFrame::after { border-width: 4px; } #character .secCharacter .charaDetail__box a.baseFrame { transform-origin: center center; transition: all 0.15s ease-in-out 0s; box-shadow: rgba(67, 155, 181, 0) 0px 0px 60px 30px; } #character .secCharacter .charaDetail__box a.baseFrame:hover { box-shadow: rgba(67, 155, 181, 0.7) 0px 0px 6px 3px; transform: scale(1.05); } #character .secCharacter .charaDetail__changeBtn { top: inherit; bottom: 0px; margin-top: 0px; margin-right: -35.5224%; width: 10.4478%; cursor: pointer; } #character .secCharacter .charaDetail__changeBtn img { transform: rotate3d(0, 0, 0, 0deg); filter: brightness(1); } #character .secCharacter .charaDetail__changeBtn:hover img { transition: transform 0.6s ease 0s; transform: rotateY(360deg); filter: brightness(1.3); } #character .secCharacter#cloud { background-image: url(""); } #character .secCharacter#cloud .secCharacter__full { width: 17.7083%; margin-top: 0.885417%; margin-right: 8.4375%; } #character .secCharacter#aerith { background-image: url(""); } #character .secCharacter#aerith .secCharacter__full { width: 27.6562%; margin-top: 3.33333%; margin-right: 8.22917%; } #character .secCharacter#barret { background-image: url(""); } #character .secCharacter#barret .secCharacter__full { width: 21.875%; margin-top: 2.44792%; margin-right: 7.91667%; } #character .secCharacter#tifa { background-image: url(""); } #character .secCharacter#tifa .secCharacter__full { width: 13.0208%; margin-top: 3.28125%; margin-right: 11.25%; } #character .secCharacter#redxiii { background-image: url(""); } #character .secCharacter#redxiii .secCharacter__full { width: 48.8021%; margin-top: 1.25%; margin-right: -11.25%; } #character .secCharacter#redxiii .charaDetail__name__en span { width: 1.14583vw; min-width: 13px; } #character .secCharacter#redxiii .charaDetail__name__ja span { width: 2.60417vw; min-width: 16px; margin-left: 0.3em; } #character .secCharacter#yuffie { background-image: url(""); } #character .secCharacter#yuffie .secCharacter__full { width: 24.6875%; margin-top: -2.8125%; margin-right: 8.69792%; } #character .secCharacter#caitsith { background-image: url(""); } #character .secCharacter#caitsith .secCharacter__full { width: 33.6979%; margin-top: 1.51042%; margin-right: 1.14583%; } #character .secCharacter#caitsith .secCharacter__addFull { width: 31.8229%; margin-top: 1.71875%; margin-right: 1.82292%; } #character .secCharacter#vincent { background-image: url(""); } #character .secCharacter#vincent .secCharacter__full { width: 22.3958%; margin-top: 0.520833%; margin-right: 1.97917%; } #character .secCharacter#cid { background-image: url(""); } #character .secCharacter#cid .secCharacter__full { width: 14.4792%; margin-top: 2.8125%; margin-right: 10.7812%; } #character .secCharacter#rufus { background-image: url(""); } #character .secCharacter#rufus .secCharacter__full { width: 14.1146%; margin-top: 2.44792%; margin-right: 11.3542%; } #character .secCharacter#tseng { background-image: url(""); } #character .secCharacter#tseng .secCharacter__full { width: 12.9688%; margin-top: 2.1875%; margin-right: 10.7292%; } #character .secCharacter#reno { background-image: url(""); } #character .secCharacter#reno .secCharacter__full { width: 11.7188%; margin-top: 2.76042%; margin-right: 13.2292%; } #character .secCharacter#rude { background-image: url(""); } #character .secCharacter#rude .secCharacter__full { width: 10.9896%; margin-top: 2.55208%; margin-right: 11.0938%; } #character .secCharacter#elena { background-image: url(""); } #character .secCharacter#elena .secCharacter__full { width: 11.5625%; margin-top: 3.4375%; margin-right: 13.0208%; } #character .secCharacter#sephiroth { background-image: url(""); } #character .secCharacter#sephiroth .secCharacter__full { width: 26.6146%; margin-top: 1.30208%; margin-right: 6.35417%; } #character .secCharacter#zack { background-image: url(""); } #character .secCharacter#zack .secCharacter__full { width: 13.4896%; margin-top: 0.625%; margin-right: 10.6771%; } #character .secCharacter#vincent .charaDetail, #character .secCharacter#cid .charaDetail, #character .secCharacter#rufus .charaDetail, #character .secCharacter#tseng .charaDetail, #character .secCharacter#reno .charaDetail, #character .secCharacter#rude .charaDetail, #character .secCharacter#elena .charaDetail, #character .secCharacter#sephiroth .charaDetail, #character .secCharacter#zack .charaDetail { padding-bottom: 11.1458%; } } #character .navArea { width: 86.6667%; margin-inline: auto; margin-top: 13.3333%; position: relative; z-index: 10; --barW1: calc(4/750*100vw); --barW2: calc(8/750*100vw); --color1: #268dac; --color2: #2d495d; background-image: linear-gradient(90deg,var(--color1) var(--barW1),transparent var(--barW1),transparent calc(100% - var(--barW1)),var(--color1) calc(100% - var(--barW1))),linear-gradient(90deg,var(--color2) var(--barW2),transparent var(--barW2),transparent calc(100% - var(--barW2)),var(--color2) calc(100% - var(--barW2))); padding: 0px 1.06667%; } @media screen and (min-width: 769px) { #character .navArea { width: fit-content; margin-top: 0px; position: absolute; bottom: 0px; left: 50%; transform: translate(-50%); margin-bottom: 4.89583%; } #character .navArea.--fixed { position: fixed; } #character .navArea { --barW1: calc(4/1920*100vw); --barW2: calc(7/1920*100vw); padding: 0px 0.364583%; display: flex; justify-content: center; gap: 0px; } } #character .navBlock { position: relative; width: 100%; padding-top: 1px; padding-bottom: 7.88644%; border-bottom: 1px solid rgb(74, 88, 98); } #character .navBlock::before, #character .navBlock::after { content: ""; display: block; position: absolute; left: 0px; width: 100%; height: 1px; background-color: rgb(46, 57, 69); } #character .navBlock::before { top: 1px; } #character .navBlock::after { bottom: 1px; } #character .navBlock dt { position: relative; width: 71.9243%; margin-inline: auto; margin-top: -3.94322%; } #character .navBlock dd { width: 100%; } #character .navBlock dd + dd { border-top: 1px solid rgb(74, 88, 98); --posiL: calc(27/634*100%); --posiR: calc(100% - (27/634*100%)); border-image: linear-gradient(to right,transparent var(--posiL),#4a5862 var(--posiL),#4a5862 var(--posiR),transparent var(--posiR)) 1; margin-top: 3.15457%; } #character .navBlock dd p { width: 91.4826%; margin-inline: auto; margin-top: 3.15457%; } #character .navBlock dd ul { width: 93.6909%; margin-inline: auto; margin-top: 3.15457%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.66667vw 3.15457%; } #character .navBlock dd ul li { width: 16.835%; } #character .navBlock.--typeA::before { display: none; } #character .navBlock.--typeA { background-color: rgba(0, 14, 33, 0.8); } #character .navBlock.--typeB { border-bottom: none; padding-bottom: 4.73186%; } #character .navBlock.--typeB::after { display: none; } #character .navBlock.--typeB { background-color: rgba(36, 0, 7, 0.8); } @media screen and (min-width: 769px) { #character .navBlock { background-position: center bottom; background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 0.572917vw; border-bottom: none; border-right: 1px solid rgb(74, 88, 98); } #character .navBlock::before, #character .navBlock::after { width: 1px; height: 100%; } #character .navBlock::before { top: 0px; left: 1px; } #character .navBlock::after { bottom: 0px; left: calc(100% - 2px); } #character .navBlock dt { margin-top: -1.19792vw; margin-bottom: 0.416667vw; } #character .navBlock dd + dd { border-top: none; margin-top: 0px; margin-left: calc(.0109375 * (100vw - var(--scrollbarW))); } #character .navBlock dd p { width: 100%; margin-top: 0px; position: relative; left: 50%; transform: translate(-50%); } #character .navBlock dd ul { width: 100%; margin-top: 0.416667vw; flex-wrap: nowrap; gap: 0 calc(.0026041667 * (100vw - var(--scrollbarW))); position: relative; } #character .navBlock dd ul li { width: calc(.021875 * (100vw - var(--scrollbarW))); } #character .navBlock dd:nth-of-type(n+2) ul::before { content: ""; display: block; position: absolute; top: 0px; left: -0.572917vw; width: 1px; height: 100%; background-color: rgb(74, 88, 98); border: none; } #character .navBlock.--typeA { background-image: url(""); width: calc(.2395833333 * (100vw - var(--scrollbarW))); } #character .navBlock.--typeA dt { width: 41.8301%; } #character .navBlock.--typeA dd p { width: 100%; } #character .navBlock.--typeB { background-image: url(""); padding-bottom: 0.572917vw; border-right: none; width: calc(.2177083333 * (100vw - var(--scrollbarW))); } #character .navBlock.--typeB dt { width: 45.933%; margin-inline: 23.9234%; } #character .navBlock.--typeB dd:nth-of-type(1) { width: 10.0478%; } #character .navBlock.--typeB dd:nth-of-type(1) p { width: 128.571%; } #character .navBlock.--typeB dd:nth-of-type(2) { width: 43.7799%; } #character .navBlock.--typeB dd:nth-of-type(3) { width: 21.2919%; } } #character .navBtn { display: block; position: relative; overflow: hidden; } #character .navBtn span { display: block; position: relative; } #character .navBtn span::before, #character .navBtn span::after { content: ""; display: block; position: absolute; inset: 0px; } #character .navBtn span::before { border-width: 6.66667vw; border-style: solid; border-color: rgb(79, 142, 160); opacity: 0; } #character .navBtn span::after { border-width: 1px; border-style: solid; border-color: rgb(74, 88, 98); } #character .navBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.2; } #character .navBtn.--current span::before { opacity: 0.5; border-width: 3px; } #character .navBtn.--current span::after { border-color: rgb(79, 142, 160); } #character .navBtn.--current::after { opacity: 0.4; } @media screen and (min-width: 769px) { #character .navBtn span::before { border-width: 1.04167vw; transition: opacity 0.23s ease 0s, border-width 0.3s ease 0s; } #character .navBtn span::after { transition: border-color 0.23s ease 0s; } #character .navBtn::after { transition: opacity 0.23s ease 0s; } #character .navBtn:hover span::before { opacity: 0.5; border-width: 3px; } #character .navBtn:hover span::after { border-color: rgb(79, 142, 160); } #character .navBtn:hover::after { opacity: 0.4; } } #character .btnDiagramBlock { position: relative; width: 53.6%; margin-inline: auto; margin-top: 6.66667%; } @media screen and (min-width: 769px) { #character .btnDiagramBlock { position: absolute; bottom: 0px; right: 0px; min-width: 7.39583%; width: fit-content; margin-inline: 0px; margin-top: 0px; margin-right: 2.60417%; margin-bottom: 5.72917%; } } #character .btnDiagram { display: block; text-decoration: none; color: rgb(255, 255, 255); font-size: 2.93333vw; position: relative; border: 1px solid rgb(74, 88, 98); } #character .btnDiagram::after { content: ""; display: block; position: absolute; inset: -1px; background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.2; } #character .btnDiagram__inner { position: relative; padding: 1em; } #character .btnDiagram__inner::before, #character .btnDiagram__inner::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100% 100%; z-index: 0; } #character .btnDiagram__inner::before { background-image: url(""); } #character .btnDiagram__inner span { position: relative; display: flex; justify-content: center; align-items: center; z-index: 1; letter-spacing: 0.05em; } @media screen and (min-width: 769px) { #character .btnDiagram { font-size: 0.833333vw; transition: all 0.23s ease 0s; } #character .btnDiagram__inner::before, #character .btnDiagram__inner::after { transition: opacity 0.23s ease 0s; } #character .btnDiagram__inner::before { background-image: url(""); } #character .btnDiagram__inner::after { background-image: url(""); opacity: 0; } #character .btnDiagram:hover { transform: scale(1.1); } #character .btnDiagram:hover .btnDiagram__inner::after { opacity: 1; } } #media { padding-top: 27.4667%; padding-bottom: 21.3333%; } #media::before { content: ""; position: absolute; inset: 0px; background-color: rgb(0, 8, 21); background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; z-index: 0; } #media.jsActive::before { position: fixed; } @media screen and (min-width: 769px) { #media { padding-top: 10.7292%; padding-bottom: 12.5%; } #media::before { background-image: url(""); z-index: 0; } } #media .movieSec { position: relative; } #media .movieSec__list { display: flex; flex-direction: column; justify-content: center; gap: 3.33333% 0px; width: 86.6667%; margin-inline: auto; } #media .movieSec__list li + li { margin-top: 4.61538%; } #media .movieSec__list li a { display: block; text-decoration: none; } @media screen and (min-width: 769px) { #media .movieSec__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(.03125 * (100vw - var(--scrollbarW))) calc(.0416666667 * (100vw - var(--scrollbarW))); width: 89.5833%; } #media .movieSec__list li { width: 100%; } #media .movieSec__list li + li { margin-top: 0px; } #media .movieSec__list li a { display: block; text-decoration: none; } #media .movieSec .basciVideoTtl { min-height: 2.5vw; margin-top: calc(.0078125 * (100vw - var(--scrollbarW))); } #media .movieSec .basciVideoTtl::before { width: 1.66667vw; margin-right: calc(.0067708333 * (100vw - var(--scrollbarW))); } #media .movieSec .basciVideoTtl::after { margin-right: calc(.0067708333 * (100vw - var(--scrollbarW))); } #media .movieSec .basciVideoTtl span { padding-block: 0em; font-size: 1.04167vw; letter-spacing: 0.05em; line-height: 1.4; margin-top: -0.25em; margin-bottom: -0.25em; } #media .movieSec .hoverAnm:hover img { filter: brightness(120%); } } #newsIndex, #newsArticle { position: relative; padding-top: 17.3333%; padding-bottom: 21.3333%; background: url("") center top / 100% no-repeat rgb(10, 20, 33); } @media screen and (min-width: 769px) { #newsIndex, #newsArticle { padding-top: 6.25%; padding-bottom: 7.29167%; background-image: url(""); } } #newsIndex .paginationSec, #newsArticle .paginationSec { position: relative; margin-top: 8%; } #newsIndex .paginationSec__list, #newsArticle .paginationSec__list { width: 86.6667%; margin-inline: auto; display: flex; flex-wrap: nowrap; justify-content: space-between; } #newsIndex .paginationSec__list li, #newsArticle .paginationSec__list li { width: 30.7692%; } #newsIndex .paginationBtn, #newsArticle .paginationBtn { display: flex; flex-wrap: nowrap; align-items: center; position: relative; color: rgb(67, 155, 181); font-family: Oswald; font-weight: 300; font-size: 4.8vw; text-decoration: none; cursor: pointer; } #newsIndex .paginationBtn::after, #newsArticle .paginationBtn::after { content: ""; display: block; background: rgb(67, 155, 181); width: 10%; height: 9.33333vw; clip-path: polygon(0% 0%, 30% 0%, 100% 50%, 30% 100%, 0% 100%, 70% 50%); } #newsIndex .paginationBtn.--top, #newsArticle .paginationBtn.--top { height: 100%; justify-content: center; align-items: center; margin: 0px auto; } #newsIndex .paginationBtn.--top::after, #newsArticle .paginationBtn.--top::after { display: none; } #newsIndex .paginationBtn.--prev, #newsArticle .paginationBtn.--prev { justify-content: flex-end; flex-direction: row-reverse; } #newsIndex .paginationBtn.--prev::after, #newsArticle .paginationBtn.--prev::after { transform: rotate(180deg); margin-right: 0.5em; } #newsIndex .paginationBtn.--next, #newsArticle .paginationBtn.--next { justify-content: flex-end; } #newsIndex .paginationBtn.--next::after, #newsArticle .paginationBtn.--next::after { margin-left: 0.5em; } #newsIndex .paginationBtn.--disabled, #newsArticle .paginationBtn.--disabled { opacity: 0.4; cursor: auto; pointer-events: none; } @media screen and (min-width: 769px) { #newsIndex .paginationSec, #newsArticle .paginationSec { margin-top: 2.08333%; } #newsIndex .paginationSec__list, #newsArticle .paginationSec__list { width: 89.5833%; } #newsIndex .paginationSec__list li, #newsArticle .paginationSec__list li { width: 8.72093%; } #newsIndex .paginationBtn, #newsArticle .paginationBtn { font-weight: 400; font-size: 1.25vw; } #newsIndex .paginationBtn::after, #newsArticle .paginationBtn::after { width: 11.3333%; height: 3.54167vw; } #newsIndex .paginationBtn.--prev::after, #newsArticle .paginationBtn.--prev::after { margin-right: 1em; } #newsIndex .paginationBtn.--next::after, #newsArticle .paginationBtn.--next::after { margin-left: 1em; } #newsIndex .paginationBtn, #newsArticle .paginationBtn { transition: transform 0.5s cubic-bezier(0.33, 1.77, 0.62, 0.78) 0s; } #newsIndex .paginationBtn:not(.--disabled):hover, #newsArticle .paginationBtn:not(.--disabled):hover { transform: scale(1.2); } } #newsIndex .tabSec { background-color: rgba(0, 0, 0, 0.7); padding-top: 1.33333%; padding-bottom: 2.66667%; } #newsIndex .tabSec__hl { width: 47.4667%; margin-inline: auto; margin-top: -4.26667%; } #newsIndex .tabSec__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.66667vw 0.533333vw; } #newsIndex .tabSec.--category { margin-top: 4%; } #newsIndex .tabSec.--category li { width: 28.5333%; } #newsIndex .tabSec.--category li:first-child { width: 86.6667%; } #newsIndex .tabSec.--filter { margin-top: 9.33333%; } #newsIndex .tabSec.--filter .tabSec__list { margin-top: 2.13333%; } #newsIndex .tabSec.--filter li { width: 21.2%; } #newsIndex .tabSec.--filter li:first-child { width: 86.6667%; } #newsIndex .tabSec__btn { display: block; position: relative; cursor: pointer; } #newsIndex .tabSec__btn::before { content: ""; display: block; width: 100%; height: clamp(3px, 0.8vw, 6px); position: absolute; left: 0px; bottom: 0px; background-color: rgb(0, 0, 0); opacity: 0; transition: all 0.3s ease 0s; } #newsIndex .tabSec__btn::after { content: ""; display: block; position: absolute; inset: 0px; background-color: rgb(255, 255, 255); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.23s ease 0s; } #newsIndex .tabSec__btn.--current::before { opacity: 1; bottom: -1.6vw; } #newsIndex .tabSec__btn.--disabled { opacity: 0.5; pointer-events: none; cursor: auto; } #newsIndex .tabSec__btn.--disabled::before { opacity: 0 !important; bottom: 0px !important; } #newsIndex .tabSec__btn[data-category="all"] { background: rgb(0, 80, 145); } #newsIndex .tabSec__btn[data-category="all"]::before { background-color: rgb(0, 80, 145); } #newsIndex .tabSec__btn[data-category="information"] { background: rgb(147, 0, 38); } #newsIndex .tabSec__btn[data-category="information"]::before { background-color: rgb(147, 0, 38); } #newsIndex .tabSec__btn[data-category="campaign"] { background: rgb(185, 95, 0); } #newsIndex .tabSec__btn[data-category="campaign"]::before { background-color: rgb(185, 95, 0); } #newsIndex .tabSec__btn[data-category="movie"] { background: rgb(32, 124, 0); } #newsIndex .tabSec__btn[data-category="movie"]::before { background-color: rgb(32, 124, 0); } #newsIndex .tabSec__btn[data-pf="all"] { background: rgb(37, 88, 129); } #newsIndex .tabSec__btn[data-pf="all"]::before { background-color: rgb(37, 88, 129); } #newsIndex .tabSec__btn[data-pf="sw2"] { background-color: rgb(132, 0, 0); } #newsIndex .tabSec__btn[data-pf="sw2"]::before { background-color: rgb(132, 0, 0); } #newsIndex .tabSec__btn[data-pf="xboxwin"] { background-color: rgb(16, 124, 15); } #newsIndex .tabSec__btn[data-pf="xboxwin"]::before { background-color: rgb(16, 124, 15); } #newsIndex .tabSec__btn[data-pf="ps5"] { background-color: rgb(1, 63, 153); } #newsIndex .tabSec__btn[data-pf="ps5"]::before { background-color: rgb(1, 63, 153); } #newsIndex .tabSec__btn[data-pf="pc"] { background-color: rgb(62, 70, 100); } #newsIndex .tabSec__btn[data-pf="pc"]::before { background-color: rgb(62, 70, 100); } @media screen and (min-width: 769px) { #newsIndex .tabSec { padding-top: 0.46875%; padding-bottom: 0.46875%; } #newsIndex .tabSec__hl { width: 15.1042%; margin-top: -1.40625%; } #newsIndex .tabSec__list { flex-wrap: nowrap; gap: 0px 0.208333vw; } #newsIndex .tabSec.--category { margin-top: 3.125%; } #newsIndex .tabSec.--category li, #newsIndex .tabSec.--category li:first-child { width: 15.625%; } #newsIndex .tabSec.--filter { margin-top: 3.125%; } #newsIndex .tabSec.--filter .tabSec__list { margin-top: 1.04167%; } #newsIndex .tabSec.--filter li, #newsIndex .tabSec.--filter li:first-child { width: 11.4583%; } #newsIndex .tabSec__btn::before { height: clamp(2px,.0020833333 * (100vw - var(--scrollbarW)),4px); } #newsIndex .tabSec__btn:hover:not(.--current)::after { opacity: 0.6; } #newsIndex .tabSec__btn.--current::before, #newsIndex .tabSec__btn:hover::before { opacity: 1; bottom: max(-.0067708333 * (100vw - var(--scrollbarW)),-13px); } } #newsIndex .newsListSec { width: 86.6667%; margin-inline: auto; margin-top: 8%; } #newsIndex .newsListSec > ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: calc(.0253333333 * (100vw - var(--scrollbarW))); } #newsIndex .newsListSec > ul > li { width: 48.4615%; display: flex; height: auto; } @media screen and (min-width: 769px) { #newsIndex .newsListSec { width: 89.5833%; margin-top: 3.125%; } #newsIndex .newsListSec > ul { gap: calc(.0208333333 * (100vw - var(--scrollbarW))) calc(.0135416667 * (100vw - var(--scrollbarW))); } #newsIndex .newsListSec > ul > li { width: 23.8372%; } } #newsIndex .newsItemFrame { position: relative; display: flex; flex-direction: column; text-decoration: none; width: 100%; background-color: rgb(94, 10, 10); background-repeat: no-repeat; --bar: calc(4/315*100%); background-image: linear-gradient(90deg,#268dac var(--bar),transparent var(--bar),transparent calc(100% - var(--bar)),#268dac calc(100% - var(--bar))); background-size: 100% 100%; background-position: center top; } #newsIndex .newsItemFrame__inFrame { position: relative; width: 100%; height: 100%; padding: 1.46667vw 2vw; } #newsIndex .newsItemFrame__inFrame::before, #newsIndex .newsItemFrame__inFrame::after { content: ""; display: block; position: absolute; inset: 0.533333vw 1.06667vw; pointer-events: none; } #newsIndex .newsItemFrame__inFrame::before { border: 1px solid rgba(22, 104, 147, 0.5); background-color: rgb(0, 35, 67); background-repeat: no-repeat; --bar: calc(4/315*100%); background-image: radial-gradient(closest-side, rgba(48, 103, 149, 0.5), rgba(48, 103, 149, 0)); background-size: 200% 25.3333vw; background-position: left 50% bottom -12.6667vw; } #newsIndex .newsItemFrame__inFrame::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; } @media screen and (min-width: 769px) { #newsIndex .newsItemFrame { --bar: 1%; background-image: linear-gradient(90deg,#268dac var(--bar),transparent var(--bar),transparent calc(100% - var(--bar)),#268dac calc(100% - var(--bar))); } #newsIndex .newsItemFrame__inFrame { padding: calc(.0057291667 * (100vw - var(--scrollbarW))) calc(.0078125 * (100vw - var(--scrollbarW))); } #newsIndex .newsItemFrame__inFrame::before, #newsIndex .newsItemFrame__inFrame::after { inset: calc(.0020833333 * (100vw - var(--scrollbarW))) calc(.0041666667 * (100vw - var(--scrollbarW))); } #newsIndex .newsItemFrame__inFrame::before { background-size: 150% 9.89583vw; background-position: left 50% bottom -4.94792vw; } } #newsIndex .newsArticle { display: flex; flex-direction: column; height: 100%; position: relative; } #newsIndex .newsArticle__thumb { position: relative; } #newsIndex .newsArticle__detail { margin-top: 1.86667vw; font-family: "Noto Sans JP"; display: flex; flex-direction: column; align-items: stretch; height: 100%; } #newsIndex .newsArticle__date { font-weight: 300; font-size: 2.4vw; color: rgb(0, 192, 232); } #newsIndex .newsArticle__category { width: 17.3333vw; margin-top: calc(-.0306666667 * (100vw - var(--scrollbarW))); align-self: flex-end; position: relative; } #newsIndex .newsArticle__category::before, #newsIndex .newsArticle__category::after { content: ""; display: block; position: absolute; top: 0px; width: 3.84615%; height: 100%; border-width: 1px 0.4vw; border-style: solid; border-color: rgba(255, 255, 255, 0.3); border-image: initial; } #newsIndex .newsArticle__category::before { left: 0px; border-right: none; } #newsIndex .newsArticle__category::after { right: 0px; border-left: none; } #newsIndex .newsArticle__category img { display: block; } #newsIndex .newsArticle__text { margin-top: 0.4em; margin-bottom: 0.6em; font-weight: 400; font-size: 2.66667vw; color: rgb(255, 255, 255); font-feature-settings: "palt"; letter-spacing: 0.05em; line-height: 1.61; overflow-wrap: anywhere; } #newsIndex .newsArticle__platform { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(.0106666667 * (100vw - var(--scrollbarW))) 2.8070175439%; } #newsIndex .newsArticle__platform .newsPlatform { display: block; position: relative; width: 48.0702%; background-color: rgba(8, 34, 46, 0.8); } #newsIndex .newsArticle__platform .newsPlatform::before, #newsIndex .newsArticle__platform .newsPlatform::after { content: ""; display: block; position: absolute; inset: 0px; } #newsIndex .newsArticle__platform .newsPlatform::before { border: 1px solid rgb(0, 0, 0); } #newsIndex .newsArticle__platform .newsPlatform::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.3; } #newsIndex .newsArticle__platform .newsPlatform.--sw2::before { border-color: rgb(132, 0, 0); } #newsIndex .newsArticle__platform .newsPlatform.--xboxwin::before { border-color: rgb(16, 124, 15); } #newsIndex .newsArticle__platform .newsPlatform.--ps5::before { border-color: rgb(0, 130, 191); } #newsIndex .newsArticle__platform .newsPlatform.--pc::before { border-color: rgb(100, 113, 163); } #newsIndex .newsArticle__platform .newsPlatform img { display: block; margin-block: -0.666667vw; } #newsIndex [data-category="information"] .newsArticle__category { background-color: rgb(147, 0, 38); } #newsIndex [data-category="campaign"] .newsArticle__category { background-color: rgb(185, 95, 0); } #newsIndex [data-category="movie"] .newsArticle__category { background-color: rgb(32, 124, 0); } #newsIndex [data-category="movie"].newsItemFrame .newsArticle__thumb img { position: relative; vertical-align: top; } #newsIndex [data-category="movie"].newsItemFrame .newsArticle__thumb::after { content: ""; display: block; position: absolute; inset: 0px; background: url("") center center / 15% no-repeat; } @media screen and (min-width: 769px) { #newsIndex .newsArticle__detail { margin-top: 0.729167vw; } #newsIndex .newsArticle__date { font-size: 0.729167vw; } #newsIndex .newsArticle__category { width: 5.20833vw; margin-top: calc(-.009375 * (100vw - var(--scrollbarW))); } #newsIndex .newsArticle__category::before, #newsIndex .newsArticle__category::after { width: 5%; border-left-width: 0.15625vw; border-right-width: 0.15625vw; } #newsIndex .newsArticle__text { font-size: 0.833333vw; padding-bottom: 1em; } #newsIndex .newsArticle__platform { flex-wrap: nowrap; justify-content: flex-start; gap: calc(.0020833333 * (100vw - var(--scrollbarW))); } #newsIndex .newsArticle__platform .newsPlatform { width: calc(.0479166667 * (100vw - var(--scrollbarW))); } #newsIndex .newsArticle__platform .newsPlatform img { margin-block: 0px; } } #newsIndex .nowloadingScreen { position: absolute; inset: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 2; opacity: 0; visibility: hidden; } #newsIndex .nowloadingScreen::before { content: "NOW LOADING"; position: absolute; inset: 0px; color: rgb(255, 255, 255); display: flex; justify-content: center; align-items: center; } #newsArticle .tagCategory { width: 17.3333vw; position: relative; } #newsArticle .tagCategory::before, #newsArticle .tagCategory::after { content: ""; display: block; position: absolute; top: 0px; width: 3.84615%; height: 100%; border-width: 1px 0.4vw; border-style: solid; border-color: rgba(255, 255, 255, 0.3); border-image: initial; } #newsArticle .tagCategory::before { left: 0px; border-right: none; } #newsArticle .tagCategory::after { right: 0px; border-left: none; } #newsArticle .tagCategory img { display: block; } @media screen and (min-width: 769px) { #newsArticle .tagCategory { width: 5.20833vw; } #newsArticle .tagCategory::before, #newsArticle .tagCategory::after { width: 5%; border-left-width: 0.15625vw; border-right-width: 0.15625vw; } } #newsArticle [data-category="information"] .tagCategory { background-color: rgb(147, 0, 38); } #newsArticle [data-category="campaign"] .tagCategory { background-color: rgb(185, 95, 0); } #newsArticle [data-category="movie"] .tagCategory { background-color: rgb(32, 124, 0); } #newsArticle .articleTitleSec { position: relative; width: 100%; padding-top: 4%; padding-inline: 6.66667%; padding-bottom: 6.66667%; display: flex; flex-direction: column; color: rgb(255, 255, 255); } #newsArticle .articleTitleSec__cate-date { display: flex; flex-wrap: nowrap; align-items: center; } #newsArticle .articleTitleSec__category { margin-right: 1rem; } #newsArticle .articleTitleSec__date { font-size: 2.93333vw; text-shadow: rgb(153, 153, 153) 0px 0px 4px, rgb(0, 0, 0) 1px 1px 2px; } #newsArticle .articleTitleSec__ttl { width: 100%; font-size: 4.26667vw; font-feature-settings: "palt"; letter-spacing: 0.05em; text-shadow: rgb(153, 153, 153) 0px 0px 4px, rgb(0, 0, 0) 1px 1px 2px; line-height: 1.41; } #newsArticle .articleTitleSec__ttl::before, #newsArticle .articleTitleSec__ttl::after { content: ""; display: block; width: 0px; height: 0px; } #newsArticle .articleTitleSec__ttl::before { margin-top: calc(-0.205em); } #newsArticle .articleTitleSec__ttl::after { margin-bottom: calc(-0.205em); } #newsArticle .articleTitleSec__ttl { margin-top: 1rem; } @media screen and (min-width: 769px) { #newsArticle .articleTitleSec { min-height: 15.1042vw; padding-top: 2.60417%; padding-inline: 5.20833%; padding-bottom: 2.60417%; } #newsArticle .articleTitleSec__cate-date { margin-top: auto; } #newsArticle .articleTitleSec__date { font-size: 0.729167vw; } #newsArticle .articleTitleSec__ttl { font-size: 1.875vw; margin-top: 0.5em; } } #newsArticle .articleSec { position: relative; background: rgb(236, 236, 236); color: rgb(0, 0, 0); padding-top: 6.66667%; padding-bottom: 10.6667%; font-size: 2.93333vw; } #newsArticle .articleSec__inner { width: 86.6667%; margin: 0px auto; } #newsArticle .articleSec__inner h2 { border-width: 1px 4px; border-style: solid; border-color: rgb(163, 203, 216) rgb(32, 106, 130); padding: 0.6em 0.35em; margin-top: 3.5em; margin-bottom: 1.2em; font-size: 4vw; line-height: 1.41; font-feature-settings: "palt"; letter-spacing: 0.04em; } #newsArticle .articleSec__inner h2:first-child { margin-top: 0px; } #newsArticle .articleSec__inner h3 { border-left: 4px solid rgb(145, 9, 9); padding: 0.5em 0.35em; margin-top: 2.5em; margin-bottom: 1.2em; font-size: 4vw; font-weight: 400; line-height: 1.41; font-feature-settings: "palt"; letter-spacing: 0.04em; } #newsArticle .articleSec__inner h3:first-child { margin-top: 0px; } #newsArticle .articleSec__inner p { line-height: 1.81; } #newsArticle .articleSec__inner p + p { margin-top: 2em; } #newsArticle .articleSec__inner p + ul { margin-top: 1em; } #newsArticle .articleSec__inner a { text-decoration: underline; color: rgb(195, 13, 35); } #newsArticle .articleSec__inner ul { margin-top: 2em; } #newsArticle .articleSec__inner ul li + li { margin-top: 1em; } #newsArticle .articleSec__inner table { border: none; border-collapse: separate; border-spacing: 5px; } #newsArticle .articleSec__inner th, #newsArticle .articleSec__inner td { padding: 1em; line-height: 1.41; } #newsArticle .articleSec__inner th { background-color: rgb(35, 96, 125); color: rgb(255, 255, 255); } #newsArticle .articleSec__inner img { max-width: 100%; width: auto; height: auto; } #newsArticle .articleSec__inner .ytWrap { width: 100%; aspect-ratio: 16 / 9; margin: 1em auto; } #newsArticle .articleSec__inner .ytWrap iframe { width: 100%; height: 100%; } #newsArticle .articleSec .addDeco { width: 100%; border-spacing: 1px; } #newsArticle .articleSec .addDeco th, #newsArticle .articleSec .addDeco td { position: relative; padding: 1.4em; } #newsArticle .articleSec .addDeco td::before, #newsArticle .articleSec .addDeco th::before { content: ""; display: block; position: absolute; inset: 3px; background-repeat: no-repeat; background-position: left -6px top -6px, right -6px top -6px, left -6px bottom -6px, right -6px bottom -6px; pointer-events: none; } #newsArticle .articleSec .addDeco th { font-feature-settings: "palt"; padding-left: 1em; padding-right: 1em; min-width: 18vw; } #newsArticle .articleSec .addDeco th::before { border: 1px solid rgba(255, 255, 255, 0.4); background-image: url(""), url(""), url(""), url(""); opacity: 0.7; } #newsArticle .articleSec .addDeco td { background-color: rgb(250, 250, 250); } #newsArticle .articleSec .addDeco td::before { border: 1px solid rgba(67, 155, 181, 0.4); background-image: url(""), url(""), url(""), url(""); opacity: 0.7; } #newsArticle .articleSec .secDA__ytWrap { width: 100%; aspect-ratio: 16 / 9; margin: 1em auto; } #newsArticle .articleSec .secDA__ytWrap iframe { width: 100%; height: 100%; } #newsArticle .articleSec__shareBlock { width: 86.6667%; margin: 15.3846% auto 0px; padding-top: 6.15385%; border-top: 1px solid rgb(200, 200, 200); } #newsArticle .articleSec__shareBlock ul { width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0px 12.3077%; } #newsArticle .articleSec__shareBlock ul li { width: 12.9231%; } #newsArticle .articleSec__shareBlock ul a { display: block; } @media screen and (min-width: 769px) { #newsArticle .articleSec { padding-top: 3.125%; padding-bottom: 3.125%; font-size: 1.25vw; } #newsArticle .articleSec__inner { width: 92.1875%; max-width: 1180px; } #newsArticle .articleSec__inner h2 { padding: 0.6em 0.8em; margin-top: 4em; margin-bottom: 1.2em; font-size: 1.875vw; } #newsArticle .articleSec__inner h2:first-child { margin-top: 0px; } #newsArticle .articleSec__inner h3 { padding: 0.5em 0.8em; margin-top: 3em; margin-bottom: 1.2em; font-size: 1.5625vw; } #newsArticle .articleSec__inner h3:first-child { margin-top: 0px; } #newsArticle .articleSec .addDeco th { min-width: min-content; } #newsArticle .articleSec__shareBlock { width: 92.1875%; max-width: 1180px; margin-top: 5.20833%; padding-top: 1.5625%; } #newsArticle .articleSec__shareBlock ul { gap: 0px 3.38983%; } #newsArticle .articleSec__shareBlock ul li { width: 3.55932%; } #newsArticle .articleSec__shareBlock ul a { transform: scale(1); transition: transform 0.2s ease 0s; backface-visibility: hidden; } #newsArticle .articleSec__shareBlock ul a:hover { transform: scale(1.3); } } #demo { padding-top: 12.8%; padding-bottom: 21.3333%; background-color: rgb(17, 17, 17); } #demo .sw2xboxwinWrap { position: relative; padding-bottom: 13.3333%; } #demo .ps5Wrap { position: relative; } @media screen and (min-width: 769px) { #demo { padding-top: 0px; padding-bottom: 9.375%; } #demo .sw2xboxwinWrap { padding-bottom: 5.20833%; } } #demo .linkBtn { position: relative; display: block; } #demo .linkBtn span { display: block; text-indent: 200vw; white-space: nowrap; position: relative; width: 100%; height: 100%; } #demo .linkBtn::before, #demo .linkBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100%; } #demo .linkBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #demo .linkBtn.--dl__sw2 { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__sw2::before, #demo .linkBtn.--dl__sw2::after { background-image: url(""); } #demo .linkBtn.--dl__xboxwin { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__xboxwin::before, #demo .linkBtn.--dl__xboxwin::after { background-image: url(""); } #demo .linkBtn.--myNintendoStore { width: calc(.5333333333 * (100vw - var(--scrollbarW))); height: calc(.0933333333 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--myNintendoStore::before { background-image: url(""); } #demo .linkBtn.--prod__sw2 { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__sw2::before, #demo .linkBtn.--prod__sw2::after { background-image: url(""); } #demo .linkBtn.--prod__xboxwin { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__xboxwin::before, #demo .linkBtn.--prod__xboxwin::after { background-image: url(""); } #demo .linkBtn.--dl__ps5 { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__ps5::before, #demo .linkBtn.--dl__ps5::after { background-image: url(""); } @media screen and (min-width: 769px) { #demo .linkBtn { transition: transform 0.23s ease 0s; } #demo .linkBtn:hover { transform: scale(1.1); z-index: 10; } #demo .linkBtn:hover::after { opacity: 1; } #demo .linkBtn.--dl__sw2 { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__sw2::before, #demo .linkBtn.--dl__sw2::after { background-image: url(""); } #demo .linkBtn.--dl__xboxwin { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__xboxwin::before, #demo .linkBtn.--dl__xboxwin::after { background-image: url(""); } #demo .linkBtn.--myNintendoStore { width: calc(.15625 * (100vw - var(--scrollbarW))); height: calc(.0260416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--myNintendoStore::before { background-image: url(""); } #demo .linkBtn.--prod__sw2 { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__sw2::before, #demo .linkBtn.--prod__sw2::after { background-image: url(""); } #demo .linkBtn.--prod__xboxwin { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__xboxwin::before, #demo .linkBtn.--prod__xboxwin::after { background-image: url(""); } #demo .linkBtn.--dl__ps5 { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__ps5::before, #demo .linkBtn.--dl__ps5::after { background-image: url(""); } } #demo .videoItem { position: relative; background-color: rgb(0, 0, 0); z-index: 0; width: 100%; aspect-ratio: 16 / 9; } #demo .videoItem::after { content: ""; display: block; position: absolute; inset: 0px; height: 80%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.5) 100%); } #demo .videoItem video { width: 100%; height: auto; aspect-ratio: 16 / 9; pointer-events: none; } @media screen and (min-width: 769px) { #demo .videoItem::before { content: ""; position: absolute; inset: 0px; background-image: url(""); background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 0.23s ease 0s; } #demo .videoItem:hover::before { opacity: 0; } #demo .videoItem::after { height: 50%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.7) 100%); } } #demo .heroSec { position: relative; background-color: rgb(6, 18, 18); overflow: hidden; } #demo .heroSec__visual { width: 100%; position: absolute; inset: 0px; z-index: 0; } #demo .heroSec__inner { position: relative; width: 100%; } #demo .heroSec__pf { position: relative; font-family: Oswald; font-weight: 400; font-size: 4.26667vw; letter-spacing: 0.025em; text-align: center; } #demo .heroSec__pf span { font-weight: 200; } #demo .heroSec__ttl { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: top 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s; } #demo .heroSec__ttlLine { color: rgb(255, 255, 255); text-align: center; font-family: Oswald; font-size: 7.2vw; letter-spacing: 0.05em; line-height: 0.94em; width: 100%; position: relative; } #demo .heroSec__ttlLine::before, #demo .heroSec__ttlLine::after { content: ""; display: block; width: 0px; height: 0px; } #demo .heroSec__ttlLine::before { margin-top: calc(-0.05em); } #demo .heroSec__ttlLine::after { margin-bottom: calc(-0.05em); } #demo .heroSec__ttlLine::after { margin-bottom: calc(0.47em - 0.5lh); } #demo .heroSec__ttlLine { background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent 0.666667vw); } #demo .heroSec__ttlLine.--line1 { font-weight: 400; } #demo .heroSec__ttlLine.--line2 { font-weight: 300; margin-top: 1.73333%; } #demo .heroSec__ttlLine .tA { position: relative; display: inline-block; transform-origin: left top; } #demo .heroSec__copy { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 21.4667%; } #demo .heroSec__text { position: relative; margin-top: 1.06667%; margin-inline: auto; } #demo .sw2xboxwinWrap .heroSec__inner { height: calc(1.4333333333 * (100vw - var(--scrollbarW))); padding-top: 43.0667%; } #demo .sw2xboxwinWrap .heroSec__ttl { position: absolute; top: 34.6047%; left: 0px; } #demo .sw2xboxwinWrap .heroSec__ttl.isActive { top: 46.5116%; } #demo .ps5Wrap .heroSec { padding-bottom: 10.6667%; } #demo .ps5Wrap .heroSec__inner { padding-top: 38.6667%; } #demo .ps5Wrap .heroSec__ttl { position: relative; margin-top: 2.66667%; } #demo .ps5Wrap .heroSec__text { margin-top: 3.46667%; } #demo .ps5Wrap .heroSec__btn { width: 72%; margin-inline: auto; margin-top: 4.4%; } #demo .ps5Wrap .imgSliderSec__imgListWrap ul { transition-timing-function: linear; } #demo .ps5Wrap .imgSliderSec__imgListWrap ul li img { max-width: none; width: 100%; } @media screen and (min-width: 769px) { #demo .heroSec { background-color: rgb(0, 0, 0); } #demo .heroSec__pf { font-size: 2.1875vw; text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px, rgba(0, 0, 0, 0.4) 0px 0px 20px; } #demo .heroSec__ttl { flex-wrap: nowrap; background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3) 0px, rgb(133, 3, 3) 1px, transparent 1px, transparent max(0.260417vw, 3px)); } #demo .heroSec__ttlLine { font-size: 5.20833vw; letter-spacing: 0.035em; line-height: 0.9em; width: auto; } #demo .heroSec__ttlLine::after { margin-bottom: calc(0.45em - 0.5lh); } #demo .heroSec__ttlLine { background-image: none; } #demo .heroSec__ttlLine.--line2 { margin-top: 0px; margin-left: 0.3em; } #demo .heroSec__copy { width: 40.5208%; margin-top: 7.70833%; } #demo .heroSec__text { width: 47.9167%; margin-top: -0.625%; } #demo .sw2xboxwinWrap .heroSec__inner { height: calc(.5625 * (100vw - var(--scrollbarW))); padding-top: 31.1458%; } #demo .sw2xboxwinWrap .heroSec__ttl { top: 61.8519%; } #demo .sw2xboxwinWrap .heroSec__ttl.isActive { top: 42.5926%; } #demo .ps5Wrap .heroSec { padding-bottom: 2.60417%; } #demo .ps5Wrap .heroSec__inner { padding-top: 31.1458%; } #demo .ps5Wrap .heroSec__ttl { margin-top: 1.45833%; } #demo .ps5Wrap .heroSec__text { width: 74.4271%; margin-top: 0px; } #demo .ps5Wrap .heroSec__btn { width: 23.9583%; margin-top: 0.520833%; } } #demo .downloadSec { position: relative; padding-block: 4%; background-color: rgb(0, 0, 0); } #demo .downloadSec__btnList { position: relative; width: 86.6667%; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 5.33333vw 0px; } #demo .downloadSec__dlcode { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #demo .downloadSec .dlCodeBlock { position: relative; border: 1px solid rgb(136, 27, 27); } #demo .downloadSec .dlCodeBlock dt, #demo .downloadSec .dlCodeBlock dd { position: relative; } #demo .downloadSec .dlCodeBlock__conts { padding-block: 4.61538%; display: flex; flex-wrap: wrap; justify-content: center; } #demo .downloadSec .dlCodeBlock__conts::before { content: ""; display: block; position: absolute; inset: 0px; background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent 3px); } #demo .downloadSec .dlCodeBlock__conts > p { position: relative; } #demo .downloadSec .dlCodeBlock__text { font-size: 3.2vw; font-feature-settings: "palt"; text-align: center; margin-bottom: 0.8em; } #demo .downloadSec .dlCodeBlock__text span { font-weight: 600; } #demo .downloadSec .dlCodeBlock__no { font-family: Oswald; font-weight: 400; font-size: 5.6vw; font-feature-settings: "palt"; text-align: center; margin-right: 0.5em; } #demo .downloadSec .dlCodeBlock__copybtn { width: 6.92308%; cursor: pointer; position: relative; } #demo .downloadSec .dlCodeBlock__copybtn.--copy::before { content: "コピーしました"; background-color: rgb(94, 215, 251); color: rgb(0, 0, 0); font-weight: 600; position: absolute; top: -110%; left: 50%; transform: translate(-50%); font-size: 2.93333vw; padding: 0.25em 0.5em 0.5em; clip-path: polygon(0% 3px, 3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(80% - 3px), calc(100% - 3px) 80%, 55% 80%, 50% 100%, 45% 80%, 3px 80%, 0% calc(80% - 3px)); width: max-content; opacity: 0; transition: all 0.23s ease 0s; } #demo .downloadSec .dlCodeBlock__copybtn.--anm::before { opacity: 1; transform: translate(-50%, 10%); } #demo .downloadSec .dlCodeBlock__copybtn.--des::before { opacity: 0; transform: translate(-50%, -10%); } #demo .downloadSec .dlCodeBlock__btn { margin-top: 4.15385%; } #demo .downloadSec .dlCodeBlock__notes { padding-block: 3.07692%; display: flex; flex-direction: column; align-items: center; row-gap: 0.3em; } #demo .downloadSec .dlCodeBlock__notesLink a { color: rgb(94, 215, 251); font-size: 2.93333vw; font-feature-settings: "palt"; } #demo .downloadSec .dlCodeBlock__notesText { color: rgb(228, 228, 228); font-size: 2.4vw; font-feature-settings: "palt"; margin-top: 0.5em; } @media screen and (min-width: 769px) { #demo .downloadSec { padding-block: 3.125%; } #demo .downloadSec__btnList { width: 91.6667%; flex-direction: row; justify-content: center; gap: 0px 3.40909%; } #demo .downloadSec__dlcode { width: 81.25%; margin-top: 2.08333%; } #demo .downloadSec .dlCodeBlock dt, #demo .downloadSec .dlCodeBlock dd { position: relative; } #demo .downloadSec .dlCodeBlock__conts { align-items: center; padding-block: 1.42045%; } #demo .downloadSec .dlCodeBlock__conts::before { background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3) 0px, rgb(133, 3, 3) 1px, transparent 1px, transparent max(0.15625vw, 2px)); } #demo .downloadSec .dlCodeBlock__text { font-size: 1.04167vw; margin-bottom: 0px; margin-right: 1.5em; } #demo .downloadSec .dlCodeBlock__no { font-size: 2.1875vw; margin-right: 0.5em; } #demo .downloadSec .dlCodeBlock__copybtn { width: calc(.0234375 * (100vw - var(--scrollbarW))); margin-right: 3em; transition: transform 0.23s ease 0s; } #demo .downloadSec .dlCodeBlock__copybtn.--copy::before { top: -110%; font-size: 0.9375vw; padding: 0.25em 0.5em 0.85em; } #demo .downloadSec .dlCodeBlock__copybtn:hover { transform: scale(1.1); } #demo .downloadSec .dlCodeBlock__btn { margin-top: 0px; } #demo .downloadSec .dlCodeBlock__notes { padding-block: 1.2837%; flex-direction: row; justify-content: center; column-gap: 0.5em; } #demo .downloadSec .dlCodeBlock__notesLink a { font-size: 0.9375vw; } #demo .downloadSec .dlCodeBlock__notesText { font-size: 0.833333vw; margin-top: 0px; } } #demo .aboutSec { position: relative; padding-top: 4%; } #demo .aboutSec__leadtext { width: 100%; margin-inline: auto; } #demo .aboutSec__list { display: flex; flex-direction: column; justify-content: center; gap: 3.33333% 0px; width: 86.6667%; margin-inline: auto; margin-top: 12%; } #demo .aboutSec__list li { position: relative; } #demo .aboutSec__list li + li { margin-top: 16.9231%; } #demo .aboutSec__subhl { width: 100%; position: absolute; top: -7.46667vw; left: 0px; z-index: 1; } #demo .aboutSec__videoEmbed { position: relative; } @media screen and (min-width: 769px) { #demo .aboutSec { padding-top: 1.875%; } #demo .aboutSec__leadtext { width: 50.0521%; } #demo .aboutSec__list { flex-direction: row; gap: 0px 3.125%; width: 91.6667%; margin-top: 4.42708%; } #demo .aboutSec__list li { width: 47.1591%; } #demo .aboutSec__list li + li { margin-top: 0px; } #demo .aboutSec__subhl { top: -3.125vw; } } #demo .privilegeSec { position: relative; padding-top: 8%; padding-bottom: 2.66667%; } #demo .privilegeSec__leadtext { width: 100%; margin-inline: auto; position: relative; z-index: 0; } #demo .privilegeSec__leadtext::before { content: ""; position: absolute; inset: 0px; z-index: -1; background-color: rgb(56, 10, 10); background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent 0.666667vw); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0.4)); } #demo .privilegeSec__privi { width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } @media screen and (min-width: 769px) { #demo .privilegeSec { padding-top: 2.60417%; padding-bottom: 2.08333%; } #demo .privilegeSec__leadtext::before { background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent max(0.260417vw, 3px)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0) 45%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0)); } #demo .privilegeSec__privi { width: 68.2292%; margin-top: 1.875%; } } #demo .ps5Wrap .privilegeSec { padding-bottom: 0px; } #demo .ps5Wrap .privilegeSec__plus { margin-top: 9.33333%; position: relative; z-index: 0; } #demo .ps5Wrap .privilegeSec__plus::before { content: ""; position: absolute; inset: 0px; z-index: -1; background-color: rgb(16, 54, 79); background-image: repeating-linear-gradient(0deg, rgb(15, 76, 116), rgb(15, 76, 116) 1px, transparent 1px, transparent 0.666667vw); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0.4)); } #demo .ps5Wrap .privilegeSec__notes { width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; font-family: "Noto Sans JP"; font-size: 2.66667vw; color: rgb(200, 200, 200); } #demo .ps5Wrap .privilegeSec__notes li { line-height: 1.41; } @media screen and (min-width: 769px) { #demo .ps5Wrap .privilegeSec { padding-top: 4.16667%; } #demo .ps5Wrap .privilegeSec__privi { margin-top: 1.40625%; } #demo .ps5Wrap .privilegeSec__plus { margin-top: 1.71875%; } #demo .ps5Wrap .privilegeSec__plus::before { background-image: repeating-linear-gradient(0deg, rgb(15, 76, 116) 0px, rgb(15, 76, 116) 1px, transparent 1px, transparent max(0.260417vw, 3px)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0) 45%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0)); } #demo .ps5Wrap .privilegeSec__notes { width: 68.2292%; margin-top: 1.5625%; font-size: 0.677083vw; } } #demo .peoductsSec { position: relative; } #demo .peoductsSec__text { width: 100%; margin-inline: auto; position: relative; } #demo .peoductsSec__btnList { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 1.6%; display: flex; flex-direction: column; align-items: center; gap: 5.33333vw 0px; } @media screen and (min-width: 769px) { #demo .peoductsSec__text { width: 73.6979%; } #demo .peoductsSec__btnList { width: 91.6667%; margin-top: 2.08333%; flex-direction: row; justify-content: center; gap: 0px 3.40909%; } } "); background-repeat: no-repeat; background-size: contain; font-size: 0px; text-indent: 100%; overflow: hidden; } #toppage .heroSec__staticBnr { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #toppage .heroSec__staticBnr .basicBtnFrame__inFrame { padding: 0.666667vw 1.2vw; } #toppage .heroSec .reserveBnr { position: relative; } #toppage .heroSec .reserveBnr__inner { background-color: rgb(0, 0, 0); padding-bottom: 1.88679%; } #toppage .heroSec .reserveBnr__ttl { position: relative; } #toppage .heroSec .reserveBnr__ttl::before, #toppage .heroSec .reserveBnr__ttl::after { content: ""; display: block; position: absolute; inset: 0px; } #toppage .heroSec .reserveBnr__ttl::before { background-image: repeating-linear-gradient(90deg, rgba(192, 0, 0, 0.18), rgba(192, 0, 0, 0.6) 40%, rgba(192, 0, 0, 0.6) 60%, rgba(192, 0, 0, 0.18)); } #toppage .heroSec .reserveBnr__ttl::after { background-image: repeating-linear-gradient(0deg, rgb(192, 0, 0), rgb(192, 0, 0) 1px, transparent 1px, transparent 3px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0.1)); } #toppage .heroSec .reserveBnr__ttl img { position: relative; z-index: 1; } #toppage .heroSec .reserveBnr__btnList { position: relative; width: 100%; display: flex; justify-content: center; column-gap: calc(.0133333333 * (100vw - var(--scrollbarW))); } #toppage .heroSec .reserveBnr__btnList li { width: 44.0252%; } #toppage .heroSec__pickupBnr { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #toppage .heroSec__award { position: relative; margin-inline: auto; margin-top: 2.66667%; padding-bottom: 4%; } #toppage .heroSec .awardBlock__conts { display: block; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 70%, transparent); } #toppage .heroSec .awardBlock__conts.--active { mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%, transparent); } #toppage .heroSec .awardBlock__btn { display: block; position: absolute; bottom: 2.66667vw; left: 0px; width: 100%; padding: 2.66667vw; border: none; outline: none; appearance: none; background: none; font-size: 0px; cursor: pointer; } #toppage .heroSec .awardBlock__btnImg { display: block; width: 9.33333vw; height: 2.66667vw; margin-inline: auto; background-color: rgb(67, 155, 181); clip-path: polygon(0% 0%, 50% 70%, 100% 0%, 100% 30%, 50% 100%, 0% 30%); } #toppage .heroSec .awardBlock__btn.--active { transform: scale(-1); } @media screen and (min-width: 769px) { #toppage .heroSec { background-color: rgb(0, 0, 0); padding-bottom: 0%; } #toppage .heroSec__visual { width: 100%; height: 100%; } #toppage .heroSec__logo { width: 31.3542%; margin-top: 4.42708%; } #toppage .heroSec__release { width: 26.0938%; margin-top: -0.104167%; margin-right: 6.61458%; } #toppage .heroSec__availablenow { width: 22.0312%; margin-top: -0.572917%; margin-right: 8.69792%; } #toppage .heroSec__buyBtn { width: 25.5208%; margin-top: 0.416667%; margin-right: 6.77083%; } #toppage .heroSec__buyBtn a { padding: 0.6em; font-size: 0.9375vw; transition: transform 0.23s ease 0s; } #toppage .heroSec__buyBtn a:hover { transform: scale(1.1); } #toppage .heroSec__xBtn { width: 2.60417vw; height: 2.60417vw; position: absolute; left: 5.20833%; top: calc(.4739583333 * (100vw - var(--scrollbarW))); margin: 0px; } #toppage .heroSec__xBtn.--noPB { top: 53.6458vw; } #toppage .heroSec__xBtn a { transition: transform 0.23s ease 0s; } #toppage .heroSec__xBtn a:hover { transform: scale(1.3); } #toppage .heroSec__staticBnr { width: 28.6458%; margin-top: 1.5625%; margin-right: 5.20833%; } #toppage .heroSec__staticBnr .basicBtnFrame__inFrame { padding: .2604166667vw calc(.0052083333 * (100vw - var(--scrollbarW))); } #toppage .heroSec .reserveBnr__inner { padding-bottom: 1.86567%; } #toppage .heroSec .reserveBnr__btnList { column-gap: calc(.0083333333 * (100vw - var(--scrollbarW))); } #toppage .heroSec .reserveBnr__btnList li { width: auto; } #toppage .heroSec__pickupBnr { width: 89.5833%; margin-top: 1.04167%; min-height: 5.57292vw; } #toppage .heroSec__pickupBnr.--noPB { visibility: hidden; pointer-events: none; } #toppage .heroSec__pickupBnr > ul.--less li:first-child { margin-left: auto; } #toppage .heroSec__pickupBnr > ul.--less li:last-child { margin-right: 0px !important; } #toppage .heroSec__award { width: 100%; margin-top: 1.04167%; padding-bottom: 3.125%; } #toppage .heroSec .awardBlock__conts img { width: 100%; } #toppage .heroSec .awardBlock__btn { bottom: 1.04167vw; padding: 1.04167vw; } #toppage .heroSec .awardBlock__btnImg { width: 3.54167vw; height: 0.885417vw; transition: transform 0.2s ease 0s; } #toppage .heroSec .awardBlock__btn:hover .awardBlock__btnImg { transform: scale(1.4); } } #toppage .latestSec { position: relative; background-color: rgb(0, 30, 40); background-image: url(""); background-position: center top; background-size: cover; padding-bottom: 9.33333%; } #toppage .latestSec::after { content: ""; display: block; width: 100%; height: 1px; background-color: rgb(0, 71, 112); position: absolute; left: 0px; bottom: 1.33333vw; } #toppage .latestSec__newsList { width: 86.6667%; margin-inline: auto; margin-top: 6.66667%; } #toppage .latestSec__newsList > ul > li { position: relative; } #toppage .latestSec__newsList > ul > li + li { margin-top: 3.07692%; border-top: 1px solid rgba(38, 141, 172, 0.5); padding-top: 3.07692%; } #toppage .latestSec__videoList { width: 86.6667%; margin-inline: auto; margin-top: 8%; } #toppage .latestSec__videoList a { display: block; text-decoration: none; } #toppage .latestSec__videoList.swiperCustom .--baseControl::after { align-self: flex-start; margin-top: 20vw; } #toppage .latestSec__btnBlock { position: relative; border-top: 2px solid rgb(0, 0, 0); margin-top: 2.66667%; text-align: right; } #toppage .latestSec__btnBlock a { display: inline-flex; justify-content: center; align-items: center; column-gap: 1.33333vw; position: relative; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); text-decoration: none; font-size: 2.93333vw; padding: 0.6em 6.66667%; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 9% 100%); } #toppage .latestSec__btnBlock a::before { content: ""; display: block; background: rgb(67, 155, 181); width: 1.6vw; height: 2.4vw; clip-path: polygon(0% 0%, 30% 0%, 100% 50%, 30% 100%, 0% 100%, 70% 50%); } #toppage .latestSec .newsListItem { position: relative; text-decoration: none; color: rgb(255, 255, 255); display: grid; grid-template-columns: min-content; gap: calc(.0133333333 * (100vw - var(--scrollbarW))); } #toppage .latestSec .newsListItem__category { width: 17.3333vw; position: relative; } #toppage .latestSec .newsListItem__category::before, #toppage .latestSec .newsListItem__category::after { content: ""; display: block; position: absolute; top: 0px; width: 3.84615%; height: 100%; border-width: 1px 0.4vw; border-style: solid; border-color: rgba(255, 255, 255, 0.3); border-image: initial; } #toppage .latestSec .newsListItem__category::before { left: 0px; border-right: none; } #toppage .latestSec .newsListItem__category::after { right: 0px; border-left: none; } #toppage .latestSec .newsListItem__category img { display: block; } #toppage .latestSec .newsListItem[data-category="information"] .newsListItem__category { background-color: rgb(147, 0, 38); } #toppage .latestSec .newsListItem[data-category="campaign"] .newsListItem__category { background-color: rgb(185, 95, 0); } #toppage .latestSec .newsListItem[data-category="movie"] .newsListItem__category { background-color: rgb(32, 124, 0); } #toppage .latestSec .newsListItem__date { display: flex; align-items: center; color: rgb(0, 192, 232); font-size: 2.4vw; line-height: 1; } #toppage .latestSec .newsListItem__text { grid-column: span 2 / span 2; grid-row-start: 2; font-size: 2.66667vw; line-height: 1.51; padding-bottom: 1.53846%; } #toppage .latestSec .newsListItem__platform { grid-column: span 2 / span 2; grid-row-start: 3; display: flex; justify-content: flex-end; column-gap: 2.46154%; } #toppage .latestSec .newsListItem .newsPlatform { display: block; position: relative; width: 23.0769%; background-color: rgba(8, 34, 46, 0.8); } #toppage .latestSec .newsListItem .newsPlatform::before, #toppage .latestSec .newsListItem .newsPlatform::after { content: ""; display: block; position: absolute; inset: 0px; } #toppage .latestSec .newsListItem .newsPlatform::before { border: 1px solid rgb(0, 0, 0); } #toppage .latestSec .newsListItem .newsPlatform::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.3; } #toppage .latestSec .newsListItem .newsPlatform.--sw2::before { border-color: rgb(132, 0, 0); } #toppage .latestSec .newsListItem .newsPlatform.--xboxwin::before { border-color: rgb(16, 124, 15); } #toppage .latestSec .newsListItem .newsPlatform.--ps5::before { border-color: rgb(0, 130, 191); } #toppage .latestSec .newsListItem .newsPlatform.--pc::before { border-color: rgb(100, 113, 163); } #toppage .latestSec .newsListItem .newsPlatform img { display: block; } @media screen and (min-width: 769px) { #toppage .latestSec { background-image: url(""); padding-bottom: 3.125%; } #toppage .latestSec::after { bottom: 0.520833vw; } #toppage .latestSec__newsList { width: 89.5833%; margin-top: 2.60417%; } #toppage .latestSec__newsList > ul > li + li { margin-top: 1.16279%; padding-top: 1.16279%; } #toppage .latestSec__videoList { width: 89.5833%; margin-top: 3.125%; } #toppage .latestSec__videoList.swiperCustom .--baseControl::after { align-self: flex-start; margin-top: 5.72917vw; } #toppage .latestSec__btnBlock { margin-top: 1.04167%; } #toppage .latestSec__btnBlock a { column-gap: 0.520833vw; font-size: 0.9375vw; padding: 0.6em 5.20833% 0.6em 1.82292%; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 9% 100%); transition: background-color 0.23s ease 0s, color 0.23s ease 0s, padding-right 0.23s ease 0s; } #toppage .latestSec__btnBlock a::before { width: 0.520833vw; height: 0.833333vw; } #toppage .latestSec__btnBlock a:hover { background-color: rgb(67, 155, 181); color: rgb(0, 0, 0); padding-right: 6.25%; } #toppage .latestSec__btnBlock a:hover::before { background-color: rgb(0, 0, 0); } #toppage .latestSec .newsListItem { gap: calc(.0052083333 * (100vw - var(--scrollbarW))); transition: color 0.23s ease 0s; } #toppage .latestSec .newsListItem__category { width: 6.77083vw; } #toppage .latestSec .newsListItem__category::before, #toppage .latestSec .newsListItem__category::after { border-left-width: 0.15625vw; border-right-width: 0.15625vw; } #toppage .latestSec .newsListItem__category img { width: 89.2308%; margin-inline: auto; } #toppage .latestSec .newsListItem__date { grid-column: span 2 / span 2; font-size: 0.9375vw; } #toppage .latestSec .newsListItem__text { grid-column: span 2 / span 2; grid-row-start: 2; font-size: 0.9375vw; padding-bottom: 0px; } #toppage .latestSec .newsListItem__platform { grid-column-start: 3; grid-row-start: 2; display: inline-flex; align-items: flex-start; column-gap: 0.260417vw; } #toppage .latestSec .newsListItem .newsPlatform { display: block; position: relative; width: 4.79167vw; } #toppage .latestSec .newsListItem:hover { color: rgb(166, 223, 250); } #toppage .latestSec .newsListItem:hover .newsListItem__text { text-decoration: underline; } } #toppage .mainStorySec { position: relative; overflow: hidden; } #toppage .mainStorySec__bgVideo { position: absolute; inset: 0px; } #toppage .mainStorySec__videoWrap { position: relative; width: 100%; height: 100%; } #toppage .mainStorySec__videoWrap::after { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 70%; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7) 100%); } #toppage .mainStorySec__videoWrap video { object-fit: cover; width: 100%; height: 100%; pointer-events: none; } #toppage .mainStorySec__hdg { position: relative; margin-inline: auto; } #toppage .mainStorySec__textBlock { position: relative; width: 100%; margin-inline: auto; margin-top: 62.9333%; padding-bottom: 6.13333%; } #toppage .mainStorySec__keywordBtnList { position: absolute; inset: 0px; } #toppage .mainStorySec__keywordBtnList li { position: absolute; top: 0px; left: 50%; height: 4.66667vw; cursor: pointer; } #toppage .mainStorySec__keywordBtnList li::before { content: ""; display: block; position: absolute; left: 0px; bottom: 0px; background-color: red; width: 100%; min-height: 3px; height: 0.4vw; transition: height 0.13s ease 0s; } #toppage .mainStorySec__keywordBtnList li.--active::before { height: 100%; } #toppage .mainStorySec__keywordBtnList li span { display: block; overflow: hidden; white-space: nowrap; text-indent: 100%; } #toppage .mainStorySec__keywordBtnList .--kw1 { margin-top: -0.8%; margin-left: 5.46667%; width: 24.2667%; } #toppage .mainStorySec__keywordBtnList .--kw2 { margin-top: 5.06667%; margin-left: 26.2667%; width: 18%; } #toppage .mainStorySec__keywordBtnList .--kw3 { margin-top: 10.9333%; margin-left: -24.8%; width: 14.9333%; } #toppage .mainStorySec__keywordBtnList .--kw4 { margin-top: 16.5333%; margin-left: -22.1333%; width: 33.6%; } #toppage .mainStorySec__text { position: relative; width: 100%; margin-inline: auto; pointer-events: none; } #toppage .mainStorySec__keywordList { position: absolute; top: 0px; left: 50%; width: 86.6667%; margin-top: 56%; transform: translate(-50%); } #toppage .mainStorySec__keywordList li { position: absolute; top: 0px; left: 0px; width: 100%; pointer-events: none; opacity: 0; transform: scale(0.97); transition: all 0.23s ease 0s; } #toppage .mainStorySec__keywordList li.--active { opacity: 1; transform: scale(1); pointer-events: all; } @media screen and (min-width: 769px) { #toppage .mainStorySec__videoWrap::after { height: 30%; } #toppage .mainStorySec__hdg { width: 70.8333%; } #toppage .mainStorySec__textBlock { margin-top: 36.1979%; padding-bottom: 2.86458%; } #toppage .mainStorySec__keywordBtnList li { height: 2.39583vw; } #toppage .mainStorySec__keywordBtnList li::before { height: 0.260417vw; } #toppage .mainStorySec__keywordBtnList .--kw1 { margin-top: -0.3125%; margin-left: 3.07292%; width: 13.2292%; } #toppage .mainStorySec__keywordBtnList .--kw2 { margin-top: 2.34375%; margin-left: 14.375%; width: 9.63542%; } #toppage .mainStorySec__keywordBtnList .--kw3 { margin-top: 5.05208%; margin-left: -26.25%; width: 8.17708%; } #toppage .mainStorySec__keywordBtnList .--kw4 { margin-top: 5.05208%; margin-left: 9.0625%; width: 18.2292%; } #toppage .mainStorySec__text { width: 67.0833%; } #toppage .mainStorySec__keywordList { width: 44.7917%; margin-top: 34.3229%; } } #toppage .sephirothSec { position: relative; padding-top: 71.3333%; padding-bottom: 5.33333%; overflow: hidden; } #toppage .sephirothSec__bgVideo { position: absolute; inset: 0px; } #toppage .sephirothSec__videoWrap { position: relative; width: 100%; height: 100%; } #toppage .sephirothSec__videoWrap::after { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50%; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%); } #toppage .sephirothSec__videoWrap video { object-fit: cover; width: 100%; height: 100%; pointer-events: none; } #toppage .sephirothSec__copy { position: relative; margin-inline: auto; } #toppage .sephirothSec__copy img { position: relative; } #toppage .sephirothSec__copy .name { position: absolute; top: 0px; left: 50%; margin-left: -20.1333%; margin-top: -8.93333%; width: 40.2667%; } @media screen and (min-width: 769px) { #toppage .sephirothSec { padding-top: 39.7917%; padding-bottom: 2.86458%; } #toppage .sephirothSec__videoWrap::after { height: 60%; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); background-position: left 50% top 0%; background-size: 100% 200%; background-repeat: no-repeat; } #toppage .sephirothSec__copy { text-align: center; } #toppage .sephirothSec__copy .name { margin-left: -9.42708%; margin-top: -3.80208%; width: 18.8542%; } #toppage .sephirothSec__copy .copy { width: 41.8229%; } } #toppage .aboutSec { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 8%; } #toppage .aboutSec__hdg { width: 56.2667%; margin-inline: auto; } #toppage .aboutSec__hdg img { mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 300% 100%; display: block; mask-repeat: no-repeat; mask-position: 0% 0%; } #toppage .aboutSec__lead { width: 100%; margin-inline: auto; margin-top: 4.66667%; } #toppage .aboutSec__list { width: 86.6667%; margin-inline: auto; margin-top: 5.2%; display: flex; justify-content: space-between; } #toppage .aboutSec__list li { width: 30.7692%; } #toppage .aboutSec__btnBlock { margin-top: 8%; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100% 100%; padding-top: 4.93333%; padding-bottom: 5.33333%; display: flex; justify-content: center; align-items: center; min-height: calc(.1746666667 * (100vw - var(--scrollbarW))); } @media screen and (min-width: 769px) { #toppage .aboutSec { background-color: rgb(3, 10, 1); background-image: url(""); padding-top: 4.0625%; border-bottom-width: 2px; } #toppage .aboutSec__hdg { width: 51.875%; } #toppage .aboutSec__lead { width: 35.9375%; margin-top: 2.13542%; } #toppage .aboutSec__list { width: 89.5833%; margin-top: 2.08333%; justify-content: center; gap: 0px 1.5625%; } #toppage .aboutSec__list li { width: 24.4186%; } #toppage .aboutSec__btnBlock { margin-top: 2.08333%; background-image: url(""); padding-top: 1.92708%; padding-bottom: 1.45833%; min-height: calc(.0619791667 * (100vw - var(--scrollbarW))); } } #toppage .characterSec { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-bottom: 10.6667%; } #toppage .characterSec__list { position: relative; margin-top: 5.46667%; display: flex; flex-wrap: wrap; } #toppage .characterSec__list li { position: relative; width: 33.3333%; cursor: pointer; } #toppage .characterSec__list li a { position: relative; display: block; } #toppage .characterSec__list li img { position: relative; z-index: 0; } #toppage .characterSec__list li::before, #toppage .characterSec__list li::after { content: ""; position: absolute; pointer-events: none; } #toppage .characterSec__list li::before { inset: 0px; background-image: url(""); background-position: center bottom; background-repeat: no-repeat; background-size: 100%; z-index: 1; } #toppage .characterSec__list li::after { inset: 0.4vw; border: 1px solid rgba(67, 155, 181, 0.5); z-index: 3; pointer-events: none; } #toppage .characterSec__list li span { font-family: "M PLUS 1p"; font-weight: 400; width: 100%; position: absolute; left: 0px; bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 4vw; letter-spacing: -0.05em; text-shadow: rgb(0, 0, 0) 0px 0px 4px, rgb(0, 0, 0) 1px 1px 2px; margin-bottom: 1em; z-index: 2; } #toppage .characterSec__btnList { width: 86.6667%; margin-inline: auto; margin-top: 4%; display: flex; justify-content: space-between; } #toppage .characterSec__btnList li { width: 46.1538%; } #toppage .characterSec__btnList li .btnMore { min-width: 100%; } #toppage .characterSec__btnList li p { font-size: 2.4vw; line-height: 1.41; text-align: center; margin-top: 0.25em; } @media screen and (min-width: 769px) { #toppage .characterSec { background-image: url(""); padding-bottom: 3.125%; } #toppage .characterSec__list { flex-wrap: nowrap; margin-top: 1.875%; } #toppage .characterSec__list li { width: 11.1111%; overflow: hidden; } #toppage .characterSec__list li img { transition: transform 0.23s ease 0s, filter 0.23s ease 0s; } #toppage .characterSec__list li::before { background-image: url(""); } #toppage .characterSec__list li::after { inset: 0.260417vw; } #toppage .characterSec__list li span { font-size: 1.5625vw; } #toppage .characterSec__list li span.adj { letter-spacing: -0.1em; } #toppage .characterSec__list li:hover img { transform: scale(1.1); filter: brightness(110%); } #toppage .characterSec__list:hover img { filter: brightness(50%); } #toppage .characterSec__btnList { width: 89.5833%; margin-top: 1.30208%; justify-content: center; gap: 0px 1.5625%; } #toppage .characterSec__btnList li { width: 18.6047%; } #toppage .characterSec__btnList li p { font-size: 0.729167vw; text-align: left; letter-spacing: -0.05em; } } #toppage .worldSec { position: relative; background-color: rgb(2, 24, 41); padding-bottom: 10.6667%; overflow: hidden; } #toppage .worldSec .baseHdg { z-index: 2; } #toppage .worldSec .baseHdg::before { background-color: rgba(0, 0, 0, 0.75); } #toppage .worldSec__catchcopy { position: relative; z-index: 1; } #toppage .worldSec__visual { overflow: hidden; } #toppage .worldSec__visualArea { position: absolute; inset: 0px; z-index: 0; height: 129.867vw; } #toppage .worldSec__visual .swiper-slide { pointer-events: none; } #toppage .worldSec__visual .--baseControl { align-items: flex-start; } #toppage .worldSec__visual .--baseControl::before { content: ""; display: block; position: absolute; top: 0px; margin-top: 41.3333vw; width: 40vw; aspect-ratio: 1 / 2; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); background-size: 100% 100%; background-repeat: no-repeat; } #toppage .worldSec__visual .--baseControl::after { margin-top: calc(.7466666667 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-prev { right: 86.6667%; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::before { right: 0px; margin-right: -6.66667vw; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::after { margin-right: calc(.084 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-next { left: 86.6667%; } #toppage .worldSec__visual .--baseControl.swiper-button-next::before { left: 0px; margin-left: -6.66667vw; } #toppage .worldSec__visual .--baseControl.swiper-button-next::after { margin-left: calc(.084 * (100vw - var(--scrollbarW))); } #toppage .worldSec__list { position: relative; z-index: 2; width: 86.6667%; margin-inline: auto; } #toppage .worldSec__list li { position: relative; } #toppage .worldSec__list.--step { margin-top: 84%; } #toppage .worldSec__list.--step li::before { content: ""; display: block; position: absolute; bottom: -8vw; left: 50%; width: 11.7333vw; height: 3.86667vw; margin-left: -5.86667vw; background-image: url(""); background-repeat: no-repeat; background-size: contain; } #toppage .worldSec__list.--step li + li { margin-top: 13.8462%; } #toppage .worldSec__list.--step li:last-of-type::before { display: none; } #toppage .worldSec__subhl { width: 90.7692%; position: absolute; top: -2.66667vw; left: 4vw; z-index: 1; } #toppage .worldSec__videoEmbed { position: relative; } @media screen and (min-width: 769px) { #toppage .worldSec { padding-bottom: 4.16667%; } #toppage .worldSec__catchcopy { width: 70.8333%; margin-inline: auto; } #toppage .worldSec__visualArea { height: 52.9167vw; } #toppage .worldSec__visual .--baseControl::before { margin-top: 10.9375vw; width: 15.625vw; aspect-ratio: 1 / 2; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); } #toppage .worldSec__visual .--baseControl::after { margin-top: calc(.2708333333 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-prev { right: 94.7917%; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::before { margin-right: -2.60417vw; } #toppage .worldSec__visual .--baseControl.swiper-button-prev::after { margin-right: calc(.0276041667 * (100vw - var(--scrollbarW))); } #toppage .worldSec__visual .--baseControl.swiper-button-next { left: 94.7917%; } #toppage .worldSec__visual .--baseControl.swiper-button-next::before { margin-left: -2.60417vw; } #toppage .worldSec__visual .--baseControl.swiper-button-next::after { margin-left: calc(.0276041667 * (100vw - var(--scrollbarW))); } #toppage .worldSec__list { width: 89.5833%; display: flex; justify-content: space-between; position: relative; } #toppage .worldSec__list.--step { margin-top: 27.3438%; z-index: 1; } #toppage .worldSec__list.--step li { width: 31.0465%; } #toppage .worldSec__list.--step li::before { top: 50%; left: inherit; right: 0%; width: 4.58333vw; height: 1.51042vw; margin-top: -0.78125vw; margin-left: 0px; margin-right: -3.85417vw; transform: rotate(-90deg); } #toppage .worldSec__list.--step li + li { margin-top: 0px; } #toppage .worldSec__list.--step .videoItem::before { background-size: 155.431%; } #toppage .worldSec__subhl { width: 25.7292vw; top: -1.5625vw; left: 1.04167vw; pointer-events: none; } } #toppage .systemSec { position: relative; background-color: rgb(38, 0, 3); background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; overflow: hidden; } #toppage .systemSec .baseHdg { position: absolute; z-index: 1; } #toppage .systemSec .baseHdg::before { background-color: rgba(0, 0, 0, 0.7); } #toppage .systemSec__visual { position: relative; z-index: 0; } @media screen and (min-width: 769px) { #toppage .systemSec { background-image: url(""); } #toppage .systemSec .videoItem::before { content: ""; position: absolute; inset: 0px; background-image: url(""); background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 0.23s ease 0s; } #toppage .systemSec .videoItem:hover::before { opacity: 0; } #toppage .systemSec .videoItem::after { height: 50%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.7) 100%); } } #toppage .battleArea { position: relative; margin-top: -2.26667%; } #toppage .battleArea__header { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 7.2%; padding-bottom: 5.86667%; } #toppage .battleArea__hl { width: 49.8667%; margin-inline: auto; } #toppage .battleArea__lead { width: 100%; margin-inline: auto; margin-top: 4%; } #toppage .battleArea__list { width: 86.6667%; margin-inline: auto; position: relative; z-index: 2; } #toppage .battleArea__list li { position: relative; } #toppage .battleArea__list.--step { margin-top: 12%; } #toppage .battleArea__list.--step li + li { margin-top: 13.8462%; } #toppage .battleArea__list.--step li:last-of-type::before { display: none; } #toppage .battleArea__list.--list { margin-top: 14.4%; } #toppage .battleArea__list.--list li + li { margin-top: 9.69231%; } #toppage .battleArea__subhl { width: 90.7692%; position: absolute; top: -6.66667vw; left: 4vw; z-index: 1; } #toppage .battleArea__videoEmbed { position: relative; } #toppage .battleArea__copy { position: relative; z-index: 1; margin-top: -7.6%; } @media screen and (min-width: 769px) { #toppage .battleArea { position: relative; margin-top: -1.09375%; } #toppage .battleArea__header { background-image: url(""); padding-top: 3.4375%; padding-bottom: 1.14583%; } #toppage .battleArea__hl { width: 18.125%; } #toppage .battleArea__lead { width: 53.75%; margin-top: 0.9375%; } #toppage .battleArea__list { width: 89.5833%; display: flex; justify-content: space-between; position: relative; } #toppage .battleArea__list.--step { margin-top: 3.64583%; z-index: 1; } #toppage .battleArea__list.--step li { width: 48.2558%; } #toppage .battleArea__list.--step li + li { margin-top: 0px; } #toppage .battleArea__list.--list { margin-top: 4.16667%; justify-content: center; } #toppage .battleArea__list.--list li { width: 48.2558%; } #toppage .battleArea__list.--list li + li { margin-top: 0px; } #toppage .battleArea__subhl { width: 41.1458vw; top: -1.5625vw; left: 1.04167vw; pointer-events: none; } #toppage .battleArea__copy { width: 70.8333%; margin-inline: auto; margin-top: -2.5%; z-index: 0; } } #toppage .boostArea { position: relative; background-color: rgba(0, 0, 0, 0.5); margin-top: 9.33333%; padding-block: 8%; } #toppage .boostBlock { width: 92%; margin-inline: auto; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100% 100%; padding-block: 6.66667%; position: relative; } #toppage .boostBlock__hl { width: 84.058%; margin-inline: auto; } #toppage .boostBlock__videoWrap { position: relative; width: 84.058%; margin-inline: auto; margin-top: 4.92754%; } #toppage .boostBlock__videoEmbed.videoItem::after { display: none; } @media screen and (min-width: 769px) { #toppage .boostArea { margin-top: 4.16667%; padding-block: 4.16667%; border-top: 2px solid rgba(163, 13, 13, 0.5); } #toppage .boostBlock { width: 89.5833%; background-image: url(""); padding-block: 1.71875%; display: flex; justify-content: space-between; } #toppage .boostBlock__hl { width: 38.9535%; margin-inline: 0px; margin-top: 1.62791%; margin-left: 5.23256%; } #toppage .boostBlock__videoWrap { width: 41.8605%; margin-inline: 0px; margin-top: 0px; margin-right: 4.06977%; } #toppage .boostBlock__videoEmbed.videoItem::before { background-size: 115.278%; } } #toppage .byPlatformSec { position: relative; background-color: rgb(16, 16, 16); padding-bottom: 10.6667%; overflow: hidden; } #toppage .byPlatformSec .baseHdg { z-index: 2; } #toppage .byPlatformSec__wrapper { position: relative; width: 100%; margin-top: 3.2%; } #toppage .byPlatformSec__tabNav { background-color: rgba(0, 0, 0, 0.6); padding-top: 1.33333%; padding-bottom: 2.66667%; position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; } #toppage .byPlatformSec__tabNav nav { width: 86.6667%; margin-inline: auto; overflow: visible; } #toppage .byPlatformSec__tabNavBtn { display: block; position: relative; } #toppage .byPlatformSec__tabNavBtn::before { content: ""; display: block; width: 100%; height: clamp(2px, 0.533333vw, 4px); position: absolute; left: 0px; bottom: 0px; background-color: rgb(0, 0, 0); opacity: 0; transition: all 0.3s ease 0s; } #toppage .byPlatformSec__tabNavBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-color: rgb(255, 255, 255); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .byPlatformSec__tabNavBtn[data-pf="sw2"] { background-color: rgb(132, 0, 0); } #toppage .byPlatformSec__tabNavBtn[data-pf="sw2"]::before { background-color: rgb(132, 0, 0); } #toppage .byPlatformSec__tabNavBtn[data-pf="xbox"] { background-color: rgb(16, 124, 15); } #toppage .byPlatformSec__tabNavBtn[data-pf="xbox"]::before { background-color: rgb(16, 124, 15); } #toppage .byPlatformSec__tabNavBtn[data-pf="ps5"] { background-color: rgb(1, 63, 153); } #toppage .byPlatformSec__tabNavBtn[data-pf="ps5"]::before { background-color: rgb(1, 63, 153); } #toppage .byPlatformSec__tabNavBtn[data-pf="pc"] { background-color: rgb(62, 70, 100); } #toppage .byPlatformSec__tabNavBtn[data-pf="pc"]::before { background-color: rgb(62, 70, 100); } #toppage .byPlatformSec__tabNav .swiper-slide.swiper-slide-thumb-active .byPlatformSec__tabNavBtn::before { opacity: 1; bottom: -1.33333vw; } #toppage .byPlatformSec__pfList { position: relative; z-index: 1; } #toppage .byPlatformSec .platformBlock, #toppage .byPlatformSec .platformBlock__visual { position: relative; } #toppage .byPlatformSec .platformBlock__list { position: relative; margin-top: 5.33333%; } #toppage .byPlatformSec .platformBlock__list li + li { margin-top: 6.53333%; } #toppage .byPlatformSec .platformBlock .hardPic { display: block; margin-inline: auto; } #toppage .byPlatformSec .platformBlock.--sw2 .platformBlock__list { margin-top: -13.7333%; } #toppage .byPlatformSec .platformBlock.--sw2 .hardPic { width: 86.8%; margin-bottom: 3.6%; } #toppage .byPlatformSec .platformBlock.--xboxwin .platformBlock__list { margin-top: -9.46667%; } #toppage .byPlatformSec .platformBlock.--xboxwin .hardPic { width: 80.8%; margin-bottom: 2.66667%; } @media screen and (min-width: 769px) { #toppage .byPlatformSec { background-color: rgb(30, 26, 24); padding-bottom: 0px; } #toppage .byPlatformSec .baseHdg { position: absolute; top: 0px; left: 0px; } #toppage .byPlatformSec__wrapper { margin-top: 0px; padding-top: 1px; } #toppage .byPlatformSec__tabNav { padding-top: 0.46875%; padding-bottom: 0.46875%; margin-top: 6.25%; } #toppage .byPlatformSec__tabNav nav { width: 46.4583%; } #toppage .byPlatformSec__tabNavBtn { cursor: pointer; } #toppage .byPlatformSec__tabNavBtn::before { height: clamp(2px, 0.208333vw, 4px); } #toppage .byPlatformSec__tabNav .swiper-slide.swiper-slide-thumb-active .byPlatformSec__tabNavBtn::before { bottom: max(-.0067708333 * (100vw - var(--scrollbarW)),-13px); } #toppage .byPlatformSec__tabNav .swiper-slide:hover:not(.swiper-slide-thumb-active) .byPlatformSec__tabNavBtn::before { bottom: max(-.0067708333 * (100vw - var(--scrollbarW)),-13px); } #toppage .byPlatformSec__tabNav .swiper-slide:hover:not(.swiper-slide-thumb-active) .byPlatformSec__tabNavBtn::after { opacity: 0.6; } #toppage .byPlatformSec .platformBlock__list { position: absolute; bottom: 0px; left: 3.64583%; width: 94.7917%; margin-top: 0px; margin-bottom: 2.70833%; display: flex; justify-content: space-between; } #toppage .byPlatformSec .platformBlock__list li { position: relative; width: 33.2967%; } #toppage .byPlatformSec .platformBlock__list li + li { margin-top: 0px; } #toppage .byPlatformSec .platformBlock .hardPic { position: absolute; top: 0px; left: 0px; margin-inline: 0px; } #toppage .byPlatformSec .platformBlock.--sw2 .platformBlock__list { margin-top: 0px; } #toppage .byPlatformSec .platformBlock.--sw2 .hardPic { width: 96.6997%; margin-bottom: 0px; margin-top: -45.3795%; margin-left: 1.65017%; } #toppage .byPlatformSec .platformBlock.--xboxwin .platformBlock__list { margin-top: 0px; } #toppage .byPlatformSec .platformBlock.--xboxwin .hardPic { width: 99.835%; margin-bottom: 0px; margin-top: -45.5446%; margin-left: 0px; } } #toppage .specSec { position: relative; background-color: rgb(0, 0, 0); padding-top: 10.6667%; padding-bottom: 16%; } #toppage .specSec__title { width: 74.2667%; margin-left: 5.46667%; } #toppage .specSec__specList { width: 86.6667%; margin-inline: auto; margin-top: 4%; display: flex; flex-direction: column; gap: min(4vw, 30px) 0px; font-size: 2.93333vw; color: rgb(255, 255, 255); } #toppage .specSec__specList dl { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; height: 100%; } #toppage .specSec__specList dt { display: flex; justify-content: center; align-items: center; background: rgb(22, 65, 93); width: 30.7692%; padding: 0.3em; line-height: 1.41; text-align: center; position: relative; } #toppage .specSec__specList dt::before, #toppage .specSec__specList dt::after { content: ""; display: block; position: absolute; top: 0px; width: 0.8vw; height: 100%; border-width: 1px 0.533333vw; border-style: solid; border-color: rgb(35, 96, 125); border-image: initial; } #toppage .specSec__specList dt::before { left: 0px; border-right: none; } #toppage .specSec__specList dt::after { right: 0px; border-left: none; } #toppage .specSec__specList dd { display: flex; align-items: center; width: 66.1538%; padding: 0.3em 0px; line-height: 1.61; font-feature-settings: "palt"; } #toppage .specSec__specList dd.--fs { font-size: 2.8vw; } #toppage .specSec__specList dd.--lang { flex-direction: column; } #toppage .specSec__specList dd.--lang p { line-height: 1.61; } #toppage .specSec__specList dd.--lang p + p { margin-top: 0.5em; } #toppage .specSec__specList dd .icon { color: rgb(38, 141, 172); margin-right: 0.25em; } #toppage .specSec__relatedArea { width: 86.6667%; margin-inline: auto; margin-top: 10.6667%; } #toppage .specSec__relatedArea dl + dl { margin-top: 5.38462%; } #toppage .specSec__relatedArea dl dt { color: rgb(255, 255, 255); font-family: "M PLUS 1p"; font-size: 2.93333vw; font-weight: 400; border-bottom: 1px solid rgb(38, 141, 172); padding-bottom: 0.3em; } #toppage .specSec__relatedArea dl dd { margin-top: 2.30769%; } #toppage .specSec__relatedArea dl dd ul { display: flex; justify-content: space-between; } #toppage .specSec__relatedArea dl dd li { width: 48%; } #toppage .specSec__relatedArea dl dd li a { display: block; } #toppage .specSec__relatedArea dl dd li p { font-family: "M PLUS 1p"; font-size: 2.4vw; font-weight: 300; margin-top: 0.5em; } #toppage .specSec__notes { width: 86.6667%; margin-inline: auto; margin-top: 4%; color: rgb(212, 212, 212); font-size: 2.4vw; font-weight: 300; font-feature-settings: "palt"; letter-spacing: 0.035em; } @media screen and (min-width: 769px) { #toppage .specSec { padding-top: 3.125%; padding-bottom: 6.25%; } #toppage .specSec__title { width: 29.0104%; margin-left: 4.84375%; } #toppage .specSec__specList { width: 89.5833%; margin-top: 2.08333%; gap: 0.78125vw 0px; font-size: 0.833333vw; } #toppage .specSec__specList dl { justify-content: start; gap: 0 min(.0052083333 * (100vw - var(--scrollbarW)),10px); } #toppage .specSec__specList dt { min-width: 6.25vw; width: 6.25vw; white-space: nowrap; padding: 0.3em 1em; } #toppage .specSec__specList dt::before, #toppage .specSec__specList dt::after { width: 0.3125vw; border-left-width: 0.208333vw; border-right-width: 0.208333vw; } #toppage .specSec__specList dd { flex-wrap: wrap; width: auto; padding: 0.3em 0px; letter-spacing: 0.05em; } #toppage .specSec__specList dd.--fs { font-size: 0.833333vw; letter-spacing: 0.05em; } #toppage .specSec__specList dd.--lang { flex-direction: row; } #toppage .specSec__specList dd.--lang p + p { margin-top: 0.5em; } #toppage .specSec__relatedArea { width: 89.5833%; margin-top: 4.16667%; display: flex; justify-content: space-between; } #toppage .specSec__relatedArea dl { width: 49.4186%; } #toppage .specSec__relatedArea dl + dl { margin-top: 0px; } #toppage .specSec__relatedArea dl dt { font-size: 0.9375vw; } #toppage .specSec__relatedArea dl dd { margin-top: 0.697674%; } #toppage .specSec__relatedArea dl dd li { width: 48.4706%; } #toppage .specSec__relatedArea dl dd li p { font-size: 0.729167vw; } #toppage .specSec__notes { width: 89.5833%; margin-top: 1.5625%; font-size: 0.729167vw; } } #toppage .linkBtn { position: relative; display: block; } #toppage .linkBtn span { display: block; text-indent: 200vw; white-space: nowrap; position: relative; width: 100%; height: 100%; } #toppage .linkBtn::before, #toppage .linkBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100%; } #toppage .linkBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .linkBtn.--heroReserveBnrSw2 { width: calc(.3733333333 * (100vw - var(--scrollbarW))); height: calc(.0906666667 * (100vw - var(--scrollbarW))); } #toppage .linkBtn.--heroReserveBnrSw2::before, #toppage .linkBtn.--heroReserveBnrSw2::after { background-image: url(""); } #toppage .linkBtn.--heroReserveBnrXboxwin { width: calc(.3733333333 * (100vw - var(--scrollbarW))); height: calc(.0906666667 * (100vw - var(--scrollbarW))); } #toppage .linkBtn.--heroReserveBnrXboxwin::before, #toppage .linkBtn.--heroReserveBnrXboxwin::after { background-image: url(""); } @media screen and (min-width: 769px) { #toppage .linkBtn { transition: transform 0.23s ease 0s; } #toppage .linkBtn:hover { transform: scale(1.1); z-index: 10; } #toppage .linkBtn:hover::after { opacity: 1; } #toppage .linkBtn.--heroReserveBnrSw2, #toppage .linkBtn.--heroReserveBnrXboxwin { width: calc(.1229166667 * (100vw - var(--scrollbarW))); height: calc(.0296875 * (100vw - var(--scrollbarW))); } } #toppage .videoItem { position: relative; background-color: rgb(0, 0, 0); z-index: 0; width: 100%; aspect-ratio: 16 / 9; } #toppage .videoItem::after { content: ""; display: block; position: absolute; inset: 0px; height: 80%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.5) 100%); } #toppage .videoItem video { width: 100%; height: auto; aspect-ratio: 16 / 9; pointer-events: none; } @media screen and (min-width: 769px) { #toppage .videoItem::before { content: ""; position: absolute; inset: 0px; background-image: url(""); background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 0.23s ease 0s; } #toppage .videoItem:hover::before { opacity: 0; } #toppage .videoItem::after { height: 50%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.7) 100%); } } #toppage .productsSec { position: relative; background-color: rgb(5, 30, 31); background-image: url(""), url(""); background-position: center top; background-repeat: no-repeat, repeat; background-size: 100%; padding-bottom: 18.4615%; } #toppage .productsSec__tabArea { margin-top: 8.93333%; } #toppage .productsSec__tabArea h3 { position: relative; } #toppage .productsSec__tabArea h3::before { content: ""; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; background-color: rgb(23, 64, 74); } #toppage .productsSec__tabArea h3:nth-of-type(n+2) { margin-top: 5.33333%; } #toppage .productsSec__tabArea h3 img { display: block; width: 48%; margin-inline: auto; position: relative; } #toppage .productsSec__listArea { margin-top: 8%; } #toppage .productsTab { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 4%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(.04 * (100vw - var(--scrollbarW))); } #toppage .productsTab .productsBtn { position: relative; z-index: 0; } #toppage .productsTab .productsBtn::before, #toppage .productsTab .productsBtn::after { content: ""; display: block; position: absolute; inset: 0px; z-index: -1; background-position: center top; background-repeat: no-repeat; background-size: 100%; } #toppage .productsTab .productsBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .productsTab .productsBtn.--current::after { opacity: 1; } #toppage .productsTab[data-tablist="pf"] .productsBtn { width: calc(.4133333333 * (100vw - var(--scrollbarW))); } #toppage .productsTab[data-tablist="pf"] .productsBtn::before, #toppage .productsTab[data-tablist="pf"] .productsBtn::after { background-image: url(""); } #toppage .productsTab[data-tablist="edition"] { flex-direction: column; } #toppage .productsTab[data-tablist="edition"] .productsBtn { display: inline-flex; width: 100%; margin-bottom: auto; } #toppage .productsTab[data-tablist="edition"] .productsBtn::before, #toppage .productsTab[data-tablist="edition"] .productsBtn::after { background-image: url(""); } #toppage .productsList { width: 86.6667%; margin-inline: auto; } #toppage .productsBlock, #toppage .productsItem { position: relative; } #toppage .productsItem + .productsItem { margin-top: 16%; } #toppage .productsItem__firsttime { position: relative; margin-bottom: 4.61538%; } #toppage .productsItem__visual { position: relative; } #toppage .productsItem__price { margin-top: 6.15385%; display: flex; flex-wrap: wrap; align-items: baseline; font-feature-settings: "palt"; letter-spacing: 0.035em; } #toppage .productsItem__price > span { font-size: 2.93333vw; font-weight: 300; } #toppage .productsItem__price > strong { font-size: 6.93333vw; font-weight: 500; margin-left: auto; } #toppage .productsItem__price > hr { width: 100%; border-top-color: rgb(100, 100, 100); margin-top: 0.8em; margin-bottom: 0px; } #toppage .productsItem__priceAnnounce { width: 100%; background-color: rgb(132, 0, 12); clip-path: polygon(0% 50%, 1.5% 0%, 98.5% 0%, 100% 50%, 98.5% 100%, 1.5% 100%); padding: 0.3em 0.2em; margin-bottom: 1em; text-align: center; font-size: 2.93333vw; line-height: 1.61; font-weight: 400; } #toppage .productsItem__priceAnnounce strong { font-size: 5.33333vw; font-weight: 500; line-height: 0.8em; } #toppage .productsItem__priceNotes { width: 100%; font-size: 2.93333vw; font-weight: 300; letter-spacing: -0.025em; text-align: left; color: rgb(180, 180, 180); margin-top: 0.5em; margin-bottom: 1em; } #toppage .productsItem__priceNotes li { text-indent: -1em; padding-left: 1em; line-height: 1.21; } #toppage .productsItem__priceNotes li + li { margin-top: 0.25em; } #toppage .productsItem__btnList { margin-top: 3.07692%; } #toppage .productsItem__btnList li { width: 61.5385%; margin-inline: auto; } #toppage .productsItem__btnList li + li { margin-top: 4.61538%; } #toppage .productsItem .pcLine { display: none; } #toppage .productsItem__notesBlock { margin-top: 4.61538%; } #toppage .productsItem__notesBlock > li { font-size: 2.93333vw; font-weight: 300; font-feature-settings: "palt"; line-height: 1.61; color: rgb(180, 180, 180); text-indent: -1em; padding-left: 1em; } #toppage .productsItem__notesBlock > li + li { margin-top: 0.3em; } #toppage .productsItem__notesBlock > li a { color: rgb(255, 62, 62); } #toppage .productsItem__reservAnnouncement { margin-top: 18.4615%; } #toppage .productsItem__reservAnnouncement + .productsItem__shopBlock { margin-top: 6.15385%; } #toppage .productsItem__shopBlock { margin-top: 12.3077%; } #toppage .productsItem__shopBlock li + li { margin-top: 6.15385%; } #toppage .productsItem .shopBonus { position: relative; } #toppage .productsItem .shopBonus__btn { position: absolute; left: 50%; bottom: 0px; margin-left: -30.7692%; margin-bottom: 3.07692%; } #toppage .productsItem__saveBlock { margin-top: 10.7692%; } #toppage .productsItem__saveBlock > li + li { margin-top: 9.23077%; } #toppage .productsItem__saveBlock .productsItem__notesBlock { margin-top: 0.7em; } #toppage .productsItem__trialBlock { margin-top: 15.3846%; } #toppage .productsItem__trialBlock .trialBonus, #toppage .productsItem__trialBlock .trialBonus__item { position: relative; } #toppage .productsItem__trialBlock .trialBonus__btn { position: absolute; left: 50%; bottom: 0px; margin-left: -23.0769%; margin-bottom: 5.07692%; } #toppage .productsItem__trialBlock .productsItem__notesBlock { margin-top: 0.7em; } #toppage .productsItem .buyBtn { position: relative; display: inline-block; width: calc(.5333333333 * (100vw - var(--scrollbarW))); height: calc(.1066666667 * (100vw - var(--scrollbarW))); } #toppage .productsItem .buyBtn span { display: block; text-indent: 200vw; white-space: nowrap; position: relative; width: 100%; height: 100%; } #toppage .productsItem .buyBtn::before, #toppage .productsItem .buyBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100%; } #toppage .productsItem .buyBtn.--estore::before { background-image: url(""); } #toppage .productsItem .buyBtn.--amazon::before { background-image: url(""); } #toppage .productsItem .buyBtn.--familymart::before { background-image: url(""); } #toppage .productsItem .buyBtn.--nintendo::before { background-image: url(""); } #toppage .productsItem .buyBtn.--psstore::before { background-image: url(""); } #toppage .productsItem .buyBtn.--trialPS5 { width: calc(.4 * (100vw - var(--scrollbarW))); height: calc(.08 * (100vw - var(--scrollbarW))); } #toppage .productsItem .buyBtn.--trialPS5::before { background-image: url(""); } #toppage .productsItem .buyBtn.--microsoft::before { background-image: url(""); } #toppage .productsItem .buyBtn.--epic::before { background-image: url(""); } #toppage .productsItem .buyBtn.--steam::before { background-image: url(""); } #toppage [data-id="sw2-standard-pkg"] .productsItem__visual a { display: block; position: absolute; left: 0px; bottom: 0px; width: 84.6154%; margin-left: 7.69231%; margin-bottom: 5.53846%; } @media screen and (min-width: 769px) { #toppage .productsSec { background-image: url(""), url(""); background-size: 100%, 50%; padding-bottom: 6.25%; } #toppage .productsSec__tabArea { margin-top: 2.86458%; } #toppage .productsSec__tabArea h3:nth-of-type(n+2) { margin-top: 2.39583%; } #toppage .productsSec__tabArea h3 img { width: 15.1042%; } #toppage .productsSec__listArea { margin-top: 2.60417%; } #toppage .productsTab { width: 89.5833%; margin-top: 1.25%; justify-content: center; gap: calc(.0130208333 * (100vw - var(--scrollbarW))) calc(.0104166667 * (100vw - var(--scrollbarW))); } #toppage .productsTab .productsBtn { cursor: pointer; } #toppage .productsTab .productsBtn span { width: 100%; } #toppage .productsTab .productsBtn:not(.--current):hover::after { opacity: 1; } #toppage .productsTab[data-tablist="pf"] .productsBtn { width: calc(.1708333333 * (100vw - var(--scrollbarW))); } #toppage .productsTab[data-tablist="pf"] .productsBtn::before, #toppage .productsTab[data-tablist="pf"] .productsBtn::after { background-image: url(""); } #toppage .productsTab[data-tablist="edition"] { flex-direction: row; } #toppage .productsTab[data-tablist="edition"] .productsBtn { width: calc(.1708333333 * (100vw - var(--scrollbarW))); } #toppage .productsTab[data-tablist="edition"] .productsBtn::before, #toppage .productsTab[data-tablist="edition"] .productsBtn::after { background-image: url(""); } #toppage .productsList { width: 100%; } #toppage .productsBlock { width: 89.5833%; margin-inline: auto; } #toppage .productsItem { display: grid; grid-template-columns: 1fr auto; } #toppage .productsItem + .productsItem { margin-top: 4.16667%; } #toppage .productsItem__firsttime { grid-column: span 2 / span 2; width: 43.2558%; margin-inline: auto; margin-bottom: 1.74419%; } #toppage .productsItem__visual { grid-column: span 2 / span 2; } #toppage .productsItem__price { width: calc(.15625 * (100vw - var(--scrollbarW))); margin-top: calc(.0182291667 * (100vw - var(--scrollbarW))); margin-left: auto; grid-column-start: 2; justify-content: flex-end; height: fit-content; } #toppage .productsItem__price span { font-size: 0.78125vw; font-weight: 400; } #toppage .productsItem__price strong { font-size: 2.1875vw; } #toppage .productsItem__priceAnnounce { width: fit-content; clip-path: polygon(0% 50%, 0.581395vw 0%, calc(100% - 0.581395vw) 0%, 100% 50%, calc(100% - 0.581395vw) 100%, 0.581395vw 100%); padding: 0.5em 1em 0.4em; font-size: 0.9375vw; letter-spacing: 0.025em; white-space: nowrap; text-align: center; } #toppage .productsItem__priceAnnounce strong { font-size: 1.875vw; } #toppage .productsItem__priceNotes { width: 100%; font-size: 0.677083vw; letter-spacing: 0.025em; white-space: nowrap; text-align: right; margin-bottom: -0.5em; position: relative; } #toppage .productsItem__priceNotes li { width: 200%; position: relative; right: 100%; } #toppage .productsItem__btnList { width: 100%; margin-top: calc(.0104166667 * (100vw - var(--scrollbarW))); grid-column-start: 2; display: flex; justify-content: flex-end; } #toppage .productsItem__btnList li { margin-inline: 0px; } #toppage .productsItem__btnList.--row2 { display: flex; justify-content: space-between; } #toppage .productsItem__btnList.--row2 li { margin-inline: 0px; } #toppage .productsItem__btnList li { width: calc(.15625 * (100vw - var(--scrollbarW))); } #toppage .productsItem__btnList li + li { margin-top: 0px; } #toppage .productsItem .pcLine { display: block; grid-column: span 2 / span 2; border-color: rgb(23, 64, 74); margin-top: 1.27907%; margin-bottom: 0px; } #toppage .productsItem__notesBlock { grid-column: span 2 / span 2; margin-top: 1.16279%; } #toppage .productsItem__notesBlock.--ps5UPG { border: none; margin-top: calc(.0135416667 * (100vw - var(--scrollbarW))); padding-top: 0px; grid-area: 2 / 1 / 5 / 2; } #toppage .productsItem__notesBlock > li { font-size: 0.729167vw; letter-spacing: 0.035em; line-height: 1.21; } #toppage .productsItem__notesBlock > li + li { margin-top: 0.5em; } #toppage .productsItem__reservAnnouncement { grid-column: span 2 / span 2; width: 100%; margin-top: 5.81395%; } #toppage .productsItem__reservAnnouncement + .productsItem__shopBlock { margin-top: 1.74419%; } #toppage .productsItem__shopBlock { grid-column: span 2 / span 2; margin-top: 4.47674%; display: flex; justify-content: space-between; } #toppage .productsItem__shopBlock li { width: 31.3953%; } #toppage .productsItem__shopBlock li + li { margin-top: 0px; } #toppage .productsItem .shopBonus__btn { margin-left: -27.7778%; margin-bottom: 2.77778%; } #toppage .productsItem__saveBlock { grid-column: span 2 / span 2; margin-top: 0.581395%; display: flex; justify-content: space-between; } #toppage .productsItem__saveBlock > li { width: 48.3721%; } #toppage .productsItem__saveBlock > li + li { margin-top: 0px; } #toppage .productsItem__trialBlock { grid-column: span 2 / span 2; margin-top: 4.65116%; } #toppage .productsItem__trialBlock .trialBonus__btn { margin-left: -8.72093%; margin-bottom: 1.86047%; } #toppage .productsItem .buyBtn { width: calc(.15625 * (100vw - var(--scrollbarW))); height: calc(.03125 * (100vw - var(--scrollbarW))); transition: transform 0.23s ease 0s; } #toppage .productsItem .buyBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #toppage .productsItem .buyBtn:hover { transform: scale(1.1); z-index: 10; } #toppage .productsItem .buyBtn:hover::after { opacity: 1; } #toppage .productsItem .buyBtn.--estore::before, #toppage .productsItem .buyBtn.--estore::after { background-image: url(""); } #toppage .productsItem .buyBtn.--amazon::before, #toppage .productsItem .buyBtn.--amazon::after { background-image: url(""); } #toppage .productsItem .buyBtn.--familymart::before, #toppage .productsItem .buyBtn.--familymart::after { background-image: url(""); } #toppage .productsItem .buyBtn.--nintendo::before, #toppage .productsItem .buyBtn.--nintendo::after { background-image: url(""); } #toppage .productsItem .buyBtn.--psstore::before, #toppage .productsItem .buyBtn.--psstore::after { background-image: url(""); } #toppage .productsItem .buyBtn.--trialPS5 { width: calc(.15625 * (100vw - var(--scrollbarW))); height: calc(.0260416667 * (100vw - var(--scrollbarW))); } #toppage .productsItem .buyBtn.--trialPS5::before { background-image: url(""); } #toppage .productsItem .buyBtn.--microsoft::before, #toppage .productsItem .buyBtn.--microsoft::after { background-image: url(""); } #toppage .productsItem .buyBtn.--epic::before, #toppage .productsItem .buyBtn.--epic::after { background-image: url(""); } #toppage .productsItem .buyBtn.--steam::before, #toppage .productsItem .buyBtn.--steam::after { background-image: url(""); } #toppage [data-id="sw2-standard-pkg"] .productsItem__visual a { width: 23.2558%; margin-left: 73.2558%; margin-bottom: 2.38372%; transition: all 0.23s ease 0s; } #toppage [data-id="sw2-standard-pkg"] .productsItem__visual a:hover { filter: brightness(120%); transform: scale(1.05); } #toppage [data-id="ps5-dlc-dl"] .productsItem__visual + .productsItem__btnList { margin-top: calc(.0182291667 * (100vw - var(--scrollbarW))); } } #about { padding-top: 12.8%; padding-bottom: 21.3333%; background-color: rgb(0, 26, 39); } @media screen and (min-width: 769px) { #about { padding-top: 4.47917%; padding-bottom: 7.29167%; background-color: rgb(0, 20, 26); } } #about .heroSec { background-color: rgb(2, 27, 29); position: relative; } #about .heroSec__visual { overflow: hidden; } #about .heroSec__visual img { display: block; } #about .heroSec__hdg, #about .heroSec__leadtext { position: absolute; top: 0px; left: 50%; } #about .heroSec__hdg img, #about .heroSec__leadtext img { display: block; mask-repeat: no-repeat; mask-position: 0% 0%; } #about .heroSec__hdg { width: 71.0667%; margin-left: -35.5333%; margin-top: 50.8%; } #about .heroSec__hdg img { mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 300% 100%; mask-repeat: no-repeat; } #about .heroSec__leadtext { width: 100%; margin-left: -50%; margin-top: 68.4%; } #about .heroSec__leadtext img { mask-image: linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 100% 300%; } #about .heroSec__listArea { background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 51.0667%; padding-bottom: 7.6%; } #about .heroSec__list { display: flex; justify-content: center; gap: 3.33333%; } #about .heroSec__list li { width: 26.6667%; } @media screen and (min-width: 769px) { #about .heroSec__hdg { width: 52.3958%; margin-left: -26.1979%; margin-top: 13.8542%; } #about .heroSec__leadtext { width: 27.9688%; margin-left: -13.9844%; margin-top: 18.4375%; } #about .heroSec__listArea { background-image: url(""); padding-top: 3.64583%; padding-bottom: 10.1042%; } #about .heroSec__list { gap: 1.5625%; } #about .heroSec__list li { width: 21.875%; } } #about .intergradeSec, #about .rebirthSec { position: relative; background-position: center top; background-repeat: no-repeat; background-size: 100%; } #about .intergradeSec__hdg, #about .rebirthSec__hdg { position: relative; margin-inline: auto; } #about .intergradeSec { background-image: url(""), linear-gradient(rgba(0, 26, 39, 0) 20vw, rgb(0, 26, 39) 20vw, rgb(0, 26, 39) 100%); margin-top: -2.26667%; padding-top: 6.26667%; padding-bottom: 13.0667%; } #about .intergradeSec__softList { width: 86.6667%; margin-inline: auto; margin-top: 4%; } #about .intergradeSec__softList li + li { position: relative; margin-top: 12.3077%; } #about .intergradeSec__softList li + li::before { content: ""; display: block; position: absolute; top: 0%; left: 50%; width: 8vw; aspect-ratio: 1 / 1; margin-top: -10.7692%; margin-left: -4.61538%; background-color: rgb(24, 136, 171); mask-image: url("data:image/svg+xml;utf8,"); mask-size: 100%; mask-repeat: no-repeat; } #about .intergradeSec__softList .doubleFrame__inFrame { border: none; } #about .intergradeSec__softList .doubleFrame.--another::before, #about .intergradeSec__softList .doubleFrame.--another::after { border-color: rgb(18, 124, 68); } @media screen and (min-width: 769px) { #about .intergradeSec { background-image: url(""); margin-top: -6.30208%; padding-top: 2.44792%; padding-bottom: 10.4688%; } #about .intergradeSec__hdg { width: 49.8958%; } #about .intergradeSec__softList { width: 89.5833%; margin-inline: auto; margin-top: 2.60417%; display: flex; justify-content: space-between; } #about .intergradeSec__softList li { width: 47.6744%; } #about .intergradeSec__softList li + li { margin-top: 0px; } #about .intergradeSec__softList li + li::before { top: 50%; left: 0%; width: 3.125vw; aspect-ratio: 1 / 1; margin-top: -3.65854%; margin-left: -8.53659%; } } #about .rebirthSec { background-image: url(""), linear-gradient(transparent 26.6667vw, rgb(57, 0, 8) 33.3333vw, rgb(57, 0, 8) 66.6667vw, rgb(16, 15, 18) 106.667vw, rgb(16, 15, 18) 100%); margin-top: -2.26667%; padding-top: 6.26667%; padding-bottom: 10.6667%; } #about .rebirthSec__leadtext { margin-inline: auto; margin-top: 4.13333%; } #about .rebirthSec__stroy { position: relative; margin-top: 5.33333%; } @media screen and (min-width: 769px) { #about .rebirthSec { background-image: url(""), linear-gradient(transparent 10.4167vw, rgb(57, 0, 8) 10.4167vw, rgb(57, 0, 8) 41.6667vw, rgb(16, 15, 18) 52.0833vw, rgb(16, 15, 18) 100%); margin-top: -6.30208%; padding-top: 2.44792%; padding-bottom: 5.20833%; } #about .rebirthSec__hdg { width: 34.1667%; } #about .rebirthSec__leadtext { width: 38.8542%; margin-top: 1.77083%; } #about .rebirthSec__stroy { margin-top: 2.23958%; } } #about .storyBlock { width: 100%; margin-inline: auto; } #about .storyBlock__inner { margin-top: -31.2%; } #about .storyBlock__subhl { position: relative; width: 18.5333%; margin-left: 6.26667%; } #about .storyBlock__text { position: relative; width: 100%; margin-top: 3.46667%; } #about .storyBlock__text img { display: block; mask-repeat: no-repeat; mask-position: 0% 0%; mask-image: linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 100% 300%; } #about .storyBlock__picList { width: 86.6667%; margin-inline: auto; margin-top: 12%; display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(.04 * (100vw - var(--scrollbarW))); } #about .storyBlock__picList li:first-of-type { grid-column: span 2 / span 2; } #about .storyBlock__picList li:nth-of-type(2) { grid-row-start: 2; } #about .storyBlock__picList li:nth-of-type(3) { grid-row-start: 2; } #about .storyBlock__picFrame { display: block; position: relative; background-color: rgba(2, 10, 11, 0.8); padding: 0.533333vw; } #about .storyBlock__picFrame::before, #about .storyBlock__picFrame::after { content: ""; display: block; position: absolute; inset: 0px; pointer-events: none; } #about .storyBlock__picFrame::before { border: 1px solid rgb(9, 62, 95); } #about .storyBlock__picFrame::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.5; } #about .storyBlock__picFrame span { display: block; } #about .storyBlock__charaBlock { width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #about .storyBlock__charaBlock dt { display: block; background-color: rgb(9, 49, 79); width: 43.8462%; margin-inline: auto; font-family: "M PLUS 1p"; font-weight: 300; font-size: 2.66667vw; text-align: center; padding: 0.5em; position: relative; z-index: 1; } #about .storyBlock__charaBlock dt::before, #about .storyBlock__charaBlock dt::after { content: ""; display: block; position: absolute; top: 0px; width: 1.75439%; height: 100%; border-width: 1px 0.266667vw; border-style: solid; border-color: rgb(67, 155, 181); border-image: initial; } #about .storyBlock__charaBlock dt::before { left: 0px; border-right: none; } #about .storyBlock__charaBlock dt::after { right: 0px; border-left: none; } #about .storyBlock__charaBlock dd { position: relative; margin-top: -3.53846%; } #about .storyBlock__navText { position: relative; width: 100%; margin-inline: auto; margin-top: 5.99369%; } #about .storyBlock__charaList { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.0266666667 * (100vw - var(--scrollbarW))); padding-block: 3.15457%; padding-inline: 2em; } #about .storyBlock__charaList li { width: calc(.1333333333 * (100vw - var(--scrollbarW))); } @media screen and (min-width: 769px) { #about .storyBlock__inner { width: 89.5833%; margin-inline: auto; margin-top: -29.2708%; display: grid; grid-template-columns: 52.3256% 42.1512%; grid-template-rows: auto 1fr; column-gap: 5.52326%; } #about .storyBlock__subhl { width: 13.931%; margin-top: 9.7931%; margin-left: 0.689655%; grid-column-start: 2; grid-row-start: 1; } #about .storyBlock__text { width: 96.4138%; margin-top: 3.86207%; grid-column-start: 2; grid-row-start: 2; } #about .storyBlock__picList { width: 100%; height: min-content; margin-inline: auto 0px; margin-top: 0px; gap: 1.5625vw 1.04167vw; grid-row: 1 / span 2; grid-column-start: 1; } #about .storyBlock__picFrame { padding: 0.208333vw; } #about .storyBlock__charaBlock { width: 89.5833%; margin-inline: auto; margin-top: 2.60417%; } #about .storyBlock__charaBlock dt { width: 16.5698%; font-size: 1.04167vw; z-index: 1; } #about .storyBlock__charaBlock dt::before, #about .storyBlock__charaBlock dt::after { border-left-width: 0.104167vw; border-right-width: 0.104167vw; } #about .storyBlock__charaBlock dd { margin-top: -1.33721%; } #about .storyBlock__navText { width: 48.7104%; margin-inline: auto; margin-top: 2.22743%; } #about .storyBlock__charaList { flex-wrap: nowrap; gap: calc(.0119791667 * (100vw - var(--scrollbarW))); padding-block: 1.46542%; } #about .storyBlock__charaList li { width: 5.86166%; } } #about .navBtn { display: block; position: relative; overflow: hidden; } #about .navBtn span { display: block; position: relative; } #about .navBtn span::before, #about .navBtn span::after { content: ""; display: block; position: absolute; inset: 0px; } #about .navBtn span::before { border-width: 6.66667vw; border-style: solid; border-color: rgb(79, 142, 160); transition: opacity 0.23s ease 0s, border-width 0.3s ease 0s; opacity: 0; } #about .navBtn span::after { border-width: 1px; border-style: solid; border-color: rgb(74, 88, 98); transition: border-color 0.23s ease 0s; } #about .navBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.2; transition: opacity 0.23s ease 0s; } #about .navBtn:hover span::before { opacity: 0.5; border-width: 3px; } #about .navBtn:hover span::after { border-color: rgb(79, 142, 160); } #about .navBtn:hover::after { opacity: 0.4; } #about .themesongSec { position: relative; background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 51.3333%; padding-bottom: 8%; } #about .themesongSec__block > dt { width: 74.4%; margin-inline: auto; } #about .themesongSec__block > dd { margin-top: 6%; } #about .themesongSec__list { width: fit-content; max-width: 93.3333%; margin-inline: auto; font-family: "M PLUS 1p"; font-size: 2.53333vw; } #about .themesongSec__list li span:first-of-type { color: rgb(255, 12, 12); } #about .themesongSec__list li + li { margin-top: 1em; } @media screen and (min-width: 769px) { #about .themesongSec { background-image: url(""); padding-top: 22.9688%; padding-bottom: 2.39583%; } #about .themesongSec__block > dt { width: 55.2083%; margin-inline: auto; } #about .themesongSec__block > dd { margin-top: 1.71875%; } #about .themesongSec__list { max-width: 89.5833%; font-size: 0.9375vw; } } #character { background-color: rgb(3, 25, 40); } #character .pageHead { z-index: inherit; } #character .pageHead::before, #character .pageHead::after { position: relative; z-index: 1; } #character .pageHead__logo, #character .pageHead__ttlWrap { z-index: 3; } #character .bgb { position: absolute; top: 0px; left: 50%; margin-left: 29.3333%; background: rgba(0, 0, 0, 0.4); width: 200%; height: 100%; transform: skew(-10deg); transform-origin: left top; } #character .bgb::before, #character .bgb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #character .bgb::before { background: rgba(0, 0, 0, 0.2); margin-left: -3.33333%; } #character .bgb::after { background: rgba(0, 0, 0, 0.3); margin-left: -2%; } #character .bgb.anmBe { transform: translate(-100%) skew(-10deg) scaleX(2); } #character .bgb.anmBe::before { margin-left: -66.6667%; width: 200%; } #character .bgb.anmBe::after { margin-left: -66.6667%; width: 200%; } #character .bgb.anmStart { animation: 0.5s cubic-bezier(0, 0.75, 0.12, 1) 0.8s 1 normal forwards running bgbAnm; } #character .bgb.anmStart::before { animation: 0.8s cubic-bezier(0, 0.75, 0.12, 1) 1.1s 1 normal forwards running bgbAnmBefore; } #character .bgb.anmStart::after { animation: 0.8s cubic-bezier(0, 0.75, 0.12, 1) 1s 1 normal forwards running bgbAnmAfter; } @keyframes bgbAnm { 0% { transform: translate(-100%) skew(-10deg) scaleX(2); } 100% { transform: translate(0px) skew(-10deg) scaleX(1); } } @keyframes bgbAnmBefore { 0% { margin-left: -66.6667%; } 100% { margin-left: -3.33333%; } } @keyframes bgbAnmAfter { 0% { margin-left: -66.6667%; } 100% { margin-left: -2%; } } @media screen and (min-width: 769px) { #character .bgb { margin-left: 19.7917vw; width: 100%; transform: skew(-13deg); } } #character .secCharacter { position: relative; background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-top: 62.5333%; padding-bottom: 21.3333%; z-index: auto; } #character .secCharacter__bustshot, #character .secCharacter__addBustshot { position: absolute; top: 0px; left: 0px; width: 100%; z-index: 2; pointer-events: none; } #character .secCharacter__full, #character .secCharacter__addFull { position: absolute; top: 0px; right: 0px; z-index: 4; } #character .secCharacter__detail { position: relative; margin-inline: auto; z-index: 5; } #character .secCharacter .charaDetail { width: 86.6667%; position: relative; color: rgb(255, 255, 255); } #character .secCharacter .charaDetail__line { width: 100%; } #character .secCharacter .charaDetail__name { width: 100%; position: relative; margin-top: 5.38462%; } #character .secCharacter .charaDetail__name__en { position: relative; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); padding: 0.3em 0px 0.4em 0.85em; font-size: 3.46667vw; font-family: Oswald; font-weight: 300; letter-spacing: 0.07em; } #character .secCharacter .charaDetail__name__en span { color: rgb(200, 200, 200); font-weight: 200; } #character .secCharacter .charaDetail__name__en::before { content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 7px; height: 100%; background-color: rgba(154, 0, 0, 0.6); border-left: 4px solid rgb(154, 0, 0); } #character .secCharacter .charaDetail__name__ja { margin-top: 0.4em; margin-left: -0.1em; font-size: 6.93333vw; font-family: "M PLUS 1p"; font-weight: 300; letter-spacing: -0.05em; text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px, rgba(0, 0, 0, 0.5) 1px 1px 3px; } #character .secCharacter .charaDetail__name__ja span { font-family: "Noto Sans JP"; font-size: 6.4vw; margin: 0px -0.1em; } #character .secCharacter .charaDetail__addName { position: absolute; inset: 0px; } #character .secCharacter .charaDetail__cv { position: relative; margin-top: 1em; display: inline-flex; border: 1px solid rgb(154, 0, 0); background-color: rgba(13, 16, 14, 0.5); width: auto; border-radius: 2em; overflow: hidden; } #character .secCharacter .charaDetail__cv dt { background-color: rgba(154, 0, 0, 0.6); padding: 0.3em 0.7em 0.3em 1em; font-size: 3.2vw; font-family: Oswald; font-weight: 200; letter-spacing: 0.07em; display: flex; align-items: center; } #character .secCharacter .charaDetail__cv dd { padding: 0.3em 1em 0.3em 0.7em; font-size: 3.73333vw; font-family: "M PLUS 1p"; font-weight: 300; } #character .secCharacter .charaDetail__text { margin-top: 1.3em; font-size: 3.73333vw; font-family: "M PLUS 1p"; font-weight: 300; letter-spacing: -0.04em; line-height: 1.81; text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px, rgba(0, 0, 0, 0.5) 1px 1px 3px; } #character .secCharacter .charaDetail__defText { position: relative; display: block; } #character .secCharacter .charaDetail__addText { position: absolute; left: 0px; top: 0px; } #character .secCharacter .charaDetail__boxsWrap { margin-top: 9.23077%; } #character .secCharacter .charaDetail__box.--itemPic { overflow: visible; } #character .secCharacter .charaDetail__box.--itemWeapon { margin-top: 7.69231%; overflow: visible; } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame { background: none; } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame::before { content: ""; display: block; position: absolute; inset: 0px; border: 4px solid rgb(94, 10, 10); } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame .baseFrame__inFrame { background: linear-gradient(0deg, rgba(13, 49, 90, 0.6), rgba(8, 73, 129, 0.9)); } #character .secCharacter .charaDetail__box.--itemWeapon .--weaponText.baseFrame .baseFrame__inFrame::after { content: ""; display: block; position: absolute; inset: 0px; border: 3px solid rgb(0, 56, 109); } #character .secCharacter .charaDetail__changeBtn { position: absolute; top: 0px; right: 0px; margin-top: 40.7692%; width: 12.9231%; } #character .secCharacter#cloud { background-image: url(""); } #character .secCharacter#cloud .secCharacter__full { width: 45.3333%; margin-top: 6.4%; margin-right: 2%; } #character .secCharacter#aerith { background-image: url(""); } #character .secCharacter#aerith .secCharacter__full { width: 70.8%; margin-top: 15.2%; margin-right: 2%; } #character .secCharacter#barret { background-image: url(""); } #character .secCharacter#barret .secCharacter__full { width: 56%; margin-top: 11.0667%; margin-right: 1.6%; } #character .secCharacter#tifa { background-image: url(""); } #character .secCharacter#tifa .secCharacter__full { width: 33.3333%; margin-top: 12.2667%; margin-right: 7.86667%; } #character .secCharacter#redxiii { background-image: url(""); } #character .secCharacter#redxiii .secCharacter__full { width: 124.933%; margin-top: 38.4%; margin-right: -63.0667%; } #character .secCharacter#redxiii .charaDetail__name__en span { display: inline-flex; width: 4.53333vw; } #character .secCharacter#redxiii .charaDetail__name__ja { display: inline-flex; align-items: center; } #character .secCharacter#redxiii .charaDetail__name__ja span { display: flex; align-items: center; width: 9.6vw; margin-left: 0.3em; } #character .secCharacter#yuffie { background-image: url(""); } #character .secCharacter#yuffie .secCharacter__full { width: 63.2%; margin-top: -4.4%; margin-right: 1.6%; } #character .secCharacter#caitsith { background-image: url(""); } #character .secCharacter#caitsith .secCharacter__full { width: 86.2667%; margin-top: 12.6667%; margin-right: -18.4%; } #character .secCharacter#caitsith .secCharacter__addFull { width: 72%; margin-top: 17.6%; margin-right: -9.6%; } #character .secCharacter#caitsith .charaDetail__name__ja { letter-spacing: -0.1em; } #character .secCharacter#vincent { background-image: url(""); } #character .secCharacter#vincent .secCharacter__full { width: 57.3333%; margin-top: 2%; margin-right: -14.4%; } #character .secCharacter#cid { background-image: url(""); } #character .secCharacter#cid .secCharacter__full { width: 37.0667%; margin-top: 6%; margin-right: 4.26667%; } #character .secCharacter#rufus { background-image: url(""); } #character .secCharacter#rufus .secCharacter__full { width: 36.1333%; margin-top: 10.8%; margin-right: 3.86667%; } #character .secCharacter#tseng { background-image: url(""); } #character .secCharacter#tseng .secCharacter__full { width: 33.2%; margin-top: 10.9333%; margin-right: 2%; } #character .secCharacter#reno { background-image: url(""); } #character .secCharacter#reno .secCharacter__full { width: 30%; margin-top: 9.6%; margin-right: 4.93333%; } #character .secCharacter#rude { background-image: url(""); } #character .secCharacter#rude .secCharacter__full { width: 28.1333%; margin-top: 10.9333%; margin-right: 5.2%; } #character .secCharacter#elena { background-image: url(""); } #character .secCharacter#elena .secCharacter__full { width: 29.6%; margin-top: 13.8667%; margin-right: 9.2%; } #character .secCharacter#sephiroth { background-image: url(""); } #character .secCharacter#sephiroth .secCharacter__full { width: 68.1333%; margin-top: 11.4667%; margin-right: 3.46667%; } #character .secCharacter#zack { background-image: url(""); } #character .secCharacter#zack .secCharacter__full { width: 34.5333%; margin-top: 6.93333%; margin-right: 6.8%; } @media screen and (max-width: 768px) { #character .secCharacter#redxiii .charaDetail__name__en { background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 50%); } #character .secCharacter#vincent .charaDetail__name__ja { letter-spacing: -0.13em; } } @media screen and (min-width: 769px) { #character .secCharacter { padding-top: 8.33333%; padding-bottom: 15.625%; background-size: cover; overflow: hidden; } #character .secCharacter__bustshot, #character .secCharacter__addBustshot { height: 100%; } #character .secCharacter__bustshot img, #character .secCharacter__addBustshot img { width: 100%; height: 100%; object-fit: cover; } #character .secCharacter__detail { left: 50%; margin: 0px 0px 0px -6.77083%; } #character .secCharacter .charaDetail { width: 34.8958%; } #character .secCharacter .charaDetail__name { margin-top: 4.47761%; } #character .secCharacter .charaDetail__name__en { width: 41.791%; font-size: 0.833333vw; } #character .secCharacter .charaDetail__name__en::before { width: 6px; border-left-width: 3px; } #character .secCharacter .charaDetail__name__ja { font-size: 1.97917vw; } #character .secCharacter .charaDetail__name__ja span { font-size: 1.45833vw; } #character .secCharacter .charaDetail__cv { margin-top: 0.55em; } #character .secCharacter .charaDetail__cv dt { font-size: 0.78125vw; letter-spacing: 0.07em; } #character .secCharacter .charaDetail__cv dd { font-size: 0.833333vw; } #character .secCharacter .charaDetail__text { width: 149.254%; margin-top: 1em; font-size: 0.9375vw; letter-spacing: 0.04em; line-height: 1.61; min-height: 105px; height: 9.3em; } #character .secCharacter .charaDetail__boxsWrap { margin-top: 4.47761%; width: 120.597%; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; } #character .secCharacter .charaDetail__box { width: auto; } #character .secCharacter .charaDetail__box.--itemPic { width: 40.099%; } #character .secCharacter .charaDetail__box.--itemWeapon { width: 57.4257%; margin: 0px; z-index: 0; } #character .secCharacter .charaDetail__box.--itemWeapon .baseFrame::before { border-width: 3px; } #character .secCharacter .charaDetail__box.--itemWeapon .baseFrame__inFrame::after { border-width: 4px; } #character .secCharacter .charaDetail__box a.baseFrame { transform-origin: center center; transition: all 0.15s ease-in-out 0s; box-shadow: rgba(67, 155, 181, 0) 0px 0px 60px 30px; } #character .secCharacter .charaDetail__box a.baseFrame:hover { box-shadow: rgba(67, 155, 181, 0.7) 0px 0px 6px 3px; transform: scale(1.05); } #character .secCharacter .charaDetail__changeBtn { top: inherit; bottom: 0px; margin-top: 0px; margin-right: -35.5224%; width: 10.4478%; cursor: pointer; } #character .secCharacter .charaDetail__changeBtn img { transform: rotate3d(0, 0, 0, 0deg); filter: brightness(1); } #character .secCharacter .charaDetail__changeBtn:hover img { transition: transform 0.6s ease 0s; transform: rotateY(360deg); filter: brightness(1.3); } #character .secCharacter#cloud { background-image: url(""); } #character .secCharacter#cloud .secCharacter__full { width: 17.7083%; margin-top: 0.885417%; margin-right: 8.4375%; } #character .secCharacter#aerith { background-image: url(""); } #character .secCharacter#aerith .secCharacter__full { width: 27.6562%; margin-top: 3.33333%; margin-right: 8.22917%; } #character .secCharacter#barret { background-image: url(""); } #character .secCharacter#barret .secCharacter__full { width: 21.875%; margin-top: 2.44792%; margin-right: 7.91667%; } #character .secCharacter#tifa { background-image: url(""); } #character .secCharacter#tifa .secCharacter__full { width: 13.0208%; margin-top: 3.28125%; margin-right: 11.25%; } #character .secCharacter#redxiii { background-image: url(""); } #character .secCharacter#redxiii .secCharacter__full { width: 48.8021%; margin-top: 1.25%; margin-right: -11.25%; } #character .secCharacter#redxiii .charaDetail__name__en span { width: 1.14583vw; min-width: 13px; } #character .secCharacter#redxiii .charaDetail__name__ja span { width: 2.60417vw; min-width: 16px; margin-left: 0.3em; } #character .secCharacter#yuffie { background-image: url(""); } #character .secCharacter#yuffie .secCharacter__full { width: 24.6875%; margin-top: -2.8125%; margin-right: 8.69792%; } #character .secCharacter#caitsith { background-image: url(""); } #character .secCharacter#caitsith .secCharacter__full { width: 33.6979%; margin-top: 1.51042%; margin-right: 1.14583%; } #character .secCharacter#caitsith .secCharacter__addFull { width: 31.8229%; margin-top: 1.71875%; margin-right: 1.82292%; } #character .secCharacter#vincent { background-image: url(""); } #character .secCharacter#vincent .secCharacter__full { width: 22.3958%; margin-top: 0.520833%; margin-right: 1.97917%; } #character .secCharacter#cid { background-image: url(""); } #character .secCharacter#cid .secCharacter__full { width: 14.4792%; margin-top: 2.8125%; margin-right: 10.7812%; } #character .secCharacter#rufus { background-image: url(""); } #character .secCharacter#rufus .secCharacter__full { width: 14.1146%; margin-top: 2.44792%; margin-right: 11.3542%; } #character .secCharacter#tseng { background-image: url(""); } #character .secCharacter#tseng .secCharacter__full { width: 12.9688%; margin-top: 2.1875%; margin-right: 10.7292%; } #character .secCharacter#reno { background-image: url(""); } #character .secCharacter#reno .secCharacter__full { width: 11.7188%; margin-top: 2.76042%; margin-right: 13.2292%; } #character .secCharacter#rude { background-image: url(""); } #character .secCharacter#rude .secCharacter__full { width: 10.9896%; margin-top: 2.55208%; margin-right: 11.0938%; } #character .secCharacter#elena { background-image: url(""); } #character .secCharacter#elena .secCharacter__full { width: 11.5625%; margin-top: 3.4375%; margin-right: 13.0208%; } #character .secCharacter#sephiroth { background-image: url(""); } #character .secCharacter#sephiroth .secCharacter__full { width: 26.6146%; margin-top: 1.30208%; margin-right: 6.35417%; } #character .secCharacter#zack { background-image: url(""); } #character .secCharacter#zack .secCharacter__full { width: 13.4896%; margin-top: 0.625%; margin-right: 10.6771%; } #character .secCharacter#vincent .charaDetail, #character .secCharacter#cid .charaDetail, #character .secCharacter#rufus .charaDetail, #character .secCharacter#tseng .charaDetail, #character .secCharacter#reno .charaDetail, #character .secCharacter#rude .charaDetail, #character .secCharacter#elena .charaDetail, #character .secCharacter#sephiroth .charaDetail, #character .secCharacter#zack .charaDetail { padding-bottom: 11.1458%; } } #character .navArea { width: 86.6667%; margin-inline: auto; margin-top: 13.3333%; position: relative; z-index: 10; --barW1: calc(4/750*100vw); --barW2: calc(8/750*100vw); --color1: #268dac; --color2: #2d495d; background-image: linear-gradient(90deg,var(--color1) var(--barW1),transparent var(--barW1),transparent calc(100% - var(--barW1)),var(--color1) calc(100% - var(--barW1))),linear-gradient(90deg,var(--color2) var(--barW2),transparent var(--barW2),transparent calc(100% - var(--barW2)),var(--color2) calc(100% - var(--barW2))); padding: 0px 1.06667%; } @media screen and (min-width: 769px) { #character .navArea { width: fit-content; margin-top: 0px; position: absolute; bottom: 0px; left: 50%; transform: translate(-50%); margin-bottom: 4.89583%; } #character .navArea.--fixed { position: fixed; } #character .navArea { --barW1: calc(4/1920*100vw); --barW2: calc(7/1920*100vw); padding: 0px 0.364583%; display: flex; justify-content: center; gap: 0px; } } #character .navBlock { position: relative; width: 100%; padding-top: 1px; padding-bottom: 7.88644%; border-bottom: 1px solid rgb(74, 88, 98); } #character .navBlock::before, #character .navBlock::after { content: ""; display: block; position: absolute; left: 0px; width: 100%; height: 1px; background-color: rgb(46, 57, 69); } #character .navBlock::before { top: 1px; } #character .navBlock::after { bottom: 1px; } #character .navBlock dt { position: relative; width: 71.9243%; margin-inline: auto; margin-top: -3.94322%; } #character .navBlock dd { width: 100%; } #character .navBlock dd + dd { border-top: 1px solid rgb(74, 88, 98); --posiL: calc(27/634*100%); --posiR: calc(100% - (27/634*100%)); border-image: linear-gradient(to right,transparent var(--posiL),#4a5862 var(--posiL),#4a5862 var(--posiR),transparent var(--posiR)) 1; margin-top: 3.15457%; } #character .navBlock dd p { width: 91.4826%; margin-inline: auto; margin-top: 3.15457%; } #character .navBlock dd ul { width: 93.6909%; margin-inline: auto; margin-top: 3.15457%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.66667vw 3.15457%; } #character .navBlock dd ul li { width: 16.835%; } #character .navBlock.--typeA::before { display: none; } #character .navBlock.--typeA { background-color: rgba(0, 14, 33, 0.8); } #character .navBlock.--typeB { border-bottom: none; padding-bottom: 4.73186%; } #character .navBlock.--typeB::after { display: none; } #character .navBlock.--typeB { background-color: rgba(36, 0, 7, 0.8); } @media screen and (min-width: 769px) { #character .navBlock { background-position: center bottom; background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 0.572917vw; border-bottom: none; border-right: 1px solid rgb(74, 88, 98); } #character .navBlock::before, #character .navBlock::after { width: 1px; height: 100%; } #character .navBlock::before { top: 0px; left: 1px; } #character .navBlock::after { bottom: 0px; left: calc(100% - 2px); } #character .navBlock dt { margin-top: -1.19792vw; margin-bottom: 0.416667vw; } #character .navBlock dd + dd { border-top: none; margin-top: 0px; margin-left: calc(.0109375 * (100vw - var(--scrollbarW))); } #character .navBlock dd p { width: 100%; margin-top: 0px; position: relative; left: 50%; transform: translate(-50%); } #character .navBlock dd ul { width: 100%; margin-top: 0.416667vw; flex-wrap: nowrap; gap: 0 calc(.0026041667 * (100vw - var(--scrollbarW))); position: relative; } #character .navBlock dd ul li { width: calc(.021875 * (100vw - var(--scrollbarW))); } #character .navBlock dd:nth-of-type(n+2) ul::before { content: ""; display: block; position: absolute; top: 0px; left: -0.572917vw; width: 1px; height: 100%; background-color: rgb(74, 88, 98); border: none; } #character .navBlock.--typeA { background-image: url(""); width: calc(.2395833333 * (100vw - var(--scrollbarW))); } #character .navBlock.--typeA dt { width: 41.8301%; } #character .navBlock.--typeA dd p { width: 100%; } #character .navBlock.--typeB { background-image: url(""); padding-bottom: 0.572917vw; border-right: none; width: calc(.2177083333 * (100vw - var(--scrollbarW))); } #character .navBlock.--typeB dt { width: 45.933%; margin-inline: 23.9234%; } #character .navBlock.--typeB dd:nth-of-type(1) { width: 10.0478%; } #character .navBlock.--typeB dd:nth-of-type(1) p { width: 128.571%; } #character .navBlock.--typeB dd:nth-of-type(2) { width: 43.7799%; } #character .navBlock.--typeB dd:nth-of-type(3) { width: 21.2919%; } } #character .navBtn { display: block; position: relative; overflow: hidden; } #character .navBtn span { display: block; position: relative; } #character .navBtn span::before, #character .navBtn span::after { content: ""; display: block; position: absolute; inset: 0px; } #character .navBtn span::before { border-width: 6.66667vw; border-style: solid; border-color: rgb(79, 142, 160); opacity: 0; } #character .navBtn span::after { border-width: 1px; border-style: solid; border-color: rgb(74, 88, 98); } #character .navBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.2; } #character .navBtn.--current span::before { opacity: 0.5; border-width: 3px; } #character .navBtn.--current span::after { border-color: rgb(79, 142, 160); } #character .navBtn.--current::after { opacity: 0.4; } @media screen and (min-width: 769px) { #character .navBtn span::before { border-width: 1.04167vw; transition: opacity 0.23s ease 0s, border-width 0.3s ease 0s; } #character .navBtn span::after { transition: border-color 0.23s ease 0s; } #character .navBtn::after { transition: opacity 0.23s ease 0s; } #character .navBtn:hover span::before { opacity: 0.5; border-width: 3px; } #character .navBtn:hover span::after { border-color: rgb(79, 142, 160); } #character .navBtn:hover::after { opacity: 0.4; } } #character .btnDiagramBlock { position: relative; width: 53.6%; margin-inline: auto; margin-top: 6.66667%; } @media screen and (min-width: 769px) { #character .btnDiagramBlock { position: absolute; bottom: 0px; right: 0px; min-width: 7.39583%; width: fit-content; margin-inline: 0px; margin-top: 0px; margin-right: 2.60417%; margin-bottom: 5.72917%; } } #character .btnDiagram { display: block; text-decoration: none; color: rgb(255, 255, 255); font-size: 2.93333vw; position: relative; border: 1px solid rgb(74, 88, 98); } #character .btnDiagram::after { content: ""; display: block; position: absolute; inset: -1px; background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.2; } #character .btnDiagram__inner { position: relative; padding: 1em; } #character .btnDiagram__inner::before, #character .btnDiagram__inner::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100% 100%; z-index: 0; } #character .btnDiagram__inner::before { background-image: url(""); } #character .btnDiagram__inner span { position: relative; display: flex; justify-content: center; align-items: center; z-index: 1; letter-spacing: 0.05em; } @media screen and (min-width: 769px) { #character .btnDiagram { font-size: 0.833333vw; transition: all 0.23s ease 0s; } #character .btnDiagram__inner::before, #character .btnDiagram__inner::after { transition: opacity 0.23s ease 0s; } #character .btnDiagram__inner::before { background-image: url(""); } #character .btnDiagram__inner::after { background-image: url(""); opacity: 0; } #character .btnDiagram:hover { transform: scale(1.1); } #character .btnDiagram:hover .btnDiagram__inner::after { opacity: 1; } } #media { padding-top: 27.4667%; padding-bottom: 21.3333%; } #media::before { content: ""; position: absolute; inset: 0px; background-color: rgb(0, 8, 21); background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: 100%; z-index: 0; } #media.jsActive::before { position: fixed; } @media screen and (min-width: 769px) { #media { padding-top: 10.7292%; padding-bottom: 12.5%; } #media::before { background-image: url(""); z-index: 0; } } #media .movieSec { position: relative; } #media .movieSec__list { display: flex; flex-direction: column; justify-content: center; gap: 3.33333% 0px; width: 86.6667%; margin-inline: auto; } #media .movieSec__list li + li { margin-top: 4.61538%; } #media .movieSec__list li a { display: block; text-decoration: none; } @media screen and (min-width: 769px) { #media .movieSec__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(.03125 * (100vw - var(--scrollbarW))) calc(.0416666667 * (100vw - var(--scrollbarW))); width: 89.5833%; } #media .movieSec__list li { width: 100%; } #media .movieSec__list li + li { margin-top: 0px; } #media .movieSec__list li a { display: block; text-decoration: none; } #media .movieSec .basciVideoTtl { min-height: 2.5vw; margin-top: calc(.0078125 * (100vw - var(--scrollbarW))); } #media .movieSec .basciVideoTtl::before { width: 1.66667vw; margin-right: calc(.0067708333 * (100vw - var(--scrollbarW))); } #media .movieSec .basciVideoTtl::after { margin-right: calc(.0067708333 * (100vw - var(--scrollbarW))); } #media .movieSec .basciVideoTtl span { padding-block: 0em; font-size: 1.04167vw; letter-spacing: 0.05em; line-height: 1.4; margin-top: -0.25em; margin-bottom: -0.25em; } #media .movieSec .hoverAnm:hover img { filter: brightness(120%); } } #newsIndex, #newsArticle { position: relative; padding-top: 17.3333%; padding-bottom: 21.3333%; background: url("") center top / 100% no-repeat rgb(10, 20, 33); } @media screen and (min-width: 769px) { #newsIndex, #newsArticle { padding-top: 6.25%; padding-bottom: 7.29167%; background-image: url(""); } } #newsIndex .paginationSec, #newsArticle .paginationSec { position: relative; margin-top: 8%; } #newsIndex .paginationSec__list, #newsArticle .paginationSec__list { width: 86.6667%; margin-inline: auto; display: flex; flex-wrap: nowrap; justify-content: space-between; } #newsIndex .paginationSec__list li, #newsArticle .paginationSec__list li { width: 30.7692%; } #newsIndex .paginationBtn, #newsArticle .paginationBtn { display: flex; flex-wrap: nowrap; align-items: center; position: relative; color: rgb(67, 155, 181); font-family: Oswald; font-weight: 300; font-size: 4.8vw; text-decoration: none; cursor: pointer; } #newsIndex .paginationBtn::after, #newsArticle .paginationBtn::after { content: ""; display: block; background: rgb(67, 155, 181); width: 10%; height: 9.33333vw; clip-path: polygon(0% 0%, 30% 0%, 100% 50%, 30% 100%, 0% 100%, 70% 50%); } #newsIndex .paginationBtn.--top, #newsArticle .paginationBtn.--top { height: 100%; justify-content: center; align-items: center; margin: 0px auto; } #newsIndex .paginationBtn.--top::after, #newsArticle .paginationBtn.--top::after { display: none; } #newsIndex .paginationBtn.--prev, #newsArticle .paginationBtn.--prev { justify-content: flex-end; flex-direction: row-reverse; } #newsIndex .paginationBtn.--prev::after, #newsArticle .paginationBtn.--prev::after { transform: rotate(180deg); margin-right: 0.5em; } #newsIndex .paginationBtn.--next, #newsArticle .paginationBtn.--next { justify-content: flex-end; } #newsIndex .paginationBtn.--next::after, #newsArticle .paginationBtn.--next::after { margin-left: 0.5em; } #newsIndex .paginationBtn.--disabled, #newsArticle .paginationBtn.--disabled { opacity: 0.4; cursor: auto; pointer-events: none; } @media screen and (min-width: 769px) { #newsIndex .paginationSec, #newsArticle .paginationSec { margin-top: 2.08333%; } #newsIndex .paginationSec__list, #newsArticle .paginationSec__list { width: 89.5833%; } #newsIndex .paginationSec__list li, #newsArticle .paginationSec__list li { width: 8.72093%; } #newsIndex .paginationBtn, #newsArticle .paginationBtn { font-weight: 400; font-size: 1.25vw; } #newsIndex .paginationBtn::after, #newsArticle .paginationBtn::after { width: 11.3333%; height: 3.54167vw; } #newsIndex .paginationBtn.--prev::after, #newsArticle .paginationBtn.--prev::after { margin-right: 1em; } #newsIndex .paginationBtn.--next::after, #newsArticle .paginationBtn.--next::after { margin-left: 1em; } #newsIndex .paginationBtn, #newsArticle .paginationBtn { transition: transform 0.5s cubic-bezier(0.33, 1.77, 0.62, 0.78) 0s; } #newsIndex .paginationBtn:not(.--disabled):hover, #newsArticle .paginationBtn:not(.--disabled):hover { transform: scale(1.2); } } #newsIndex .tabSec { background-color: rgba(0, 0, 0, 0.7); padding-top: 1.33333%; padding-bottom: 2.66667%; } #newsIndex .tabSec__hl { width: 47.4667%; margin-inline: auto; margin-top: -4.26667%; } #newsIndex .tabSec__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.66667vw 0.533333vw; } #newsIndex .tabSec.--category { margin-top: 4%; } #newsIndex .tabSec.--category li { width: 28.5333%; } #newsIndex .tabSec.--category li:first-child { width: 86.6667%; } #newsIndex .tabSec.--filter { margin-top: 9.33333%; } #newsIndex .tabSec.--filter .tabSec__list { margin-top: 2.13333%; } #newsIndex .tabSec.--filter li { width: 21.2%; } #newsIndex .tabSec.--filter li:first-child { width: 86.6667%; } #newsIndex .tabSec__btn { display: block; position: relative; cursor: pointer; } #newsIndex .tabSec__btn::before { content: ""; display: block; width: 100%; height: clamp(3px, 0.8vw, 6px); position: absolute; left: 0px; bottom: 0px; background-color: rgb(0, 0, 0); opacity: 0; transition: all 0.3s ease 0s; } #newsIndex .tabSec__btn::after { content: ""; display: block; position: absolute; inset: 0px; background-color: rgb(255, 255, 255); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.23s ease 0s; } #newsIndex .tabSec__btn.--current::before { opacity: 1; bottom: -1.6vw; } #newsIndex .tabSec__btn.--disabled { opacity: 0.5; pointer-events: none; cursor: auto; } #newsIndex .tabSec__btn.--disabled::before { opacity: 0 !important; bottom: 0px !important; } #newsIndex .tabSec__btn[data-category="all"] { background: rgb(0, 80, 145); } #newsIndex .tabSec__btn[data-category="all"]::before { background-color: rgb(0, 80, 145); } #newsIndex .tabSec__btn[data-category="information"] { background: rgb(147, 0, 38); } #newsIndex .tabSec__btn[data-category="information"]::before { background-color: rgb(147, 0, 38); } #newsIndex .tabSec__btn[data-category="campaign"] { background: rgb(185, 95, 0); } #newsIndex .tabSec__btn[data-category="campaign"]::before { background-color: rgb(185, 95, 0); } #newsIndex .tabSec__btn[data-category="movie"] { background: rgb(32, 124, 0); } #newsIndex .tabSec__btn[data-category="movie"]::before { background-color: rgb(32, 124, 0); } #newsIndex .tabSec__btn[data-pf="all"] { background: rgb(37, 88, 129); } #newsIndex .tabSec__btn[data-pf="all"]::before { background-color: rgb(37, 88, 129); } #newsIndex .tabSec__btn[data-pf="sw2"] { background-color: rgb(132, 0, 0); } #newsIndex .tabSec__btn[data-pf="sw2"]::before { background-color: rgb(132, 0, 0); } #newsIndex .tabSec__btn[data-pf="xboxwin"] { background-color: rgb(16, 124, 15); } #newsIndex .tabSec__btn[data-pf="xboxwin"]::before { background-color: rgb(16, 124, 15); } #newsIndex .tabSec__btn[data-pf="ps5"] { background-color: rgb(1, 63, 153); } #newsIndex .tabSec__btn[data-pf="ps5"]::before { background-color: rgb(1, 63, 153); } #newsIndex .tabSec__btn[data-pf="pc"] { background-color: rgb(62, 70, 100); } #newsIndex .tabSec__btn[data-pf="pc"]::before { background-color: rgb(62, 70, 100); } @media screen and (min-width: 769px) { #newsIndex .tabSec { padding-top: 0.46875%; padding-bottom: 0.46875%; } #newsIndex .tabSec__hl { width: 15.1042%; margin-top: -1.40625%; } #newsIndex .tabSec__list { flex-wrap: nowrap; gap: 0px 0.208333vw; } #newsIndex .tabSec.--category { margin-top: 3.125%; } #newsIndex .tabSec.--category li, #newsIndex .tabSec.--category li:first-child { width: 15.625%; } #newsIndex .tabSec.--filter { margin-top: 3.125%; } #newsIndex .tabSec.--filter .tabSec__list { margin-top: 1.04167%; } #newsIndex .tabSec.--filter li, #newsIndex .tabSec.--filter li:first-child { width: 11.4583%; } #newsIndex .tabSec__btn::before { height: clamp(2px,.0020833333 * (100vw - var(--scrollbarW)),4px); } #newsIndex .tabSec__btn:hover:not(.--current)::after { opacity: 0.6; } #newsIndex .tabSec__btn.--current::before, #newsIndex .tabSec__btn:hover::before { opacity: 1; bottom: max(-.0067708333 * (100vw - var(--scrollbarW)),-13px); } } #newsIndex .newsListSec { width: 86.6667%; margin-inline: auto; margin-top: 8%; } #newsIndex .newsListSec > ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: calc(.0253333333 * (100vw - var(--scrollbarW))); } #newsIndex .newsListSec > ul > li { width: 48.4615%; display: flex; height: auto; } @media screen and (min-width: 769px) { #newsIndex .newsListSec { width: 89.5833%; margin-top: 3.125%; } #newsIndex .newsListSec > ul { gap: calc(.0208333333 * (100vw - var(--scrollbarW))) calc(.0135416667 * (100vw - var(--scrollbarW))); } #newsIndex .newsListSec > ul > li { width: 23.8372%; } } #newsIndex .newsItemFrame { position: relative; display: flex; flex-direction: column; text-decoration: none; width: 100%; background-color: rgb(94, 10, 10); background-repeat: no-repeat; --bar: calc(4/315*100%); background-image: linear-gradient(90deg,#268dac var(--bar),transparent var(--bar),transparent calc(100% - var(--bar)),#268dac calc(100% - var(--bar))); background-size: 100% 100%; background-position: center top; } #newsIndex .newsItemFrame__inFrame { position: relative; width: 100%; height: 100%; padding: 1.46667vw 2vw; } #newsIndex .newsItemFrame__inFrame::before, #newsIndex .newsItemFrame__inFrame::after { content: ""; display: block; position: absolute; inset: 0.533333vw 1.06667vw; pointer-events: none; } #newsIndex .newsItemFrame__inFrame::before { border: 1px solid rgba(22, 104, 147, 0.5); background-color: rgb(0, 35, 67); background-repeat: no-repeat; --bar: calc(4/315*100%); background-image: radial-gradient(closest-side, rgba(48, 103, 149, 0.5), rgba(48, 103, 149, 0)); background-size: 200% 25.3333vw; background-position: left 50% bottom -12.6667vw; } #newsIndex .newsItemFrame__inFrame::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; } @media screen and (min-width: 769px) { #newsIndex .newsItemFrame { --bar: 1%; background-image: linear-gradient(90deg,#268dac var(--bar),transparent var(--bar),transparent calc(100% - var(--bar)),#268dac calc(100% - var(--bar))); } #newsIndex .newsItemFrame__inFrame { padding: calc(.0057291667 * (100vw - var(--scrollbarW))) calc(.0078125 * (100vw - var(--scrollbarW))); } #newsIndex .newsItemFrame__inFrame::before, #newsIndex .newsItemFrame__inFrame::after { inset: calc(.0020833333 * (100vw - var(--scrollbarW))) calc(.0041666667 * (100vw - var(--scrollbarW))); } #newsIndex .newsItemFrame__inFrame::before { background-size: 150% 9.89583vw; background-position: left 50% bottom -4.94792vw; } } #newsIndex .newsArticle { display: flex; flex-direction: column; height: 100%; position: relative; } #newsIndex .newsArticle__thumb { position: relative; } #newsIndex .newsArticle__detail { margin-top: 1.86667vw; font-family: "Noto Sans JP"; display: flex; flex-direction: column; align-items: stretch; height: 100%; } #newsIndex .newsArticle__date { font-weight: 300; font-size: 2.4vw; color: rgb(0, 192, 232); } #newsIndex .newsArticle__category { width: 17.3333vw; margin-top: calc(-.0306666667 * (100vw - var(--scrollbarW))); align-self: flex-end; position: relative; } #newsIndex .newsArticle__category::before, #newsIndex .newsArticle__category::after { content: ""; display: block; position: absolute; top: 0px; width: 3.84615%; height: 100%; border-width: 1px 0.4vw; border-style: solid; border-color: rgba(255, 255, 255, 0.3); border-image: initial; } #newsIndex .newsArticle__category::before { left: 0px; border-right: none; } #newsIndex .newsArticle__category::after { right: 0px; border-left: none; } #newsIndex .newsArticle__category img { display: block; } #newsIndex .newsArticle__text { margin-top: 0.4em; margin-bottom: 0.6em; font-weight: 400; font-size: 2.66667vw; color: rgb(255, 255, 255); font-feature-settings: "palt"; letter-spacing: 0.05em; line-height: 1.61; overflow-wrap: anywhere; } #newsIndex .newsArticle__platform { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(.0106666667 * (100vw - var(--scrollbarW))) 2.8070175439%; } #newsIndex .newsArticle__platform .newsPlatform { display: block; position: relative; width: 48.0702%; background-color: rgba(8, 34, 46, 0.8); } #newsIndex .newsArticle__platform .newsPlatform::before, #newsIndex .newsArticle__platform .newsPlatform::after { content: ""; display: block; position: absolute; inset: 0px; } #newsIndex .newsArticle__platform .newsPlatform::before { border: 1px solid rgb(0, 0, 0); } #newsIndex .newsArticle__platform .newsPlatform::after { background-image: url(""), url(""), url(""), url(""); background-repeat: no-repeat; background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px; opacity: 0.3; } #newsIndex .newsArticle__platform .newsPlatform.--sw2::before { border-color: rgb(132, 0, 0); } #newsIndex .newsArticle__platform .newsPlatform.--xboxwin::before { border-color: rgb(16, 124, 15); } #newsIndex .newsArticle__platform .newsPlatform.--ps5::before { border-color: rgb(0, 130, 191); } #newsIndex .newsArticle__platform .newsPlatform.--pc::before { border-color: rgb(100, 113, 163); } #newsIndex .newsArticle__platform .newsPlatform img { display: block; margin-block: -0.666667vw; } #newsIndex [data-category="information"] .newsArticle__category { background-color: rgb(147, 0, 38); } #newsIndex [data-category="campaign"] .newsArticle__category { background-color: rgb(185, 95, 0); } #newsIndex [data-category="movie"] .newsArticle__category { background-color: rgb(32, 124, 0); } #newsIndex [data-category="movie"].newsItemFrame .newsArticle__thumb img { position: relative; vertical-align: top; } #newsIndex [data-category="movie"].newsItemFrame .newsArticle__thumb::after { content: ""; display: block; position: absolute; inset: 0px; background: url("") center center / 15% no-repeat; } @media screen and (min-width: 769px) { #newsIndex .newsArticle__detail { margin-top: 0.729167vw; } #newsIndex .newsArticle__date { font-size: 0.729167vw; } #newsIndex .newsArticle__category { width: 5.20833vw; margin-top: calc(-.009375 * (100vw - var(--scrollbarW))); } #newsIndex .newsArticle__category::before, #newsIndex .newsArticle__category::after { width: 5%; border-left-width: 0.15625vw; border-right-width: 0.15625vw; } #newsIndex .newsArticle__text { font-size: 0.833333vw; padding-bottom: 1em; } #newsIndex .newsArticle__platform { flex-wrap: nowrap; justify-content: flex-start; gap: calc(.0020833333 * (100vw - var(--scrollbarW))); } #newsIndex .newsArticle__platform .newsPlatform { width: calc(.0479166667 * (100vw - var(--scrollbarW))); } #newsIndex .newsArticle__platform .newsPlatform img { margin-block: 0px; } } #newsIndex .nowloadingScreen { position: absolute; inset: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 2; opacity: 0; visibility: hidden; } #newsIndex .nowloadingScreen::before { content: "NOW LOADING"; position: absolute; inset: 0px; color: rgb(255, 255, 255); display: flex; justify-content: center; align-items: center; } #newsArticle .tagCategory { width: 17.3333vw; position: relative; } #newsArticle .tagCategory::before, #newsArticle .tagCategory::after { content: ""; display: block; position: absolute; top: 0px; width: 3.84615%; height: 100%; border-width: 1px 0.4vw; border-style: solid; border-color: rgba(255, 255, 255, 0.3); border-image: initial; } #newsArticle .tagCategory::before { left: 0px; border-right: none; } #newsArticle .tagCategory::after { right: 0px; border-left: none; } #newsArticle .tagCategory img { display: block; } @media screen and (min-width: 769px) { #newsArticle .tagCategory { width: 5.20833vw; } #newsArticle .tagCategory::before, #newsArticle .tagCategory::after { width: 5%; border-left-width: 0.15625vw; border-right-width: 0.15625vw; } } #newsArticle [data-category="information"] .tagCategory { background-color: rgb(147, 0, 38); } #newsArticle [data-category="campaign"] .tagCategory { background-color: rgb(185, 95, 0); } #newsArticle [data-category="movie"] .tagCategory { background-color: rgb(32, 124, 0); } #newsArticle .articleTitleSec { position: relative; width: 100%; padding-top: 4%; padding-inline: 6.66667%; padding-bottom: 6.66667%; display: flex; flex-direction: column; color: rgb(255, 255, 255); } #newsArticle .articleTitleSec__cate-date { display: flex; flex-wrap: nowrap; align-items: center; } #newsArticle .articleTitleSec__category { margin-right: 1rem; } #newsArticle .articleTitleSec__date { font-size: 2.93333vw; text-shadow: rgb(153, 153, 153) 0px 0px 4px, rgb(0, 0, 0) 1px 1px 2px; } #newsArticle .articleTitleSec__ttl { width: 100%; font-size: 4.26667vw; font-feature-settings: "palt"; letter-spacing: 0.05em; text-shadow: rgb(153, 153, 153) 0px 0px 4px, rgb(0, 0, 0) 1px 1px 2px; line-height: 1.41; } #newsArticle .articleTitleSec__ttl::before, #newsArticle .articleTitleSec__ttl::after { content: ""; display: block; width: 0px; height: 0px; } #newsArticle .articleTitleSec__ttl::before { margin-top: calc(-0.205em); } #newsArticle .articleTitleSec__ttl::after { margin-bottom: calc(-0.205em); } #newsArticle .articleTitleSec__ttl { margin-top: 1rem; } @media screen and (min-width: 769px) { #newsArticle .articleTitleSec { min-height: 15.1042vw; padding-top: 2.60417%; padding-inline: 5.20833%; padding-bottom: 2.60417%; } #newsArticle .articleTitleSec__cate-date { margin-top: auto; } #newsArticle .articleTitleSec__date { font-size: 0.729167vw; } #newsArticle .articleTitleSec__ttl { font-size: 1.875vw; margin-top: 0.5em; } } #newsArticle .articleSec { position: relative; background: rgb(236, 236, 236); color: rgb(0, 0, 0); padding-top: 6.66667%; padding-bottom: 10.6667%; font-size: 2.93333vw; } #newsArticle .articleSec__inner { width: 86.6667%; margin: 0px auto; } #newsArticle .articleSec__inner h2 { border-width: 1px 4px; border-style: solid; border-color: rgb(163, 203, 216) rgb(32, 106, 130); padding: 0.6em 0.35em; margin-top: 3.5em; margin-bottom: 1.2em; font-size: 4vw; line-height: 1.41; font-feature-settings: "palt"; letter-spacing: 0.04em; } #newsArticle .articleSec__inner h2:first-child { margin-top: 0px; } #newsArticle .articleSec__inner h3 { border-left: 4px solid rgb(145, 9, 9); padding: 0.5em 0.35em; margin-top: 2.5em; margin-bottom: 1.2em; font-size: 4vw; font-weight: 400; line-height: 1.41; font-feature-settings: "palt"; letter-spacing: 0.04em; } #newsArticle .articleSec__inner h3:first-child { margin-top: 0px; } #newsArticle .articleSec__inner p { line-height: 1.81; } #newsArticle .articleSec__inner p + p { margin-top: 2em; } #newsArticle .articleSec__inner p + ul { margin-top: 1em; } #newsArticle .articleSec__inner a { text-decoration: underline; color: rgb(195, 13, 35); } #newsArticle .articleSec__inner ul { margin-top: 2em; } #newsArticle .articleSec__inner ul li + li { margin-top: 1em; } #newsArticle .articleSec__inner table { border: none; border-collapse: separate; border-spacing: 5px; } #newsArticle .articleSec__inner th, #newsArticle .articleSec__inner td { padding: 1em; line-height: 1.41; } #newsArticle .articleSec__inner th { background-color: rgb(35, 96, 125); color: rgb(255, 255, 255); } #newsArticle .articleSec__inner img { max-width: 100%; width: auto; height: auto; } #newsArticle .articleSec__inner .ytWrap { width: 100%; aspect-ratio: 16 / 9; margin: 1em auto; } #newsArticle .articleSec__inner .ytWrap iframe { width: 100%; height: 100%; } #newsArticle .articleSec .addDeco { width: 100%; border-spacing: 1px; } #newsArticle .articleSec .addDeco th, #newsArticle .articleSec .addDeco td { position: relative; padding: 1.4em; } #newsArticle .articleSec .addDeco td::before, #newsArticle .articleSec .addDeco th::before { content: ""; display: block; position: absolute; inset: 3px; background-repeat: no-repeat; background-position: left -6px top -6px, right -6px top -6px, left -6px bottom -6px, right -6px bottom -6px; pointer-events: none; } #newsArticle .articleSec .addDeco th { font-feature-settings: "palt"; padding-left: 1em; padding-right: 1em; min-width: 18vw; } #newsArticle .articleSec .addDeco th::before { border: 1px solid rgba(255, 255, 255, 0.4); background-image: url(""), url(""), url(""), url(""); opacity: 0.7; } #newsArticle .articleSec .addDeco td { background-color: rgb(250, 250, 250); } #newsArticle .articleSec .addDeco td::before { border: 1px solid rgba(67, 155, 181, 0.4); background-image: url(""), url(""), url(""), url(""); opacity: 0.7; } #newsArticle .articleSec .secDA__ytWrap { width: 100%; aspect-ratio: 16 / 9; margin: 1em auto; } #newsArticle .articleSec .secDA__ytWrap iframe { width: 100%; height: 100%; } #newsArticle .articleSec__shareBlock { width: 86.6667%; margin: 15.3846% auto 0px; padding-top: 6.15385%; border-top: 1px solid rgb(200, 200, 200); } #newsArticle .articleSec__shareBlock ul { width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0px 12.3077%; } #newsArticle .articleSec__shareBlock ul li { width: 12.9231%; } #newsArticle .articleSec__shareBlock ul a { display: block; } @media screen and (min-width: 769px) { #newsArticle .articleSec { padding-top: 3.125%; padding-bottom: 3.125%; font-size: 1.25vw; } #newsArticle .articleSec__inner { width: 92.1875%; max-width: 1180px; } #newsArticle .articleSec__inner h2 { padding: 0.6em 0.8em; margin-top: 4em; margin-bottom: 1.2em; font-size: 1.875vw; } #newsArticle .articleSec__inner h2:first-child { margin-top: 0px; } #newsArticle .articleSec__inner h3 { padding: 0.5em 0.8em; margin-top: 3em; margin-bottom: 1.2em; font-size: 1.5625vw; } #newsArticle .articleSec__inner h3:first-child { margin-top: 0px; } #newsArticle .articleSec .addDeco th { min-width: min-content; } #newsArticle .articleSec__shareBlock { width: 92.1875%; max-width: 1180px; margin-top: 5.20833%; padding-top: 1.5625%; } #newsArticle .articleSec__shareBlock ul { gap: 0px 3.38983%; } #newsArticle .articleSec__shareBlock ul li { width: 3.55932%; } #newsArticle .articleSec__shareBlock ul a { transform: scale(1); transition: transform 0.2s ease 0s; backface-visibility: hidden; } #newsArticle .articleSec__shareBlock ul a:hover { transform: scale(1.3); } } #demo { padding-top: 12.8%; padding-bottom: 21.3333%; background-color: rgb(17, 17, 17); } #demo .sw2xboxwinWrap { position: relative; padding-bottom: 13.3333%; } #demo .ps5Wrap { position: relative; } @media screen and (min-width: 769px) { #demo { padding-top: 0px; padding-bottom: 9.375%; } #demo .sw2xboxwinWrap { padding-bottom: 5.20833%; } } #demo .linkBtn { position: relative; display: block; } #demo .linkBtn span { display: block; text-indent: 200vw; white-space: nowrap; position: relative; width: 100%; height: 100%; } #demo .linkBtn::before, #demo .linkBtn::after { content: ""; display: block; position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 100%; } #demo .linkBtn::after { background-position-y: 100%; opacity: 0; transition: opacity 0.23s ease 0s; } #demo .linkBtn.--dl__sw2 { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__sw2::before, #demo .linkBtn.--dl__sw2::after { background-image: url(""); } #demo .linkBtn.--dl__xboxwin { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__xboxwin::before, #demo .linkBtn.--dl__xboxwin::after { background-image: url(""); } #demo .linkBtn.--myNintendoStore { width: calc(.5333333333 * (100vw - var(--scrollbarW))); height: calc(.0933333333 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--myNintendoStore::before { background-image: url(""); } #demo .linkBtn.--prod__sw2 { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__sw2::before, #demo .linkBtn.--prod__sw2::after { background-image: url(""); } #demo .linkBtn.--prod__xboxwin { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__xboxwin::before, #demo .linkBtn.--prod__xboxwin::after { background-image: url(""); } #demo .linkBtn.--dl__ps5 { width: calc(.72 * (100vw - var(--scrollbarW))); height: calc(.1466666667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__ps5::before, #demo .linkBtn.--dl__ps5::after { background-image: url(""); } @media screen and (min-width: 769px) { #demo .linkBtn { transition: transform 0.23s ease 0s; } #demo .linkBtn:hover { transform: scale(1.1); z-index: 10; } #demo .linkBtn:hover::after { opacity: 1; } #demo .linkBtn.--dl__sw2 { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__sw2::before, #demo .linkBtn.--dl__sw2::after { background-image: url(""); } #demo .linkBtn.--dl__xboxwin { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__xboxwin::before, #demo .linkBtn.--dl__xboxwin::after { background-image: url(""); } #demo .linkBtn.--myNintendoStore { width: calc(.15625 * (100vw - var(--scrollbarW))); height: calc(.0260416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--myNintendoStore::before { background-image: url(""); } #demo .linkBtn.--prod__sw2 { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__sw2::before, #demo .linkBtn.--prod__sw2::after { background-image: url(""); } #demo .linkBtn.--prod__xboxwin { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--prod__xboxwin::before, #demo .linkBtn.--prod__xboxwin::after { background-image: url(""); } #demo .linkBtn.--dl__ps5 { width: calc(.2395833333 * (100vw - var(--scrollbarW))); height: calc(.0510416667 * (100vw - var(--scrollbarW))); } #demo .linkBtn.--dl__ps5::before, #demo .linkBtn.--dl__ps5::after { background-image: url(""); } } #demo .videoItem { position: relative; background-color: rgb(0, 0, 0); z-index: 0; width: 100%; aspect-ratio: 16 / 9; } #demo .videoItem::after { content: ""; display: block; position: absolute; inset: 0px; height: 80%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.5) 100%); } #demo .videoItem video { width: 100%; height: auto; aspect-ratio: 16 / 9; pointer-events: none; } @media screen and (min-width: 769px) { #demo .videoItem::before { content: ""; position: absolute; inset: 0px; background-image: url(""); background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 0.23s ease 0s; } #demo .videoItem:hover::before { opacity: 0; } #demo .videoItem::after { height: 50%; background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.7) 100%); } } #demo .heroSec { position: relative; background-color: rgb(6, 18, 18); overflow: hidden; } #demo .heroSec__visual { width: 100%; position: absolute; inset: 0px; z-index: 0; } #demo .heroSec__inner { position: relative; width: 100%; } #demo .heroSec__pf { position: relative; font-family: Oswald; font-weight: 400; font-size: 4.26667vw; letter-spacing: 0.025em; text-align: center; } #demo .heroSec__pf span { font-weight: 200; } #demo .heroSec__ttl { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: top 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s; } #demo .heroSec__ttlLine { color: rgb(255, 255, 255); text-align: center; font-family: Oswald; font-size: 7.2vw; letter-spacing: 0.05em; line-height: 0.94em; width: 100%; position: relative; } #demo .heroSec__ttlLine::before, #demo .heroSec__ttlLine::after { content: ""; display: block; width: 0px; height: 0px; } #demo .heroSec__ttlLine::before { margin-top: calc(-0.05em); } #demo .heroSec__ttlLine::after { margin-bottom: calc(-0.05em); } #demo .heroSec__ttlLine::after { margin-bottom: calc(0.47em - 0.5lh); } #demo .heroSec__ttlLine { background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent 0.666667vw); } #demo .heroSec__ttlLine.--line1 { font-weight: 400; } #demo .heroSec__ttlLine.--line2 { font-weight: 300; margin-top: 1.73333%; } #demo .heroSec__ttlLine .tA { position: relative; display: inline-block; transform-origin: left top; } #demo .heroSec__copy { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 21.4667%; } #demo .heroSec__text { position: relative; margin-top: 1.06667%; margin-inline: auto; } #demo .sw2xboxwinWrap .heroSec__inner { height: calc(1.4333333333 * (100vw - var(--scrollbarW))); padding-top: 43.0667%; } #demo .sw2xboxwinWrap .heroSec__ttl { position: absolute; top: 34.6047%; left: 0px; } #demo .sw2xboxwinWrap .heroSec__ttl.isActive { top: 46.5116%; } #demo .ps5Wrap .heroSec { padding-bottom: 10.6667%; } #demo .ps5Wrap .heroSec__inner { padding-top: 38.6667%; } #demo .ps5Wrap .heroSec__ttl { position: relative; margin-top: 2.66667%; } #demo .ps5Wrap .heroSec__text { margin-top: 3.46667%; } #demo .ps5Wrap .heroSec__btn { width: 72%; margin-inline: auto; margin-top: 4.4%; } #demo .ps5Wrap .imgSliderSec__imgListWrap ul { transition-timing-function: linear; } #demo .ps5Wrap .imgSliderSec__imgListWrap ul li img { max-width: none; width: 100%; } @media screen and (min-width: 769px) { #demo .heroSec { background-color: rgb(0, 0, 0); } #demo .heroSec__pf { font-size: 2.1875vw; text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px, rgba(0, 0, 0, 0.4) 0px 0px 20px; } #demo .heroSec__ttl { flex-wrap: nowrap; background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3) 0px, rgb(133, 3, 3) 1px, transparent 1px, transparent max(0.260417vw, 3px)); } #demo .heroSec__ttlLine { font-size: 5.20833vw; letter-spacing: 0.035em; line-height: 0.9em; width: auto; } #demo .heroSec__ttlLine::after { margin-bottom: calc(0.45em - 0.5lh); } #demo .heroSec__ttlLine { background-image: none; } #demo .heroSec__ttlLine.--line2 { margin-top: 0px; margin-left: 0.3em; } #demo .heroSec__copy { width: 40.5208%; margin-top: 7.70833%; } #demo .heroSec__text { width: 47.9167%; margin-top: -0.625%; } #demo .sw2xboxwinWrap .heroSec__inner { height: calc(.5625 * (100vw - var(--scrollbarW))); padding-top: 31.1458%; } #demo .sw2xboxwinWrap .heroSec__ttl { top: 61.8519%; } #demo .sw2xboxwinWrap .heroSec__ttl.isActive { top: 42.5926%; } #demo .ps5Wrap .heroSec { padding-bottom: 2.60417%; } #demo .ps5Wrap .heroSec__inner { padding-top: 31.1458%; } #demo .ps5Wrap .heroSec__ttl { margin-top: 1.45833%; } #demo .ps5Wrap .heroSec__text { width: 74.4271%; margin-top: 0px; } #demo .ps5Wrap .heroSec__btn { width: 23.9583%; margin-top: 0.520833%; } } #demo .downloadSec { position: relative; padding-block: 4%; background-color: rgb(0, 0, 0); } #demo .downloadSec__btnList { position: relative; width: 86.6667%; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 5.33333vw 0px; } #demo .downloadSec__dlcode { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } #demo .downloadSec .dlCodeBlock { position: relative; border: 1px solid rgb(136, 27, 27); } #demo .downloadSec .dlCodeBlock dt, #demo .downloadSec .dlCodeBlock dd { position: relative; } #demo .downloadSec .dlCodeBlock__conts { padding-block: 4.61538%; display: flex; flex-wrap: wrap; justify-content: center; } #demo .downloadSec .dlCodeBlock__conts::before { content: ""; display: block; position: absolute; inset: 0px; background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent 3px); } #demo .downloadSec .dlCodeBlock__conts > p { position: relative; } #demo .downloadSec .dlCodeBlock__text { font-size: 3.2vw; font-feature-settings: "palt"; text-align: center; margin-bottom: 0.8em; } #demo .downloadSec .dlCodeBlock__text span { font-weight: 600; } #demo .downloadSec .dlCodeBlock__no { font-family: Oswald; font-weight: 400; font-size: 5.6vw; font-feature-settings: "palt"; text-align: center; margin-right: 0.5em; } #demo .downloadSec .dlCodeBlock__copybtn { width: 6.92308%; cursor: pointer; position: relative; } #demo .downloadSec .dlCodeBlock__copybtn.--copy::before { content: "コピーしました"; background-color: rgb(94, 215, 251); color: rgb(0, 0, 0); font-weight: 600; position: absolute; top: -110%; left: 50%; transform: translate(-50%); font-size: 2.93333vw; padding: 0.25em 0.5em 0.5em; clip-path: polygon(0% 3px, 3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(80% - 3px), calc(100% - 3px) 80%, 55% 80%, 50% 100%, 45% 80%, 3px 80%, 0% calc(80% - 3px)); width: max-content; opacity: 0; transition: all 0.23s ease 0s; } #demo .downloadSec .dlCodeBlock__copybtn.--anm::before { opacity: 1; transform: translate(-50%, 10%); } #demo .downloadSec .dlCodeBlock__copybtn.--des::before { opacity: 0; transform: translate(-50%, -10%); } #demo .downloadSec .dlCodeBlock__btn { margin-top: 4.15385%; } #demo .downloadSec .dlCodeBlock__notes { padding-block: 3.07692%; display: flex; flex-direction: column; align-items: center; row-gap: 0.3em; } #demo .downloadSec .dlCodeBlock__notesLink a { color: rgb(94, 215, 251); font-size: 2.93333vw; font-feature-settings: "palt"; } #demo .downloadSec .dlCodeBlock__notesText { color: rgb(228, 228, 228); font-size: 2.4vw; font-feature-settings: "palt"; margin-top: 0.5em; } @media screen and (min-width: 769px) { #demo .downloadSec { padding-block: 3.125%; } #demo .downloadSec__btnList { width: 91.6667%; flex-direction: row; justify-content: center; gap: 0px 3.40909%; } #demo .downloadSec__dlcode { width: 81.25%; margin-top: 2.08333%; } #demo .downloadSec .dlCodeBlock dt, #demo .downloadSec .dlCodeBlock dd { position: relative; } #demo .downloadSec .dlCodeBlock__conts { align-items: center; padding-block: 1.42045%; } #demo .downloadSec .dlCodeBlock__conts::before { background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3) 0px, rgb(133, 3, 3) 1px, transparent 1px, transparent max(0.15625vw, 2px)); } #demo .downloadSec .dlCodeBlock__text { font-size: 1.04167vw; margin-bottom: 0px; margin-right: 1.5em; } #demo .downloadSec .dlCodeBlock__no { font-size: 2.1875vw; margin-right: 0.5em; } #demo .downloadSec .dlCodeBlock__copybtn { width: calc(.0234375 * (100vw - var(--scrollbarW))); margin-right: 3em; transition: transform 0.23s ease 0s; } #demo .downloadSec .dlCodeBlock__copybtn.--copy::before { top: -110%; font-size: 0.9375vw; padding: 0.25em 0.5em 0.85em; } #demo .downloadSec .dlCodeBlock__copybtn:hover { transform: scale(1.1); } #demo .downloadSec .dlCodeBlock__btn { margin-top: 0px; } #demo .downloadSec .dlCodeBlock__notes { padding-block: 1.2837%; flex-direction: row; justify-content: center; column-gap: 0.5em; } #demo .downloadSec .dlCodeBlock__notesLink a { font-size: 0.9375vw; } #demo .downloadSec .dlCodeBlock__notesText { font-size: 0.833333vw; margin-top: 0px; } } #demo .aboutSec { position: relative; padding-top: 4%; } #demo .aboutSec__leadtext { width: 100%; margin-inline: auto; } #demo .aboutSec__list { display: flex; flex-direction: column; justify-content: center; gap: 3.33333% 0px; width: 86.6667%; margin-inline: auto; margin-top: 12%; } #demo .aboutSec__list li { position: relative; } #demo .aboutSec__list li + li { margin-top: 16.9231%; } #demo .aboutSec__subhl { width: 100%; position: absolute; top: -7.46667vw; left: 0px; z-index: 1; } #demo .aboutSec__videoEmbed { position: relative; } @media screen and (min-width: 769px) { #demo .aboutSec { padding-top: 1.875%; } #demo .aboutSec__leadtext { width: 50.0521%; } #demo .aboutSec__list { flex-direction: row; gap: 0px 3.125%; width: 91.6667%; margin-top: 4.42708%; } #demo .aboutSec__list li { width: 47.1591%; } #demo .aboutSec__list li + li { margin-top: 0px; } #demo .aboutSec__subhl { top: -3.125vw; } } #demo .privilegeSec { position: relative; padding-top: 8%; padding-bottom: 2.66667%; } #demo .privilegeSec__leadtext { width: 100%; margin-inline: auto; position: relative; z-index: 0; } #demo .privilegeSec__leadtext::before { content: ""; position: absolute; inset: 0px; z-index: -1; background-color: rgb(56, 10, 10); background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent 0.666667vw); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0.4)); } #demo .privilegeSec__privi { width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; } @media screen and (min-width: 769px) { #demo .privilegeSec { padding-top: 2.60417%; padding-bottom: 2.08333%; } #demo .privilegeSec__leadtext::before { background-image: repeating-linear-gradient(0deg, rgb(133, 3, 3), rgb(133, 3, 3) 1px, transparent 1px, transparent max(0.260417vw, 3px)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0) 45%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0)); } #demo .privilegeSec__privi { width: 68.2292%; margin-top: 1.875%; } } #demo .ps5Wrap .privilegeSec { padding-bottom: 0px; } #demo .ps5Wrap .privilegeSec__plus { margin-top: 9.33333%; position: relative; z-index: 0; } #demo .ps5Wrap .privilegeSec__plus::before { content: ""; position: absolute; inset: 0px; z-index: -1; background-color: rgb(16, 54, 79); background-image: repeating-linear-gradient(0deg, rgb(15, 76, 116), rgb(15, 76, 116) 1px, transparent 1px, transparent 0.666667vw); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0.4)); } #demo .ps5Wrap .privilegeSec__notes { width: 86.6667%; margin-inline: auto; margin-top: 5.33333%; font-family: "Noto Sans JP"; font-size: 2.66667vw; color: rgb(200, 200, 200); } #demo .ps5Wrap .privilegeSec__notes li { line-height: 1.41; } @media screen and (min-width: 769px) { #demo .ps5Wrap .privilegeSec { padding-top: 4.16667%; } #demo .ps5Wrap .privilegeSec__privi { margin-top: 1.40625%; } #demo .ps5Wrap .privilegeSec__plus { margin-top: 1.71875%; } #demo .ps5Wrap .privilegeSec__plus::before { background-image: repeating-linear-gradient(0deg, rgb(15, 76, 116) 0px, rgb(15, 76, 116) 1px, transparent 1px, transparent max(0.260417vw, 3px)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0) 45%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0)); } #demo .ps5Wrap .privilegeSec__notes { width: 68.2292%; margin-top: 1.5625%; font-size: 0.677083vw; } } #demo .peoductsSec { position: relative; } #demo .peoductsSec__text { width: 100%; margin-inline: auto; position: relative; } #demo .peoductsSec__btnList { position: relative; width: 86.6667%; margin-inline: auto; margin-top: 1.6%; display: flex; flex-direction: column; align-items: center; gap: 5.33333vw 0px; } @media screen and (min-width: 769px) { #demo .peoductsSec__text { width: 73.6979%; } #demo .peoductsSec__btnList { width: 91.6667%; margin-top: 2.08333%; flex-direction: row; justify-content: center; gap: 0px 3.40909%; } } @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0px; z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0px, 0px); } .swiper-pointer-events { touch-action: pan-y; } .swiper-pointer-events.swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; height: var(--swiper-centered-offset-after); } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center; } .sqex-btn-slide-nav-prev, .sqex-btn-slide-nav-next { cursor: pointer; position: absolute; top: 0px; bottom: 0px; width: 0px; height: 0px; border-width: 70px 80px; border-style: solid; border-color: rgb(64, 64, 64); border-radius: 50%; margin: auto !important; } .sqex-btn-slide-nav-prev.swiper-button-disabled, .sqex-btn-slide-nav-next.swiper-button-disabled { opacity: 0.3; cursor: default; } .sqex-btn-slide-nav-prev .sqex-ico-angle-left, .sqex-btn-slide-nav-next .sqex-ico-angle-right { position: relative; } .sqex-btn-slide-nav-prev .sqex-ico-angle-left { left: 50px; } .sqex-btn-slide-nav-next .sqex-ico-angle-right { right: 62px; } .sqex-btn-slide-box-close { position: relative; display: block; width: 46px; height: 40px; background-color: rgba(0, 0, 0, 0.8); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .sqex-btn-slide-box-close::before, .sqex-btn-slide-box-close::after { content: ""; display: block; position: absolute; inset: -2px 0px 0px; margin: auto; width: 26px; height: 1px; border: 1px solid rgb(116, 116, 116); border-radius: 6px; background-color: rgb(116, 116, 116); } .sqex-btn-slide-box-close::before { transform: rotate(45deg); } .sqex-btn-slide-box-close::after { transform: rotate(-45deg); } .sqex-ico-angle-left, .sqex-ico-angle-right { display: block; width: 12px; height: 12px; } .sqex-ico-angle-left::before, .sqex-ico-angle-right::before { content: ""; display: block; width: 12px; height: 12px; } .sqex-ico-angle-left::before { transform-origin: left top; border-top: 3px solid rgb(255, 255, 255); border-left: 3px solid rgb(255, 255, 255); transform: rotate(-45deg); } .sqex-ico-angle-right::before { transform-origin: right top; border-top: 3px solid rgb(255, 255, 255); border-right: 3px solid rgb(255, 255, 255); transform: rotate(45deg); } .sqex-slide-item-main { box-shadow: rgb(74, 74, 74) 3px 0px 0px 0px inset; padding-left: 16px; border-left: 1px solid transparent; border-right: 1px solid transparent; } @media (max-width: 720px) { .sqex-slide-item-main { padding-left: 0px; box-shadow: none; } } .sqex-slide-item:first-of-type .sqex-slide-item-main { box-shadow: none; } .sqex-slide-item-head { color: rgb(255, 255, 255); font-size: 12px; line-height: 1.4; font-weight: bold; width: 260px; word-break: break-all; } .sqex-slide-item-body { display: flex; align-items: center; width: 260px; min-height: 140px; margin-top: 5px !important; } .sqex-slide-item-image { display: flex; justify-content: center; align-items: center; width: 120px; flex: 0 0 120px; } .sqex-slide-item-image img { max-width: 120px; max-height: 120px; width: initial !important; } .sqex-slide-item-link-group { padding-left: 10px; display: flex; flex-direction: column; justify-content: center; } .sqex-slide-item-link { position: relative; display: inline-flex; padding-left: 2em; color: rgb(255, 255, 255); text-decoration: underline; font-size: 12px; word-break: break-word; } .sqex-slide-item-link:nth-of-type(n+2) { margin-top: 4px; } .sqex-slide-item-link:hover { text-decoration: none; } .sqex-slide-item-link span { position: absolute; top: 0px; left: 0px; display: block; width: 20px; height: 20px; border: 0px solid transparent; border-radius: 50%; background-color: rgb(176, 23, 23); margin-right: 4px; } .sqex-slide-item-link span::before { content: ""; position: absolute; display: block; width: 6px; height: 6px; border-top: 2px solid rgb(255, 255, 255); border-right: 2px solid rgb(255, 255, 255); transform: rotate(45deg); top: 6px; left: 5px; } .sqex-btn-toggle { display: flex; align-items: center; cursor: pointer; transition: opacity 0.3s ease-in-out 0s; } .sqex-btn-toggle img { width: 100%; } .sqex-btn-toggle.hide { opacity: 0; pointer-events: none; cursor: default; } .sqex-slide-box { width: 100%; margin-right: auto; margin-left: auto; overflow: hidden; position: absolute; pointer-events: none; z-index: 10000; } .sqex-slide-box * { user-select: none; margin: 0px; line-height: 1.5 !important; color: rgb(255, 255, 255) !important; font-family: sans-serif !important; box-sizing: border-box !important; list-style-type: none !important; font-size: 12px !important; } .sqex-slide-box-main { pointer-events: auto; transform: translateY(-100%); border-bottom: 1px solid rgb(131, 131, 131); background-color: rgba(29, 29, 29, 0.9); transition: transform 0.3s ease-in-out 0.1s; } .sqex-slide-box-main.show { transform: translateY(0px); } .sqex-slide-box-slider { margin-right: auto; margin-left: auto; padding-top: 12px; padding-bottom: 12px; width: calc(100% - 70px); overflow: hidden; } .slide-1 .sqex-slide-box-slider { max-width: 280px; } @media (max-width: 720px) { .slide-1 .sqex-slide-box-slider { max-width: 280px; } } .slide-2 .sqex-slide-box-slider { max-width: 560px; } @media (max-width: 1000px) { .slide-2 .sqex-slide-box-slider { max-width: 560px; } } @media (max-width: 720px) { .slide-2 .sqex-slide-box-slider { max-width: 280px; } } .slide-3 .sqex-slide-box-slider { max-width: 840px; } @media (max-width: 1280px) { .slide-3 .sqex-slide-box-slider { max-width: 840px; } } @media (max-width: 1000px) { .slide-3 .sqex-slide-box-slider { max-width: 560px; } } @media (max-width: 720px) { .slide-3 .sqex-slide-box-slider { max-width: 280px; } } .slide-4 .sqex-slide-box-slider { max-width: 1120px; } @media (min-width: 1281px) { .slide-4 .sqex-slide-box-slider { max-width: 1120px; } } @media (max-width: 1280px) { .slide-4 .sqex-slide-box-slider { max-width: 840px; } } @media (max-width: 1000px) { .slide-4 .sqex-slide-box-slider { max-width: 560px; } } @media (max-width: 720px) { .slide-4 .sqex-slide-box-slider { max-width: 280px; } } .sqex-slide-box .sqex-btn-slide-nav-prev { left: -120px; z-index: 1000; } .sqex-slide-box .sqex-btn-slide-nav-next { right: -114px; z-index: 1000; } .sqex-slide-box .sqex-btn-slide-box-close { cursor: pointer; position: absolute; top: 0px; right: 5%; z-index: 1000; } .sqex-slide-box .swiper-container, .sqex-slide-box .swiper-wrapper { position: static !important; } .sqex-slide-box .swiper-slide { padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; } #sqexHeader-black_rsp, #sqexHeader-white_rsp, #sqexHeader-white, #sqexHeader-black, #sqexHeader { align-items: center; justify-content: space-between; display: flex !important; } @media (max-width: 767px) { #sqexHeader-black_rsp, #sqexHeader-white_rsp, #sqexHeader-white, #sqexHeader-black, #sqexHeader { padding-left: 6px !important; padding-right: 6px !important; } } #sqexHeader-black_rsp #spOnly .logo, #sqexHeader-white_rsp #spOnly .logo, #sqexHeader-white #spOnly .logo, #sqexHeader-black #spOnly .logo, #sqexHeader #spOnly .logo { width: 145px; } #sqexHeader-black_rsp .sqex-btn-toggle, #sqexHeader-white_rsp .sqex-btn-toggle, #sqexHeader-white .sqex-btn-toggle, #sqexHeader-black .sqex-btn-toggle, #sqexHeader .sqex-btn-toggle { transform: translateX(-8px); } @media (min-width: 768px) { #sqexHeader-black_rsp .sqex-btn-toggle, #sqexHeader-white_rsp .sqex-btn-toggle, #sqexHeader-white .sqex-btn-toggle, #sqexHeader-black .sqex-btn-toggle, #sqexHeader .sqex-btn-toggle { width: 180px; } } @media (max-width: 767px) { #sqexHeader-black_rsp .sqex-btn-toggle, #sqexHeader-white_rsp .sqex-btn-toggle, #sqexHeader-white .sqex-btn-toggle, #sqexHeader-black .sqex-btn-toggle, #sqexHeader .sqex-btn-toggle { max-width: 160px; width: 50%; } } .\[\&_\.gdprAdTransparencyCogWheelButton\]\:\!pjra-z-\[5\], ad-slot, ad-triple-box, dfp-ad, [class^="adDisplay-module"], [class^="amp-ad-"], [class^="div-gpt-ad"], [data-ad-cls], [data-ad-manager-id], [data-ad-module], [data-ad-width], [data-adblockkey], [data-adbridg-ad-class], [data-adshim], [data-advadstrackid], [data-block-type="ad"], [data-css-class="dfp-inarticle"], [data-d-ad-id], [data-desktop-ad-id], [data-dynamic-ads], [data-ez-name], [data-freestar-ad][id], [data-id^="div-gpt-ad"], [data-m-ad-id], [data-mobile-ad-id], [data-name="adaptiveConstructorAd"], [data-rc-widget], [data-revive-zoneid] > iframe, [data-role="tile-ads-module"], [data-template-type="nativead"], [data-testid="adBanner-wrapper"], [data-testid="ad_testID"], [data-type="ad-vertical"], [data-wpas-zoneid], [id^="ad-wrap-"], [id^="ad_sky"], [id^="ad_slider"], [id^="section-ad-banner"], [name^="google_ads_iframe"], [onclick^="location.href='https://1337x.vpnonly.site/"], a-ad, a[data-href^="http://ads.trafficjunky.net/"], a[style="width:100%;height:100%;z-index:10000000000000000;position:absolute;top:0;left:0;"], ad-shield-ads, ad-slot, app-ad, app-advertisement, app-large-ad, ark-top-ad, aside[id^="adrotate_widgets-"], atf-ad-slot, bottomadblock, display-ad-component, display-ads, div[class^="Adstyled__AdWrapper-"], div[class^="Display_displayAd"], div[class^="kiwi-ad-wrapper"], div[class^="native-ad-"], div[data-ad-placeholder], div[data-ad-wrapper], div[data-adname], div[data-adunit-path], div[data-adunit], div[data-adzone], div[data-alias="300x250 Ad 1"], div[data-alias="300x250 Ad 2"], div[data-contentexchange-widget], div[data-dfp-id], div[data-id-advertdfpconf], div[data-native-ad], div[id^="ad-div-"], div[id^="ad-position-"], div[id^="adngin-"], div[id^="adrotate_widgets-"], div[id^="adspot-"], div[id^="crt-"][style], div[id^="div-ads-"], div[id^="google_dfp_"], div[id^="gpt_ad_"], div[id^="lazyad-"], div[id^="optidigital-adslot"], div[id^="pa_sticky_ad_box_middle_"], div[id^="rc-widget-"], div[id^="sticky_ad_"], div[id^="vuukle-ad-"], gpt-ad, guj-ad, hl-adsense, img[src^="https://images.purevpnaffiliates.com"], ps-connatix-module, span[data-ez-ph-id], span[id^="ezoic-pub-ad-placeholder-"], topadblock, zeus-ad, [class^="tile-picker__CitrusBannerContainer-sc-"], citrus-ad-wrapper, [class^="s2nPlayer"], div[id*="MarketGid"], div[id*="ScriptRoot"], [onclick*="content.ad/"], amp-ad, amp-ad, amp-ad-custom, amp-connatix-player, amp-fx-flying-carpet, a[data-obtrack^="http://paid.outbrain.com/network/redir?"], a[data-oburl^="https://paid.outbrain.com/network/redir?"], a[data-redirect^="https://paid.outbrain.com/network/redir?"], a[data-url^="http://paid.outbrain.com/network/redir?"] + .author, a[data-widget-outbrain-redirect^="http://paid.outbrain.com/network/redir?"], a[onmousedown^="this.href='http://paid.outbrain.com/network/redir?"][target="_blank"], a[onmousedown^="this.href='http://paid.outbrain.com/network/redir?"][target="_blank"] + .ob_source, a[onmousedown^="this.href='https://paid.outbrain.com/network/redir?"][target="_blank"] + .ob_source, a[target="_blank"][onmousedown="this.href^='http://paid.outbrain.com/network/redir?"], amp-embed[type="taboola"], div[id^="taboola-stream-"], div[id^="zergnet-widget"] { display: none !important; } [data-ad-name], [id^="div-gpt-ad"], div[aria-label="Ads"], div[data-ad-targeting], div[data-native_ad], div[id^="ad_position_"], div[id^="dfp-ad-"], div[id^="div-gpt-"], div[id^="ezoic-pub-ad-"], div[id^="yandex_ad"], ins.adsbygoogle[data-ad-slot], a[onmousedown^="this.href='https://paid.outbrain.com/network/redir?"][target="_blank"] { display: none !important; } a[href*="/jump/next.php?r="], a[href^="https://bc.game/"] { display: none !important; } a[href^="https://m.do.co/c/"] > img { display: none !important; } (cache)本日発売!ローンチトレーラーを新たに公開 | NEWS | FINAL FANTASY VII REBIRTH | SQUARE ENIX
FINAL FANTASY VII REBIRTH 通常版
FINAL FANTASY VII REBIRTH コレクターズエディション
FINAL FANTASY VII REBIRTH デラックスエディション
【ダウンロード版】FINAL FANTASY VII REBIRTH
【ダウンロード版】FINAL FANTASY VII REBIRTH Digital Deluxe Edition
【ダウンロード版】FINAL FANTASY VII REMAKE & REBIRTH ツインパック
【ダウンロード版】FINAL FANTASY VII REMAKE & REBIRTH Digital Deluxe ツインパック

FINAL FANTASY VII REBIRTHNEWS

お知らせ

2024.02.29

本日発売!ローンチトレーラーを新たに公開

『FINAL FANTASY VII REBIRTH』本日発売!

FF7REBIRTH_Launch_0229.png

『FINAL FANTASY VII REBIRTH』を本日発売いたしました。

ご購入はこちら

発売に際して、本作の開発における主要メンバー3名のコメントを公開いたしました。
これから『FINAL FANTASY VII REBIRTH』をプレイいただくユーザーの皆さまに向けて、それぞれの心境を綴っております。

北瀬佳範/プロデューサー

オリジナル版『FINAL FANTASY VII』のディレクターとして、新世代のRPG をゲームファンにお届けできたこと、そして多くのプレイヤーの方々に魅力的なキャラクターやドラマティックな物語で感動を与えたことで27 年間もの長い間愛され続けてきた事を大変誇りに感じています。
そして今回、『FINAL FANTASY VII REBIRTH』で開発チームが成し遂げたことを見て同じような誇りを感じています。この冒険は長年のファンには懐かしくも新しい興奮をお届けすると同時に、新しいファンの方々にもここからFINAL FANTASYの冒険を始めていただき、1997 年当時と同じような感動を味わっていただけるものと考えています。
ファンの方はもちろん、FINAL FANTASYをプレイしたことのない方にも楽しんでいただけると嬉しいです。

浜口直樹/ディレクター

『FINAL FANTASY VII REBIRTH』は、原作『FINAL FANTASY VII』の主要クリエイターである北瀬、野村、野島、鳥山と、私のように当時は1ユーザーとしてプレイしていた現世代のクリエイターとで、双方の視点から感性をぶつけ合いクリエイティブに挑戦した作品です。また、原作をプレイして人生に大きく影響を受けた他国のクリエイターも多く開発に参加しており、国際色豊かな環境で全スタッフがFFVIIリスペクトを忘れずに制作を行ってきました。

そのような開発チームがお届けする『REBIRTH』は『FINAL FANTASY VII REMAKE』プロジェクトの第二作となります。広大なワールドマップを舞台にセフィロスの幻影を追い求めつつ、世界各地を冒険していきます。世界中に様々なコンテンツが用意されており、ユーザーはワールドマップを探索しながら自分の意思で何をプレイするのかを選択できることを重要視した遊びを設計しています。また今作は、ミッドガルを脱出したクラウドたちが『忘らるる都』までを冒険するストーリーとして描いており、ゲーム最後のエアリスの運命に向かう新たな旅の中で『仲間たちの絆』を丁寧に表現しております。長年ゲーム開発をしてきましたが『REBIRTH』はその中でも最高の仕上がりになりました。皆さんに体験していただけることを楽しみにしています。

野村哲也/クリエイティブ・ディレクター

未知なる旅がいよいよ始まります。
きっと冒頭から今作の終わりまで、様々な予測不能な出来事が皆さんに驚きを与えると思います。
そんな物語を、大いに寄り道をして仲間や世界の人々と触れ合いながら、自らの体験として自由に旅して下さい。
これまでのインタビュー等でも色々語って来ましたし、もう多くを語る必要はないかと思います。
お待たせしました、是非楽しんで下さい。


クリエイティブ・ディレクター野村

その他の開発スタッフのコメントも公式サイト内で順次公開中です。

詳細はこちら

ローンチトレーラー公開中!

星を巡り闘う者たちを、更に熱く盛り上げるローンチトレーラーを公開いたしました。

クラウド、セフィロス、そしてザックスの新たな物語をぜひご自身の目で見届けてください。

Xのタイムラインをセフィロスが燃やし尽くす!?

FF7REBIRTH_X_PRpost.png

公式Xアカウントより投稿している対象ポストをタップすると、セフィロスがXのタイムラインを燃やし尽くす特別な演出をご覧いただけます。

さらに指定のハッシュタグ #FF7 #FF7R #FF7リバース #FF7リバース発売 #早く来いクラウド を付けると期間限定でセフィロスの絵文字が表示されます。

ぜひ合わせてお楽しみください!

公式Xアカウント

LINEボイス付きスタンプが配信開始!

FF7REBIRTH_LINEstamp.png

『FINAL FANTASY VII REBIRTH』の発売を記念して、LINEボイス付きスタンプが本日より配信を開始いたしました。

本作に登場する人気キャラクターたちが、名セリフと共にLINEでの会話を盛り上げます。ぜひご活用ください。

価格:100LINEコイン(スタンプショップ)/ 250円(LINE STORE)

ダウンロードはこちら

  • X
  • Facebook
  • LINE

PAGE TOP