@charset "utf-8"; /* ================================================================== CSS information style info : PAGE ================================================================== */ /* ---------------------------------------------------------------------------------------------------------------- OVERWRITE ---------------------------------------------------------------------------------------------------------------- */ /* display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; */ .secInner { padding-top: 1px; } .secInner { background: rgba(255,250,0,0.0); } @media screen and (min-width: 641px) { } /* ---------------------------------------------------------------------------------------------------------------- COMMON ---------------------------------------------------------------------------------------------------------------- */ .basicFrame { display: -webkit-flex; display: flex; position: relative; width: 100%; height: auto; text-decoration: none; } .basicFrame .bF__frame { width: 100%; display: block; position: relative; } .basicFrame .bF__thumb { width: 100%; padding: calc(2/750*100vw) calc(10/750*100vw); position: relative; background: #0d2c43; overflow: hidden; } .basicFrame .bF__thumb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-color: rgba(67,155,181,1); border-style: solid; border-width: 0 calc(4/750*100vw); } .basicFrame .bF__thumb img { position: relative; vertical-align: top; } .basicFrame .bF__name { width: calc(560/650*100%); position: relative; left: 50%; transform: translateX(-50%); margin-top: calc(-20/650*100%); background: url("../../_img/video/btn_sp.png") center center no-repeat; background-size: 100%; text-align: right; } .basicFrame .bF__name img { position: relative; vertical-align: top; width: calc(487/560*100%); } .-typePic .bF__thumb { padding: 0; } .-typePic .bF__thumb::after { z-index: 3; } .-typePic .bF__thumb::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-color: rgba(2,33,58,0.5); border-style: solid; border-width: calc(2/750*100vw) calc(10/750*100vw); z-index: 2; } .notesList li { text-indent: -1em; padding-left: 1em; line-height: 1.41; font-size: 2.1333vw; margin-bottom: 0.2rem; color: #b5b5b5; }/* font 16pt */ .main__logo { display: none; } .pageTitle { width: calc(650/750*100%); position: absolute; top: 0; left: 50%; margin-top: calc(38/750*100%); margin-left: calc(-325/750*100%); z-index: 2;} .-baseControl { display: block; width: 100%; height: 100%; top: 0; margin-top: 0; background: rgba(255,0,0,0.0); } .swiper-button-prev.-baseControl { left: 0; right: 0; margin-left: -100%; } .swiper-button-next.-baseControl { left: 0; right: 0; margin-left: 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.15;} @media screen and (min-width: 641px) { .basicFrame .bF__name { background: url("../../_img/video/btn_pc.png") center center no-repeat; background-size: 100%; } .basicFrame .bF__thumb { padding: calc(2/1360*100vw) calc(10/1360*100vw); } .basicFrame .bF__thumb::after { border-width: 0 calc(4/1360*100vw); } .-typePic .bF__thumb { padding: 0; } .-typePic .bF__thumb::before { border-width: calc(2/1360*100vw) calc(10/1360*100vw); } a.basicFrame , a.basicFrame .bF__thumb{ transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transform-origin: center center; } a.basicFrame .bF__thumb { box-shadow: 0px 0px 60px 30px rgba(67,155,181,0); } a.basicFrame .bF__frame .bF__thumb img { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } a.basicFrame:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} a.basicFrame:hover .bF__thumb { box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); } a.basicFrame:hover .bF__frame .bF__thumb img { opacity: 0.7; } .notesList li { font-size: 0.8823vw; margin-bottom: 0.2rem; color: #b5b5b5; } .main__logo { display: block; position: absolute; top: 0; left: 0; width: calc(200/1320*100%); margin-top: calc(22/1320*100%); margin-left: calc(32/1320*100%); z-index: 100;} .pageTitle { width: calc(650/1320*100%); margin-top: calc(38/1320*100%); margin-left: calc(-325/1320*100%); } .-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) { .basicFrame .bF__thumb { padding: 2px 10px; } .basicFrame .bF__thumb::after { border-width: 0 4px; } .-typePic .bF__thumb { padding: 0; } .-typePic .bF__thumb::before { border-width: 2px 10px; } .notesList li { font-size: 1.2rem; } .main__logo { width: 200px; margin-top: 22px; margin-left: 33px;} .pageTitle { width: 650px; margin-top: 38px; margin-left: -325px; } } /* ---------------------------------------------------------------------------------------------------------------- .bgvideoArea ---------------------------------------------------------------------------------------------------------------- */ .bgvideoArea { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .bgviA__player { position: absolute; width: 100%; height: 100%; } .shadowBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); } .shadowBox::before , .shadowBox::after { content: ""; display: block; position: absolute; left: 0%; width: 100%; } .shadowBox::before { top: 0; height: auto; padding-top: calc(400/750*100%); background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } .shadowBox::after { bottom: 0; height: auto; padding-top: calc(650/750*100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); } @media screen and (max-width: 640px) { .bgviA__player[data-overflow=x] { height: 87%; left: 50%; top: 0; transform: translateX(-50%); } } @media screen and (min-width: 641px) { .bgvideoArea { overflow: hidden; } .shadowBox { background: rgba(0,0,0,0); } .shadowBox::before { padding-top: calc(300/1360*100%); background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } .shadowBox::after { padding-top: calc(300/1360*100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); } } @media screen and (min-width: 1361px) { .shadowBox::before { padding-top: 300; } .shadowBox::after { padding-top: 300; } } /* ---------------------------------------------------------------------------------------------------------------- .main ---------------------------------------------------------------------------------------------------------------- */ .main { background: #000f22; position: relative; width: 100%; margin: auto; } @media screen and (min-width: 641px) { } @media screen and (min-width: 1361px) { } /* ---------------------------------------------------------------------------------------------------------------- .secBlock ---------------------------------------------------------------------------------------------------------------- */ .secBlock { position: relative; width: 100%; margin: auto; } @media screen and (min-width: 641px) { } @media screen and (min-width: 1361px) { } /* ---------------------------------------------------------------------------------------------------------------- #toppage ---------------------------------------------------------------------------------------------------------------- */ #toppage .picSlider { overflow: visible; } #toppage .picSlider__pagination.swiper-pagination-custom { bottom: 0; position: relative; } #toppage .picSlider__pagination { padding-top: calc(40/650*100%); } #toppage .picSlider__pagination .swiper-pagination-bullet { width: calc(24/650*100%); height: 0; padding-top: calc(20/650*100%); margin: 0 calc(7/650*100%); border: 1px solid #429ab4; background: #0d2c43; opacity: 1; } #toppage .picSlider__pagination .swiper-pagination-bullet-active { background: #429ab4; opacity: 1; } #toppage .picSlider__pagination .swiper-pagination-fraction { position: absolute; bottom: 0; right: 0; left: auto; width: auto; color: #429ab4; font-family: "Arial", "sans-serif"; font-size: 3.2vw; }/* 24pt */ @media screen and (min-width: 641px) { #toppage .picSlider__pagination { padding-top: calc(32/534*100%); } #toppage .picSlider__pagination .swiper-pagination-bullet { width: calc(16/534*100%); padding-top: calc(12/534*100%); margin: 0 calc(5/534*100%); border-width: 2px; } #toppage .picSlider__pagination .swiper-pagination-bullet { } #toppage .picSlider__pagination .swiper-pagination-fraction { font-size: 1.32vw;} } @media screen and (min-width: 1361px) { #toppage .picSlider__pagination .swiper-pagination-fraction { font-size: 1.8rem; } } /* ---------------------------------------------------------------------------------------------------------------- .secHero ---------------------------------------------------------------------------------------------------------------- */ .secHero { background: #000; padding-top: 1px; padding-bottom: calc(20/750*100%); } .sHer__catchcopy { position: absolute; top: 0; left: 50%; margin-top: calc(33/750*100%); margin-left: calc(-375/750*100%); width: 100%; } .sHer__logo { width: calc(504/750*100%); margin: calc(193/750*100%) auto 0; position: relative; } .secHero .swiper-button-prev::after { background-position: center right calc(20/750*100vw); } .secHero .swiper-button-next::after { background-position: center left calc(20/750*100vw); } .secHero .swiper-pagination { display: none; } .sHer__videoList__wrap { width: calc(650/750*100%); margin: calc(122/750*100%) auto 0; overflow: visible; } .sHer__videoList { width: 100%; } .sHer__videoList a { display: block; } .sHer__bnrList__wrap { width: calc(650/750*100%); margin: calc(30/750*100%) auto 0; overflow: visible; } .sHer__bnrList { width: 100%; } .sHer__bnrList a { display: block; } .sHer__release { width: calc(481/750*100%); margin: calc(24/750*100%) auto 0; position: relative; } .sHer__btn { width: calc(560/750*100%); margin: calc(14/750*100%) auto 0; position: relative; } .sHer__btn.-Steam { } .sHer__btn.-Faq { } .sHer__btn.-Save { } .sHer__btn.-Purchase { } .sHer__newsArea { width: 100%; margin: calc(40/750*100%) auto 0; position: relative; } .sHer__newsList__wrap { width: calc(650/750*100%); margin: 0 auto 0 calc(50/750*100%); overflow: visible; } .sHer__newsList {}/* w566 */ .sHer__nL__item { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; }/* w270 */ .sHer__nL__item .basicFrameNews { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; height: auto; text-decoration: none; } .sHer__nL__item .bFN__frame { width: 100%; display: block; position: relative; } .sHer__nL__item .bFN__frame { background: url("../../_img/news/btn_base_news.png") top center no-repeat; background-size: cover; padding: calc(2/750*100vw) calc(10/750*100vw); overflow: hidden; } .sHer__nL__item .bFN__frame::before , .sHer__nL__item .bFN__frame::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-style: solid; } .sHer__nL__item .bFN__frame::before { border-color: rgba(13,44,67,1); border-width: calc(2/750*100vw) calc(10/750*100vw); } .sHer__nL__item .bFN__frame::after { border-color: rgba(67,155,181,1); border-width: 0 calc(4/750*100vw); } .sHer__nL__item .bFN__thumb { width: 100%; background: #0d2c43; overflow: hidden; position: relative; } .sHer__nL__item .bFN__thumb img { position: relative; vertical-align: top; } .sHer__nL__item .mfpYt .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: calc(72/270*100%); } .sHer__nL__item .bFN__text { padding: calc(8/750*100vw); } .sHer__nL__item .bFN__text .date { display: block; color: #00c2e5; font-size: calc(18/750*100vw); } .sHer__nL__item .bFN__text .text { display: block; color: #fff; font-size: calc(18/750*100vw); font-feature-settings: "palt"; line-height: 1.41; margin-top: 0.5em; } .sHer__nA__tw { width: calc(492/750*100%); margin: calc(30/750*100%) auto 0; } @media screen and (max-width: 640px) { .-baseControl.-news { display: none; } } @media screen and (min-width: 641px) { .secHero { padding-bottom: 0; } .sHer__catchcopy { margin-top: calc(38/1260*100%); margin-left: calc(-630/1260*100%); } .sHer__logo { width: calc(504/1260*100%); margin: calc(150/1260*100%) calc(31/1260*100%) 0 auto; } .secHero .-baseControl{ display: none; } .secHero .swiper-pagination { display: block; } .secHero .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom { bottom: 0; position: relative; } .secHero .swiper-pagination { padding-top: calc(10/400*100%); } .secHero .swiper-pagination .swiper-pagination-bullet { width: calc(16/400*100%); height: 0; padding-top: calc(12/400*100%); margin: 0 calc(5/400*100%); border: 2px solid #429ab4; background: #0d2c43; opacity: 1; } .secHero .swiper-pagination .swiper-pagination-bullet-active { background: #429ab4; opacity: 1; } .sHer__videoList__wrap { width: calc(400/1260*100%); margin: calc(182/1260*100%) 0 0 calc(50/1260*100%); } .sHer__videoList { } .sHer__videoList .basicFrame .bF__name { width: calc(360/400*100%); margin-top: calc(-20/400*100%); } .sHer__videoList .basicFrame .bF__name img { width: calc(305/360*100%); margin: calc(3/360*100%) 0 calc(2/360*100%) 0; } .sHer__bnrList__wrap { width: calc(400/1260*100%); margin: calc(-275/1260*100%) 0 0 calc(470/1260*100%); } .sHer__bnrList { } .sHer__release { width: calc(481/1260*100%); margin: calc(450/1260*100%) calc(40/1260*100%) 0 auto; position: absolute; top: 0; right: 0; } .sHer__btn { width: calc(320/1260*100%); margin: calc(10/1260*100%) calc(50/1260*100%) 0 auto; } .sHer__btn.-Steam { margin-top: calc(-277/1260*100%); } .sHer__btn.-Faq { } .sHer__btn.-Save { } .sHer__btn.-Purchase { } .sHer__newsArea { margin-top: calc(40/1360*100%); padding-bottom: calc(10/1360*100%); overflow: hidden; } .sHer__newsArea::before {content: ""; display: block; width: 100%; height: 94.8%; padding-top: calc(0/1360*100%); background: rgba(0,0,0,0.5); position: absolute; bottom: 0; left: 0; } .sHer__newsList__wrap { width: calc(1160/1360*100%); margin: 0 auto; } .sHer__newsList {} .sHer__nL__item {}/* w270 */ .sHer__nL__item .basicFrameNews {} .sHer__nL__item .bFN__frame {} .sHer__nL__item .bFN__frame { padding: calc(2/1360*100vw) calc(10/1360*100vw); } .sHer__nL__item .bFN__frame::before { border-width: calc(2/1360*100vw) calc(10/1360*100vw); } .sHer__nL__item .bFN__frame::after { border-width: 0 calc(4/1360*100vw); } .sHer__nL__item .bFN__thumb {} .sHer__nL__item .bFN__text { padding: calc(8/1360*100vw); } .sHer__nL__item .bFN__text .date { font-size: calc(12/1360*100vw); } .sHer__nL__item .bFN__text .text { font-size: calc(14/1360*100vw); } .sHer__nL__item a.basicFrameNews .bFN__thumb::after { transform-origin: center center; transition: transform 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s; -webkit-transform: scale(1.0); transform: scale(1.0);} .sHer__nL__item a.basicFrameNews:hover .bFN__thumb::after { -webkit-transform: scale(1.2); transform: scale(1.2); } .sHer__nA__tw { width: calc(276/1260*100%); margin: calc(10/1260*100%) 0 0 calc(50/1260*100%); } .-baseControl.-news { display: block; } .swiper-button-prev.-news::after { background-position: center right 30px; background-size: 15px; } .swiper-button-next.-news::after { background-position: center left 30px; background-size: 15px; } .-baseControl:hover::after { background-size: 20px; } .sHer__nL__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } .sHer__nL__item.swiper-slide-active , .sHer__nL__item.swiper-slide-next , .sHer__nL__item.swiper-slide-next + .sHer__nL__item , .sHer__nL__item.swiper-slide-next + .sHer__nL__item + .sHer__nL__item { opacity: 1; } 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 { opacity: 0.7; } } @media screen and (min-width: 1361px) { .secHero { } .sHer__newsArea { margin-top: 40px; padding-bottom: 10px; } .sHer__newsList__wrap { width: 1160px; } .sHer__nL__item .bFN__frame { padding: 2px 10px; } .sHer__nL__item .bFN__frame::before { border-width: 2px 10px; } .sHer__nL__item .bFN__frame::after { border-width: 0 4px; } .sHer__nL__item .bFN__text { padding: 8px; } .sHer__nL__item .bFN__text .date { font-size: 1.2rem; } .sHer__nL__item .bFN__text .text { font-size: 1.4rem; } } /* ---------------------------------------------------------------------------------------------------------------- .secAbout ---------------------------------------------------------------------------------------------------------------- */ .secAbout { padding: calc(50/750*100%) 0 calc(40/750*100%); background: #000; } .sAbo__visualSlider__wrap { position: absolute; top: 0; left: 0; width: 100%; margin-top: calc(65/750*100%); } .secAbout .secInner { z-index: 2; } .sAbo__hl { width: 100%; margin: 0 auto; } .sAbo__leadtext { width: 100%; margin: calc(386/750*100%) auto 0; padding: calc(20/750*100%) 0 calc(92/750*100%); background: rgba(0,0,0,0.4); } .controlBox { position: relative; left: 0; bottom: 0; margin-top: calc(-80/750*100%); width: calc(750/750*100%); } .controlBox { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; } .controlBox .swiper-pagination { position: relative; text-align: center; -webkit-transition: .3s opacity; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10 } .controlBox .swiper-pagination-fraction { bottom: auto; left: auto; width: calc(80/750*100%); background: url("../../_img/about/counterbg.png") center center no-repeat; background-size: contain; } .controlBox .swiper-pagination::before { content: ""; display: block; width: 100%; height: 0; padding-top: 100%;} .controlBox .swiper-pagination-current , .controlBox .swiper-pagination-total { width: 50%; height: 50%; margin: 5%; position: absolute; vertical-align: bottom; display: flex; flex-direction: column; justify-content: center; font-size: 2.4vw; } .controlBox .swiper-pagination-current { top: 0; left: 0;} .controlBox .swiper-pagination-total { bottom: 0; right: 0;} .controlBox .swiper-button-next, .controlBox .swiper-button-prev { position: relative; top: 0; width: calc(80/750*100%); height: 0; padding-top: calc(80/750*100%); margin-top: 0; background-color: #0b1a26; } .controlBox .swiper-button-prev { background-image: none; left: auto; right: auto; } .controlBox .swiper-button-next { background-image: none; right: auto; left: auto; } .controlBox .swiper-button-prev::after , .controlBox .swiper-button-next::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .controlBox .swiper-button-prev::after { background: url("../../_img/about/btn_prev.png") center center no-repeat; background-size: 100%; } .controlBox .swiper-button-next::after { background: url("../../_img/about/btn_next.png") center center no-repeat; background-size: 100%; } .controlBox .swiper-button-next.swiper-button-disabled, .controlBox .swiper-button-prev.swiper-button-disabled { opacity: 1; } .controlBox .swiper-button-next.swiper-button-disabled::after, .controlBox .swiper-button-prev.swiper-button-disabled::after { opacity: 0.2; } .sAbo__video { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; } @media screen and (min-width: 641px) { .secAbout { padding: 0; } .sAbo__visualSlider__wrap { width: calc(1920/1360*100%); left: 50%; margin-top: 0; margin-left: calc(-960/1360*100%); position: relative; } .sAbo__visualSlider__wrap::after { content: ""; display: block; width: 100%; height: 0; padding-top: calc(374/1920*100%); position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.3); z-index: 10; } .secAbout .secInner { position: absolute; bottom: 0; left: 50%; margin-left: calc(-630/1360*100%); } .sAbo__hl { width: calc(806/1260*100%); margin: calc(485/1260*100%) 0 0 calc(-8/1260*100%); } .sAbo__leadtext { width: calc(806/1260*100%); margin: calc(11/1260*100%) 0 0 calc(-8/1260*100%); padding: 0; background: rgba(0,0,0,0); } .controlBox { margin-top: calc(20/1260*100%); width: calc(180/1260*100%); } .controlBox .swiper-pagination-fraction { width: calc(60/180*100%); } .controlBox .swiper-pagination-current , .controlBox .swiper-pagination-total { font-size: 1.0rem; margin: 5%; } .controlBox .swiper-button-next, .controlBox .swiper-button-prev { width: calc(60/180*100%); padding-top: calc(60/180*100%); } .controlBox .swiper-button-next:hover, .controlBox .swiper-button-prev:hover { background-color: #186075; } .sAbo__video { width: calc(400/1260*100%); position: absolute; bottom: 0; right: 0; margin: 0 0 calc(135/1260*100%); } .sAbo__video .basicFrame .bF__name { width: calc(360/400*100%); margin-top: calc(-20/400*100%); } .sAbo__video .basicFrame .bF__name img { width: calc(305/360*100%); margin: calc(2/360*100%) 0 calc(3/360*100%) 0; } } @media screen and (min-width: 1361px) { .sAbo__visualSlider__wrap { width: 1920px; margin-left: -960px; } .secAbout .secInner { margin-left: -630px; } } /* ---------------------------------------------------------------------------------------------------------------- .secNewele ---------------------------------------------------------------------------------------------------------------- */ .secNewele { background: #05101e url("../../_img/newele/bg_sp.jpg") top center no-repeat; background-size: 100%; padding-top: calc(30/750*100%); padding-bottom: calc(70/750*100%); } .sNele__tabList__wrap { background: rgba(0,0,0,0.5); padding: calc(10/750*100%) 0; } .sNele__tabList { width: calc(650/750*100%); margin: 0 auto; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sNele__tabLi__item { width: calc(214/650*100%); background: url("../../_img/newele/subnav/btn_sp.jpg") center center no-repeat; background-size: 100%; position: relative; } .sNele__tabLi__item:nth-child(n+4) { margin-top: calc(5/650*100%); } .sNele__tabLi__item::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; } .sNele__tabLi__item.active::before { opacity: 0; } .sNele__tabLi__item img { position: relative; } .sNele__listArea { width: calc(650/750*100%); margin: calc(44/750*100%) auto 0; } .sNele__list__wrap { width: 100%; position: relative; overflow: visible; } .sNele__list {} .sNele__list__item { position: relative; } .swiper-button-prev.-nele::after { background-position: top calc(220/750*100vw) right calc(20/750*100vw); } .swiper-button-next.-nele::after { background-position: top calc(220/750*100vw) left calc(20/750*100vw); } .sNele__detail { width: 100%; position: relative; } .sNele__de__hd {} .sNele__de__pic { margin-top: calc(30/650*100%); } .sNele__de__text { margin-top: calc(20/650*100%); } .sNele__de__text .sNele__de__btn { width: calc(288/650*100%); margin: calc(40/650*100%) auto 0; } .-i6 .sNele__de__text .sNele__de__btn { margin-top: 0; } .sNele__pL__item p { margin-top: calc(20/650*100%); } @media screen and (min-width: 641px) { .secNewele { background: #05101e url("../../_img/newele/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1360*100%); padding-top: calc(70/1360*100%); padding-bottom: calc(40/1360*100%); overflow: hidden; } .sNele__tabList__wrap { display: none; } .sNele__listArea { width: 100%; margin: 0; } .sNele__list__wrap { width: calc(1130/1260*100%); margin: 0 auto; } .swiper-button-prev.-nele::after { background-position: center right calc(54/1360*100vw); height: 90%; } .swiper-button-next.-nele::after { background-position: center left calc(54/1360*100vw); height: 90%; } .sNele__list__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } .sNele__list__item.swiper-slide-active , .sNele__list__item.swiper-slide-next { opacity: 1; } .sNele__detail { } .sNele__de__hd { width: calc(565/534*100%); } .sNele__de__pic { margin-top: calc(20/534*100%); } .sNele__de__text { margin-top: calc(15/534*100%); } .sNele__de__text .sNele__de__btn { width: calc(144/534*100%); margin-top: calc(18/534*100%); } .-i6 .sNele__de__text .sNele__de__btn { margin-top: calc(43/534*100%); } .-i7 .sNele__de__text .sNele__de__btn { margin-top: calc(70/534*100%); } .-i8 .sNele__de__text .sNele__de__btn { margin-top: calc(43/534*100%); } .sNele__pL__item p { margin-top: calc(15/534*100%); } .sNele__de__text .sNele__de__btn { transition: transform 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s; -webkit-transform: scale(1.0); transform: scale(1.0);} .sNele__de__text .sNele__de__btn:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } } @media screen and (min-width: 1361px) { .secNewele { background-size: 1920px; padding-top: 70px; padding-bottom: 40px; } .swiper-button-prev.-nele::after { background-position: center right 54px; } .swiper-button-next.-nele::after { background-position: center left 54px; } } /* ---------------------------------------------------------------------------------------------------------------- .secNewepi ---------------------------------------------------------------------------------------------------------------- */ .secNewepi { background: #000; } .sNew__block { position: relative; width: 100%; } .sNew__visual { } .sNew__episode { background: url("../../_img/newepi/bg_sp.jpg") top center no-repeat; background-size: 100%; position: relative; padding-top: calc(30/750*100%); padding-bottom: calc(68/750*100%); } .sNew__episode::before { content: ""; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: calc(50/750*100%); background: linear-gradient(to bottom, rgba(67,155,181,1) 0%,rgba(67,155,181,0.2) 100%); } .sNew__episode__hl { width: calc(650/750*100%); margin: 0 auto; } .sNew__episode__text { width: calc(650/750*100%); margin: calc(30/750*100%) auto 0; } @media screen and (min-width: 641px) { .secNewepi { } .sNew__block { max-width: 1920px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } .sNew__visual { width: 50%; } .sNew__episode { width: 50%; background: url("../../_img/newepi/bg_pc.jpg") top center no-repeat; background-size: 100%; padding-top: calc(40/1360*100%); padding-bottom: 0; } .sNew__episode::before { left: calc(40/960*100%); } .sNew__episode__hl { width: calc(470/960*100%); margin: 0 0 0 calc(80/960*100%); } .sNew__episode__text { width: calc(470/960*100%); margin: calc(20/960*100%) 0 0 calc(70/960*100%); } } @media screen and (min-width: 1361px) { } /* ---------------------------------------------------------------------------------------------------------------- .secSystem ---------------------------------------------------------------------------------------------------------------- */ .secSystem { background: #05101e url("../../_img/system/bg_sp.jpg") top center no-repeat; background-size: 100%; padding-top: calc(40/750*100%); padding-bottom: calc(60/750*100%); } .sSys__hl { width: calc(318/750*100%); margin: 0 auto; position: relative; } .sSys__leadtext { width: calc(644/750*100%); margin: calc(23/750*100%) auto 0; position: relative; } .sSys__tabList__wrap { background: rgba(0,0,0,0.5); margin-top: calc(40/750*100%); padding: calc(10/750*100%) 0; } .sSys__tabList { width: calc(650/750*100%); margin: 0 auto; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sSys__tabLi__item { width: calc(159/650*100%); background: url("../../_img/system/subnav/btn_v2_sp.jpg") center center no-repeat; background-size: 100%; position: relative; } .sSys__tabLi__item:nth-child(n+4) { margin-top: calc(4/650*100%); } .sSys__tabLi__item::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; } .sSys__tabLi__item.active::before { opacity: 0; } .sSys__tabLi__item img { position: relative; } .sSys__tabLi__item.no { opacity: 0; height: 1px; } .sSys__listArea { width: calc(650/750*100%); margin: calc(50/750*100%) auto 0; } .sSys__list__wrap { width: 100%; position: relative; overflow: visible; } .sSys__list {} .sSys__list__item { position: relative; } .swiper-button-prev.-sys::after { background-position: top calc(220/750*100vw) right calc(20/750*100vw); } .swiper-button-next.-sys::after { background-position: top calc(220/750*100vw) left calc(20/750*100vw); } .sSys__detail { width: 100%; position: relative; } .sSys__de__hd { width: calc(534/650*100%); } .sSys__de__pic { margin-top: calc(20/650*100%); } .sSys__de__text { margin-top: calc(20/650*100%); } .sSys__de__text .sSys__de__btn { width: calc(288/650*100%); margin: calc(30/650*100%) auto 0; } .sSys__pL__item p { margin-top: calc(20/650*100%); } #system .picSlider__pagination { padding-top: calc(35/650*100%); } #system .-i2 .picSlider__pagination { padding-top: 0; } @media screen and (min-width: 641px) { .secSystem { background: #05101e url("../../_img/system/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1360*100%); padding-top: calc(30/1360*100%); padding-bottom: calc(60/1360*100%); overflow: hidden; } .sSys__hl { width: calc(318/1260*100%); } .sSys__leadtext { width: calc(934/1260*100%); margin: calc(20/1260*100%) auto 0; } .sSys__tabList__wrap { display: none; } .sSys__listArea { width: 100%; margin: calc(50/1260*100%) auto 0; } .sSys__list__wrap { width: calc(1130/1260*100%); margin: 0 auto; } .swiper-button-prev.-sys::after { background-position: center right calc(54/1360*100vw); height: 86%; } .swiper-button-next.-sys::after { background-position: center left calc(54/1360*100vw); height: 86%; } .sSys__list__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } .sSys__list__item.swiper-slide-active , .sSys__list__item.swiper-slide-next { opacity: 1; } .sSys__detail { } .sSys__de__hd { width: 100%; } .sSys__de__pic { margin-top: calc(13/534*100%); } .sSys__de__text { margin-top: calc(12/534*100%); } .sSys__de__text .sSys__de__btn { width: calc(144/534*100%); margin-top: calc(20/534*100%); } .sSys__pL__item p { margin-top: calc(12/534*100%); } .sSys__de__text .sSys__de__btn { transition: transform 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s; -webkit-transform: scale(1.0); transform: scale(1.0);} .sSys__de__text .sSys__de__btn:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #system .picSlider__pagination { padding-top: calc(27/534*100%); } #system .-i2 .picSlider__pagination { padding-top: 0; } #system .-i6 .picSlider__pagination { padding-top: 0; } #system .-i8 .picSlider__pagination { padding-top: calc(53/534*100%); } } @media screen and (min-width: 1361px) { .secSystem { background-size: 1920px; padding-top: 30px; padding-bottom: 60px; } .swiper-button-prev.-sys::after { background-position: center right 54px; } .swiper-button-next.-sys::after { background-position: center left 54px; } } /* ---------------------------------------------------------------------------------------------------------------- .secChara ---------------------------------------------------------------------------------------------------------------- */ .secChara { padding: calc(40/750*100%) 0 0; background: #072235; overflow: hidden; } .sCha__hl { width: calc(318/750*100%); margin: 0 auto; position: relative; z-index:10; } .sCha__listArea { width: 100%; margin: calc(-30/750*100%) auto 0; position: relative; } .sCha__list { } .sCha__list__item { } @media screen and (min-width: 641px) { .secChara { padding: calc(33/1360*100%) 0 0; background: #081824; } .sCha__hl { width: calc(318/1260*100%); } .sCha__listArea { margin: calc(-30/1360*100%) auto 0; } .sCha__list__wrap { width: calc(1130/1260*100%); margin: 0 auto; overflow: visible; } .sCha__list { } .sCha__list__item { width: auto; } .swiper-button-prev.-chara::after { background-position: center right calc(54/1360*100vw); height: 100%; } .swiper-button-next.-chara::after { background-position: center left calc(54/1360*100vw); height: 100%; } .sCha__list__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; opacity: 0.4; } .sCha__list__item.swiper-slide-active , .sCha__list__item.swiper-slide-next , .sCha__list__item.swiper-slide-next + .sCha__list__item , .sCha__list__item.swiper-slide-next + .sCha__list__item + .sCha__list__item { opacity: 1; } .sCha__list__item a { transform-origin: bottom; } .sCha__list__item.btn_ov:hover { z-index: 100; position: relative; } } @media screen and (min-width: 1361px) { .secChara { padding: 33px 0 0; } .sCha__listArea { margin: -30px auto 0; } .swiper-button-prev.-chara::after { background-position: center right 54px; } .swiper-button-next.-chara::after { background-position: center left 54px; } } /* ---------------------------------------------------------------------------------------------------------------- .secProducts ---------------------------------------------------------------------------------------------------------------- */ .secProducts { padding: calc(73/750*100%) 0 0; background: url("../../_img/prod/bg_sp.jpg") top center no-repeat; background-size: 100%; } .sPro__hl { width: calc(288/750*100%); margin: 0 auto; } .sPro__ttl { width: calc(650/750*100%); margin: calc(30/750*100%) 0 0 calc(40/750*100%); } .sPro__blockA { width: calc(650/750*100%); margin: calc(18/750*100%) auto 0; position: relative; } .sPro__release { width: calc(392/650*100%); margin: 0 0 0 calc(-15/650*100%); } .sPro__btnChart { width: calc(270/650*100%); position: absolute; top: 0; right: 0; margin-top: calc(34/650*100%); } .sPro__leadtext { width: calc(664/750*100%); margin: calc(15/750*100%) auto 0; } .sPro__about { width: 100%; margin: calc(22/750*100%) auto 0; padding: calc(20/750*100%) calc(50/750*100%); background: rgba(8,17,29,0.8); line-height: 1.51; color: #c6c6c6; font-size: calc(19/750*100vw); } .sPro__about strong { font-size: calc(22/750*100vw); } @media screen and (min-width: 641px) { .secProducts { padding: calc(33/1360*100%) 0 0; background: url("../../_img/prod/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1360*100%); } .sPro__hl { width: calc(288/1260*100%); } .sPro__ttl { width: calc(830/1260*100%); margin: calc(32/1260*100%) 0 0 calc(-9/1260*100%); } .sPro__blockA { width: calc(392/1260*100%); margin: calc(96/1260*100%) calc(-16/1260*100%) 0 auto; position: absolute; top: 0; right: 0; } .sPro__release { width: 100%; margin: 0; } .sPro__btnChart { width: calc(359/392*100%); position: relative; margin: calc(2/392*100%) auto 0; } .sPro__leadtext { width: calc(788/1260*100%); margin: calc(23/1260*100%) 0 0 calc(-8/1260*100%); } .sPro__about { margin: calc(22/1260*100%) auto 0; padding: calc(15/1260*100%) calc(20/1260*100%); background: rgba(8,17,29,0.8); font-size: calc(15/1360*100vw); } .sPro__about strong { font-size: calc(15/1360*100vw); } } @media screen and (min-width: 1361px) { .secProducts { padding: 33px 0 0; background-size: 1920px; } .sPro__about { font-size: 1.5rem; } .sPro__about strong { font-size: 1.5rem; } } .sPro__prodbody { margin-top: calc(70/750*100%); padding-top: 1px; padding-bottom: calc(60/750*100%); background: rgba(0,15,34,0.6); position: relative; } .sPro__prodbody::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(30/750*100%); position: absolute; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); } .sPro__selectBtn { width: 100%; margin-top: calc(-42/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } .sPro__sBtn__item { width: calc(210/750*100%); margin: calc(10/750*100%) calc(5/750*100%) 0; } .sPro__sBtn__item:nth-child(-n+3) { margin-top: 0; } .sPro__sBtn__item .bF__btn { position: relative; } .sPro__sBtn__item .bF__btn::before { content: ""; display: block; width: calc(100% - 20/750*100vw); height: calc(100% - 4/750*100vw); position: absolute; top: calc(2/750*100vw); left: calc(10/750*100vw); background: url("../../_img/prod/tab/btn_off_v3_sp.png") center center no-repeat; background-size: 100%; } .sPro__sBtn__item.active .bF__btn::before { background: url("../../_img/prod/tab/btn_on_v3_sp.png") center center no-repeat; background-size: 100%; } .sPro__prodList__wrap { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; overflow: visible; } .sPro__prodList {} .sPro__prLi__item {} .sPro__prLi__it__cont { width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } .sPro__prLi__it__co__ttl { width: 100%; margin-bottom: calc(27/650*100%); } .sPro__prLi__it__co__pkg { width: calc(162/650*100%); } .sPro__prLi__it__co__block.-blockA { width: calc(465/650*100%); } .sPro__prLi__it__co__text {} .sPro__prLi__it__co__privi { margin-top: calc(30/465*100%); } .sPro__prLi__it__co__privi.-fin .bF__thumb img { filter: brightness(0.5); } .sPro__prLi__it__co__privi.-fin .bF__thumb span { display: block; width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: rgba(40,48,58,0.9); text-align: center; color: #ececec; padding: 0.4em 0; font-size: calc(20/750*100vw); } .sPro__prLi__it__co__block.-blockB { width: 100%; margin-top: calc(29/465*100%); } .sPro__prLi__it__co__price { width: 100%; margin: 0 0 0 auto; color: #c6c6c6; font-size: calc(18/750*100vw); text-align: right; } .sPro__prLi__it__co__price .addPrice { color: #fff; font-size: 1.9em; } .sPro__prLi__it__co__price__notes { line-height: 1.21; font-size: 2.1333vw; margin-bottom: 0.4rem; color: #b5b5b5; }/* font 16pt */ .sPro__prLi__it__co__price__ttl {} .sPro__prLi__it__co__btnList { width: 100%; position: relative; margin-top: calc(27/650*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } .sPro__prLi__it__co__btLi__item { width: calc(320/650*100%); } .sPro__prLi__it__co__btLi__item .btn { display: block; } .sPro__prLi__it__notes { margin-top: calc(30/650*100%); border-top: 1px solid #182432; padding-top: calc(10/650*100%); } .-disk .sPro__prLi__it__co__btnList { -webkit-justify-content: center; justify-content: center; } .-dl .sPro__prLi__it__co__block.-blockA { width: 100%; } .-dl .sPro__prLi__it__co__privi { margin-top: calc(30/650*100%); } .-dl .sPro__prLi__it__co__block.-blockB { margin-top: calc(29/650*100%); } .-dl .sPro__prLi__it__co__btnList { -webkit-justify-content: center; justify-content: center; } .-dl .sPro__prLi__it__cont.-dde { margin-top: calc(50/650*100%); padding-top: calc(50/650*100%); border-top: 1px solid #182432; } .-dl .sPro__prLi__it__cont.-ddeupg { margin-top: calc(50/650*100%); padding-top: calc(50/650*100%); border-top: 1px solid #182432; } .-upg .sPro__prLi__it__co__block.-blockA { width: 100%; } .-upg .sPro__prLi__it__co__block.-blockB { margin-top: calc(20/650*100%); } .-upg .sPro__prLi__it__co__btnList { -webkit-justify-content: center; justify-content: center; } .-upg .sPro__prLi__it__notes { margin-top: calc(27/650*100%); } .-upg .sPro__prLi__it__cont.-yuffie { margin-top: calc(50/650*100%); padding-top: calc(50/650*100%); } .-dlc .sPro__prLi__it__co__pkg { width: calc(228/650*100%); } .-dlc .sPro__prLi__it__co__block.-blockA { width: calc(406/650*100%); } .-dlc .sPro__prLi__it__co__btnList { -webkit-justify-content: center; justify-content: center; } .-dlc .sPro__prLi__it__cont.-itempack { margin-top: calc(50/650*100%); padding-top: calc(50/650*100%); border-top: 1px solid #182432; } .-dlc .-itempack .sPro__prLi__it__co__btnList { margin-top: 0; } .-dlc .-itempack .sPro__prLi__it__co__btLi__item { width: calc(400/650*100%); } @media screen and (min-width: 641px) { .sPro__prodbody { margin-top: calc(80/1360*100%); padding-bottom: calc(60/1360*100%); background: rgba(0,15,34,0.8); } .sPro__prodbody::before { padding-top: calc(30/1360*100%); background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); } .sPro__selectBtn { margin-top: calc(-40/1260*100%); -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } .sPro__sBtn__item { width: calc(200/1260*100%); margin: 0 auto; } .sPro__sBtn__item .bF__btn::before { width: calc(100% - 20/1360*100vw); height: calc(100% - 4/1360*100vw); top: calc(2/1360*100vw); left: calc(10/1360*100vw); background: url("../../_img/prod/tab/btn_off_v3_pc.png") center center no-repeat; background-size: 100%; } .sPro__sBtn__item.active .bF__btn::before { background: url("../../_img/prod/tab/btn_on_v3_pc.png") center center no-repeat; background-size: 100%; } .sPro__sBtn__item { transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; -webkit-transform: scale(1); transform: scale(1); } .sPro__sBtn__item .bF__btn::before { transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; -webkit-transform: scale(1); transform: scale(1); } .sPro__sBtn__item:not(.active):hover { -webkit-transform: scale(1.05); transform: scale(1.05); } .sPro__sBtn__item:not(.active):hover .bF__btn::before { -webkit-transform: scale(1.1); transform: scale(1.1); } .sPro__sBtn__item.active .bF__btn::before { -webkit-transform: scale(1.0); transform: scale(1.0);} .sPro__sBtn__item a.basicFrame:hover { -webkit-transform: scale(1); transform: scale(1);} .sPro__sBtn__item a.basicFrame:hover .bF__thumb { box-shadow: none; } .sPro__sBtn__item a.basicFrame:hover .bF__frame .bF__thumb img { opacity: 1; } .sPro__prodList__wrap { width: 100%; margin: calc(40/1260*100%) auto 0; } .sPro__prodList {} .sPro__prLi__item {} .sPro__prLi__it__cont { } .sPro__prLi__it__co__ttl { width: calc(780/1260*100%); margin-bottom: calc(33/1260*100%); margin-right: calc(480/1260*100%); } .sPro__prLi__it__co__pkg { width: calc(162/1260*100%); margin-right: calc(40/1260*100%); } .sPro__prLi__it__co__block.-blockA { width: calc(605/1260*100%); margin: 0 auto 0 0; } .sPro__prLi__it__co__text {} .sPro__prLi__it__co__privi { margin-top: calc(18/605*100%); } .sPro__prLi__it__co__privi.-fin .bF__thumb span { padding: 0.4em 0; font-size: calc(18/1360*100vw); } .sPro__prLi__it__co__block.-blockB { width: calc(340/1260*100%); margin-top: calc(0/465*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-self: flex-end; align-items: flex-end; } .sPro__prLi__it__co__price { width: 100%; margin: 0; padding-bottom: 0.4em; border-bottom: 2px solid #283543; font-size: calc(18/1360*100vw); position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; } .sPro__prLi__it__co__price__notes { font-size: calc(12/1360*100vw); text-align: left; line-height: 1.21; position: absolute; bottom: 0; right: 0; margin-bottom: 3.8em; text-indent: -1em; padding-left: 1em; } .sPro__prLi__it__co__price__ttl { margin-right: auto; } .sPro__prLi__it__co__price .addPrice { color: #fff; font-size: 1.9em; margin-right: 0.1em; } .sPro__prLi__it__co__btnList { margin-top: calc(10/340*100%); display: block; } .sPro__prLi__it__co__btLi__item { width: 100%; margin-bottom: calc(12/340*100%); } .sPro__prLi__it__co__btLi__item:last-child { margin-bottom: 0; } .sPro__prLi__it__co__btLi__item .btn { } .sPro__prLi__it__notes { margin-top: calc(50/1260*100%); padding-top: calc(10/1260*100%); } .-dl .sPro__prLi__it__co__block.-blockA { width: calc(605/1260*100%); } .-dl .sPro__prLi__it__co__privi { margin-top: calc(18/605*100%); } .-dl .sPro__prLi__it__co__block.-blockB { margin-top: 0; } .-dl .sPro__prLi__it__co__btnList { } .-dl .sPro__prLi__it__cont.-dde { margin-top: calc(50/1260*100%); padding-top: calc(50/1260*100%); border-top: 1px solid #182432; } .-dl .sPro__prLi__it__cont.-ddeupg { margin-top: calc(50/1260*100%); padding-top: calc(50/1260*100%); border-top: 1px solid #182432; } .-dl .-ddeupg .sPro__prLi__it__co__price { padding-top: calc(35/340*100%); } .-upg .sPro__prLi__it__co__ttl { width: calc(1150/1260*100%); margin-right: calc(110/1260*100%); } .-upg .sPro__prLi__it__co__block.-blockA { width: calc(710/1260*100%); } .-upg .sPro__prLi__it__co__block.-blockB { margin-top: 0; } .-upg .sPro__prLi__it__co__price { padding-top: calc(35/340*100%); } .-upg .sPro__prLi__it__notes { margin-top: calc(30/1260*100%); } .-upg .sPro__prLi__it__cont.-yuffie { margin-top: calc(50/1260*100%); padding-top: calc(50/1260*100%); border-top: 0px solid #182432; } .-upg .-yuffie .sPro__prLi__it__co__ttl { width: calc(912/1260*100%); margin-right: calc(348/1260*100%); } .-upg .-yuffie .sPro__prLi__it__co__block.-blockA { width: calc(605/1260*100%); } .-dlc .sPro__prLi__it__co__pkg { width: calc(192/1260*100%); margin-right: calc(30/1260*100%); } .-dlc .sPro__prLi__it__co__block.-blockA { width: calc(605/1260*100%); margin-top: calc(5/1260*100%)} .-dlc .sPro__prLi__it__cont.-itempack { margin-top: calc(50/1260*100%); padding-top: calc(50/1260*100%); border-top: 0px solid #182432; } .-dlc .-itempack .sPro__prLi__it__co__btLi__item { width: 100%; } } @media screen and (min-width: 1361px) { .sPro__prodbody { margin-top: 80px; padding-bottom: 60px; } .sPro__prodbody::before { padding-top: 30px; } .sPro__sBtn__item .bF__btn::before { width: calc(100% - 20px); height: calc(100% - 4px); top: 2px; left: 10px; } .sPro__prLi__it__co__privi.-fin .bF__thumb span { font-size: 1.8rem; } .sPro__prLi__it__co__price { font-size: 1.8rem; } .sPro__prLi__it__co__price__notes { font-size: 1.2rem; } } /* ---------------------------------------------------------------------------------------------------------------- .secSpec ---------------------------------------------------------------------------------------------------------------- */ .secSpec { background: #000811; padding: calc(20/750*100%) 0; } .sSpe__spec { width: calc(650/750*100%); margin: 0 auto; } .sSpe__notes { width: calc(650/750*100%); margin: 1rem auto 0; } @media screen and (min-width: 641px) { .secSpec { padding: calc(17/1360*100%) 0; } .sSpe__spec { width: 100%; } .sSpe__notes { width: 100%; margin: 0.5rem auto 0; } .sSpe__notes li { display: inline-block; } } @media screen and (min-width: 1361px) { .secSpec { padding: 17px 0; } } /* ---------------------------------------------------------------------------------------------------------------- .secLinks ---------------------------------------------------------------------------------------------------------------- */ .secLinks { } .sLin__relatedLinks { width: 100%; margin: calc(25/750*100%) auto 0; padding-bottom: calc(120/750*100%); position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } .sLin__relatedLinks::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(197/750*100%); background: rgba(0,9,18,1.0); position: absolute; left: 0; bottom: 0; } .sLin__relatedLinks .sLin__rL__item { width: calc(210/750*100%); margin: 0 calc(5/750*100%); position: relative; } .sLin__relatedLinks .sLin__rL__item .btn { display: block; position: relative; } .sLin__relatedLinks .sLin__rL__item .btn .ov { position: absolute; top: 0; left: 0; opacity: 0; } @media screen and (min-width: 641px) { .secLinks { } .sLin__relatedLinks { margin: calc(25/1360*100%) auto 0; padding-bottom: calc(104/1360*100%); } .sLin__relatedLinks::before { padding-top: calc(140/1360*100%); } .sLin__relatedLinks .sLin__rL__item { width: calc(400/1360*100%); margin: 0 calc(15/1360*100%); } .sLin__relatedLinks .sLin__rL__item .btn:hover .ov { opacity: 1; } } @media screen and (min-width: 1361px) { .sLin__relatedLinks { margin: 25px auto 0; padding-bottom: 104px; } .sLin__relatedLinks::before { padding-top: 140px; } .sLin__relatedLinks .sLin__rL__item { width: 400px; margin: 0 15px; } } /* ---------------------------------------------------------------------------------------------------------------- .modal ---------------------------------------------------------------------------------------------------------------- */ .modal { position: relative; width: 100%; margin: 0 auto; } .modal__inner { position: relative; } .modal__block { position: relative; } .modal__blc__inner { position: relative; } @media screen and (min-width: 641px) { .modal { margin: 0 auto; } } @media screen and (min-width: 1361px) { .modal { width: 1360px; } } /* ---------------------------------------------------------------------------------------------------------------- .modal.-chart ---------------------------------------------------------------------------------------------------------------- */ .-chart .modal__block { background: url("../../_img/chart/bg_sp.jpg") top center no-repeat; background-size: 100%; } .-chart .modal__blc__inner { width: calc(650/750*100%); margin: 0 auto; padding: calc(80/750*100%) 0; } .-chart .mdl__btnList { width: calc(380/650*100%); position: absolute; top: 0; right: 0; margin-top: calc(124/650*100%); z-index: 100; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } .-chart .mdl__btnLi__item { width: calc(180/380*100%); background-image: url("../../_img/chart/btn_off_sp.png"), url("../../_img/chart/btn_on_sp.png"); background-position: center, 100vw; background-repeat: no-repeat; background-size: contain; } .-chart .mdl__btnLi__item.active { background-position: 100vw, center center; } .-chart .mdl__chartList__wrap { position: relative; width: 100%; overflow: visible; } .-chart .mdl__chartList { position: relative; } .-chart .mdl__chartLi__item { position: relative; } .-chart .mdl__chartLi__item__ttl { position: relative; margin-bottom: calc(55/650*100%); } .-chart .mdl__chartLi__item__table { position: relative; } .-chart .mdl__chartLi__item__table__price { width: calc(284/650*100%); color: #c6c6c6; font-size: calc(14/750*100vw); text-align: center; position: absolute; top: 0; margin-left: calc(-142/650*100%); } .-chart .mdl__chartLi__item__table__price__ttl { margin-right: 0.5%; } .-chart .mdl__chartLi__item__table__price .addPrice { color: #fff; font-size: 1.5em; } .-chart .mdl__chartLi__item__table__price.-pr1 { left: calc(326/650*100%); margin-top: calc(234/650*100%); } .-chart .mdl__chartLi__item__table__price.-pr2 { left: calc(326/650*100%); margin-top: calc(427/650*100%); } .-chart .mdl__chartLi__item__table__price.-pr3 { left: calc(326/650*100%); margin-top: calc(680/650*100%); } .-chart .mdl__chartLi__item__table__price.-pr4 { left: calc(247/650*100%); margin-top: calc(786/650*100%); } .-chart .mdl__chartLi__item__table__price.-pr5 { left: calc(404/650*100%); margin-top: calc(786/650*100%); } @media screen and (min-width: 641px) { .-chart .modal__block { background: url("../../_img/chart/bg_pc.jpg") top center no-repeat; background-size: 100%; width: calc(1340/1360*100%); margin: 0 auto; } .-chart .modal__blc__inner { width: calc(1260/1340*100%); margin: 0 auto; padding: calc(55/1340*100%) 0 calc(46/1340*100%); } .-chart .mdl__btnList { width: calc(340/1260*100%); margin-top: calc(50/1260*100%); } .-chart .mdl__btnLi__item { width: calc(160/340*100%); background-image: url("../../_img/chart/btn_off_pc.png"), url("../../_img/chart/btn_on_pc.png"); background-position: center, 100vw; background-repeat: no-repeat; background-size: contain; } .-chart .mdl__btnLi__item:not(.active):hover { background-position: 100vw, center center; } .-chart .mdl__chartLi__item__ttl { width: calc(810/1260*100%); margin-bottom: calc(31/1260*100%); } .-chart .mdl__chartLi__item__table { } .-chart .mdl__chartLi__item__table__price { width: calc(216/1260*100%); font-size: calc(14/1360*100vw); margin-left: calc(-108/1260*100%); } .-chart .mdl__chartLi__item__table__price__ttl { margin-right: 1%; } .-chart .mdl__chartLi__item__table__price .addPrice { color: #fff; font-size: 1.5em; } .-chart .mdl__chartLi__item__table__price.-pr1 { left: calc(359/1260*100%); margin-top: calc(208/1260*100%); } .-chart .mdl__chartLi__item__table__price.-pr2 { left: calc(616/1260*100%); margin-top: calc(208/1260*100%); } .-chart .mdl__chartLi__item__table__price.-pr3 { left: calc(873/1260*100%); margin-top: calc(248/1260*100%); } .-chart .mdl__chartLi__item__table__price.-pr4 { left: calc(1130/1260*100%); margin-top: calc(122/1260*100%); } .-chart .mdl__chartLi__item__table__price.-pr5 { left: calc(1130/1260*100%); margin-top: calc(228/1260*100%); } } @media screen and (min-width: 1361px) { .-chart .mdl__chartLi__item__table__price { font-size: 1.24rem; } } /* ---------------------------------------------------------------------------------------------------------------- .modal.-weiss ---------------------------------------------------------------------------------------------------------------- */ .-weiss .modal__block { } .-weiss .modal__blc__inner { width: 100%; margin: 0 auto; padding: calc(80/750*100%) 0; } @media screen and (min-width: 641px) { .-weiss .modal__block { width: calc(1280/1360*100%); margin: 0 auto; } .-weiss .modal__blc__inner { padding: calc(55/1360*100%) 0; } } @media screen and (min-width: 1361px) { } /* ---------------------------------------------------------------------------------------------------------------- #character ---------------------------------------------------------------------------------------------------------------- */ #character { } #character .secConts { background: #090d0b; } #character .charaAdd { display: none; position: absolute; top: 0; opacity: 0; } #character .characterArea { position: relative; padding-bottom: calc(124/750*100%); } #character .characterArea .charaAdd.-bg { width: 100%; height: 100%; } #character .characterArea .bgb { position: absolute; top: 0; left: 50%; margin-left: calc(170/750*100%); background: rgba(0,0,0,0.2); width: 200%; height: 100%; transform: skewX(-10deg); transform-origin:left top;} #character .characterArea .bgb::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.3); margin-left: calc(20/1500*100%); } #character .characterArea .bgb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); margin-left: calc(50/1500*100%); } #character .characterArea .secInner { padding-top: calc(554/750*100%); } #character .characterArea .cA__full { position: absolute; top: 0; right: 0; margin-right: 0; } #character .charaAdd.-full { right: 0; margin-right: 0; } #character .characterArea .cA__detail { width: calc(650/750*100%); margin: 0 auto; position: relative; } #character .characterArea .cA__detail .cA__speech {} #character .charaAdd.-speech { left: 0; } #character .characterArea .cA__detail .cA__name { margin: calc(50/650*100%) auto 0 calc(-2/650*100%); } #character .characterArea .cA__detail .cA__cv { margin: calc(20/650*100%) auto 0; } #character .characterArea .cA__detail .cA__text { position: relative; width: 100%; margin: calc(15/650*100%) auto 0; background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 100%); background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 100%); } #character .characterArea .cA__detail .cA__text + .cA__text { margin-top: calc(20/650*100%); } #character .characterArea .cA__detail .cA__text::before , #character .characterArea .cA__detail .cA__text::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #character .characterArea .cA__detail .cA__text::before { border-width: 0 calc(8/750*100vw); border-style: solid; border-color: rgba(13,44,67,0.5);} #character .characterArea .cA__detail .cA__text::after { border-width: 0 calc(4/750*100vw); border-style: solid; border-color: #439bb5;} #character .characterArea .cA__detail .cA__text .cA__text__inner::before , #character .characterArea .cA__detail .cA__text .cA__text__inner::after { content: ""; display: block; width: 100%; height: 1px; position: absolute; top: 0; left: 0; border-width: 0 calc(14/750*100vw); border-style: solid; border-color: #439bb5;} #character .characterArea .cA__detail .cA__text .cA__text__inner::after { top: inherit; bottom: 0;} #character .characterArea .cA__detail .cA__imgBlock { width: 100%; margin: calc(40/650*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #character .characterArea .cA__detail .cA__imgBlock .iB__item { width: calc(310/650*100%); } #character .characterArea .cA__detail .cA__btnChange { width: calc(155/650*100%); position: absolute; top: 0; right: calc(24/650*100%); margin-top: calc(530/650*100%); } #character .characterArea .cA__subNav__area {} #character .characterArea .cA__subNav__wrap { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; position: relative; background: rgba(0,0,0,0.8); } #character .characterArea .cA__subNav__wrap::before , #character .characterArea .cA__subNav__wrap::after { content: ""; display: block; width: 0px; height: 100%; position: absolute; top: 0; } #character .characterArea .cA__subNav__wrap::before { left: 0; border-left: calc(4/750*100vw) solid #439bb5; border-right: calc(4/750*100vw) solid rgba(13,44,67,0.5); } #character .characterArea .cA__subNav__wrap::after { right: 0; border-right: calc(4/750*100vw) solid #439bb5; border-left: calc(4/750*100vw) solid rgba(13,44,67,0.5); } #character .characterArea .cA__subNav { width: 100%; position: relative; padding: calc(20/650*100%) 0 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #character .characterArea .cA__subNav .cA__sN__item { width: calc(120/650*100%); margin: 0 calc(15/650*100%) calc(20/650*100%); position: relative; overflow: hidden; background: url(../../character/_img/subnav/btn_off.png) center center no-repeat; background-size: 100%; } #character .characterArea .cA__subNav .cA__sN__item .btn { display: block; position: relative; } #character .characterArea .cA__subNav .cA__sN__item .btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: url(../../character/_img/subnav/btn_on.png) center center no-repeat; background-size: 100%; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } #character .characterArea .cA__subNav .cA__sN__item.active .btn::before { opacity: 1; } #character .characterArea .cA__subNav .cA__sN__item .btn::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: -webkit-linear-gradient(left, rgba(119,183,233,0.3) 0%,rgba(119,183,233,0) 35%,rgba(119,183,233,0) 50%,rgba(119,183,233,0) 65%,rgba(119,183,233,0.3) 100%); background: linear-gradient(to right, rgba(119,183,233,0.3) 0%,rgba(119,183,233,0) 35%,rgba(119,183,233,0) 50%,rgba(119,183,233,0) 65%,rgba(119,183,233,0.3) 100%); border-style: solid; border-width: 1px 2px; border-color: #8cc1d0; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } #character .characterArea .cA__subNav .cA__sN__item.active .btn::after { opacity: 1; } #character .characterArea .cA__subNav .cA__sN__item .btn div { position: relative; } #character .characterArea .cA__subNav .cA__sN__item .btn div img { vertical-align: top; } #character .characterArea .cA__subNav--p1 { } #character .characterArea .cA__subNav--p2::before , #character .characterArea .cA__subNav--p3::before { content: ""; display: block; width: calc(574/650*100%); height: 1px; background: #2d5561; position: absolute; top: 0; left: calc(38/650*100%); } #character #yuffie .characterArea { background: url(../../character/_img/yuffie/visual-add_sp.jpg) top center no-repeat; background-size: 100%; } #character #yuffie .characterArea .charaAdd.-bg { background: url(../../character/_img/yuffie/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #yuffie .characterArea .cA__full { width: calc(487/750*100%); right: calc(-29/750*100%); margin-top: calc(276/750*100%); } #character #yuffie .characterArea .charaAdd.-full { width: calc(382/750*100%); right: calc(-8/750*100%); margin-top: calc(223/750*100%); } #character #yuffie .characterArea .cA__detail .cA__speech { width: calc(632/650*100%); } #character #yuffie .characterArea .cA__detail .charaAdd.-speech { width: calc(396/650*100%); } #character #sonon .characterArea { background: url(../../character/_img/sonon/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #sonon .characterArea .cA__full { width: calc(1073/750*100%); right: calc(-120/750*100%); margin-top: calc(107/750*100%); } #character #sonon .characterArea .cA__detail .cA__speech { width: calc(439/650*100%); } #character #zhijie .characterArea { background: url(../../character/_img/zhijie/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #zhijie .characterArea .cA__full { width: calc(394/750*100%); right: calc(12/750*100%); margin-top: calc(213/750*100%); } #character #zhijie .characterArea .cA__detail .cA__speech { width: calc(593/650*100%); } #character #nayo .characterArea { background: url(../../character/_img/nayo/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #nayo .characterArea .cA__full { width: calc(369/750*100%); right: calc(32/750*100%); margin-top: calc(208/750*100%); } #character #nayo .characterArea .cA__detail .cA__speech { width: calc(612/650*100%); } #character #billy .characterArea { background: url(../../character/_img/billy/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #billy .characterArea .cA__full { width: calc(411/750*100%); right: calc(3/750*100%); margin-top: calc(207/750*100%); } #character #billy .characterArea .cA__detail .cA__speech { width: calc(552/650*100%); } #character #polk .characterArea { background: url(../../character/_img/polk/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #polk .characterArea .cA__full { width: calc(416/750*100%); right: calc(-46/750*100%); margin-top: calc(201/750*100%); } #character #polk .characterArea .cA__detail .cA__speech { width: calc(432/650*100%); } #character #nero .characterArea { background: url(../../character/_img/nero/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #nero .characterArea .cA__full { width: calc(839/750*100%); right: calc(-210/750*100%); margin-top: calc(61/750*100%); } #character #nero .characterArea .cA__detail .cA__speech { width: calc(524/650*100%); } @media screen and (max-width: 640px) { /* 調整用　*/ /*#character .characterArea .cA__subNav--p1 .cA__sN__item:last-child { margin-right: calc(132/650*100%);}*/ /*#character .characterArea .cA__subNav--p2 .cA__sN__item:last-child { margin-right: calc(498/650*100%);}*/ } @media screen and (min-width: 641px) { #character { } #character .pageTitle { width: calc(318/1360*100%); margin-left: calc(-159/1360*100%); } #character .characterArea { margin-bottom: 0; padding-bottom: calc(294/1360*100%); } #character .characterArea::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(240/1360*100%); position: absolute; left: 0; bottom: 0; z-index: 1; background: -webkit-linear-gradient(top, rgba(8,10,15,0) 0%,rgba(8,10,15,1) 64%,rgba(8,10,15,1) 100%); background: linear-gradient(to bottom, rgba(8,10,15,0) 0%,rgba(8,10,15,1) 64%,rgba(8,10,15,1) 100%); } #character .characterArea .charaAdd.-bg { } #character .characterArea .bgb { margin-left: calc(410/1360*100%); width: 100%; transform: skewX(-10deg); } #character .characterArea .bgb::before { margin-left: calc(20/1360*100%); } #character .characterArea .bgb::after { margin-left: calc(50/1360*100%); } #character .characterArea .secInner { padding-top: calc(200/1360*100%); z-index: 2; } #character .characterArea .cA__full {} #character .characterArea .cA__detail { width: calc(560/1260*100%); left: 50%; margin-left: calc(-178/1260*100%); } #character .characterArea .cA__detail .cA__speech {} #character .characterArea .cA__detail .cA__name { width: calc(650/560*100%); margin: calc(36/560*100%) auto 0 calc(-2/560*100%); } #character .characterArea .cA__detail .cA__cv { width: calc(493/560*100%); margin: calc(3/560*100%) 0 0 calc(-2/560*100%); } #character .characterArea .cA__detail .cA__text { margin: calc(16/560*100%) auto 0;} #character .characterArea .cA__detail .cA__text { background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 100%); background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 100%); } #character .characterArea .cA__detail .cA__text + .cA__text { margin-top: calc(11/560*100%); } #character .characterArea .cA__detail .cA__text::before { border-width: 0 calc(8/1260*100vw); } #character .characterArea .cA__detail .cA__text::after { border-width: 0 calc(4/1260*100vw); } #character .characterArea .cA__detail .cA__text .cA__text__inner::before , #character .characterArea .cA__detail .cA__text .cA__text__inner::after { border-width: 0 calc(14/1260*100vw); } #character .characterArea .cA__detail .cA__text .cA__text__inner::after { } #character .characterArea .cA__detail .cA__imgBlock { margin: calc(24/560*100%) auto 0; } #character .characterArea .cA__detail .cA__imgBlock .iB__item { width: calc(270/560*100%); } #character .characterArea .cA__detail .cA__btnChange { width: calc(125/560*100%); top: 0; right: calc(-250/560*100%); margin-top: calc(706/560*100%); z-index: 10; } #character .characterArea .cA__detail .cA__btnChange .btn { transition: all 0.1s ease 0s; -webkit-transition: all 0.1s ease 0s; cursor: pointer; } #character .characterArea .cA__detail .cA__btnChange .btn:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } #character .characterArea .cA__subNav__area { width: 100%; text-align: center; position: absolute; left: 0; bottom: 0; margin-bottom: calc(-200/1260*100%);} #character .characterArea .cA__subNav__area.fixed { position: fixed; margin-bottom: calc(95/1360*100%);} #character .characterArea .cA__subNav__wrap { width: auto; margin: 0 0 calc(0/1260*100%); 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 , #character .characterArea .cA__subNav__wrap::after { border-width: calc(4/1360*100vw); } #character .characterArea .cA__subNav { width: auto; padding: calc(14/1360*100vw) calc(15/1360*100vw); -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #character .characterArea .cA__subNav--p1 { padding-right: calc(6/1360*100vw); } #character .characterArea .cA__subNav--p2 { padding-right: calc(6/1360*100vw); padding-left: calc(7/1360*100vw); } #character .characterArea .cA__subNav--p3 { padding-left: calc(7/1360*100vw); } #character .characterArea .cA__subNav--p2::before , #character .characterArea .cA__subNav--p3::before { width: 1px; height: 60%; top: 0; left: 0; margin-top: calc(14/1360*100vw); } #character .characterArea .cA__subNav .cA__sN__item { width: calc(42/1360*100vw); margin: 0 calc(1.5/1360*100vw) 0; } #character .characterArea .cA__subNav .cA__sN__item img { vertical-align: top; } #character .characterArea .cA__subNav .cA__sN__item .btn::before { } #character .characterArea .cA__subNav .cA__sN__item .btn:hover::before , #character .characterArea .cA__subNav .cA__sN__item .btn:hover::after { opacity: 1;} #character #yuffie .characterArea { background: url(../../character/_img/yuffie/visual-add_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #yuffie .characterArea .charaAdd.-bg { background: url(../../character/_img/yuffie/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #yuffie .characterArea .cA__full { width: calc(348/1260*100%); right: calc(-46/1260*100%); margin-top: calc(161/1260*100%); } #character #yuffie .characterArea .charaAdd.-full { width: calc(273/1260*100%); right: calc(-31/1260*100%); margin-top: calc(125/1260*100%); } #character #yuffie .characterArea .cA__detail .cA__speech { width: calc(460/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #yuffie .characterArea .cA__detail .charaAdd.-speech { width: calc(289/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #sonon .characterArea { background: url(../../character/_img/sonon/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #sonon .characterArea .cA__full { width: calc(716/1260*100%); right: calc(-100/1260*100%); margin-top: calc(97/1260*100%); } #character #sonon .characterArea .cA__detail .cA__speech { width: calc(480/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #zhijie .characterArea { background: url(../../character/_img/zhijie/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #zhijie .characterArea .cA__full { width: calc(281/1260*100%); right: calc(-20/1260*100%); margin-top: calc(111/1260*100%); } #character #zhijie .characterArea .cA__detail .cA__speech { width: calc(431/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #nayo .characterArea { background: url(../../character/_img/nayo/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #nayo .characterArea .cA__full { width: calc(262/1260*100%); right: calc(3/1260*100%); margin-top: calc(134/1260*100%); } #character #nayo .characterArea .cA__detail .cA__speech { width: calc(445/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #billy .characterArea { background: url(../../character/_img/billy/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #billy .characterArea .cA__full { width: calc(301/1260*100%); right: calc(-33/1260*100%); margin-top: calc(83/1260*100%); } #character #billy .characterArea .cA__detail .cA__speech { width: calc(403/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #polk .characterArea { background: url(../../character/_img/polk/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #polk .characterArea .cA__full { width: calc(319/1260*100%); right: calc(-33/1260*100%); margin-top: calc(122/1260*100%); } #character #polk .characterArea .cA__detail .cA__speech { width: calc(315/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #nero .pageTitle { z-index: 4; } #character #nero .characterArea { background: url(../../character/_img/nero/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1360*100%); } #character #nero .characterArea .cA__full { width: calc(993/1260*100%); right: calc(-330/1260*100%); margin-top: calc(0/1260*100%); } #character #nero .characterArea .cA__detail .cA__speech { width: calc(382/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #zhijie .characterArea .cA__subNav__area , #character #nayo .characterArea .cA__subNav__area , #character #billy .characterArea .cA__subNav__area , #character #polk .characterArea .cA__subNav__area { margin-bottom: calc(-187/1260*100%); } #character #nero .characterArea .cA__subNav__area { margin-bottom: calc(-375/1260*100%); } #character #zhijie .characterArea .cA__subNav__area.fixed , #character #nayo .characterArea .cA__subNav__area.fixed , #character #billy .characterArea .cA__subNav__area.fixed , #character #polk .characterArea .cA__subNav__area.fixed , #character #nero .characterArea .cA__subNav__area.fixed { margin-bottom: calc(95/1360*100%); } #character #zhijie .characterArea , #character #nayo .characterArea , #character #billy .characterArea , #character #polk .characterArea { padding-bottom: calc(281/1360*100%); } #character #nero .characterArea { padding-bottom: calc(469/1360*100%); } } @media screen and (min-width: 1361px) { #character { } #character .pageTitle { width: 318px; margin-left: -159px; } #character .characterArea { margin-bottom: 0; padding-bottom: 294px; } #character .characterArea::before { padding-top: 240px;} #character .characterArea .bgb { margin-left: 410px; } #character .characterArea .bgb::before { margin-left: 20px; } #character .characterArea .bgb::after { margin-left: 50px; } #character .characterArea .secInner { padding-top: 200px; } #character .characterArea .cA__detail .cA__text::before { border-width: 0 8px; } #character .characterArea .cA__detail .cA__text::after { border-width: 0 4px; } #character .characterArea .cA__detail .cA__text .cA__text__inner::before , #character .characterArea .cA__detail .cA__text .cA__text__inner::after { border-width: 0 14px; } #character .characterArea .cA__subNav__area { margin-bottom: -200px;} #character .characterArea .cA__subNav__area.fixed { margin-bottom: 95px;} #character .characterArea .cA__subNav__wrap::before , #character .characterArea .cA__subNav__wrap::after { border-width: 4px; } #character .characterArea .cA__subNav { padding: 14px 15px; } #character .characterArea .cA__subNav--p1 { padding-right: 6px; } #character .characterArea .cA__subNav--p2 { padding-right: 6px; padding-left: 6px; } #character .characterArea .cA__subNav--p3 { padding-left: 6px; } #character .characterArea .cA__subNav--p2::before , #character .characterArea .cA__subNav--p3::before { margin-top: 14px; } #character .characterArea .cA__subNav .cA__sN__item { width: 42px; margin: 0 1.5px 0; } #character #yuffie .characterArea , #character #yuffie .characterArea .charaAdd.-bg , #character #sonon .characterArea , #character #zhijie .characterArea , #character #nayo .characterArea , #character #billy .characterArea , #character #polk .characterArea , #character #nero .characterArea { background-size: 1920px; } #character #zhijie .characterArea .cA__subNav__area , #character #nayo .characterArea .cA__subNav__area , #character #billy .characterArea .cA__subNav__area , #character #polk .characterArea .cA__subNav__area { margin-bottom: -187px;} #character #nero .characterArea .cA__subNav__area { margin-bottom: -375px;} #character #zhijie .characterArea .cA__subNav__area.fixed , #character #nayo .characterArea .cA__subNav__area.fixed , #character #billy .characterArea .cA__subNav__area.fixed , #character #polk .characterArea .cA__subNav__area.fixed { margin-bottom: 95px;} #character #nero .characterArea .cA__subNav__area.fixed { margin-bottom: 95px;} #character #zhijie .characterArea , #character #nayo .characterArea , #character #billy .characterArea , #character #polk .characterArea { padding-bottom: 281px; } #character #nero .characterArea { padding-bottom: 469px; } } @media screen and (min-width: 1921px) { #character #yuffie .characterArea , #character #yuffie .characterArea .charaAdd.-bg , #character #sonon .characterArea , #character #zhijie .characterArea , #character #nayo .characterArea , #character #billy .characterArea , #character #polk .characterArea , #character #nero .characterArea { background-size: 100%; } } /* ---------------------------------------------------------------------------------------------------------------- #faq ---------------------------------------------------------------------------------------------------------------- */ #faq {} #faq .secConts { background: #000 url("../../faq/_img/bg_sp.jpg") top center no-repeat; background-size: 100%; } #faq .faqArea { padding-top: calc(154/750*100%); padding-bottom: calc(124/750*100%); } #faq .faqArea .hl { width: 100%; margin: 0 auto; } #faq .fA__box { position: relative; width: calc(650/750*100%); margin: calc(50/750*100%) auto 0; } #faq .fA__box + .fA__box { margin-top: calc(40/750*100%); } #faq .fA__box__ques { background: #0d2b43; border: 2px solid #195160; border-width: 0 2px; padding: calc(30/650*100%) calc(20/650*100%); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #faq .fA__box__ques.open { } #faq .fA__box__ans { display: none; } #faq .fA__box__ans { background: #fff; padding: calc(30/650*100%) calc(20/650*100%); } #faq .fA__box__ans__inr { width: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #faq .fA__box__icon { width: calc(60/610*100%); -ms-flex-item-align: start; align-self: flex-start; } #faq .fA__box__icon.-ques { background: #2b768b; } #faq .fA__box__icon.-ans { background: #932f49; margin-left: 2px; } #faq .fA__box__text { -ms-flex-item-align: center; align-self: center; font-size: calc(24/750*100vw); font-feature-settings: "palt"; letter-spacing: 0.03em; line-height: 1.41; } #faq .fA__box__text.-ques { width: calc(450/610*100%); } #faq .fA__box__text.-ans { width: calc(520/610*100%); margin-left: calc(20/610*100%); color: #000; } #faq .fA__box__text.-ans a { color: #932f49; } #faq .fA__box__state { background: #2b768b; width: calc(60/610*100%); height: 0; padding-top: calc(60/610*100%); -ms-flex-item-align: start; align-self: flex-start; position: relative; } #faq .fA__box__state::before , #faq .fA__box__state::after { content: ""; background: #0d2d46; width: calc(30/60*100%); height: 0; padding-top: calc(6/60*100%); position: absolute; top: 50%; left: 25%; margin-top: calc(-3/60*100%); } #faq .fA__box__state::after { transition: transform 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s; transform-origin: center center; transform: rotate(-90deg); } #faq .open .fA__box__state::after { transform: rotate(0deg)} @media screen and (min-width: 641px) { #faq {} #faq .secConts { background: #000 url("../../faq/_img/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1360*100%); } #faq .pageTitle { width: calc(136/1360*100%); margin-left: calc(-68/1360*100%); } #faq .faqArea { padding-top: calc(142/1360*100%); padding-bottom: calc(154/1360*100%); } #faq .faqArea .hl { width: calc(933/1260*100%); } #faq .fA__box { width: 100%; margin: calc(50/1260*100%) auto 0; } #faq .fA__box + .fA__box { margin-top: calc(40/1260*100%); } #faq .fA__box__ques { padding: calc(15/1260*100%) calc(18/1260*100%); cursor: pointer; } #faq .fA__box__ques.open { } #faq .fA__box__ans { padding: calc(20/1260*100%) calc(20/1260*100%); } #faq .fA__box__ans__inr {} #faq .fA__box__icon { width: calc(40/1220*100%); } #faq .fA__box__text { font-size: 1.1029vw; } #faq .fA__box__text.-ques { width: calc(1110/1220*100%); } #faq .fA__box__text.-ans { width: calc(1160/1220*100%); margin-left: calc(20/1220*100%); } #faq .fA__box__state { width: calc(30/1220*100%); padding-top: calc(30/1220*100%); margin-top: calc(5/1220*100%); } #faq .fA__box__state::before , #faq .fA__box__state::after { width: calc(15/30*100%); padding-top: calc(3/30*100%); margin-top: calc(-1.5/30*100%); } #faq .fA__box__state::after { transition: transform 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s; transform-origin: center center; transform: rotate(-90deg); } #faq .open .fA__box__state::after { transform: rotate(0deg)} /*#faq .fA__box__ques { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #faq .fA__box__ques:hover { -webkit-transform: scale(1.05); transform: scale(1.05);}*/ } @media screen and (min-width: 1361px) { #faq .secConts { background-size: 1920px; } #faq .pageTitle { width: 136px; margin-left: -68px; } #faq .faqArea { padding-top: 142px; padding-bottom: 154px; } #faq .fA__box__text { font-size: 1.5rem; } } /* ---------------------------------------------------------------------------------------------------------------- #savedata ---------------------------------------------------------------------------------------------------------------- */ #savedata {} #savedata .secConts { background: #07191f url("../../savedata/_img/bg_sp.jpg") top center no-repeat; background-size: 100%; } #savedata .savedataArea { padding-top: calc(166/750*100%); padding-bottom: calc(155/750*100%); } #savedata .savedataArea .hl { width: 100%; margin: 0 auto; } #savedata .notesList { width: calc(500/750*100%); margin: calc(20/750*100%) auto 0; } #savedata .notesList li { font-size: 2.0vw; } #savedata .sdA__list { width: calc(615/750*100%); margin: calc(70/750*100%) auto 0; } #savedata .sdA__ls__item { margin-top: calc(60/750*100%); } #savedata .sdA__ls__item:first-child { margin-top: 0; } #savedata .sdA__ls__item.-i2 { margin-top: calc(15/750*100%); } #savedata .sdA__picList { width: 100%; } #savedata .sdA__pL__item { margin-top: calc(30/615*100%); } @media screen and (min-width: 641px) { #savedata {} #savedata .secConts { background: #07191f url("../../savedata/_img/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1360*100%); } #savedata .pageTitle { width: calc(294/1360*100%); margin-left: calc(-147/1360*100%); } #savedata .savedataArea { padding-top: calc(142/1360*100%); padding-bottom: calc(154/1360*100%); } #savedata .savedataArea .hl { width: calc(1138/1260*100%); } #savedata .notesList { width: calc(510/1260*100%); margin: calc(15/1260*100%) auto 0; } #savedata .notesList li { font-size: 1.1029vw; } #savedata .sdA__list { width: 100%; margin: calc(60/1260*100%) auto 0; } #savedata .sdA__ls__item { margin-top: calc(50/1260*100%); } #savedata .sdA__ls__item:first-child { margin-top: 0; } #savedata .sdA__ls__item.-i2 { margin-top: calc(15/1260*100%); } #savedata .sdA__picList { width: 100%; margin-top: calc(20/1260*100%); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #savedata .sdA__pL__item { width: calc(615/1260*100%); margin-top: 0; } #savedata .sdA__pL__item:nth-child(n+3) { margin-top: calc(30/1260*100%); } } @media screen and (min-width: 1361px) { #savedata .secConts { background-size: 1920px; } #savedata .pageTitle { width: 294px; margin-left: -147px; } #savedata .savedataArea { padding-top: 142px; padding-bottom: 154px; } #savedata .notesList li { font-size: 1.5rem; } } /* ---------------------------------------------------------------------------------------------------------------- #purchase ---------------------------------------------------------------------------------------------------------------- */ #purchase {} #purchase .secConts { background: #07191f url("../../purchase_guide/_img/bg_sp.jpg") top center no-repeat; background-size: 100%; } #purchase .purchaseArea { padding-top: calc(166/750*100%); padding-bottom: calc(155/750*100%); } #purchase .purchaseArea .hl { width: 100%; margin: 0 auto; } #purchase .purchaseArea .leadtext { width: 100%; margin: calc(37/750*100%) auto 0; } #purchase .pcsA__flow { width: calc(650/750*100%); margin: calc(98/750*100%) auto 0; position: relative; } #purchase .pcsA__flowBlock { display: none; opacity: 0; margin-top: calc(136/650*100%); position: relative; } #purchase .pcsA__flowBlock::before { content: ""; display: block; width: calc(160/650*100%); height: 0; padding-top: calc(35/650*100%); opacity: inherit; background: url("../../purchase_guide/_img/arrow.png") center center no-repeat; background-size: 100%; position: absolute; top: 0; left: 50%; margin-top: calc(-86/650*100%); margin-left: calc(-80/650*100%); } #purchase .pcsA__flowBlock.-fb1 { display: block; } #purchase .pcsA__flowBlock.on { display: block; opacity: 1; } #purchase .pcsA__select { display: none; opacity: 0; position: relative; } #purchase .pcsA__select.on , #purchase .pcsA__select.-s11 { display: block; opacity: 1; } #purchase .pcsA__slct__text { background: #065c83; width: calc(570/650*100%); margin: 0 auto calc(-45/650*100%); position: relative; z-index: 2; } #purchase .pcsA__slct__btnList { background: rgba(0,0,0,0.6); width: 100%; padding: calc(95/650*100%) 0 calc(60/650*100%); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #purchase .pcsA__btnL__btn { width: calc(270/650*100%); margin: 0 calc(15/650*100%); } #purchase .af .pcsA__btnL__btn:not(.on) { opacity: 0.6; } #purchase .-s21 .pcsA__btnL__btn { width: calc(180/650*100%); margin: 0 calc(8/650*100%); } #purchase .pcsA__result { display: none; opacity: 0; background: rgba(0,0,0,0.6); padding: calc(50/650*100%) 0; position: relative; } #purchase .pcsA__result.on { display: block; opacity: 1; } #purchase .pcsA__rsl__text { width: 100%; margin: 0 auto; } #purchase .pcsA__rsl__linkList { width: calc(470/650*100%); margin: calc(40/650*100%) auto 0; } #purchase .pcsA__linkL__btn { width: 100%; margin-top: calc(30/650*100%); } #purchase .pcsA__linkL__btn:first-child { margin-top: 0; } #purchase .pcsA__textLinkbtn { width: calc(570/650*100%); margin: calc(30/650*100%) auto 0; text-align: center; font-size: calc(18/750*100vw); } #purchase .pcsA__textLinkbtn a { color: #66dcff; } @media screen and (max-width: 640px) { #purchase .purchaseArea { min-height: calc(1000/750*100vw); } } @media screen and (min-width: 641px) { #purchase {} #purchase .secConts { background: #07191f url("../../purchase_guide/_img/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1360*100%); } #purchase .pageTitle { width: calc(441/1360*100%); margin-left: calc(-220/1360*100%); } #purchase .purchaseArea { padding-top: calc(142/1360*100%); padding-bottom: calc(204/1360*100%); } #purchase .purchaseArea .hl { width: calc(839/1260*100%); } #purchase .purchaseArea .leadtext { width: calc(550/1260*100%); margin: calc(28/1260*100%) auto 0; } #purchase .pcsA__flow { width: calc(1080/1260*100%); margin: calc(54/1260*100%) auto 0; } #purchase .pcsA__flowBlock { margin-top: calc(114/1080*100%); } #purchase .pcsA__flowBlock::before { width: calc(160/1080*100%); padding-top: calc(35/1080*100%); margin-top: calc(-75/1080*100%); margin-left: calc(-80/1080*100%); } #purchase .pcsA__slct__text { width: calc(800/1080*100%); margin: 0 auto calc(-25/1080*100%); } #purchase .pcsA__slct__btnList { padding: calc(65/1080*100%) 0 calc(40/1080*100%); } #purchase .pcsA__btnL__btn { width: calc(440/1080*100%); margin: 0 calc(25/1080*100%); } #purchase .-s21 .pcsA__btnL__btn { width: calc(290/1080*100%); margin: 0 calc(15/1080*100%); } #purchase .pcsA__btnL__btn , #purchase .pcsA__linkL__btn { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #purchase .pcsA__btnL__btn:hover , #purchase .pcsA__linkL__btn:hover { -webkit-transform: scale(1.08); transform: scale(1.08); opacity: 1!important; } #purchase .pcsA__result { padding: calc(30/1080*100%) 0; } #purchase .pcsA__rsl__linkList { width: 100%; margin: calc(30/1080*100%) auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #purchase .pcsA__linkL__btn { width: calc(440/1080*100%); margin: 0 calc(25/1080*100%); } #purchase .pcsA__textLinkbtn { width: calc(800/1080*100%); margin: calc(20/1080*100%) auto 0; font-size: calc(15/1360*100vw); } #purchase .pcsA__textLinkbtn a { display: inline-block; transition: transform 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s; } #purchase .pcsA__textLinkbtn a:hover { -webkit-transform: scale(1.08); transform: scale(1.08); } } @media screen and (min-width: 1361px) { #purchase .secConts { background-size: 1920px; } #purchase .pageTitle { width: 441px; margin-left: -220px; } #purchase .purchaseArea { padding-top: 142px; padding-bottom: 204px; } #purchase .pcsA__textLinkbtn { font-size: 1.5rem; } }