@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; */ .barbaWrapper > div { position: relative; } .secInner { padding-top: 1px; } /*.secInner { background-color: rgba(255,0,0,0.0); }*/ .-bascPagination { position: relative; bottom: inherit!important; margin-top: calc(20/750*100vw); } .-bascPagination .swiper-pagination-bullet { width: calc(30/750*100vw); height: 0; padding-top: calc(30/750*100vw); background-color: transparent; opacity: 1; position: relative; } .-bascPagination .swiper-pagination-bullet::before { content: ""; display: block; width: 100%; height: 100%; border: 2px solid #e9c941; position: absolute; top: 0; left: 0; border-radius: 100%; } .-bascPagination .swiper-pagination-bullet { margin: 0 calc(15/750*100vw)!important; } .-bascPagination .swiper-pagination-bullet-active { background: #e9c941; } .-baseControl {} .swiper-button-next.-baseControl, .swiper-button-prev.-baseControl { top: 0; height: 100%; margin-top: 0; } .swiper-button-next.-baseControl { right: 0; } .swiper-button-prev.-baseControl { left: 0; } .contHero { position: relative; background: rgba(0,6,46,0.5); } .contHero .cHero__visual { position: relative; filter: blur(0px); } .contHero .cHero__category { position: absolute; top: 0; right: calc(140/750*100%); margin-top: calc(37/750*100%); } .contHero .cHero__contsBlock { position: relative; } .contHero .cHero__ttl { width: 100%; } .contHero .cHero__leadtext { width: 100%; } @media screen and (min-width: 641px) { .-bascPagination { margin-top: calc(20/1920*100vw); } .-bascPagination .swiper-pagination-bullet { width: calc(15/1920*100vw); padding-top: calc(15/1920*100vw); } .-bascPagination .swiper-pagination-bullet { margin: 0 calc(7/1920*100vw)!important; } .contHero { background: none; } .contHero::before { content: ""; display: block; width: calc(1560/1920*100%); height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,6,46,0.5); } .contHero .cHero__visual { width: calc(1620/1920*100%); margin: 0 0 0 auto; } .contHero .cHero__category { top: inherit; right: calc(70/1920*100%); bottom: 0; margin-top: 0; margin-bottom: calc(28/1920*100%); } .contHero .cHero__contsBlock { width: 100%; position: absolute; top: 0; left: 0; } .contHero .cHero__ttl { } .contHero .cHero__leadtext { } } /* ---------------------------------------------------------------------------------------------------------------- #toppage ---------------------------------------------------------------------------------------------------------------- */ #toppage .main { padding-bottom: calc(325/750*100%); background: url("../../_img/footerbg_top_sp.png") bottom center no-repeat; background-size: 100%; } @media screen and (max-width: 640px) { #toppage .secNav__ttl { display: none; } } @media screen and (min-width: 641px) { #toppage .main { padding-bottom: calc(208/1920*100%); background: url("../../_img/footerbg_top_pc.png") bottom center no-repeat; background-size: 100%; } #toppage .secNavigation { opacity: 0; top: -10%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #toppage .secNavigation.on { opacity: 1; top: 0; } } #toppage .contHero { background: none; } #toppage .contHero::before { display: none; } #toppage .cHero__slideListWrap { position: absolute; top: 0; left: 0; width: 100%; } #toppage .cHero__controlBox { position: relative; width: calc(400/750*100%); margin: calc(36/750*100%) auto 0; } #toppage .heroSlider__pagination { position: relative; } #toppage .heroSlider__pagination.swiper-pagination-custom { position: relative; bottom: 0; width: 100%; 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; } #toppage .heroSlider__pagination .swiper-pagination-bullet { width: calc(10/750*100vw); height: 0; padding-top: calc(10/750*100vw); margin: 0; background: #675a95; opacity: 1; } #toppage .heroSlider__pagination .swiper-pagination-bullet-active { background: #fff; opacity: 1; } #toppage .heroSlider__pagination .swiper-pagination-bullet.on { background: #fff; } #toppage .swiper-pagination-under { width: 100%; height: 1px; position: absolute; bottom: 0; margin-bottom: calc(4/400*100%); left: 0; background: #675a95; } #toppage .swiper-pagination-lineWrap { width: 100%; height: 1px; position: absolute; bottom: 0; margin-bottom: calc(4/400*100%); left: 0; z-index: 99; } #toppage .swiper-pagination-line { width: 100%; height: 100%; background: #fff; -webkit-transition: width 100ms linear; transition: width 100ms linear; } #toppage .contHero .secInner { position: relative; padding-top: calc(2/750*100%); z-index: 2; } #toppage .cHero__catchcopy { width: calc(590/750*100%); margin-left: calc(29/750*100%); } #toppage .cHero__ttl { width: calc(519/750*100%); margin: calc(-10/750*100%) auto 0; } #toppage .cHero__store { margin-top: calc(202/750*100%); } #toppage .cHero__str__release { width: calc(310/750*100%); margin: 0 0 0 calc(399/750*100%); } #toppage .cHero__str__btnList { margin-top: calc(18/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; gap: 0 calc(15/750*100%); } #toppage .cHero__str__bL__item.-stm { width: calc(192/750*100%); } #toppage .cHero__str__bL__item.-app { width: calc(192/750*100%); } #toppage .cHero__str__bL__item.-ggl { width: calc(234/750*100%); } #toppage .cHero__floatingBnr { position: relative; width: 100%; height: 0; padding-top: calc(100/750*100%); margin: calc(75/750*100%) auto 0; } #toppage .cHero__floatingBnr .cHero__floatingBnr__btn { display: block; width: calc(650/750*100%); position: absolute; right: 50%; bottom: 0; transform: translate(50%); transition: all .4s ease; } #toppage .cHero__floatingBnr a { display: block; } #toppage .cHero__videoListWrap { width: calc(650/750*100%); margin: calc(50/750*100%) auto 0; } #toppage .videoFrame { position: relative; } #toppage .vF__frame { } #toppage .vF__thumb { } #toppage .vF__name { width: calc(530/650*100%); margin: calc(-55/650*100%) auto 0; position: relative; } #toppage .-typeSale .cHero__store { margin-top: calc(42/750*100%); } #toppage .-typeSale .cHero__str__sale { width: calc(570/750*100%); margin: calc(30/750*100%) auto 0; } #toppage .-typeSale .cHero__str__btnList { margin-top: calc(18/750*100%); } #toppage .-typeSale .cHero__videoListWrap { margin-top: calc(52/750*100%); } @media screen and (min-width: 641px) { #toppage .cHero__slideListWrap { } #toppage .cHero__controlBox { position: absolute; bottom: 0; left: 50%; width: calc(400/1920*100%); margin: 0 auto calc(20/1920*100%) calc(-200/1920*100%); } #toppage .heroSlider__pagination { } #toppage .heroSlider__pagination.swiper-pagination-custom { } #toppage .heroSlider__pagination .swiper-pagination-bullet { width: calc(10/400*100%); padding-top: calc(10/400*100%); margin: 0; background: #616262; } #toppage .heroSlider__pagination .swiper-pagination-bullet-active { background: #fff; } #toppage .heroSlider__pagination .swiper-pagination-bullet.on { background: #fff; } #toppage .swiper-pagination-under { background: #616262; margin-bottom: calc(4/400*100%); } #toppage .swiper-pagination-lineWrap { margin-bottom: calc(4/400*100%); } #toppage .contHero .secInner { padding-top: 0.1%; } #toppage .cHero__catchcopy { width: calc(1235/1920*100%); margin: 0 auto; } #toppage .cHero__ttl { width: calc(711/1920*100%); margin: calc(144/1920*100%) auto 0; } #toppage .cHero__store { margin-top: calc(212/1920*100%); padding-bottom: calc(80/1920*100%); position: relative; } #toppage .cHero__str__release { width: calc(310/1920*100%); position: absolute; left: 0; bottom: 0; margin: 0 0 calc(66/1920*100%) calc(45/1920*100%); } #toppage .cHero__str__btnList { width: calc(768/1920*100%); margin: 0 auto 0; gap: 0 calc(20/768*100%); } #toppage .cHero__str__bL__item.-stm { width: calc(227/768*100%); } #toppage .cHero__str__bL__item.-app { width: calc(227/768*100%); } #toppage .cHero__str__bL__item.-ggl { width: calc(276/768*100%); } #toppage .cHero__str__bL__item a:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } #toppage .cHero__floatingBnr { position: absolute; top: 0; right: 0; width: 100%; padding-top: calc(90/1920*100%); margin: calc(238/1920*100%) calc(60/1920*100%) 0 0; } #toppage .cHero__floatingBnr .cHero__floatingBnr__btn { width: calc(450/1920*100%); right: 0; bottom: 0; transform: translate(0%); } #toppage .cHero__videoListWrap { width: calc(450/1920*100%); position: absolute; bottom: 0; right: 0; margin: 0 calc(60/1920*100%) calc(26/1920*100%) 0; } #toppage .vF__name { width: calc(350/450*100%); margin: calc(-40/450*100%) auto 0; } #toppage .-typeSale .cHero__ttl { margin-top: calc(61/1920*100%); } #toppage .-typeSale .cHero__store { margin-top: calc(47/1920*100%); } #toppage .-typeSale .cHero__str__sale { width: calc(550/1920*100%); margin: calc(10/1920*100%) auto 0; } #toppage .-typeSale .cHero__str__btnList { margin-top: calc(20/1920*100%); } } /* .contMenu ---------------------------------------------------------------------------------------------------------------- */ #toppage .contMenu { background: rgba(0,6,46,0.9); margin-top: calc(56/750*100%); overflow: hidden; } #toppage .cMenu__menuList { width: 100%; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #toppage .cMenu__mL__item { margin: 0 calc(12/750*100%); cursor: pointer; position: relative; } #toppage .cMenu__mL__item .btn { } #toppage .cMenu__mL__item .btn div { width: 100%; display: -webkit-flex; display: flex; } #toppage .cMenu__mL__item::before { content: ""; display: block; width: 100%; height: 100%; background: #e9c941; position: absolute; left: 0; bottom: 110%; } #toppage .cMenu__mL__item.current::before { height: 8px; bottom: 0%; } #toppage .cMenu__mL__item.-gnb0 { width: calc(68/750*100%); } #toppage .cMenu__mL__item.-gnb1 { width: calc(210/750*100%); } #toppage .cMenu__mL__item.-gnb2 { width: calc(140/750*100%); } #toppage .cMenu__mL__item.-gnb3 { width: calc(74/750*100%); } #toppage .cMenu__mL__item.-gnb4 { width: calc(58/750*100%); } @media screen and (min-width: 641px) { #toppage .contMenu { margin-top: 0; } #toppage .cMenu__mL__item { margin: 0 calc(25/1920*100%); } #toppage .cMenu__mL__item .btn { position: relative; } #toppage .cMenu__mL__item:hover:not(.current)::before { animation: gnavAnime 400ms ease-in-out forwards; } #toppage .cMenu__mL__item.-gnb0 { width: calc(55/1920*100%); } #toppage .cMenu__mL__item.-gnb1 { width: calc(175/1920*100%); } #toppage .cMenu__mL__item.-gnb2 { width: calc(118/1920*100%); } #toppage .cMenu__mL__item.-gnb3 { width: calc(62/1920*100%); } #toppage .cMenu__mL__item.-gnb4 { width: calc(48/1920*100%); } } /* .contStoryWorld ---------------------------------------------------------------------------------------------------------------- */ #toppage .contStoryWorld { padding-top: calc(50/750*100%); } #toppage .cSW__visualList {} #toppage .cSW__vL__item img { position: relative; } #toppage .cSW__vL__item.-i2 { width: calc(500/750*100%); margin-top: calc(-90/750*100%); } #toppage .cSW__vL__item.-i3 { width: calc(600/750*100%); margin-top: calc(-25/750*100%); margin-left: calc(150/750*100%); position: relative; } #toppage .cSW__vL__item.-i3::before { content: ""; display: block; width: calc(650/600*100%); height: calc(350/325*100%); position: absolute; left: 0; bottom: 0; background: rgba(0,6,46,0.6); margin-left: calc(-50/600*100%); margin-bottom: calc(-50/600*100%); } #toppage .cSW__contsBlock { width: calc(650/750*100%); margin: calc(-18/750*100%) auto 0; position: relative; } #toppage .cSW__cB__category { width: calc(232/650*100%); } #toppage .cSW__cB__hd { width: calc(690/650*100%); margin-top: calc(-9/650*100%); margin-left: calc(-20/650*100%); } #toppage .cSW__cB__subhd { width: calc(690/650*100%); margin-top: calc(-18/650*100%); margin-left: calc(-20/650*100%); } #toppage .cSW__cB__text { width: calc(655/650*100%); margin-top: calc(26/650*100%); margin-left: calc(-2/650*100%); } #toppage .cSW__cB__btn { width: calc(525/650*100%); margin-top: calc(34/650*100%); } #toppage .cSW__cB__btn a { display: block; background: #fff; } @media screen and (min-width: 641px) { #toppage .contStoryWorld { padding-top: calc(24/1920*100%); padding-bottom: calc(50/1920*100%); } #toppage .cSW__visualList { position: relative; } #toppage .cSW__vL__item.-i1 { width: calc(1710/1920*100%); margin: 0 0 0 auto; } #toppage .cSW__vL__item.-i2 { width: calc(610/1920*100%); margin-top: calc(-150/1920*100%); } #toppage .cSW__vL__item.-i3 { width: calc(1160/1920*100%); margin-top: calc(550/1920*100%); margin-left: auto; position: absolute; top: 0; right: 0; } #toppage .cSW__vL__item.-i3::before { width: calc(1100/1160*100%); height: calc(700/650*100%); margin-left: calc(-50/1160*100%); margin-bottom: calc(-100/1160*100%); } #toppage .cSW__contsBlock { width: calc(900/1920*100%); margin: calc(-56/1920*100%) 0 0 calc(110/1920*100%); } #toppage .cSW__cB__category { width: calc(232/900*100%); } #toppage .cSW__cB__hd { width: calc(866/900*100%); margin-top: calc(-9/900*100%); margin-left: calc(-20/900*100%); } #toppage .cSW__cB__subhd { width: calc(893/900*100%); margin-top: calc(-18/900*100%); margin-left: calc(-20/900*100%); } #toppage .cSW__cB__text { width: calc(680/900*100%); margin-top: calc(13/900*100%); margin-left: calc(-3/900*100%); } #toppage .cSW__cB__btn { width: calc(350/900*100%); margin-top: calc(23/900*100%); } #toppage .cSW__cB__btn a { background: #fff; } #toppage .cSW__cB__btn a:hover { background: #e9c941; } } /* .contCharacter ---------------------------------------------------------------------------------------------------------------- */ #toppage .contCharacter { padding-top: calc(150/750*100%); } #toppage .cChara__visual { position: relative; } #toppage .cChara__visual img { position: relative; } #toppage .cChara__visual::before { content: ""; display: block; width: calc(700/750*100%); height: 100%; position: absolute; top: 0; right: 0; background: rgba(36,151,217,0.5); margin-top: calc(-50/750*100%); } #toppage .cChara__blocks { position: relative; } #toppage .cChara__blks__block {} #toppage .cChara__block__summary { width: calc(700/750*100%); background: rgba(0,0,0,0.8); padding-top: calc(9/750*100%); } #toppage .cChara__summary__category { width: calc(154/700*100%); margin-top: calc(-18/700*100%); margin-left: calc(50/700*100%); } #toppage .cChara__summary__hd { } #toppage .cChara__summary__text { width: calc(650/700*100%); margin-left: calc(50/700*100%); } #toppage .cChara__block__pic { width: 100%; position: relative; } #toppage .cChara__pic__item {} #toppage .-block1 .cChara__block__summary { margin-top: calc(-50/750*100%); padding-bottom: calc(60/750*100%); } #toppage .-block1 .cChara__summary__hd { width: calc(133/700*100%); margin-top: calc(10/700*100%); margin-left: calc(49/700*100%); } #toppage .-block1 .cChara__summary__text { margin-top: calc(16/700*100%); } #toppage .-block1 .cChara__block__pic { background: url("../../_img/character/chara01_bg_sp.jpg") center calc(175/(511 - 200)*100%) no-repeat; background-size: 100%; } /*#toppage .-block1 .cChara__block__pic { background: url("../../_img/character/chara01_bg.jpg") center 56.27% no-repeat; background-size: 100%; }*/ #toppage .-block1 .cChara__pic__item { } #toppage .-block1 .cChara__pic__item.-i1 { width: calc(367/750*100%); margin-left: calc(21/750*100%); padding-top: calc(12/750*100%); } #toppage .-block1 .cChara__pic__item.-i2 { width: calc(328/750*100%); margin-top: calc(-61/750*100%); margin-right: calc(21/750*100%); position: absolute; top: 0; right: 0; } #toppage .cChara__blks__block.-block2 { margin-top: calc(39/750*100%); position: relative; } #toppage .cChara__blks__block.-block2::before { content: ""; display: block; width: calc(700/750*100%); height: 0; padding-top: calc(800/750*100%); background: rgba(22,132,17,0.5); position: absolute; top: 0; right: 0; margin-top: calc(50/750*100%); } #toppage .-block2 .cChara__block__summary { padding-bottom: calc(54/750*100%); position: relative; } #toppage .-block2 .cChara__summary__hd { width: calc(430/700*100%); margin-top: calc(16/700*100%); margin-left: calc(49/700*100%); } #toppage .-block2 .cChara__summary__text { margin-top: calc(20/700*100%); } #toppage .-block2 .cChara__block__pic { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: start; justify-content: flex-start; } #toppage .-block2 .cChara__pic__item.-i1{ order: 2; width: calc(270/750*100%); z-index: 1; margin-top: calc(-27/750*100%); margin-left: calc(-24/750*100%); } #toppage .-block2 .cChara__pic__item.-i2{ order: 1; width: calc(271/750*100%); z-index: 2; margin-top: calc(27/750*100%); margin-left: calc(31/750*100%); } #toppage .-block2 .cChara__pic__item.-i3{ order: 3; width: calc(183/750*100%); z-index: 3; margin-top: calc(90/750*100%); margin-left: calc(-29/750*100%); } #toppage .cChara__btn { width: calc(525/750*100%); margin-top: calc(30/750*100%); margin-left: calc(50/750*100%); } #toppage .cChara__btn a { display: block; background: #fff; } @media screen and (min-width: 641px) { #toppage .contCharacter { padding-top: calc(100/1920*100%); padding-bottom: calc(45/1920*100%); } #toppage .cChara__visual { width: calc(1710/1920*100%); } #toppage .cChara__visual::before { width: 100%; height: calc(575/650*100%); top: 0; right: calc(-210/1710*100%); margin-top: calc(-50/1710*100%); } #toppage .cChara__blocks { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: start; justify-content: flex-start; } #toppage .cChara__blks__block { width: calc(960/1920*100%); position: relative; } #toppage .cChara__block__summary { background: rgba(0,0,0,1); } #toppage .cChara__summary__category { } #toppage .cChara__summary__hd { } #toppage .cChara__summary__text { } #toppage .cChara__block__pic { } #toppage .cChara__pic__item {} #toppage .cChara__blks__block.-block1 { } #toppage .-block1 .cChara__block__summary { width: calc(750/960*100%); margin: calc(-50/960*100%) 0 0 auto; padding-top: calc(9/960*100%); padding-bottom: calc(57/960*100%); } #toppage .-block1 .cChara__summary__category { width: calc(154/750*100%); margin-top: calc(-18/750*100%); margin-left: calc(50/750*100%); } #toppage .-block1 .cChara__summary__hd { width: calc(133/750*100%); margin-top: calc(13/750*100%); margin-left: calc(49/750*100%); } #toppage .-block1 .cChara__summary__text { width: calc(650/750*100%); margin-top: calc(17/750*100%); margin-left: calc(49/750*100%); } #toppage .-block1 .cChara__block__pic { background: url("../../_img/character/chara01_bg_pc.jpg") center calc(198/(530 - 200)*100%) no-repeat; background-size: 100%; } #toppage .-block1 .cChara__pic__item { } #toppage .-block1 .cChara__pic__item.-i1 { width: calc(367/960*100%); margin-left: calc(205/960*100%); padding-top: calc(31/960*100%); } #toppage .-block1 .cChara__pic__item.-i2 { width: calc(328/960*100%); margin-top: calc(-42/960*100%); margin-right: calc(47/960*100%); } #toppage .cChara__blks__block.-block2 { margin-top: calc(100/1920*100%); } #toppage .cChara__blks__block.-block2::before { width: 100%; padding-top: calc(450/960*100%); margin-top: calc(0/750*100%); } #toppage .-block2 .cChara__block__summary { width: calc(900/960*100%); margin: calc(190/960*100%) auto 0 0; padding-top: calc(9/960*100%); padding-bottom: calc(52/960*100%); position: relative; z-index: 5; } #toppage .-block2 .cChara__summary__category { width: calc(154/900*100%); margin-top: calc(-18/900*100%); margin-left: calc(50/900*100%); } #toppage .-block2 .cChara__summary__hd { width: calc(800/900*100%); margin-top: calc(16/900*100%); margin-left: calc(49/900*100%); } #toppage .-block2 .cChara__summary__text { width: calc(800/900*100%); margin-top: calc(27/900*100%); margin-left: calc(49/900*100%); } #toppage .-block2 .cChara__block__pic { position: absolute; top: 0; left: 0; width: 100%; z-index: 4; } #toppage .-block2 .cChara__pic__item.-i1{ order: 2; width: calc(270/960*100%); z-index: 1; margin-top: calc(-270/960*100%); margin-left: calc(-24/960*100%); } #toppage .-block2 .cChara__pic__item.-i2{ order: 1; width: calc(271/960*100%); z-index: 2; margin-top: calc(-215/960*100%); margin-left: calc(131/960*100%); } #toppage .-block2 .cChara__pic__item.-i3{ order: 3; width: calc(183/960*100%); z-index: 3; margin-top: calc(-152/960*100%); margin-left: calc(-29/960*100%); } #toppage .cChara__btn { width: calc(350/1920*100%); margin: 0 calc(110/1920*100%) calc(150/1920*100%) auto; position: absolute; right: 0; bottom: 0; } #toppage .cChara__btn a:hover { background: #e9c941; } } /* .contHowToPlay ---------------------------------------------------------------------------------------------------------------- */ #toppage .contHowToPlay { padding-top: calc(150/750*100%); padding-bottom: calc(425/750*100%); } #toppage .cHtP__visualList { position: relative; } #toppage .cHtP__visualList img { position: relative; } #toppage .cHtP__vL__item { position: absolute; top: 0; } #toppage .cHtP__vL__item.-i1 { position: relative; } #toppage .cHtP__vL__item.-i1::before { content: ""; display: block; width: calc(700/750*100%); height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5); margin-top: calc(-50/750*100%); } #toppage .cHtP__vL__item.-i2 { margin-top: calc(350/750*100%); } #toppage .cHtP__vL__item.-i3 { width: calc(400/750*100%); margin-top: calc(892/750*100%); left: 0; } #toppage .cHtP__vL__item.-i4 { width: calc(400/750*100%); margin-top: calc(849/750*100%); right: 0; } #toppage .cHtP__vL__item.-i3::before, #toppage .cHtP__vL__item.-i4::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: calc(50/400*100%); background: rgba(0,0,0,0.3); margin-bottom: calc(-50/400*100%); } #toppage .cHtP__vL__item.-i4::before { margin-bottom: calc(-43/400*100%); } #toppage .cHtP__contsBlock { width: 100%; margin: 0 auto 0; background: rgba(0,0,0,0.8); margin-top: calc(50/750*100%); padding-top: calc(12/750*100%); padding-bottom: calc(50/750*100%); position: relative; } #toppage .cHtP__cB__category { width: calc(76/750*100%); margin-top: calc(-24/750*100%); margin-left: calc(50/750*100%); } #toppage .cHtP__cB__hd { width: calc(490/750*100%); margin-top: calc(14/750*100%); margin-left: calc(50/750*100%); } #toppage .cHtP__cB__text { width: calc(653/750*100%); margin-top: calc(20/750*100%); margin-left: calc(49/750*100%); } #toppage .cHtP__btn { width: calc(525/750*100%); margin-bottom: calc(-55/750*100%); position: absolute; left: calc(50/750*100%); bottom: 0; } #toppage .cHtP__btn a { display: block; background: #fff; } @media screen and (min-width: 641px) { #toppage .contHowToPlay { padding-top: calc(50/1920*100%); padding-bottom: calc(150/1920*100%); } #toppage .cHtP__visualList { position: relative; } #toppage .cHtP__vL__item.-i1 { width: calc(1710/1920*100%); margin: 0 0 0 auto; } #toppage .cHtP__vL__item.-i1::before { width: calc(1860/1710*100%); height: calc(500/650*100%); left: calc(-210/1710*100%); margin-top: calc(-50/1710*100%); } #toppage .cHtP__vL__item.-i2 { width: calc(1060/1920*100%); margin-top: calc(550/1920*100%); } #toppage .cHtP__vL__item.-i3 { width: calc(625/1920*100%); margin-top: calc(600/1920*100%); left: calc(760/1920*100%); } #toppage .cHtP__vL__item.-i4 { width: calc(625/1920*100%); margin-top: calc(500/1920*100%); right: 0; } #toppage .cHtP__vL__item.-i3::before { left: inherit; right: calc(-50/625*100%); margin-bottom: calc(-50/625*100%); } #toppage .cHtP__vL__item.-i4::before { left: calc(-60/625*100%); margin-bottom: calc(50/625*100%); } #toppage .cHtP__contsBlock { width: calc(800/1920*100%); margin: 0 auto 0 calc(60/1920*100%); padding-top: calc(12/1920*100%); padding-bottom: calc(77/1920*100%); } #toppage .cHtP__cB__category { width: calc(76/800*100%); margin-top: calc(-24/800*100%); margin-left: calc(50/800*100%); } #toppage .cHtP__cB__hd { width: calc(490/800*100%); margin-top: calc(11/800*100%); margin-left: calc(50/800*100%); } #toppage .cHtP__cB__text { width: calc(704/800*100%); margin-top: calc(17/800*100%); margin-left: calc(49/800*100%); } #toppage .cHtP__btn { width: calc(350/800*100%); margin-bottom: calc(-25/800*100%); left: calc(50/800*100%); } #toppage .cHtP__btn a:hover { background: #e9c941; } } /* .contSpec ---------------------------------------------------------------------------------------------------------------- */ #toppage .contSpec { padding-top: calc(100/750*100%); } #toppage .cSpec__block { width: calc(650/750*100%); margin: 0 auto; } #toppage .cSpec__title { width: 100%; margin: 0 auto; } #toppage .cSpec__line { width: calc(650/750*100%); margin: calc(40/750*100%) auto; border: none; height: 1px; background-color: #4898b6; } #toppage .cSpec__storeList { width: 100%; margin: calc(22/650*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #toppage .cSpec__strL__item { margin: 0 calc(15/650*100%); } #toppage .cSpec__strL__item.-app { width: calc(196/650*100%); } #toppage .cSpec__strL__item.-ggl { width: calc(242/650*100%); } #toppage .cSpec__strL__item.-stm { width: calc(197/650*100%); } #toppage .cSpec__strL__item span { display: block; text-align: center; margin-top: 0.5em; font-size: calc(20/750*100vw); letter-spacing: -0.05em;} #toppage .cSpec__specList { width: calc(650/750*100%); margin: calc(30/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; } #toppage .cSpec__sL__item { 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 .cSpec__sL__item__name { background: #e9c941; width: calc(110/750*100vw); margin-right: calc(10/750*100vw); flex-shrink: 0; } #toppage .cSpec__sL__item__conts { width: auto; font-size: calc(22/750*100vw); line-height: 1.41; } #toppage .cSpec__sL__item a { color: #fff; } #toppage .--steam .cSpec__sL__item.-i6 { -webkit-flex-wrap: wrap; flex-wrap: wrap; } #toppage .--steam .cSpec__sL__item.-i6 .cSpec__sL__item__contsSub { width: 100%; margin-top: calc(20/650*100%); font-size: calc(20/750*100vw); } #toppage .--steam .cSpec__sL__item.-i6 .cSpec__sL__item__contsSub ul li { text-indent: -1em; padding-left: 1em; margin-bottom: 0.5em; line-height: 1.41; } #toppage .--steam .cSpec__sL__item.-i6 .cSpec__sL__item__contsSub ul li span { color: #e9c941; } #toppage .cSpec__staff { width: calc(650/750*100%); margin: 0 auto; font-size: calc(22/750*100vw); line-height: 1.61; } #toppage .cSpec__btnList { background: rgba(0,6,46,0.5); margin: calc(50/650*100%) auto 0; padding-top: calc(50/750*100%); padding-bottom: calc(50/750*100%); } #toppage .cSpec__btnL__item { width: calc(560/750*100%); margin: 0 auto calc(30/650*100%); } #toppage .cSpec__btnL__item:last-child { margin-bottom: 0; } #toppage .cSpec__btnL__item a { display: block; background: #fff; } #toppage .cSpec__bnrList { background: rgba(0,6,46,0.5); margin: 0 auto; padding-bottom: calc(50/750*100%); } #toppage .cSpec__bnrL__item { width: calc(560/750*100%); margin: 0 auto calc(30/650*100%); } #toppage .cSpec__bnrL__item:last-child { margin-bottom: 0; } @media screen and (max-width: 640px) { #toppage .cSpec__storeList { background: rgba(15,3,60,0.5); padding: calc(25/650*100%) 0; } #toppage .cSpec__sL__item { width: 100%; } /* #toppage .--smp .cSpec__sL__item.-i1, #toppage .--smp .cSpec__sL__item.-i3 { width: calc(300/650*100%); } #toppage .--smp .cSpec__sL__item.-i1 .cSpec__sL__item__conts, #toppage .--smp .cSpec__sL__item.-i3 .cSpec__sL__item__conts { width: calc(180/300*100%); } #toppage .--smp .cSpec__sL__item.-i2, #toppage .--smp .cSpec__sL__item.-i4 { width: calc(350/650*100%); } #toppage .--smp .cSpec__sL__item.-i2 .cSpec__sL__item__conts, #toppage .--smp .cSpec__sL__item.-i4 .cSpec__sL__item__conts { width: calc(230/350*100%); } #toppage .--smp .cSpec__sL__item.-i5 { width: 100%; margin-bottom: 0; } #toppage .--steam .cSpec__sL__item { width: 100%; } #toppage .--steam .cSpec__sL__item .cSpec__sL__item__conts { width: calc(520/650*100%); } */ } @media screen and (min-width: 641px) { #toppage .contSpec { padding-top: calc(100/1920*100%); } #toppage .cSpec__block { width: calc(1266/1920*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; } #toppage .cSpec__title { width: calc(740/1266*100%); margin: 0; } #toppage .cSpec__line { width: calc(1266/1920*100%); margin: calc(35/1920*100%) auto; } #toppage .cSpec__storeList { width: calc(460/1266*100%); margin:0; -webkit-justify-content: end; justify-content: flex-end; } #toppage .cSpec__strL__item { margin: 0; } #toppage .cSpec__strL__item.-app { width: calc(196/460*100%); margin-right: auto; } #toppage .cSpec__strL__item.-ggl { width: calc(242/460*100%); margin-left: auto; } #toppage .cSpec__strL__item.-stm { width: calc(196/460*100%); margin-left: auto; } #toppage .cSpec__strL__item span { font-size: calc(16/1920*100vw); } #toppage .cSpec__strL__item a:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } #toppage .cSpec__specList { width: calc(1266/1920*100%); margin: calc(30/1920*100%) auto 0; -webkit-justify-content: start; justify-content: flex-start; } #toppage .cSpec__sL__item { margin-bottom: calc(15/1266*100%); align-items: flex-start; } #toppage .cSpec__sL__item__name { width: calc(100/1920*100vw); min-width: calc(100/1920*100vw); margin-right: calc(10/1920*100vw); } #toppage .cSpec__sL__item__name img { display: block; vertical-align: baseline; } #toppage .cSpec__sL__item__conts { width: auto; font-size: 0.9375vw; padding-right: 2em; } /* #toppage .--smp .cSpec__sL__item.-i1 { width: calc(286/1266*100%); } #toppage .--smp .cSpec__sL__item.-i2 { width: calc(300/1266*100%); } #toppage .--smp .cSpec__sL__item.-i3 { width: calc(175/1266*100%); } #toppage .--smp .cSpec__sL__item.-i4 { width: calc(225/1266*100%); } #toppage .--smp .cSpec__sL__item.-i1 .cSpec__sL__item__conts { width: calc(176/286*100%); } #toppage .--smp .cSpec__sL__item.-i2 .cSpec__sL__item__conts { width: calc(190/300*100%); } #toppage .--smp .cSpec__sL__item.-i3 .cSpec__sL__item__conts { width: calc(65/175*100%); } #toppage .--smp .cSpec__sL__item.-i4 .cSpec__sL__item__conts { width: calc(115/225*100%); } */ /* #toppage .cSpec__sL__item.-i5, #toppage .cSpec__sL__item.-i6, #toppage .cSpec__sL__item.-i7 { width: 100%; } #toppage .-i5 .cSpec__sL__item__conts { width: calc(1150/1266*100%); } #toppage .-i6 .cSpec__sL__item__conts { width: calc(1150/1266*100%); } #toppage .cSpec__sL__item.-i7 { margin-bottom: 0; } #toppage .-i7 .cSpec__sL__item__conts { font-size: 0.7291vw; } */ #toppage .cSpec__sL__item.-i1 { order: 1; } #toppage .cSpec__sL__item.-i2 { order: 2; } #toppage .cSpec__sL__item.-i3 { order: 3; } #toppage .cSpec__sL__item.-i4 { order: 5; } #toppage .cSpec__sL__item.-i4 .cSpec__sL__item__conts { padding-right: 0; } #toppage .cSpec__sL__item.-i5 { order: 4; } #toppage .cSpec__sL__item.-i5 .cSpec__sL__item__conts { padding-right: 0; } #toppage .cSpec__sL__item.-i6 { order: 6; } #toppage .--steam .cSpec__sL__item.-i6 .cSpec__sL__item__contsSub { width: calc(1156/1266*100%); margin-top: 0.5em; font-size: calc(16/1920*100vw); margin-left: calc(110/1920*100vw); } #toppage .--steam .cSpec__sL__item.-i6 .cSpec__sL__item__contsSub ul li { margin-bottom: 0.5em; line-height: 1.21; } #toppage .--steam .cSpec__sL__item.-i6 .cSpec__sL__item__contsSub ul li span { color: #e9c941; } #toppage .cSpec__sL__item.-i7 { order: 7; } #toppage .cSpec__sL__item.-i8 { order: 8; } #toppage .--smp .cSpec__sL__item.-i4 { margin-bottom: 0; } #toppage .--steam .cSpec__sL__item.-i6 { width: 100%; } #toppage .cSpec__staff { width: calc(1266/1920*100%); font-size: calc(14/1920*100vw); } #toppage .cSpec__btnList { width: calc(1266/1920*100%); background: none; margin: calc(23/1920*100%) auto 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: start; justify-content: flex-start; } #toppage .cSpec__btnL__item { width: calc(400/1266*100%); margin: 0 calc(34/1266*100%) 0 0; } #toppage .cSpec__btnL__item:last-child { margin-right: 0; } #toppage .cSpec__btnL__item a:hover { background: #e9c941; } #toppage .cSpec__bnrList { width: calc(1266/1920*100%); background: none; margin: calc(40/1920*100%) auto 0; padding-bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } #toppage .cSpec__bnrL__item { width: calc(400/1266*100%); margin: 0; } } /* .floatingBnr ---------------------------------------------------------------------------------------------------------------- */ #toppage .floatingBnr { position: absolute; width: 100%; right: 0%; bottom: calc(180/750*100vw); } #toppage .floatingBnr .floatingBnr__btn { display: block; width: calc(650/750*100%); margin: auto; position: absolute; right: 50vw; bottom: calc(20/750*100vw); margin-right: calc(-325/750*100vw); } #toppage .floatingBnr a { display: block; } #toppage .floatingBnr .floatingBnr__btn.fixed { position: fixed; z-index: 100; } @media screen and (min-width: 641px) { #toppage .floatingBnr { bottom: calc(20/1920*100vw); } #toppage .floatingBnr .floatingBnr__btn { width: calc(450/1920*100vw); right: 0; bottom: calc(60/1920*100vw); margin-right: calc(60/1920*100vw); } } /* ---------------------------------------------------------------------------------------------------------------- #storyworld ---------------------------------------------------------------------------------------------------------------- */ #storyworld .contHero { padding-bottom: calc(27/750*100%); } #storyworld .cHero__category { width: calc(352/750*100%); } #storyworld .cHero__contsBlock { } #storyworld .cHero__ttl { margin-top: calc(-54/750*100%); } #storyworld .cHero__leadtext { margin-top: calc(-17/750*100%); } #storyworld .contStory { padding-top: calc(100/750*100%); } #storyworld .cStory__picSliderWrap { } #storyworld .cStory__controlBox { position: absolute; left: 0; bottom: 0; width: 100%; } #storyworld .picSlider__pagination, #storyworld .picSlider__button--next, #storyworld .picSlider__button--prev { top: inherit; bottom: 0; width: calc(50/750*100%); height: 0; padding-top: calc(50/750*100%); margin-top: 0; background-size: calc(46/50*100%); background-color: #000; } #storyworld .picSlider__pagination span { position: absolute; } #storyworld .picSlider__pagination span { width: 50%; height: 50%; margin: 5%; position: absolute; vertical-align: bottom; display: flex; flex-direction: column; justify-content: center; font-size: 2.2vw; } #storyworld .picSlider__pagination .swiper-pagination-current { top: 1px; left: 0;} #storyworld .picSlider__pagination .swiper-pagination-total { bottom: 1px; right: 0;} #storyworld .picSlider__pagination::before, #storyworld .picSlider__button--next::after, #storyworld .picSlider__button--prev::after { content: ""; display: block; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #838383; position: absolute; top: 1px; left: 1px; } #storyworld .picSlider__pagination { background-image: url("../../storyworld/_img/index/story/no.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; } #storyworld .picSlider__button--prev { background-image: url("../../storyworld/_img/index/story/btn_prev.png"); left: calc(50/750*100%); } #storyworld .picSlider__button--next { background-image: url("../../storyworld/_img/index/story/btn_next.png"); right: auto; left: calc(100/750*100%); } #storyworld .cStory__contsBlock { width: calc(700/750*100%); background: rgba(0,6,46,0.5); padding-top: calc(37/750*100%); padding-bottom: calc(97/750*100%); } #storyworld .cStory__heading { width: calc(340/700*100%); margin-left: calc(29/700*100%); } #storyworld .cStory__text { width: 100%; margin-top: calc(9/700*100%); } #storyworld .contWorld { padding-top: calc(100/750*100%); } #storyworld .cWorld__visual { width: 100%; position: absolute; top: 0; left: 0; margin-top: calc(100/750*100%); } #storyworld .cWorld__contsBlock { width: 100%; position: relative; padding-top: 0.1%; } #storyworld .cWorld__heading { width: calc(590/750*100%); margin-top: calc(-38/750*100%); margin-left: calc(32/700*100%); } #storyworld .cWorld__list { width: calc(650/750*100%); margin: calc(212/750*100%) auto 0; } #storyworld .cWorld__list__item { background: rgba(0,0,0,0.6); margin-top: calc(25/650*100%); } #storyworld .cWorld__list__item:first-child { margin-top: 0; } #storyworld .cWorld__list__item dt { padding: calc(25/650*100%) 0; } #storyworld .cWorld__list__item dt img { width: calc(340/650*100%); margin-left: calc(30/650*100%); } #storyworld .cWorld__list__item .cWorld__list__btn { padding: calc(45/650*100%) 0 calc(50/650*100%); } #storyworld .cWorld__list__item .cWorld__list__btn a { display: block; width: calc(550/650*100%); margin: 0 auto; background: #fff; } @media screen and (min-width: 641px) { #storyworld .contHero { padding-bottom: calc(50/1920*100%); } #storyworld .cHero__category { width: calc(709/1920*100%); } #storyworld .cHero__contsBlock { } #storyworld .cHero__ttl { width: calc(658/1920*100%); margin-top: calc(510/1920*100%); margin-left: calc(141/1920*100%); } #storyworld .cHero__leadtext { width: calc(692/1920*100%); margin-top: calc(-4/1920*100%); margin-left: calc(140/1920*100%); } #storyworld .contStory { padding-top: calc(100/1920*100%); } #storyworld .cStory__picSliderWrap { width: calc(1260/1920*100%); position: absolute; top: 0; right: 0; margin-top: calc(100/1920*100%); } #storyworld .cStory__controlBox { } #storyworld .picSlider__pagination, #storyworld .picSlider__button--next, #storyworld .picSlider__button--prev { width: calc(50/1260*100%); padding-top: calc(50/1260*100%); } #storyworld .picSlider__pagination span { font-size: 0.8vw; } #storyworld .picSlider__button--prev { background-image: url("../../storyworld/_img/index/story/btn_prev.png"),url("../../storyworld/_img/index/story/btn_prev_ov.png"); left: calc(50/1260*100%); } #storyworld .picSlider__button--next { background-image: url("../../storyworld/_img/index/story/btn_next.png"),url("../../storyworld/_img/index/story/btn_next_ov.png"); right: auto; left: calc(100/1260*100%); } #storyworld .picSlider__button--prev:hover, #storyworld .picSlider__button--next:hover { background-color: #fff; background-position: 400%, 0%; } #storyworld .cStory__contsBlock { width: calc(810/1920*100%); padding-top: calc(50/1920*100%); padding-bottom: calc(61/1920*100%); margin-top: calc(50/1920*100%); } #storyworld .cStory__heading { width: calc(340/810*100%); margin-top: calc(-90/810*100%); margin-left: calc(138/810*100%); } #storyworld .cStory__text { width: calc(450/810*100%); margin-top: calc(17/810*100%); margin-left: calc(156/810*100%); } #storyworld .contWorld { padding-top: calc(150/1920*100%); } #storyworld .cWorld__visual { margin-top: calc(150/1920*100%); } #storyworld .cWorld__contsBlock { } #storyworld .cWorld__heading { width: calc(1078/1920*100%); margin-top: calc(-38/1920*100%); margin-left: calc(135/1920*100%); } #storyworld .cWorld__list { width: calc(1300/1920*100%); margin: calc(475/1920*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #storyworld .cWorld__list__item { width: calc(400/1300*100%); margin-top: 0; } #storyworld .cWorld__list__item dt { padding: calc(25/400*100%) 0; } #storyworld .cWorld__list__item dt img { width: calc(340/400*100%); margin-left: calc(30/400*100%); } #storyworld .cWorld__list__item .cWorld__list__btn { padding: calc(45/400*100%) 0 calc(30/400*100%); } #storyworld .cWorld__list__item .cWorld__list__btn a { width: calc(300/400*100%); } #storyworld .cWorld__list__item .cWorld__list__btn a:hover { background: #e9c941; } } /* ---------------------------------------------------------------------------------------------------------------- #world1, #world2, #world3 ---------------------------------------------------------------------------------------------------------------- */ #worldMenu.contMenu { width: calc(550/750*100%); margin: calc(101/750*100%) auto 0; } #worldMenu .cMenu__heading { width: calc(152/550*100%); margin: 0 auto; } #worldMenu .cMenu__list { margin: calc(40/550*100%) auto 0; } #worldMenu .cMenu__list__item .btn { display: block; position: relative; } #worldMenu .cMenu__list__item .btn::after { content: ""; display: block; width: calc(363/550*100%); height: calc(100% - 2px); border: 1px solid #e9c941; position: absolute; top: 1px; right: 1px; opacity: 0; } #worldMenu .cMenu__list__item.current .btn::after { opacity: 1; } @media screen and (max-width: 640px) { #worldMenu .cMenu__list__item:nth-child(n+2) { margin: calc(28/550*100%) auto 0; } } @media screen and (min-width: 641px) { #worldMenu.contMenu { width: calc(1400/1920*100%); margin: calc(101/1920*100%) auto 0; } #worldMenu .cMenu__heading { width: calc(152/1400*100%); } #worldMenu .cMenu__list { margin: calc(40/1400*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #worldMenu .cMenu__list__item { width: calc(450/1400*100%); } #worldMenu .cMenu__list__item 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: block; position: relative; overflow: hidden; } #worldMenu .cMenu__list__item:not(.current) a:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } #worldMenu .cMenu__list__item .btn::after { -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; } #worldMenu .cMenu__list__item:not(.current):hover .btn::after { opacity: 1; } } /* ---------------------------------------------------------------------------------------------------------------- #world1 ---------------------------------------------------------------------------------------------------------------- */ #world1 .contHero { padding-bottom: calc(28/750*100%); } #world1 .cHero__category { width: calc(155/750*100%); } #world1 .cHero__contsBlock { } #world1 .cHero__ttl { margin-top: calc(-77/750*100%); } #world1 .cHero__leadtext { margin-top: calc(-15/750*100%); } #world1 .contWorldDesc { padding-top: calc(100/750*100%); } #world1 .cWorldDesc__pic { } #world1 .cWorldDesc__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); padding-top: calc(30/750*100%); padding-bottom: calc(139/750*100%); position: relative; } #world1 .cWorldDesc__heading { width: calc(355/700*100%); margin-left: calc(31/700*100%); } #world1 .cWorldDesc__copy { width: calc(600/700*100%); margin-top: calc(11/700*100%); margin-left: calc(51/700*100%); } #world1 .cWorldDesc__pic2 { width: calc(600/700*100%); margin-top: calc(50/700*100%); margin-left: calc(50/700*100%); } #world1 .cWorldDesc__text { width: calc(600/700*100%); margin-top: calc(20/700*100%); margin-left: calc(50/700*100%); } #world1 .cWorldDesc__mons { position: absolute; right: 0; } #world1 .cWorldDesc__mons.-mons1 { width: calc(256/700*100%); top: 0; margin-top: calc(-50/700*100%); margin-right: calc(-43/700*100%); } #world1 .cWorldDesc__mons.-mons2 { width: calc(364/700*100%); bottom: 0; margin-bottom: calc(38/700*100%); margin-right: calc(-34/700*100%); } @media screen and (min-width: 641px) { #world1 .contHero { padding-bottom: calc(50/1920*100%); } #world1 .cHero__category { width: calc(313/1920*100%); } #world1 .cHero__contsBlock { } #world1 .cHero__ttl { width: calc(312/1920*100%); margin-top: calc(487/1920*100%); margin-left: calc(137/1920*100%); } #world1 .cHero__leadtext { width: calc(527/1920*100%); margin-top: calc(-2/1920*100%); margin-left: calc(139/1920*100%); } #world1 .contWorldDesc { padding-top: calc(150/1920*100%); } #world1 .cWorldDesc__pic { width: calc(1060/1920*100%); position: absolute; top: 0; right: 0; margin-top: calc(100/1920*100%); z-index: 10; } #world1 .cWorldDesc__contsBlock { width: calc(1760/1920*100%); padding-top: calc(32/1920*100%); padding-bottom: calc(93/1920*100%); } #world1 .cWorldDesc__heading { width: calc(355/1760*100%); margin-left: calc(141/1760*100%); } #world1 .cWorldDesc__copy { width: calc(663/1760*100%); margin-top: calc(15/1760*100%); margin-left: calc(161/1760*100%); } #world1 .cWorldDesc__pic2 { width: calc(600/1760*100%); margin-top: calc(68/1760*100%); margin-left: calc(160/1760*100%); } #world1 .cWorldDesc__text { width: calc(613/1760*100%); margin-top: calc(20/1760*100%); margin-left: calc(160/1760*100%); } #world1 .cWorldDesc__mons { } #world1 .cWorldDesc__mons.-mons1 { width: calc(256/1760*100%); left: 0; right: inherit; margin-top: calc(-78/1760*100%); margin-left: calc(537/1760*100%); margin-right: auto; z-index: 11; } #world1 .cWorldDesc__mons.-mons2 { width: calc(364/1760*100%); margin-bottom: calc(-32/1760*100%); margin-right: calc(70/1760*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #world2 ---------------------------------------------------------------------------------------------------------------- */ #world2 .contHero { padding-bottom: calc(28/750*100%); } #world2 .cHero__category { width: calc(155/750*100%); } #world2 .cHero__contsBlock { } #world2 .cHero__ttl { margin-top: calc(-77/750*100%); } #world2 .cHero__leadtext { margin-top: calc(-16/750*100%); } #world2 .contWorldDesc { padding-top: calc(100/750*100%); } #world2 .cWorldDesc__pic { } #world2 .cWorldDesc__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); padding-top: calc(30/750*100%); padding-bottom: calc(103/750*100%); position: relative; } #world2 .cWorldDesc__heading { width: calc(398/700*100%); margin-left: calc(31/700*100%); } #world2 .cWorldDesc__copy { width: calc(600/700*100%); margin-top: calc(11/700*100%); margin-left: calc(51/700*100%); } #world2 .cWorldDesc__pic2 { width: calc(600/700*100%); margin-top: calc(50/700*100%); margin-left: calc(50/700*100%); } #world2 .cWorldDesc__text { width: calc(600/700*100%); margin-top: calc(20/700*100%); margin-left: calc(50/700*100%); } #world2 .cWorldDesc__mons { position: absolute; right: 0; } #world2 .cWorldDesc__mons.-mons1 { width: calc(186/700*100%); top: 0; margin-top: calc(-69/700*100%); margin-right: calc(-34/700*100%); } #world2 .cWorldDesc__mons.-mons2 { width: calc(354/700*100%); bottom: 0; margin-bottom: calc(-52/700*100%); margin-right: calc(-41/700*100%); } @media screen and (min-width: 641px) { #world2 .contHero { padding-bottom: calc(50/1920*100%); } #world2 .cHero__category { width: calc(313/1920*100%); } #world2 .cHero__contsBlock { } #world2 .cHero__ttl { width: calc(459/1920*100%); margin-top: calc(487/1920*100%); margin-left: calc(137/1920*100%); } #world2 .cHero__leadtext { width: calc(488/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(140/1920*100%); } #world2 .contWorldDesc { padding-top: calc(150/1920*100%); } #world2 .cWorldDesc__pic { width: calc(1060/1920*100%); position: absolute; top: 0; right: 0; margin-top: calc(100/1920*100%); z-index: 10; } #world2 .cWorldDesc__contsBlock { width: calc(1760/1920*100%); padding-top: calc(32/1920*100%); padding-bottom: calc(97/1920*100%); } #world2 .cWorldDesc__heading { width: calc(398/1760*100%); margin-left: calc(141/1760*100%); } #world2 .cWorldDesc__copy { width: calc(918/1760*100%); margin-top: calc(14/1760*100%); margin-left: calc(161/1760*100%); position: relative; z-index: 11; } #world2 .cWorldDesc__pic2 { width: calc(600/1760*100%); margin-top: calc(73/1760*100%); margin-left: calc(160/1760*100%); } #world2 .cWorldDesc__text { width: calc(742/1760*100%); margin-top: calc(20/1760*100%); margin-left: calc(160/1760*100%); } #world2 .cWorldDesc__mons { } #world2 .cWorldDesc__mons.-mons1 { width: calc(216/1760*100%); left: 0; right: inherit; margin-top: calc(-173/1760*100%); margin-left: calc(589/1760*100%); margin-right: auto; z-index: 11; } #world2 .cWorldDesc__mons.-mons2 { width: calc(354/1760*100%); margin-bottom: calc(-45/1760*100%); margin-right: calc(128/1760*100%); z-index: 12; } } /* ---------------------------------------------------------------------------------------------------------------- #world3 ---------------------------------------------------------------------------------------------------------------- */ #world3 .contHero { padding-bottom: calc(29/750*100%); } #world3 .cHero__category { width: calc(155/750*100%); } #world3 .cHero__contsBlock { } #world3 .cHero__ttl { margin-top: calc(-77/750*100%); } #world3 .cHero__leadtext { margin-top: calc(-16/750*100%); } #world3 .contWorldDesc { padding-top: calc(100/750*100%); } #world3 .cWorldDesc__pic { } #world3 .cWorldDesc__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); padding-top: calc(30/750*100%); padding-bottom: calc(138/750*100%); position: relative; } #world3 .cWorldDesc__heading { width: calc(442/700*100%); margin-left: calc(31/700*100%); } #world3 .cWorldDesc__copy { width: calc(600/700*100%); margin-top: calc(10/700*100%); margin-left: calc(51/700*100%); } #world3 .cWorldDesc__pic2 { width: calc(600/700*100%); margin-top: calc(50/700*100%); margin-left: calc(50/700*100%); } #world3 .cWorldDesc__text { width: calc(600/700*100%); margin-top: calc(20/700*100%); margin-left: calc(50/700*100%); } #world3 .cWorldDesc__mons { position: absolute; right: 0; } #world3 .cWorldDesc__mons.-mons2 { width: calc(410/700*100%); bottom: 0; margin-bottom: calc(-31/700*100%); margin-right: calc(-87/700*100%); } #world3 .contVehicle { padding-top: calc(100/750*100%); } #world3 .cVehicle__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); padding-top: calc(50/750*100%); padding-bottom: calc(58/750*100%); margin-left: auto; margin-right: 0; position: relative; } #world3 .cVehicle__heading { width: calc(66/700*100%); padding-bottom: calc(8/700*100%); margin-left: calc(50/700*100%); border-bottom: 2px solid #337bbe; } #world3 .cVehicle__list { width: calc(600/700*100%); margin: calc(48/700*100%) auto 0; } #world3 .cVehicle__list__item:nth-child(2) { margin-top: calc(120/600*100%); } #world3 .cVehicle__itemTtl { } #world3 .cVehicle__itemPic { margin-top: calc(40/600*100%); } #world3 .cVehicle__picListWrap { } #world3 .cVehicle__picList { } #world3 .cVehicle__picList__item { } #world3 .cVehicle__itemText { margin-top: calc(30/600*100%); } @media screen and (min-width: 641px) { #world3 .contHero { padding-bottom: calc(50/1920*100%); } #world3 .cHero__category { width: calc(313/1920*100%); } #world3 .cHero__contsBlock { } #world3 .cHero__ttl { width: calc(567/1920*100%); margin-top: calc(487/1920*100%); margin-left: calc(139/1920*100%); } #world3 .cHero__leadtext { width: calc(579/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(139/1920*100%); } #world3 .contWorldDesc { padding-top: calc(150/1920*100%); } #world3 .cWorldDesc__pic { width: calc(1060/1920*100%); position: absolute; top: 0; right: 0; margin-top: calc(100/1920*100%); z-index: 10; } #world3 .cWorldDesc__contsBlock { width: calc(1760/1920*100%); padding-top: calc(32/1920*100%); padding-bottom: calc(134/1920*100%); } #world3 .cWorldDesc__heading { width: calc(442/1760*100%); margin-left: calc(141/1760*100%); } #world3 .cWorldDesc__copy { width: calc(825/1760*100%); margin-top: calc(14/1760*100%); margin-left: calc(161/1760*100%); position: relative; z-index: 11; } #world3 .cWorldDesc__pic2 { width: calc(600/1760*100%); margin-top: calc(73/1760*100%); margin-left: calc(160/1760*100%); } #world3 .cWorldDesc__text { width: calc(641/1760*100%); margin-top: calc(20/1760*100%); margin-left: calc(160/1760*100%); } #world3 .cWorldDesc__mons { } #world3 .cWorldDesc__mons.-mons2 { width: calc(529/1760*100%); margin-bottom: calc(-66/1760*100%); margin-right: calc(283/1760*100%); z-index: 12; } #world3 .contVehicle { padding-top: calc(100/1920*100%); } #world3 .cVehicle__contsBlock { width: calc(1760/1920*100%); padding-top: calc(50/1920*100%); padding-bottom: calc(65/1920*100%); } #world3 .cVehicle__heading { width: calc(66/1760*100%); padding-bottom: calc(8/1760*100%); margin-left: calc(100/1760*100%); } #world3 .cVehicle__list { width: calc(1400/1760*100%); margin: calc(48/1760*100%) auto 0 calc(100/1760*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #world3 .cVehicle__list__item { width: calc(650/1400*100%); } #world3 .cVehicle__list__item:nth-child(2) { margin-top: 0; } #world3 .cVehicle__itemTtl { width: calc(600/650*100%); } #world3 .cVehicle__itemPic { margin-top: calc(40/650*100%); } #world3 .cVehicle__picListWrap { } #world3 .cVehicle__picList { } #world3 .cVehicle__picList__item { } #world3 .cVehicle__itemText { margin-top: calc(30/650*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #character ---------------------------------------------------------------------------------------------------------------- */ #character .contHero { padding-bottom: calc(36/750*100%); } #character .cHero__category { width: calc(256/750*100%); } #character .cHero__contsBlock { } #character .cHero__ttl { margin-top: calc(-54/750*100%); } #character .cHero__leadtext { margin-top: calc(-17/750*100%); } #character .contChara { padding-top: calc(100/750*100%); } #character .cChara__contsBlock { } #character .cChara__list { } #character .cChara__list__item { background: rgba(0,6,46,0.5); position: relative; padding-top: 0.1%; margin: calc(99/750*100%) auto 0; } #character .cChara__list__item:first-child { margin-top: 0; } #character .cChara__itemChara { position: absolute; top: 0; right: 0; } #character .cChara__list__item.-typeA { padding-bottom: calc(50/750*100%); } #character .-typeA .cChara__itemTtl { width: calc(310/750*100%); margin: calc(-10/750*100%) auto 0 calc(50/750*100%); } #character .-typeA .cChara__itemPic { width: calc(595/750*100%); margin: calc(30/750*100%) auto 0 calc(50/750*100%); } #character .-player1 .cChara__itemChara { width: calc(367/750*100%); margin-top: calc(-77/750*100%); right: calc(-67/750*100%); } #character .-player2 .cChara__itemChara { width: calc(328/750*100%); margin-top: calc(-86/750*100%); right: calc(-44/750*100%); } #character .cChara__list__item.-typeB { width: calc(650/750*100%); padding-bottom: calc(37/750*100%); margin-top: calc(100/750*100%); } #character .cChara__list__item.-typeB dl { position: relative; } #character .-typeB .cChara__itemTtl { width: calc(214/650*100%); margin: calc(-10/650*100%) auto 0 calc(30/650*100%); } #character .-typeB .cChara__itemText { width: calc(590/650*100%); margin: calc(22/650*100%) auto 0 calc(28/650*100%); } #character .-typeB .cChara__itemPic { width: calc(500/650*100%); margin: calc(19/750*100%) auto 0 calc(30/650*100%); } #character .-npc1 .cChara__itemChara { width: calc(241/650*100%); margin-top: calc(-34/650*100%); right: calc(-45/650*100%); } #character .-npc2 .cChara__itemChara { width: calc(163/650*100%); margin-top: calc(-34/650*100%); right: calc(-16/650*100%); } #character .-npc3 .cChara__itemChara { width: calc(242/650*100%); margin-top: calc(-43/650*100%); right: calc(-46/650*100%); } @media screen and (min-width: 641px) { #character .contHero { padding-bottom: calc(50/1920*100%); } #character .cHero__category { width: calc(515/1920*100%); } #character .cHero__contsBlock { } #character .cHero__ttl { width: calc(458/1920*100%); margin-top: calc(510/1920*100%); margin-left: calc(139/1920*100%); } #character .cHero__leadtext { width: calc(853/1920*100%); margin-top: calc(4/1920*100%); margin-left: calc(139/1920*100%); } #character .contChara { padding-top: calc(150/1920*100%); } #character .cChara__contsBlock { } #character .cChara__list { width: calc(1600/1920*100%); margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #character .cChara__list__item { margin: 0; } #character .cChara__itemChara { } #character .cChara__list__item.-typeA { width: calc(700/1600*100%); padding-bottom: calc(24/1600*100%); } #character .cChara__list__item.-typeA.-player2 { margin-right: calc(50/1600*100%); } #character .-typeA .cChara__itemTtl { width: calc(310/700*100%); margin: calc(-10/700*100%) auto 0 calc(30/700*100%); } #character .-typeA .cChara__itemPic { width: calc(595/700*100%); margin: calc(29/700*100%) auto 0 calc(30/700*100%); } #character .-player1 .cChara__itemChara { width: calc(367/700*100%); margin-top: calc(-77/700*100%); right: calc(-146/700*100%); } #character .-player2 .cChara__itemChara { width: calc(328/700*100%); margin-top: calc(-86/700*100%); right: calc(-173/700*100%); } #character .cChara__list__item.-typeB { width: calc(500/1600*100%); padding-bottom: 0; margin-top: calc(225/1600*100%); } #character .-typeB .cChara__itemTtl { width: calc(214/500*100%); margin: calc(-10/500*100%) auto 0 calc(30/500*100%); } #character .-typeB .cChara__itemText { width: calc(450/500*100%); margin: calc(24/500*100%) auto 0 calc(26/500*100%); } #character .-typeB .cChara__itemPic { width: 100%; margin: calc(21/500*100%) 0 0; } #character .-npc1 .cChara__itemChara { width: calc(270/500*100%); margin-top: calc(-145/500*100%); right: calc(-12/500*100%); } #character .-npc2 .cChara__itemChara { width: calc(183/500*100%); margin-top: calc(-144/500*100%); right: calc(21/500*100%); } #character .-npc3 .cChara__itemChara { width: calc(271/500*100%); margin-top: calc(-175/500*100%); right: calc(-15/500*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #playMenu ---------------------------------------------------------------------------------------------------------------- */ #playMenu.contMenu { width: calc(650/750*100%); margin: calc(101/750*100%) auto 0; } #playMenu .cMenu__heading { width: calc(152/650*100%); margin: 0 auto; } #playMenu .cMenu__list { margin: calc(38/650*100%) auto 0; } #playMenu .cMenu__list__item .btn { display: block; position: relative; } #playMenu .cMenu__list__item .btn::after { content: ""; display: block; width: calc(450/650*100%); height: calc(100% - 2px); border: 1px solid #e9c941; position: absolute; top: 1px; right: 1px; opacity: 0; } #playMenu .cMenu__list__item.current .btn::after { opacity: 1; } @media screen and (max-width: 640px) { #playMenu .cMenu__list__item:nth-child(n+2) { margin: calc(20/650*100%) auto 0; } } @media screen and (min-width: 641px) { #playMenu.contMenu { width: calc(1600/1920*100%); margin: calc(101/1920*100%) auto 0; } #playMenu .cMenu__heading { width: calc(152/1600*100%); } #playMenu .cMenu__list { margin: calc(40/1600*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: start; justify-content: flex-start; } #playMenu .cMenu__list__item { width: calc(500/1600*100%); margin-right: calc(50/1600*100%); } #playMenu .cMenu__list__item:nth-child(3n) { margin-right: 0; } #playMenu .cMenu__list__item:nth-child(n+4) { margin-top: calc(25/1600*100%); } #playMenu .cMenu__list__item 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: block; position: relative; overflow: hidden; } #playMenu .cMenu__list__item:not(.current) a:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } #playMenu .cMenu__list__item .btn::after { -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; } #playMenu .cMenu__list__item:not(.current):hover .btn::after { opacity: 1; } } /* ---------------------------------------------------------------------------------------------------------------- #smartphone ---------------------------------------------------------------------------------------------------------------- */ #smartphone .contHero { padding-bottom: calc(25/750*100%); } #smartphone .cHero__category { width: calc(298/750*100%); } #smartphone .cHero__contsBlock { } #smartphone .cHero__ttl { margin-top: calc(-77/750*100%); } #smartphone .cHero__leadtext { margin-top: calc(-14/750*100%); } #smartphone .contUseful { padding-top: calc(100/750*100%); } #smartphone .cUseful__contsBlock { } #smartphone .cUseful__list { width: calc(650/750*100%); margin: 0 auto; } #smartphone .cUseful__list__item { background: rgba(0,6,46,0.5); margin-top: calc(50/650*100%); padding-bottom: calc(50/650*100%); } #smartphone .cUseful__list__item:first-child { margin-top: 0; } #smartphone .cUseful__itemTtl { } #smartphone .cUseful__itemPic { } #smartphone .cUseful__picListWrap { } #smartphone .cUseful__picList { } #smartphone .cUseful__picList__item { } #smartphone .cUseful__itemText { margin-top: calc(30/650*100%); } @media screen and (min-width: 641px) { #smartphone .contHero { padding-bottom: calc(50/1920*100%); } #smartphone .cHero__category { width: calc(600/1920*100%); } #smartphone .cHero__contsBlock { } #smartphone .cHero__ttl { width: calc(938/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #smartphone .cHero__leadtext { width: calc(664/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #smartphone .contUseful { padding-top: calc(100/1920*100%); } #smartphone .cUseful__contsBlock { width: 100%; } #smartphone .cUseful__list { width: calc(1600/1920*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #smartphone .cUseful__list__item { width: calc(500/1600*100%); margin-top: 0; padding-bottom: calc(44/1600*100%); } #smartphone .cUseful__list__item:nth-child(2) { margin-top: 0; } } /* ---------------------------------------------------------------------------------------------------------------- #buildcard ---------------------------------------------------------------------------------------------------------------- */ #buildcard .contHero { padding-bottom: calc(28/750*100%); } #buildcard .cHero__category { width: calc(298/750*100%); } #buildcard .cHero__contsBlock { } #buildcard .cHero__ttl { margin-top: calc(-77/750*100%); } #buildcard .cHero__leadtext { margin-top: calc(-18/750*100%); } #buildcard .swiper-button-next.flowSlider__pagination, #buildcard .swiper-button-prev.flowSlider__pagination { width: calc(95/560*100%); } #buildcard .swiper-button-next.flowSlider__pagination { right: calc(-95/560*100%); background: url("../../play/_img/buildcard/icon_next_sp.png") center center no-repeat; background-size: calc(24/95*100%); } #buildcard .swiper-button-prev.flowSlider__pagination { left: calc(-95/560*100%); background: url("../../play/_img/buildcard/icon_prev_sp.png") center center no-repeat; background-size: calc(24/95*100%); } #buildcard .contLook { padding-top: calc(100/750*100%); } #buildcard .cLook__contsBlock { background: rgba(0,6,46,0.5); padding: calc(65/750*100%) calc(50/750*100%); } #buildcard .cLook__subhd { width: calc(130/650*100%); padding-bottom: calc(9/650*100%); border-bottom: 2px solid #337bbe; } #buildcard .cLook__heading { width: 100%; margin-top: calc(24/650*100%); } #buildcard .cLook__flowWrap { width: calc(560/650*100%); margin: calc(24/650*100%) auto 0; overflow: visible; } #buildcard .cLook__flow { } #buildcard .cLook__flow__item { } #buildcard .cLook__text { width: 100%; margin-top: calc(30/650*100%); } #buildcard .contWatch { padding-top: calc(100/750*100%); } #buildcard .cWatch__contsBlock { background: rgba(0,6,46,0.5); padding: calc(65/750*100%) calc(50/750*100%); } #buildcard .cWatch__subhd { width: calc(130/650*100%); padding-bottom: calc(9/650*100%); border-bottom: 2px solid #337bbe; } #buildcard .cWatch__heading { width: 100%; margin-top: calc(24/650*100%); } #buildcard .cWatch__flowWrap { width: calc(560/650*100%); margin: calc(24/650*100%) auto 0; overflow: visible; } #buildcard .cWatch__flow { } #buildcard .cWatch__flow__item { } #buildcard .cWatch__text { width: 100%; margin-top: calc(30/650*100%); } #buildcard .contCollection { padding-top: calc(100/750*100%); padding-bottom: calc(10/750*100%); } #buildcard .cCollection__contsBlock { position: relative; } #buildcard .cCollection__heading { width: calc(527/750*100%); padding-bottom: calc(11/750*100%); border-bottom: 2px solid #337bbe; margin: 0 auto; } #buildcard .cCollection__text { width: calc(538/750*100%); margin: calc(28/750*100%) auto 0; } #buildcard .cCollection__listWrap { width: calc(768/750*100%); margin: calc(38/750*100%) 0 0; overflow: visible; } #buildcard .cCollection__listWrap .swiper-wrapper { -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; margin: 0 auto; } #buildcard .cCollection__list { } #buildcard .cCollection__list__item { } #buildcard .contNotes { padding-top: calc(100/750*100%); } #buildcard .cNotes__contsBlock { background: rgba(0,6,46,0.5); padding: calc(65/750*100%) calc(50/750*100%); } #buildcard .cNotes__heading { width: calc(251/650*100%); padding-bottom: calc(9/650*100%); border-bottom: 2px solid #337bbe; } #buildcard .cNotes__list { font-size: 2.9333vw; margin-top: calc(20/650*100%); } #buildcard .cNotes__list__item { line-height: 1.61; margin-bottom: 0.5em; text-indent: -1em; padding-left: 1em; } #buildcard .cNotes__list__innerList { margin-top: 0.5em; } #buildcard .cNotes__list__innerList li { line-height: 1.61; margin-bottom: 0.3em; text-indent: -1em; padding-left: 1em; } @media screen and (min-width: 641px) { #buildcard .contHero { padding-bottom: calc(50/1920*100%); } #buildcard .cHero__category { width: calc(600/1920*100%); } #buildcard .cHero__contsBlock { } #buildcard .cHero__ttl { width: calc(938/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #buildcard .cHero__leadtext { width: calc(987/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #buildcard .contLook { padding-top: calc(100/1920*100%); } #buildcard .cLook__contsBlock { width: calc(1600/1920*100%); padding: calc(65/1920*100%) calc(50/1920*100%) calc(95/1920*100%); margin: 0 auto; } #buildcard .cLook__subhd { width: calc(130/1500*100%); padding-bottom: calc(9/1500*100%); } #buildcard .cLook__heading { width: calc(650/1500*100%); margin-top: calc(24/1500*100%); } #buildcard .cLook__flowWrap { width: 100%; margin: calc(29/1500*100%) auto 0; overflow: hidden; } #buildcard .cLook__flow { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #buildcard .cLook__flow__item { width: calc(475/1500*100%); } #buildcard .cLook__text { width: calc(1011/1500*100%); margin-top: calc(20/1500*100%); } #buildcard .cLook__flow::before, #buildcard .cLook__flow::after { content: ""; display: block; width: calc(40/1500*100%); height: 100%; position: absolute; top: 0; background: url("../../play/_img/buildcard/icon_arrow_pc.png") center center no-repeat; background-size: calc(19/40*100%); } #buildcard .cLook__flow::before { left: calc(475/1500*100%); } #buildcard .cLook__flow::after { left: calc(985/1500*100%); } #buildcard .contWatch { padding-top: calc(100/1920*100%); } #buildcard .cWatch__contsBlock { width: calc(1600/1920*100%); padding: calc(65/1920*100%) calc(50/1920*100%) calc(93/1920*100%); margin: 0 auto; } #buildcard .cWatch__subhd { width: calc(130/1500*100%); padding-bottom: calc(9/1500*100%); } #buildcard .cWatch__heading { width: calc(650/1500*100%); margin-top: calc(24/1500*100%); } #buildcard .cWatch__flowWrap { width: 100%; margin: calc(29/1500*100%) auto 0; overflow: hidden; } #buildcard .cWatch__flow { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #buildcard .cWatch__flow__item { width: calc(475/1500*100%); } #buildcard .cWatch__text { width: calc(1115/1500*100%); margin-top: calc(20/1500*100%); } #buildcard .cWatch__flow::before, #buildcard .cWatch__flow::after { content: ""; display: block; width: calc(40/1500*100%); height: 100%; position: absolute; top: 0; background: url("../../play/_img/buildcard/icon_arrow_pc.png") center center no-repeat; background-size: calc(19/40*100%); } #buildcard .cWatch__flow::before { left: calc(475/1500*100%); } #buildcard .cWatch__flow::after { left: calc(985/1500*100%); } #buildcard .contCollection { padding-top: calc(100/1920*100%); padding-bottom: calc(12/1920*100%); } #buildcard .cCollection__contsBlock { } #buildcard .cCollection__heading { width: calc(527/1920*100%); padding-bottom: calc(10/1920*100%); } #buildcard .cCollection__text { width: calc(757/1920*100%); margin: calc(28/1920*100%) auto 0; } #buildcard .cCollection__listWrap { width: 100%; margin: calc(31/1920*100%) 0 0; } #buildcard .cCollection__list { } #buildcard .cCollection__list__item { } #buildcard .cCollection__list__item 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: block; position: relative; overflow: hidden; } #buildcard .cCollection__list__item a:hover { -webkit-transform: scale(1.08); transform: scale(1.08); z-index: 999; } #buildcard .contNotes { padding-top: calc(100/1920*100%); } #buildcard .cNotes__contsBlock { width: calc(1600/1920*100%); padding: calc(65/1920*100%) calc(50/1920*100%) calc(80/1920*100%); margin: 0 auto; } #buildcard .cNotes__heading { width: calc(251/1500*100%); padding-bottom: calc(9/1500*100%); } #buildcard .cNotes__list { font-size: 0.8333vw; margin-top: calc(30/1500*100%); } #buildcard .cNotes__list__item { line-height: 1.61; margin-bottom: 0.8em; } #buildcard .cNotes__list__innerList { margin-top: 0.5em; } #buildcard .cNotes__list__innerList li { line-height: 1.61; margin-bottom: 0.3em; } } /* ---------------------------------------------------------------------------------------------------------------- #dlc ---------------------------------------------------------------------------------------------------------------- */ #dlc .contHero { padding-bottom: calc(20/750*100%); } #dlc .cHero__category { width: calc(298/750*100%); } #dlc .cHero__contsBlock { } #dlc .cHero__ttl { margin-top: calc(-77/750*100%); } #dlc .cHero__leadtext { margin-top: calc(-15/750*100%); } #dlc .contAdditional { padding-top: calc(100/750*100%); } #dlc .cAdd__contsBlock { } #dlc .cAdd__list { margin: 0 auto; } #dlc .cAdd__list__item { background: rgba(0,6,46,0.5); margin-top: calc(100/750*100%); padding: calc(50/750*100%) 0 calc(57/750*100%); } #dlc .cAdd__list__item:first-child { margin-top: 0; } #dlc .cAdd__list__item dl { width: calc(650/750*100%); margin: 0 auto; } #dlc .cAdd__itemTtl { } #dlc .cAdd__itemPic { margin-top: calc(40/650*100%); } #dlc .cAdd__itemText { margin-top: calc(30/650*100%); } @media screen and (max-width: 640px) { #dlc .cAdd__list__item.-item3 { padding-bottom: calc(50/750*100%); } } @media screen and (min-width: 641px) { #dlc .contHero { padding-bottom: calc(50/1920*100%); } #dlc .cHero__category { width: calc(600/1920*100%); } #dlc .cHero__contsBlock { } #dlc .cHero__ttl { width: calc(951/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #dlc .cHero__leadtext { width: calc(800/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #dlc .contAdditional { padding-top: calc(100/1920*100%); } #dlc .cAdd__contsBlock { width: 100%; } #dlc .cAdd__list { width: calc(1600/1920*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #dlc .cAdd__list__item { width: calc(750/1600*100%); margin-top: calc(100/1600*100%); padding: calc(50/1600*100%) 0 calc(69/1600*100%); } #dlc .cAdd__list__item:nth-child(-n+2) { margin-top: 0; } #dlc .cAdd__list__item dl { width: calc(650/750*100%); } #dlc .cAdd__itemTtl { } #dlc .cAdd__itemPic { margin-top: calc(40/650*100%); } #dlc .cAdd__itemText { margin-top: calc(24/650*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #elements ---------------------------------------------------------------------------------------------------------------- */ #elements .contHero { padding-bottom: calc(40/750*100%); } #elements .cHero__category { width: calc(298/750*100%); } #elements .cHero__contsBlock { } #elements .cHero__ttl { margin-top: calc(-77/750*100%); } #elements .cHero__leadtext { margin-top: calc(-14/750*100%); } #elements .contElements { padding-top: calc(100/750*100%); } #elements .cElem__contsBlock { } #elements .cElem__list { width: calc(650/750*100%); margin: 0 auto; } #elements .cElem__list__item { background: rgba(0,6,46,0.5); margin-top: calc(50/650*100%); position: relative; } #elements .cElem__list__item:first-child { margin-top: 0; } #elements .cElem__itemTtl { width: calc(500/650*100%); } #elements .cElem__itemPic { } #elements .cElem__itemIcon { position: absolute; top: 0; right: 0; } #elements .cElem__itemText { margin-top: calc(31/650*100%); } #elements .-item1 .cElem__itemIcon { width: calc(137/650*100%); margin-top: calc(14/650*100%); margin-right: calc(39/650*100%); } #elements .-item2 .cElem__itemIcon { width: calc(168/650*100%); margin-top: calc(13/650*100%); margin-right: calc(40/650*100%); } #elements .-item3 .cElem__itemIcon { width: calc(139/650*100%); margin-top: calc(14/650*100%); margin-right: calc(40/650*100%); } @media screen and (max-width: 640px) { #elements .cElem__list__item.-item1 { padding-bottom: calc(54/650*100%); } #elements .cElem__list__item.-item2 { padding-bottom: calc(65/650*100%); } #elements .cElem__list__item.-item3 { padding-bottom: calc(58/650*100%); } } @media screen and (min-width: 641px) { #elements .contHero { padding-bottom: calc(50/1920*100%); } #elements .cHero__category { width: calc(600/1920*100%); } #elements .cHero__contsBlock { } #elements .cHero__ttl { width: calc(459/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #elements .cHero__leadtext { width: calc(624/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #elements .contElements { padding-top: calc(100/1920*100%); } #elements .cElem__contsBlock { width: 100%; } #elements .cElem__list { width: calc(1600/1920*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #elements .cElem__list__item { width: calc(500/1600*100%); margin-top: 0; padding-bottom: calc(49/1600*100%); } #elements .cElem__itemTtl { width: 100%; } #elements .cElem__itemPic { } #elements .cElem__itemIcon { } #elements .cElem__itemText { margin-top: calc(30/500*100%); } #elements .-item1 .cElem__itemIcon { width: calc(137/500*100%); margin-top: calc(14/500*100%); margin-right: calc(19/500*100%); } #elements .-item2 .cElem__itemIcon { width: calc(168/500*100%); margin-top: calc(13/500*100%); margin-right: calc(18/500*100%); } #elements .-item3 .cElem__itemIcon { width: calc(139/500*100%); margin-top: calc(14/500*100%); margin-right: calc(29/500*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #modes ---------------------------------------------------------------------------------------------------------------- */ #modes .contHero { padding-bottom: calc(28/750*100%); } #modes .cHero__category { width: calc(298/750*100%); } #modes .cHero__contsBlock { } #modes .cHero__ttl { margin-top: calc(-77/750*100%); } #modes .cHero__leadtext { margin-top: calc(-18/750*100%); } #modes .contMode { padding-top: calc(100/750*100%); } #modes .cMode__visual { } #modes .cMode__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); margin-top: calc(-71/750*100%); padding-top: calc(60/750*100%); padding-bottom: calc(60/750*100%); position: relative; } #modes .cMode__box { width: calc(600/700*100%); margin: 0 auto; } #modes .cMode__heading { } #modes .cMode__text { margin-top: calc(29/600*100%); } #modes .cMode__pic { margin-top: calc(47/600*100%); } #modes .-story .cMode__contsBlock { margin-left: auto; } #modes .-free .cMode__contsBlock { } @media screen and (min-width: 641px) { #modes .contHero { padding-bottom: calc(50/1920*100%); } #modes .cHero__category { width: calc(600/1920*100%); } #modes .cHero__contsBlock { } #modes .cHero__ttl { width: calc(1051/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #modes .cHero__leadtext { width: calc(932/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #modes .contMode { padding-top: calc(100/1920*100%); } #modes .cMode__visual { width: calc(1460/1920*100%); } #modes .cMode__contsBlock { width: calc(735/1920*100%); margin-top: calc(-650/1920*100%); padding-top: calc(74/1920*100%); padding-bottom: calc(37/1920*100%); } #modes .cMode__box { width: calc(600/735*100%); margin: 0 auto 0 calc(50/735*100%); } #modes .cMode__heading { } #modes .cMode__text { margin-top: calc(30/600*100%); } #modes .cMode__pic { margin-top: calc(30/600*100%); } #modes .-free .cMode__visual { margin-left: auto; } #modes .-free .cMode__contsBlock { width: calc(760/1920*100%); } #modes .-free .cMode__box { width: calc(600/760*100%); margin: 0 calc(50/735*100%) 0 auto; } } /* ---------------------------------------------------------------------------------------------------------------- #battle ---------------------------------------------------------------------------------------------------------------- */ #battle .contHero { padding-bottom: calc(28/750*100%); } #battle .cHero__category { width: calc(298/750*100%); } #battle .cHero__contsBlock { } #battle .cHero__ttl { margin-top: calc(-77/750*100%); } #battle .cHero__leadtext { margin-top: calc(-18/750*100%); } #battle .contBattle { padding-top: calc(100/750*100%); } #battle .cBattle__visual { } #battle .cBattle__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); margin-top: calc(-71/750*100%); margin-left: auto; padding-top: calc(60/750*100%); padding-bottom: calc(56/750*100%); position: relative; } #battle .cBattle__box { width: calc(600/700*100%); margin: 0 auto; } #battle .cBattle__subheading { width: calc(158/600*100%); padding-bottom: calc(9/600*100%); border-bottom: 2px solid #337bbe; } #battle .cBattle__heading { margin-top: calc(36/600*100%); } #battle .cBattle__pic { margin-top: calc(53/600*100%); } @media screen and (min-width: 641px) { #battle .contHero { padding-bottom: calc(50/1920*100%); } #battle .cHero__category { width: calc(600/1920*100%); } #battle .cHero__contsBlock { } #battle .cHero__ttl { width: calc(533/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #battle .cHero__leadtext { width: calc(889/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #battle .contBattle { padding-top: calc(100/1920*100%); } #battle .cBattle__visual { width: calc(1460/1920*100%); } #battle .cBattle__contsBlock { width: calc(735/1920*100%); margin-top: calc(-650/1920*100%); padding-top: calc(50/1920*100%); padding-bottom: calc(35/1920*100%); } #battle .cBattle__box { width: calc(600/735*100%); margin: 0 auto 0 calc(50/735*100%); } #battle .cBattle__subheading { width: calc(158/600*100%); padding-bottom: calc(10/600*100%); } #battle .cBattle__heading { margin-top: calc(35/600*100%); } #battle .cBattle__pic { margin-top: calc(65/600*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #plan ---------------------------------------------------------------------------------------------------------------- */ #plan .contHero { padding-bottom: calc(44/750*100%); } #plan .cHero__category { width: calc(298/750*100%); } #plan .cHero__contsBlock { } #plan .cHero__ttl { margin-top: calc(-77/750*100%); } #plan .cHero__leadtext { margin-top: calc(-14/750*100%); } #plan .contPlan { padding-top: calc(100/750*100%); } #plan .cPlan__visual { } #plan .cPlan__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); margin-top: calc(-71/750*100%); margin-left: auto; padding-top: calc(60/750*100%); padding-bottom: calc(73/750*100%); position: relative; } #plan .cPlan__box { width: calc(600/700*100%); margin: 0 auto; } #plan .cPlan__subheading { width: calc(68/600*100%); padding-bottom: calc(9/600*100%); border-bottom: 2px solid #337bbe; } #plan .cPlan__heading { margin-top: calc(36/600*100%); } #plan .cPlan__pic { margin-top: calc(54/600*100%); } @media screen and (min-width: 641px) { #plan .contHero { padding-bottom: calc(50/1920*100%); } #plan .cHero__category { width: calc(600/1920*100%); } #plan .cHero__contsBlock { } #plan .cHero__ttl { width: calc(797/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #plan .cHero__leadtext { width: calc(797/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #plan .contPlan { padding-top: calc(100/1920*100%); } #plan .cPlan__visual { width: calc(1460/1920*100%); } #plan .cPlan__contsBlock { width: calc(735/1920*100%); margin-top: calc(-650/1920*100%); padding-top: calc(50/1920*100%); padding-bottom: calc(110/1920*100%); } #plan .cPlan__box { width: calc(600/735*100%); margin: 0 auto 0 calc(50/735*100%); } #plan .cPlan__subheading { width: calc(68/600*100%); padding-bottom: calc(10/600*100%); } #plan .cPlan__heading { margin-top: calc(35/600*100%); } #plan .cPlan__pic { margin-top: calc(65/600*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #equipment ---------------------------------------------------------------------------------------------------------------- */ #equipment .contHero { padding-bottom: calc(48/750*100%); } #equipment .cHero__category { width: calc(298/750*100%); } #equipment .cHero__contsBlock { } #equipment .cHero__ttl { margin-top: calc(-77/750*100%); } #equipment .cHero__leadtext { margin-top: calc(-18/750*100%); } #equipment .contEquipment { padding-top: calc(100/750*100%); } #equipment .cEqp__visual { } #equipment .cEqp__contsBlock { background: rgba(0,6,46,0.5); width: calc(700/750*100%); margin-top: calc(-71/750*100%); margin-left: auto; padding-top: calc(60/750*100%); padding-bottom: calc(62/750*100%); position: relative; } #equipment .cEqp__box { width: calc(600/700*100%); margin: 0 auto; } #equipment .cEqp__subheading { width: calc(117/600*100%); padding-bottom: calc(9/600*100%); border-bottom: 2px solid #337bbe; } #equipment .cEqp__heading { margin-top: calc(35/600*100%); } #equipment .cEqp__pic { margin-top: calc(53/600*100%); } @media screen and (min-width: 641px) { #equipment .contHero { padding-bottom: calc(50/1920*100%); } #equipment .cHero__category { width: calc(600/1920*100%); } #equipment .cHero__contsBlock { } #equipment .cHero__ttl { width: calc(581/1920*100%); margin-top: calc(399/1920*100%); margin-left: calc(137/1920*100%); } #equipment .cHero__leadtext { width: calc(606/1920*100%); margin-top: calc(-3/1920*100%); margin-left: calc(137/1920*100%); } #equipment .contEquipment { padding-top: calc(100/1920*100%); } #equipment .cEqp__visual { width: calc(1460/1920*100%); } #equipment .cEqp__contsBlock { width: calc(735/1920*100%); margin-top: calc(-650/1920*100%); padding-top: calc(50/1920*100%); padding-bottom: calc(49/1920*100%); } #equipment .cEqp__box { width: calc(600/735*100%); margin: 0 auto 0 calc(50/735*100%); } #equipment .cEqp__subheading { width: calc(117/600*100%); padding-bottom: calc(10/600*100%); } #equipment .cEqp__heading { margin-top: calc(35/600*100%); } #equipment .cEqp__pic { margin-top: calc(65/600*100%); } } /* ---------------------------------------------------------------------------------------------------------------- #faq ---------------------------------------------------------------------------------------------------------------- */ #faq .contHero { padding-bottom: calc(32/750*100%); } #faq .cHero__category { width: calc(83/750*100%); } #faq .cHero__contsBlock { } #faq .cHero__ttl { margin-top: calc(-54/750*100%); } #faq .contTab { padding-top: calc(100/750*100%); } #faq .cTab__list { width: calc(650/750*100%); margin: 0 auto; } #faq .cTab__list__item { width: 100%; margin-top: calc(25/650*100%); } #faq .cTab__list__item:first-child { margin-top: 0; } #faq .cTab__list__item a { display: block; background: #fff; } #faq .contFaqList { padding-top: calc(100/750*100%); } #faq .cFaqL__contsBlock { width: calc(650/750*100%); margin: calc(80/750*100%) auto 0; padding-top: calc(20/750*100%); } #faq .cFaqL__contsBlock:first-child { margin-top: 0; } #faq .cFaqL__heading {} #faq .cFaqL__list { width: 100%; margin-top: calc(30/650*100%); } #faq .cFaqL__list__item { background: #000; border: 2px solid #fff; border-radius: 10px; margin-top: calc(40/650*100%); } #faq .cFaqL__list__item:first-child { margin-top: 0; } #faq .cFaqL__list__item dl, #faq .cFaqL__list__item dt, #faq .cFaqL__list__item dd { position: relative; } #faq .cFaqL__list__item .cFaqL__que { padding: calc(20/646*100%) calc(20/646*100%) calc(15/646*100%) calc(65/646*100%); border-bottom: 1px solid #fff; } #faq .cFaqL__list__item .cFaqL__que::before { content: ""; display: block; background: url("../../faq/_img/list/icon_q.png") center center no-repeat; background-size: contain; width: calc(35/750*100vw); height: 0; padding-top: calc(35/750*100vw); position: absolute; top: 0; left: calc(20/646*100%); margin-top: calc(20/646*100%); } #faq .cFaqL__list__item .cFaqL__que p { font-size: 3.4666vw; line-height: 1.41; } #faq .cFaqL__list__item .cFaqL__ans { padding: calc(20/646*100%) calc(20/646*100%) calc(15/646*100%) calc(100/646*100%); } #faq .cFaqL__list__item .cFaqL__ans::before { content: ""; display: block; background: url("../../faq/_img/list/icon_a.png") center center no-repeat; background-size: contain; width: calc(35/750*100vw); height: 0; padding-top: calc(35/750*100vw); position: absolute; top: 0; left: calc(55/646*100%); margin-top: calc(20/646*100%); } #faq .cFaqL__list__item .cFaqL__ans p { font-size: 3.2vw; line-height: 1.61; } #faq .cFaqL__list__item .cFaqL__ans p + p { margin-top: 1em; } #faq .cFaqL__list__item .cFaqL__ans p a { color: #f6ff00; } #faq .cFaqL__list__item .cFaqL__ans p .sml { font-size: 0.9em; } #faq .cFaqL__list__item .cFaqL__ans .textIndent { display: inline-block; text-indent: -1em; padding-left: 1em; } #faq .cFaqL__list__item .cFaqL__ans dl { margin-top: 2em; font-size: 3.2vw; } #faq .cFaqL__list__item .cFaqL__ans dd { margin-top: 0.5em; } #faq .cFaqL__list__item .cFaqL__ans dd p { font-size: 0.8em; } #faq .cFaqL__list__item .cFaqL__ans .cFaqL__ans__notesList { margin-top: 0.8em; font-size: 0.8em; } #faq .cFaqL__list__item .cFaqL__ans .cFaqL__ans__notesList li { text-indent: -1em; padding-left: 1em; line-height: 1.41; margin-bottom: 0.3em; } @media screen and (max-width: 640px) { } @media screen and (min-width: 641px) { #faq .contHero { padding-bottom: calc(50/1920*100%); } #faq .cHero__category { width: calc(169/1920*100%); } #faq .cHero__contsBlock {} #faq .cHero__ttl { width: calc(536/1920*100%); margin-top: calc(422/1920*100%); margin-left: calc(141/1920*100%); } #faq .contTab { padding-top: calc(100/1920*100%); } #faq .cTab__list { width: 100%; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #faq .cTab__list__item { width: calc(400/1920*100%); margin: 0 calc(25/1920*100%) 0; } #faq .cTab__list__item a:hover { background: #e9c941; } #faq .contFaqList { padding-top: calc(60/1920*100%); } #faq .cFaqL__contsBlock { width: calc(1200/1920*100%); margin: calc(20/1920*100%) auto 0; padding-top: calc(40/1920*100%); } #faq .cFaqL__contsBlock:first-child { margin-top: 0; } #faq .cFaqL__heading { width: calc(600/1200*100%); } #faq .cFaqL__list { margin-top: calc(30/1200*100%); padding-bottom: calc(20/1200*100%); } #faq .cFaqL__list__item { border-width: 3px; border-radius: 15px; margin-top: calc(30/1200*100%); } #faq .cFaqL__list__item:first-child { margin-top: 0; } #faq .cFaqL__list__item .cFaqL__que { padding: calc(15/1194*100%) calc(30/1194*100%) calc(15/1194*100%) calc(60/1194*100%); } #faq .cFaqL__list__item .cFaqL__que::before { width: calc(25/1194*100%); padding-top: calc(25/1194*100%); left: calc(30/1194*100%); margin-top: calc(15/1194*100%); } #faq .cFaqL__list__item .cFaqL__que p { font-size: 0.8695vw; line-height: 1.41; } #faq .cFaqL__list__item .cFaqL__ans { padding: calc(15/1194*100%) calc(30/1194*100%) calc(15/1194*100%) calc(90/1194*100%); } #faq .cFaqL__list__item .cFaqL__ans::before { width: calc(25/1194*100%); padding-top: calc(25/1194*100%); left: calc(60/1194*100%); margin-top: calc(15/1194*100%); } #faq .cFaqL__list__item .cFaqL__ans p { font-size: 0.8333vw; } #faq .cFaqL__list__item .cFaqL__ans dl { font-size: 0.8333vw; } #faq .cFaqL__list__item .cFaqL__ans dd p { font-size: 0.9em; } #faq .cFaqL__list__item .cFaqL__ans .cFaqL__ans__notesList { font-size: 0.9em; } } /* ---------------------------------------------------------------------------------------------------------------- #guideline ---------------------------------------------------------------------------------------------------------------- */ #guideline .contHero { padding-bottom: calc(14/750*100%); } #guideline .cHero__category { width: calc(251/750*100%); } #guideline .cHero__contsBlock { } #guideline .cHero__ttl { margin-top: calc(-116/750*100%); } #guideline .contGuideline { padding-top: calc(100/750*100%); color: #efefef; } #guideline .cGl__leadtext { width: calc(650/750*100%); margin: 0 auto; line-height: 1.81; font-size: 2.9333vw; } #guideline .cGl__contsBlock { background: rgba(0,6,46,0.5); margin: calc(50/750*100%) auto 0; padding: calc(50/750*100%); font-size: 2.6666vw; } #guideline .cGl__dl + .cGl__dl { margin-top: 3em; } #guideline .cGl__dt { border-bottom: 2px solid #337bbe; padding-bottom: 0.5em; margin-bottom: 0.8em; font-weight: bold; } #guideline .cGl__ul li { text-indent: -1em; padding-left: 1em; line-height: 1.61; margin-bottom: 1em; } #guideline .cGl__box { background: rgba(0,0,0,0.4); border: 1px solid #337bbe; text-indent: 0; padding: 1em; margin-bottom: 1em; } @media screen and (min-width: 641px) { #guideline .contHero { padding-bottom: calc(50/1920*100%); } #guideline .cHero__category { width: calc(505/1920*100%); } #guideline .cHero__contsBlock {} #guideline .cHero__ttl { width: calc(1501/1920*100%); margin-top: calc(335/1920*100%); margin-left: calc(137/1920*100%); } #guideline .contGuideline { padding-top: calc(100/1920*100%); } #guideline .cGl__leadtext { width: calc(1500/1920*100%); margin: 0 auto; line-height: 1.81; font-size: 0.8333vw; } #guideline .cGl__contsBlock { width: calc(1600/1920*100%); margin: calc(45/1920*100%) auto 0; padding: calc(50/1920*100%); font-size: 0.78125vw; } }