@charset "utf-8"; /* ================================================================== CSS information style info : PAGE ================================================================== */ /* ---------------------------------------------------------------------------------------------------------------- OVERWRITE ---------------------------------------------------------------------------------------------------------------- */ .secInner { padding-top: 0.1%; } @media screen and (min-width: 641px) { /* .secInner { background-color: rgba(255,0,0,0.1); } */ } /* ---------------------------------------------------------------------------------------------------------------- COMMON ---------------------------------------------------------------------------------------------------------------- */ .main { position: relative; width: 100%; margin: auto; padding-top: calc(37/750*100%); padding-bottom: calc(300/750*100%); } .main::before, .main::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; } .main::before { padding-top: calc(10/750*100%); background: rgba(18,124,147,0.4); margin-top: calc(-10/750*100%); } .main::after { height: 1px; background: #127c93; margin-top: calc(-3/750*100%); } .main__logo { display: none; } .secHeadline { width: 100%; position: absolute; top: 0; left: 50%; margin-top: calc(-54/750*100%); margin-left: calc(-375/750*100%); z-index: 2; } .secHeadline .secHl__text { width: calc(289/750*100%); position: absolute; top: 0; left: 50%; margin-top: calc(-8/750*100%); margin-left: calc(-145/750*100%); } .basicBtn { display: block; position: relative; overflow: hidden; background: rgba(4,64,75,0.9); border: 1px solid #0d4e5c; } .basicBtn img { position: relative; z-index: 2; } .basicBtn::before, .basicBtn::after { content: ""; display: block; position: absolute; z-index: 1; } .basicBtn::before { width: 140%; height: 80%; top: 0; left: 50%; transform-origin: top center; transform: translate(-50%,-50%); background-image: radial-gradient(ellipse farthest-side, rgba(42,183,224,0.4) 0%, rgba(42,183,224,0.1) 50%, rgba(42,183,224,0) 100%); } .basicBtn::after { width: 80%; height: 120%; bottom: 0; left: 50%; transform-origin: bottom center; transform: translate(-50%,70%); background-image: radial-gradient(ellipse farthest-side, rgba(13,202,215,0.7) 0%, rgba(13,202,215,0.2) 50%, rgba(13,202,215,0) 100%); } .basicFrame { color: #fff; position: relative; width: 100%; height: auto; text-decoration: none; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .basicFrame .bF__thumb { background: #0d2c43; width: 100%; position: relative; overflow: hidden; } .basicFrame .bF__thumb::before, .basicFrame .bF__thumb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-style: solid; z-index: 2; } .basicFrame .bF__thumb::before { border-color: rgba(13,44,67,0.5); border-width: calc(2/750*100vw) calc(10/750*100vw); } .basicFrame.mfpYt .bF__thumb::before { border-color: rgba(13,44,67,1); } .basicFrame .bF__thumb::after { border-color: rgba(67,155,181,1); border-width: 0 calc(4/750*100vw); } .basicFrame .bF__thumb img { position: relative; vertical-align: top; z-index: 1; } .basicFrame.mfpYt .bF__name { background: rgba(4,64,75,0.9); border: 1px solid #0d4e5c; position: relative; top: 0%; left: 50%; z-index: 3; overflow: hidden; } .basicFrame.mfpYt .bF__name img { position: relative; z-index: 2; } .basicFrame.mfpYt .bF__name::before, .basicFrame.mfpYt .bF__name::after { content: ""; display: block; position: absolute; z-index: 1; } .basicFrame.mfpYt .bF__name::before { width: 110%; height: 120%; top: 0; left: 50%; transform-origin: top center; transform: translate(-50%,-50%); background-image: radial-gradient(ellipse farthest-side, rgba(42,183,224,0.8) 0%, rgba(42,183,224,0.2) 50%, rgba(42,183,224,0) 100%); } .basicFrame.mfpYt .bF__name::after { width: 60%; height: 120%; bottom: 0; left: 50%; transform-origin: bottom center; transform: translate(-50%,60%); background-image: radial-gradient(ellipse farthest-side, rgba(13,202,215,0.8) 0%, rgba(13,202,215,0.2) 50%, rgba(13,202,215,0) 100%); } .basicFrameNews { color: #fff; position: relative; width: 100%; height: auto; text-decoration: none; display: -webkit-flex; display: flex; } .basicFrameNews .bFN__frame { background: url("../../news/_img_common/index/listitem_bg_sp.png") center top no-repeat; background-size: cover; width: 100%; padding: calc(10/750*100vw) calc(22/750*100vw); position: relative; overflow: hidden; } .basicFrameNews .bFN__frame::before, .basicFrameNews .bFN__frame::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-style: solid; } .basicFrameNews .bFN__frame::before { border-color: rgba(13,44,67,0.2); border-width: calc(4/750*100vw) calc(14/750*100vw); } .basicFrameNews .bFN__frame::after { border-color: rgba(67,155,181,1); border-width: 0 calc(7/750*100vw); } .basicFrameNews .bFN__thumb { width: 100%; background: #0d2c43; overflow: hidden; position: relative; } .basicFrameNews .bFN__thumb img { position: relative; vertical-align: top; } li[data-category="movie"] .bFN__thumb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/icon_play.png") center center no-repeat; background-size: 40%; } .basicFrameNews .bFN__text { margin-top: calc(15/750*100vw); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: baseline; } .basicFrameNews .bFN__text .date { color: #00c2e5; font-size: 2.4vw; } .basicFrameNews .bFN__text .category { width: calc(130/750*100vw); overflow: hidden; position: relative; } /*.basicFrameNews .bFN__text .category img { vertical-align: inherit; }*/ .basicFrameNews .bFN__text .category::before, .basicFrameNews .bFN__text .category::after { content: ""; width: calc(6/750*100vw); height: 100%; position: absolute; top: 0; border-width: calc(1/750*100vw) calc(4/750*100vw); border-style: solid; border-color: rgba(255,255,255,0.2); } .basicFrameNews .bFN__text .category::before { left: 0; border-right: none; } .basicFrameNews .bFN__text .category::after { right: 0; border-left: none; } .basicFrameNews .bFN__text .text { width: 100%; color: #fff; font-size: calc(18/750*100vw); font-feature-settings: "palt"; line-height: 1.61; margin-top: 0.5em; } .-baseControl { background: rgba(255,0,0,0.0); } .-baseControl { display: block; width: 100vw; height: 100%; top: 0; margin-top: 0; } .swiper-button-prev.-baseControl { left: inherit; right: 50%; margin-right: calc(325/650*100%); } .swiper-button-next.-baseControl { left: 50%; right: 0; margin-left: calc(325/650*100%); } .-baseControl::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; } .swiper-button-prev.-baseControl::after { background: url("../img/btn_prev.png") center right calc(20/750*100vw) no-repeat; background-size: calc(15/750*100vw); } .swiper-button-next.-baseControl::after { background: url("../img/btn_next.png") center left calc(20/750*100vw) no-repeat; background-size: calc(15/750*100vw); } .swiper-button-disabled.-baseControl { opacity: 0.5; } @media screen and (min-width: 641px) { .main { padding-top: calc(39/1360*100%); padding-bottom: calc(130/1360*100%); } .main::before { padding-top: calc(10/1360*100%); margin-top: calc(-10/1360*100%); } .main::after { margin-top: calc(-3/1360*100%); } .main__logo { display: block; position: absolute; top: 0; left: 0; width: calc(194/1360*100%); margin-top: calc(-39/1360*100%); margin-left: calc(34/1360*100%); z-index: 100; } .secHeadline { width: calc(750/1360*100%); margin-top: calc(-52/1360*100%); margin-left: calc(-375/1360*100%); } .secHeadline .secHl__text { display: none; } .basicBtn {} .basicBtn img {} .basicBtn::before, .basicBtn::after {} .basicBtn::before { width: 140%; height: 100%; top: 0; left: 50%; background-image: radial-gradient(ellipse farthest-side, rgba(14,101,134,0.8) 0%, rgba(14,101,134,0) 100%); } .basicBtn::after { width: 100%; height: 160%; bottom: 0; left: 50%; background-image: radial-gradient(ellipse farthest-side, rgba(13,202,215,0.4) 0%, rgba(13,202,215,0) 100%); } a.basicBtn { transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transform-origin: center center; box-shadow: 0px 0px 60px 30px rgba(67,155,181,0); } a.basicBtn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); } .basicFrame {} .basicFrame .bF__thumb {} .basicFrame .bF__thumb::before, .basicFrame .bF__thumb::after {} .basicFrame .bF__thumb::before { border-width: calc(2/1360*100vw) calc(10/1360*100vw); } .basicFrame.mfpYt .bF__thumb::before {} .basicFrame .bF__thumb::after { border-width: 0 calc(4/1360*100vw); } .basicFrame .bF__thumb img {} .basicFrame.mfpYt .bF__name { overflow: hidden; } .basicFrame.mfpYt .bF__name img {} .basicFrame.mfpYt .bF__name::before, .basicFrame.mfpYt .bF__name::after {} .basicFrame.mfpYt .bF__name::before { width: 110%; height: 120%; top: 0; left: 50%; transform-origin: top center; transform: translate(-50%,-50%); background-image: radial-gradient(ellipse farthest-side, rgba(42,183,224,0.8) 0%, rgba(42,183,224,0.2) 50%, rgba(42,183,224,0) 100%); } .basicFrame.mfpYt .bF__name::after { width: 60%; height: 120%; bottom: 0; left: 50%; transform-origin: bottom center; transform: translate(-50%,60%); background-image: radial-gradient(ellipse farthest-side, rgba(13,202,215,0.8) 0%, rgba(13,202,215,0.2) 50%, rgba(13,202,215,0) 100%); } a.basicFrame .bF__thumb, a.basicFrame .bF__name { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transform-origin: center center; box-shadow: 0px 0px 60px 30px rgba(67,155,181,0); } a.basicFrame:hover .bF__thumb { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); } a.basicFrame:hover .bF__thumb img { filter: brightness(120%); } a.basicFrame:hover .bF__name { -webkit-transform: scale(1.05); transform: scale(1.05); } .basicFrameNews {} .basicFrameNews .bFN__frame { background: url("../../news/_img_common/index/listitem_bg_pc.png") center top no-repeat; background-size: cover; padding: calc(2/1360*100vw) calc(10/1360*100vw); } .basicFrameNews .bFN__frame::before { border-color: rgba(13,44,67,1); border-width: calc(2/1360*100vw) calc(10/1360*100vw); } .basicFrameNews .bFN__frame::after { border-width: 0 calc(4/1360*100vw); } .basicFrameNews .bFN__thumb {} li[data-category="movie"] .bFN__thumb::after { background-size: 36%; } li[data-category="movie"] .bFN__thumb::after { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; } .basicFrameNews .bFN__text { margin-top: calc(10/1360*100vw); padding: 0 calc(8/1360*100vw) calc(12/1360*100vw); align-items: center; } .basicFrameNews .bFN__text .date { font-size: 0.8823vw; } .basicFrameNews .bFN__text .category { width: calc(95/1360*100vw); } .basicFrameNews .bFN__text .category::before, .basicFrameNews .bFN__text .category::after { width: calc(6/1360*100vw); border-width: 1px calc(4/1360*100vw); } .basicFrameNews .bFN__text .text { font-size: 1.0294vw; } a.basicFrameNews { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transform-origin: center center; box-shadow: 0px 0px 60px 30px rgba(67,155,181,0); } a.basicFrameNews:hover { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); } a.basicFrameNews:hover .bFN__thumb img { filter: brightness(120%); } li[data-category="movie"] a.basicFrameNews:hover .bFN__thumb::after { transform: scale(1.2); } .-baseControl {} .swiper-button-prev.-baseControl {} .swiper-button-next.-baseControl {} .-baseControl::after { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } .swiper-button-prev.-baseControl::after { background-position: center right 15px; background-size: 15px; } .swiper-button-next.-baseControl::after { background-position: center left 15px; background-size: 15px; } .-baseControl:hover::after { background-size: 20px; } } @media screen and (min-width: 1361px) { .main { padding-top: 39px; padding-bottom: 130px; } .main::before { padding-top: 10px; margin-top: -10px; } .main::after { margin-top: -3px; } .main__logo { width: 194px; margin-top: -39px; margin-left: 34px;} .secHeadline { width: 750px; margin-top: -52px; margin-left: -375px; } .pageTitle { width: 650px; margin-top: 38px; margin-left: -325px; } .basicFrame .bF__thumb::before { border-width: 2px 10px; } .basicFrame .bF__thumb::after { border-width: 0 4px; } .basicFrameNews .bFN__frame { padding: 2px 10px; } .basicFrameNews .bFN__frame::before { border-width: 2px 10px; } .basicFrameNews .bFN__frame::after { border-width: 0 4px; } .basicFrameNews .bFN__text { margin-top: 10px; padding: 0 8px 12px; } .basicFrameNews .bFN__text .date { font-size: 1.2rem; } .basicFrameNews .bFN__text .category { width: 95px; } .basicFrameNews .bFN__text .category::before, .basicFrameNews .bFN__text .category::after { width: 6px; border-width: 1px 4px; } .basicFrameNews .bFN__text .text { font-size: 1.4rem; } } /* ---------------------------------------------------------------------------------------------------------------- NEWS CATEGORY　COLOR [TOP、NEWSインデックス, NEWS記事 にて共通して使用] ---------------------------------------------------------------------------------------------------------------- */ #newsIndex .secTab__list__item[data-category="all"], #newsIndex .secNL__list__item[data-category="all"] .category { background: #16415d; } #newsIndex .secTab__list__item[data-category="information"], #newsIndex .secNL__list__item[data-category="information"] .category, #newsArticle .secTtlA__category[data-category="information"], #toppage .secHero__nL__item[data-category="information"] .category { background: #920e34; } #newsIndex .secTab__list__item[data-category="campaign"], #newsIndex .secNL__list__item[data-category="campaign"] .category, #newsArticle .secTtlA__category[data-category="campaign"], #toppage .secHero__nL__item[data-category="campaign"] .category { background: #92620e; } #newsIndex .secTab__list__item[data-category="movie"], #newsIndex .secNL__list__item[data-category="movie"] .category , #newsArticle .secTtlA__category[data-category="movie"], #toppage .secHero__nL__item[data-category="movie"] .category { background: #0b5b40; } #newsIndex .secTab__list__item[data-category="web"], #newsIndex .secNL__list__item[data-category="web"] .category, #newsArticle .secTtlA__category[data-category="web"], #toppage .secHero__nL__item[data-category="web"] .category { background: #0d5d83; } #newsIndex .secTab__list__item[data-category="other"], #newsIndex .secNL__list__item[data-category="other"] .category, #newsArticle .secTtlA__category[data-category="other"], #toppage .secHero__nL__item[data-category="other"] .category { background: #5f5575; } /* ---------------------------------------------------------------------------------------------------------------- #toppage ---------------------------------------------------------------------------------------------------------------- */ #toppage .main { margin-top: calc(-100/750*100%); padding-top: 0; padding-bottom: 0; } #toppage .secBlock { padding-top: calc(100/750*100%); } #toppage .secBlock__inner { position: relative; } #toppage .secBlock__inner::before, #toppage .secBlock__inner::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; z-index: 1; } #toppage .secBlock__inner::before { padding-top: calc(10/750*100%); background: rgba(18,124,147,0.2); margin-top: calc(-10/750*100%); } #toppage .secBlock__inner::after { height: 1px; background: #127c93; margin-top: calc(-4/750*100%); } #toppage .secBlock__hl { position: absolute; top: 0; left: 50%; margin-top: calc(-50/750*100%); z-index: 5; } @media screen and (min-width: 641px) { #toppage .main { margin-top: calc(-78/1360*100%); } #toppage .secBlock{ padding-top: calc(100/1360*100%); } #toppage .secBlock__inner::before { padding-top: calc(10/1360*100%); margin-top: calc(-10/1360*100%); } #toppage .secBlock__inner::after { margin-top: calc(-4/1360*100%); } #toppage .secBlock__hl { margin-top: calc(-50/1260*100%); } } @media screen and (min-width: 1361px) { #toppage .main { margin-top: -78px; } #toppage .secBlock{ padding-top: 100px; } #toppage .secBlock__inner::before { padding-top: 10px; margin-top: -10px; } #toppage .secBlock__inner::after { margin-top: -4px; } } @media screen and (min-width: 1921px) { } /* .secHero ---------------------------------------------------------------------------------------------------------------- */ #toppage .secHero { background: #061d2b; padding-bottom: calc(60/750*100%); } #toppage .secHero__visual { position: absolute; top: 0; left: 0; } #toppage .secHero__catchcopy { position: absolute; top: 0; left: calc(495/750*100%); margin-top: calc(-57/750*100%); width: calc(77/750*100%); } #toppage .secHero__catchcopy p { position: absolute; top: 0; width: calc(34/77*100%); } #toppage .secHero__copy1 { right: 0; } #toppage .secHero__copy2 { left: 0; } #toppage .secHero__logo { width: calc(548/750*100%); margin: calc(440/750*100%) auto 0; position: relative; transform-origin: center center; } #toppage .secHero__release { width: calc(572/750*100%); margin: calc(37/750*100%) auto 0; position: relative; } #toppage .secHero__gaming { width: calc(540/750*100%); margin: calc(17/750*100%) auto 0; position: relative; } #toppage .secHero__gaming a { display: block; } #toppage .secHero__newsArea { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; position: relative; } #toppage .secHero__newsWrap { overflow: visible; } #toppage .secHero__newsList {} #toppage .secHero__nL__item { height: auto; display: -webkit-flex; display: flex; } #toppage .secHero__tw { width: calc(258/750*100%); margin: calc(14/750*100%) 0 0 calc(50/750*100%); } #toppage .secBgmControllerWrap { width: calc(335/750*100%); left: inherit; right: 0; margin-left: auto; margin-bottom: calc(-10/750*100%); background: none; } #toppage .secBgmControllerWrap::before, #toppage .secBgmControllerWrap::after { display: none; } #toppage .secBC__state { width: 100%; padding-top: calc(80/335*100%); } @media screen and (max-width: 640px) { #toppage .-baseControl.-news { display: none; } } @media screen and (min-width: 641px) { #toppage .secHero { background: #000; padding-bottom: calc(100/1360*100%); overflow: hidden; } #toppage .secHero__visual { width: calc(1920/1360*100%); left: 50%; margin-left: calc(-960/1360*100%); } #toppage .secHero__visual::after { content: ""; display: block; width: 100%; height: 50%; position: absolute; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); } #toppage .secHero__catchcopy { left: calc(2/1260*100%); margin-top: calc(-13/1260*100%); width: calc(450/1260*100%); } #toppage .secHero__catchcopy p { width: 100%; } #toppage .secHero__copy2 { margin-top: calc(60/450*100%); } #toppage .secHero__logo { width: calc(548/1260*100%); margin: calc(168/1260*100%) auto 0 0; } #toppage .secHero__release { width: calc(572/1260*100%); margin: calc(95/1260*100%) calc(35/1260*100%) 0 auto; } #toppage .secHero__gaming { width: calc(384/1260*100%); position: absolute; top: 0; left: calc(233/1260*100%); margin: calc(546/1260*100%) 0 0; } #toppage .secHero__newsArea { width: calc(1160/1260*100%); margin: calc(10/1260*100%) auto 0; } #toppage .secHero__newsWrap {} #toppage .secHero__newsList {} #toppage .secHero__nL__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } #toppage .secHero__nL__item.swiper-slide-active, #toppage .secHero__nL__item.swiper-slide-next, #toppage .secHero__nL__item.swiper-slide-next + .secHero__nL__item, #toppage .secHero__nL__item.swiper-slide-next + .secHero__nL__item + .secHero__nL__item { opacity: 1; } #toppage .swiper-button-prev.-news { margin-right: calc(580/1160*100%); } #toppage .swiper-button-next.-news { margin-left: calc(580/1160*100%); } #toppage .swiper-button-prev.-news::after { background-size: calc(15/1360*100vw); background-position: center right calc(35/1360*100vw); } #toppage .swiper-button-next.-news::after { background-size: calc(15/1360*100vw); background-position: center left calc(35/1360*100vw); } #toppage .-baseControl.-news:hover::after { background-size: calc(20/1360*100vw); } #toppage .secHero__tw { width: calc(167/1260*100%); position: absolute; top: 0; left: calc(52/1260*100%); margin: calc(540/1260*100%) 0 0; } #toppage .secBgmControllerWrap { display: none; } } @media screen and (min-width: 1361px) { #toppage .secHero { padding-bottom: 100px; } #toppage .secHero__visual { width: 1920px; margin-left: -960px; } #toppage .swiper-button-prev.-news::after { background-size: 15px; background-position: center right 35px; } #toppage .swiper-button-next.-news::after { background-size: 15px; background-position: center left 35px; } #toppage .-baseControl.-news:hover::after { background-size: 20px; } } @media screen and (min-width: 1921px) { #toppage .secHero__visual { width: 100%; left: 0; margin-left: 0; } #toppage .secHero__visual img { width: 100%; } } /* .secAbout ---------------------------------------------------------------------------------------------------------------- */ #toppage .secAbout {} #toppage .secAbout .secBlock__inner { background: #121616 url("../../_img/about/visual_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(80/750*100%); } #toppage .secAbout .secBlock__hl { width: calc(207/750*100%); margin-left: calc(-103/750*100%); } #toppage .secAbout .secAbt__catch { width: calc(670/750*100%); margin: calc(594/750*100%) auto 0; } #toppage .secAbout .secAbt__btn { width: calc(560/750*100%); margin: calc(42/750*100%) auto 0; } #toppage .secAbout .secAbt__video { width: calc(650/750*100%); margin: calc(70/750*100%) auto 0; } #toppage .secAbout .secAbt__video .bF__name { width: calc(560/650*100%); margin-top: calc(-30/650*100%); margin-left: calc(-280/650*100%); } @media screen and (min-width: 641px) { #toppage .secAbout .secBlock__inner { background: #121616 url("../../_img/about/visual_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(80/1360*100%); } #toppage .secAbout .secBlock__hl { width: calc(207/1260*100%); margin-left: calc(-103/1260*100%); } #toppage .secAbout .secAbt__catch { width: calc(1131/1260*100%); margin-top: calc(69/1260*100%); } #toppage .secAbout .secAbt__btn { width: calc(321/1260*100%); margin-top: calc(490/1260*100%); } #toppage .secAbout .secAbt__video { width: calc(400/1260*100%); position: absolute; right: 0; bottom: 0; margin: 0 0 0 auto; } #toppage .secAbout .secAbt__video .bF__name { width: calc(359/400*100%); margin-top: calc(-53/400*100%); margin-left: calc(-180/400*100%); } } @media screen and (min-width: 1361px) { #toppage .secAbout .secBlock__inner { background-size: 1920px; padding-bottom: 80px; } } @media screen and (min-width: 1921px) { #toppage .secAbout .secBlock__inner { background-size: 100%; } } /* .secStory ---------------------------------------------------------------------------------------------------------------- */ #toppage .secStory {} #toppage .secStory .secBlock__inner { background: url("../../_img/story/bg_sp.jpg?220617") center bottom no-repeat; background-size: 100%; padding-bottom: calc(80/750*100%); } #toppage .secStory .secBlock__hl { width: calc(198/750*100%); margin-left: calc(155/750*100%); } #toppage .secStory .secStr__zack { width: calc(401/750*100%); position: absolute; bottom: 0; left: calc(53/750*100%); margin-bottom: calc(-180/750*100%); z-index: 3; } #toppage .secStory .secStr__text { width: 100%; margin: calc(366/750*100%) auto 0; position: relative; z-index: 4; } @media screen and (min-width: 641px) { #toppage .secStory .secBlock__innerBG { width: 100%; height: 0; padding-top: calc(640/1360*100%); position: absolute; top: 0; left: 0; margin-top: calc(100/1360*100%); } #toppage .secStory .secBlock__innerBG::before, #toppage .secStory .secBlock__innerBG::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; } #toppage .secStory .secBlock__innerBG::before { right: 50%; background: url("../../about/_img/hero/bg_rl_pc.jpg") right bottom repeat-x; } #toppage .secStory .secBlock__innerBG::after { left: 50%; background: url("../../about/_img/hero/bg_rr_pc.jpg") left bottom repeat-x; } #toppage .secStory .secBlock__inner { background: url("../../_img/story/bg_pc.jpg?220617") center bottom no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(191/1360*100%); } #toppage .secStory .secBlock__hl { width: calc(198/1260*100%); margin-left: calc(-99/1260*100%); } #toppage .secStory .secStr__zack { width: calc(401/1260*100%); padding-bottom: calc(816/1260*100%); left: calc(0/1260*100%); margin-bottom: calc(-291/1260*100%); overflow: hidden; } #toppage .secStory .secStr__zack img { width: 100%; position: absolute; top: 0; left: 0; } #toppage .secStory .secStr__text { width: calc(650/1260*100%); margin: calc(181/1260*100%) auto 0 calc(557/1260*100%); } } @media screen and (min-width: 1361px) { #toppage .secStory .secBlock__inner { background-size: 1920px; padding-bottom: 191px; } #toppage .secStory .secBlock__innerBG { padding-top: 640px; margin-top: 100px; } } @media screen and (min-width: 1921px) { #toppage .secStory .secBlock__innerBG::before { margin-right: 960px; } #toppage .secStory .secBlock__innerBG::after { margin-left: 960px; } } /* .secChara ---------------------------------------------------------------------------------------------------------------- */ #toppage .secChara {} #toppage .secChara .secBlock__inner { background: url("../../_img/character/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(30/750*100%); } #toppage .secChara .secBlock__hl { width: calc(319/750*100%); margin-left: calc(-160/750*100%); } #toppage .secChara .secChara__listWrap { width: calc(750/750*100%); margin: calc(66/750*100%) 0 0; } #toppage .secChara .secChara__list {} #toppage .secChara .secChr__item {} @media screen and (max-width: 640px) { #toppage .-baseControl.-chara { display: none; } } @media screen and (min-width: 641px) { #toppage .secChara .secBlock__inner { background: url("../../_img/character/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(41/1360*100%); } #toppage .secChara .secBlock__hl { width: calc(319/1260*100%); margin-left: calc(-160/1260*100%); } #toppage .secChara .secChara__listWrap { width: calc(1160/1260*100%); margin: calc(50/1260*100%) auto 0; overflow: visible; } #toppage .secChara .secChr__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } #toppage .secChara .secChr__item.swiper-slide-active , #toppage .secChara .secChr__item.swiper-slide-next , #toppage .secChara .secChr__item.swiper-slide-next + .secChr__item , #toppage .secChara .secChr__item.swiper-slide-next + .secChr__item + .secChr__item { opacity: 1; } #toppage .secChara .secChr__item.btn_ov:hover { z-index: 100; position: relative; } #toppage .secChara .secChr__item.btn_ov a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #toppage .swiper-button-prev.-chara { margin-right: calc(580/1160*100%); } #toppage .swiper-button-next.-chara { margin-left: calc(580/1160*100%); } #toppage .swiper-button-prev.-chara::after { background-size: calc(15/1360*100vw); background-position: center right calc(35/1360*100vw); } #toppage .swiper-button-next.-chara::after { background-size: calc(15/1360*100vw); background-position: center left calc(35/1360*100vw); } #toppage .-baseControl.-chara:hover::after { background-size: calc(20/1360*100vw); } } @media screen and (min-width: 1361px) { #toppage .secChara .secBlock__inner { background-size: 1920px; padding-bottom: 41px; } #toppage .swiper-button-prev.-chara::after { background-size: 15px; background-position: center right 35px; } #toppage .swiper-button-next.-chara::after { background-size: 15px; background-position: center left 35px; } #toppage .-baseControl.-chara:hover::after { background-size: 20px; } } @media screen and (min-width: 1921px) { #toppage .secChara .secBlock__inner { background-size: 100%; } } /* .secSystem ---------------------------------------------------------------------------------------------------------------- */ #toppage .secSystem {} #toppage .secSystem .secBlock__inner { background: url("../../_img/system/visual_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(80/750*100%); } #toppage .secSystem .secBlock__hl { width: calc(372/750*100%); margin-left: calc(-186/750*100%); } #toppage .secSystem .secSys__catch { width: calc(650/750*100%); margin: calc(90/750*100%) auto 0; } #toppage .secSystem .secSys__btn { width: calc(560/750*100%); margin: calc(535/750*100%) auto 0; } @media screen and (min-width: 641px) { #toppage .secSystem .secBlock__inner { background: url("../../_img/system/visual_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(60/1360*100%); } #toppage .secSystem .secBlock__hl { width: calc(372/1260*100%); margin-left: calc(-186/1260*100%); } #toppage .secSystem .secSys__catch { width: calc(1003/1260*100%); margin: calc(47/1260*100%) auto 0; } #toppage .secSystem .secSys__btn { width: calc(321/1260*100%); margin: calc(414/1260*100%) auto 0; } } @media screen and (min-width: 1361px) { #toppage .secSystem .secBlock__inner { background-size: 1920px; padding-bottom: 60px; } } @media screen and (min-width: 1921px) { #toppage .secSystem .secBlock__inner { background-size: 100%; } } /* .secProducts ---------------------------------------------------------------------------------------------------------------- */ #toppage .secProducts {} #toppage .secProducts .secBlock__hl { width: calc(290/750*100%); margin-left: calc(-145/750*100%); } #toppage .secProducts .secProd__gametttl { width: calc(663/750*100%); margin: calc(36/750*100%) 0 0 calc(42/750*100%); } #toppage .secProducts .secProd__release { width: calc(428/750*100%); margin: calc(12/750*100%) auto 0; } #toppage .secProducts .secBlock__inner { background-color: rgba(1,33,65,0.8); margin-top: calc(90/750*100%); } @media screen and (min-width: 641px) { #toppage .secProducts .secBlock__hl { width: calc(290/1260*100%); margin-left: calc(-145/1260*100%); } #toppage .secProducts .secProd__gametttl { width: calc(785/1260*100%); margin: calc(47/1260*100%) 0 0 calc(-11/1260*100%); } #toppage .secProducts .secProd__release { width: calc(428/1260*100%); margin: calc(-100/1260*100%) calc(19/1260*100%) 0 auto; } #toppage .secProducts .secBlock__inner { margin-top: calc(97/1360*100%); } } @media screen and (min-width: 1361px) { #toppage .secProducts .secBlock__inner { margin-top: 97px; } } /* タブボタン ---------------------------------------------------------------------------------------------------------------- */ #toppage .secProducts .swiper-container-horizontal > .swiper-pagination-bullets, #toppage .secProducts .swiper-pagination-custom, .swiper-pagination-fraction { bottom: inherit; } #toppage .secProducts .swiper-pagination { position: relative; } #toppage .secProducts .swiper-pagination-bullet { width: auto; height: auto; display: inline-block; border-radius: 0; opacity: 1; } #toppage .secProducts .tabList { overflow: visible; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; } #toppage .secProducts .tabList .basicFrame { display: block; position: relative; overflow: hidden; background: #011c3a; } #toppage .secProducts .tabList .basicFrame::before, #toppage .secProducts .tabList .basicFrame::after { content: ""; display: block; position: absolute; z-index: 1; } #toppage .secProducts .tabList .basicFrame::before { width: 100%; height: 100%; top: 0; left: 50%; opacity: 0.1; transform-origin: top center; transform: translate(-50%,-50%); background-image: radial-gradient(ellipse farthest-side, rgba(1,183,251,1) 0%, rgba(1,183,251,0) 100%); } #toppage .secProducts .tabList .basicFrame::after { width: 100%; height: 200%; bottom: 0; left: 50%; opacity: 0.2; transform-origin: bottom center; transform: translate(-50%,50%); background-image: radial-gradient(ellipse farthest-side, rgba(1,183,251,1) 0%, rgba(1,183,251,0) 100%); } #toppage .secProducts .tabList .bF__frame { z-index: 3; } #toppage .secProducts .tabList .bF__frame span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; background-color: rgba(0, 149, 63, 0.8); mix-blend-mode: color-dodge; opacity: 0; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #toppage .secProducts .tabList .swiper-pagination-bullet-active .bF__frame span { opacity: 0.8; } #toppage .secProducts .tabList .bF__thumb { z-index: 5; background: none; } @media screen and (min-width: 641px) { #toppage .secProducts .tabList { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; justify-content: space-between; } #toppage .secProducts .tabList .swiper-pagination-bullet:hover .bF__frame span { opacity: 0.8; } #toppage .secProducts .swiper-pagination-bullet { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transform-origin: center center; box-shadow: 0px 0px 30px 15px rgba(67,155,181, 0); } #toppage .secProducts .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { -webkit-transform: scale(1.03); transform: scale(1.03); box-shadow: 0px 0px 6px 3px rgba(67,155,181, 0.5); } } /* プラットフォームタブ ---------------------------------------------------------------------------------------------------------------- */ #toppage .secProducts .platform__listWrap { position: relative; z-index: 10; overflow: visible; width: 100%; } #toppage .secProducts .-platformTab { margin-top: calc(-40/750*100%); } #toppage .secProducts .-platformTab .platformTab__item { width: calc(200/750*100%); } @media screen and (max-width: 640px) { #toppage .secProducts .-platformTab .platformTab__item { margin: 0 calc(12.5/750*100%); } #toppage .secProducts .-platformTab .platformTab__item:nth-child(n+4) { margin-top: calc(25/750*100%); } } @media screen and (min-width: 641px) { #toppage .secProducts .-platformTab { margin-top: calc(-40/1260*100%); } #toppage .secProducts .-platformTab .platformTab__item { width: calc(200/1260*100%); cursor: pointer; } } /* エディションタブ ---------------------------------------------------------------------------------------------------------------- */ #toppage .secProducts .edition__listWrap { position: relative; overflow: visible; width: 100%; padding-bottom: calc(80/750*100%); margin-top: calc(100/750*100%); } #toppage .secProducts .edition__listWrap::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(50/750*100%); position: absolute; top: 0; left: 0; background: linear-gradient(to bottom, rgba(1,33,65,0) 0%,rgba(1,33,65,1) 100%); margin-top: calc(-50/750*100%); opacity: 0.5; } #toppage .secProducts .edition__list { width: 100%; } #toppage .secProducts .-editionTab { margin-top: calc(-30/750*100%); } #toppage .secProducts .-editionTab .editionTab__item { width: calc(240/750*100%); margin: 0 calc(12/750*100%); } #toppage .secProducts .-editionTab .editionTab__item .bF__thumb::before { border-width: calc(2/750*100vw) calc(4/750*100vw); } #toppage .secProducts .-editionTab .editionTab__item .bF__thumb::after { border-width: 0 calc(2/750*100vw); } @media screen and (max-width: 640px) { #toppage .secProducts .-editionTab .editionTab__item:nth-child(n+3) { margin-top: calc(20/750*100%); } } @media screen and (min-width: 641px) { #toppage .secProducts .edition__listWrap { padding-bottom: calc(100/1360*100%); margin-top: calc(100/1360*100%); } #toppage .secProducts .-editionTab { margin-top: calc(-30/1260*100%); -webkit-box-pack: center; justify-content: center; } #toppage .secProducts .-editionTab .editionTab__item { width: calc(240/1260*100%); margin: 0 calc(6/1260*100%); cursor: pointer; } #toppage .secProducts .-editionTab .editionTab__item .bF__thumb::before { border-width: calc(2/1360*100vw) calc(7/1360*100vw); } #toppage .secProducts .-editionTab .editionTab__item .bF__thumb::after { border-width: 0 calc(2/1360*100vw); } } @media screen and (min-width: 1361px) { #toppage .secProducts .edition__listWrap { padding-bottom: 100px; margin-top: 100px; } #toppage .secProducts .-editionTab .editionTab__item .bF__thumb::before { border-width: 2px 7px; } #toppage .secProducts .-editionTab .editionTab__item .bF__thumb::after { border-width: 0 2px; } } /* ストアボタン ---------------------------------------------------------------------------------------------------------------- */ #toppage .secProducts .btn_store .basicFrame { display: block; position: relative; overflow: hidden; background: #63030a; } #toppage .secProducts .btn_store .bF__thumb { z-index: 5; background: none; } #toppage .secProducts .btn_store .basicFrame::before, #toppage .secProducts .btn_store .basicFrame::after { content: ""; display: block; position: absolute; z-index: 1; background-image: radial-gradient(ellipse farthest-side, rgba(255,67,1,1) 0%, rgba(255,67,1,0) 100%); } #toppage .secProducts .btn_store .basicFrame::before { width: 120%; height: 100%; top: 0; left: 50%; opacity: 0.5; transform-origin: top center; transform: translate(-50%,-50%); } #toppage .secProducts .btn_store .basicFrame::after { width: 100%; height: 200%; bottom: 0; left: 50%; opacity: 0.1; transform-origin: bottom center; transform: translate(-50%,50%); } #toppage .secProducts .btn_store .basicFrame .bF__thumb::after { display: none; } #toppage .secProducts .btn_store .basicFrame .bF__thumb::before { border-color: rgba(162,38,24,1); border-width: calc(2/750*100vw) calc(4/750*100vw); } @media screen and (min-width: 641px) { #toppage .secProducts .btn_store .basicFrame .bF__thumb::before { border-width: calc(2/1360*100vw) calc(4/1360*100vw); } #toppage .secProducts a.btn_store { transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transform-origin: center center; display: block; box-shadow: 0px 0px 60px 30px rgba(255, 66, 66, 0); } #toppage .secProducts a.btn_store:hover { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0px 0px 6px 3px rgba(255, 66, 66, 0.5); } } @media screen and (min-width: 1361px) { #toppage .secProducts .btn_store .basicFrame .bF__thumb::before { border-width: 2px 4px; } } /* 商品詳細部分 ---------------------------------------------------------------------------------------------------------------- */ #toppage .secProducts .edition__list {} #toppage .secProducts .sectionItem { width: calc(650/750*100%); margin: auto; } #toppage .secProducts .sectionItem { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; */ } #toppage .secProducts .sectionItem__name { width: calc(670/650*100%); margin-top: calc(78/650*100%); margin-right: calc(-10/650*100%); margin-left: calc(-10/650*100%); margin-bottom: calc(40/650*100%); } #toppage .secProducts .sectionItem__pic { width: calc(230/650*100%); } #toppage .secProducts .sectionItem__description { width: calc(420/650*100%); font-size: calc(20/750*100vw); } #toppage .secProducts .sectionItem__description li { text-indent: -1em; padding-left: 1em; line-height: 1.41; margin-bottom: 0.3em; } #toppage .secProducts .sectionItem__description li:last-child { margin-bottom: 0; } #toppage .secProducts .sectionItem__description li span { color: #439bb5; } #toppage .secProducts .sectionItem__privilege {} #toppage .secProducts .sectionItem__privilege li { margin-top: calc(20/650*100%); } #toppage .secProducts .sectionItem__privilege li:first-child { margin-top: 0; } #toppage .secProducts .sectionItem__privilege li .basicFrame { overflow: hidden; } #toppage .secProducts .sectionItem__privilege li .bF__frame { background: #011c3a; width: 100%; } #toppage .secProducts .sectionItem__privilege li .bF__frame::before { content: ""; display: block; position: absolute; z-index: 1; } #toppage .secProducts .sectionItem__privilege li .bF__frame::before { width: 100%; height: 100%; top: 0; left: 0%; opacity: 0.3; transform-origin: top center; transform: translate(-50%,0%); background-image: radial-gradient(ellipse farthest-side, rgba(1,183,251,1) 0%, rgba(1,183,251,0) 100%); } #toppage .secProducts .sectionItem__privilege li .bF__thumb { background: none; } #toppage .secProducts .privilegeBox { width: calc(590/650*100%); margin: 0 auto; padding: calc(25/650*100%) 0; position: relative; z-index: 19; } #toppage .secProducts .privilegeBox__name { width: calc(430/590*100%); margin: 0 0 calc(15/590*100%) auto; } #toppage .secProducts .privilegeBox__pic { width: calc(140/590*100%); position: absolute; top: 0; left: 0; margin-top: calc(25/590*100%); } #toppage .secProducts .privilegeBox__text { width: calc(430/590*100%); margin: 0 0 0 auto; padding-top: calc(15/590*100%); border-top: 1px solid #1f4665; } #toppage .secProducts .privilegeBox__text p { width: 100%; font-size: calc(18/750*100vw); line-height: 1.61; color: #fff; font-feature-settings: "palt"; letter-spacing: 0.1em; } #toppage .secProducts .privilegeBox__text .privilegeBox__notes { font-size: calc(16/750*100vw); color: #cecece; line-height: 1.41; margin-top: 0.5em; } #toppage .secProducts .privilegeBox__text .privilegeBox__notes + .privilegeBox__notes { margin-top: 0.2em; } #toppage .secProducts .privilegeBox__text .privilegeBox__notes.-indent { text-indent: -1em; padding-left: 1em; } #toppage .secProducts .privilegeBox__text .privilegeBox__btn { width: calc(310/430*100%); margin: 1em auto 0; } #toppage .secProducts .privilegeBox__text .privilegeBox__btn .basicFrame { display: block; position: relative; overflow: hidden; background: #63030a; } #toppage .secProducts .privilegeBox__text .privilegeBox__btn .bF__thumb { z-index: 5; background: none; } #toppage .secProducts .sectionItem__privilege .privilegeBox__text .bF__frame { background: none; } #toppage .secProducts .sectionItem__privilege .privilegeBox__text .bF__frame::before { display: none; } #toppage .secProducts .privilegeBox__text .privilegeBox__btn .basicFrame::before, #toppage .secProducts .privilegeBox__text .privilegeBox__btn .basicFrame::after { content: ""; display: block; position: absolute; z-index: 1; background-image: radial-gradient(ellipse farthest-side, rgba(255,67,1,1) 0%, rgba(255,67,1,0) 100%); } #toppage .secProducts .privilegeBox__text .privilegeBox__btn .basicFrame::before { width: 120%; height: 100%; top: 0; left: 50%; opacity: 0.5; transform-origin: top center; transform: translate(-50%,-50%); } #toppage .secProducts .privilegeBox__text .privilegeBox__btn .basicFrame::after { width: 100%; height: 200%; bottom: 0; left: 50%; opacity: 0.1; transform-origin: bottom center; transform: translate(-50%,50%); } #toppage .secProducts .privilegeBox__text .privilegeBox__btn .basicFrame .bF__thumb::after { display: none; } #toppage .secProducts .privilegeBox__text .privilegeBox__btn .basicFrame .bF__thumb::before { border-color: rgba(162,38,24,1); border-width: calc(2/750*100vw) calc(4/750*100vw); } #toppage .secProducts .--soldout .privilegeBox__name { opacity: 0.5; } #toppage .secProducts .--soldout .privilegeBox__pic { opacity: 0.5; } #toppage .secProducts .--soldout .privilegeBox__text p { opacity: 0.3; } #toppage .secProducts .--soldout .privilegeBox__soldout { width: calc(430/590*100%); margin: 0 0 calc(15/590*100%) auto; background-color: #246f85; font-size: calc(18/750*100vw); font-feature-settings: "palt"; text-align: center; padding: 0.3em 0; } #toppage .secProducts .sectionItem__blockA { width: 100%; } #toppage .secProducts .sectionItem__notesList { margin-top: 2em; } #toppage .secProducts .sectionItem__notesList li { text-indent: -1em; padding-left: 1em; line-height: 1.41; font-size: calc(16/750*100vw); color: #cecece; margin-bottom: 0.3em; } #toppage .secProducts .sectionItem__notesList li:last-child { margin-bottom: 0; } #toppage .secProducts .sectionItem__price { font-size: calc(24/750*100vw); text-align: right; display: block; width: 100%; margin-top: calc(50/650*100%); } #toppage .secProducts .sectionItem__price .addPrice { font-size: calc(48/750*100vw); } #toppage .secProducts .sectionItem__btn { width: 100%; margin-top: calc(40/650*100%); display: -webkit-flex; display: flex; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .secProducts .sectionItem__btn li { width: calc(310/650*100%); } #toppage .secProducts .list__item__notesList { width: calc(650/750*100%); margin: calc(100/750*100%) auto 0; border-top: 1px solid #439bb5; padding-top: 0.5em; } #toppage .secProducts .list__item__notesList li { text-indent: -1em; padding-left: 1em; line-height: 1.41; font-size: calc(16/750*100vw); color: #cecece; margin-bottom: 0.3em; } #toppage .secProducts .list__item__notesList li:last-child { margin-bottom: 0; } @media screen and (max-width: 640px) { #toppage .secProducts .nosp { display: none!important; } #toppage .secProducts .edition__list__item:not(.-pkg) .sectionItem__btn li { margin: auto; width: calc(330/650*100%); } #toppage .secProducts .edition__list__item:not(.-pkg) .sectionItem__btn li .bF__thumb { padding: 0 calc(10/330*100%); } #toppage .secProducts .-pkg .sectionItem__descriptionWrap { width: calc(420/650*100%); } #toppage .secProducts .-pkg .sectionItem__description { width: 100%; } #toppage .secProducts .-dl .sectionItem.-dde { border-top: 1px solid #012141; margin-top: calc(50/650*100%); } #toppage .secProducts .-dl .sectionItem.-dde .sectionItem__name { margin-top: calc(50/650*100%); margin-right: 0; } #toppage .secProducts .-dl .sectionItem.-upgrade { border-top: 1px solid #012141; margin-top: calc(50/650*100%); } #toppage .secProducts .-dl .sectionItem.-upgrade .sectionItem__name { margin-top: calc(50/650*100%); margin-right: 0; } #toppage .secProducts .-dl .sectionItem.-upgrade .sectionItem__price { margin-top: calc(30/650*100%); } #toppage .secProducts .-dl .sectionItem__privilege { margin-top: calc(30/650*100%); } #toppage .secProducts .-dl .sectionItem__pic { width: calc(200/650*100%); margin-right: calc(30/650*100%); } #toppage .secProducts .-hero .sectionItem__pic { width: 100%; margin-bottom: calc(35/650*100%); } #toppage .secProducts .-hero .sectionItem__description { width: 100%; margin-bottom: calc(35/650*100%); } #toppage .secProducts .-clct .sectionItem__pic { width: 100%; margin-bottom: calc(35/650*100%); } #toppage .secProducts .-clct .sectionItem__description { width: 100%; margin-bottom: calc(35/650*100%); } } @media screen and (min-width: 641px) { #toppage .secProducts .edition__list {} #toppage .secProducts .sectionItem { width: calc(1260/1360*100%); margin: auto; } #toppage .secProducts .sectionItem__name { margin-top: calc(90/1260*100%); margin-left: calc(-11/1260*100%); margin-bottom: calc(30/1260*100%); } #toppage .secProducts .sectionItem__pic { width: calc(260/1260*100%); position: absolute; top: 0; left: 0; } #toppage .secProducts .sectionItem__description { width: calc(970/1260*100%); margin-left: calc(290/1260*100%); font-size: calc(16/1360*100vw); letter-spacing: 0.05em; } #toppage .secProducts .sectionItem__description li {} #toppage .secProducts .sectionItem__privilege { width: calc(600/1260*100%); margin-top: calc(30/1260*100%); margin-left: calc(290/1260*100%); } #toppage .secProducts .privilegeBox { width: calc(540/600*100%); padding: calc(25/600*100%) 0; position: relative; } #toppage .secProducts .privilegeBox__name { width: calc(380/540*100%); margin: 0 0 calc(13/540*100%) auto; } #toppage .secProducts .privilegeBox__pic { width: calc(140/540*100%); margin-top: calc(25/540*100%); } #toppage .secProducts .privilegeBox__text { width: calc(380/540*100%); padding-top: calc(13/540*100%); } #toppage .secProducts .privilegeBox__text p { font-size: calc(14/1360*100vw); letter-spacing: 0.15em; } #toppage .secProducts .privilegeBox__text .privilegeBox__notes { font-size: calc(13/1360*100vw); } #toppage .secProducts .--soldout .privilegeBox__soldout { font-size: calc(14/1360*100vw); } #toppage .secProducts .sectionItem__blockA { width: calc(340/1260*100%); position: absolute; right: 0; bottom: 0; } #toppage .secProducts .sectionItem__price { font-size: calc(18/1360*100vw); margin-top: calc(50/1260*100%); } #toppage .secProducts .sectionItem__price .addPrice { font-size: calc(36/1360*100vw); } #toppage .secProducts .sectionItem__notesList li { font-size: calc(13/1360*100vw); letter-spacing: -0.01em; } #toppage .secProducts .sectionItem__btn { margin-top: calc(20/340*100%); } #toppage .secProducts .sectionItem__btn li { width: 100%; } #toppage .secProducts .list__item__notesList { width: calc(1260/1360*100%); margin: calc(100/1360*100%) auto 0; padding-top: 1em; } #toppage .secProducts .list__item__notesList li { font-size: calc(13/1360*100vw); letter-spacing: -0.01em; } #toppage .secProducts .-pkg .sectionItem__name { width: calc(745/1260*100%); margin-right: calc(200/1260*100%); } #toppage .secProducts .-pkg .sectionItem__pic { width: calc(380/1260*100%); position: relative; } #toppage .secProducts .-pkg .sectionItem__descriptionWrap { width: calc(850/1260*100%); align-self: center; } #toppage .secProducts .-pkg .sectionItem__description { align-self: center; margin-left: 0; width: 100%; } #toppage .secProducts .-pkg .sectionItem__price { text-align: left; margin-bottom: 4em; } #toppage .secProducts .-pkg .sectionItem__privilege { width: 100%; margin: 0; display: -webkit-flex; display: flex; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .secProducts .-pkg .sectionItem__privilege li { width: calc(400/1260*100%); margin-top: 0; } #toppage .secProducts .-pkg .sectionItem__privilege li .bF__frame::before { transform: translate(0%,-50%); } #toppage .secProducts .-pkg .sectionItem__privilege .basicFrame , #toppage .secProducts .-pkg .sectionItem__privilege .bF__frame , #toppage .secProducts .-pkg .sectionItem__privilege .bF__thumb { height: 100%; } #toppage .secProducts .-pkg .privilegeBox { width: calc(340/400*100%); padding: calc(30/400*100%) 0 calc(20/400*100%); } #toppage .secProducts .-pkg .privilegeBox__name { width: 100%; margin: calc(170/340*100%) 0 calc(13/340*100%); } #toppage .secProducts .-pkg .privilegeBox__pic { width: 100%; margin-top: calc(30/340*100%); } #toppage .secProducts .-pkg .-materiaPkg .privilegeBox__pic { width: calc(140/340*100%); margin-left: calc(100/340*100%); } #toppage .secProducts .-pkg .privilegeBox__text { width: 100%; margin: calc(13/340*100%) 0 0 auto; padding-top: calc(15/340*100%); } #toppage .secProducts .-pkg .privilegeBox__text .privilegeBox__btn { width: 100%; } #toppage .secProducts .-pkg .privilegeBox__text .privilegeBox__btn .basicFrame .bF__thumb::before { border-width: calc(2/1360*100vw) calc(4/1360*100vw); } #toppage .secProducts .-pkg .privilegeBox { display: -webkit-flex; display: flex; flex-direction: column; height: 100%; } #toppage .secProducts .-pkg .privilegeBox__text { display: -webkit-flex; display: flex; flex-direction: column; flex-grow: 1; height: auto; } #toppage .secProducts .-pkg .privilegeBox__text .privilegeBox__btn { margin-top: auto; } #toppage .secProducts .-pkg .privilegeBox__text p:last-of-type { margin-bottom: 1em; } #toppage .secProducts .-pkg .--soldout .privilegeBox__soldout { width: 100%; margin: 0 0 0 auto; padding: 0.3em 0.1em; } #toppage .secProducts .-dl .sectionItem__name { width: calc(745/1260*100%); /* margin-right: calc(300/1260*100%); */ } #toppage .secProducts .-dl .sectionItem__pic { margin-top: calc(203/1260*100%); } #toppage .secProducts .-dl .--soldout .privilegeBox__soldout { width: calc(380/540*100%); padding: 0.3em 0.1em; } #toppage .secProducts .-dde .sectionItem__name { width: calc(1184/1260*100%); } #toppage .secProducts .-dde .sectionItem__pic { margin-top: calc(162/1260*100%); } #toppage .secProducts .-upgrade { display: grid; grid-template-columns: calc(290/1260*100%) 1fr; grid-template-rows: auto auto 1fr; } #toppage .secProducts .-upgrade .sectionItem__name { width: calc(1207/1260*100%); grid-row: 1 / 2; grid-column: 1 / 3; } #toppage .secProducts .-upgrade .sectionItem__pic { position: relative; margin-top: 0; width: calc(260/290*100%); grid-column: 1 / 2; grid-row: 2 / 5; } #toppage .secProducts .-upgrade .sectionItem__description { width: 100%; margin-left: 0; grid-column: 2 / 3; grid-row: 2 / 3; } #toppage .secProducts .-upgrade .sectionItem__notesList { width: 100%; margin-top: 1em; grid-column: 2 / 3; grid-row: 3 / 4; } #toppage .secProducts .-upgrade .sectionItem__blockA { position: relative; margin-left: auto; grid-column: 1 / 3; grid-row: 4 / 5; } #toppage .secProducts .-hero .sectionItem__name { width: calc(1093/1260*100%); } #toppage .secProducts .-hero .sectionItem__pic { width: 100%; position: relative; } #toppage .secProducts .-hero .sectionItem__description { width: 100%; margin-top: calc(30/1260*100%); margin-left: 0; } #toppage .secProducts .-hero .sectionItem__privilege { width: calc(600/1260*100%); margin-top: calc(30/1260*100%); margin-left: 0; } #toppage .secProducts .-clct .sectionItem__name { width: calc(1145/1260*100%); } #toppage .secProducts .-clct .sectionItem__pic { width: 100%; position: relative; } #toppage .secProducts .-clct .sectionItem__description { width: 100%; margin-top: calc(30/1260*100%); margin-left: 0; } #toppage .secProducts .-clct .sectionItem__privilege { width: calc(600/1260*100%); margin-top: calc(30/1260*100%); margin-left: 0; } } @media screen and (min-width: 1361px) { #toppage .secProducts .sectionItem { width: 1260px; } #toppage .secProducts .sectionItem__description { font-size: 1.6rem; } #toppage .secProducts .privilegeBox__text p { font-size: 1.4rem; } #toppage .secProducts .privilegeBox__text .privilegeBox__notes { font-size: 1.3rem; } #toppage .secProducts .-pkg .privilegeBox__text .privilegeBox__btn .basicFrame .bF__thumb::before { border-width: 2px 4px; } #toppage .secProducts .sectionItem__price { font-size: 1.8rem; } #toppage .secProducts .sectionItem__price .addPrice { font-size: 3.6rem; } #toppage .secProducts .sectionItem__notesList li { font-size: 1.3rem; } #toppage .secProducts .list__item__notesList { width: 1260px; margin-top: 100px; } #toppage .secProducts .list__item__notesList li { font-size: 1.3rem; } #toppage .secProducts .--soldout .privilegeBox__soldout { font-size: 1.4rem; } } @media screen and (min-width: 1921px) { #toppage .secSystem .secBlock__inner { background-size: 100%; } } /* .secSpec ---------------------------------------------------------------------------------------------------------------- */ #toppage .secSpec { padding-top: 0; } #toppage .secSpec .secBlock__inner { background: url("../../_img/spec/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(120/750*100%); padding-bottom: calc(300/750*100%); } #toppage .secSpec .secBlock__inner::before { margin-top: 0; } #toppage .secSpec .secBlock__inner::after { margin-top: calc(6/750*100%); } #toppage .secSpec .secSpec__specBlock { width: calc(650/750*100%); margin: 0 auto; border-bottom: 1px solid #1f5672; padding-bottom: calc(50/750*100%); } #toppage .secSpec .secSpec__title {} #toppage .secSpec .secSpec__specList { margin-top: calc(50/650*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: start; justify-content: flex-start; } #toppage .secSpec .secSpec__sL__item { width: 100%; margin-bottom: calc(20/650*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: start; justify-content: flex-start; align-items: baseline; } #toppage .secSpec .secSpec__sL__item:last-child { margin-bottom: 0; } #toppage .secSpec .secSpec__sL__item p { font-size: calc(22/750*100vw); line-height: 1.81; padding: 0.2em; position: relative; } #toppage .secSpec .secSpec__sL__item__name { background: #16415d; width: calc(200/650*100%); margin-right: calc(20/650*100%); text-align: center; border-width: 1px 4px; border-style: solid; border-color: #2d7195 #23607d; } #toppage .secSpec .secSpec__sL__item__name::before, #toppage .secSpec .secSpec__sL__item__name::after { content: ""; display: block; width: 6px; height: calc(100% + 2px); border: 1px solid #3a90b5; position: absolute; top: -1px; } #toppage .secSpec .secSpec__sL__item__name::before { left: -4px; border-right: none; } #toppage .secSpec .secSpec__sL__item__name::after { right: -4px; border-left: none; } #toppage .secSpec .secSpec__sL__item__conts { width: calc(430/650*100%); } #toppage .secSpec .secSpec__sL__item__conts span { font-size: calc(18/750*100vw); } #toppage .secSpec .secSpec__bnrBlock { width: calc(650/750*100%); margin: calc(50/750*100%) auto 0; } #toppage .secSpec .secSpec__bnrList { width: calc(560/650*100%); margin: 0 auto; } #toppage .secSpec .secSpec__bnrL__item { width: 100%; margin-bottom: calc(30/560*100%); } #toppage .secSpec .secSpec__bnrL__item:last-child { margin-bottom: 0; } #toppage .secSpec .secSpec__bnrL__item a { display: block; position: relative; } #toppage .secSpec .secSpec__bnrL__item a::before, #toppage .secSpec .secSpec__bnrL__item a::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #toppage .secSpec .secSpec__bnrL__item a::before { border-width: 0px 4px; border-style: solid; border-color: rgba(35,96,125,0.4); } #toppage .secSpec .secSpec__bnrL__item a::after { border: 1px solid #2d7195; } #toppage .secSpec .secSpec__bnrL__item.-i1 a::before { border-color: rgba(124,158,175,0.4); } #toppage .secSpec .secSpec__bnrL__item.-i1 a::after { border-color: #7c9eaf; } @media screen and (min-width: 641px) { #toppage .secSpec .secBlock__inner { padding-top: calc(50/1360*100%); padding-bottom: calc(140/1360*100%); background: url("../../_img/spec/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); } #toppage .secSpec .secBlock__inner::before { margin-top: 0; } #toppage .secSpec .secBlock__inner::after { margin-top: calc(6/1360*100%); } #toppage .secSpec .secSpec__specBlock { width: 100%; padding-bottom: calc(40/1260*100%); } #toppage .secSpec .secSpec__title { width: calc(909/1260*100%); margin-left: calc(-11/1260*100%); } #toppage .secSpec .secSpec__specList { margin-top: calc(10/1260*100%); } #toppage .secSpec .secSpec__sL__item { width: auto; margin-bottom: 0; } #toppage .secSpec .secSpec__sL__item p { font-size: 1.0294vw; line-height: 1.41; padding: 0.2em 5px 0.1em; white-space: nowrap; } #toppage .secSpec .secSpec__sL__item__name { min-width: calc(95/1360*100vw); width: auto; margin-right: calc(10/1360*100vw); } #toppage .secSpec .secSpec__sL__item__conts { width: auto; padding-right: 1.5em!important; padding-left: 0!important; } #toppage .secSpec .secSpec__sL__item__conts span { font-size: 0.95588vw; margin-left: 0.5em; } #toppage .secSpec .secSpec__sL__item.-i1 { width: 100%; margin-bottom: calc(12/1260*100%); } #toppage .secSpec .secSpec__bnrBlock { width: 100%; margin: calc(40/1260*100%) auto 0; } #toppage .secSpec .secSpec__bnrList { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .secSpec .secSpec__bnrL__item { width: calc(400/1260*100%); margin-bottom: 0; } } @media screen and (min-width: 1361px) { #toppage .secSpec .secBlock__inner { background-size: 1920px; padding-top: 50px; padding-bottom: 140px; } #toppage .secSpec .secBlock__inner::after { margin-top: 6px; } #toppage .secSpec .secSpec__sL__item p { font-size: 1.4rem; } #toppage .secSpec .secSpec__sL__item__name { min-width: 95px; width: 95px; margin-right: 10px; } #toppage .secSpec .secSpec__sL__item__conts span { font-size: 1.3rem; } } @media screen and (min-width: 1921px) { #toppage .secSpec .secBlock__inner { background-size: 100%; } } /* ---------------------------------------------------------------------------------------------------------------- #about ---------------------------------------------------------------------------------------------------------------- */ #about .main { padding-bottom: 0; } #about .secBlock { padding-top: calc(120/750*100%); } #about .secBlock__inner { position: relative; } #about .secBlock__inner::before, #about .secBlock__inner::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; z-index: 1; } #about .secBlock__inner::before { padding-top: calc(10/750*100%); background: rgba(18,124,147,0.2); margin-top: calc(-10/750*100%); } #about .secBlock__inner::after { height: 1px; background: #127c93; margin-top: calc(-4/750*100%); } #about .secBlock__hl { position: absolute; top: 0; left: 50%; margin-top: calc(-78/750*100%); z-index: 5; } @media screen and (min-width: 641px) { #about .secBlock { padding-top: calc(100/1360*100%); } #about .secBlock__inner { background-size: calc(1920/1360*100%); } #about .secBlock__inner::before { padding-top: calc(10/1360*100%); margin-top: calc(-10/1360*100%); } #about .secBlock__inner::after { margin-top: calc(-4/1360*100%); } #about .secBlock__hl { margin-top: calc(-50/1260*100%); } } @media screen and (min-width: 1361px) { #about .secBlock { padding-top: 100px; } #about .secBlock__inner { background-size: 1920px; } #about .secBlock__inner::before { padding-top: 10px; margin-top: -10px; } #about .secBlock__inner::after { margin-top: -4px; } } @media screen and (min-width: 1921px) { #about .secBlock__inner { background-size: 100%; } } /* .secHero ---------------------------------------------------------------------------------------------------------------- */ #about .secHero { padding-top: 0; margin-top: calc(-37/750*100%); } #about .secHero .secBlock__inner { background: url("../../about/_img/hero/bg_sp.jpg?220617") center bottom no-repeat; background-size: 100%; padding-bottom: calc(40/750*100%); } #about .secHero .secBlock__inner::before, #about .secHero .secBlock__inner::after { display: none; } #about .secHero .secHero__hl { width: calc(446/750*100%); margin-top: calc(144/750*100%); margin-left: calc(262/750*100%); } #about .secHero .secHero__zack { width: calc(368/750*100%); position: absolute; bottom: 0; left: 0; margin-bottom: calc(-162/750*100%); z-index: 3; } #about .secHero .secHero__text { width: 100%; margin: calc(90/750*100%) auto 0; position: relative; z-index: 4; } #about .secHero .secBlock__inner.anmBefore { filter: brightness(0%) blur(50px); transform: scale(1.1); margin: -50px; } #about .secHero .secBlock__inner.anmStart { animation: systemBgAnm 1.5s cubic-bezier(0,0.75,0.12,1) 0s forwards; } @keyframes systemBgAnm { from { filter: brightness(0%) blur(50px); transform: scale(1.1); margin: -50px; } to { filter: brightness(100%) blur(0px); transform: scale(1.0); margin: 0px; } } @media screen and (min-width: 641px) { #about .secHero { padding-top: 0; margin-top: calc(-38/1360*100%); } #about .secHero .secBlock__innerBG { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #about .secHero .secBlock__innerBG::before, #about .secHero .secBlock__innerBG::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; } #about .secHero .secBlock__innerBG::before { right: 50%; background: url("../../about/_img/hero/bg_rl_pc.jpg") right bottom repeat-x; } #about .secHero .secBlock__innerBG::after { left: 50%; background: url("../../about/_img/hero/bg_rr_pc.jpg") left bottom repeat-x; } #about .secHero .secBlock__inner { background: url("../../about/_img/hero/bg_pc.jpg?220617") center bottom no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(122/1360*100%); } #about .secHero .secHero__hl { width: calc(913/1260*100%); margin-top: calc(122/1260*100%); margin-left: calc(308/1260*100%); } #about .secHero .secHero__zack { width: calc(370/1260*100%); margin-left: calc(-74/1260*100%); margin-bottom: calc(-222/1260*100%); } #about .secHero .secHero__text { width: calc(963/1260*100%); margin: calc(48/1260*100%) auto 0 calc(306/1260*100%); } } @media screen and (min-width: 1361px) { #about .secHero { margin-top: -38px; } #about .secHero .secBlock__inner { background-size: 1920px; padding-bottom: 122px; } } @media screen and (min-width: 1921px) { #about .secHero .secBlock__inner {} #about .secHero .secBlock__innerBG::before { margin-right: 960px; } #about .secHero .secBlock__innerBG::after { margin-left: 960px; } } /* .secGraphics ---------------------------------------------------------------------------------------------------------------- */ #about .secGraphics {} #about .secGraphics .secBlock__inner { background: #000b16 url("../../about/_img/graphics/visual_sp.jpg") center top no-repeat; background-size: 100%; } #about .secGraphics .secBlock__hl { width: 100%; margin-left: calc(-375/750*100%); } #about .secGraphics .secGra__text { width: 100%; margin-top: calc(295/750*100%); } #about .secGraphics .secGra__imgCompare { width: calc(650/750*100%); margin: calc(60/750*100%) auto 0; overflow: hidden; position: relative; } #about .secGraphics .secGra__imgCompare::before, #about .secGraphics .secGra__imgCompare::after { content: ""; display: block; width: calc(10/750*100vw); height: 100%; position: absolute; top: 0; z-index: 4; background: rgba(13,44,67,0.5); border-style: solid; border-color: #439bb5; } #about .secGraphics .secGra__imgCompare::before { left: 0; border-width: 0 0 0 calc(4/750*100vw); } #about .secGraphics .secGra__imgCompare::after { right: 0; border-width: 0 calc(4/750*100vw) 0 0; } #about .secGraphics .secGra__imgCompare .icv__img { max-width: none; height: inherit; } #about .secGraphics .secGra__imgCompare .icv__img-b { position: absolute; } #about .secGraphics .icv__control-line { background-color: rgba(67,155,181,0.5)!important; box-shadow: none!important; } #about .secGraphics .icv__arrow-wrapper svg { filter: none!important; } body.icv__body { padding-right: 0px!important; } #about .secGraphics .secGra__imgListWrap { background: #061b37; width: 100%; margin: calc(112/750*100%) auto 0; position: relative; padding-top: 0.1%; padding-bottom: calc(120/750*100%); } #about .secGraphics .secGra__imgListWrap::before, #about .secGraphics .secGra__imgListWrap::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; } #about .secGraphics .secGra__imgListWrap::before { padding-top: calc(10/750*100%); background: rgba(18,124,147,0.2); margin-top: 0; } #about .secGraphics .secGra__imgListWrap::after { height: 1px; background: #127c93; margin-top: calc(6/750*100%); } #about .secGraphics .secGra__imgList { width: calc(650/750*100%); margin: calc(-52/750*100%) auto 0; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #about .secGraphics .secGra__iL__item { width: calc(310/650*100%); } #about .secGraphics .secGra__iL__item:first-child { width: 100%; margin-bottom: calc(30/650*100%); } @media screen and (min-width: 641px) { #about .secGraphics {} #about .secGraphics .secBlock__inner { background: #000b16 url("../../about/_img/graphics/visual_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); } #about .secGraphics .secBlock__hl { width: calc(463/1260*100%); margin-top: calc(210/1260*100%); margin-left: calc(-232/1260*100%); } #about .secGraphics .secGra__text { width: calc(837/1260*100%); margin: calc(307/1260*100%) auto 0; } #about .secGraphics .secGra__imgCompare { width: 100%; margin: calc(50/1260*100%) auto 0; } #about .secGraphics .secGra__imgCompare::before, #about .secGraphics .secGra__imgCompare::after { width: calc(10/1360*100vw); } #about .secGraphics .secGra__imgCompare::before { border-width: 0 0 0 calc(4/1360*100vw); } #about .secGraphics .secGra__imgCompare::after { border-width: 0 calc(4/1360*100vw) 0 0; } #about .secGraphics .secGra__imgListWrap { margin: calc(150/1360*100%) auto 0; padding-bottom: calc(53/1360*100%); } #about .secGraphics .secGra__imgListWrap::before { padding-top: calc(10/1360*100%); } #about .secGraphics .secGra__imgListWrap::after { margin-top: calc(6/1360*100%); } #about .secGraphics .secGra__imgList { width: 100%; margin: calc(-75/1260*100%) auto 0; z-index: 3; } #about .secGraphics .secGra__iL__item { width: calc(400/1260*100%); } #about .secGraphics .secGra__iL__item:first-child { width: calc(400/1260*100%); margin-bottom: 0; } } @media screen and (min-width: 1361px) { #about .secGraphics .secBlock__inner { background-size: 1920px; } #about .secGraphics .secGra__imgCompare::before, #about .secGraphics .secGra__imgCompare::after { width: 10px; } #about .secGraphics .secGra__imgCompare::before { border-width: 0 0 0 4px; } #about .secGraphics .secGra__imgCompare::after { border-width: 0 4px 0 0; } #about .secGraphics .secGra__imgListWrap { margin-top: 150px; padding-bottom: 53px; } #about .secGraphics .secGra__imgListWrap::before { padding-top: 10px; } #about .secGraphics .secGra__imgListWrap::after { margin-top: 6px; } } @media screen and (min-width: 1921px) { #about .secGraphics .secBlock__inner { background-size: 100%; } } /* .secImprovement ---------------------------------------------------------------------------------------------------------------- */ #about .secImprovement {} #about .secImprovement .secBlock__inner { background: #17110e url("../../about/_img/improvement/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(120/750*100%); } #about .secImprovement .secBlock__hl { width: 100%; margin-left: calc(-375/750*100%); } #about .secImprovement .secImprov__text { width: 100%; margin-top: calc(76/750*100%); } #about .secImprovement .secImprov__img { width: calc(650/750*100%); margin: calc(80/750*100%) auto 0; } @media screen and (min-width: 641px) { #about .secImprovement {} #about .secImprovement .secBlock__inner { background: #17110e url("../../about/_img/improvement/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(80/1360*100%); } #about .secImprovement .secBlock__hl { width: calc(534/1260*100%); margin-left: calc(-267/1260*100%); } #about .secImprovement .secImprov__text { width: calc(1033/1260*100%); margin: calc(41/1260*100%) auto 0; } #about .secImprovement .secImprov__img { width: 100%; margin: calc(46/1260*100%) auto 0; } } @media screen and (min-width: 1361px) { #about .secImprovement .secBlock__inner { background-size: 1920px; padding-bottom: 80px; } } @media screen and (min-width: 1921px) { #about .secImprovement .secBlock__inner { background-size: 100%; } } /* .secImprovement ---------------------------------------------------------------------------------------------------------------- */ #about .secSound {} #about .secSound .secBlock__inner { background: #0f1419 url("../../about/_img/sound/visual_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(300/750*100%); } #about .secSound .secBlock__hl { width: 100%; margin-left: calc(-375/750*100%); } #about .secSound .secSound__box { width: calc(650/750*100%); margin: 0 auto; } #about .secSound .secSound__box dt { position: relative; text-align: center; padding-bottom: calc(10/650*100%); } #about .secSound .secSound__box dt::before { content: ""; display: block; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background: linear-gradient(to right, rgba(49,200,244,0) 0%,rgba(49,200,244,1) 50%,rgba(49,200,244,0) 100%); } #about .secSound .secSound__box dd { margin-top: calc(10/650*100%); } #about .secSound .secSound__box.-box1 { margin-top: calc(284/750*100%); } #about .secSound .secSound__box.-box1 dt img { width: calc(301/650*100%); } #about .secSound .secSound__box.-box2 { margin-top: calc(40/750*100%); } #about .secSound .secSound__box.-box2 dt img { width: calc(269/650*100%); } @media screen and (min-width: 641px) { #about .secSound {} #about .secSound .secBlock__inner { background: #0f1419 url("../../about/_img/sound/visual_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(180/1360*100%); } #about .secSound .secBlock__hl { width: calc(461/1260*100%); margin-left: calc(-230/1260*100%); } #about .secSound .secSound__box { width: 100%; } #about .secSound .secSound__box dt { padding-bottom: calc(4/1260*100%); } #about .secSound .secSound__box dt::before { left: 50%; width: calc(750/1260*100%); margin-left: calc(-375/1260*100%); } #about .secSound .secSound__box dd { margin-top: calc(10/1260*100%); text-align: center; } #about .secSound .secSound__box.-box1 { margin-top: calc(66/1260*100%); } #about .secSound .secSound__box.-box1 dt img { width: calc(249/1260*100%); } #about .secSound .secSound__box.-box1 dd img { width: calc(672/1260*100%); } #about .secSound .secSound__box.-box2 { margin-top: calc(78/1260*100%); } #about .secSound .secSound__box.-box2 dt img { width: calc(223/1260*100%); } #about .secSound .secSound__box.-box2 dd img { width: calc(853/1260*100%); } } @media screen and (min-width: 1361px) { #about .secSound .secBlock__inner { background-size: 1920px; padding-bottom: 180px; } } @media screen and (min-width: 1921px) { #about .secSound .secBlock__inner { background-size: 100%; } } /* ---------------------------------------------------------------------------------------------------------------- #character ---------------------------------------------------------------------------------------------------------------- */ #character .main { margin-top: calc(-100/750*100%); padding-top: 0; padding-bottom: 0; } #character .secHeadline { margin-top: calc(46/750*100%); z-index: 9; } #character .secBlock::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(420/750*100%); position: absolute; top: 0; left: calc(-270/750*100%); margin-top: calc(660/750*100%); opacity: 0.3; background: #000; box-shadow: 0 0 100px 100px rgba(0,0,0,1); z-index: 3; } #character .characterArea { position: relative; padding-bottom: calc(280/750*100%); } #character .characterArea .bgb { position: absolute; top: 0; left: 50%; margin-left: calc(220/750*100%); background: rgba(0,0,0,0.4); width: 200%; height: 100%; transform: skewX(-10deg); transform-origin: left top; } #character .characterArea .bgb::before, #character .characterArea .bgb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #character .characterArea .bgb::before { background: rgba(0,0,0,0.2); margin-left: calc(-50/1500*100%); } #character .characterArea .bgb::after { background: rgba(0,0,0,0.3); margin-left: calc(-30/1500*100%); } #character .characterArea .bgb.anmBe { transform: translate(-100%) skewX(-10deg) scaleX(2); } #character .characterArea .bgb.anmBe::before { margin-left: calc(-1000/1500*100%); width: 200%; } #character .characterArea .bgb.anmBe::after { margin-left: calc(-1000/1500*100%); width: 200%; } #character .characterArea .bgb.anmStart { animation: bgbAnm 0.5s cubic-bezier(0,0.75,0.12,1) 0.8s forwards; } #character .characterArea .bgb.anmStart::before { animation: bgbAnmBefore 0.8s cubic-bezier(0,0.75,0.12,1) 1.1s forwards; } #character .characterArea .bgb.anmStart::after { animation: bgbAnmAfter 0.8s cubic-bezier(0,0.75,0.12,1) 1.0s forwards; } @keyframes bgbAnm { from { transform: translate(-100%) skewX(-10deg) scaleX(2); } to { transform: translate(0%) skewX(-10deg) scaleX(1); } } @keyframes bgbAnmBefore { from { margin-left: calc(-1000/1500*100%); } to { margin-left: calc(-50/1500*100%); } } @keyframes bgbAnmAfter { from { margin-left: calc(-1000/1500*100%); } to { margin-left: calc(-30/1500*100%); } } @media screen and (max-width: 640px) { #character .characterArea .bgb.-ltr { left: inherit; right: 50%; margin-left: 0; margin-right: calc(220/750*100%); transform: skewX(10deg); transform-origin: right top; } #character .characterArea .bgb.-ltr::before, #character .characterArea .bgb.-ltr::after { left: inherit; right: 0; } #character .characterArea .bgb.-ltr::before { margin-left: 0; margin-right: calc(-50/1500*100%); } #character .characterArea .bgb.-ltr::after { margin-left: 0; margin-right: calc(-30/1500*100%); } #character .characterArea .bgb.-ltr.anmBe { transform: translate(100%) skewX(10deg) scaleX(2); } #character .characterArea .bgb.-ltr.anmBe::before { margin-left: 0; margin-right: calc(-1000/1500*100%); width: 200%; } #character .characterArea .bgb.-ltr.anmBe::after { margin-left: 0; margin-right: calc(-1000/1500*100%); width: 200%; } #character .characterArea .bgb.-ltr.anmStart { animation: bgbAnmLTR 0.5s cubic-bezier(0,0.75,0.12,1) 0.8s forwards; } #character .characterArea .bgb.-ltr.anmStart::before { animation: bgbAnmBeforeLTR 0.8s cubic-bezier(0,0.75,0.12,1) 1.1s forwards; } #character .characterArea .bgb.-ltr.anmStart::after { animation: bgbAnmAfterLTR 0.8s cubic-bezier(0,0.75,0.12,1) 1.0s forwards; } } @keyframes bgbAnmLTR { from { transform: translate(100%) skewX(10deg) scaleX(2); } to { transform: translate(0%) skewX(10deg) scaleX(1); } } @keyframes bgbAnmBeforeLTR { from { margin-left: 0; margin-right: calc(-1000/1500*100%); } to { margin-left: 0; margin-right: calc(-50/1500*100%); } } @keyframes bgbAnmAfterLTR { from { margin-left: 0; margin-right: calc(-1000/1500*100%); } to { margin-left: 0; margin-right: calc(-30/1500*100%); } } #character .characterArea .cA__full { position: absolute; top: 0; right: 0; z-index: 2; } #character .characterArea .cA__detail { width: calc(650/750*100%); margin: calc(618/750*100%) auto 0; position: relative; z-index: 4; } #character .characterArea .cA__detail .cA__speech { margin-left: calc(-10/650*100%); } #character .characterArea .cA__detail .cA__name { margin: calc(41/650*100%) auto 0 calc(-7/650*100%); } #character .characterArea .cA__detail .cA__cv { margin: calc(8/650*100%) auto 0 calc(-10/650*100%); } #character .characterArea .cA__detail .cA__text { width: calc(670/650*100%); margin: calc(26/650*100%) auto 0 calc(-10/650*100%); } #character .characterArea .cA__subNav__area { margin-top: calc(123/750*100%); position: relative; z-index: 5; } #character .characterArea .cA__subNav__wrap { width: calc(650/750*100%); margin: 0 auto; position: relative; background: rgba(18,34,65,0.5); } #character .characterArea .cA__subNav__wrap::before, #character .characterArea .cA__subNav__wrap::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } #character .characterArea .cA__subNav__wrap::before { border-width: 0 calc(8/750*100vw); border-style: solid; border-color: rgba(13,44,67,0.5); } #character .characterArea .cA__subNav__wrap::after { border-width: 0 calc(4/750*100vw); border-style: solid; border-color: #439bb5; } #character .characterArea .cA__subNav { width: calc(594/650*100%); position: relative; padding: calc(20/650*100%) 0; margin: auto; display:-webkit-box; display:flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; } #character .characterArea .cA__subNav .cA__sN__item { width: calc(100/594*100%); position: relative; overflow: hidden; } #character .characterArea .cA__subNav .cA__sN__item:nth-child(n+6) { margin-top: calc(24/650*100%); } #character .characterArea .cA__subNav .cA__sN__item .btn { display: block; position: relative; pointer-events: auto; } #character .characterArea .cA__subNav .cA__sN__item .btn::before, #character .characterArea .cA__subNav .cA__sN__item .btn::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #character .characterArea .cA__subNav .cA__sN__item .btn::before { background: linear-gradient(to right, rgba(39,105,136,1) 0%,rgba(39,105,136,0) 50%,rgba(39,105,136,1) 100%); opacity: 0; } #character .characterArea .cA__subNav .cA__sN__item .btn::after { border-width: 1px calc(4/750*100vw); border-style: solid; border-color: #8cc1d0; opacity: 0; } #character .characterArea .cA__subNav .cA__sN__item.current .btn::before { opacity: 0.4; } #character .characterArea .cA__subNav .cA__sN__item.current .btn::after { opacity: 1; } #character .characterArea .cA__subNav.-sN1 { } #character .characterArea .cA__subNav.-sN2::before { content: ""; display: block; width: 100%; height: 1px; background: #2d5561; position: absolute; top: 0; left: 0; } #character #zack.main { background: #10181f url("../../character/_img/zack/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #zack .characterArea .cA__full { width: calc(810/750*100%); margin-top: calc(128/750*100%); margin-right: calc(-238/750*100%); } #character #angeal.main { background: #10181f url("../../character/_img/angeal/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #angeal .characterArea .cA__full { width: calc(878/750*100%); margin-top: calc(89/750*100%); margin-right: calc(-345/750*100%); } #character #genesis.main { background: #10181f url("../../character/_img/genesis/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #genesis .characterArea .cA__full { width: calc(1117/750*100%); margin-top: calc(119/750*100%); margin-right: calc(-259/750*100%); } #character #sephiroth.main { background: #10181f url("../../character/_img/sephiroth/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #sephiroth .characterArea .cA__detail { margin-top: calc(570/750*100%); } #character #sephiroth .characterArea .cA__full { width: calc(1039/750*100%); margin-top: calc(-145/750*100%); margin-right: calc(183/750*100%); } #character #aerith.main { background: #10181f url("../../character/_img/aerith/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #aerith .characterArea .cA__full { width: calc(350/750*100%); margin-top: calc(175/750*100%); margin-right: calc(39/750*100%); } #character #cloud.main { background: #10181f url("../../character/_img/cloud/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #cloud .characterArea .cA__full { width: calc(625/750*100%); margin-top: calc(162/750*100%); margin-right: calc(-81/750*100%); } #character #tseng.main { background: #10181f url("../../character/_img/tseng/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #cissnei.main { background: #10181f url("../../character/_img/cissnei/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #lazard.main { background: #10181f url("../../character/_img/lazard/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #hollander.main { background: #10181f url("../../character/_img/hollander/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #yuffie.main { background: #10181f url("../../character/_img/yuffie/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #reno.main { background: #10181f url("../../character/_img/reno/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #rude.main { background: #10181f url("../../character/_img/rude/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #hojo.main { background: #10181f url("../../character/_img/hojo/visual_sp.jpg") center top no-repeat; background-size: 100%; } #character #tifa.main { background: #10181f url("../../character/_img/tifa/visual_sp.jpg") center top no-repeat; background-size: 100%; } @media screen and (max-width: 640px) { #character .characterArea .cA__subNav .cA__sN__item.-adj { margin-right: auto; } #character .characterArea .cA__subNav { gap: 0 calc(25/650*100%); } } @media screen and (min-width: 641px) { #character .main { margin-top: calc(-78/1360*100%); padding-bottom: 0!important; background-size: calc(2520/1360*100%)!important; } #character .main__logo { margin-top: calc(39/1360*100%); } #character .secHeadline { margin-top: calc(26/1360*100%); } #character .secBlock::before { width: calc(500/1360*100%); padding-top: calc(250/1360*100%); left: 50%; margin-top: calc(440/1360*100%); margin-left: calc(40/1360*100%); opacity: 0.3; } #character .characterArea { padding-bottom: calc(274/1360*100%); } #character .characterArea .bgb { margin-left: calc(460/1360*100%); width: 100%; transform: skewX(-13deg); } #character .characterArea .cA__full {} #character .characterArea .cA__detail { width: calc(590/1260*100%); left: 50%; margin: calc(355/1260*100%) auto 0 calc(-20/1260*100%); } #character .characterArea .cA__detail .cA__speech { margin-left: 0;} #character .characterArea .cA__detail .cA__name { margin: calc(14/590*100%) auto 0 0; } #character .characterArea .cA__detail .cA__cv { margin: calc(-4/590*100%) auto 0 calc(3/590*100%); width: calc(488/590*100%); } #character .characterArea .cA__detail .cA__text { width: 100%; margin: calc(4/590*100%) auto 0 0; } #character .characterArea .cA__subNav__area { margin-top: 0; width: 100%; text-align: center; position: absolute; left: 0; bottom: 0; margin-bottom: calc(-170/1260*100%); } #character .characterArea .cA__subNav__area.fixed { position: fixed; margin-bottom: calc(100/1360*100%); } #character .characterArea .cA__subNav__wrap { width: auto; margin: 0; display: inline-block; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #character .characterArea .cA__subNav__wrap::before { border-width: 0 calc(10/1360*100vw); } #character .characterArea .cA__subNav__wrap::after { border-width: 0 calc(4/1360*100vw); } #character .characterArea .cA__subNav { width: auto; padding: calc(10/1360*100vw) calc(18/1360*100vw); flex-wrap: nowrap; } #character .characterArea .cA__subNav .cA__sN__item { width: calc(56/1360*100vw); margin: 0 calc(5/1360*100vw); } #character .characterArea .cA__subNav .cA__sN__item:nth-child(n+6) { margin-top: 0; } #character .characterArea .cA__subNav .cA__sN__item img { vertical-align: top; } #character .characterArea .cA__subNav .cA__sN__item .btn {} #character .characterArea .cA__subNav .cA__sN__item .btn::before { z-index: 7; } #character .characterArea .cA__subNav .cA__sN__item .btn::after { border-width: 1px 2px; } #character .characterArea .cA__subNav .cA__sN__item:not(.current) a.btn img { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transform-origin: center center; } #character .characterArea .cA__subNav .cA__sN__item:not(.current) a.btn:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); } #character .characterArea .cA__subNav .cA__sN__item:not(.current) a.btn:hover::before { opacity: 0.4; } #character .characterArea .cA__subNav .cA__sN__item:not(.current) a.btn:hover::after { opacity: 1; } #character .characterArea .cA__subNav.-sN2 { margin-left: calc(-25/1360*100vw); } #character .characterArea .cA__subNav.-sN2::before { width: 1px; height: calc(56/76*100%); top: calc(10/76*100%); left: calc(12/1360*100vw); } #character #zack.main { background: #000 url("../../character/_img/zack/visual_pc.jpg") center top no-repeat; } #character #zack .characterArea .cA__full { width: calc(540/1260*100%); margin-top: calc(45/1260*100%); margin-right: calc(-24/1260*100%); } #character #angeal.main { background: #000 url("../../character/_img/angeal/visual_pc.jpg") center top no-repeat; } #character #angeal .characterArea .cA__full { width: calc(586/1260*100%); margin-top: calc(20/1260*100%); margin-right: calc(-79/1260*100%); } #character #genesis.main { background: #000 url("../../character/_img/genesis/visual_pc.jpg") center top no-repeat; } #character #genesis .characterArea .cA__full { width: calc(760/1260*100%); margin-top: calc(43/1260*100%); margin-right: calc(-283/1260*100%); } #character #sephiroth.main { background: #000 url("../../character/_img/sephiroth/visual_pc.jpg") center top no-repeat; } #character #sephiroth .characterArea .cA__detail { margin-top: calc(313/1260*100%); } #character #sephiroth .characterArea .cA__full { width: calc(710/1260*100%); margin-top: calc(-144/1260*100%); margin-right: calc(17/1260*100%); } #character #aerith.main { background: #000 url("../../character/_img/aerith/visual_pc.jpg") center top no-repeat; } #character #aerith .characterArea .cA__full { width: calc(234/1260*100%); margin-top: calc(68/1260*100%); margin-right: calc(169/1260*100%); } #character #cloud.main { background: #000 url("../../character/_img/cloud/visual_pc.jpg") center top no-repeat; } #character #cloud .characterArea .cA__full { width: calc(416/1260*100%); margin-top: calc(68/1260*100%); margin-right: calc(44/1260*100%); } #character #tseng.main { background: #000 url("../../character/_img/tseng/visual_pc.jpg") center top no-repeat; } #character #cissnei.main { background: #000 url("../../character/_img/cissnei/visual_pc.jpg") center top no-repeat; } #character #lazard.main { background: #000 url("../../character/_img/lazard/visual_pc.jpg") center top no-repeat; } #character #hollander.main { background: #000 url("../../character/_img/hollander/visual_pc.jpg") center top no-repeat; } #character #yuffie.main { background: #000 url("../../character/_img/yuffie/visual_pc.jpg") center top no-repeat; } #character #reno.main { background: #000 url("../../character/_img/reno/visual_pc.jpg") center top no-repeat; } #character #rude.main { background: #000 url("../../character/_img/rude/visual_pc.jpg") center top no-repeat; } #character #hojo.main { background: #000 url("../../character/_img/hojo/visual_pc.jpg") center top no-repeat; } #character #tifa.main { background: #000 url("../../character/_img/tifa/visual_pc.jpg") center top no-repeat; } } @media screen and (min-width: 1361px) { #character .main { margin-top: -78px; background-size: 2520px!important; } #character .main__logo { margin-top: 39px; } #character .secHeadline { margin-top: 26px; } #character .secBlock::before { width: 500px; padding-top: 250px; margin-top: 440px; margin-left: 40px; } #character .characterArea { padding-bottom: 274px; } #character .characterArea .bgb { margin-left: 460px; } #character .characterArea .cA__subNav__area.fixed { margin-bottom: 100px; } #character .characterArea .cA__subNav__wrap::before { border-width: 0 10px; } #character .characterArea .cA__subNav__wrap::after { border-width: 0 4px; } #character .characterArea .cA__subNav { padding: 10px 18px; } #character .characterArea .cA__subNav .cA__sN__item { width: 56px; margin: 0 5px; } #character .characterArea .cA__subNav.-sN2 { margin-left: -25px; } #character .characterArea .cA__subNav.-sN2::before { left: 12px; } } /* ---------------------------------------------------------------------------------------------------------------- #system ---------------------------------------------------------------------------------------------------------------- */ #system .main { padding-bottom: 0; } #system .secBlock {} #system .posiFIXED { background-attachment: fixed!important; } /* .secHero ---------------------------------------------------------------------------------------------------------------- */ #system .secHero { margin-top: calc(-37/750*100%); overflow: hidden; } #system .secHero .secBlock__inner { background: #060d24 url("../../system/_img/hero/visual_sp.jpg") center top no-repeat; background-size: 100%; padding-top: 0.1%; } #system .secHero .secHero__wrap { background: rgba(6,13,37,0.7); margin-top: calc(623/750*100%); padding-bottom: calc(110/750*100%); } #system .secHero .secHero__hl { width: calc(546/750*100%); margin-top: calc(-108/750*100%); margin-left: calc(50/750*100%); } #system .secHero__imgList { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #system .secHero__iL__item { width: calc(310/650*100%); } #system .secHero__iL__item:first-child { width: 100%; margin-bottom: calc(30/650*100%); } #system .secHero .secHero__text { width: calc(670/750*100%); margin: calc(22/750*100%) auto 0; } #system .secHero .secBlock__inner.anmBefore { filter: brightness(0%) blur(50px); transform: scale(1.1); margin: -50px; } #system .secHero .secBlock__inner.anmStart { animation: systemBgAnm 1.5s cubic-bezier(0,0.75,0.12,1) 0s forwards; } @keyframes systemBgAnm { from { filter: brightness(0%) blur(50px); transform: scale(1.1); margin: -50px; } to { filter: brightness(100%) blur(0px); transform: scale(1.0); margin: 0px; } } @media screen and (min-width: 641px) { #system .secHero { margin-top: calc(-38/1360*100%); } #system .secHero .secBlock__inner { background: #090f27 url("../../system/_img/hero/visual_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); } #system .secHero .secHero__wrap { background: rgba(6,13,37,0.85); margin-top: calc(626/1360*100%); padding-bottom: calc(50/1360*100%); } #system .secHero .secHero__hl { width: calc(1068/1260*100%); margin-top: calc(-52/1260*100%); margin-left: 0; } #system .secHero__imgList { width: 100%; margin: calc(30/1260*100%) auto 0; } #system .secHero__iL__item { width: calc(400/1260*100%); } #system .secHero__iL__item:first-child { width: calc(400/1260*100%); margin-bottom: 0; } #system .secHero .secHero__text { width: calc(918/1260*100%); margin: calc(31/1260*100%) 0 0; } } @media screen and (min-width: 1361px) { #system .secHero { margin-top: -38px; } #system .secHero .secBlock__inner { background-size: 1920px; } #system .secHero .secHero__wrap { margin-top: 626px; padding-bottom: 50px; } } @media screen and (min-width: 1921px) { #system .secHero .secBlock__inner { background-size: 100%; } #system .secHero .secHero__wrap { margin-top: calc(626/1920*100%); } } /* .secBattle ---------------------------------------------------------------------------------------------------------------- */ #system .secBattle {} #system .secBattle .secBlock__inner { background: #08203a url("../../system/_img/battle/visual_v2_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(120/750*100%); } #system .secBattle .secBlock__inner::before, #system .secBattle .secBlock__inner::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; } #system .secBattle .secBlock__inner::before { padding-top: calc(10/750*100%); background: rgba(15,33,33,0.2); margin-top: 0; } #system .secBattle .secBlock__inner::after { height: 1px; background: rgba(59,59,59,0.2); margin-top: calc(6/750*100%); } #system .secBattle .secBtl__hl { width: calc(650/750*100%); margin: calc(337/750*100%) auto 0; padding-bottom: calc(5/750*100%); position: relative; } #system .secBattle .secBtl__hl::before { content: ""; display: block; width: 100%; height: 1px; background: #185a7d; position: absolute; left: 0; bottom: 0; } #system .secBattle .secBtl__hl img { width: calc(160/650*100%); margin-left: calc(-10/650*100%); } #system .secBattle .secBtl__text { width: calc(670/750*100%); margin: calc(10/750*100%) auto 0; } #system .secBtl__imgList { width: calc(650/750*100%); margin: calc(32/750*100%) auto 0; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #system .secBtl__iL__item { width: calc(310/650*100%); } #system .secBtl__iL__item:first-child { width: 100%; margin-bottom: calc(30/650*100%); } #system .secBtl__subhl { display: inline-block; border-bottom: 1px solid #fff; padding: 0 calc(45/750*100vw) 1px; position: relative; } #system .secBtl__subhl::before , #system .secBtl__subhl::after { content: ""; display: block; width: calc(11/750*100vw); height: calc(11/750*100vw); position: absolute; bottom: 0; margin-bottom: calc(-6/750*100vw); background-image: radial-gradient(ellipse farthest-side, rgba(255,255,255,1.0) 0%, rgba(255,255,255,0) 100%); } #system .secBtl__subhl::before { left: 0; margin-left: calc(-6/750*100vw); } #system .secBtl__subhl::after { right: 0; margin-right: calc(-6/750*100vw); } #system .secBtl__subleadtext { width: calc(664/650*100%); margin: calc(14/650*100%) 0 0 calc(-7/650*100%); } #system .secBtl__listWrap { width: 100%; margin: 0 auto 0; overflow: visible; } #system .secBtl__gauge { width: calc(650/750*100%); margin: calc(80/650*100%) auto 0; } #system .secBtl__gauge .secBtl__subhl img { width: calc(385/750*100vw); } #system .secBtl__gauge .secBtl__listWrap { margin-top: calc(36/650*100%); } #system .secBtl__action { width: calc(650/750*100%); margin: calc(80/650*100%) auto 0; } #system .secBtl__action .secBtl__subhl img { width: calc(550/750*100vw); } #system .secBtl__action .secBtl__listWrap { margin-top: calc(36/650*100%); } @media screen and (min-width: 641px) { #system .secBattle .secBlock__inner { background: #08203a url("../../system/_img/battle/visual_v2_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(100/1360*100%); } #system .secBattle .secBlock__inner::before { padding-top: calc(10/1360*100%); } #system .secBattle .secBlock__inner::after { margin-top: calc(6/1360*100%); } #system .secBattle .secBtl__hl { width: calc(160/1260*100%); margin: calc(247/1260*100%) 0 0 calc(-11/1260*100%); padding-bottom: 0; } #system .secBattle .secBtl__hl::before { width: calc(780/160*100%); left: calc(-90/160*100%); background: linear-gradient(to right, rgba(17,93,133,0) 0%,rgba(50,132,182,1) 15%,rgba(100,190,255,1) 25%,rgba(17,93,133,1) 35%,rgba(17,93,133,1) 90%,rgba(17,93,133,0) 100%); } #system .secBattle .secBtl__hl img { width: 100%; margin-left: 0; } #system .secBattle .secBtl__text { width: calc(878/1260*100%); margin: calc(16/1260*100%) 0 0 calc(-10/1260*100%); } #system .secBtl__imgList { width: 100%; margin: calc(20/1260*100%) auto 0; } #system .secBtl__iL__item { width: calc(400/1260*100%); } #system .secBtl__iL__item:first-child { width: calc(400/1260*100%); margin-bottom: 0; } #system .secBtl__subhl { padding: 0 calc(45/1360*100vw) 1px; } #system .secBtl__subhl::before , #system .secBtl__subhl::after { width: calc(11/1360*100vw); height: calc(11/1360*100vw); margin-bottom: calc(-6/1360*100vw); } #system .secBtl__subhl::before { margin-left: calc(-6/1360*100vw); } #system .secBtl__subhl::after { margin-right: calc(-6/1360*100vw); } #system .secBtl__listWrap {} #system .secBtl__listWrap .secBtl__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } #system .secBtl__listWrap .secBtl__item.swiper-slide-active , #system .secBtl__listWrap .secBtl__item.swiper-slide-next { opacity: 1; } #system .secBtl__listWrap .secBtl__item.btn_ov:hover { z-index: 100; position: relative; } #system .secBtl__listWrap .secBtl__item.btn_ov a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #system .secBtl__gauge { width: calc(1160/1260*100%); margin: calc(72/1260*100%) auto 0; } #system .secBtl__gauge .secBtl__subhl img { width: calc(385/1360*100vw); max-width: 385px; } #system .secBtl__gauge .secBtl__subleadtext { width: calc(1100/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-6/1160*100%); } #system .secBtl__gauge .secBtl__listWrap { margin-top: calc(36/1160*100%); } #system .secBtl__action { width: calc(1160/1260*100%); margin: calc(80/1260*100%) auto 0; } #system .secBtl__action .secBtl__subhl img { width: calc(803/1360*100vw); max-width: 803px; } #system .secBtl__action .secBtl__subleadtext { width: calc(1173/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-6/1160*100%); } #system .secBtl__action .secBtl__listWrap { margin-top: calc(40/1160*100%); } #system .secBtl__action .-noBtn .-battle { display: none; } } @media screen and (min-width: 1361px) { #system .secBattle .secBlock__inner { background-size: 1920px; padding-bottom: 100px; } #system .secBattle .secBlock__inner::before { padding-top: 10px; } #system .secBattle .secBlock__inner::after { margin-top: 6px; } #system .secBtl__subhl { padding: 0 45px 1px; } #system .secBtl__subhl::before , #system .secBtl__subhl::after { width: 11px; height: 11px; margin-bottom: -6px; } #system .secBtl__subhl::before { margin-left: -6px; } #system .secBtl__subhl::after { margin-right: -6px; } } @media screen and (min-width: 1921px) { #system .secBattle .secBlock__inner { background-size: 100%; } #system .secBattle .secBtl__hl { margin-top: calc(247/1920*100vw); } } /* .secMission ---------------------------------------------------------------------------------------------------------------- */ #system .secMission {} #system .secMission .secBlock__inner { background: #011537 url("../../system/_img/mission/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(120/750*100%); } #system .secMission .secBlock__inner::before, #system .secMission .secBlock__inner::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; } #system .secMission .secBlock__inner::before { padding-top: calc(10/750*100%); background: rgba(0,0,0,0.2); margin-top: 0; } #system .secMission .secBlock__inner::after { height: 1px; background: rgba(123,207,214,0.2); margin-top: calc(6/750*100%); } #system .secMission .secMsn__hl { width: calc(650/750*100%); margin: calc(112/750*100%) auto 0; padding-bottom: calc(5/750*100%); position: relative; } #system .secMission .secMsn__hl::before { content: ""; display: block; width: 100%; height: 1px; background: #185a7d; position: absolute; left: 0; bottom: 0; } #system .secMission .secMsn__hl img { width: calc(249/650*100%); margin-left: calc(-11/650*100%); } #system .secMission .secMsn__text { width: calc(670/750*100%); margin: calc(10/750*100%) auto 0; } #system .secMsn__listWrap { width: 100%; margin: 0 auto 0; overflow: visible; } #system .secMsn__mission { width: calc(650/750*100%); margin: calc(32/650*100%) auto 0; } #system .secMsn__item__text { width: calc(670/650*100%); margin-top: calc(7/650*100%); margin-left: calc(-10/650*100%); } #system .secMsn__subhl { display: inline-block; border-bottom: 1px solid #fff; padding: 0 calc(45/750*100vw) 1px; position: relative; } #system .secMsn__subhl::before , #system .secMsn__subhl::after { content: ""; display: block; width: calc(11/750*100vw); height: calc(11/750*100vw); position: absolute; bottom: 0; margin-bottom: calc(-6/750*100vw); background-image: radial-gradient(ellipse farthest-side, rgba(255,255,255,1.0) 0%, rgba(255,255,255,0) 100%); } #system .secMsn__subhl::before { left: 0; margin-left: calc(-6/750*100vw); } #system .secMsn__subhl::after { right: 0; margin-right: calc(-6/750*100vw); } #system .secMsn__subleadtext { width: calc(664/650*100%); margin: calc(14/650*100%) 0 0 calc(-7/650*100%); } #system .secMsn__listWrap { width: 100%; margin: 0 auto 0; overflow: visible; } #system .secMsn__item__detail { position: relative; } #system .secMsn__detail__hd { width: calc(534/650*100%); } #system .secMsn__detail__pic { margin-top: calc(11/650*100%); } #system .secMsn__detail__text { width: calc(670/650*100%); margin-top: calc(7/650*100%); margin-left: calc(-10/650*100%); } #system .secMsn__mngsub { width: calc(650/750*100%); margin: calc(80/650*100%) auto 0; } #system .secMsn__mngsub .secMsn__subhl img { width: calc(481/750*100vw); } #system .secMsn__mngsub .secMsn__listWrap { margin-top: calc(32/650*100%); } #system .secMsn__mail { width: calc(650/750*100%); margin: calc(76/650*100%) auto 0; } #system .secMsn__mail .secMsn__subhl img { width: calc(134/750*100vw); } #system .secMsn__mail .secMsn__listWrap { margin-top: calc(32/650*100%); } @media screen and (min-width: 641px) { #system .secMission .secBlock__inner { background: #011537 url("../../system/_img/mission/bg_v2_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(100/1360*100%); } #system .secMission .secBlock__inner::before { padding-top: calc(10/1360*100%); background: rgba(0,0,0,0.2); } #system .secMission .secBlock__inner::after { background: rgba(123,207,214,0.2); margin-top: calc(6/1360*100%); } #system .secMission .secMsn__hl { width: calc(249/1260*100%); margin: calc(109/1260*100%) 0 0 calc(-11/1260*100%); padding-bottom: 0; } #system .secMission .secMsn__hl::before { width: calc(780/249*100%); left: calc(-90/249*100%); background: linear-gradient(to right, rgba(17,93,133,0) 0%,rgba(50,132,182,1) 15%,rgba(100,190,255,1) 25%,rgba(17,93,133,1) 35%,rgba(17,93,133,1) 90%,rgba(17,93,133,0) 100%); } #system .secMission .secMsn__hl img { width: 100%; margin-left: 0; } #system .secMission .secMsn__text { width: calc(1003/1260*100%); margin: calc(16/1260*100%) 0 0 calc(-10/1260*100%); } #system .secMsn__mission { width: calc(1160/1260*100%); margin: calc(20/1260*100%) auto 0; } #system .secMsn__item__text { width: calc(554/534*100%); margin-top: calc(5/534*100%); margin-left: calc(-10/534*100%); } #system .secMsn__subhl { padding: 0 calc(45/1360*100vw) 1px; } #system .secMsn__subhl::before , #system .secMsn__subhl::after { width: calc(11/1360*100vw); height: calc(11/1360*100vw); margin-bottom: calc(-6/1360*100vw); } #system .secMsn__subhl::before { margin-left: calc(-6/1360*100vw); } #system .secMsn__subhl::after { margin-right: calc(-6/1360*100vw); } #system .secMsn__listWrap {} #system .secMsn__listWrap .secBtl__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } #system .secMsn__listWrap .secBtl__item.swiper-slide-active , #system .secMsn__listWrap .secBtl__item.swiper-slide-next { opacity: 1; } #system .secMsn__listWrap .secBtl__item.btn_ov:hover { z-index: 100; position: relative; } #system .secMsn__listWrap .secBtl__item.btn_ov a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #system .secMsn__mngsub { width: calc(1160/1260*100%); margin: calc(80/1260*100%) auto 0; } #system .secMsn__mngsub .secMsn__subhl img { width: calc(481/1360*100vw); max-width: 481px; } #system .secMsn__mngsub .secMsn__subleadtext { width: calc(876/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secMsn__mngsub .secMsn__listWrap { margin-top: calc(27/1160*100%); } #system .secMsn__mail { width: calc(1160/1260*100%); margin: calc(76/1260*100%) auto 0; } #system .secMsn__mail .secMsn__subhl img { width: calc(134/1360*100vw); max-width: 134px; } #system .secMsn__mail .secMsn__subleadtext { width: calc(1161/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secMsn__mail .secMsn__listWrap { margin-top: calc(40/1160*100%); } #system .secMission .-noBtn .-mission { display: none; } } @media screen and (min-width: 1361px) { #system .secMission .secBlock__inner { background-size: 1920px; padding-bottom: 100px; } #system .secMission .secBlock__inner::before { padding-top: 10px; } #system .secMission .secBlock__inner::after { margin-top: 6px; } #system .secMsn__subhl { padding: 0 45px 1px; } #system .secMsn__subhl::before , #system .secMsn__subhl::after { width: 11px; height: 11px; margin-bottom: -6px; } #system .secMsn__subhl::before { margin-left: -6px; } #system .secMsn__subhl::after { margin-right: -6px; } } @media screen and (min-width: 1921px) { #system .secMission .secBlock__inner { background-size: 100%; } #system .secMission .secMsn__hl { margin-top: calc(218/1920*100vw); } } /* .secMateria ---------------------------------------------------------------------------------------------------------------- */ #system .secMateria {} #system .secMateria .secMateriaBg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; background: #011431 url("../../system/_img/materia/bg_sp.jpg") center top no-repeat; background-size: 100%; } #system .secMateria .secBlock__inner { padding-bottom: calc(120/750*100%); } #system .secMateria .secBlock__inner::before, #system .secMateria .secBlock__inner::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; } #system .secMateria .secBlock__inner::before { padding-top: calc(10/750*100%); background: rgba(0,0,0,0.2); margin-top: 0; } #system .secMateria .secBlock__inner::after { height: 1px; background: rgba(123,207,214,0.2); margin-top: calc(6/750*100%); } #system .secMateria .secMtr__hl { width: calc(650/750*100%); margin: calc(112/750*100%) auto 0; padding-bottom: calc(5/750*100%); position: relative; } #system .secMateria .secMtr__hl::before { content: ""; display: block; width: 100%; height: 1px; background: #185a7d; position: absolute; left: 0; bottom: 0; } #system .secMateria .secMtr__hl img { width: calc(208/650*100%); margin-left: calc(-10/650*100%); } #system .secMateria .secMtr__text { width: calc(670/750*100%); margin: calc(10/750*100%) auto 0; } #system .secMtr__imgBox { width: calc(650/750*100%); margin: calc(32/750*100%) auto 0; position: relative; } #system .secMtr__subhl { display: inline-block; border-bottom: 1px solid #fff; padding: 0 calc(45/750*100vw) 1px; position: relative; } #system .secMtr__subhl::before , #system .secMtr__subhl::after { content: ""; display: block; width: calc(11/750*100vw); height: calc(11/750*100vw); position: absolute; bottom: 0; margin-bottom: calc(-6/750*100vw); background-image: radial-gradient(ellipse farthest-side, rgba(255,255,255,1.0) 0%, rgba(255,255,255,0) 100%); } #system .secMtr__subhl::before { left: 0; margin-left: calc(-6/750*100vw); } #system .secMtr__subhl::after { right: 0; margin-right: calc(-6/750*100vw); } #system .secMtr__subleadtext { width: calc(664/650*100%); margin: calc(14/650*100%) 0 0 calc(-7/650*100%); } #system .secMtr__listWrap { width: 100%; margin: 0 auto 0; overflow: visible; } #system .secMtr__item__detail { position: relative; } #system .secMtr__detail__hd { width: calc(534/650*100%); } #system .secMtr__detail__pic { margin-top: calc(11/650*100%); } #system .secMtr__detail__text { width: calc(670/650*100%); margin-top: calc(7/650*100%); margin-left: calc(-10/650*100%); } #system .secMtr__magic { width: calc(650/750*100%); margin: calc(80/650*100%) auto 0; } #system .secMtr__magic .secMtr__subhl img { width: calc(103/750*100vw); } #system .secMtr__magic .secMtr__listWrap { margin-top: calc(32/650*100%); } #system .secMtr__ability { width: calc(650/750*100%); margin: calc(73/650*100%) auto 0; } #system .secMtr__ability .secMtr__subhl img { width: calc(207/750*100vw); } #system .secMtr__ability .secMtr__listWrap { margin-top: calc(32/650*100%); } #system .secMtr__synthetic { width: calc(650/750*100%); margin: calc(73/650*100%) auto 0; } #system .secMtr__synthetic .secMtr__subhl img { width: calc(261/750*100vw); } #system .secMtr__synthetic .secMtr__listWrap { margin-top: calc(42/650*100%); } #system .secMtr__synthetic .secMtr__detail__pic { margin-top: 0; } @media screen and (min-width: 641px) { #system .secMateria .secMateriaBg { background: #011431 url("../../system/_img/materia/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); } #system .secMateria .secBlock__inner { padding-bottom: calc(100/1360*100%); } #system .secMateria .secBlock__inner::before { padding-top: calc(10/1360*100%); } #system .secMateria .secBlock__inner::after { margin-top: calc(6/1360*100%); } #system .secMateria .secMtr__hl { width: calc(208/1260*100%); margin: calc(113/1260*100%) 0 0 calc(-13/1260*100%); padding-bottom: 0; } #system .secMateria .secMtr__hl::before { width: calc(780/208*100%); left: calc(-90/208*100%); background: linear-gradient(to right, rgba(17,93,133,0) 0%,rgba(50,132,182,1) 15%,rgba(100,190,255,1) 25%,rgba(17,93,133,1) 35%,rgba(17,93,133,1) 90%,rgba(17,93,133,0) 100%); } #system .secMateria .secMtr__hl img { width: 100%; margin-left: 0; } #system .secMateria .secMtr__text { width: calc(589/1260*100%); margin: calc(16/1260*100%) 0 0 calc(-8/1260*100%); } #system .secMtr__imgBox { width: calc(534/1260*100%); position: absolute; top: 0; right: 0; margin: calc(75/1260*100%) 0 0; } #system .secMtr__subhl { padding: 0 calc(45/1360*100vw) 1px; } #system .secMtr__subhl::before , #system .secMtr__subhl::after { width: calc(11/1360*100vw); height: calc(11/1360*100vw); margin-bottom: calc(-6/1360*100vw); } #system .secMtr__subhl::before { margin-left: calc(-6/1360*100vw); } #system .secMtr__subhl::after { margin-right: calc(-6/1360*100vw); } #system .secMtr__listWrap {} #system .secMtr__listWrap .secMtr__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } #system .secMtr__listWrap .secMtr__item.swiper-slide-active , #system .secMtr__listWrap .secMtr__item.swiper-slide-next { opacity: 1; } #system .secMtr__listWrap .secMtr__item.btn_ov:hover { z-index: 100; position: relative; } #system .secMtr__listWrap .secMtr__item.btn_ov a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #system .secMtr__item__detail {} #system .secMtr__detail__hd { width: 100%; } #system .secMtr__detail__pic { margin-top: calc(11/534*100%); } #system .secMtr__detail__text { width: calc(554/534*100%); margin-top: calc(5/534*100%); margin-left: calc(-10/534*100%); } #system .secMtr__magic { width: calc(1160/1260*100%); margin: calc(72/1260*100%) auto 0; } #system .secMtr__magic .secMtr__subhl img { width: calc(103/1360*100vw); max-width: 103px; } #system .secMtr__magic .secMtr__subleadtext { width: calc(632/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secMtr__magic .secMtr__listWrap { margin-top: calc(28/1160*100%); } #system .secMtr__ability { width: calc(1160/1260*100%); margin: calc(72/1260*100%) auto 0; } #system .secMtr__ability .secMtr__subhl img { width: calc(207/1360*100vw); max-width: 207px; } #system .secMtr__ability .secMtr__subleadtext { width: calc(580/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secMtr__ability .secMtr__listWrap { margin-top: calc(28/1160*100%); } #system .secMtr__synthetic { width: calc(1160/1260*100%); margin: calc(74/1260*100%) auto 0; } #system .secMtr__synthetic .secMtr__subhl img { width: calc(261/1360*100vw); max-width: 261px; } #system .secMtr__synthetic .secMtr__subleadtext { width: calc(1135/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secMtr__synthetic .secMtr__listWrap { margin-top: calc(37/1160*100%); } #system .secMateria .-noBtn .-materia { display: none; } } @media screen and (min-width: 1361px) { #system .secMateria .secMateriaBg { background-size: 1920px; } #system .secMateria .secBlock__inner { padding-bottom: 100px; } #system .secMateria .secBlock__inner::before { padding-top: 10px; } #system .secMateria .secBlock__inner::after { margin-top: 6px; } #system .secMtr__subhl { padding: 0 45px 1px; } #system .secMtr__subhl::before , #system .secMtr__subhl::after { width: 11px; height: 11px; margin-bottom: -6px; } #system .secMtr__subhl::before { margin-left: -6px; } #system .secMtr__subhl::after { margin-right: -6px; } } @media screen and (min-width: 1921px) { #system .secMateria .secMateriaBg { background-size: 100%; } } /* .secDMW ---------------------------------------------------------------------------------------------------------------- */ #system .secDMW { background: #131325; } #system .secDMW .secBlock__inner { background-image: url("../../system/_img/dmw/visual_sp.jpg"); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding-bottom: calc(310/750*100%); } #system .secDMW .secBlock__inner { background-blend-mode: darken; background-color: rgba(19, 19, 37, 0.0); } #system .secDMW .secBlock__inner { animation: secDMWBgDarken--out 1.5s cubic-bezier(0,0.75,0.12,1) 0s forwards; } @keyframes secDMWBgDarken--out { 0% { background-color: rgba(19, 19, 37, 0.7); } 100% { background-color: rgba(19, 19, 37, 0.0); } } #system .secDMW .secBlock__inner.darken { animation: secDMWBgDarken 1.5s cubic-bezier(0,0.75,0.12,1) 0s forwards; } @keyframes secDMWBgDarken { 0% { background-color: rgba(19, 19, 37, 0.0); } 100% { background-color: rgba(19, 19, 37, 0.7); } } #system .secDMW .secBlock__inner::before, #system .secDMW .secBlock__inner::after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; } #system .secDMW .secBlock__inner::before { padding-top: calc(10/750*100%); background: rgba(18,124,147,0.2); margin-top: 0; } #system .secDMW .secBlock__inner::after { height: 1px; background: #127c93; margin-top: calc(6/750*100%); } #system .secDMW .secDMW__hl { width: calc(650/750*100%); margin: calc(298/750*100%) auto 0; padding-bottom: calc(5/750*100%); position: relative; } #system .secDMW .secDMW__hl::before { content: ""; display: block; width: 100%; height: 1px; background: #185a7d; position: absolute; left: 0; bottom: 0; } #system .secDMW .secDMW__hl img { width: calc(384/650*100%); margin-left: calc(-10/650*100%); } #system .secDMW .secDMW__text { width: calc(670/750*100%); margin: calc(10/750*100%) auto 0; } #system .secDMW__imgList { width: calc(650/750*100%); margin: calc(52/750*100%) auto 0; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #system .secDMW__iL__item { width: calc(310/650*100%); } #system .secDMW__iL__item:first-child { width: 100%; margin-bottom: calc(30/650*100%); } #system .secDMW__subhl { display: inline-block; border-bottom: 1px solid #fff; padding: 0 calc(45/750*100vw) 1px; position: relative; } #system .secDMW__subhl::before , #system .secDMW__subhl::after { content: ""; display: block; width: calc(11/750*100vw); height: calc(11/750*100vw); position: absolute; bottom: 0; margin-bottom: calc(-6/750*100vw); background-image: radial-gradient(ellipse farthest-side, rgba(255,255,255,1.0) 0%, rgba(255,255,255,0) 100%); } #system .secDMW__subhl::before { left: 0; margin-left: calc(-6/750*100vw); } #system .secDMW__subhl::after { right: 0; margin-right: calc(-6/750*100vw); } #system .secDMW__subleadtext { width: calc(664/650*100%); margin: calc(14/650*100%) 0 0 calc(-7/650*100%); } #system .secDMW__listWrap { width: 100%; margin: calc(0/650*100%) auto 0; overflow: visible; } #system .secDMW__item__detail { position: relative; } #system .secDMW__detail__hd { width: calc(534/650*100%); } #system .secDMW__detail__pic { margin-top: calc(11/650*100%); } #system .secDMW__detail__text { width: calc(670/650*100%); margin-top: calc(7/650*100%); margin-left: calc(-10/650*100%); } #system .secDMW__picListWrap { overflow: visible; } #system .secDMW__picListWrap.swiper-container-horizontal > .swiper-pagination-bullets, #system .secDMW__picListWrap .swiper-pagination-custom, #system .secDMW__picListWrap .swiper-pagination-fraction { position: relative; bottom: 0px; } #system .secDMW__picListWrap .picSlider__pagination { padding-top: calc(30/650*100%); } #system .secDMW__picListWrap .picSlider__pagination .swiper-pagination-bullet { width: calc(30/650*100%); height: 0; padding-top: calc(30/650*100%); background: #0d2c43; opacity: 1; position: relative; } #system .secDMW__picListWrap .picSlider__pagination .swiper-pagination-bullet::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #429ab4; border-radius: 100%; } #system .secDMW__picListWrap .picSlider__pagination .swiper-pagination-bullet-active { background: #429ab4; } #system .secDMW__picListWrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(15/650*100%); } #system .secDMW__limit { width: calc(650/750*100%); margin: calc(80/650*100%) auto 0; } #system .secDMW__limit .secDMW__subhl img { width: calc(207/750*100vw); } #system .secDMW__limit .secDMW__listWrap { margin-top: calc(32/650*100%); } #system .secDMW__summon { width: calc(650/750*100%); margin: calc(73/650*100%) auto 0; } #system .secDMW__summon .secDMW__subhl img { width: calc(143/750*100vw); } #system .secDMW__summon .secDMW__listWrap { margin-top: calc(32/650*100%); } #system .secDMW__chocobo { width: calc(650/750*100%); margin: calc(73/650*100%) auto 0; } #system .secDMW__chocobo .secDMW__subhl img { width: calc(299/750*100vw); } #system .secDMW__chocobo .secDMW__listWrap { margin-top: calc(32/650*100%); } @media screen and (min-width: 641px) { #system .secDMW { background: #101328; } #system .secDMW .secBlock__inner { background-image: url("../../system/_img/dmw/visual_v2_pc.jpg"); background-position: center top; background-repeat: no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(150/1360*100%); } #system .secDMW .secBlock__inner::before { padding-top: calc(10/1360*100%); background: rgba(21,40,44,0.2); } #system .secDMW .secBlock__inner::after { background: rgba(0,0,0,0.2); margin-top: calc(6/1360*100%); } #system .secDMW .secDMW__hl { width: calc(377/1260*100%); margin: calc(218/1260*100%) 0 0 calc(-11/1260*100%); padding-bottom: 0; } #system .secDMW .secDMW__hl::before { width: calc(780/386*100%); left: calc(-90/386*100%); background: linear-gradient(to right, rgba(17,93,133,0) 0%,rgba(50,132,182,1) 15%,rgba(100,190,255,1) 25%,rgba(17,93,133,1) 35%,rgba(17,93,133,1) 90%,rgba(17,93,133,0) 100%); } #system .secDMW .secDMW__hl img { width: 100%; margin-left: 0; } #system .secDMW .secDMW__text { width: calc(1003/1260*100%); margin: calc(16/1260*100%) 0 0 calc(-10/1260*100%); } #system .secDMW__imgList { width: 100%; margin: calc(20/1360*100%) auto 0; } #system .secDMW__iL__item { width: calc(400/1260*100%); } #system .secDMW__iL__item:first-child { width: calc(400/1260*100%); margin-bottom: 0; } #system .secDMW__subhl { padding: 0 calc(45/1360*100vw) 1px; } #system .secDMW__subhl::before , #system .secDMW__subhl::after { width: calc(11/1360*100vw); height: calc(11/1360*100vw); margin-bottom: calc(-6/1360*100vw); } #system .secDMW__subhl::before { margin-left: calc(-6/1360*100vw); } #system .secDMW__subhl::after { margin-right: calc(-6/1360*100vw); } #system .secDMW__listWrap {} #system .secDMW__listWrap .secDMW__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } #system .secDMW__listWrap .secDMW__item.swiper-slide-active , #system .secDMW__listWrap .secDMW__item.swiper-slide-next { opacity: 1; } #system .secDMW__listWrap .secDMW__item.btn_ov:hover { z-index: 100; position: relative; } #system .secDMW__listWrap .secDMW__item.btn_ov a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #system .secDMW__item__detail {} #system .secDMW__detail__hd { width: 100%; } #system .secDMW__detail__pic { margin-top: calc(11/534*100%); } #system .secDMW__detail__text { width: calc(554/534*100%); margin-top: calc(5/534*100%); margin-left: calc(-10/534*100%); } #system .secDMW__picListWrap {} #system .secDMW__picListWrap .picSlider__pagination { padding-top: calc(16/534*100%); } #system .secDMW__picListWrap .picSlider__pagination .swiper-pagination-bullet { width: calc(16/534*100%); padding-top: calc(16/534*100%); } #system .secDMW__picListWrap .picSlider__pagination .swiper-pagination-bullet::before { border-width: 2px; } #system .secDMW__picListWrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(8/534*100%); } #system .secDMW__limit { width: calc(1160/1260*100%); margin: calc(80/1260*100%) auto 0; } #system .secDMW__limit .secDMW__subhl img { width: calc(207/1360*100vw); max-width: 207px; } #system .secDMW__limit .secDMW__subleadtext { width: calc(791/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secDMW__limit .secDMW__listWrap { margin-top: calc(28/1160*100%); } #system .secDMW__summon { width: calc(1160/1260*100%); margin: calc(80/1260*100%) auto 0; } #system .secDMW__summon .secDMW__subhl img { width: calc(143/1360*100vw); max-width: 143px; } #system .secDMW__summon .secDMW__subleadtext { width: calc(791/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secDMW__summon .secDMW__listWrap { margin-top: calc(28/1160*100%); } #system .secDMW__chocobo { width: calc(1160/1260*100%); margin: calc(80/1260*100%) auto 0; } #system .secDMW__chocobo .secDMW__subhl img { width: calc(299/1360*100vw); max-width: 299px; } #system .secDMW__chocobo .secDMW__subleadtext { width: calc(1117/1160*100%); margin: calc(15/1160*100%) 0 0 calc(-8/1160*100%); } #system .secDMW__chocobo .secDMW__listWrap { margin-top: calc(28/1160*100%); } #system .secDMW__summon .-noBtn .-DMW { display: none; } } @media screen and (min-width: 1361px) { #system .secDMW .secBlock__inner { background-size: 1920px; padding-bottom: 150px; } #system .secDMW .secBlock__inner::before { padding-top: 10px; } #system .secDMW .secBlock__inner::after { margin-top: 6px; } #system .secDMW__subhl { padding: 0 45px 1px; } #system .secDMW__subhl::before , #system .secDMW__subhl::after { width: 11px; height: 11px; margin-bottom: -6px; } #system .secDMW__subhl::before { margin-left: -6px; } #system .secDMW__subhl::after { margin-right: -6px; } } @media screen and (min-width: 1921px) { #system .secDMW .secBlock__inner { background-size: 100%; } #system .secDMW .secDMW__hl { margin-top: calc(218/1920*100vw); } } /* ---------------------------------------------------------------------------------------------------------------- #media ---------------------------------------------------------------------------------------------------------------- */ #media .main { padding-bottom: 0; } #media .secBlock { padding-top: calc(120/750*100%); } #media .secBlock__inner { position: relative; } @media screen and (min-width: 641px) { #media .secBlock { padding-top: calc(100/1360*100%); } #media .secBlock__inner { background-size: calc(1920/1360*100%); } } @media screen and (min-width: 1361px) { #media .secBlock { padding-top: 100px; } #media .secBlock__inner { background-size: 1920px; } } @media screen and (min-width: 1921px) { #media .secBlock__inner { background-size: 100%; } } /* .secMovie ---------------------------------------------------------------------------------------------------------------- */ #media .secMovie { padding-top: 0; margin-top: calc(-37/750*100%); } #media .secMovie .secBlock__inner { background: #05273e url("../../media/_img/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-bottom: calc(300/750*100%); } #media .secMov__list { width: calc(650/750*100%); margin: calc(100/750*100%) auto 0; } #media .secMov__list__item:first-child { margin-top: 0; } #media .secMov__list__item { margin-top: calc(60/650*100%); } #media .secMov__list__item .bF__name { width: calc(560/650*100%); margin-top: calc(-30/650*100%); margin-left: calc(-280/650*100%); } #media .secMov__list__item .bF__name span { display: block; width: calc(486/560*100%); margin-left: auto; position: relative; } #media .secMov__list__item .bF__name span::before , #media .secMov__list__item .bF__name span::after { content: ""; display: block; position: absolute; top: 0; } #media .secMov__list__item .bF__name span::before { width: calc(72/486*100%); height: 100%; left: calc(-72/486*100%); background: url(../../media/_img/thumb/icon_play.png) center no-repeat; background-size: contain; } #media .secMov__list__item .bF__name span::after { width: 1px; height: calc(62/68*100%); left: -1px; margin-top: calc(3/486*100%); background: #46a3be; } @media screen and (min-width: 641px) { #media .secMovie { padding-top: 0; margin-top: calc(-38/1360*100%); } #media .secMovie .secBlock__inner { background: #05273e url("../../media/_img/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); padding-bottom: calc(280/1360*100%); } #media .secMov__list { width: 100%; margin: calc(200/1260*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #media .secMov__list__item { width: calc(400/1260*100%); margin-top: 0; } #media .secMov__list__item.-large { width: calc(600/1260*100%); } #media .secMov__list__item .bF__name { width: calc(360/400*100%); margin-top: calc(-20/600*100%); margin-left: calc(-180/400*100%); } #media .secMov__list__item.-large .bF__name { width: calc(400/600*100%); margin-left: calc(-200/600*100%); } #media .secMov__list__item .bF__name span { width: calc(347/398*100%); } #media .secMov__list__item .bF__name span::before { width: calc(51/347*100%); left: calc(-51/347*100%); } #media .secMov__list__item .bF__name span::after { height: calc(44/48*100%); margin-top: calc(2/347*100%); } } @media screen and (min-width: 1361px) { #media .secMovie { margin-top: -38px; } #media .secMovie .secBlock__inner { background-size: 1920px; padding-bottom: 280px; } } @media screen and (min-width: 1921px) { #media .secMovie .secBlock__inner { background-size: 100%; } } /* ---------------------------------------------------------------------------------------------------------------- #gaming ---------------------------------------------------------------------------------------------------------------- */ #gaming .main { margin-top: calc(-100/750*100%); padding-top: 0; } #gaming .secBlock { padding-top: calc(200/750*100%); } #gaming .secBlock__inner { position: relative; } #gaming .secBlock__hl { position: absolute; top: 0; left: 50%; margin-top: calc(-80/750*100%); z-index: 5; } @media screen and (min-width: 641px) { #gaming .main { margin-top: calc(-78/1360*100%); } #gaming .secBlock{ padding-top: calc(150/1360*100%); } #gaming .secBlock__hl { margin-top: calc(-50/1260*100%); } } @media screen and (min-width: 1361px) { #gaming .main { margin-top: -78px; } #gaming .secBlock{ padding-top: 150px; } } @media screen and (min-width: 1921px) { } /* .secHero ---------------------------------------------------------------------------------------------------------------- */ #gaming .secHero { background: #061d2b; } #gaming .secHero__visual { position: absolute; top: 0; left: 0; } #gaming .secHero__logo { width: calc(512/750*100%); margin: calc(171/750*100%) auto 0; position: relative; transform-origin: center center; } #gaming .secHero__block { background-color: rgba(1,21,55,0.9); position: relative; margin-top: calc(130/750*100%); padding-bottom: calc(30/750*100vw); color: #e5e5e5; } #gaming .secHero__headline { width: calc(322/750*100%); margin: calc(-38/750*100%) auto 0; } #gaming .secHero__leadtext { width: calc(670/750*100%); margin: calc(26/750*100%) auto 0; } #gaming .secHero__text { width: calc(650/750*100%); margin: calc(32/750*100%) auto 0; font-size: calc(24/750*100vw); line-height: 1.61; } #gaming .secHero__notes { width: calc(650/750*100%); margin: calc(32/750*100%) auto 0; font-size: calc(16/750*100vw); line-height: 1.41; text-indent: -1em; padding-left: 1em; } #gaming .secHero__notes li { font-feature-settings: "palt"; } @media screen and (min-width: 641px) { #gaming .secHero { padding-top: 0; } #gaming .secHero__visual { position: relative; width: calc(1920/1360*100%); left: 50%; margin-left: calc(-960/1360*100%); } #gaming .secHero__wrap { position: absolute; top: 0; left: 0; width: 100%; } #gaming .secHero__logo { width: calc(548/1260*100%); margin: calc(145/1260*100%) 0 0 0; } #gaming .secHero__block { margin-top: calc(144/1360*100%); padding-bottom: calc(40/1360*100%); } #gaming .secHero__headline { width: calc(322/1260*100%); margin: calc(-38/1260*100%) auto 0 calc(114/1260*100%); } #gaming .secHero__leadtext { width: calc(1032/1260*100%); margin: calc(17/1260*100%) auto 0 calc(-8/1260*100%);} #gaming .secHero__text { margin: calc(32/1260*100%) 0 0; font-size: calc(20/1360*100vw); } #gaming .secHero__notes { width: 100%; margin: calc(36/1260*100%) 0 0; font-size: calc(12/1360*100vw); } } @media screen and (min-width: 1361px) { #gaming .secHero { padding-top: 0; } #gaming .secHero__visual { } #gaming .secHero__visual { width: 1920px; margin-left: -960px; } #gaming .secHero__block { margin-top: 144px; padding-bottom: 40px; } #gaming .secHero__text { font-size: 20px; } #gaming .secHero__notes { font-size: 12px; } } @media screen and (min-width: 1921px) { #gaming .secHero__visual { width: 100%; left: 0; margin-left: 0; } #gaming .secHero__visual img { width: 100%; } } /* .secManufacturer ---------------------------------------------------------------------------------------------------------------- */ #gaming .secManufacturer {} #gaming .secManufacturer .secBlock__inner { background: rgba(223, 225, 255, 0.5); padding-bottom: calc(50/750*100%); } #gaming .secManufacturer .secBlock__hl { width: calc(650/750*100%); margin-left: calc(-325/750*100%); } #gaming .secManufacturer .secMnf__list { width: calc(620/750*100%); margin: calc(40/750*100%) auto 0; display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: justify; justify-content: space-between; } #gaming .secManufacturer .secMnf__list li { width: calc(300/620*100%); margin-bottom: calc(20/620*100%); } @media screen and (min-width: 641px) { #gaming .secManufacturer .secBlock__inner { padding-bottom: calc(60/1360*100%); } #gaming .secManufacturer .secBlock__hl { width: calc(390/1260*100%); margin-left: calc(-195/1260*100%); } #gaming .secManufacturer .secMnf__list { width: 100%; margin: calc(90/1260*100%) auto 0; } #gaming .secManufacturer .secMnf__list li { width: calc(300/1260*100%); margin-bottom: calc(30/1260*100%); } #gaming .secManufacturer .secMnf__list .btn_ov a { position: relative; } #gaming .secManufacturer .secMnf__list .btn_ov a::before { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(255,255,255,0.3); position: absolute; top: 0; left: 0; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; } #gaming .secManufacturer .secMnf__list .btn_ov a img { position: relative; } #gaming .secManufacturer .secMnf__list .btn_ov a:hover { -webkit-transform: scale(1.07); transform: scale(1.07); } #gaming .secManufacturer .secMnf__list .btn_ov a:hover::before { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @media screen and (min-width: 1361px) { #gaming .secManufacturer .secBlock__inner { padding-bottom: 60px; } } /* .secLineup ---------------------------------------------------------------------------------------------------------------- */ #gaming .secLineup {} #gaming .secLineup .secBlock__inner { background: rgba(1, 21, 55, 0.3); padding-bottom: calc(0/750*100%); } #gaming .secLineup .secBlock__hl { width: calc(650/750*100%); margin-left: calc(-325/750*100%); } #gaming .secLineup .secLiup__blockWrap { background: rgba(223, 225, 255, 0.5); padding-top: calc(20/750*100%); padding-bottom: calc(80/750*100%); margin-top: calc(100/750*100%); } #gaming .secLineup .secLiup__blockWrap:first-of-type { margin-top: calc(80/750*100%); } #gaming .secLineup .secLiup__block { width: calc(650/750*100%); margin: 0 auto; } #gaming .secLineup .secLiup__logo {} #gaming .secLineup .secLiup__list {} #gaming .secLineup .secLiup__list li { margin-bottom: calc(50/650*100%); } #gaming .secLineup .secLiup__list li:last-child { margin-bottom: 0; } #gaming .secLineup .secLiup__list li .basicFrame { overflow: hidden; } #gaming .secLineup .secLiup__list li .bF__frame { background: #011c3a; width: 100%; } #gaming .secLineup .secLiup__list li .bF__frame::before { content: ""; display: block; position: absolute; z-index: 1; } #gaming .secLineup .secLiup__list li .bF__frame::before { width: 150%; height: 200%; top: 0; left: 50%; opacity: 1.0; transform-origin: top center; transform: translate(-50%,-50%); background-image: radial-gradient(ellipse farthest-side, rgba(187,220,249,0.8) 0%, rgba(1,183,251,0) 90%); } #gaming .secLineup .secLiup__list li .bF__thumb { background: none; } #gaming .secLineup .detailBox { display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: calc(50/650*100%); position: relative; z-index: 19; } #gaming .secLineup .detailBox__name { order: 2; width: calc(550/650*100%); margin: 0 auto; border-bottom: 1px solid #1f4665; font-size: calc(30/750*100vw); line-height: 1.21; padding-bottom: 0.4em; } #gaming .secLineup .detailBox__pic { order: 1; width: calc(600/650*100%); margin: 0 auto; } #gaming .secLineup .detailBox__text { order: 3; width: calc(550/650*100%); margin: 1em auto 0; } #gaming .secLineup .detailBox__text p { font-size: calc(20/750*100vw); line-height: 1.61; font-feature-settings: "palt"; } #gaming .secLineup .detailBox__text .detailBox__btn { width: calc(320/550*100%); margin: 1.5em auto 0; } #gaming .secLineup .detailBox__text .btn__detail { display: block; } #gaming .secLineup .detailBox__text .btn__detail .basicFrame { display: block; position: relative; overflow: hidden; background: #63030a; } #gaming .secLineup .detailBox__text .btn__detail .bF__thumb { z-index: 5; background: none; } #gaming .secLineup .secLiup__list li .detailBox__text .btn__detail .bF__frame { background: none; } #gaming .secLineup .secLiup__list li .detailBox__text .btn__detail .bF__frame::before { display: none; } #gaming .secLineup .detailBox__text .btn__detail .basicFrame::before, #gaming .secLineup .detailBox__text .btn__detail .basicFrame::after { content: ""; display: block; position: absolute; z-index: 1; background-image: radial-gradient(ellipse farthest-side, rgba(255,67,1,1) 0%, rgba(255,67,1,0) 100%); } #gaming .secLineup .detailBox__text .btn__detail .basicFrame::before { width: 120%; height: 100%; top: 0; left: 50%; opacity: 0.5; transform-origin: top center; transform: translate(-50%,-50%); } #gaming .secLineup .detailBox__text .btn__detail .basicFrame::after { width: 100%; height: 200%; bottom: 0; left: 50%; opacity: 0.1; transform-origin: bottom center; transform: translate(-50%,50%); } #gaming .secLineup .detailBox__text .btn__detail .basicFrame .bF__thumb::after { display: none; } #gaming .secLineup .detailBox__text .btn__detail .basicFrame .bF__thumb::before { border-color: rgba(162,38,24,1); border-width: calc(2/750*100vw) calc(4/750*100vw); } #gaming .secLineup .detailBox__text .btn__detail.--cs { opacity: 0.8; } #gaming .secLineup .detailBox__text .btn__detail.--cs .basicFrame::before { display: none; } #gaming .secLineup .detailBox__text .btn__detail.--cs .basicFrame::after { display: none; } @media screen and (min-width: 641px) { #gaming .secLineup .secBlock__inner { padding-bottom: calc(100/1360*100%); } #gaming .secLineup .secBlock__hl { width: calc(390/1260*100%); margin-left: calc(-195/1260*100%); } #gaming .secLineup .secLiup__blockWrap { padding-top: calc(20/1360*100%); padding-bottom: calc(20/1360*100%); margin-top: calc(100/1360*100%); } #gaming .secLineup .secLiup__blockWrap:first-of-type { margin-top: calc(80/1360*100%); } #gaming .secLineup .secLiup__block { width: 100%; } #gaming .secLineup .secLiup__logo { width: calc(650/1260*100%); margin: 0 auto; } #gaming .secLineup .secLiup__list { width: 100%; margin-top: calc(20/1260*100%); display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: justify; justify-content: space-between; } #gaming .secLineup .secLiup__list li { width: calc(600/1260*100%); margin-bottom: calc(60/1260*100%); /* display: -webkit-box; display: flex; height: auto; */} #gaming .secLineup .secLiup__list li:last-child { margin-bottom: calc(60/1260*100%); } #gaming .secLineup .secLiup__list li .basicFrame { display: -webkit-box; display: flex; height: 100%; } #gaming .secLineup .secLiup__list li .bF__thumb { height: 100%; } #gaming .secLineup .detailBox { padding-bottom: calc(50/600*100%); display: -webkit-box; display: flex; flex-direction: column; height: 100%; } #gaming .secLineup .detailBox__name { width: calc(500/600*100%); font-size: calc(26/1360*100vw); } #gaming .secLineup .detailBox__pic { width: 100%; } #gaming .secLineup .detailBox__text { width: calc(500/600*100%); display: -webkit-box; display: flex; flex-direction: column; flex-grow: 1; height: auto; } #gaming .secLineup .detailBox__text p { font-size: calc(16/1360*100vw); } #gaming .secLineup .detailBox__text p:last-of-type { margin-bottom: calc(30/500*100%); } #gaming .secLineup .detailBox__text .detailBox__btn { width: calc(340/500*100%); margin: auto auto 0; } #gaming .secLineup .detailBox__text .btn__detail .basicFrame .bF__thumb::before { border-width: calc(2/1360*100vw) calc(4/1360*100vw); } #gaming .secLineup .detailBox__text a.btn__detail { transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transform-origin: center center; display: block; box-shadow: 0px 0px 60px 30px rgba(255, 66, 66, 0); } #gaming .secLineup .detailBox__text a.btn__detail:hover { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0px 0px 6px 3px rgba(255, 66, 66, 0.5); } } @media screen and (min-width: 1361px) { #gaming .secLineup .secBlock__inner { padding-bottom: 100px; } #gaming .secLineup .secLiup__blockWrap { padding-top: 20px; padding-bottom: 20px; margin-top: 100px; } #gaming .secLineup .secLiup__blockWrap:first-of-type { margin-top: 80px; } #gaming .secLineup .detailBox__name { font-size: 26px; } #gaming .secLineup .detailBox__text p { font-size: 16px; } #gaming .secLineup .detailBox__text .btn__detail .basicFrame .bF__thumb::before { border-width: 2px 4px; } } /* .secWallpaper ---------------------------------------------------------------------------------------------------------------- */ #gaming .secWallpaper {} #gaming .secWallpaper .secBlock__inner { background: rgba(223, 225, 255, 0.5); padding-bottom: calc(50/750*100%); } #gaming .secWallpaper .secBlock__hl { width: calc(650/750*100%); margin-left: calc(-325/750*100%); } #gaming .secWallpaper .secWP__list { width: calc(650/750*100%); margin: calc(80/750*100%) auto 0; display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: justify; justify-content: space-between; } #gaming .secWallpaper .secWP__list .secWP__list__item { width: 100%; margin-bottom: calc(50/620*100%); } #gaming .secWallpaper .secWP__list .secWP__list__item:last-child { margin-bottom: 0; } #gaming .secWallpaper .secWP__list .secWP__btnList { width: calc(630/650*100%); margin: calc(-10/650*100%) auto 0; display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: justify; justify-content: space-between; } #gaming .secWallpaper .secWP__list .secWP__btnList li { width: calc(200/630*100%); } #gaming .secWallpaper .secWP__list .btn__wp { display: block; text-decoration: none; color: #fff; font-size: calc(22/750*100vw); } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame { overflow: hidden; } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__frame { width: 100%; } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb { padding: 0.8em 0.3em; background: #011c3a; text-align: center; } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb::before { border-color: rgba(2,33,58,0.5); } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb::after { border-color: #439bb5; } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame::before, #gaming .secWallpaper .secWP__list .btn__wp .basicFrame::after { content: ""; display: block; position: absolute; left: 50%; width: 100%; height: 100%; z-index: 1; background-image: radial-gradient(ellipse farthest-side, rgba(1,183,251,1) 0%, rgba(1,183,251,0) 90%); } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame::before { top: 0; opacity: 0.2; transform-origin: top center; transform: translate(-50%,-50%); } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame::after { bottom: 0; opacity: 0.4; transform-origin: bottom center; transform: translate(-50%,50%); } @media screen and (min-width: 641px) { #gaming .secWallpaper .secBlock__inner { padding-bottom: calc(90/1360*100%); } #gaming .secWallpaper .secBlock__hl { width: calc(390/1260*100%); margin-left: calc(-195/1260*100%); } #gaming .secWallpaper .secWP__list { width: 100%; margin: calc(90/1260*100%) auto 0; } #gaming .secWallpaper .secWP__list .secWP__list__item { width: calc(600/1260*100%); margin-bottom: 0; } #gaming .secWallpaper .secWP__list .secWP__btnList { width: calc(580/600*100%); margin: calc(-10/600*100%) auto 0; } #gaming .secWallpaper .secWP__list .secWP__btnList li { width: calc(180/580*100%); } #gaming .secWallpaper .secWP__list .btn__wp { font-size: calc(16/1360*100vw); } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb { padding: 0.8em 0.3em; } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb::before { border-width: calc(2/1360*100vw) calc(7/1360*100vw); } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb::after { border-width: 0 calc(2/1360*100vw); } #gaming .secWallpaper .secWP__list a.btn__wp { transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transform-origin: center center; display: block; box-shadow: 0px 0px 60px 30px rgba(5, 62, 123, 0); } #gaming .secWallpaper .secWP__list a.btn__wp:hover { -webkit-transform: scale(1.09); transform: scale(1.09); box-shadow: 0px 0px 6px 3px rgba(5, 62, 123, 0.8); } } @media screen and (min-width: 1361px) { #gaming .secWallpaper .secBlock__inner { padding-bottom: 90px; } #gaming .secWallpaper .secWP__list .btn__wp { font-size: 16px; } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb::before { border-width: 2px 7px; } #gaming .secWallpaper .secWP__list .btn__wp .basicFrame .bF__thumb::after { border-width: 0 2px; } } /* ---------------------------------------------------------------------------------------------------------------- #newsIndex ---------------------------------------------------------------------------------------------------------------- */ #newsIndex .main { background: #041c20 url("../../news/_img_common/bg_sp.jpg") center top no-repeat; background-size: 100%; } @media screen and (min-width: 641px) { #newsIndex .main { background: #041c20 url("../../news/_img_common/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1360*100%); } #newsIndex .main .secInner { width: calc(1180/1360*100%); } } @media screen and (min-width: 1361px) { #newsIndex .main { background-size: 1920px; } #newsIndex .main .secInner { width: 1180px; } } @media screen and (min-width: 1921px) { #newsIndex .main { background-size: 100%; } } /* #newsIndex .secTab ---------------------------------------------------------------------------------------------------------------- */ #newsIndex .secTab { width: calc(650/750*100%); margin: calc(30/750*100%) auto 0; } #newsIndex .secTab__list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: start; justify-content: flex-start; } #newsIndex .secTab__list__item { width: calc(210/650*100%); margin-right: calc(10/650*100%); overflow: hidden; position: relative; cursor: pointer; } #newsIndex .secTab__list__item::before, #newsIndex .secTab__list__item::after { content: ""; width: calc(6/750*100vw); height: 100%; position: absolute; top: 0; border-width: calc(1/750*100vw) calc(4/750*100vw); border-style: solid; border-color: rgba(255,255,255,0.2); } #newsIndex .secTab__list__item::before { left: 0; border-right: none; } #newsIndex .secTab__list__item::after { right: 0; border-left: none; } /*#newsIndex .secTab__list__item.-active { filter: brightness(150%); }*/ #newsIndex .secTab__list__item.-active::before, #newsIndex .secTab__list__item.-active::after { border-width: 100vw; } #newsIndex .secTab__list__item a { display: block; position: relative; z-index: 2; } @media screen and (max-width: 640px) { #newsIndex .secTab__list__item:nth-child(3n) { margin-right: 0; } #newsIndex .secTab__list__item:nth-child(n+4) { margin-top: calc(10/650*100%); } } @media screen and (min-width: 641px) { #newsIndex .secTab { width: 100%; margin: calc(15/1360*100%) auto 0; } #newsIndex .secTab__list { -webkit-justify-content: center; justify-content: center; } #newsIndex .secTab__list__item { width: calc(125/1180*100%); margin: 0 calc(10/1180*100%); } #newsIndex .secTab__list__item:first-child { margin-left: 0; } #newsIndex .secTab__list__item:last-child { margin-right: 0; } #newsIndex .secTab__list__item::before, #newsIndex .secTab__list__item::after { width: calc(6/1360*100vw); border-width: 1px calc(4/1360*100vw); } #newsIndex .secTab__list__item { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; } #newsIndex .secTab__list__item:not(.-active):hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #newsIndex .secTab__list__item::before, #newsIndex .secTab__list__item::after { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .3s cubic-bezier(0.19, 1, 0.22, 1); transition: .3s cubic-bezier(0.19, 1, 0.22, 1); -webkit-backface-visibility: hidden; } #newsIndex .secTab__list__item:not(.-active):hover::before, #newsIndex .secTab__list__item:not(.-active):hover::after { border-width: 100vw; } } @media screen and (min-width: 1361px) { #newsIndex .secTab { margin-top: 15px; } } /* #newsIndex .secNewsList ---------------------------------------------------------------------------------------------------------------- */ #newsIndex .secNewsList { margin-top: calc(50/750*100%); } #newsIndex .secNL__list { width: calc(650/750*100%); margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: start; justify-content: flex-start; } #newsIndex .secNL__list__item { width: calc(312/650*100%); margin-top: calc(40/650*100%); margin-right: calc(26/650*100%); display: -webkit-flex; display: flex; } @media screen and (max-width: 640px) { #newsIndex .secNL__list__item:nth-child(-n+2) { margin-top: 0; } #newsIndex .secNL__list__item:nth-child(even) { margin-right: 0; } } @media screen and (min-width: 641px) { #newsIndex .secNewsList { margin-top: calc(44/1360*100%); } #newsIndex .secNL__list { width: 100%; } #newsIndex .secNL__list__item { width: calc(270/1180*100%); margin-top: calc(40/1180*100%); margin-right: calc(33/1180*100%); } #newsIndex .secNL__list__item:nth-child(-n+4) { margin-top: 0; } #newsIndex .secNL__list__item:nth-child(4n) { margin-right: 0; } } @media screen and (min-width: 1361px) { #newsIndex .secNewsList { margin-top: 44px; } } /* #newsIndex .secPagination ---------------------------------------------------------------------------------------------------------------- */ #newsIndex .secPagination { position: relative; width: 100%; padding-top: calc(40/750*100%); } #newsIndex .secPagination__list { width: calc(650/750*100%); margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #newsIndex .secPagination__list__item { width: calc(130/650*100%); } #newsIndex .secPagination__list__item .btn { display: block; position: relative; height: 0; padding-top: calc(56/130*100%); opacity: 0.4; } #newsIndex .secPagination__list__item a.btn { opacity: 1; } #newsIndex .secPagination__list__item.-prev .btn { background: url("../../news/_img_common/btn_prev.png") left center no-repeat; background-size: contain; } #newsIndex .secPagination__list__item.-next .btn { background: url("../../news/_img_common/btn_next.png") right center no-repeat; background-size: contain; } @media screen and (min-width: 641px) { #newsIndex .secPagination { padding-top: calc(20/1360*100%); } #newsIndex .secPagination__list { width: 100%; } #newsIndex .secPagination__list__item { width: calc(66/1180*100%); } #newsIndex .secPagination__list__item .btn { padding-top: calc(28/66*100%); } #newsIndex .secPagination__list__item a.btn:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } } @media screen and (min-width: 1361px) { #newsIndex .secPagination { padding-top: 20px; } } /* ---------------------------------------------------------------------------------------------------------------- #newsArticle ---------------------------------------------------------------------------------------------------------------- */ #newsArticle .main { background: #041c20 url("../../news/_img_common/bg_sp.jpg") center top no-repeat; background-size: 100%; } @media screen and (min-width: 641px) { #newsArticle .main { background-color: #041c20; background-image: url("../../news/_img_common/bg_pc.jpg"), url("../../news/_img_common/bg_r_pc.jpg"); background-position: center top; background-repeat: no-repeat, repeat-y; background-size: calc(1920/1360*100%); } } @media screen and (min-width: 1361px) { #newsArticle .main { background-size: 1920px; } } @media screen and (min-width: 1921px) { #newsArticle .main { background-size: 100%; } } /* .secTitleArea ---------------------------------------------------------------------------------------------------------------- */ #newsArticle .secTitleArea { position: relative; width: 100%; height: 0; margin-top: calc(10/750*100%); padding-top: calc(520/750*100%); overflow: hidden; } #newsArticle .secTtlA__visual { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-position: center center; background-size: calc(1920/750*100%); } #newsArticle .secTitleArea .secInner { position: absolute; width: calc(650/750*100%); bottom: 0; left: 50%; margin-left: calc(-325/750*100%); margin-bottom: calc(40/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: start; justify-content: flex-start; align-items: center; } #newsArticle .secTtlA__category { width: calc(175/650*100%); margin-right: 1rem; position: relative; overflow: hidden; } #newsArticle .secTtlA__category::before, #newsArticle .secTtlA__category::after { content: ""; width: calc(6/750*100vw); height: 100%; position: absolute; top: 0; border-width: calc(1/750*100vw) calc(4/750*100vw); border-style: solid; border-color: rgba(255,255,255,0.2); } #newsArticle .secTtlA__category::before { left: 0; border-right: none; } #newsArticle .secTtlA__category::after { right: 0; border-left: none; } #newsArticle .secTtlA__date { font-size: 2.9333vw; text-shadow: 0px 0px 4px #999, 1px 1px 2px #000; } #newsArticle .secTtlA__ttl { width: 100%; font-size: 4.2666vw; text-shadow: 0px 0px 4px #999, 1px 1px 2px #000; line-height: 1.41; margin-top: 1rem; } @media screen and (min-width: 641px) { #newsArticle .secTitleArea { margin-top: calc(40/1360*100%); padding-top: calc(520/1360*100%); } #newsArticle .secTtlA__visual { background-size: calc(1920/1360*100%); } #newsArticle .secTitleArea .secInner { width: calc(1180/1360*100%); margin-left: calc(-590/1360*100%); margin-bottom: calc(40/1360*100%); } #newsArticle .secTtlA__category { width: calc(125/1180*100%); } #newsArticle .secTtlA__category::before, #newsArticle .secTtlA__category::after { width: calc(6/125*100%); border-width: 1px 4px; } #newsArticle .secTtlA__date { font-size: 1.0294vw; } #newsArticle .secTtlA__ttl { font-size: 2.3529vw; } } @media screen and (min-width: 1361px) { #newsArticle .secTitleArea { margin-top: 40px; padding-top: 520px; } #newsArticle .secTtlA__visual { background-size: 1920px; } #newsArticle .secTitleArea .secInner { width: 1180px; margin-left: -590px; margin-bottom: 40px; } #newsArticle .secTtlA__date { font-size: 1.4rem; } #newsArticle .secTtlA__ttl { font-size: 3.2rem; } } @media screen and (min-width: 1921px) { #newsArticle .secTtlA__visual { background-size: 100%; } } /* .secDetailArea ---------------------------------------------------------------------------------------------------------------- */ #newsArticle .secDetailArea { background: #fff; color: #000; position: relative; width: 100%; padding-top: calc(50/750*100%); padding-bottom: calc(60/750*100%); } #newsArticle .secDetailArea .secInner { width: calc(650/750*100%); margin: 0 auto; } #newsArticle .secDetailArea { font-size: 2.9333vw; } #newsArticle .secDetailArea h2 { border-width: 1px 4px; border-style: solid; border-color: #a3cbd8 #206a82; padding: 1rem; margin-bottom: 2rem; } #newsArticle .secDetailArea h2 { font-size: 4vw; line-height: 1.41; margin-top: 3rem; } #newsArticle .secDetailArea h2:first-child { margin-top: 0; } #newsArticle .secDetailArea h3 { border-left: 4px solid #206a82; padding: 1rem; margin-bottom: 2rem; } #newsArticle .secDetailArea h3 { font-size: 4vw; font-weight: normal; line-height: 1.41; margin-top: 3rem; } #newsArticle .secDetailArea h3:first-child { margin-top: 0; } #newsArticle .secDetailArea p { line-height: 1.81; padding-bottom: 2rem; } #newsArticle .secDetailArea p a { text-decoration: underline; color: #000; } #newsArticle .secDetailArea .secDA__btn { margin: 2rem auto; text-align: center; display: block; } #newsArticle .secDetailArea .secDA__btn a { display: inline-block; margin: auto; color: #fff; text-decoration: none; padding: 0.5em 2em; } #newsArticle .secDetailArea .secDA__image { margin: 2rem 0; text-align: center; } #newsArticle .secDetailArea .secDA__ytWrap { width: 100%; aspect-ratio: 16 / 9; margin: 1em auto; } #newsArticle .secDetailArea .secDA__ytWrap iframe { width: 100%; height: 100%; } #newsArticle .secDetailArea .secDA__ytBox { margin: 2rem 0; text-align: center; } #newsArticle .secDetailArea .secDA__ytBox a { display: block; position: relative; } #newsArticle .secDetailArea .secDA__ytBox .mfpYt::after { content: ""; display: block; width: 100%; height: 100%; background: url("../img/icon_play.png") center center no-repeat; background-size: 40%; position: absolute; top: 0; left: 0; } #newsArticle .secDetailArea .secDA__shareBlock { margin: 2rem 0; padding-top: 2rem; border-top: 1px solid #c8c8c8; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: end; justify-content: flex-end; align-items: center; } #newsArticle .secDetailArea .secDA__shareBlc__text { margin: 0; padding: 0; line-height: 1; } #newsArticle .secDetailArea .secDA__shareBlc__list { margin-left: 2rem; width: calc(256/650*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } #newsArticle .secDetailArea .secDA__shareBlc__list li { width: calc(70/256*100%); } #newsArticle .secDetailArea .secDA__shareBlc__list a { display: block; } @media screen and (min-width: 641px) { #newsArticle .secDetailArea { padding-top: calc(50/1360*100%); padding-bottom: calc(40/1360*100%); } #newsArticle .secDetailArea .secInner { width: calc(1180/1360*100%); } #newsArticle .secDetailArea { font-size: 1.1764vw; } #newsArticle .secDetailArea h2 { padding: 1.7rem 2rem; } #newsArticle .secDetailArea h2 { font-size: 1.4705vw; margin-top: 6rem; } #newsArticle .secDetailArea h3 { padding: 1rem 2rem; margin-bottom: 2rem; } #newsArticle .secDetailArea h3 { font-size: 1.3235vw; margin-top: 6rem; } #newsArticle .secDetailArea p {} #newsArticle .secDetailArea .secDA__image {} #newsArticle .secDetailArea .secDA__ytWrap { width: 70%; margin: 1em auto 2em; } #newsArticle .secDetailArea .secDA__ytBox {} #newsArticle .secDetailArea .secDA__ytBox .mfpYt::after { background-size: 36%; } #newsArticle .secDetailArea .secDA__ytBox a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: inline-block; overflow: hidden; } #newsArticle .secDetailArea .secDA__ytBox a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #newsArticle .secDetailArea .secDA__ytBox a:hover img { filter: brightness(120%); } #newsArticle .secDetailArea .secDA__ytBox a::after { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; } #newsArticle .secDetailArea .secDA__ytBox a:hover::after { transform: scale(1.2); } #newsArticle .secDetailArea .secDA__shareBlock { margin: 4rem 0; } #newsArticle .secDetailArea .secDA__shareBlc__text {} #newsArticle .secDetailArea .secDA__shareBlc__list { width: calc(150/1180*100%); } #newsArticle .secDetailArea .secDA__shareBlc__list li { width: calc(40/150*100%); } #newsArticle .secDetailArea .secDA__shareBlc__list li a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; } #newsArticle .secDetailArea .secDA__shareBlc__list li a:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } } @media screen and (min-width: 1361px) { #newsArticle .secDetailArea { padding-top: 50px; padding-bottom: 40px; } #newsArticle .secDetailArea .secInner { width: 1180px; } #newsArticle .secDetailArea { font-size: 1.6rem; } #newsArticle .secDetailArea h2 { font-size: 2rem; } #newsArticle .secDetailArea h3 { font-size: 1.8rem; } } /* #newsArticle .secPagination ---------------------------------------------------------------------------------------------------------------- */ #newsArticle .secPagination { position: relative; width: 100%; padding-top: calc(60/750*100%); } #newsArticle .secPagination__list { width: calc(650/750*100%); margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #newsArticle .secPagination__list__item { width: calc(130/650*100%); } #newsArticle .secPagination__list__item .btn { display: block; position: relative; height: 0; padding-top: calc(56/130*100%); opacity: 0.4; } #newsArticle .secPagination__list__item a.btn { opacity: 1; } #newsArticle .secPagination__list__item.-prev .btn { background: url("../../news/_img_common/btn_prev.png") left center no-repeat; background-size: contain; } #newsArticle .secPagination__list__item.-top .btn { background: url("../../news/_img_common/btn_top.png") center center no-repeat; background-size: contain; } #newsArticle .secPagination__list__item.-next .btn { background: url("../../news/_img_common/btn_next.png") right center no-repeat; background-size: contain; } @media screen and (min-width: 641px) { #newsArticle .secPagination { padding-top: calc(20/1360*100%); } #newsArticle .secPagination .secInner { width: calc(1180/1360*100%); } #newsArticle .secPagination__list { width: 100%; } #newsArticle .secPagination__list__item { width: calc(66/1180*100%); } #newsArticle .secPagination__list__item .btn { padding-top: calc(28/66*100%); } #newsArticle .secPagination__list__item a.btn:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } } @media screen and (min-width: 1361px) { #newsArticle .secPagination { padding-top: 20px; } #newsArticle .secPagination .secInner { width: 1180px; } }